When designing software, a website, or help content, it’s crucial to think about your users’ abilities and limitations, which are guided by cognitive psychology. These concepts help us predict user interactions and outcomes that help us decide which design and content elements are most effective for a particular user or situation. Most importantly, they help us solve user problems and meet customer needs.
What’s This Psychology Stuff, Anyway?
I was a psychology and sociology major in college because I was curious how people think and what makes them act the way they do. I never thought I’d apply these principles in my career creating websites, help content, and user interfaces. A bit of insight into the cognitive psychology theories of Gestalt, Freud, Piaget, and Skinner help me do my job each day, especially when it comes to attention, decision-making, memory, and perception.
It's important to consider applying psychology principles to predict and explain how users think and act. When designing software, a website, or help content, we should think about user abilities and limitations. Cognitive psychology includes visual perception, attention, memory, and mental models for predicting interactions and outcomes. Gestalt's theory of visual perception guides us through this process.
When we design software or content for our users, do we imagine the user's state of mind? Are they frustrated, curious, impatient? Gestalt (and other cognitive psychologists) helps us decide which design and content elements are most effective for a particular user or situation.
One of these Is Not Like the Other
When items look alike, we naturally group them together. We organize similar items on a website or help center into categories and group similar items. When we create UI or content, it makes sense to organize similar content so that the user can easily find and consume it.
Some of us remember older episodes of Sesame Street and the song "One of these things is not like the other" and how we spotted the item that stood out as different like in Figure 1. Can you tell me how to get...how to get to Sesame Street?
Figure 1: Sesame Street: which one doesn't belong?
Figure 2. Images are just above text so that users can see they belong to each other.
Related Items Are Near Each Other
Items near each other are seen as related. The proximity of text to the image on the Walmart. com site tells us they're related to each other. It helps users find what they need without confusion. In Figure 2, the text is right below the image. Very clear, right?
Check out Figure 3 with the text farther away from the image. This would confuse users.
Figure 3. In this example, the text is evenly spaced between the two images, and it'shard to tell which image the text belongs to.
In certain app designs, the labels aren't near where the user enters the text. In Figure 4, the labels (first name, last name) are not close to where the user enters the text. Do they enter Last Name in the box above or below it? Figure 5 provides a fix.
Figure 4. It's not so clear which label goes with which field.
Figure 5. Label is just above the field the user needs to enter the text.
Where Are Users Looking?
Objects that are far away from the user's focal point are perceived in less detail or not at all. The user is usually looking at the top left of a page. If you place something on the top or bottom right, they may not see it.
The Humane Society website (hssv.org) wants you to DONATE (Figure 6). The big orange button right at the top brings your focus to the DONATE button. Of course, your eyes go to the adorable animals on the page, but the call to action is DONATE.Figure 6. Humane Society Donate button is bright and visible.
Another example is from Zazzle.com (Figure 7). Add to cart is orange and visible. You pick the smallest candle size.Figure 7. Small candle selected on Zazzle site.
But when you pick the bigger candle, you don't see the price change at the top because your focus isn't there (Figure 8, next page). The price just went up about $10!Figure 8. Selecting larger candle increases the price.
Figure 9. Details popup shows price hike for bigger sizes.
If you happen to notice and select the Details link at the bottom right, you can see a bit more clearly how much more each size costs (Figure 9).
Users Can't Find What They're Looking For
Sixty percent of the reason users fail on a website is because they can't find what they need.
Findability is key when creating your content or user interface. On this AT&T site (att.com), if you're looking to trade in your phone, the search isn't very helpful (Figure 10). Too many options to try.
Figure 10. Search AT&T for trade in offers.
But if you have a well-organized list of categories for users, it can make life much easier (Figure 11).
Figure 11. Use menu categories to find trade in.
Too Much Content
Too much content and not enough white space can be overwhelming. I'm looking on Amazon.com for a record player to play my Rick Springfield albums. I find one that looks OK, but it's buried under all these technical specs (Figure 12). Give users an information scent to help them find what they're looking for.
Figure 12. No one wants to read a block of text.
What's better is a photo of the record player and a bulleted list of features I am looking for (Figure 13).
Figure 13. A photo with a bulleted list of features.
If I wanted more details, I could look at the previous large block of text, but not likely. Who wants to read all that?
Empathize With Users
When creating content or designs for any type of users, we always need to empathize, learn their pain points, their needs, their personas.
- Why is someone accessing in-app help or our help center?
- Are they having a problem or issue?
- Do they need help on a feature? Are they looking to install or configure something?
- Is their work interrupted? Are they irritated and impatient?
- Will they even return to our site?
Maybe all the above. Do they want to read the background and history of a feature or just want the steps to get their job done? I think we assume because we want to read (and write!) all our content, all users think the same way. That's not the case. We can do usability testing on our content. Have other people who aren't familiar with your app try out the steps and give you feedback. You can show mockups of your designs and have users try to navigate your content.
Principle of Least Effort
Users want the path of least resistance, where they will spend the least amount of time and effort. They scan the content. They don't read it. And they're lazy. No offense. I am, too. Why do birds fly in formation? Because they can fly with less effort and resistance using the draft of the bird in front.
We're most likely to follow the path of least resistance in our lives. There are several ways to get to this beach in Zakynthos (Figure 14). I could drive 50 miles and rappel down the mountain to my death or I can take a leisurely 20-minute boat ride and get dropped off at the beautiful white sand beach. Which did I choose? The latter!
Figure 14. Would you prefer to drive to this awesome beach, then rappel (fall) down the mountain, or take a relaxing boat from the sea?
Here are a few more things to keep in mind when trying to meet user needs.
- Users are always multitasking, distracted, and scanning content. Help them find it quickly. Don't overwhelm them
- Remember short-term memory is a small amount of information the brain can store for a short time. Users won't remember how to navigate your site. They'll need hints, good navigation, and intuitive interface.
- Make the search box visible and obvious. Most users will search instead of using your categories to navigate.
Even though we have intricate minds, we don't want to think too hard (or too much) if we don't have to. An old manager used to say to his team, "Work like a fox or work like an ox." I took that to heart and try to live that way each day. Being lazy is good!
We can apply this principle to our work, to UX design, in everyday life. Make things simpler for users. In a nutshell, let's use proven theories to predict user behaviors and meet their needs, both in user interface and creating content for websites.
Make Content Accessible
Is your content accessible? Do you use alternative text for graphics? How about proper colors for color-blind or vision-impaired users? Content should always be clearly presented for two complementary senses. Give your users a choice about how they want to access content and complete actions. Poor accessibility can exclude and frustrate users.
By applying some basic principles of psychology, you can help to develop content that more effectively meets customer needs.
Original article published in STC intercom magazine, Volume 69, Issue 6, November/December 2022.