WebDesign UX Cover

What makes for good customer-focused web design? Have you designed your own site or given feedback on a web design made by someone else? It’s a challenge to know what to look for. But  I propose three “Fs” that should be considered as you evaluate a web design.

First, you should look for the fold. Don’t roll your eyes at me, fellow web designers. I’m not talking about squishing your design into 600 pixels. But we will discuss usability and ease of navigation. And while we’re at it, let’s roll out another old textbook principle: the “f-shaped” reading pattern. This is about designing and writing for maximum impact with just seconds of your customer’s attention. And finally, we’ll see examples of common mistakes to avoid with flat design.

Credit to the Nielson/Norman Group for doing incredible research in user testing. My 3 Fs are drawn directly from their findings.

Encourage Scrolling Past The Fold

When people talk about the fold in web design, unfortunately, they primarily speak from outdated experience. This concept comes from print design and newspapers that are folded in half on the newsstand. Everything above the fold is seen at first glance while everything else is hidden. Many business owners express concern that their customers will miss important messages if they aren’t presented first thing above the fold.

Example of a folded newspaper showing only the top half of the paper.

Unfortunately for these worry-warts, there is a world of screens out there with thousands of possible folds. It’s impossible to optimize for them all. But that does not mean we can ignore the fold! Instead, you must encourage website users to scroll past the fold. It’s true, you will have to prioritize and accept that some messages will get better placement while others will sometimes fall below the fold. The solution is to encourage visitors to scroll further down with every section.

When customers arrive on your page, they immediately perform an assessment, without scrolling. They determine the likelihood of finding what they want on your page. If it seems likely, they stay and scroll. This is why the fold concept remains important. You must carefully consider what goes at the top of your page. Use obvious cues to signal that the page content continues with engaging page layout and images. Use clear site structure reflected in your website navigation.

The Fold Matters Most on Landing Pages

I think this guidance is the most useful on specific landing pages focused on one topic. It’s reasonable to write a page headline for a single topic that encourages scrolling to subsequent sections where it’s expanded and fleshed out. Website home pages are more challenging to assess for the fold. I think it’s more likely here that visitors will scroll at least 1 section down very naturally from curiosity. And there’s a greater probability that each section is about a different topic as the home page attempts to summarize the website content.

One design element I really like that encourages home page scrolling is a visual arrow centered at the bottom of the top section. This increases your customers’ confidence in your home page’s depth of content and makes it explicitly obvious there is more to see. The fold is real. It’s just another way to say “make good things that people want more of” and they’ll scroll to get it.

Avoid The F-Shaped Reading Pattern

It’s easy to get cynical talking about the fold. It assumes website visitors have terribly short attention spans and little patience for reading. Are people just goldfish now, blinking dumbly at their screens? I don’t think it’s quite like that.

However, eye tracking research by the Nielson/Norman Group shows that people reading poorly designed pages scan with an f-shaped pattern. Imagine a spotlight moving across your web page, fixating on certain spots as it goes. The f-pattern indicates that the reader followed the first one or two lines of text before beginning to scan vertically down the page without reading full sentences. Imagine everything they’re missing!

Screenshot of a web page including markings for each place a user's eye rested as they scanned the page.

Image Credit: Nielson Norman Group, “F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)”

Use clear page formatting to avoid the numbing effect of the f-shaped pattern. Clear page formatting will break up the deadly “wall of text” that’s so likely to turn off your readers. Write a compelling, straightforward headline. Use frequent subheadings to draw readers all the way through your page. Make use of numbered lists and bullets when appropriate. Add relevant images between sections and consider other visual accents to engage readers.

It’s important to note that other patterns are common too, depending on the type of page viewed. The f-shape is most relevant to blog posts or article pages. A home page is more likely to show a layered pattern where readers scan the headlines and subheads but skip the regular text. Or a home page could be read in a spotted pattern indicative of readers looking for something specific, like a phone number or address. Nielson/Norman Group observed other patterns too. But the f-pattern is the most damaging and easiest to avoid with simple, yet vital, page formatting.

Fatten Up Flat Design Buttons

Many business owners tell their web designers that the new website be “easy to navigate.” They go on to say it must be have “clean lines.” Flat design is a popular aesthetic chosen to address these requests. Many web designers then produce new websites with flat design that are terribly difficult to navigate because the “clean” look erased all the signals customers use to navigate.

Web buttons are the most visible expression of aesthetic trends in web design because they’re very common with a very basic formula. In 2007, many buttons had a shiny, 3D appearance. This aesthetic looks cartoonish and unrealistic in 2018, however the appearance of depth made interactive elements like buttons easy to distinguish because physical buttons have depth. Early examples of flat design completely removed this visual link to the physical world.

While there is a philosophical argument for removing excessive decoration in favor of a clean look, poor flat design produces weak buttons and lower conversion rates. To this I say, “Give butts back to buttons.” Add a drop-shadow underneath for a cushy seat. Pop the button off the page with a slightly darker colored bottom edge.

Weak button design makes it hard to distinguish buttons from regular text. Strong button design clearly distinguishes regular text from interactive buttons.

When your design does not clearly distinguish interactive buttons from regular text, it sends a weak signal to the user. They become uncertain and less likely to click weak buttons. Strong buttons use different background colors, subtle 3D effects, and other distinguishing marks to clearly show users when something is clickable. These throwbacks to the physical world restore the important signals that tell customers where to click.

The three “Fs” of customer-focused web design encourage them to scroll, keep them engaged in a committed reading pattern, and clearly signal buttons and interactive elements. Is your website customer-focused? Do you want to know more about these web design principles? Find me on Twitter, I’m @pwolfgram. Or leave a comment below and we’ll be right with you!