Business Web Design Guide

Chapter 2. Above the Fold (First Impressions)

"Above the Fold" is The Part that Users See First

The term is a reference to the visible portion of a folded newspaper.

For newspapers (and websites), content "above the fold" is designed to entice the customer.

Also important for websites: it's what provides the bulk of the context for the page that the user has just landed on.

Users evaluate your "above the fold" content:

  • Is this content relevant?
  • Am I on the right page?
  • Should I keep scrolling down, go to another page, or try a different website?

There's a lot at stake.

First impressions are huge.

So, let's see how to optimize our first impression.

Banner blindness is a reflex almost all web users have developed in response to being f***ing FLOODED with website ads for YEARS.

It means what it sounds like:

Banner blindness is when users skip over banned-shaped content that "seems like" an ad banner even though it isn't, because we're so used to glossing over banner-shaped ads.

Here's an eyetracking heatmap with banners highlighted in rectangles:

As you can see, barely any time is spent looking at banners/ads. And yes, this is an aggregate heatmap of 100s of users, not just one.

So, if you have whitepapers, resources, or links to whatever -- don't make your links look like ad banners, or else they will get skipped over.

This is partly why framing is such an effective tactic when designing Call-To-Actions (we'll go over framing in Chapter 5).

Banner blindness even goes beyond websites.

It even affects DIGITAL ELECTIONS.

How crazy is that? Check this story out:

Jakob Nielsen

"A poorly designed ballot hit Florida again in the 2006 elections, this time in Sarasota County. About 13% of voters failed to cast their vote for the House of Representatives, even though they voted for the Senate. Voting was done on a touch-screen computer, where users had to make their way through 21 screens to cast all their votes for various offices.

[E/N: Image below - Ballot page to vote for Senator]

[E/N: Image below - House of Rep Choice is at the top, but is ignored by 13% of voters]

Source: NNGroup

The banner everyone was blind to is at the very top of the second image.

13% of voters didn't vote for their House of Rep choice because of banner blindness.

That is a testament to how prolific this psychological UX trend is.

What % of your users might never see content if it looks too much like an ad?

Be aware of banner blindness, and design around it by making things bigger, framing them clearly, and giving them the attention they deserve.

False End - When Users Don't Realize They Can Scroll More

When users first land on a page, sometimes they might not know that they can scroll down for more content.

This (shady) website that I will not directly link to, looks like the entire page has loaded, and that there's nothing more to scroll for:

And indeed, there was more content below:

When it isn't OBVIOUS that there's more content to scroll down for, users can miss that content.

(Luckily perhaps in this case, but we can still learn a lesson from their faulty web design!)

The solution to this is easy. You can use blocks of different color, gradients, text that doesn't end on-screen, images that are "obviously" cut off and have more to scroll for, etc.

The main limitation is that you're forced into a choice.

You have to choose between:

  1. A fullscreen landing page that has no content to scroll for.
  2. A landing page that has content to scroll down for, and makes it obvious that it this is the case.

Present Calls to Action Clearly

The fold is where you'll see a lot of CTA's.

Look at the multiple CTAs for Wells Fargo.

There's not only the Sign On, but there's also the row of icons below it that serve customers' most common needs when they turn to Wells Fargo.

Make sure your CTAs look nothing like your labels.

Use distinct colors and shapes and whitespace /framing, to make sure users know your CTAs aren't labels.

One of the worst things I see is a link just be the same color (usually black) as other label text -- users miss those links all the time!

Here's an example from Glossier with an unmissable CTA:

I'd love to see the conversion rate %s on that "SHOP MAKEUP" button, but alas.

Just note that their button isn't titled "BUY NOW" or something vague. Try to make your CTAs a bit more appealing than that.

Also take note at how they solve the false end problem: the next block starts clearly in sight from the get-go.

Don't Skimp on Relevant, Good Images

Not to state the obvious, but please put some thought into your image choice.

Make sure your images are relevant. REI does a great job below:

The more barely-relevant stock images you use, the more you position yourself as a commodity, because you appear the same as everyone else.

The more specific, relevant images you use, the more you'll come across as a trustworthy authority.

If you use too many unoriginal stock images, or tedious word art or decade-old-seeming-clip-art, viewers will sensibly assume that what you have to say isn't all that original either.

No-brainer web image cheat sheet:

  1. Fewer stock images, more original images.
  2. Make sure your images look great on any device size. Neither mobile users nor desktop users should have a second-class citizen experience of your brand.
  3. Compress all images.

Compress Images with CTRL + ALT + SHIFT + S in Photoshop

Just as important as it is to use high-quality images, it's equally important to compress them.

Images affect load times (or perceived load times), and remember: faster load time directly correlates with conversion rate.

It doesn't matter how much you love an image, if it: a) never loads, or b) slows the load of your page as a whole so badly that it causes the user to bounce.

Luckily, compressing images is a breeze in photoshop.

  1. Go to File>Save Image For Web, or use CTRL + ALT + SHIFT + S (Mac: CMD + OPT + SHIFT + S)
  2. Adjust the slider as low as you can get it without the image degrading.

I tend to shoot for 100kb~ as a max limit, but sometimes complex images overshoot it.

I always pay close attention to the sizes of the images that will load first.

Important note: images don't get downloaded in the order that they're included on a website by default. In my case, it's because I use Google AMP HTML for all my articles. There are other libraries and frameworks you can use to achieve this (such as LazyLoad), but they're slower 😊

For example, here are all the the compressed images for this article:

All in all, 25 images for 2.5MB. Not too bad, considering much less is required to load the initial, above-the-fold view 😊

Find Creative Commons and Unlicensed Images

Good news: you don't have to resort to free (or paid) stock images!

Even at really big resolutions.

All for free.

Here

Unsplash

unsplash.com is a great new resource for unlicensed images:

It's regularly updated and 100% of the images are free to use, without attribution.

Unsplash is probably my favorite image resource, although it is the most limited in terms of niche queries that you might have.

Flickr

flickr provides great filters by usage rights and image resolution:

Google Images

Google Images is one of the oldest tools, and one of the most reliable.

Google lets us filter by both resolution (image size) and usage rights:

Filters can be found under the "Advanced" tab.

When in doubt, always give Google Images a try. Especially for niche searches. Sometimes you have to be very creative with how you word your query though.

Tumblr

Tumblr is a great source for images, IF you are looking for relatively small-width (800px~) images.

Although Tumblr's images are 10/10 in terms of content quality, unfortunately Tumblr downscales user-submitted images.

Still, it can be a great way to locate photographers to find originals from, if you're willing to hunt.

Instagram

Instagram is similar to tumblr in terms of having great images, but usually not in high-resolution.

You may have trouble finding large-resolution images on instagram itself, but you can find links to artists' and photographers' websites on their profiles.

Again, it involves a bit of hunting, but if you want some great imagery it can be worth it.

Avoid: Low-Contrast Text on Header Images

Seeing low contrast text ANYWHERE sucks.

Having low-contrast text in your above-the-fold content is a KILLER.

Here's a website whose prominent buttons are white text, on top of a dark background.

This creates bad usability, especially for viewers with astigmatism.

Do not make this mistake!

Always have enough contrast between text + background.

Avoid: Low-Contrast Text on Header Images

Here's Zara doing it right:

Notice two things about Zara's design:

  1. The are links limited to only the most relevant items (a lesson from Chapter 1)
  2. The bright link to SALE stands out, making it work as an effective CTA.

Effective web design is certainly a factor of Zara's success.

Avoid: Automatic Carousels

Carousels that switch from one slide to the next automatically are AWFUL.

Peep Laja of ConversionXL summarizes:

Peep Laja

  1. Human Eye Reacts to Movement (and will miss the important stuff)
  2. Too Many Messages Equals No Message
  3. Banner Blindness
Source: CXL

I agree. Here's what I'd say for each point:

  1. When a banner rotates, it destroys our train of thought as we look to see what just changed. We don't want to interrupt customers' train of thought! We want them to think about what they want to get done on our website, and then we should make it easy for them to accomplish their goals!
  2. You can't just put all your offerings into one, animated, sliding banner and expect a user to sit there and successfully consume them all. That's just not going to happen. Nobody does that.
  3. Yep, carousels are affected by banner blindness.

In the graph below, 4 different websites' implementations of an automatic carousel had the following click distributions:

As you can see, carousel items that appear later are heavily neglected.

Automatic sliders are distracting.

Pick one message for your opening block.

Avoid trying to cram several messages into a sliding carousel.

Avoid: Manual Sliders

Sliders are good for being able to tell every VP that their project is on the home page, and just about nothing else.

Sliders suck.

Manual sliders are not much better than automatic sliders, although they're more likely to be engaged with, because they don't move to a new slide by the time a user can read and decide they want to click the CTA.

Here's some real-world data on just how ineffective they are.

Smriti Chawla

"Notre Dame University tested their carousel. The chart below shows the results they found. Only 1% of total visitors clicked through from the carousel, and majority of these visitors (84%) interacted with only the first slide of the carousel. Too many offers together just say, "We don't know what should be our top priority, so we dump them all together here and see which one works the best." Man up and take some responsibility, people! Decide the priority of your offers before you proceed any further."

Source: vwo

Amazing results from the study.

84% of visitors only interacted with the first slide of the carousel.

Most people simply don't interact with sliders.

And on Notre Dame University's website, only 1% even looked at the other slides.

Summary

  1. First impressions matter. Provide context that lets users know they're on the right page.
  2. Use high-quality images as appropriate -- but be sure to compress them. After all, site load time is one of the biggest parts of our first impression.
  3. If you have CTAs, be sure that they are unmissable. Use some combination of: whitespace, different colors, different borders / underlines / framing / fonts / text case.
  4. Test your layouts with your friends. Keep an eye out for them tapping anything that they think is a link -- but actually isn't one.
  5. Find good images quickly by using search filters.
  6. Huge images look great, but make sure your text is legible to everyone, and not just you. Remember, people with much worse vision than you will be using your websites (statistically).
  7. Sliders are only good for being able to tell every VP that their project is on the home page. Don't use 'em, they have poor engagement and are distract from users' predetermined goals.