Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

hci
ux
ui

What is the difference between proactive and reactive interface?

Sheza Naveed

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Providing help and documentation to the user is the 10th usability heuristic provided by Neilson and Norman.

Help is provided to users through the following interfaces:

  1. Proactive interface - to familiarize users with the interface and prevent issues. It is provided before the user has encountered a problem. Examples include giving tips and onboarding tutorials etc.

  2. Reactive interface - to answer specific questions and troubleshoot problems. When users face a specific issue, they use reactive help for advice. Examples include documentation and videos targeted at specific issues.

Proactive interface

A proactive interface aims to make the users familiar with the interface. It is provided in three scenarios.

  1. To new users at the first launch of an interface.
  2. To novice users as they are gaining experience with an interface over time.
  3. To existing users upon adding a new feature or if the interface has been redesigned.

One can implement this type of help in various ways, such as tutorials, wizards, tooltips, templates, etc.

Presentation templates provided by Canva

There are two types of proactive help:

  1. Push revelations
  2. Pull revelations

Push revelations

Push revelations happen when the interface provides help that is not directly related to user goals. This type assists randomly regardless of the actions being performed by the user. This is not contextual help and is often ignored by the users as they do not want to read the information that is not relevant to them at that moment.

Message provided by Google Drive regarding a new block feature

Pull revelations

Pull revelations provide help by showing contextual tips. These revelations are relevant to the tasks being performed by the user. They can be provided when the user’s mouse is hovering on a specific icon or if the user starts a particular flow. Examples include contextual overlays, tooltips, etc. These are usually not ignored by the user as these provide relevant information at the relevant time that the user will probably require to carry out a task.

Canva providing help to start with a template

Proactive help guidelines

  • Provide it quickly, clearly, and concisely as it distracts the user from the core task.

  • Push revelations should be easily dismissable as the user might not need them at that time, or a user who has previously visited the interface might get frustrated. As shown below, the app provides a clear option to skip the tutorial.

MindNode app. Source: NN group
  • Prefer providing pull-over push revelations as help should not be excessively forced on users. We should use push revelations to provide information that is likely needed without context, whereas pull revelations should be relevant to assist users with their specific tasks.

  • Users should be able to access proactive help even after they have dismissed it as they might need it later. The content should be accessible elsewhere.

Reactive interface

Reactive help is provided when users face a problem. It aims to troubleshoot problems, answer queries and provide detailed documentation in case anyone wants to be more well versed in the functions. This can be provided in the form of documentation, specific topic tutorials, frequently asked questions, etc.

Reactive interface guidelines

  • Make the documentation comprehensive and detailed. Do not assume that a user is supposed to know something that is obvious to you. Also include corner cases and scenarios and not just obvious information.

  • Include pictures, videos, and graphics to help users understand. Instead of reading text-heavy information, a demo video or result picture can better convey information to users. The material design makes use of extensive visuals to convey information, as shown below.

  • Provide effective search methods. When users need specific help, they prefer immediate results, so the search should help them immediately.

  • Make categories of help topics related to each other so users can look into the specific categories.

Xbox's categories on its support page. Source: NN group
  • Support quick skimming and scanning of content by highlighting keywords, creating effective visual hierarchy, using bullets and lists, etc.

  • Highlight frequently viewed content as that might be the issue the current user faces. Thus, make access to it easy by highlighting it.

Conclusion

Both interfaces serve different purposes in different contexts. However, we should ensure that the user is not overloaded with information in any case.

RELATED TAGS

hci
ux
ui

CONTRIBUTOR

Sheza Naveed
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring