Introduction
We all like to think we are logical human beings in control of the decisions that we make. To some extent, we are. We make conscious decisions about what to eat, drink, read, wear, and so on; but a large extent of cognitive processing happens before we direct our conscious attention toward it. Consequently, as UX practitioners, we also need to understand how irrational behavior influences decision making, and take it into account in our designs.
Two Systems of Information Processing
Daniel Kahneman in his book Thinking, Fast and Slow, describes two modes in which people process information: Systems 1 and 2.
System 1, our “automatic system,” is largely involuntary and requires little effort, but it is fast at detecting simple relationships or recognizing patterns. System 2, on the other hand is slow and effortful, requiring our attention; it is usually involved in complex activities such as mental math. We tend to identify with our System 2 self: conscious, alert, and in control of our fates. However, in many of our behaviors, System 1 remains largely at the wheel. Even when not completely in command, it provides much of the input upon which System 2 acts.
System 1 provides us with shortcuts based on experience. Carefully processing every object around us would be overwhelming and would take too long, making our primitive ancestors an easy prey for their enemies in the wild. System 1 enables us to rapidly identify the information relevant for a task, and System 2 uses this input to make a reasonably accurate decision.
Why should designers care about the automatic, implicit processes of System 1? Here are some reasons:
1. System 1 shapes how users judge the relevance of information.
During information-search tasks, users quickly scan for relevant information and tend to interact with items that have high information scent.
System 2 can “tell” System 1 what to attend to, depending on the task that it tries to solve. Indeed, eyetracking data indicates that scanning patterns on the web are optimized for the current goal. For example, if users want to search for information on a website, they might ignore everything but search indicators (a magnifying glass, the word “search”, or an input field).
System 1 is excellent at ruling out irrelevant information — except when relevant information looks like irrelevant information (for example, if it is embedded in the right rail and people mistake it for an ad). In such cases, relevant information will be ignored just the same as the irrelevant information it looks like. Thus, first impressions are quick and mostly accurate, but not entirely fool-proof. This is why we emphasize that whatever is important to users at their current stage of their journey should actually look important — whether that means using a larger typeface, bold font, boxes, buttons, or other UI elements that stand out.
By anticipating user needs, we can guide users toward desirable actions (ethically, of course). Knowing this will save designers and UX practitioners from expending valuable time, energy, and money on content that will be ignored in the blink of an eye.
2. System 1 influences how users perceive the aesthetics, and indirectly, the usability of a site.
People tend to be more forgiving of beautiful designs and less so of visually jarring ones. If a website is aesthetically pleasing, users will tend to remember the site as more usable than it actually was. System 1 is the one who decides very quickly, at a visceral level whether a site is beautiful. Indeed, according to research by Gitte Lindgaard and her colleagues, a decision on aesthetics is made as early as 50 milliseconds into visiting a site, and rarely changes if you give people more time.
Not to say that poor usability won’t be noticed or remembered, or that usability is any less important, but if you’re courting new customers, it certainly helps to start off on the right foot in those first few milliseconds.
3. System 1 shapes how users judge site credibility.
When users land on a page, they often have a goal in mind — that is, System 1 will start with some instructions from System 2. But if the page has certain design elements that stand out (for example, one red button in a wall of black text), System 1 will automatically be drawn by them. According to BJ Fogg’s prominence-interpretation theory, the more prominent an element is on a page, the higher its impact will be on the overall credibility of the site. This effect can be positive or negative, depending on how people interpret that element. Thus, a moving ad at the top of the page will be highly salient and will be perceived as annoying, so it will diminish the credibility of the site. On the other hand, a big endorsement from a notable publication such as The New York Times or The Wall Street Journal may be interpreted as positive and increase the credibility of the site.
Implications for Design
Here are some things to keep in mind throughout the design process to support and take advantage of System 1’s automatic processes.
Identify key workflows for each persona.
Any given product might have several audiences, each accomplishing different tasks. Use personas to represent these user types. Understand the mindsets and attitudes of various audiences, identify their primary goals and how they might try to accomplish them. Ask yourself, “What is our persona, Patricia, looking for in order to accomplish the first step of her task?” Once you’ve identified the tasks your users might accomplish, map out their workflows and make sure you visually prioritize information relevant to those workflows. However, avoid using the phrase “Get Started” – it prematurely stops users in their tracks and diverts them away from other relevant information they might need.
Let’s consider a hospital or medical website. Those who experience a medical emergency will need highly actionable information — every second is a matter of life and death. This information should not compete visually with other, less urgent information.
Streamline visuals as to not overwhelm System 1 and to help it identify relevant information.
We saw that System 1 is attracted to any design elements that stand out; if they happen to be relevant to the current task, great! Consider how these elements affect the perception of aesthetics, usability, and credibility of your site.
- Avoid competing, equally salient calls-to-action. If you must have two CTAs, style them so that their priority is obvious. If they are styled too similarly, or have equal visual weight, System 2 may need to interfere and decide between the two, which ultimately will take more time and create a perception of cognitive strain.
- Limit accent colors and fonts, and keep contrast up. Too many colors (more than 4) and too many fonts (more than 2) on a page or even in an infographic can result in the “rainbow effect”— in which the overwhelming variation disorients System 1 and possibly creates a negative aesthetic impression of visual chaos. Don’t use low-contrast colors or tiny fonts, either — it gives people the impression you’re trying to hide something from them by making it hard to read.
- Ensure that layouts are visually balanced by designing on a grid. By following classical aesthetic principles such as symmetry and proper alignment, you can ensure that your website looks visually pleasing. Grids limit creativity to some extent, but, on the plus side, they can provide structure and balance, which make layouts more predictable.
Your most prominent design elements should be clear and bolster credibility.
- Clearly state who you are and what you do. If users have to invoke System 2 to figure out whether they’re in the right place, the increased cognitive effort will cause them to scrutinize and be suspicious of the site. Don’t lead your users on a wild-goose chase — clearly state who you are and indicate what you do in a concise statement in a prominent area on your site.
Where appropriate, localize your content appropriately by following the conventions of the region. Even an apparently minor detail such as using the wrong spelling of a word (e.g, flavor vs. flavour, depending on country) is a red flag that the users are not in the right place and might immediately send them to the next search-engine result. - Don’t ask for too much, too early. As with any relationship, it takes time to build trust. If a huge invitation to register is the first thing your visitors see when they land on your homepage, your site will be perceived as needy and people will become annoyed and suspicious.
Instead provide value first, and users will be more compelled to reciprocate with something of value (their contact and financial information) as a result.
As you iterate your designs, measure first impressions and test your site with real people.
Don’t use intuition to assess people’s first impressions of your designs: test them instead. Don’t just use fellow employees, either; get real people, preferably customers, to try out your designs. Here are some first-impression tests:
- Screen-timeout testing
Present participants with a screenshot of a page for a short amount of time (50ms – 5s). The timeframe can be short (50ms) if you are interested in assessing how people perceive the aesthetics of your site, or it could be longer (up to 5s) if you care about additional information such as what is prominent on the page and what design elements may be confusing at first glance. - Eyetracking research
While eyetracking is expensive and laborious, it can reveal incredible insight into what people literally look at in the first few seconds on the page. It is a great quantitative research method, if you have the means to pull it off. - Usability tests
Qualitative tests enable you to gather data with relatively few users. By asking the right questions at different stages of the user’s activity you can observe how first impressions might influence a user’s decision making. Typically, if you’re interested in first reactions, you have to prompt the test users before they start visiting the site. Otherwise, most people will sit quietly for some time while they try to orient themselves on the page. In fact, even if you have asked users “please say your first impression,” you will often need to supply an additional prompt (“anything that comes to mind”) after about 5–10 seconds of silence.
Conclusion
Unfortunately, people do judge the book by its cover. First impressions affect users’ perception of aesthetics, usability, and credibility of a website. To create delightful and hassle-free interfaces, we need to look beyond rational thought and support those instinctive, automatic processes that people engage in when they first land on a web page. Once we understand the strengths and limitations of the human mind, we can be effective about how we approach our designs. Nevertheless, we never truly know what our users think until we ask them. When in doubt, test it out.
Sources Cited
Matthias Deller, Achim Ebert, Michael Bender, Stefan Agne, and Henning Barthel. 2007. Preattentive visualization of information relevance. In Proceedings of the international workshop on Human-centered multimedia (HCM '07). ACM, New York, NY, USA, 47-56. DOI=http://dx.doi.org/10.1145/1290128.1290137
Fogg, BJ, 2003, Prominence-Interpretation Theory: Explaining How People Assess Credibility Online, CHI 2003: New Horizons, 722-723.
Kahneman, D. 2015. Thinking, fast and slow. New York: Farrar, Straus and Giroux.
Gitte Lindgaard, Gary Fernandes, Cathy Dudek, J. Brown. Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology, Vol. 25, No. 2, March-April 2006, 115-126.
Share this article: