Articles

Jakob Nielsen’s How Users Read on the Web is 25 years old this week, and one glance at an eye-tracking study will tell you its key observations are still relevant today.

Simply put, users don’t read a web page; they scan it for individual words and sentences.

A typical pattern shown in eye-tracking reports is that users will rapidly scan a page, scrolling down to do so. Then either hit the back button and pump your bounce rate, or scroll to the top and re-engage with the content.

Even when content, volume, and quality tick all the user’s boxes, and they choose to stay on your site, they still don’t read; they scan; a slightly deeper scan, but still a scan.

As a result, it’s vital to design websites to be easily scannable, both in a split-second scan to decide if your page is worth the reader’s time and on a second or third pass.

Clarify the Page’s Purpose Immediately

Every page should have a primary goal. The majority of the time, that goal is embodied in a CTA (Call to Action).

The good news is, if your SEO (Search Engine Optimisation) has gone to plan, your goal (i.e., to sell something) and your user’s goal (i.e., to buy something) will align. By clarifying the page’s purpose, you can show the user that your goals align.

You can be experimental if you’re an established company and the user knows what to expect. But if you’re new to the market or have a lower profile, you need to conform to established design patterns. This means that a SaaS should look like a SaaS, a store should look like a store, and a blog should look like a blog.

Including your CTA above the fold — which in the context of the web, means the user doesn’t have to interact to see it. Doing so makes it easier for the user to progress and clearly tells the user what you are offering.

The landing page for next month’s Webflow Conf 2022 clarifies the page’s content, with a clear CTA above the fold.

Employ a Visual Hierarchy

The Von Restorff effect states that the more something stands out, the more likely we are to notice and remember it.

Visual hierarchies are excellent for guiding a user through content. HTML has the h1–h7 heading levels — although, in reality, only h1–h4 are much use — which gives you several levels of heading that can be scanned by different readers scanning at different rates.

For example, we know that subheadings have little impact if a user diligently reads the page from top to bottom, but they are excellent for catching the eye of skim readers.

Amnesty uses very a very simple hierarchy, the only change for its subheading being increased weight. But it is enough to catch the user’s eye.

You can also create visual hierarchies with other forms of contrast; weight and color are often employed in addition to size. For accessibility and inclusive design, it’s wise to combine visual indicators when creating a hierarchy; for example, headings are usually larger, bolder, and colored.

Use Negative Space

Imagine a person standing in a crowd. Let’s say they’re wearing a red and white striped jumper and a red and white bobble hat — pretty distinctive. But if there are hundreds of other characters around them, they might be hard to spot.

Now imagine the same person dressed the same, standing on their own. How long will it take you to spot them? Even without the stripy outfit, it’s not much of a challenge.

Elements in isolation are not only easier to spot, but they pull the eye because the negative space (sometimes referred to as white space) around them creates contrast.

When using negative space, the key is to give elements enough room to breathe and attract the eye without giving them so much room that they are disassociated from the rest of your content.

Across its site, Moheim uses negative space to highlight UI elements while grouping associated content.

Use F Patterns

Users scan a page using either an F-pattern or a Z-pattern.

Because users scan your page in predictable ways, we can employ layouts that cater to this tendency.

Designers have been aware of F and Z patterns for some time, and because they’ve been used for so long, they may be self-fulfilling, with users being trained to scan a page in this fashion. However, both patterns are similar to how eyes travel from line to line in horizontal writing systems.

Whatever the cause, by placing key content along these paths, you increase the chance of capturing a user’s attention.

Kamil Barczentewicz uses a beautiful, natural layout that also conforms to a classic F pattern.

Include Images with Faces

Images are a great way of conveying brand values and making a site engaging. But when it comes to catching the eye of a user scanning your design, the best images include faces.

For example, a testimonial with an image of the customer will catch the eye more than a text-only testimonial.

The Awwwards Conference uses an animated computer with a face to capture attention. And large images of speakers making eye contact.

This is almost certainly due to social conditioning; we see a face, and we engage with it to see if it is a threat or not. Most of us naturally look to expressions of emotion to understand situations, and the distinction between a real-life person and an image hasn’t made its way into our mental programming yet.

You don’t need to use photos. Illustrations are fine. The key is to ensure there is a face in the image. That’s why illustrations of characters perform so well.

Copy Print Design

Print design is centuries older than the web, and many print applications, from newspapers to advertising, developed design elements to catch the eye of readers scanning the design.

Subheadings, lists, blockquotes, and pull quotes all catch the eye. Introductory paragraphs in a larger size or even italics draw users into the text. Shorter paragraphs encourage users to keep reading.

Horizontal rules used to delineate sections of text act as a break on eyes traveling over content with momentum. They are a good way of catching a scan-reader who is losing interest.

You can use a horizontal rule or break up your layout with bands of color that divide content sections.

Omono uses horizontal bands to highlight different sections of content.

Mass, Not Weight

We often discuss design elements as having weight; font-weight is the thickness of strokes.

But it is more helpful to think of design elements as having mass; mass creates gravity, pulling a user’s eye towards them.

The trick is to design elements with enough mass to attract the user‘s eye when scanning at speed without forcing the user to change how they engage with your content.

 

Featured image via Pexels.

Source

The post How To Make Your Designs Scannable (And Why You Should) first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

Advanced CSS Tricks that You Have to Know

Nnneon – SVG Generator for Futuristic-looking Glowing Shapes

The Best New CSS Features for 2022

Avatarg – Generate Beautiful Types of Avatar in One Click

I Just Spent $35,000 on a Domain. Here is Why!

10 Useful CSS Layout Generators (Grid & Flexbox)

Fffuel – A Mighty Collection of SVG Generators

Raindrop.io — All in One Bookmark Manager

My Wonderful HTML Email Workflow

3 Essential Design Trends, July 2022

My Dumbest CSS Mistakes

Source

The post Popular Design News of the Week: June 27, 2022 – July 3, 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

How to Create Simple CSS Grid System

Why are You Running?

15+ VS Code Extensions for Web Developers

10 of the Biggest SEO Mistakes [Infographic]

SVG Loading Animations

AI Pixel Art Human Face

VSLook – Customize the Look of your VSCode

One Line of CSS to Add Basic Dark/light Mode

Basicons – Basic Icons for Product Design & Development

Touch-first Cursor: Round Pointers Vs Mouse Arrows

7 UX Laws You’re Probably Getting Wrong

“Google” Programmers – How One Idiot Hired a Couple More Idiots

Bunny Fonts – Privacy Respecting Drop-in Replacement for Google Fonts

Source

The post Popular Design News of the Week: June 20, 2022 – June 26, 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

CSS.GUI – Open Source Visual Editor for CSS

Meet Web Push

Mobile-First CSS: Is it Time for a Rethink?

Web5 Is Here, Goodbye Web3? TBD

Nosignup.tools – Free Web Apps that Don’t Require Signup

Hello – The Best Search Engine for Software Developers

Exciting New Tools for Designers, June 2022

Adobe Plans to Make Photoshop on the Web Free to Everyone

8 CSS Snippets that Demonstrate the Power of Shadow Effects

Tango 2.0 – Automatically Generate Step-by-step Guides for your Team

Understanding the Template Element in HTML

Random Emoji Generator – Have Fun with Emojis

Source

The post Popular Design News of the Week: June 13, 2022 – June 19, 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

This week, Microsoft officially ended support for Internet Explorer.

Victorious in the first browser war with then-rival Netscape Navigator, IE was only finally surpassed by Google’s Chrome. Whereas once huge numbers of sites would warn users to switch to IE, by the end Microsoft’s biggest app was a virtual pariah.

Over the course of its lifetime, Internet Explorer has revolutionized the web with its freeware model and support for emerging technologies. But how much do you really know about it? Let’s find out…

Featured image via Unsplash.

Source

The post Quiz: The Infuriating IE Quiz first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

Paper Prototype CSS

Loopple Landings – 40+ Ready to Use Templates for any Industry

Tips for Handing Off your Website Mockup to a Developer

The Surprising Psychology of Fonts

5 Tips for Writing Cleaner Code

Please Give Me Some Space

Orion – New WebKit Browser for Mac

Dorik CMS – Simple, Affordable, and Flexible White-label CMS

Design Personas for Twitter

3 Essential Design Trends, June 2022

Source

The post Popular Design News of the Week: June 6, 2022 – June 12, 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

Bob Ross Ipsum

22 Apps Designers Can’t Live Without

15 Best New Fonts, June 2022

Payload is Now Completely Free and Open Source

Why Does Every Movie Poster Design Look like This?

Web Design Tools for Fast and Efficient Design

Developers: Stop Feeling the Pressure – Do this Instead

What People Think that Web Developers do Vs. What We Really do

Anytype: A Local, Privacy-first Notion Alternative

Rumor: Apple to Announce New Search Engine Next Week

Background Grids, from Paper to Display

Source

The post Popular Design News of the Week: May 30, 2022 – June 5, 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.
The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!”

What’s New in WordPress 6?

From PHP to Next.js: What Trivago Learned

4 CSS Progress Bars You Can Use on your Website

Lesser-Known and Underused CSS Features in 2022

Responsive Forms with CSS Flexbox

20 Best New Sites, June 2022

Building a Button Component

15 Web Design Principles for a Customer-Friendly Website

How I Created a Minimal Linktree Page in Just 2 Hours

Pixelarticons

Source

The post Popular Design News of the Week: May 23, 2022 – May 29, 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot