top of page

What am I supposed to be looking at here? (AKA Visual Hierarchy)

Last week I talked about the user experience of your website and I promised more detail. Well, I'm delivering! The term Visual Hierarchy is simply a method of arranging elements to show their order of importance. I briefly mentioned this can be done using color, font, animation, or placement on the page.

Studies show that people read from top left to top right, then bottom left to bottom right. In fact, users spend 80% of their time viewing the left half of the page. Knowing this, we can strategically place content where the user will look first. We also know not to put something really important in the bottom right as chances are, they may never see it.

Visitors to your website will form an impression almost immediately. I've seen studies that range from 1-3 seconds. It might as well be zero! The amount of time the average person spends looking at a website is equally shocking at 10-20 seconds. So I'll say my third favorite word (behind efficiency and shenanigans) .......EDIT!

For the love, please. edit. If you think you need 10 words to say something, try saying it in 7. It's a fun little exercise! Here is a list I sent to a client recently who really wanted to write 10 paragraphs and I wanted him to keep it to three:

  1. Write a list of everything you think you need to communicate to your clients on your website

  2. Put them in order of importance

  3. Drop the bottom 3rd

  4. Try to communicate each thing in one sentence

That last one really gets people. You don't need to tell someone everything to answer their question. Here's a great, albeit left field analogy: I once asked my children's pediatrician how to talk to my boys about sex. He said: " Give them the most basic and general answer. If they ask, give them just a bit more detail until they feel their question is answered. That way you don't under or over explain." Not only is this an excellent tip for talking to your kids, it's also a great way to design your content! Your Visual Hierarchy should give the most attention to the simplest answer. Then, as they are drawn in, they will get more and more info. For example:

The headlines speak to a few pain points, the smaller line gives the solution, and there is a clear place to get in contact with me. My menu pages have clear titles and scrolling down my page you will find more detail about each of my services.

Don't forget to subscribe by clicking the login button on my website so you don't miss my articles on subjects like white space, blog title creation, website personality, and much more...

Toni Therrien is a web designer, writer, and mother of two wild boys. She helps entrepreneurs and artists by designing unique websites that reflect who they are and what they do. She also does blog and copywriting for clients. To schedule a FREE consultation call, click here.

10 views0 comments

Recent Posts

See All
bottom of page