Principles of Display Design Home Principles:  Perceptual Perceptual  Mental Model Mental Model  Attention Attention  Memory Memory About Links Site Map IEE437 Displays are typically human-made artifacts designed to support the perception of relevant system variables and facilitate the further processing of that information. To design an effective display there are thirteen design principles that should be followed. They can be categorized into perceptual, mental model, attention, and memory principles. Click on a category to the left to find out more. Last updated December 2, 2004

Perceptual Principles Home Principles:  Perceptual  Mental Model Mental Model  Attention Attention  Memory Memory About Links Site Map Principles of Display Design LegibilityLegibility Absolute Judgment Top-Down ProcessingAbsolute JudgmentTop-Down Processing Redundancy GainRedundancy Gain DiscriminabilityDiscriminability The perceptual principles deal with the way a user initially perceives the material presented. The information needs to be presented in a clear and unambiguous manner so as to avoid confusion by the user. There are five perceptual principles listed above. Click on any one to learn more.

Perceptual Principles Home Principles:  Perceptual  Mental Model Mental Model  Attention Attention  Memory Memory About Links Site map Make displays legible (or audible) – This is the most important principle of display design. Every display must be legible (or audible, if needed) to allow the user to interact with it successfully. The correct combination of colors, contrasts, and sounds should be used to ensure that the user gets the necessary information from the display. Principles of Display Design Legibility Absolute Judgment Top-Down ProcessingAbsolute JudgmentTop-Down Processing Redundancy GainRedundancy Gain DiscriminabilityDiscriminability

Perceptual Principles Home Principles:  Perceptual  Mental Model Mental Model  Attention Attention  Memory Memory About Links Site Map Avoid absolute judgment limits – The design of a display should avoid the use of only one sensory variable, such as color size, or loudness. These variables, by themselves, can contain many different levels. The user may have trouble discriminating between the different levels because of errors in judgment. Think of a single status light that could have one of the following colors, and the following instructions for each color: Principles of Display Design LegibilityLegibility Absolute Judgment Top-Down ProcessingTop-Down Processing Redundancy GainRedundancy Gain DiscriminabilityDiscriminability If the light is yellow, proceed with caution. If the light is amber, there is a problem.

Perceptual Principles Home Principles:  Perceptual  Mental Model Mental Model  Attention Attention  Memory Memory About Links Site Map Top-down processing – People perceive and interpret information based on prior experiences and what they expect to see. If a display contains information that differs from their expectations, they may see what they were expecting instead of what is really there. Because of this, information that is contrary to expectation must be presented in a way that draws extra attention to the differing area. The following list is an example: A should be on B should be on C should be on D should be off Principles of Display Design LegibilityLegibility Absolute Judgment Top-Down ProcessingAbsolute Judgment Redundancy GainRedundancy Gain DiscriminabilityDiscriminability

Perceptual Principles Home Principles:  Perceptual  Mental Model Mental Model  Attention Attention  Memory Memory About Links Site Map Redundancy gain – When conditions for display interpretation are not favorable, it is more likely that the display will be interpreted correctly if the information is presented in more than one way. A traffic light is a good example of this, using both color and light position as ways of presenting the information. If a user cannot tell what color the light is, they will still be able to interpret the information correctly by the position of the light. Principles of Display Design LegibilityLegibility Absolute Judgment Top-Down ProcessingAbsolute JudgmentTop-Down Processing Redundancy Gain DiscriminabilityDiscriminability

Perceptual Principles Home Principles:  Perceptual  Mental Model Mental Model  Attention Attention  Memory Memory About Links Site Map Discriminability. Similarity causes confusion. Use discriminable elements. – Similar signals may be confused when the user initially perceives the information or later on if they have to retain the information in working memory. Two signals are similar based on the ration of similar features to different features. The phone numbers and look more similar than the numbers 85 and 65 because there are more similar elements in the phone numbers. When two signals are similar, be sure to highlight the dissimilar elements. Principles of Display Design LegibilityLegibility Absolute Judgment Top-Down ProcessingAbsolute JudgmentTop-Down Processing Redundancy GainRedundancy Gain Discriminability

Mental Model Principles Home Principles:  Perceptual Perceptual  Mental Model  Attention Attention  Memory Memory About Links Site Map When a user sees a display, they usually interpret the display based on their expectations of the system being displayed. These expectations come from past experiences which have formed a mental model of the system and how it works. It is important to design displays that are consistent with the mental models of the user. There are two principles that deal with the user’s mental model. Choose one above to learn more. Principles of Display Design Pictorial realismPictorial realism Moving partMoving part

Mental Model Principles Home Principles:  Perceptual Perceptual  Mental Model  Attention Attention  Memory Memory About Links Site Map Principle of pictorial realism-a display should look like the variable it represents and be represented in the manner that the user would expect. If a user perceives a fuel tank as being full when the gauge is to the right, then the gauge should be designed in this manner; designing a gauge with the full point at the left would create confusion with the user. Principles of Display Design Pictorial realism Moving partMoving part

Mental Model Principles Home Principles:  Perceptual Perceptual  Mental Model  Attention Attention  Memory Memory About Links Site Map Principle of the moving part-the moving element of any display should be consistent with the user’s mental model of how the displayed element moves in the physical system. For example, if a pilot thinks that their aircraft moves upward with increasing altitude, an altimeter should move upward as the plane gains altitude. Principles of Display Design Pictorial realismPictorial realism Moving part

Principles Based on Attention Home Principles:  Perceptual Perceptual  Mental Model Mental Model  Attention  Memory Memory About Links Site Map When display contain many elements, a user must divide his or her attention between the different elements of display and occasionally must give attention to more than one item at the same time. With this in mind, a good display must be designed with the appropriate layout to allow the user to access the necessary information easily. Choose a principle above to learn more. Principles of Display Design Information access costInformation access cost Proximity compatibility Multiple resourcesProximity compatibilityMultiple resources

Principles Based on Attention Home Principles:  Perceptual Perceptual  Mental Model Mental Model  Attention  Memory Memory About Links Site Map Minimizing information access cost- There is usually a cost associated with the effort and time it takes a user to switch attention from one display location to another. Good designs keep the most frequently accessed information at a central location of the display, which minimized time and effort to obtain this information. Principles of Display Design Information access cost Proximity compatibility Multiple resourcesProximity compatibilityMultiple resources

Principles Based on Attention Home Principles:  Perceptual Perceptual  Mental Model Mental Model  Attention  Memory Memory About Links Site Map Proximity compatibility principle- in some cases, more than one piece of information must be obtained from a display and used to conduct a task. Because attention must be given to both pieces of information for the same purpose, these items should be placed in appropriate proximity to allow the user to easily access the items at the same time. Care should be taken to avoid placing the items so close that perception of the information is obstructed, such as overlapping two items. For example, a graph and its legend should be placed in close enough proximity to allow the user to read the graph and interpret it with ease. Principles of Display Design Information access costInformation access cost Proximity compatibility Multiple resourcesMultiple resources

Principles Based on Attention Home Principles:  Perceptual Perceptual  Mental Model Mental Model  Attention  Memory Memory About Links Site Map Principle of multiple resources- It is difficult for an operator to observe, perceive and process lots of information at one time. To help fight against this human characteristic, design by dividing all of the information across multiple resources. For example using visual and auditory resources at the same time is more effective than presenting information solely visually or auditorily. Principles of Display Design Information access costInformation access cost Proximity compatibility Multiple resourcesProximity compatibility

Memory Principles Home Principles:  Perceptual Perceptual  Mental Model Mental Model  Attention Attention  Memory About Links Site Map Human memory has limitations and makes mistakes very easily. We can only keep a small amount of information in our short-term memory and information in our long-term memory can be forgotten or can cause us to do things we should not. The principles of memory address these issues and provide methods to prevent the occurrence of these mistakes. Choose a principle above to learn more. Principles of Display Design Knowledge in worldKnowledge in world Predictive aiding ConsistencyPredictive aidingConsistency

Memory Principles Home Principles:  Perceptual Perceptual  Mental Model Mental Model  Attention Attention  Memory About Links Site Map Replace memory with visual information: knowledge in the world- The most general memory principle, requires important information stored in memory to also be reaffirmed in the real world. Good display designs have a balance of requiring the user to retain information in the working memory and retrieving it from long term memory and presentation of the information visually. A list is a good way to prevent the user from forgetting important information. Principles of Display Design Knowledge in world Predictive aiding ConsistencyPredictive aidingConsistency

Memory Principles Home Principles:  Perceptual Perceptual  Mental Model Mental Model  Attention Attention  Memory About Links Site Map Principle of predictive aiding- A predictive display removes a complex demanding task and replaces it with a simple perceptual display. When occupied with many tasks the user takes a reactionary response to displays. Users are more effective being proactive than reactive and displays that are more likely to predict what is going to happen are tools used for increasing human performance. Principles of Display Design Knowledge in worldKnowledge in world Predictive aiding ConsistencyConsistency

Memory Principles Home Principles:  Perceptual Perceptual  Mental Model Mental Model  Attention Attention  Memory About Links Site Map Principle of Consistency- Human’s long term memory is capable of working too well, instinctively making the user take actions that aren’t needed. Since this is unavoidable, good designs should take advantage of this human tendency. Design displays in a way that is consistent with current displays the user interacts with and previously used displays. For example use the same colors and shapes across a set of displays so that they always mean the same thing. Principles of Display Design Knowledge in worldKnowledge in world Predictive aiding ConsistencyPredictive aiding

Principles of Display Design Home Principles:  Perceptual Perceptual  Mental Model Mental Model  Attention Attention  Memory Memory About Links Site Map About this Site This site was designed for human factors engineering final project at Arizona State University. Contact us at for questions/comments or to report problems with the Last updated December 2, 2004

Principles of Display Design Home Principles:  Perceptual Perceptual  Mental Model Mental Model  Attention Attention  Memory Memory About Links Site Map Links Arizona State University Home site of Arizona State University Department of Industrial Engineering at ASU main Home site of the Industrial Engineering Department. Dr. Boren’s Human Factors Engineering website Main class website with information about class, additional links, and staff information. Design principles of graphical user interfaces Basic considerations for designing GUIs, as presented by Professor Vicki L. Sauter from University of Missouri - St. Louis. Center for Instructional Design and Development Web page from George Washington University detailing the steps in designing an effective instructional website

Principles of Display Design Home Principles:  Perceptual Perceptual  Mental Model Mental Model  Attention Attention  Memory Memory About Links Site Map Home Perceptual Principles Legibility Absolute judgment Top-down processing Redundancy gain Discriminability Mental Model Principles Pictorial realism Moving part Principles Based on Attention Minimize information access cost Proximity compatibility Principle of multiple resources Memory Principles Replace memory with visual information Principle of predictive aiding Principle of consistency About Links