{"id":15983,"date":"2018-09-04T15:58:50","date_gmt":"2018-09-04T14:58:50","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=15983"},"modified":"2020-12-14T08:38:03","modified_gmt":"2020-12-14T08:38:03","slug":"3-practical-cheat-sheets-for-designing-attention-grabbing-uis","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/3-practical-cheat-sheets-for-designing-attention-grabbing-uis\/","title":{"rendered":"3 Practical Cheat Sheets for Designing Attention Grabbing\u00a0UIs"},"content":{"rendered":"

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.<\/strong> 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<\/a> and why I\u2019m writing this article.<\/p>\n

I \u2764\ufe0f the connection between design<\/strong> and psychology<\/strong>.<\/p>\n

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.<\/p>\n

1. Above the\u00a0fold<\/h2>\n

Yes.<\/p>\n

It is still relevant.<\/p>\n

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.<\/p>\n

User behavior<\/h2>\n

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.<\/p>\n

\"\"<\/a>

Design: self-made<\/p><\/div>\n

\u201c<\/em>About 74% of the time was spent in the top two screenfuls of content <\/em><\/strong>(the information above the fold plus the screenful immediately below the fold). <\/em>The remaining 26% was spent in small increments further down the length of the page.<\/em><\/strong>\u201d Source: <\/em>NNGroup<\/em><\/a><\/span><\/p>\n

Based on this data, we need to put the highest priority content above the fold<\/strong>. This area should contain the most important message about your business\/product.<\/p>\n

Editor\u2019s tip: <\/strong>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.<\/span><\/p>\n

\"\"<\/a>

Design: self-made, Illustration<\/a><\/p><\/div>\n

If you know the basics of Gestalt psychology this will be familiar.<\/p>\n

The Law of Closure<\/strong> 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.<\/p>\n

\u201cThe illusion of completeness:<\/em><\/strong> The first screenful of a web page \u2014 or any other foreign document \u2014 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.\u201d <\/em>Bruce Tognazzini<\/em><\/a><\/p>\n

\"\"<\/a>

Design: self-made, Illustration<\/a><\/p><\/div>\n

Editor\u2019s tip:<\/strong> U<\/em>se 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.<\/span><\/p>\n

3. Fonts<\/h2>\n

One of the most powerful tools in a designer\u2019s 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:<\/p>\n

\"\"<\/a><\/p>\n

Font-family<\/strong> is important in establishing font hierarchy, especially for headlines and subheadings. As a rule, bold, interesting, or more distinctive font-styles get noticed.<\/p>\n

Font-size<\/strong> 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 \u201cmake it big.\u201d But we should be aware that good font-hierarchy not only depends on the size but more likely on the combination of font attributes.<\/p>\n

Editor\u2019s tip: <\/strong>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.<\/span><\/p>\n

\"\"<\/a><\/p>\n

Editor\u2019s Tip: <\/strong>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<\/span><\/p>\n

Accessible Colors | WCAG 2.0 AA and AAA color contrast checker<\/span>Test your background and text contrast ratio based on Web Content Accessibility Guidelines (WCAG), and automatically\u2026<\/em>accessible-colors.com<\/span><\/span><\/a><\/section>\n

Summary:<\/h2>\n

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\u2019ve got this down, we can add our design skills<\/a>, and we don\u2019t have to do anything else but enjoy the results of our hard work.<\/p>\n

This article was originally published on Norbi's Medium page<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

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… Read More ￫<\/a><\/p>\n","protected":false},"author":188,"featured_media":15984,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-15983","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n