Day 25: Let the squeaky wheel get the grease

“All the news that’s fit to print”, this was The New York Times’ motto when it was founded in 1851.

And this was what the first page looked like:

Yep, they really did try to fit all the news they could, didn’t they.

Apparently along the years TNY learned a few lessons, because this was what it looked like in 1919:

Much different impact right? Which one would you want to spend more time reading? The answer is pretty clear.

Now let’s take a look at their current website:

Wow, talk about a change.

The lesson here is pretty simple, but vital if you want to sell online.

“The squeaky wheel gets the grease”. In other words, you have the power of directing your users’ attention where you think it’s best.

Your content/design needs to be easy to consume and has to get your message across as quickly and effectively as possible. However, this is where it can get confusing.

Certain websites focus heavily on design while throwing everything else out of the window.

Like this one:

What these websites are truly guilty of, is focusing entirely on one aspect of design, which is the aesthetics. And don’t get me wrong, some of these businesses might have their reasons for doing it (maybe they are established brands). But if you’re reading this, chances are you are not a huge megacorporation whose brand is known worldwide.

Design can be divided into two main areas.

This means that if your website looks professional, trustworthy and everything from colors, typography and illustrations is consistent with your brand and customer values, you’re 50% of your way there (46.1% to be exact, according to this study), but what about the other half?

Another critical element of design after aesthetics, is visual hierarchy.

Visual hierarchy (which is at the base of information architecture) is the way elements are presented to organize and prioritize their importance. It’s your job to help users understand what they should look at first, and what is less important. So they can find what they need and you can align your website with your business goals (= making $$$).

You can quickly see how, if your website looks stunning but there’s no button or no indication of what you are offering, you’re doomed to having no customers. Same thing if your website showcases all the information and CTAs your customers need, but looks like one of those plain text websites from the 90s.

You need to work on both of these areas to make your design effective and trustworthy.

Here’s a few great examples:

 

 

There’s not much you can do on your own when it comes to the aesthetics, apart from hiring a good web designer or using a tool like this. On the other hand, a really good way to make sure you are presenting information on the page properly, is to use website polls.

You can deploy these on your website (using services like Hotjar or similar) and ask your website visitors a few quick questions. Here’s some of our favorites:

  • What task are you looking to accomplish on our website today? (entry field)
  • Did you find all the information you were looking for? (if no, ask details)
  • What’s keeping you from buying this product right now? (good for checkout or pricing pages)

You’ll be surprised how many people respond to these!

With the information you get, all you need to do is get to work and patch the holes in your visual hierarchy using 5 tools:

  • Size can help you increase or reduce visibility. Bigger elements stand out, use this wisely.
  • Use color and contrast to direct viewers’ attention. Don’t overwhelm users with a rainbow of colors. Make your text easy to read against whatever background.
  • Your text needs hierarchy too. Keep in mind the main 3 levels of prioritization: headings, subheads and body copy. Use them to create context.
  • Your fonts can dictate the look and feel of your brand design. Pay special attention at the feeling your fonts evoke through their category (serif, sans serif, mono or handwritten) and their style (regular, italics, bold, small caps).
  • Space matters too. White space (space between groups of text, images and sections) provides breathing room for users to consume your content and also helps organize the page clearly and effectively.

It’s a lot so don’t worry, we’ll look at each in more detail in the next posts.

Your homework:

  • Launch a website poll on the page you’ve chosen to work on and look at any heatmaps you have to understand how users are interacting with the page. Jot down ideas for potential changes you could make based on that data.
  • Go back to our lesson on Prioritization (post #12) and compare your notes to what the page looks like now. Can you improve both your messaging and visual hierarchies?
  • Try the squint test. Squint at your page so that all the details blur and see what stands out. Is that what you want your users to look at first? If not, how can you change it?