The power of rich visual modeless feedback

One of my favorite aspects of product design is the feedback mechanism. When I think of feedback, I think fundamentally about the car dashboard. Nearly every action that a driver makes in a car is responded to with one or more forms of feedback whether audible, tactile or visual.

Car Dashboard

When turning into a left lane, the driver will (hopefully) use the turn signal lever to indicate the change of lanes. Pulling the lever anti-clockwise will activate the turn signal on the exterior of the car, but will also offer the following feedback:

  • Audible: The dashboard will emit a clicking sound
  • Visual: A green arrow will flash on and off in the dashboard
  • Tactile: The lever will click or nudge over

All of these feedback mechanisms work in tandem to communicate with the driver that the turn signal is active and working. As a side note, if you’ve ever activated your turn signal and it emitted a clicking sound at double the normal rate, it usually means that one of your lights is dead (this is considered negative audible feedback). That’s great design when you consider how impossible it would be to turn on your signal indicator, get out of the car, run around it to check all the lights are working and then jump back in again, all at 30 miles an hour!

But does every feedback mechanism have to activate in response to a user? Absolutely not. Consider the car dashboard again. If your car’s engine starts acting up, you usually see a light turn on in the dashboard to indicate it’s near empty. The driver hasn’t performed a specific action in the car to make this happen, making it modeless.

In interface design, we call that Rich Visual Modeless Feedback, or RVMF for short (pronounced riv mof). Let’s break this down:

  • Rich: It gives in-depth information about the status or attributes of a process or object
  • Visual: Because you can see it
  • Modeless: It requires no special action or mode shift from the user (it doesn’t interrupt)
  • Feedback: Because it is communicating information

Common forms of RVMF

Probably one of the most commonly accepted forms of rich visual modeless feedback can be found in the email inbox. When you receive new emails you see RVMF in the left panel and in the inbox list. Users see RVMF when a new message is received in most email applications.

This is indicated in Microsoft Outlook’s left pane with bold text and a blue number. Users can also quickly scan a list of emails to see which are unread. Unread emails are indicated by bold text and a closed envelope icon.

Microsoft Outlook

Similarly, Apple Mail highlights new messages with a number and graphic background. Instead of bolding text, which can be less readable, the Mail interface highlights new messages in the inbox with a blue circle. In the title bar, the number of unread messages is stated in text.

Apple Mail

Alerting is another behavior in interface design where RVMF can be effectively used. Often, alerts such as errors may occur in other tabs, but can still be communicated to users where they are given the choice of breaking their workflow or ignoring the alert until later.

Alerts in Tabs

Progress bars frequently show RVMF like in this example for GoldMail. The bar in progress provides feedback and can change once completed. In the event of a stall or error then the progress bar can change color, the text could change, or an icon could be presented in front of the bar. The bar could disappear completely and be replaced by an error statement also.

GoldMail upload progress bar

This iPhone productivity application called reQall shows RVMF via a progress bar to indicate that the user is currently recording and how much time is left to record a message. The green synthesizer bar also uses RVMF to let the user know that their voice is being heard and the volume at which it’s being recorded. This can be helpful to understand whether to get close or further away from the microphone.

reQall

Communicating status

RVMF can be used in all types of controls including tables. In this example, color, iconography and shape are used to highlight state at the row, as well as the individual cell level.

RVMF Alerting in table

Red is used to indicate that the currently entered data will affect the analysis of the system. The table row has a light red background. The table cell contains a thick dark red outline and the first cell in the table highlights that there is missing information with a number and triangle shaped icon. It’s helpful to include multiple types of RVMF in tables as a cell may not be visible on screen at all times.

Yellow indicates that data should be filled in, but won’t break the analysis. This status has contains the same style of RVMF but is colored differently. Remember that it’s always best to differentiate states with more than just color, since it can not be depended on to display consistently and to accommodate users with a color blindness condition.

Subtle forms of modeless feedback

RVMF can be light in visual weight as is illustrated in this Firefox form field example:

Firefox and GMail

The browser is able to identify that text is misspelled and highlights this error with a red dotted underline. It’s subtle but noticeable and doesn’t interfere with the user’s workflow.

RVMF and errors

Many sites, including Mint, now provide inline feedback that is both positive and negative.

Mint data entry errors

The positive feedback is highlighted with a subtle graphic to the right of the field and errors result in bright red text, a red outline around the text field and a bright X.

RVMF and complex applications

Complex applications like NetApp’s Data Protection Manager may sometimes need to display multiple status signals at one time, as is shown in the example here:

NetApp Protection Manager status types

High density screens like this make it harder to scan information for signals. It is imperative to selectively determine what information is critical and requires the user’s immediate attention, versus information that is simply helpful and can viewed later. The protection status in the left column plays a big role in determining the health of backed up data in the system, so the different status types are very bright and each type is visually weighted according to severity. Lag errors and lag warnings are the most critical and are accompanied by bold colorful text. Policies in the right column may also indicate status but it’s less critical so RVMF icons here are significantly smaller.

Animated RVMF

Yahoo! Finance displays whether the stock markets are up or down for the day, but also uses RVMF in the form of animation to indicate recent changes by altering the color of the background behind the text. This transition highlights that data has changed.

Yahoo! Finance market summary

The Mac OS X dock also uses RVMF with iconography and animation in some cases:

Mac OS X Bouncing Dock Icons

When software updates are available, the software update icon bounces in the dock to get attention. This kind of animation can be used to great effect to get attention. But beware, as animations can be an annoying distraction if they are not matched with information that deserves this level of highlighting.

Summary

RVMF is most effective at presenting changes in status, progress, or displaying errors.

Use the same visual design principles when considering RVMF as with other forms of interface design:

  • Use visual hierarchy to insure that the critical RVMF data stands out on the screen
  • Use more than just color as a vector to represent RVMF
  • Use color consistently and meaningfully to represent status and create a learnable color system (the Yahoo! Finance example utilizes commonly accepted color codes to represent direction)
  • Use animation consciously and sparingly

RVMF is a great technique to be used in interface design, but it’s not generally appropriate for experiences that target beginners. Some standard design patterns, such as progress bars, are generally well-known and understood but custom controls always require some decoding by users at first.

There are many examples of RVMF in use today. Please let me know if you have other good examples and I’ll add screenshots to this journal post.

5 Comments

David Stewart
Thanks for your article. It is very timely for me. I'm working on a consumer security product and we definitely have issues with providing feedback. I've used the dashboard metaphor a lot in trying to explain how our users interact with our software. One of my favorite examples is Growl Alerts. Growl is a Mac app that many applications (Transmit is a great one) use to provide messages to users. Growl alerts find a balance between assertive and passive. They deliver the message without being intrusive.
Andreas Lipphardt
Nick, This Management Dashboard provides Rich, Visual, Modeless Feedback. http://www.bonavistasystems.com/Images/CompetitionSampledashboard.PNG http://www.bonavistasystems.com/Images/OverviewZoomDashboard.PNG (Rich & Visual) The small are charts (Sparklines) communicate the trend of the most important Key Figures over the last 12 month on small screen real estate. Bullet Graphs (the small grey bars) are given more visual weight to communicate the current status of a Key Figure. The red icon, clearly stands out and is communicating (Feedback ) that a Key Figure is out of control and requites action. I feel that in general User Interfaces should try to copy new techniques from data visualization (Sparklines, Bullet Graphs) to create richer Interfaces that work effectively. Andreas http://blog.xlcubed.com
Nick Myers
Hi David- Thanks for your comments. I'm glad you found the article helpful. I haven't fully explored Growl on my Mac but will see how it is. At first glance, it certainly uses the principles of RVMF to great effect. It's easy to see how you could get overwhelmed with messages if you're not careful but hopefully that's manageable.
Nick Myers
Andreas - I'm a big fan of the BonaVista Systems MicroCharts and I could talk all day about sparklines and dashboards. Perhaps in another journal entry? You're certainly right that these graphs include RVMF in a minimal non-intrusive way. It does raise a good point that for an element to be feedback it's generally not persistently shown on the screen at all times. So while the sparklines alone are not examples of RVMF, the red dots or any alert on top of sparklines would be.
Designing UI Validation
[...] their workflow.  For more detail about the rich visual modeless feedback, Alan Cooper explains the concept in detail on his [...]

Post a comment

We’re trying to advance the conversation, and we trust that you will, too. We’d rather not moderate, but we will remove any comments that are blatantly inflammatory or inappropriate. Let it fly, but keep it clean. Thanks.

Post this comment