157. User Interface Design: Psychological Bases For UI Design Rules

11 takeaways from this video:

[EDITOR’S NOTE: The full powerpoint presentation of this lecture is available for free download here.]

00:02:30 From Ben Schneiderman’s 1987 book Designing The User Interface to Neilsen & Molich’s 1993 website and software evaluation checklist to Stone et al in 2005…

…human-computer ‘user-interface design guidelines’ have been created and collected to provide a universal reference point for website and software creators and coders.

The intentional reason of overlap and commonalities between the above three ‘guidelines’ is that they are based on human psychology – based on how people think, reason, learn and make decisions. Despite that, the problem is that they tend to be quite vague and loosely interpreted, meaning there is no absolute and objective recipe for creating the perfect user experience.

In the early days, most of the user experience designers had degrees in cognitive psychology. Nowadays this isn’t true, and coders come from a variety of diverse backgrounds and disciplines from graphic to print design to technical writing, etc. and have received no formal training or experience in cognitive psychology.

When Stone et al’s first rule is “Visibility: First step to goal should be clear,” what EXACTLY is that supposed to mean, objectively and actionably? Further, when two rules from different guidelines appear to contradict each other, which rule takes preference?

This explains why when modern user experience experts are asked to explain usability guidelines to their clients, they have no idea why the rule is the rule, and because these rules can be vague and loosely interpreted, have no way of justifying why their chosen design meets these useability guidelines.

This is why I (Jeff Johnson) wrote the Designing With The Mind In Mind: Simple Guide to Understanding User Interface Designe Guidelines, now on it’s 2nd Edition

00:09:38 Some basic tenants of human behavior with regard to perception and cognition are:

Humans perceive what they expect
Human vision is optimized to see structure
Humans seek and use visual structure
Reading is unnatural
Human’s ability to see color is limited
Human’s peripheral vision is poor
Humans have limited attention span and imperfect memory
Limitations on attention shape our thought & action
Humans learn from experience and performing learned actions are easy, while problem-solving & calculations are difficult
Many factors affect learning
Humans have real-time requirements

1. Humans perceive what they expect

00:10:24 Human perception is biased by their experience (the past), context (the present), and their goals (the future).

If you’ve never seen this photo by RC James before, then there’s a great chance you won’t spot the dog sniffing the ground. But if you have already seen and been explained what this photo is, then from now on you’ll immediately spot the dog; even if you’ve forgotten you’ve seen the photo.

00:13:33 When browsing your website and using your software or application, humans don’t actually pay attention to the screen, AT ALL! They’re clicking on things based on memory position. Therefore your website needs to be consistent with its button positioning and content layout itself, but you also need to remember that your user will have visited 1,000s of other websites and pages before arriving on yours, and so will approach your site like they have approached all others before yours.

And since humans are navigating your web site with an end goal in mind, anything considered superfluous or irrelevant to their goal is usually disguarded or overlooked.

[EDITOR’S NOTE: A dark pattern is “a user interface that has been carefully crafted to trick users into doing things” they don’t intentionally want to do. One such dark pattern is a disguised ad where advertisements are made to resemble content, photos, or even navigation menu bars in order to trick users into clicking on them.]

Some users are “Search people,” immediately typing keywords into your website’s search box, while others quickly scan your site for the closest keyword of what they’re looking for.

Therefore when conducting usability tests, if consumers can’t find what they’re looking for, it’s your fault for not knowing enough about the user’s past experience and current perception to know how to organize your site to cater to and persuade them.

[EDITOR’S NOTE: Recall in my interview with Product Designer Timoni West that if visitors land on your homepage and are confused about what the product is or why they should use it then your UX designer has failed. And honestly, there are TONS of startups that fail to tell you what they do. When that happens, it’s generally because the company itself doesn’t know how to articulate their product vision.

Recall also from my interview with Art Director Julien Chesné that advertising is made by brands for consumers; therefore consumers arguably do not have misconceptions. If consumers think your advertisement is bad, is deceptive, or is doing more harm than good, they are right. So in that respect consumers don’t have misconceptions, they have opinions based on their experiences and prejudgments, and it is up to you to either conform to those preconceived opinions or work to change them.

For more on how to conduct consumer testing, read my interview with Brand Listener Peter Spear. For a step-by-step user interface workshop model, watch the lecture by Janne Jul Jensen. ]

2. Human’s vision is optimized to see structure

00:20:25 Gestalt principles developed in the 1930s-40s identified what modern psychologists define as ‘descriptions’ to human visual perception and are great for designers when optimizing their web site, application and software.

00:21:51 In Gestalt theory:

Closure – the human brain is hardwired to see whole objects rather than fragments of objects, and
Symmetry – the brain is hardwired to see simple figures and shapes rather than complex ones

…in particular are interesting because your brain is making sense of things which aren’t actually there.

3. Humans seek & use visual structure

00:29:15 Structured information is easier to perceive and sort through than the same information unstructured. Structure your information rather than putting it into sentence form, and your users will more quickly and easily understand and remember it.

Creating a visual hierarchy of information with headers, subheaders and bullet points also helps users skim your content to reach their goal more quickly.

Users aren’t spending time reading all that text you spent so much time and care writing; they only want the information they came to your page for.

Human color vision is limited.

00:35:57 Human vision is optimized to see contrasts – edges & changes – and not absolute levels. As such two identical colors can actually appear to be different based on the colors surrounding it.

The human eye has difficulty distinguishing between pale colors, small color patches versus larger surface objects, and objects that are far apart versus being close together. This is especially true if eye movement between the objects because then memory is implicated.

Therefore when designing your website, don’t put similar colors too close together (for example hyperlinked text and non-hyperlinked text, and visited links versus non-visited links) because users won’t be able to easily distinguish them.

Colors will vary slightly to significantly according to display, browser, device being used, the angle at which user is viewing device, the lighting around and reflected onto the device, the population of users who have color-blindness, etc.

Therefore combine color with other cues such as images, bold or italics, and/or words and numbers.

4. Human Peripheral vision is poor

00:50:48 When using fill-in forms such as ‘contact us’ or ‘user login,’ put any error messages directly next to the location of the error rather than off to the side and distanced from where the error occurred, otherwise users risk overlooking the error message and assuming your website or software is broken or bugged.

By staring directly as the dot in the center of each image below, you can see an example of the density of your eye’s peripheral vision.

Therefore when designing your website:

Anticipate how users will scan/view your page and place important messages along the pathway your user’s eye will take and pause to focus on
Place error messages near the location of the error
Use a bright color such as red for error messages, or a color which completely contrasts your site’s prominent colors
Include an error symbol with the color-coded error message
Consider using popup boxes, audio beeps or screen flashes to highlight errors. But don’t do this continuously otherwise users may dismiss your error message as an annoying advertisement.

01:10:42 With portrait versus landscape design layouts, people are used to scrolling vertically, so understand that if you create a horizontally scrolling site, know that you are going against everything internet users have been primed to expect in user design. If you put information off to the left or right, you risk that content not being seen by your user.

01:12:10 Conventional colors for hyperlink text (link: #551A8 and visited: #0000EE as of HTML5). Unless you have a very specific reason for departing from conventional usage (such as for branding purposes, which is commonplace on websites today), it’s wise to take advantage of your user’s previously primed identification of url link colors. But what’s important is that when users arrive on your website they can immediately understand what they are there for, what you want them to do, and how they can navigate your site.