You are here

Website marketing: A real life scenario in usability

Imagine it was a holiday weekend and you were out for a drive when you realized you were almost out of gas.  To your relief, there is a gas station up ahead.  To your dismay, it is the only gas station in sight.  You pull up to a pump and, as most of us do, you walked to the pump to prepay and saw a big sign stating “Credit Card Machine Down.”

Already you would be frustrated, but you would simply head inside to prepay at the cash register.  Imagine once your inside the clerk tells you that the pump you are at is FULL service.  To make matters worse, the attendant is out sick that day.  When you head back outside you see a line of cars piling up behind the self-service pumps and you are forced to make the decision of line up or try to find another station.

Most of us would try to find another station.  Imagine that you looked for a mile or so, only to find that there was no other station around.  Pretty much everyone would be even more agitated as they returned to the gas station only to pull into a now even longer line of cars.  Then, there will be the confusion of who pumps next, who will let someone pull out without fearing they will lose their place in line, and who will pay attention and pull forward.  Of course, there is also a lot of waiting.

When it is finally your turn to pump gas, imagine your anger as you stick your credit card in and then wait for a minute to have a “Please See Cashier, System Down” message pop up.  Desperate to actually get gas, you will probably hit the cancel button in order to pay inside.  You read the sign “Pump, then Pay” so you take the nozzle off its hook.  Then, nothing happens.  You wait and wait and wait, and no gas ever comes out. 

Depending on your level of patience at this point, which most would have none left, you will head inside to find out what the delay is.  Picture walking and seeing the cashier leaning back watching television and eating his lunch.  You will probably get the excuse that he hadn’t gotten around to turning it on yet and get even madder.  After a long ordeal you will finally get to pump your gas, go back inside to pay, and drive off.

Negative Publicity

When you finally get to drive away, you will probably look in the rear view mirror and vow to never return to that gas station.  If you are rather proactive, you will probably tell your friends to never go there either.

What if That Had Been a Website

If you read Designing Web Usability by Jakob Nielson (who has a free newsletter), you would learn if that gas station had been a webpage you would have clicked away long before you actually drove away.  There is not a page online that is so important you will not go anywhere else.

There will be plenty of people who find your site through a search engine.  Others will come to you through a link to your internal pages.  You have no way of predicting where all of your traffic will come from.

Many users never see the shopping cart because the site made it difficult just to find it.  People have abandoned countless, full shopping carts.  The usability of most sites is rather pathetic. This is perhaps the most ignored element of site design.

An Example of Usability

There are great examples available, like this usability/design story on page 69 of Taking Your Talent to the Web:

“I left my baby daughter in the car while I went to buy dope.  Then I drove away.  I’d gone about five blocks when I realized my daughter wasn’t in the car anymore.”

That quote was located in the main content area of the Narcotics Anonymous website.  At the end of the quote, there was a link to read more stories.  There was also a passive navigation menu on the site.

The key to usability is to quickly connect with your customers and facilitate getting them to do what it is that you want them to do.  Narcotics Anonymous used this example to get someone to read more stories, perhaps learn that there are others out there like them, to have hope and possibly seek treatment.

Excellent Usability

Many experts will tell you that Amazon is by far the best example of great usability.  Here are some of their techniques for site design:

•    Users should be able to control their experience at your site.
•    Never have too much text inside an image.
•    The site design should remain consistent throughout.
•    Navigation should be easily understood.
•    Whenever possible, use standards.
•    Do not use large file sizes.
•    Every page must have a search or a link to a site level search.  Smaller sites will probably be better served to have a link to a sitemap versus a site level search.

Users Must Control Their Experience

When you are designing your site’s text elements, you need to keep in mind the many types of people who will see you site and the formats used.  If a person finds your site through a phone browser, it may be difficult for them to read fine or long text.

You should always specify your text size as a relative size and not an exact value.  For example, if you set your text at 8 pixels a man who has turned on large text will still only see your site at 8 pixels.  If the man has a large monitor, or has impaired vision, it will be hard to see the text and he will not see your site.

On the other hand, if you set the page width to an exact value of 800 pixels a PDA user will automatically click away to another site.  Widths should be set using percentages or at least kept as narrow pages.  When you consider the many different user types in your design you will offend less people.  Also, you will be given preferential treatment if you are one of the few who met their needs.

Text in images is always a bad idea.  It can appear illegible or too large if a user is viewing it on a different platform that where it was designed.  It is okay for limited elements that contain content that logically belongs inside an image.

You may put your site name inside an image if it is appropriate.  Just remember that text inside images is an exception and not the rule.  A search engine will not scan an image, they have no idea what is in them, and this text will not help your ranking.

Consistency in Site Design

People are creatures of habit and will expect to see certain items in certain locations.  Typically, the upper left corner normally has a logo with a link to the home page, many times the logo being the link itself.  The search tool is often either just below the logo or in the upper right hand corner.  It is important that your site make people feel comfortable.

It is very common for the more successful ideas to be revamped versions of earlier ideas.  It will be easier for the user to feel comfort and go where you want him to go if you provide him with clear navigation.  If you do try something unusual, you should be consistent with it throughout your site.

Providing a Site Level Search

You will find that tons of people enjoy coming to your site and searching out the information they want.  If you have a large content web site, it would benefit from a small search box on every page.  If you are unfamiliar with dynamic coding, there are third party search engines available from Atomz and FreeFind.

A small site should not have a site level search.  Many site level searches in smaller sites will fail to find the desired information and can frustrate the user.  It is far better to actively guide your site’s visitors than it is to have them enter unpredictable words in a search box.

Follow Standards

The blue underlined text is universally recognized as a hyperlink.  When you have a choice, it would be always be wise follow these kinds of standards.  If your site design makes it necessary to deviate from the standard, then only do so in moderation.  Standards make it easier to get people to do what you want them to do, without thinking about it.

There are sites that are likely to link into a standards compliant site.  If your target audience is the techy type, you will want to make sure the link validates and practices standards compliance.  There are many sites that do neither.

Browser Based Active Client Side Scripting & Java Script

For some reason or another, about 10% of all web browsers do not have JavaScript enabled.  To increase usability, minimize pages using JavaScript.  You may also want to make your JavaScript as its own external .js file and then link to it from within your pages.  This will reduce the page’s load time and increase its usability.  You link the external .js file if you put the following code into your page head:

If the whole page uses JavaScript there will be people who will not be able to view it.  Additionally, many search engines will not be able to index the page correctly.  You should use NoScript tags to define what was within the JavaScript for users with that feature disabled.  This is a NoScript tag and it should be located just after a scripts location:

java description and or links

Use Small File Sizes:

The back button may be the most used button on the internet.  If your file is large and the page has a long load time, your user will be clicking on the back button before you get to say hello.

Define Image Aspects:

Pages will load quicker if you specify image sizes on the page.  This lets the text load before the image is delivered.  You may have to limit the image quality, size, and numbers to have an acceptable page load time.

CSS Can Reduce Your Page Load Time:

If you use an external style sheet a majority of your design elements will be on the same page.  This will keep your pages from looking jagged as a result of slightly altering layout specifications between pages.  Also, if you layout code is separate from content you will reduce your page load time.

This means that users who are navigating between pages will not have to reload the design elements of each page.  The sheet style will already be in their cache.  The average user expects the page load time to be no longer than 8 to 10 seconds.  The longer your page takes to load, the more you risk losing their attention.

Flash Can Hurt Your Site:

Very large flash images are a waste of time and money for several reasons:

•    Flash images can take a long time to load and you risk users hitting the back button before it does.
•    Someone who sees a flash intro probably does not want to see it every time they visit your site.
•    It is hard to justify the cost of Flash development as it typically does not meet the needs of the user.
•    It is very difficult for a search engine to index, navigate and classify flash images.