Heuristics: Exploring Visibility of System Status Examples

Breadcrumbs to Vibrating Smartwatches – Exploring Real World Visibility of System Status Examples

Heuristic evaluation is a method of assessing the usability of a system. Ten usability principles form the fundamental criteria of judging in a heuristic evaluation.

The most accepted set of heuristics is defined by Jakob Nielsen. It features aspects ranging from error prevention and documentation to user freedom and visibility of system status.

In this article, real-world visibility of system status examples are given, explored and discussed.

Visibility of System Status – Definition

Definition:

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. (Nieslon)

This heuristic is composed of two fundamentals:

1. 1. 1. Visibility –  The system offers immediate feedback to indicate that it is responding. The control must also be visible so that users are clearly aware of its presence and availability.
      2. Feedback – This is some form of response by the system in response to a user action.
         

Making It Clear Where You Are and Where You Can Go

Online, visibility of system status requires that users are not only informed about the page they are currently on: But also the position of that page is in relation to the rest of the website. Can the user tell where they are from looking at the interface? The more obvious it is for the user, the better.

Breadcrumb Navigation

Breadcrumbs are one of many visibility of system status examples found online. They indicate the user’s current location and the likely path it took them to get there.

Google explains:

A breadcrumb trail on a page indicates the page’s position in the site hierarchy. A user can navigate all the way up in the site hierarchy, one level at a time, by starting from the last breadcrumb in the breadcrumb trail.

Smashing Magazine states that breadcrumbs work as an ‘effective visual aid’ which shows the user’s location within the site hierarchy. Thus, breadcrumbs are a ‘great source of contextual information for landing pages.’

Note that any page on a website could be the first page that a user opens (termed the ‘landing page’). This visibility of system status example is particularity useful for larger sites. It is often seen on educational, e-commerce and classified platforms.

Furthermore, breadcrumbs often have distinct styling, which fuels their visibility.

Real world examples of breadcrumb usage:

Employing Noticeable Changes in the Visual Design

Visual design changes can help distinguish different departments, sections or even countries within a website. The user can then glean that they are in a distinct section based unique and/or noteworthy visual cues. This allows conveying system status in a clear, but subtle and holistic manner. The Nielson Norman Group explains:

Visual design changes: Color-coding, changes in branding, and other visible differences can signal a change of location. Color-coding (where the predominant color changes depending on the section of the site) is usually found in websites with sharply distinct types of content. For example, magazines, news sites, and many organizations use color and brand changes to differentiate among features, departments, and product families.

Examples on Mozilla.org

The website of the Mozilla Foundation (mozilla.org) is split into different subdomains and departments. Changes in color scheme, typography, and layout are some factors used to distinguish some of the different sections in this visibility of system status example.

‘Mozilla Add-on Developer Hub’:

‘The Mozilla Blog’:

‘Mozilla Bugzilla’:

Audio and Haptic Feedback Mechanisms for Conveying System Status

Visibility of  the system’s status is not confined to visual feedback as the heuristics’ name suggests. Audio and haptic mechanisms can serve as a (sometimes fundamental) feedback mechanism too.

Notifications in Mobile and Online Messaging Services

The use of audio and vibration in messaging apps is another common visibility of system status example. Short beeps, tings, and vibrations make users immediately aware of changes in the app. This is widespread in both desktop and mobile messaging services; Such as WhatsApp, iMessage, Telegram, Google Hangouts and Skype. This type of feedback (for instance, an audio alert for a new message) has become standard and expected by users. (In other words, it caters to predictability.)

Haptic Patterns in Smartwatches

Vibrations as a feedback mechanism for conveying system status is found in smartwatch design. Watches boast direct contact with the skin. This is unlike cellphones which are generally enclosed in a pocket; This affords some helpful means for conveying the system status.

“The fact that smartwatches are constantly snuggled up against our skin offers very unique opportunities for feedback in the form of haptics — leveraging the tiny vibration motors in the watch to relay different kinds of information…[Since] haptics are physical sensations rather than something we see or hear, we can create patterns not only based on the length of each vibration, but also the intensity. For example, 3 light vibrations could mean a calendar event is coming up, but 3 strong vibrations could mean that you are running late for an event.” – Johnny Chauvet, UI/UX Lead at TribalScale.

Automotive Safety and Navigation

General Motors have used haptics to convey the system status in an automotive safety context. The driver seat in some vehicles are fitted with mechanisms that can trigger light vibrations. The driver is alerted of the vehicle’s proximity to nearby objects by the intensity and location of the vibration on the seat.

General Examples of Visibility of System Status in Everyday Things

• Internet routers have different colored LED lights to show power status, signal strength, number of Ethernet connections, etc. These lights blink, change color, remain solid or switch off as a means of informative feedback.
• Vehicle alarm systems emit a loud ‘beep’ to confirm that the car has been locked
• Household appliances, such as washing machines and pressure cookers, emit sounds to notify users once their task/timer is complete. Such devices will also often ‘beep’ to confirm user input.
• Elevator offer several visibility of system status examples. For instance, display screens show the current floor number and whether the elevator is traveling up or down. Beeps are used in some elevators when a floor is reached and the door is about to open. Some may use an automated voice to announce the floor number. Elevator buttons often have a back-light that turns once pressed. This caters to visibility and feedback.
• A blinking ‘cursor’ in some calculators indicate that the device is turned on

Suggest your own visibility of system status examples in the comments section below.

---

Sources and helpful resources: