3 practical cheat sheets for designing attention grabbing UIs
Improve your design skills with the power of cognitive psychology and user behavior.
Luckily there are a lot of articles about why psychology is important in UX/UI design. But unfortunately, only a few of them provide practical knowledge. What I mean by practical knowledge is those daily designs that exemplify the impact of psychological rules on design. Collecting more examples and techniques that can immediately be applied into designs is why I started Cognitive UXD and why I’m writing this article.
I ❤️ the connection between design and psychology.
I collected 3 daily examples where you can connect the basics of psychology with online behavior patterns. With these tips under your belt, you can consciously design user experiences that truly fit your users. Enjoy.
1. Above the fold
Yes.
It is still relevant.
To be able to design attention-grabbing products, firstly we need to understand where and when we have the biggest chance to hook the users.
User behavior
Based on a study by NNGroup, users scroll more than they used to, but the first screenful remains the most engaging part of website designs.
“About 74% of the time was spent in the top two screenfuls of content (the information above the fold plus the screenful immediately below the fold). The remaining 26% was spent in small increments further down the length of the page.” Source: NNGroup
Based on this data, we need to put the highest priority content above the fold. This area should contain the most important message about your business/product.
Editor’s tip: Divide the area above the fold horizontally. On one side you can illustrate your message with an image to help users quickly process the information. On the other side, you can highlight the core message of your product/business.👇
2. The Law of Closure & the Illusion of Completeness
If you know the basics of Gestalt psychology this will be familiar.
The Law of Closure states that when we encounter a complex element with a missing part, or with a break, we look for a continuation to smooth out the pattern. In other words, we fill in the gaps.
“The illusion of completeness: The first screenful of a web page — or any other foreign document — tends to look complete. Unless the screen happens to break across some graphical element or divides a line of text in two, users will assume they have seen it all and will move on.” Bruce Tognazzini
Editor’s tip: Use this knowledge and design your screen breakpoints consciously. If you want to persuade the user to scroll more, you should leave a small crumb of the next coming phase on the screen. You will avoid the illusion of completeness, and the human brain will look to fill in the gap.
3. Fonts
One of the most powerful tools in a designer’s pocket is their choice of font. The best way to use fonts is by designing a consistent hierarchy. But to create an awesome font hierarchy you need to find the best combination of different attributes:
Font-family is important in establishing font hierarchy, especially for headlines and subheadings. As a rule, bold, interesting, or more distinctive font-styles get noticed.
Font-size should correlate with the importance of the text. The human attention is drawn to the largest-sized font first. The easiest way to emphasize a text is to “make it big.” But we should be aware that good font-hierarchy not only depends on the size but more likely on the combination of font attributes.
Editor’s tip: We need to define these attributes as precisely and mindfully as we can. We should limit the number of colors (typically at most three colors suffice) and usually stick to about two different font weights.
Editor’s Tip: Maximize the contrast between your text and the background. It supports your design and also increases the accessibility of your site. There are dozens of tools online that help you check your contrast ratio. If you want to learn the basics you should definitely check WCAG 2.0
Summary:
I believe that as a designer we need to understand the basic fundamentals of human cognition. On the other hand, if we want to employ this knowledge in a killer design, we also need to understand the online behavior patterns of users. Once we’ve got this down, we can add our design skills, and we don’t have to do anything else but enjoy the results of our hard work.
I hope you enjoyed the article. If so, you can 👏 and comment or drop me a line on Twitter! ❤️
