Grouping can be done by spatially placing related items near each other, using lines, or using background shading. The goal
is to reduce visual clutter using the least visible means. Not all information must be compared or linked to everything else.
Discourage meaningless comparisons by separating items from one another spatially.
6.6 Highlighting Key Information
Key information and controls should have more prominence than the less important information. This includes information
that is always important or information that is only important at the moment. This keeps users from being distracted by less
important information.
Highlighting should be done by placement, size, enclosure, and shading/coloring.
• Placement: Top-left region of display is area of greatest emphasis, all else being equal
• Size: Larger items receive more emphasis
• Enclosure: Anything enclosed by borders or surrounded by a fill color can stand out
Keep highlighting to a minimum since displays should only show necessary information and be organized to match the
users’ mental model and task workflow.
6.7 Situation Awareness
Users need to be aware of the current and future status of the operations and task. While performing a task, it is easy to lose
this awareness. The layout of the display should be designed to help users quickly recognize the status of operations, status
of the task, and where the operations and task is heading.
Using alarm state icons is helpful for situational awareness. Placing these icons on items that are in alarm and providing a
list of the highest priority alarms occurring helps users quickly assess the current situation. Using specific colors to indicate
alarms (and not using those colors elsewhere) allows the alarms to stand out against the rest of the information on the
screen.
Trends can also give an indication of what the process has been doing and where it may be heading. For example, a
temperature may be in the normal range, but if it has been steadily rising over a period of time, it may eventually rise
beyond the high limit. A trend display can quickly show this increase over time while a bar graph or numeric display cannot.
6.8 Physical Layout and Alignment
After determining what information needs to be on the display, the designer needs to determine how to physically locate
each piece of information on the screen. As previously mentioned, related information should be grouped and key
information highlighted. Additionally, if the information is part of the users’ mental model (important for accomplishing the
task), it may be laid out to match operations. For example, a pump that is vertically higher than a tank can have its
information appear higher than the tank on the display. This may be important so users are aware of the physical relation
between the two components. Make sure this is necessary information so it does not create visual clutter and restrict the
layout of the display.
Basic alignment guidelines:
• Labels for data are to be left justified, with the data to the right or underneath the label
• Numeric data that is related and meant to be compared are to be justified alike, with the decimal points aligning.
Usually this means data needs to be right justified
• If the entire display contains unrelated data, then the data is to be left justified
• Engineering units appearing to the right of the numeric values shall be left justified
• Data is not to be center justified unless it appears in a button, table or diagram where center justification is needed
• Align to a grid with attention paid to margins, spacing, and padding
Items on a display should be spaced far enough apart from each other so they do not overlap and are visibly distinct objects,
but not spaced so far apart that there is unnecessary unused space on the display. Objects close together are subconsciously
grouped together, so place related objects close to each other and unrelated objects farther apart to ensure users perceive
the correct relationship of data on a display.
Minimum spacing is 4 pixels to ensure there is no overlapping. For touch interface, spacing is 10 pixels between command
touch objects to prevent accidental activation. For navigation touch objects, there should be no additional padding between
objects. Additional information on size and spacing is included in Section 8.14 Icons and Section 8.15 Input Controls.