Basics of Web Usability

In my previous article Why Web Accessibility Matters I touched on why having and designing an accessible web site made good business sense. In this article, I would like to continue into the area of web usability.

What is web usability?

Web usability has multiple meanings depending to whom you are talking. Some people think it is just making a site work, at any cost. Yet others feel that usability is closely tied into accessibility, and I also feel that this the best practice. If you have a usable site, then the chances are really good that it is accessible. Why? In the backbone of the coding, chances are that the site will be using valid XHTML and CSS. This in and of itself helps to create a site that is usable.

Let’s take a look at a definition by Usability.gov:

Usability measures the quality of a user’s experience when interacting with a product or system—whether a Web site, a software application, mobile technology, or any user-operated device.

In general, usability refers to how well users can learn and use a product to achieve their goals and how satisfied they are with that process. Usability, as defined by Joseph Dumas and Janice (Ginny) Redish, means that people who use the product can do so quickly and easily to accomplish their tasks. Usability may also consider such factors as cost-effectiveness and usefulness. 

What defines a usable site?

Now that we have a basic definition of usability, let’s take a look at some considerations that will make your site more usable. There are multiple ways to make a site usable and a lot of them depend on factors of what type of site you have (blog, ecommerce, etc.), your audience (casual web surfer or expert), and what your site is conveying (its purpose).

Use clear and consistent Navigation

One of the problems that I have encountered and I’m sure that you have too, is not knowing where the navigation system is going to take you to. And once you get someplace in the site, where exactly are you? One of the best ideas is to have a clear and consistent navigation system that stands out on the page. The reason is you want to make sure that your visitors know where the navigation system is for your site, whether it be in the upper part of the site and horizontal, or running down either side. 

Another aspect of clear and concise navigation is the use of breadcrumbs, or another method of letting users see where they are, and what pages they have taken to get there. You’ve seen them on sites before, and they resemble something like this:

Home » About » Thanks for finding me!

This allows for users that have maybe followed a link to the final page to backtrack easily without having to “go home” and start over again. Statistics have shown that most users scan pages for the content they are looking for within 15 seconds, and if they don’t find it, the go back to the previous page, or leave your site. Not good if you want to sell a service or product.

Sitemaps are another good method of ensuring an easy method of users to quickly find what they are looking for. One big plus of sitemaps is if they are correctly written, it helps with Search Engine Optimization as the spiders from Google and other sites can quickly follow those links to the main content of each page and article. Not to bad for killing two birds with one page, eh?

Make it easy to read

This one gets real tricky, but since you have an accessible site already up and running, it should be pretty easy. You want to make sure that your text is easy to read and resizable. Several factors affect both of these issues:

• Don’t use pixels to define font size as they are not able to be resized.
• Underline only links and use italics and bold for emphasis.
• Ensure there is enough contrast between the background and the text.
• Use plenty of whitespace throughout the site.
• Use proper markup, such as headings, paragraphs and lists to make it easier to define the content.
• Space out your content - don’t write a 15 page paragraph, and adjust line height as necessary.

Remember that the purpose of your site is to convey information and if that information is hard to read or search, you have lost your audience. I’m sure that each of you have been to a site that the text was too small, or crammed together and hard to read. Or to another site where you couldn’t tell if an image was a link or just an image. Some of the best sites are simple and concise with their presentation of their product or services. Don’t believe me? Take a look at the main Google page, or Amazon.com. Their sites are pretty simple and help you look for what you are after.

Keep Searching

One of the biggest usable tips is to have a site search feature for your site. If the user has an idea of what they want to find, but aren’t sure where to find it on your site, then they will leave. The site search is invaluable for your business or personal site, especially if it has more than just a few pages. The site search takes the guess work out of how you have your site organized and where you might have put that valuable piece of information that the user is looking to find. This allows the user to come to your home page, type in a few keywords, and have the relevant results returned to them in a timely and efficient manner.

Don’t make me Scroll!

One of my biggest pet peeves is to have to scroll the page I am viewing left and right to read the content. I’m not talking so much about extra side bars for advertisements or additional information as I am the main content of a page. What I am talking about is the main content of the page. This also relates to making the content readable in simple format. Limit how wide your content is on your page and don’t make it go all the way across the screen. Trust me, your viewers eyes will appreciate this.

Watch your colors

Color is an important visual aspect to any good web design, but it can easily be abused. We all love looking at nicely designed sites, but the colors that are chosen for any site have to be done so carefully. One of the factors we have to consider is that you want certain things to stand out without being confusing. For example, you want consistency in the colors of your headings so that the users know they are going into another section of the content. Your links should look like links, and that should be consistent throughout the site. Don’t underline anything that is not a link to add emphasis, use bold or italics to do this. 

Another usability and accessibility factor dealing with colors is that some users could have color deficits, such as color blindness or difficulty distinguishing slight hue and tint variations of a certain color. You want strong contrast with your colors, especially with the background color of your areas.

Testing, testing…

The final usability factor deals with the testing of your site. Often times sites are put together for Internet Explorer, which is not the optimum testing platform. IE 7 is now catching up with Web Standards, so it isn’t too bad of a browser to test and design for. However, designing a site to look right is best if designed in Firefox, Opera or Safari browsers as their rendering of sites is often times most correct. Testing of your site in multiple browsers will ensure that the most users can see and use your site as you intend it to be used and seen.

Validation of your site is a good idea also. It will help you catch errors that can lead to problems with the code, usability and accessibility for your users. You can start with the validation process for your site by using the W3C Validation Service and the best part is that it is free! If you are using Cascading Style Sheets for your site (you are making an accessible site, aren’t you?), then you can use the CSS Validation Service from the W3C also.

It’s a wrap

I hope you have enjoyed reading some of the tips and ideas on creating an accessible and usable site. This article only scratches the surface however on these topics. If you want to learn more about these topics, please contact me or check out some of these links as a good start.

• High Rankings Web Site Usability Tips
• Mike Cherim’s Green Beast Blog
• Usability.gov
• Usability Makes Business Sense - article
• Jakob Nielson on Usability - useit.com

Comments

Effective Web Sites: 5 Things That Should Be On Every Web Site

As the Web has matured, web site design patterns and best practices have emerged. Consequently, there are five essential elements of any successful web site. Implementing them on your website may mean the difference between success and failure.

1. There’s No Place Like Home — The Home Link

Not since The Wizard of Oz and the ruby slippers has teleporting back home been such a useful talent. The ability to jump back to the front page of a website is something that every web surfer appreciates. The Home link is something that has been around since the early days of the Web and it is still just as useful today. It is an unwritten rule that the main logo on your website should always be linked back to the main page of your site. Additionally, placing a home link on every page of your website is essential; here’s why:

• The Hansel and Gretel effect
  Visitors like having a way to backtrack their surfing. Breadcrumb navigation is the best way to provide this, but the Home link is the easiest and most effective alternative.
• Search Engine Optimization
  Here is an SEO tip: Use the title of your site as the anchor text for your home link (instead of the word “Home”). This will help search engine crawlers associate the title of your site with the URL.
• Coming in the Side Door
  With the widespread use of search engines , it is likely that visitors are entering your site on pages other than the front page. A well placed Home link provides these visitors with a way to the front of your site.

2. Let Me Show You What It’s All About! — The About Page

Jackson 5 knew what it was all about, and so should your visitors. There is nothing worse than leaving a visitor on their own to figure out what a company does. Don’t be shy, take pride in your website and what you provide. Create a page and title it “About” or “About Us”. Use this page to explain what you do, what this website is for, and who you are. Be upfront about it and your visitors will appreciate your respect for their time. Here are some tips for a good “About” page:

• Explain Every Aspect
  Tell your visitors about your company, your people, your philosophies and your website. Don’t use this area to try to sell your products or services, save that for other areas of the site. The About page is about the company and people behind the products.
• Get Personal
  Use the About page to give a brief biography of all the key players in the company. To add credibility and a personal touch, include pictures of all the key people so that visitors can associate faces with names.
• Branch Out to the Front Page
  It is also a good idea to include a very short (about one or two sentences) description of your company on the front page. This can usually be accomplished in the form of a tagline or a unique selling proposition. One of the best examples I’ve seen is on Amy Bass’s blog, My Debt Free Goal. Right under the title she tells everyone what the site is about:

  My goal to pay off $72,900 of debt in two years through a lot of hard work and sacrifice. I want to show others that it is possible, you can be debt free if you set your mind to it.

3. 3-2-1 Contact — The Contact Page

My wife used to watch 3-2-1 Contact as a kid. Why you would care, I have no idea. The Contact page on a website is a no-brainer. Unless you don’t want to talk to potential clients, there needs to be a page dedicated to communicating with you and your company. Most sites have a Contact page, but rarely do I find a site that puts enough information on it, especially business websites. Here are the essentials for a company’s Contact page:

• Email Address
  Put the email address of a specific person on your contact page. This gives visitors the comfort of knowing that they can contact a human being directly. Be careful, though, when posting an email address online; make sure you run it through an encoder so that it is not harvested by spambots.
• Contact Form
  A contact form is nice because it lets people submit a more formal request for information. Bonus if you provide visitors with a selection of departments to which to route their request.
• Physical Address
  A lot of Contact pages neglect this. Make sure you list your physical mailing address and all applicable telephone numbers. You never know who might want to send you something via snail mail. Additionally, this helps current customers find out where to send cash and checks — and nobody wants to miss out on that!

4. You Gotta Get Yourself Connected — The Subscribe Page

Stereo MCs knew what they were talking about. Web surfers want to connect to the sites they like and be instantly updated when new content is available. Sites that do not provide an RSS feed or a means of subscribing via email are in danger of being viewed as stale and out-dated. Giving visitors the ability to subscribe to your site guarantees return visits. Create a page that lists all of the ways that a visitor can subscribe to your site:

• Blog
  You’re not blogging yet? Better get to it, this probably deserves an article in itself.
• Newsletter
  A newsletter is a great way to keep visitors up to date on new products, services and promotions. This also plays into the theory of Permission Marketing, suggested by Seth Godin. When users subscribe to your newsletter or blog they are giving you permission to send more information. This is as quality of a lead as you can find.
• Calendar of Events
  If your company holds public events, give your visitors a way to be updated when these events are near. Not only will this get people to come back to your website, but it will also increase the attendance at your events.

5. Tree Fiddy — The Pricing Page

At least the Lochness Monster gave his prices right up front. Nothing upsets me more than a web site that makes me do work to find out prices and rates. “Fill out this three page form to get a quote.” This is like a giant sign that says, “We don’t want your business, go away.” I understand that some companies will have pricing models that vary based on the customer and the type of work to be done, but that shouldn’t discourage you from at least giving your visitors a rough estimation. This can also serve as a filtering mechanism in the event that someone is looking to spend way less than you are charging. Here are some strategies for listing your prices:

• Tangible Products
  List the prices straight up. This is easy and smart to do.
• Time-based Services
  List your rates and possibly give some examples of the average time it takes to finish common projects.
• Custom Pricing
  Provide case studies of some projects you have completed in the past and list how much the client was charged (make sure to get permission from the client first). This will give potential clients samples of what they can expect to pay for a similar project.

Adding these five elements to your web site will ensure that visitors have everything they need to make an informed decision about your company. This means more visits to your site and increased sales — so get to work!

Comments

Get Subscribed!

• Most Popular Posts

  • Basics of Web Usability
  • Effective Web Sites: 5 Things That Should Be On Every Web Site

• Recent Comments

  • merchant services: I would add the the best way to ensure you are fully compliant, secure, with 100% uptime is to...
  • UK SEO Services: Thats a great explanation for the need to correctly use anchor-text. Many thanks!
  • Hypotheek: nice article. I can use this for my thesis! thank you
  • SEO Studio Melbourne: I just found this article (a bit late, huh?) but I loved it. Very nice and clear.
  • John: Very useful tips - there are a few marketplaces for freelancers in the UK too. Check out...

• Categories

  • Accessibility (3)
  • Copywriting (1)
  • Database (1)
  • Design (2)
  • E-Commerce (2)
  • Education (1)
  • General (10)
  • Reference (1)
  • Search Engine Optimization (1)
  • Security (1)
  • Technology (5)
  • Tips (3)
  • Web Site Development (7)

• Archives

  • August 2007
  • July 2007
  • June 2007

• 
  

• About Solo Signal

  Solo Signal is a blog for anyone interested in learning more about web site development as it relates to business through simple, easy-to-understand articles. We hope to provide business-minded individuals with the information, tools and understanding needed to successfully leverage the Web for their benefit.

  Read more »

• Tags

  accessibility acronyms apache bids budget business logic content management cost credit cards CSS databases definitions design ecommerce elance elliott cross encryption freelancing hardware html http integration links low cost mark up marketplace microsoft mysql navigation open source optimization oracle outsourcing page rank patterns price programming projects reference rent a coder rss scalability security seo server server side scripting shopping cart software structure style sheets taxes tips usability value w3c web browser web design web development web hosting web site web stack web standards webserver xhtml

• Add Feed To...

  

• Recent Readers