Imagine spending months designing and building a website which 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 render properly on devices with different screens sizes, 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.
### How to Create Better Reactive Design
Here 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.
1. Limit interruption.
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.
2. Anticipate a user action and design for it.
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.”
3. Use skeleton screens to improve perception of time and performance when loading content on a page.
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 to 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.
4. Use clear UI elements
to inform users of latency and network states.
5. Give instant feedback.
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 increase in like count—regardless of the strength of the internet connection.
6. Use multiple background images when loading a large image
to improve perceived performance. Google Image search does this well.
7. Design to load content based on importance before order.
8. Lazy load content when a user scrolls into position.
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.
9. Reduce visual garbage.
Display only core content and navigation elements as the page loads.
10. Continuously iterate and improve your process.