Does your website pass the usability litmus test?

Usability is a key factor in determining the success of your website. When designing and writing content for a website, consider how your site is perceived when a user clicks through from a search engine result.

If a user lands on your website and cannot find the information they need within seconds, he/she will likely leave and move onto a another site.

So how can you give your website a fighting chance?

The usability litmus test

According to the renown usability expert Jakob Nielsen, there are three key questions a user must be able to answer within the first thirty seconds of viewing your website:

• Who are you (the business)?
• What do you (the business) do?
• Where do I (the user) go next?

If a user cannot answer these three questions in thirty seconds or less, it's time for a website redesign.

Who are you?

Eye tracking studies show that the first place a user looks at is at the top left area of a website. This is why most websites have their company logo positioned there. The placement of the logo in the top left also helps orient the user while building brand awareness.

What do you do?

Do you cut hair? Do you offer advice? Do you plan events? Tell the user what you do or can offer simply and immediately, they do not want to decipher it from tag lines or jargon. If your business sells tangible products, an image captures more than words.

What do I go next?

In the seconds it takes a user to collect the above two pieces of information, the next thing a user wants to do is achieve their goal - whether it be browsing your products, reading advice or making an appointment. This calls for a clear navigation menu, well organised information and call to action items that catch a user's attention.

User expectations

For more complex websites, issues such as security, accessibility, interactivity and compatibility will also need to be addressed. Your business type and target audience need to be considered alongside usability.

Users visiting ACME Property Lawyers website will have different expectations to when visiting ACME Fashion Label. The former is expected to have a lot of text based content that should be easily found, the fashion label website has the luxury of heavy image content, some Flash animation and the associated longer load time.

Of course, a as a web designer we want to challenge these expectations and standards. If done in the right way, the result is outstanding; however, a lot of the time we must remind ourselves that the standards exist for a reason and have come about from other people's failed trials and pushing of boundaries.

What you should do to improve usability:

• Ensure your navigation is clear and consistent across all pages.

• Declare a title for all of your web pages.
  
  The page title is the headline for the webpage in a search results listing – the more specific it is, the more likely it will be clicked-through e.g. our page title for the Blog section is “Giggle Media: Websites and Web Design for Small Businesses | Blog - The Buzz”

• Write the right way for the web. Organise and break your content into proper headings, subheadings, lists and paragraphs. This ensures your content can be easily skimmed.

• Use images where relevant to convey a message but do not over do it.

Examples in bad web design: Poor structure and organisation

The term web design does not only refer to aesthetics of a website but also its structure, functionality and features. There are numerous ways a website can suffer from bad design, this article looks at poor structure and organisation as a basis for bad web design by examining three websites that suffer from it.

The website learning curve

There is a learning curve with every new website a user visits. Ideally, the learning curve is unnoticeable due to user expectations. Users expect the main website navigation to be located at the top or on the side of a browser window. Users expect hyperlinks to be underlined or highlighted in a distinct colour.

When shopping online, a user expects to create an account to proceed with purchase (and is pleasantly surprised when they do not have to). A user does NOT expect to create an account or login to view a list of a businesses services and products.

When the learning curve is steep...

If a website has a steep learning curve associated with it, the user is more than likely to give up on it no matter how beautiful or how wonderful the service and product on offer.

Here are three example websites that suffer from poor structure and information organisation.

MCI Management Center

http://www.mci.edu/com/index.html

This is the website of an Austrian university yet at first glance, it is not entirely clear the site has anything to do with teaching or learning.

The most noticeable mistakes in the web design are:

• The lack of a grid structure on the homepage leaves the user confused as to where to focus first.

• On the home page there is no distinct and immediate message about MCI and what type of service it offers. “Bridging university and business” can be interpreted in a number of ways. A supporting headline is required.

• MCI logo is relegated to the bottom - what an outrage in branding!

• The main navigation design is bizarre and not instantly recognizable as a navigation tool. It is a haphazard design and inconsistent with the rest of the website.

• A lot of small-sized text that isn't real text – it is text saved as an image. Saving large chunks of text as an image limits accessibility and hides the website content from search engines.

• The single image of the Alps on the homepage is redundant and does not convey to users that MCI is an institution that helps students “establish strong links with the international business world”. At least in the German version of the site, there is an image of a business man.

• There is poor hierarchy of text and hence making it difficult to skim read.

In terms of first impression as an educational institution – MCI's website leaves much to be desired.

MSY Technology

http://www.msy.com.au

MSY Technology deal in computer hardware and technology. Do they know how to operate one?

The building of trust in a business is important and the way this website has been put together does nothing to convey professionalism or even semi-professionalism.

With the amount of choice customers have now, many customers will not buy from a company purely based on an ugly website – much like not eating at a restaurant that has dirty cutlery and tables.

This website should be completely redesigned. The stand out mistakes are:

• Non existent consistent and clear navigation

• Ransom-note text styling – so many font styles, colours and sizes that it is an eye sore to look at, let alone try to read.

• Text that look like hyperlinks but are not.

• Pages that open up and user gets lost in, not knowing how they got there or where to go next.

• Pages that open up as PDF without warning.

This website needs to be completely redesigned and is a prefect example of why it is important to have a website professionally planned and designed.

Jacksons of piccadilly

http://www.jacksonsofpiccadilly.co.uk/main.htm

Jacksons of Piccadilly is a premium tea house in London. The website has gorgeous artwork and smooth animation but suffers from style over structure and substance.

The features of bad web design this website suffers from are:

• An unnecessary introduction page. The home page of this website requires the user to click through to view useful content (not that content is promptly presented). This introduction page is redundant and would be better placed on the follow-on page of the website.

• No branding after the introduction page. It's a good thing humans don't have the memory of a goldfish.

• Invisible and mysterious navigation. It's a game of hide and seek for the user as one moves the mouse around searching for where to click to find information. The main navigation is the key to a website, hiding the navigation hinders and frustrates the user. To make matters worse, as Flash based wesbite, users cannot even click the Back button in the browser.

• Over animation – the first time the site animates it's okay but it quickly becomes Flash Trash and a hindrance to a user in search of useful content. Every time a user wants to read information about their tea range, they must watch the animation. This chews bandwidth and wastes the user's time.

• Complete Flash content - all of the text is embedded into the Flash file. This means the text cannot be selected, printed, accessed by text-readers nor can it be indexed by Google and other search engines.

Although this website has been professionally designed, it has not been properly planned and thought out. The structure and information organisation is terrible. That is why picking the right web designer is important.

What you should do to ensure good structure and organisation:

• Use a standard layout on every page. This means keeping the navigation bar, colors, fonts, link styles and other web elements consistent in every page.

• Every page should have an effective website navigation bar, either on the top or on the left. Don't play hide-the-navigation with your user, it's not that much fun in reality.

• Place the logo at the top (preferably left) and always link it to the home page.

• Reserve the footer to place your copyright notices and links such as a site map, a privacy policy, terms and conditions and contact information.

• Highlight the current active page in the navigation whenever possible so that the user is aware of where he is currently at. Here we highlight our menu in yellow.

• Don't assume that users know as much about your site as you do. Users always have difficulty finding information, so they need support in the form of a strong sense of structure and place.