Basics of Web Usability

July 24, 2007 | Filed Under Accessibility, Web Site Development, General

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:

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.

Like This Article?

Subscribe Subscribe to the RSS Feed
Add Your Comments 1 Comment - Add Yours!

Related articles:
Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • StumbleUpon
  • Digg
  • Reddit
  • del.icio.us
  • Technorati
  • Ma.gnolia
  • Furl
  • Simpy
  • Netscape
  • YahooMyWeb

Tagged:
, , , , , , , ,

Comments

Web Stack Series Part 4: Business Logic Programming

July 10, 2007 | Filed Under Web Site Development

Today we continue our look at the web stack by explaining Business Logic Programming.

GearsWeb sites are highly complex organisms. There are hundreds of processes and actions that take place behind the scenes every time you access a single web page. Harmoniously coordinating these actions and the components responsible for making a basic web site perform flawlessly is not an easy task. At the heart of all this activity is server-side scripting, a type of “web site glue”, and it is the layer of the web stack where business logic and interactivity are added to your web site.

Server-Side Scripting

So what is server-side scripting? Server-side scripting is a process that applies business logic to data from different sources (databases, user input, etc.) in order to create output that fulfills a user’s request. In short, it is a programming language that runs on the physical server. Developers encode your business logic into scripts (literally, sets of programming commands) using this language. When a user makes a request, the data is run through these scripts and transformed based on your business logic. Once transformed, the data is wrapped with HTML and graphics and outputted to the user. Here are the steps:

  1. User makes request
  2. Webserver Software initializes server-side scripts
  3. Scripts fetch appropriate data from database based on user’s input
  4. Scripts apply business logic to data from database
  5. HTML web page is generated by scripts and returned to the user

Let’s use an example to clarify. Imagine that you own a company that sells widgets online. These widgets have a number of configurations that are specified by your customers. Each unique configuration will be priced differently based on the options chosen by the user. Additionally, your widgets are made from a raw material that is only available seasonally, so you need to adjust your prices based on the season.

Here are three basic business rules:

These rules define your business logic. Your developer will take these rules and translate them into server-side scripts so that when an order is placed, the correct amount is charged. Here is are some sample orders with the rules applied:

  1. Small Widget ordered in June
    Price: $15 + $0 = $15 (Small widget, no seasonal fee)
  2. Small Widget ordered in December
    Price: $15 + $10 = $25 (Small widget, seasonal fee)
  3. Large Widget ordered in August
    Price: $30 + $0 = $30 (Large widget, no seasonal fee)

So, when a users requests to buy widget #1, your server-side scripts grab the appropriate prices from the database, add them up accordingly, and generate a web page displaying the price.

Types of Languages

There are many options for server-side scripting languages. Each language has advantages and disadvantages, but any language will sufficiently handle your needs. As a result, it is usually best to let your programmer use the language that he or she is most comfortable with. Here are the most popular server-side scripting languages:

  1. PHP - Common open source solution based on including code in its own language into an HTML page.
  2. Microsoft ASP.NET - A set of web application development technologies marketed by Microsoft
  3. JSP - Java-based system for embedding Java-related code in HTML pages.
  4. Ruby on Rails - Open source framework written in the Ruby programming language.
  5. Adobe Cold Fusion - Cross platform tag-based commercial server side scripting system.

The business logic layer of the web stack is where everything comes together. Information from disparate sources is combined and transformed into something useful and valuable to the end user. It is important that you find a good developer to handle this part of your web site, as it will ultimately determine the quality of your site.

Our journey through the layers of the web stack is now moving away from the server side of things and into the realm of the end user. Make sure to subscribe so that you don’t miss the next installment!

Like This Article?

Subscribe Subscribe to the RSS Feed
Add Your Comments 1 Comment - Add Yours!

Related articles:
Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • StumbleUpon
  • Digg
  • Reddit
  • del.icio.us
  • Technorati
  • Ma.gnolia
  • Furl
  • Simpy
  • Netscape
  • YahooMyWeb

Tagged:
, , ,

Comments