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

We’re really (really) excited about bringing User Testing to your prototyping experience in Marvel. It’s a game changer for your workflow and enables anyone in your team to spin up a user test and validate prototypes with users, stakeholders and colleagues, in just a few clicks. We’re getting closer to the public release, and following our last preview on how… Read More →

One of the lesser known features of Marvel, but one that saves minutes and hours of manual work is our support for hotspot templates by using Symbols in Sketch when syncing your prototypes. Here’s a typical use case – you are working on an iPhone prototype which has 3 buttons in the Tab Bar which appears in the footer on… Read More →

Why the time has come for disruptors in the financial industry Many factors play into this, but the big ones are changes in regulation and technology. Regulation, especially in the UK, has encouraged competition in retail banking for a few years now — and more changes are on their way in the form of required open banking APIs, for example…. Read More →