Principle of consistency

From perpendicular angel knowledgebase
Jump to navigation Jump to search

As referenced in the Wikipedia article on Human-Computer Interaction, this is one of 13 principles of display design outlined by Christopher Wickens et. al in the book An Introduction to Human Factors Engineering.

The Principle of Consistency points out that the user's knowledge of other systems will easily transfer to new systems if they are designed consistently. A user's long-term memory will trigger actions that are expected to be appropriate. Designs should be consistent. 

Note that there are multiple levels of consistency that must be taken into account when applying the Principle of Consistency. Universal Principles of Design separates them into four types:

  • External consistency refers to being consistent across the user's known experience. At the highest level, the user has expectations about how a website will work - links go places, and buttons do things, for example. Search boxes produce search results. Regardless of how consistent a website is internally, it must adhere to the global expectations of behavior. Global consistency can be researched and explored through [Comparative Analysis]. 
  • Internal consistency refers to being consistent within a specific design or site. Within a site, form fields should look and behave consistently, even if they're slightly different from how the same input fields look or behave on other sites. It's especially important on a single page or application to be consistent -- if a <select> input behaves differently on the first row than it does the third, the user will be unable to predict behavior and expectations. Internal consistency cultivates trust in users because it signals that the system has been designed and thought through.
  • Aesthetic consistency refers to the style and appearance of a site being consistent. Without aesthetic consistency, it's difficult for a user to establish a Sense of Place. At the furthest extreme, imagine a website where the font, color, and navigation changed on every page. The user would have no way to judge whether they were still on the same site, or whether the information they were viewing was related to the previous page, because the aesthetic inconsistency would be signaling that they'd left the original site. Aesthetic consistency also ties in deeply with brand communication and expectations --Coca Cola's red and white color scheme, "swoosh", typography, and bottle shape are consistently used across all of their enterprises, making it one of the most powerful brands in the world.
  • Functional consistency refers to the behavior of elements on a site and their consistency in meaning and action. This ties in tightly with external and internal consistency. Without functional consistency, it would be more difficult for users to predict the behavior of a given element. The rewind, play, pause, and record symbols originally designed for cassette recorders indicate to the user the behavior of the interactive elements, and have spread from cassettes to video recorders to slide projectors, music players, and video controls on the web. If each use case required us to reinvent the symbology that indicates the behavior, then it would have been much harder for the first video sites online to teach people how to play the video -- what would the play button look like?

Consider aesthetic and functional consistency in all aspects of design. Use aesthetic consistency to establish unique identities that can be easily recognized. Use functional consistency to simplify usability and ease of learning. Ensure that systems are always internally consistent, and externally consistent to the greatest degree possible. When common design standard exist, observe them. -Universal Principles of Design

The risk of consistency for consistency's sake

While it is important to align with common design standards, it is not always in the best interest of the user. Both UIE and Universal Principles of Design caution against applying consistent design simply because it's the consistent design. 

Use consistent approaches when possible, but do not compromise clarity or usability for consistency. In the words of Emerson, "A foolish consistency is the hobgoblin of little minds..." - Universal Principles of Design

The critical aspect of consistency, Jared Spool at UIE points out, is whether the application of consistency will aid them in understanding how to use what's being designed. Specifically, he states that it's not about consistency in design, it's about consistency with the user's mental model. "Will the user's current knowledge help them understand how to use what I'm designing?" (emphasis his).

Going back to the example of the video player, a user who's played music or videos on older devices and recognizes the symbols will be helped by the consistency between devices not because they're consistent, but because she already has current knowledge about what the symbols mean from prior exposure. 

On the other hand, when the hamburger menu was initially introduced, few users had any idea what it was, and thus almost no one used it until they were taught what it was and how it worked. In the meantime, sites and mobile apps began adopting it in droves. Many then changed to different navigation patterns, including Facebook, in part because of the recognition issues with the symbol. The word "menu" tests consistently better than the hamburger icon, and tablets present a better view of what options are available for the user. 

Without user research to know whether the audience actually understands the design from prior knowledge, a designer applying consistency for consistency's sake may be designing something that their users don't know how to use. If critical functionality is hidden behind interface elements users don't understand, they won't look for them. Thus, it's more important to research our users and understand their needs, then design to those needs, than to be consistent with the industry (or even internally consistent) for the sake of being consistent. 

Additional Reading