Does your website feel like a never ending guessing game?

We’ve all have heard about the 15 second rule, it’s the length of time you have to keep your visitors before exiting. But when they do stay…what happens next? How do we make sure our visitors read what we want them to read? In Todays Episodes We’ll be exploring How you can guide your visitors eyes around your website effectively. We’ll first help you develop a hierarchy approach to the content on your site. We’ll also touch on design elements such as scale, imagery and colour to help you visually organise this information in the order you want your visitors to consume from first to last.

Audio Time Stamp | 00:45

There’s no denying that your website has a lot to tell your visitors.

So how do we prioritise which pieces of content on your site is more important? Content can include a range of this, images, text and illustrations. When we cram too much content in one section your visitors won’t know where to look and what to focus on first. This will enviable lead them to have feeling of frustration and therefore more likely to just give up and exit out.

Let’s take the homepage as an example. Each homepage is broken down into sections. Each section should be dedicated to communicating one thing. Whether that’s explaining the Benefits of your product or service, Features you include, Your Credibility, About you, What Resources you offer, The Lead Magnet You Want them to sign up to.

You might feel like everything is really important you.Don’t worry you’re not alone. Instead, put yourself in your visitors shoes. And ask yourself what will your visitor need to know, want to know and see first? Once you’ve decided not the first section. Decided what would they want to know after reading that and so and so forth. It’s a safe bet that your visitors will want to know what you do and who for firstly.

Secondly you might want to guide them toward the benefits. Benefits and features can get mixed up. Remember that your benefits is the results they will gain, have or feel after they’ve used your product or service. Features are a list of things your service or product included. Benefits are much more compelling than features this is why I encourage you to put this at the top of your homepage!

Audio Time Stamp | 02:50

Have you ever seen website with an endless paragraph of long text?

Of course not, and if you have it’s likely you quickly retreated. Websites need good design. This include elements such as illustrations, images, fonts and colour to break text up and keep this exciting for your visitors eyes. Once you have agreed on the order of sections. We’ll be exploring how you can determine the hierarchy of content within a section through design techniques.

Audio Time Stamp | 03:25

How to start moving your visitors eyes where we want them to go.

Let’s start moving your visitors eyes where we want them to go.Hierarchy is basically the process of where do we want our visitors to look firstly, secondly and lastly. This order should mirror with what is most important to least important. To know what order you want things to be seen within each section, we must firstly priorities what this section needs to say and include.

Non of your visitors will want to hang around to read long paragraphs, keep it short keep it sweet. Make sure to make a hierarchy by include headings that are closely related to the smaller paragraph of text underneath. These headings can be written as a hook, to grab your visitors attentions. A bit like the subject line in your emails. They are more likely to read this. Therefore more likely to carry on and read the more in-depth information underneath. So how do we get our visitors to read?

Audio Time Stamp | 03:25

Within every design we need to be aware of scale.

If everything is all small or all large, it won’t pull our eyes to specific things, instead will be left to our own devises and decided what to look at. However, if we design intentionally making sure you have something that is the largest, medium sized and small. Our eyes will naturally be drawn towards the the biggest thing first and we’ll work our way down to the smallest. Therefore going back to your text. The heading should be the largest thing to grab their attention the paragraph of text will usually be the second largest.

Audio Time Stamp | 05:05

But what about imagery how does this play a part with scale?

Imagery whether it’s images, illustration icons they can give you visitors a well deserved break from text. However, what you choose to decided to include should have a deeper reason. Possible to reference something you’re talking about or explain something that is difficult with words etc.There are many way to use imagery to your advantage!

Did you know that images with face are the first thing people are naturally pulled to look at first. Therefore if you have a piece of text you really want them to read. Use a large image of someone looking in the direction of this text. This will guide you visitors from the their eyes to the text.

A common occurrence I see with images is using them full screen and layer it with text over the top. This is a fine layout, unless your text is difficult to read due to the image behind it. To avoid difficult to read text we must use a slightly transparent colour layer on top of the image underneath the text. Therefore the text can stand out much clearer as the image is slightly muted into the background.

This would mean even though the image is the largest thing on the screen because of it muted colour it would be the secondary thing your people see and the white vibrant text would be eye catching.

Audio Time Stamp | 06:36

How does colour effect the hierarchy?

Colour is very powerful in both branding and web design. Colour can affect your visitors mood as well as indicate something that could require an action or highlight something. For example, a button is usually a colour, as well as text in a colour is usually a hyperlink therefore we assuming when we see coloured text we can click on it and be taken somewhere. Colour has a functional use.

Sometime you’ll be in a situation where you want to present two buttons on a page. This means you have to decided which button is more important? This will lead to the question of, where do you want them to go or do? Might guess is to your product page, services or get them to book a call with you. Either way you’ll have one button more important than the other, this button is the one you want them to take notice of first. We can do this by using colour for this button so it pops out more from your background colour. The second button could be in a muted tone of the other colour or you could use a ghost button. What a ghost button you wondering? A ghost button is when it’s just has a coloured outline rather than a blocked colour. It’s less demanding for your attention than a blocked out button.

Audio Time Stamp | 08:41

It’s time to take the guesswork out of your website and create a hierarchy.

Use the hierarchy approach today, No more, bombarding you visitors with too many things at once. Get crystal clear on the right order of each sections for you and your visitors to scroll through. Zoom into each section, determine what exactly that section needs to say and the type of content you plan on including.

Prioritise the order you want your visits eyes to focus on. By using all the design tips mention previously. To summaries scale, never full into the trap on having heavy big and loud! Also have something big, medium and small scaled. Whether that’s you’re heading, text, imagery and buttons.

Remember to use imagery to guide and or explain hard to articulate ideas as well as breaking up long piece of text. Colour is great to communicate more about how your brand is but it also should be used in a functional manner to drawn eye to button and CTA’s. If you are unsure what brand colours to use, listen to episode 23!