Web design tips (part 1)

Follow the F-pattern

Eye-tracking studies show that website visitors tend to glance along the top two lines of text, then scan down the left hand edge taking in only the first two words of each line, and perhaps look across the page once more. They spend very little time looking at the bottom right hand corner of the web page. The pattern looks like the shape of an F.

When you know about this, you can arrange your content to suit it. For example, write a powerful headline at the top of the page that answers ‘what’s in it for me’. Add a sub-heading mid-way down the page, especially if the first couple of words are significant ones. And avoid putting anything important in the bottom right hand corner.

Splash pages

Have you noticed those websites that start with an animation and – if you’re lucky – a ‘skip intro’ link? Have you ever watched the intro without skipping it? No. Me neither. This is called a ‘splash page’ but any extra click e.g. ‘enter site’ is a chance to lose site visitors. Please don’t do it. The only people who benefit from splash pages are the web designers who get paid to create them.

Navigation

Aim for a site that is no more than three clicks deep. Note that site navigation is not the same as print pagination. As pages can be read in any order, site visitors need to be able to get to anywhere, from anywhere. To do this, you can include a sitemap (this is good Google practice too) and/or breadcrumb trail, especially for complex sites with lots of pages.

A breadcrumb trail is a set of links that show where you are within the site e.g. Home > Services > Copywriting

New windows

It’s bad form to make site visitors open a new window or download a document without first warning them. In fact, you should only open a new window when taking them to another site. When you direct them to another page of the same site, it should open in the same window.

Standard positioning

Here’s a checklist of things that have become standard in web design:

• Logo top left, clickable link to your home page
• Phone/email top right, so people don’t have to look far to contact you
• Search box (if used) top right
• Social media icons small and bottom right, because the objective of your social media is to drive traffic to your site where you do your selling, not the other way around
• Main navigation top or left sidebar
• Newsletter/tipsheet signup top of right sidebar
• Calls to action bottom or right sidebar (above the fold)
• Video and /or image to catch the eye
• Main heading with H1 tag
• Body copy starts above the fold, include sub-headings and bullet points for skim-reading
• Pictures with captions beneath or to the right, and alt tags
• Sharing buttons on every added value page, to make it easy for people to link to your content throughout their social media networks (get the code from addthis.com or sharethis.com – it’s free and registration is optional)
• Sitemap / © Copyright information / T&Cs / Privacy policy / postal address in footer.

I originally wrote this article for Fresh Business Thinking

No comments yet.

Leave a Reply