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.

Design: self-made

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.

Design: self-made, Illustration

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

Design: self-made, Illustration

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

Accessible Colors | WCAG 2.0 AA and AAA color contrast checkerTest your background and text contrast ratio based on Web Content Accessibility Guidelines (WCAG), and automatically…accessible-colors.com

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.

This article was originally published on Norbi’s Medium page.

I ‘m a geek who ♥ UX, product strategy, business & management. @norbigaal | working @intellyo

Related Posts

During a recent conversation with David Sleight, Design Director at ProPublica, I found myself realizing and saying “we need design that is faster and design that is slower.” Who are we and what is this thing called design? When I say “we,” I mean our whole industry, when I say “our whole industry,” I mean design, and when I say “design,”… Read More →

Five pitfalls that get in the way Today’s pace of change demands that collaboration and processes be sped up to meet the growing expectation of customers and stakeholders. But is this growing crunch on time stifling creativity? It isn’t enough to make decisions, products and services quickly, we must encourage creativity and create an environment to help the business succeed in… Read More →

This month’s post is a compilation of what our product designer at Marvel, Oleg, found inspiring this month in design. Uber When you think ride-sharing and ordering a taxi from your mobile phone, you probably think Uber. Over the last 10 years it’s seen an explosion of growth, amassing over 16,000 employees, 3 million drivers, and 75 million riders –… Read More →