ESTABLISH
USABILITY
Psychology teaches us how emotions can be effected by the amount of mental stress your user is taking in and color. In order for a designer to understand these concepts, they need to realize there are three different types of emotions: visceral, behavioral and reflective.
GUTENBERG
DIAGRAM
Primary Optical Area
Strong Fallow Area
How people read, part 1
The Gutenberg Diagram describes a pattern that the eyes move through when looking at evenly distributed, uniform information. This pattern often applies to a design with lots of text.
There are four quadrants:
Primary optical area located in the top/left
Strong fallow area located in the top/right
Weak fallow area located in the bottom/left
Terminal area located in the bottom/right
This pattern suggests that people read across and down the page from left to right. But as they move down the page, each time the eyes start further from the left side of the page, closer to the middle. The overall movement is the eye moving from the primary optical area to the terminal area.
This pattern teaches us that the most important elements should be placed along this movement.
Place logo or headline top/left.
Image in the middle.
Call to action bottom right.
Weak Fallow Area
Terminal Area
'Z' READING
PATTERN
How people read, part 2
Another study describes a reading pattern that takes on the shape of a 'Z'.
Reader starts in the top/left
Moves horizontally to top/right
Then diagonally to bottom/left
Finishing in bottom/right
This reading pattern is good for simple designs with key elements that need to be seen. If your design includes some sort of storytelling, use this pattern.
The important information should still be placed top/left.
With the call to action in the bottom/right.
Z
1
2
3
4
'F' READING
PATTERN
How people read, part 3
According to a study done by Jakob Nielsen, people tend to read in the shape of an 'F'.
First, the user reads in a horizontal movement, across the top of the content. Next they move down the page and across again in a horizontal movement but in a shorter distance. Finally the user scans the contents on the left side, such as if there was a table of content on the left side of a website. Readers spend 80% of their time on the left side of a site.
Take aways from the 'F' scanning pattern:
User's will not read your text thoroughly.
The first two paragraphs must state the most important information.
Sub-headers and bullet points are helpful.
F
1
2
3
4
5
VISUAL
CUES
Make sure your work is understandable
In order for the audience to understand the message, the designer needs to guide their eyes to the elements that are most meaningful. If you haven't yet, read the patterns in which people scan through information. There are multiple ways people visually scan a design, image, data of information, using visual cues can help you control where they look first, second, third.
Visual cues do not carry the primary message. Their purpose is to point out or highlight critical information. They can include symbols such as arrows or techniques such as highlighting or bolding text.
Signaling the viewer with this strategy is effective when used in explanatory and informational graphics.
Think about your audience, do they know the meaning of visual symbols?
Avoid using color alone as a visual cue, rather pair it with another element (arrow, border, highlight).
Be consistent with the cues across your assets.
With voiceover, use visual signals to correspond to the words.
Identity the purpose, degree of visual complexity, and audience of your design.
LONG-TERM
WORKING MEMORY
The human mind has limited capacity
The more complex a design, interface, or task, the slower and more prone to error the user or viewer will be. Erikson and Kintsch first introduced the concept of long-term working memory. This idea relates to cognitive load.
In connection to the human mind's capacity, in order for a user to carry out tasks, the user has to remember information that relates to their task. If there is too much information or too many tasks, included in the design or interface, the user will forget and therefore not succeed in their task.
FITTS
LAW
Make buttons close and large
The farther away the object, the longer the movement time. The smaller the object, the longer the movement time. This is Fitts Law.
If you are designing a website:
Think about the size of your buttons.
Think about icons vs. text for buttons.
Think about where the users curser may be when they are moving from page to page.
Think about people who are left-handed? Right-handed?
Where are their thumbs on the screen?
Home
PARADOX OF
CHOICE
24 choices attracted 60% of people,
3% made a decision
Limit their choice
The paradox of choice principle is something that is well known. As the number of choices increase, the overload and stress of the user increases. When the user reaches this point, stress takes over and the likelihood of the user exiting or opting out is higher.
In your design, focus on the call to action. What is the most valuable thing the user can take away from your design? If there are multiple things, you must limit them to no more than 3 or 4.
What is the most important information?
What is the end goal?