Visual Hierarchy: Give Your Product a Chance to Sell

Criticue is proud to present a series of informational articles intended to help our colleagues in the web design and ecommerce world. Every article will provide you with a key finding that we have made in our work of helping web designers create the most effective possible designs.

We strongly recommend that you have someone not associated directly with your creative staff review and test your web site. Criticue.com provides free, intelligent, curated reviews and ratings of your site by real users.

 

Introduction 

Small things can have huge effects… for better or worse. It’s no more true than in constructing your site.

Small mistakes in the design of an e-commerce or product sales page can cascade into a general visitor experience that hurts your chances of selling or converting.

Let’s look at how you can embrace visual hierarchy as a key web design tool that supports your business.

 

Why Hierarchy Matters 

We will make a working assumption that you want your web site to produce as many conversions – sales, email list signups, or other visitor actions – as possible.

If your visitor doesn’t see information prioritized in a specific way, they will not take an action that you desire them to take on your site. A high bounce rate is one symptom of this problem, and another is very poor conversion rates.

One very common design mistake is poor visual hierarchy – not giving importance to the most important elements of your content. Hierarchy usually means a tree like structure. Here, we mean that you should plan content that progresses and is arranged in a way that your visitors will be mostly likely to be engaged with. Well constructed hierarchy pulls your visitor’s attention toward elements that you want them to pay attention to.

 

How to Show Hierarchy 

A deliberate hierarchy should be evident in your web design. Everything on your page – the text, the layout of the page, and even the colors and the placement of minor elements such as underlines or highlights – can be used to communicate the hierarchy of your site to the visitor. Poor decisions in this area can have the effect of driving away sales.

The elements of visual hierarchy are:

  • Titles and headlines vs body copy. Titles and headlines signify important summary information. Most site visitors are impatient and expect to read a useful summary of information before they go further and read your copy. Well written headlines and titles fill this need.
  • Visual arrangement. Most written Western languages are read left to right and top to bottom. Also, centered information is more important visually than information at the edges. This means that if you want something to be seen and acted on, you need to place it in the center of the person’s field of vision. The natural direction of reading also indicates that content on the right is more noticeable than content on the left of the page. An element that the visitor must see should be somewhere in the center third of the page and preferably to the right.
  • Color and text attributes. Color, font styles such as bold or underlined, and font size send a message of importance and hierarchy. Routine information that is not essential to the sales process should be rendered in a relatively small font or removed altogether from a sales page.

These elements can all drive visitor behavior.

 

Examples 

Let’s look an example of poor use of visual hierarchy, and another page that uses hierarchy successfully in a prototyped design.

 

Figure 1 – Poor Use of Visual Hierarchy

Here we can see three common, but easily repaired problems with a typical site design for online sales of an inexpensive product.

  • The “Buy” option is not obvious (even though it is repeated.) And the “Free Trial” button is almost unnoticeable. There are two “Buy Now” options, both easy to overlook or to require hunting by the user due to their positions.
  • No summarizing information. The page lacks summarizing information, namely a meaningful heading, to give a visitor a reason to pay attention to the site or what it is offering.
  • Unimportant information is given too much prominence. The teaser text of revisions is featured on the main page of the site, and consume most of the central area. But only current owners will care about revisions. 

Let’s next look at a version that fixes all of these problems.

 

Figure 2. Good Use of Visual Hierarchy 

The problems with the example shown in Figure 1 are eliminated:

  • The two most important user options are very prominent. The Buy option is much more obvious due to larger size, better positioning and a different color. Also, the “Free Trial” is extremely prominent. Due to top-to-bottom reading order, “Buy Now” appears slightly more important than the “Free Trial”… as it should.
  • A meaningful title that provides real information is used. “One application that will solve all your problems” should be replaced by a headline that explains the primary benefit of your product or service in a 10 word or less short sentence.
  • Other important information is given center of page treatment – here, the screen shot of the application being marketed.
  • Distracting subordinate information that doesn’t support the purpose of the page is summarized and demoted in importance. The version log is like a footnote here – as it should be. 

 

Conclusion 

Visual hierarchy is a key tool for creating focus on your product, gaining the attention of site visitors, and providing the conditions for conversions to happen. Pay close attention to placement, color, headlines, and type of content. And test your design thoroughly.

Be a lazy startup founder.

Here’s a full disclosure: I’m one of the laziest persons I know. A multiple world champion in procrastination. If I don’t have a degree in it, it’s only because I can’t get around to buying one.

When I started working on my latest startup, Criticue.com, I had been working full time in a rather intense environment that I had gradually grown tired of. At some point I decided to start a side project and hopefully make it into something.

So every day I’d come back from my day job and spend an hour or two on Criticue. It had taken me over 4 months to create a minimal working version I could launch in December last year! Since then I incorporated, got some seed funding and along with my team I’ve been constantly pushing out incremental improvements to the service.

Now, you  know I’m lazy. I’m not a particularly patient man either, so what made me persist? Lacking an inborn talent for persistence, I focus on technique instead.

1. I set humble goals.

My very first version of the site was a mere landing page asking people to join the beta program. A post on reddit, however, attracted over a hundred beta testers in two days. It gave me a push to keep working.

Then I created a very, very basic MVP and gathered feedback, which was nearly all positive. This gave me even more of a push.

Even now, we try to push updates to production as often as possible, not only to get feedback from users but to keep ourselves motivated. Seeing the tangible results of our efforts is a wonderful reward.

2. I ask for support.

A dozen or so people have been involved since very early stages and I have been staying in touch without overloading them with information. I also listened to their ideas and discussed them thoroughly using the constructive elements to drive change.

Backing of my support group proves invaluable whenever I start having doubts about the project and start losing motivation and focus.

3. I avoid greener pastures.

More often than not, my mind behaves a bit like a stubborn mule. If I force it too much, it digs in its hooves and refuses to do anything at all. If I let it roam free, it goes places it likes rather than focusing on the task at hand.

A mixture of pleasure and pain is the way. I don’t want to lose track of my progress so I set daily goals in the form of a TODO list. I stick to the list as much as possible without being too bureaucratic.

There’s a nice trick I use to avoid getting distracted with new ideas. Whenever my mind comes up with something like “I got a better idea, do it now, do it, do it”, I write the idea down on my TODO list and go back to the task at hand. My mind thinks “Ok, I see, we’ll do it later” and calms down. Very gullible, I know, but this is the way minds often work. :)

Also, I do allow myself to work on useful tasks that are fun (such as coding!) to take a break from non-fun, more urgent ones (pr & marketing!). This alleviates the tension but you need to be careful and avoid being overindulgent.

4. I clean my plate.

Thinking *too much* is counter-productive. Just having a task in front of your nose and focusing on it is how you get things done. This is easier than it sounds.  

Think too much, do not. Do you must. Yesssss.
Minch Yoda

One good trick is using the pomodoro technique. If you haven’t come across this, you might find you truly love it. It’s simple and it really works for many people. 

When faced with an apparently insurmountable task I no longer commit myself to finishing it on the spot. I say: “OK, let’s spend just 25 minutes working on the nightmarish bug and then we’ll see…” This gives a sense of freedom. So my silly mind is like “OK, I can take 25 minutes of this but no longer” and I’m like “Yeah, sure, just 25 minutes, we have a deal”. 

Then I start working and what usually happens is this: I get so immersed in the work that my mind doesn’t mind. Then after a while it starts whining again and I pat it on its proverbial back and let do its bidding for a while.

When I notice it relax, I go back to: “OK, how about just 25 minutes of bug fixing, just 25 minutes, promise?” and the story repeats itself.

A typical mind can be easily fooled like this. 

5. I breed useful habits.

This is probably the most important bit. I make sure to create repeatable conditions and associate them with productive work. Things such as the place I work at, how it is arranged, how I start my working day (or working evening) and  how I finish it, are all important.

Since I quit my day job, my daily routine has looked like this: I wake up at 6am for a jog, shower, eat breakfast, play with my daughter for a few minutes and arrive at our office at or slightly after 8:30. I make myself coffee (a crucial part of my routine!) and after a few minutes discussing things that need to be done I immediately start my first pomodoro. No email, no reddit. I start working on the first task there is to work on. 

Days that start with this automatic routine are usually very productive. On the rare occasions I have to skip any of the steps, for example if I have to skip the morning jog, I find myself slightly confused and have to think harder than usual what to do next. And once you start thinking, the animal of your mind kicks in with its various ploys. 

There’s a great book about the psychology of habits ‘The Power of Habits’, I highly recommend it.

How do you deal with procrastination? Please share your thoughts with our readers. 

Martin Bilski