SiteProNews: December 11, 2006 Feature Article

To Print: Click here or Select File/ Print from your Browser Menu.


  Article printed from SiteProNews: http://www.sitepronews.com
  HTML version available at: http://www.sitepronews.com/archives.html
Correcting Common Usability Mistakes
By Mark Johnstone, Senior Web Developer,
StepForth Placement Inc. (http://www.stepforth.com) (c) 2006

Each day at StepForth Placement we view dozens of websites that
request an SEO Review (http://www.stepforth.com/review/) and a
vast majority of these sites have fundamental usability problems.
Often times neglecting this important element of a website can
lead online visitors to become lost, frustrated and/or confused.
All it takes for a visitor to decide to stay, explore or leave a
site is 0.4 of a second. Attracting visitors to your website is
a formidable challenge; it is yet another to build a fast
connection with them and keep them there. With this in mind,
here are some simple measures that can be taken to remedy these
mistakes and help promote your online conversions.

Having great search engine placements is one thing but to create
a usable website environment is just as important. What good can
come from "being found" if users quickly exit your site? A solid
search engine friendly and usable website should be your answer
to both of these major components for your online success.

There are a variety of standards still in place when it comes to
designing a usable website. This is not to say that the
uniqueness and creativity of your website has to suffer, rather
by following some simple guidelines visitors know where to go to
find the information they need.

The process of developing a usable interface can be a balancing
act. Some core elements need to be assessed prior to any actual
design work being done. Attention to content creation, search
engine friendly design tactics, and the face you put on your
design each have to be blended into this usable environment.

This is a timely subject for us at StepForth as we are in the
early stages of revamping our own websites based on customer /
client feedback, recent trends in the design world, and our ever
increasing need to develop a scalable website solution. Needless
to say we will be following the same guidelines outlined below
to ensure we have a website that "works".

I would highly recommend referring to the related links located
at the bottom of this article for more details on this subject.

Here is a snap shot of the most common design mistakes we see
with websites.

CONTENT

Formatting Linking Text

Frequently we see designers underline body text or even text in
images that is not directing users to another part of the
website. Underlining on non-linking text is a huge problem
especially if you have other links on the site that use the
underline to illustrate a clickable path to follow.

A current trend is to have links displayed in body text without
the underline text decoration (as defined in the website's CSS
(http://en.wikipedia.org/wiki/Cascading_Style_Sheets) ) yet this
may still cause unnecessary confusion with users. Try using other
methods to highlight a message you want to stand out from the
rest of the page content when it is not intended to be a
hyperlink.

The same rules apply with the actual colour scheme you choose
for your text. Avoid the use of the standard link colour blue
(RGB colour #0000FF) for non-linking text as well. This will
stop users from becoming frustrated when they attempt to click
on text that will take them nowhere.

High Contrast Body Text

Another poor design trend we are seeing more of is the
presentation of grey body text on a white background. This has
no value what so ever as it immediately excludes a vast majority
of users that cannot even read what is displayed. This is
definitely one case where usability outweighs the need for
attractive page aesthetics.

If clarity is your goal for your website, then advocate high
contrast body text. This rule also applies to text on images; it
is best to avoid fonts and styles that are hard to read.

Page Scanning

The old saying "first impressions are important" holds true when
it comes to a visit to a website. There is a fine balance when
it comes to how much text to include on any give page or
subject. Remember time is precious before a user determines if
they are in the right location on your website or not. Keep your
initial message brief and informative and offer related pathways
if the user wants to learn more. Most users have the habit of
quickly scanning a couple of paragraphs before they either
decide to learn more or look elsewhere.

SITE STRUCTURE AND PAGE ORGANIZATION

Promoting a site structure that builds a level of user
confidence is critical to a website's success. Will visitors
find the information they are looking for or can they clearly
understand your message? Solidifying a clear and organized site
structure from the top down will help with this.

Logical Site Structure

Depending on the scale of the website this task can be fairly
easily implemented. Unfortunately a common mistake is to try to
cram as much information on a page as possible. Each topic
should have its own page and any additional related material to
that content should be the only linked content present (other
than the main site wide navigation). To help clarify this, here
is an example:

Perhaps you are selling musical instruments online and the page
in question is a guitar you are trying to promote. Included on
this page should be the standard image(s) of the product, and
the description of the product in detail. If users wish to learn
more about the product such as technical specifications or an
online downloadable manual they should be (logically) linked on
the page as well, along with any other relevant material
directly related to that product.

It is very easy (and common) to want to point to other unrelated
content that you think a user might want to know about. Do not
offer opportunities for them to be led astray by cluttering the
page with other products. Chances are potential customers
arrived to that particular page because they wanted to.
Cluttering a page with additional information about the latest
flute in stock is not going to help conversions.

Perhaps the reason that web designers fall into this trap is
most likely because they try to employ tactics used in print
advertising. With print advertising you are given a certain
amount of ad space to illustrate your product. Sometimes the
designers forget that websites are dynamic and can grow beyond
that page.

Splash Page

Visitors are coming to your website to find the information they
are looking for and often the first thing they see is a splash
page. The majority of the time these intro pages offer nothing
useful to the user and fall outside any consistent look and feel
of the rest of the website. Generally speaking, the sole purpose
of a splash page is to add a "cool" factor to the entryway to
the site. Each and every page on your site including the
homepage should be informative and consistent in look and feel.

    AN SEO NOTE: If the above is not enough to scare you off of
    using splash screens, consider that SEOs believe the index
    page (aka the home page) is perhaps the most crucial element
    to successful search engine placements. If you have very
    little relevant content on your index page it throws up an
    unnecessary barrier to the search engines. What good can come
    from making your website usable if nobody can even find it
    to begin with? Learn more about the dangers of Splash
    Screens >> (http://news.stepforth.com/2006-news/
    Is-Your-Website-Search-Engine-Friendly.shtml)

NAVIGATION

The placement and organization of the navigation on your website
is critical to keeping those potential customers on your
website. Customer satisfaction statistics state that up to 95%
of visitor frustration comes from inadequate navigation
methods.

Maintain Site-wide Standards

Exactly where is the best place on a page to insert your
navigation? Numerous studies have been done on this. Should the
main navigation be on the top of the page? Should it be on the
left hand side of the page? However you choose to present your
navigation keep it consistently placed throughout the website.
Users should always know how to get back to information they
have already seen and as well, they should be confident they can
find the information they have yet to read. The homepage button
should be in the same place on the page regardless of where you
are on the site.

What am I Clicking?

Users should always be made aware ahead of time by what is
stated in the anchor text or button where they will go if they
click that particular link. If the click leads to a downloadable
piece of software or to a PDF file, inform them upfront. A vast
majority of web surfers are discouraged by unexpected results by
navigating through websites and being forced into something they
do not want to do.

The following is a good example on how to inform a user that the
link they are about to click is a PDF file (warning: the
following examples are not linked):

"Product" User Manual in PDF format (16MB)

Or

"Product" User Manual (16MB – PDF format)

NOTE: It is also a common courtesy to inform users of the
physical size of file to be downloaded, as shown above.

Just like there are rules of the road when driving a car there
are guidelines to follow when developing a website. It is
important to note that if tackled in the right manner
incorporating basic usability components should not hamper
creativity with the vision you have with your website.

If you have any questions about search engine friendly (and
usable) designs please contact me (mark@pureignition.com) .

Related Links

SEO Friendly Redesign
(http://news.stepforth.com/2006-news/SEO-Friendly-Redesign.shtml)
– By Mark Johnstone

Is Your Website Search Engine Friendly? Your Personal Checklist
(http://news.stepforth.com/2006-news/
Is-Your-Website-Search-Engine-Friendly.shtml) – By Ross Dunn

The Ten Minute Optimization REDUX
(http://news.stepforth.com/2006-news/Nov29-06.html)
– By Ross Dunn Includes pointers "Is your Page Marketable"
(Section 2.B)

Website Usability Leads to Conversions
(http://news.stepforth.com/2005-news/
Website-Usability-Leads-to-Conversions.shtml) – By Jim Hedger
================================================================
Article by Mark Johnstone, Senior Web Developer, Pure Ignition,
a division of StepForth Placement ((http://www.stepforth.com)
================================================================

Copyright © 2006 Jayde Online, Inc.  All Rights Reserved.

SiteProNews is a registered service mark of Jayde Online, Inc.