Imagine spending months designing and building a website that helps people improve memorization, only to have users give negative feedback of how slow, confusing, and unusable it is. When this happens, it’s often due to bad design, which creates bad experiences. Calling reactive design to the rescue!
How Reactive Design Is Different From Responsive Design
Designing reactive web and mobile applications involves a series of deliberate actions that try to preempt and solve issues people encounter when using your web or mobile applications. Responsive design, on the other hand, is an approach that ensures content on web pages renders properly on devices with different screen sizes, and form factors and on different browsers.
The main difference between these two approaches to design is that responsive design uses methods that allow content to adapt to various screen sizes and device form factors, while reactive design uses techniques to design products that always feel fast and responsive to user input and interaction.
Below are 10 tips for better reactive design, along with some examples of companies doing it the right way. Use these tips to design products that absolutely delight your users.
Don’t interrupt a user unless absolutely necessary. When additional content is loaded as a page renders, ensure the user interface still remains stable and usable.
If you already know what specific actions a user intends to take when using your application or website, design to accommodate it. A great example of this is what Instagram calls “optimistic actions.”
With skeleton screens, page layout elements and placeholder elements are rendered immediately, even as content loads and data populates the screen. If done well, skeleton screens help to acquaint your users with how content is laid out and encourage interaction even before the page fully renders. *Bonus tip: Consider using motion to further decrease perceived duration time.
Used to inform users of latency and network states.
Inform a user of the result of an action within two seconds of the interaction. An example of this tip applied IRL is the Twitter “like” button. Once a user clicks the like button on a tweet, the user receives instant visual feedback in the form of a color change of the button and an increase in like count—regardless of the strength of the internet connection.
Use multiple background images when loading a large image to improve perceived performance. Google Image search does this well.
Design to load content based on importance before order.
As a good rule of thumb, scrolling while a page is rendered should be possible and should not be restricted to certain parts of the page. Lazy load content (e.g., images, videos) into placeholders with a fixed height when the user scrolls into position.
Display only core content and navigation elements as the page loads.
Continuously iterate and improve your process.
