Designing for Website Usability

In General We Are Creatures Of Habit!

2005-02-26T16:21:00.000-05:00

While we may not be compulsive, I do believe that most of us are creatures of habit. Many of us could probably get up and dressed without really waking up. We follow the same routine as we get out of bed and prepare for the day. I think it facilitates multi-tasking. We don't concentrate on part of what we are doing and can focus on another task. We keep things in the same place so that we can find them quickly and move through our pattern with more speed.

Visitors to your site are impatient. They don't want to wait for slow loading graphics and files. They want their content quickly, so we chunk to facilitate that. While store owners may move merchandise around to help visitors notice inventory, it benefits a site developer to keep basic items in standard locations, so that visitors can find them quickly. The upper right navigation will probably hold links to the home page, sitemap, shopping cart and contact form. There will probably be a vertical navigation down the left side and hopefully a horizontal system across the bottom for the longer content pages that might lose sight of the upper navigation. Standard articles could be placed in the same locations as they are updated so individuals can quickly find and move to those sections. That doesn't mean that new types of contents should be omitted or that innovative layouts should be avoided. Just remember that your visitors are probably very time conscious. Putting things where they would look for them will be appreciated and help to keep your site sticky!

copyright © 2005 K.E. Lubrecht
All rights reserved

Does Your Site Require the Use of a Mouse?

2004-12-31T16:07:00.000-05:00

Some of us are old enough to remember the days when our main interaction with the PC was through the keyboard. We were excited when keyboard shortcuts speeded up the process. Now the mouse, or its equivalent, is the tool for communication. "Click" and "drag" are the common techniques for moving the cursor or information.

For some individuals the mouse is not a friendly piece of hardware. I can still remember a friend and I laughing at my ineptness as I tried to get the cursor to obey me when it first came out! Lack of normal coordination is not a laughing matter for many people. I finally mastered the tool, but I do not have the physical challenges that many experience.

As you develop your site, consider what you can do to provide alternatives to the "clicking." Image maps may require people to click in a precise area. Think about those who have coordination or vision problems. Provide an additional option for selecting the information. Use the tabindex tag. It can even facilitate movement through a form that requires a lot of typing by those who are just fast typists! :-)

copyright © 2004 K.E. Lubrecht
All rights reserved

Don't Forget to Test!

2004-11-21T23:45:00.000-05:00

In writing today, I was reminded of issues with respect to website usability. I seem to have gone through a dry spell with nothing new to add to this blog or a lack of time in which to do it. Hopefully, this entry signifies the end of the problem.

Students had a great deal of difficulty navigating the site of an on-line school. The homepage included directions and there was a tutorial, but it didn't seem to help. Were they really being used? The message boards didn't seem to be read. Students did respond to emails. Was terminology the problem? What was the problem with the navigation?

Interaction using Blackboard created a real-time interface, but it required that the instructor's and students' schedules match up. Several instructors worked with regular schools during the day and were only available in the evening. Some students were taking the course at school and didn't have computers available in the evening. Time zones were an issue.

The site was very graphic intense for those students on dial-up connections with older computers. The slow loads were a problem. Rural areas didn't have the option of broadband.

When talking to a member of the company, I was told that the programs were new and this was the first that they were being used. I have always assumed that such programs were tested with students of similar backgrounds and connections, but the problems make me wonder.

Usability requires that we address issues of:

appropriate reading level

connectivity

computer skill level

text versions of interfaces

access or limitation thereof

human-computer interaction (HCI)

We test to find out what we have overlooked as well as what doesn't work. The latter isn't just due to logic or code errors. We know what the sites are supposed to do and where to find things. It is very important to be sure that our focus groups and usability testing be run with an appropriate sample. Videotaping the individuals provides a back-up to catch expressions and actions that might provide clues to problems. Once the program and project were ready for release, a pilot run would have prevented difficulties for a large numbers of frustrated and disgruntled clients.

copyright © November 2004 K.E. Lubrecht
All rights reserved

Google Response

2004-06-19T11:53:00.000-04:00

The Google Team has considered my query a suggestion and has said that they will keep it in mind as they move forward.

Personally, I have started to use "skip to content" at the top of my pages. It is a longer phrase than I would like, but it seems to be the most consice. I am not thrilled with the way it looks in the design at the moment, but perhaps by the time I am done, I can find a way to blend it while still having it noticable. For now, this seems to be the most pragmatic design.

Caution

2004-06-16T08:16:00.000-04:00

It has been brought to my attention that Google might view the use of a transparent .gif with an alt tag informing the user that the link goes to the beginning of content might be thought of as "hidden text." I have emailed them to clarify the situation and bring the situation to their attention. I'll let you know the results when I hear.

Navigation Thoughts - Continued

2004-06-10T12:44:00.000-04:00

"Breadcrumb navigation" provides a visual that allows users to see their path from the home page and facilitates rapid jumps backwards. For example:

home > pools > in-ground > opening

"might appear on the site of a store that sells pools and provides instructions for opening an in-ground pool for the season. If the user clicks on the word "pools," the page describing the various types of pools would appear. Anyone arriving from outside the site can see the structure of the site and know where they are. Breadcrumb navigation can be build in PHP which sits on the server and is not blocked by the client (user). Unlike the story of Hansel and Gretel in which the breadcrumbs in the path were eaten, the computer breadcrumbs allow the user to find their way home, but an organized file structure (architecture) is very important!

"John Coggeshall presents more information on building the navigation using Peter Bowyer's submission "Breadcrumbs navigation" in his 10 April 2001 article.

Consider navigating your site

2004-06-04T22:59:00.000-04:00

Make sure that the navigation is easy to find and follow. People look for navigation in the same places as they go from site to site, but more importantly, they need to find it in the same place as they go from page to page through your site. Are you able to use includes to facilitate changes and insure standardization of the navigation throughout the site?

The old 3 click limit to reach any part of the site is still important. Consider ways to achieve that goal:

Sitemaps improve usability for your visitors, as well as facilitate the crawling of search engines' spiders. (SEO is beyond the scope of this blog. Lessons on search engine optimization are available through www.gnc-web-creations.com/seo-techniques.htm)

If your visitors have JavaScript disabled, are they still able to negotiate their way through your site? Be sure to include text links to your pages on each page even if you have a script-driven navigation as your primary technique.

Time is important to everyone. Consider whether your splash page is necessary or just adding another click and useless wait-time while the page loads. Is all of your target market on high-speed connections?

Navigation is more than links. NC State University lists some wonderful ideas for accessible web design. While many will be familiar to those who have been attempting to design for accessibility, I was surprised by the "skip to content" link. Once I read through the discussion it made a great deal of sense. It is important to remember that text readers, handle code in a linear fashion from the upper left corner of a page across to the upper right, followed by each line left to right until it gets to the lower right corner of the page. The internal link, <a href="#content">skip to content</a>, should be placed at the beginning of the page and the content header would then be marked-up, <a name="content">content header</a>. As a text reader hits the initial link, the option exists to skip over navigation and common layout to reach the important information on the page. Should the visitor decide to use the general navigation, the links at the bottom of the page could be used or the page could be read from the beginning.

Try taking a look at your pages as though they were presented without the graphics. Have you included alt tags with appropriate content to explain what people can't see? I can remember a fellow tech who used the tag to identify the file number of the graphic. This wasn't much help to someone who wasn't familiar with the graphic. Try to imagine a visually impaired friend sitting next to you. How would you describe the graphic? Is it a serene view of a lake at sunset with beautiful pink tones in the sky? Can a gentle breeze be seen in the branches of the trees? Is it data represented as a bar graph? What does the data reveal? If the material requires more than a couple sentences for an explanation, link to a separate page and provide the details that are warranted. At the bottom of the page on the Bobby website, you will find a discussion of the icons for the "d" link and "longdesc" attribute.

copyright © 2004 K.E. Lubrecht
All rights reserved

Usability involves more than the color of links

2004-05-17T21:20:00.000-04:00

Websites are not published to take up space and provide a presence. They are published to be used! As we design sites, it is important that we watch a growing list of usability issues. Color, accessibility and content are some of the many concerns to be addressed.

While one of the first lessons on a website palette would include concern for contrast between the links and their background, many designers seem to forget to consider visited and active link colors. They look at their pages before any links have been visited and all looks gorgeous! What happens once a page is visited? Does the new pale hue of the visited link blend in with the white background? Has accommodation been made for the fact that the link sits on a dark color in the general navigation, but is displayed on a white background in the text of an article?

These are common concerns that are easily overlooked, but some are even more subtle. White backgrounds are creeping back into our design. They provide a clean professional look. They facilitate the use of clipart. Unfortunately, this comes with drawbacks as well. The contrast is not only tiring for visitors in general, but it may be causing difficulty for people with learning disabilities (At the moment, I can't find the link that documents the latter). Choosing even a very pale color will ease eye strain and may assist those with reading challenges.

A dark background may be dramatic and restful to the eyes, but it is not necessarily printer-friendly. Remember that the text will be a light color that may be illegible on the white paper if background printing has been disabled. Even if the background is printed, it will require more ink. Consider providing a printer-friendly page with a white background and an appropriately sized width.

The layout of your website and the consideration you show by minimizing load time and maximizing easy of use conveys your concern for your customer. Let them know they are important!

copyright © 2004 K.E. Lubrecht
All rights reserved