Adtrak News.

Skip to content

You Never Have A 2nd Chance To Make That 1st Impression

Posted on by Sarah - Web Design

The Hummingbird Card CompanyThis rule certainly applies to web design.

Many web users scan rather than read a website’s contents and will leave a site very quickly if they don’t find what they are looking for immediately.

A lot of the page won’t be looked at at all, so it is important to get a user’s attention quickly and lead them to important focal points on your site.

To keep a user’s attention, there are a number of key techniques that Adtrak use when designing commercial websites…

Initial Accessibilty

Ideally a website should grab attention within 2 seconds. Fail that and a user might close the browser window without having seen any of the site.

An Akamai survey suggests that 75% of 1058 users would not return to a website if it takes longer than 4 seconds to load. Not everyone has fast broadband and those who do are even less likely to wait for a slow loading site! Make sure images aren’t too large, you have decent hosting and don’t overdo the use of Flash elements and animations and avoid pop-ups.

Clarity

Website screenshot of Ashlar Electrical ServicesMake sure your content is legible. Choose the right font sizes and “white space” around different sections to avoid clutter and colours which are easy on the eye. The website should be obvious and self-explanatory.

Keeping it clean and simple often works best. Users don’t tend to look at websites to admire the design (unless they are designers) so it shouldn’t be the focal point, it should compliment and support the contents.

An example of clean, stylish design is Adtrak’s Ashlar Electrical Contractors.

A simple, straight forward layout on white, which uses strong noticeable colours, as well as a modern and subtle background texture in the header. Plus, you can never go wrong with a clear message…

 

The Message

Whose site is this and what do they do?

What do I want from looking at this website and how do I get to it?

Try to make these answers obvious, whilst simultaneously emphasising the benefits of your site. A company logo and a tagline explaining the company’s purpose should be visible on first sight.

Information about the company doesn’t need to be prominent but available to the customer if they want it, as it adds confidence that it is a genuine company. The most important information should be kept above ‘the fold’, the area in the browser that can be seen straight away without scrolling or navigating anywhere else.

However, don’t forget a user should still be encouraged to scroll down and see more. Websites with credible, good quality content should earn more traffic over the years, as opposed to a site with an ‘a la mode’ design that could date in under a year.

 

Imagery

Images should be relevant to the website and its message. It is generally considered bad practise is to use imagery for the sake of it. Clichéd stock imagery might give the impression that the site is not genuine and personable.

Instead, try to use images (perhaps taken yourself) that clearly show the product or service the site is about – this adds value in the same way that an ‘About Us’ page can add trustworthiness. Remember to choose good quality images to maintain a professional look.

 

Navigation

Horizontal navigation bars at the top of the page are considered more user friendly than side vertical navigation bars, as they allow the space on the left to be used for core content, suggests Smashing Magazine[4] amongst others.

Let the user be guided to focus points of the site by flowing items on your website. For example, arrows naturally guide the eye.

According to the Eyetrack III study, headings are seen before images and shorter headings are taken in more than longer ones. For usability, avoid long blocks of text without images, links or bold / italic keywords to support the paragraph.

 

The ‘Gutenberg rule’ suggests that the strongest area on a site is in the top left area, top right is slightly less noticeable, a weaker area is in the bottom left section and the eye ends up in the bottom right part of the page where the user should perhaps be lead to the next interesting place to go, whether with a button or a call to action graphic.

The Gutenberg Diagram

Below are heatmap examples of three sites showing where users looked most on the page. Red gets looked at the most, followed by yellow and then blue the least. (http://www.useit.com/alertbox/reading_pattern.html)

Eye Tracking heatmaps

Quantity

Greenlane Farm Kennels websiteToo much choice can confuse the user. Spending too much time choosing the right option can be exausting and result in a customer selecting something they are not content with. Be sure to consider your target market and what they might be looking for, so you can then implement this in the design.

On the other hand, make sure pages are not dead ends, instead offer suggestions on where to go next. Links should be easy to see, standing out from other elements on the page, and also easy to click or tap.

Green Lane Farm Kennels and Cattery works well as it is clear straight away what the company does and who they are. The home page offers links to service pages, a pet gallery, as well as additional information below the fold. There are also subtle options to allow users to enquire about the services.

 

The Result

Adtrak web designers aim to effectively sell a product or service to the consumer. This doesn’t mean forcing this option onto them at all opportunities but instead making it available whenever they are ready to.

A good commercial website should not only effectively sell something, it should also satisfy the user’s needs, provide recommendations and advice, as well as encouraging visitors to use it again.

 

The question remains, does your website nail that first impression?

 


Sources

[1] http://www.directcreative.com/blog/eye-tracking-websites

[2] http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

[3] http://uxdesign.smashingmagazine.com/2009/04/06/design-to-sell-12-tips-to-help-your-website-convert/

[4] http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/

[5] http://www.usereffect.com/topic/25-point-website-usability-checklist

 

This entry was posted in Web Design. Bookmark the permalink.
  • http://www.21thirteen.com/ NJ SEO

    Great article. We try to help clients build sites that take advantage of viewing trends like these.