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
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.
How to Create Better Reactive Design
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.
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.
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.”
Use Skeleton Screens to Improve Perception
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.
Use Clear UI Elements
Used to inform users of latency and network states.
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 an increase in like count—regardless of the strength of the internet connection.
Multiple Background Images
Use multiple background images when loading a large image to improve perceived performance. Google Image search does this well.
Design
Design to load content based on importance before order.
Lazy Load Content When 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.
Reduce Visual Garbage
Display only core content and navigation elements as the page loads.
Moving Forward
Continuously iterate and improve your process.