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.
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.
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.
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.
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.
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.
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.
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:
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.
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:
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.
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.
The Mac OS X dock also uses RVMF with iconography and animation in some cases:
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.
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.