The Psychology of UX Design
In chapter 1 of The Design of Everyday Things, Don Norman (2013) explains 5 fundamental psychological concepts of user experience (UX) design: affordances, signifiers, mapping, feedback, and constraints. Essentially, they start with the relationship between the object and the user, i.e., what it’s for; what describes where the action should take place and how; mapping the relationship between elements; the results of the action through feedback; and lastly, the elements that guide the action. So, what does all of this mean?
For the layperson, these are what people expect from the everyday items and technologies we encounter. The more intuitive the design, the better the experience. Good design is self-explanatory, and bad design forces us as users to guess. Arguably, it makes bad design easier to spot, because when things work as expected, we go about our business as usual. It’s the interruptions caused by a bad UX design choice that create the staccato.
Those things — intuition, expectation, and disruption — are psychology. Understanding human behavior, emotions, and motivations is central to both psychology and UX design. That is precisely why experts agree that psychology explains why these principles work on real humans, affecting how people process visual information, form expectations, and react emotionally.
Just as architects must understand physics, UX designers must understand human psychology to avoid creating products that frustrate or confuse users.
I recently reviewed two sites through the lens of these principles and other UX best practices; I don’t frequent them, but was familiar enough that they came to mind quickly. To my surprise, they provided the perfect backdrop for contrasting examples of good and bad UX.
A Critique: Nielsen Norman Group
Given that I’m reading Don Norman’s literature, I chose his website to examine first. And critiquing it feels almost unfair because these are the experts — but that’s exactly why it’s worth examining: even the best miss things, and that’s a useful lesson for me, not a gotcha. NNGroup.com is a site for UX guidance and training supported by industry leaders with over two decades of experience. When I went to the page, my first reaction was wide-eyed and overwhelmed.
I think what threw me off immediately was the pink-tinted background and the use of black and red all above the fold. First impressions matter. Create visually appealing designs to trigger positive instinctive responses, and color psychology plays a large role. Product designer and developer Ish∆n shares that red can be an aggressive color, whether to indicate a level of anger or passion, symbolizing both good and bad. That’s a risky color choice as a signifier, creating an opportunity for a visceral reaction with such a polarizing color.
The home page is organized well, with all content contained inside boxes, making it visually easy to navigate and skim to find what you’re looking for, affording interactivity. This is a good example of Gestalt Proximity: when elements are positioned close to one another, users tend to interpret them as connected or associated.
Purple, yellow, green, and blue were assigned to course types, but I had to dig to find that myself. When I first opened the home page, because I was thrown off by the color assault, I felt like I was missing information that would clue me into the meaning, but no legend or key was there to help. Color functioned as an attempted signifier without ever delivering on the job a signifier is supposed to do, which is to communicate meaning clearly. Since the color was distracting rather than guiding, I was confused about the number of choices I had, and I spent more time trying to figure out what to do next.
Moving beyond how things should look to what happens when we use them. The search bar was obvious before clicking — it’s a wide, popsicle-shaped space affording typing, with a magnifying glass to signify search, leading to a page providing search results as feedback. The shopping cart opens a page whose feedback told me there wasn’t anything in my cart, offering me suggestions on things to browse, but that was below the fold and the empty price point, so I had to scroll to see it. An improvement would be to have that oops-your-cart-is-empty signifier with suggestions above my empty cart. The Log In link took me to a predictable login interface, mapping to a familiar mental model, where I could enter email, password, or sign up.
Some improvements, like a more relaxing and modern color palette, would enhance the user experience and credibility of such an impressive UX authority. Another improvement would be to establish a cohesive style across the whole site. From the color palette and its obvious designations to the styling of the containers and pages throughout. Design isn’t only about creating the most attractive UX; it’s about understanding the users and their needs.
A Critique: The Center for Humane Technology
The Center for Humane Technology is a nonprofit that I am very fond of. I have referenced and studied them, but honestly never spent a ton of time on the site. I’d grab what I needed and move on, so I was delighted to take a closer look. They are focused on making influential technologies like AI and social media benefit humanity. I was able to quickly jump into navigating the site because the color palette, content organization, navigation, and interactivity made it very pleasing and easy.
The easy, soft color palette of light yellows and purple, a bright teal reserved for all buttons, and a dark navy for subsections and footers made the site feel immediately credible and welcoming. The use of illustration, varying between only a few styles, made the content very engaging. The illustration styles changed throughout the site, but not when in proximity to one another; also a great example of Gestalt Proximity.
The main navigation was starkly signified by black text boxed off by black outlines on a white background. There’s also a donate button in electric light teal that signifies its difference from other content on the website.
There is one button style throughout the entire site, and all content and containers are cohesive in style, color, and interactivity. The consistent button/container shape affords and signals interactivity before a user ever clicks. Overall, the website is absolutely gorgeous in content, design, and UX.
I chose to click through their donate page experience, and it was elegant and easy to use. You are taken through the steps of inputting information all while staying on the same page. Each entry step appeared only when needed, illustrating the UX principle of Progressive Disclosure, which states that users should receive information in small, manageable chunks instead of all at once. Staying on one page matched my mental model of how a form should behave (no jarring page jumps), mapping the relationship between the behavior and my expectation of it.
I don’t really have any recommendations for improvement.
Good, Bad, and Room to Improve
If someone really loved pink and red when navigating a UX design guidance and course website, they would have a wonderful user experience. However, that was not my experience when doing my reviews. Each site contains excellent contrasting examples of both good and bad UX design, and it was surprising to me that the UX experts themselves were the “bad” example.
Nielsen Norman Group could benefit from a global look at the site, starting with creating clear styles for signifiers throughout. That was the pain point that rose to the top for me. Additionally, they could benefit from a cohesive visual style guide and a refreshed color palette. These moves would increase the usability and credibility of an already trusted source.
The Center for Humane Technology excels in my eyes, even though this was never a competition. Their consistent use of visual style throughout, as well as intentional signifiers, affordances, mapping, and feedback, makes the site an overall pleasing and elegant experience, backing up their meaningful work, platform, and expertise.
To dive deeper into the technical aspects of my critique, view the PDF of my full analysis below.
AI tools supported proofreading and editing for this post.