Set of usability heuristics specifically compiled for Rich Internet Applications (RIA) or Single-Page Applications (SPA).
By jordisan
Rich Web / Single-Page App (SPA) Usability Heuristics Heuristics set
1
-
01. Appropriate level of interaction/richness
-
01.01. Richness is added only where it significantly improves usability.
When designing RIAs, it is tempting to design many new features that add a lot of richness. Go slowly, adding richness where it significantly improves usability, and relying on traditional models where these better suit your user group.
-
01.02. Available interactions match the look of the system.
Users expect to directly manipulate objects on the screen, such as dragging and dropping appointments, because they are used to doing so in desktop systems that look similar to the application at hand.
-
01.03. Command-based interactions are available as alternative to rich interactions.
Most desktop applications provide a command-based way to move objects from one location to another. Where possible, we recommend the same approach for web-based applications.
-
01.04. Interactive guides (like tutorials and animations) are used to explain complex interactions.
Using animation or video tutorials with concise narration can often guide a user through complex tasks, while engaging individuals who learn better from visual or audio instruction rather than text. Showing the required steps is often easier for the user to understand than mentally translating a text description of the steps to the appropriate interface elements. Providing immediate contextual help through the use of tool tips and contextual help buttons allows the user to complete their tasks without having to shift focus to a help system.
-
01.05. Error messages are displayed near the place where they are caused or may be fixed.
Display error messages along with the appropriate application controls or entry field sot that the user can take appropriate corrective action when reading the message. The ability to overlay help messages or illustrations directly over the interface can be useful in explaining task flow between related screen elements.
2
-
02. Identify interactive elements
-
02.01. Desktop-like interactions are clearly visible.
Some pages and features rely solely on users discovering application functionality such as right-click menus, the ability to drag objects, or content appearing only after a cursor rolls over an object. Because no alternative methods such as navigation menus or visible control sets are provided, task failures rates are often high.
-
02.02. Metaphors and controls that mimic physical objects work consistently with their real-world counterparts.
One way is to use controls that mimic things people are familiar with from the physical world. While RIAs can offer novel metaphors, novelty often slows usefulness and usability. When using metaphors, ensure that they act consistently with their real-world counterparts. If application functions cause the metaphor to behave in ways that don’t match the real world, the metaphor has lost its usefulness and should be discarded in favor of a different concept.
-
02.03. Rollover/hover elements are visually identified and their target areas are large enough.
The Web 2.0 design aesthetic – with its emphasis on simplicity – has spawned a related technique where actions for an item on the page are only revealed on rollover. The implementation can have a huge impact on usability. If the entire object is “hot” and creates a large target area for displaying the actions, discoverability is improved.
3
-
03. Adequate feedback is provided for part-page updates
-
03.01. Visual attention is attracted by movement and high color contrast towards part-page updates.
We can use this to our advantage and draw the eye to the updated part of the page.
-
03.02. Changes occur quickly and close to where the user is looking; for example, after clicking a button.
When we take an action such as clicking a button, our eyes remain fixed on that point for a short time, then release to look somewhere else. By making sure the change occurs quickly and as close as possible to where they are looking, we can ensure the eye is drawn to the appropriate place.
-
03.03. Just one update is made at a time, and high-contrast, moving images are not used elsewhere on the page.
Visual attention can only be focused on one thing at a time. Make one update at a time, and don’t use high-contrast, moving images elsewhere on the page. 37 Signals were one of the first to do this, popularizing the yellow fade technique.
-
03.04. Performance is good enough for rich interactions.
Sluggish performance can result in users blowing right by important functionality.Essentially, this lets users perform functions that the system can’t adequately support. It’s very frustrating for users to try to find the "sweet spot" -the point at which they can perform the task as quickly as possible without breaking the functionality.
-
03.05. Background-processing indicators are adequately provided.
RIAs should leverage the rich display capabilities to provide real-time status indicators whenever background processing requires the user to wait. While progress indicators are frequently used during an extensive preload when launching an application, they should also be used throughout a user’s interaction with data. This may be monitoring backend data processing time or preloading time.
4
-
04. Break the standard (page) model adequately
-
04.01. Visually express the difference between pages and in-page changes.
Most users have developed a mental model of the Web based on pages—every click takes you to a new page. This is a strong mental model, and is reasonably accurate for the majority of content-rich sites. Users will continue to apply their page-based mental model to RIAs unless they can clearly identify that the RIA uses a different model. You may need to design different visual navigation models so people can identify when they are getting a new page.
-
04.02. The back button works as expected when the user needs it.
Consider when people may need to go “back”—this will give you clues about where to use pages. Don’t disable the back button, reducing users’ control of their situation. The RIA should include code that is aware and responsive to browser history.
-
04.03. The system doesn't use technology-specific terms.
While RIAs are made possible by the functionality of Flash and other technologies, users are usually not familiar with terms like rollover, timeline, actionscript, remoting, or CFCs – such technology-based terms should be avoided in the application.