March 26, 2007
Accessibility, Usability, and Navigation
Website Creation Tips and Tricks for Publishing
Lydia Idem and Alexandra Andrews
Accessibility and Usability
Who Is Your Audience?
If you are designing an internal website for a company, you know what the machines, browsers and users are. If you are creating a website that will be viewed by anyone anywhere, designing is an entirely different matter. Do not forget there is an age disconnect between those who grew up with computers and those who learned computer use as a second language. You may have the latest and greatest in computers. However, it is unlikely your users will rush out to buy a new computer just to use your website.
Always provide an HTML (hypertext markup language) version if you are using a PDF (portable document format) file. Use of a PDF alone is a violation of the Americans for Disabilities Act.
Alexandra: Don't Be tricked by PDFs. Adobe says PDFs are accessible. Yes, you can change the size of the fonts. However the following problems remain unresolved, the user has not installed Adobe Reader, the user does not have the latest version, the user's Internet connection (dial up - high speed) may not be adequate. My log files are littered with 206 Partial Content (The requested PDF file was partially sent, caused by stopping or refreshing a web page before it loads).
There is no excuse for being inaccessible to the visually impaired (bifocal users, color blind users, elderly users, and blind users) or to those using a different platform, monitor, resolution, and connection. Why would you want your Web site difficult to use by your potential customers or clients?
It is so important to think about your audience. You will hear us talk about accessibility. Accessibility not only refers to a website that is accessible to persons with physical disabilities but also refers to a website that is accessible to all individuals regardless of the browser they are using, the computer platform they are using, the screen resolution of that computer, and the connection with which they connect to the Internet.
Novice web designers and developers create and build websites then test these sites with the computer platform and screen resolution on which they are developing. Many web designers/developers know to test their website and web application in different browsers, but we must emphasize that you also must test your site on different platforms and maybe even more importantly on different screens. We are at the advent of the mobility age where more and more individuals are connecting to the Internet and browsing websites with their mobile device, be it a cell phone or PDA (personal digital assistant). Are you testing your site functionality and design on different screens? You might be in for a surprise.
Again, it is very important that we keep our users in mind when designing websites. This must be done before any HTML is ever coded. It is the sad disillusion that when you build a website that you open up vi, Notepad, or Dreamweaver and begin coding. No! We must begin the planning process. Remember that a website is a user experience. This is true more so than any other medium in existence. Websites inflict, influence, and affect mood, attitudes, and usability. If a physical store does not hold a particular item, a shopper stays in that store pleading with store employees to check the back rooms or even order the item for a later pickup. We don't have that luxury on the Internet. If your website is hard to use or information difficult to find or read, users are gone and gone fast! How can we keep users engaged and, more importantly, compel them to come back to the website? Repeat users also have the added benefit of delivering word-of-mouth marketing which is the most powerful marketing tool for websites. Look at Google, a company that has never spent a dime on formal advertising, and yet is the most popular search engine on the Internet to date. The Internet is the first time when users are in control. We, content authors of the Internet medium, cannot force users to read our articles, watch our video, or look at our graphics and pictures. Our colleagues in print, television, and radio have the luxury of mistakes in design and delivery of content. Design mistakes that result in loss are much more delayed and even easily forgiven. The users of the Internet are much more empowered and savvy and as a consequence much less forgiving when a website does not deliver as expected.
So, how do you plan for the user experience? Designers must anticipate every move (every click) with deliberate, purposeful design. Do not assume anything. Find out about your audience. Conduct usability tests throughout the design process and even after the launch of a website. When you conduct your testing and sampling to discover the characteristics of your audience, these individuals may not tell you what they want explicitly. Listen to what they don't want to experience on the website as well. The Internet is ever evolving, and it would be a mistake to think that the users who used your website when it launched have remained the same audience today.
Layout and Navigation
Lydia: Now that you have figured out your audience, you can turn your attention to designing the layout and navigation of the website.
A good idea in planning your website is to draw out the design to be on a sheet of paper. Remember, you do not need to put everything on the sheet. The beauty of a well-designed website is that you can flip from page to page as needed. You want to make your site as accessible as possible.
Lydia: Many users and novice designers make the mistake that great design equals a great website. So upon this false premise, they build grandiose websites with the latest Flash, animation, and graphic design. Reality hits when page views fall or, worse yet, are not even realized. The latest and greatest design will not make your website successful. Purge yourself of this fallacy. What make a great website are the findability and usability of that site's content. If I can't read the information of a website or perform my desired function, then I will leave and never come back. I don't care how wonderful it looks. That is the reality of Internet use behavior. Great designs do not equal a great website. Findable content and usable websites make a website great. These two characteristics lie at the heart of designing the navigation system(s) for a website.
- Navigation is the heart of a website's usability. It is the navigation system that allows users to explore a website, find information, and start all over again. A successful website incorporates a navigation system that
- 1) facilitates exploration
2) enables quick and easy ways to find information
3) directs performance of desired functions intuitively
4) allows the user to find her way back out.
Some users come to a website and simply explore. They will read the information provided on the home page and click on a link that seems of interest. This process continues on the next page. The user is now done with that particular section of the website and decides to explore another area of the website. From the page she is currently viewing, she clicks on another section and begins to read and click links. She explores that site to exhaustion and is able to get right back to the home page from the page she is currently using.
Another user comes to the website and in 3 clicks, he has found the item of interest and successfully purchased that item. He is done and free to explore the website further or leave. Because he performed his desired function easily, he'll be back to purchase or browse again.
Now, a third user entered the website from a page deep in the website thanks to a search result listed by a search engine. After reading the page, the user would like to go to the home page. Thanks to the navigation system on the page, she is able to go directly to the home page from the page she initially entered the site.
Notice the above scenarios did not use the Back button. Also, notice that it was the content of the website that kept the user there. In addition, not just the information but the ease at which information was found and how easily the user was able to move through other areas kept her at the website.
Do you want users to explore your website? Is that how you intend for users to interact with the information they are there to retrieve. Is that how users need to interact in order for them to accomplish desired functions? Amazon.com took off when they implemented the 1-click purchase. Users were able to locate books easily and buy them even easier. By designing the desired function so that it was intuitive, quick, and simple (book purchase done in 1 click), Amazon effectively increased users to their websites and turned first-time visitors into repeat buyers. As a result, revenues and Amazon's success took off. The moral of the story is simple: When designing navigation for a website, always consider the user and create a navigation system that is consistent, courteous, and explicit. In order to achieve this, we must start our planning process and commit all decisions to paper before we begin to code.
Different Levels of Navigation
Global navigation is sections or areas of the website that are consistently available to users no mater what section is currently being viewed. Secondary navigation is areas that are specific to a single section of the website. Contextual navigation tends to be more subtle and, yet, it is the most widely used type of navigation system. Any links you use within the content matter of the page is also providing navigation. Usually, it is meant as navigation to additional information relevant to the subject matter, but it is still navigation. It is still a navigation system that you should take care to design well. Contextual navigation establishes credibility and trust with users. If links point to outdated information or, worse yet, are broken links, users quickly become frustrated with your website and question its validity.
Decide on a color scheme for the navigation that will fit well with the color palette of the entire website. Keep from using these colors in other elements of the web page that you use in the navigation system for one specific reason: as users become more familiar with the website, they will associate all consistent properties as a part of the navigation system. Suppose you have orange links that turn blue on a rollover and it is a link. Then everytime I come across orange text, I will assume it is a link. When nothing happens, I will think something is wrong with my computer. In another scenario, if the navigation is at the top right of the page and I view another page, I will look for that navigation in the same place and expect the exact same verbiage. More on verbiage in a second. I want to clarify the point that it is important to remain consistent. What will be the color of the text of all links? Will I even use text as links or will I use graphics? Should I implement a rollover effect? If I do a rollover effect, is it helpful or distracting? Is the navigation in the same place on every single page? How many levels of navigation are you going to provide? Are those different levels of navigation in the same location on every single page?
"Wait a minute. Where am I?" If you have to ask yourself this question when using a website, then you have experienced poor navigation design. Great navigation systems not only provide access to all areas of your website but also they let the user know where they are currently in the website. This can be achieved with color coordination or explicit descriptions. Apple (www.apple.com) is a good example of a website that uses color to show users where they are. Walmart (www.walmart.com) uses explicit description to communicate to users where they are in their website.
Labeling is so important on the Web. Don't be clever when naming a link, especially the links that will populate your navigation systems. Say what you mean! If the page provides information on dogs then label its corresponding link Dogs or better yet, Information on Dogs. Of course, it will depend on the context but the point is be explicit and use labels that say what you mean. On the flip side, mean what you say. If a label says About Us, users now expect to find company or personal biographical information when they click on this link. If you use About Us and provide information on services, it may make sense to you but does it make sense to your users? That is the real question. Remember, that the Internet is not new and novel anymore. Users now visit a website with certain expectations and standards already established in their minds because they are now used to surfing the web. Even more, they are used to surfing the web on their computer platform at their connection speed. As designers, you are now expected to figure out these already pre-determined expectations, meet them, and exceed them with a website that is intuitive.
Use labels that are direct and imitate the language and terminology used by your website's audience. Be sure that those labels do, in fact, communicate exactly the content and information that is expected to be found when clicked on.
Alexandra: If you are depending on flashing lights and graphics for navigation - not a good idea. Resist the lure of gadgetry and trickery. I specialize in cancer websites. It is amazing how many cancer websites have animation that can be sickening to patients coping with low to moderate levels of nausea. There is nothing like puking your guts up while looking at bouncing bunny rabbits.
Alexandra: Make sure you create a sitemap. Do you want to have a flat schema, a jump-point schema or a library schema? Some designers put everything and kitchen sink into their websites. I think this is mistake. It is better to divide websites creating a new website for different content. This allows for a specific focus for each website.
Another reason is once your site becomes too large it starts acting like a wallowing whale. Download time for your users is slow, slower, slowest. For instance, if your website is 6 gigs instead of beating your chest trumpeting, "My website is the biggest in the world", divide it! I would slice down to no larger than 1 gigabyte each site, preferably even smaller units.
Our mistakes - yes, we have made major bloopers. These are our navigation errors and how we are repairing them.
Alexandra: When you are planning your website, plan for growth! Once a site starts adding pages it becomes too easy for users to get lost. Using the library organizational schema proposed in these articles, Crisis on the World Wide Web: A Library Website Model and in SuSE, MySQL bring navigation revolution to cancer support site I completely rewrote CancerSupportiveCare.com - What a pain! But users have expressed satisfaction and our visitor stats are growing exponentially. Now I am rewriting CancerLynx.com and CancerLinks.com
Lydia: I made the mistake in BlackTreeMedia.com of not having a sitemap at the very beginning. Like the Winchester house, pages went nowhere. Now I am in the process of rewriting the web site. I also made the mistake of having inconsistent navigation across different sections of the website. Users were getting lost because the navigation that was present in most sections was not consistent throughout all sections. That was a huge blunder. Time to rewrite!
Above all, remember this definition of assume - makes an ass out of u and me.
- Have you read the other Website Creation Tips and Tricks for Publishing articles to prepare for your website?
Getting Started with Websites
- ASCII, Colors, Fonts, Graphics
Alexandra Andrews is a Linux Webmaster for many websites including CancerSupportiveCare.com, CancerLynx.com, and CancerLinks.com
Lydia Idem is currently a professor at California Design College and Webmaster for BlackTree Media (www.blacktreemedia.com and www.blacktree.tv).