Usability in Web Design

John MacKenzie
Andrew McAlister
Sahil Desai
Kevin McCarthy

Executive Summary

This report addresses three concepts relating to usability in web design.

We start the report off with an overview of page layout, one of the most general topics our report covers. Making sure the user avoids staring aimlessly without direction is an imperative feature of a webpage. In the same light, it can be thought of as a golden rule to have uniformity throughout your website, each page matching the rest. With usability in mind, cutting down the clutter can only maximize it. Have a clean simplistic look, non-bloated and displaying only relevant information. We focus on the values of consistency and brevity. Next, we discuss the importance of speed on the web. Users that have to stare at the hourglass while waiting for the page to load will become frustrated with you. Finally, we overview the importance of making a website accessible. Ensuring that the site is usable by a wide range of browsers and users with disabilities is essential.

Introduction

As the Internet gains popularity and the amount of information online increases exponentially, web design and usability are becoming increasingly important. By using advanced web technologies such as CSS (Cascading style-sheets - a new method to design your site) and AJAX (Asynchronous Javascript and XML - a new technology that speeds up web applications) we are becoming closer to creating truly usable web sites every day.

Page Layout

The goal of a web page is usually one of the following:
  1. Convey some useful information
  2. Allow you to purchase something
  3. Allow you to accomplish something (Web Applications)

All of these tasks require careful interaction and communication with the user. If you are conveying information, your text can be as clearly written and easy to understand as possible, but if it’s buried behind a confusing interface or not properly emphasized on the page, it won’t be understood – or worse – ignored. The user’s ability to get to the information he wants, make his purchase, or use the application, is called usability.

Web pages that sell products are usually the best designed – look at Amazon or the Apple Store – the easier their sites are to use, the more they sell. Web sites that provide you with information are often very difficult to use. They make money by displaying advertisements to the user, so they are often not motivated to get you to your information in the fewest number of mouse clicks as possible. One thing these sites often overlook is that the nature of the Internet makes it very easy to locate an alternative that is much easier to use. For example, take a look at search engines in the late 1990s. They would often display large banner ads next to search results and ask you to register for all their portal services (for which most users have no need) – and then Google came along with its tiny little text ands and easy-to-use and understand interface. People switched to using Google in droves, and the other sites lost their ad revenue, all because of usability. Web applications, which are just now moving into popular use, depend on usability perhaps more than any other type of page. A good example is the current battle between webmail vendors – the battle of usability.

Don’t Make Me Think

Steve Krug, a usability expert and the author of one of the foremost books usability, says:
“People often ask me “What’s the most important thing I should do if I want to make sure my Web site is easy to use?” The answer is simple… It’s don’t make me think”
We pages, according to Krug, should be self-explanatory. The user should be able to glance at the page and understand how to do what he wants to do. Every second he stares at the page confused is another second he is tempted to click the back button and head to greener pastures. Emphasizing features most users are looking for, like search boxes for example, and de-emphasizing less important features, like copyright notices or support information (Krug).

Be Consistent

One great piece of advice to make your site more usable is to be consistent. To make your site immediately self-evident to your users, don’t reinvent the wheel. You can benefit from the user’s experience with other web sites – copy them! If you invent your own interface - no matter how intuitive and cool it is – your users will have to think about how to use it, since they haven’t seen it before. And that becomes confusing.

Many experts in the field agree that “Consistency is critical” when designing sites to be more usable (Gaffney). CSS is the perfect technology to make a design consistent. By allowing someone to create one file to describe what they want their site to look like, CSS simplifies site creation. Since they can put all of their formatting and design code in one file, they can tell all their pages to look to that file to know how to display its information. This gives their site a consistent look and feel to the entire site. Layout information is not duplicated across pages, and the layout will be the same on every page.

Be Concise

It’s always a good idea to cut down on the number of words on your page. Reading takes time, and users generally don’t want to spend the time to wade through pages of text. Less text means a smaller page, so your users don’t have to scroll. It reduces the amount of material on the page, so your users don’t have to search the page for the information they are looking for. What kind of content should be cut? If you are an online newspaper or webzine, you don’t need to cut back on your actual content- your users are there to read it. Krug recommends cutting back on “Happy Talk” and Instructions (Krug 46). “Happy Talk” is introductory text. “Welcome to our site! I hope you enjoy it here. Please click on the menu on the left of the screen to go to some pages.” Your users aren’t there for that – imagine putting a DVD in and having someone come on and say, “Welcome to this DVD! We really hope you enjoy watching this movie. You will be seeing a menu that will let you select different options, including starting the movie! Again, thank you for inserting this DVD into your player.”

Speed

When writing web applications, speed is of the utmost importance. When writing a web application using languages such as PHP or Microsoft’s ASP (Two programming languages used to build web applications that operate on the server - not on the user's personal computer), it is often difficult to guarantee that the application is going to be fast. Since everything must be sent to and from the server, if the server is having connectivity issues or is simply unreliable, the user might end up staring at a blank page for a period of time and eventually leave because of it. When writing a web application using such technologies as Sun Microsystems’ Java or Macromedia’s Flash (Technologies that run on the user's computer, rather than on a server), the only thing the server needs to be there for is to deliver the Java application or Flash application initially. After that, it’s all up to the user’s computer to do what it is the application needs to do. This can make for a faster more involved experience for the user, however, at the same time can be a downfall of the application as the user must install third party software on their computer to make it work.

One of the major complaints that users have with large sites is the speed at which the pages load. Even as the average users’ internet speed is increasing, the file size that pages are getting to are getting larger at almost the same rate. One major source of the increased file size is the graphical layout. In the past web designers would create a graphical layout for their site, plug it into a table, then copy and paste it on all of their pages. This worked back when layouts in general were simple because technology was limited. However, now that web technologies have grown and layouts are starting to get highly graphics intensive, loading times are getting unreasonable. It’s one thing to wait an extra bit to load the first page, but it’s completely different when the user has to wait on every page to load the same layout with slightly different text. CSS can aid the web designer heavily in this venture. If all of the formatting and graphics are loaded within the CSS file, all of those big files are cached when they load the page. What this means is the user only has to load the layout completely once on the first page, and not on each page. Also, “The reduced HTML file size inherent in CSS-based sites results in significantly faster download times" (Moss).

AJAX, or Asynchronous JavaScript and XML, is an approach to Web application development that uses client-side scripting to exchange data with the Web server. As a result, Web pages are dynamically updated without a full page refresh interrupting the interaction flow. With AJAX, you can create richer, more dynamic Web application user interfaces that approach the immediacy and usability of native desktop applications.” (McCarthy)
As McCarthy made quite clear, these new AJAX web applications are allowing developers to expand their horizons by creating faster, more usable environments in their pages. The key objective in AJAX was to somehow give the end user an experience that mimics the clean, concise and most importantly the speediness of an application native to the Desktop environment.

There have already been some amazing breakthroughs in AJAX based applications online. The most notable as of now are GMail and Google Maps, which are the software giant Google Inc.’s Webmail and Online map finder applications, respectively (Google). By utilizing this new technology, Google has succeeded in creating 2 of the most usable web applications currently available. Although Google has pioneered the the use of this new technology, many other companies are adopting AJAX, causing the number of “applications to skyrocket” (McCarthy).

Accessibility

A different, but related issue to usability is Accessibility – many users are disabled or handicapped, whether it be by an old browser that doesn’t support newer web sites, or by a physical handicap, such as blindness. Blind people can navigate the web by using browsers that read back the text so they can hear it. These browsers can’t read back data that is inside images, and sometimes the ordering of information on the page can be confusing to these screen-readers. There are a few things you can do to help these users. One is to use CSS. By separating the content of the page from the formatting, the screen-readers have an easier time with the page. Older browsers that don’t understand CSS can still display the information on the page, even though they can’t display the formatting.

Trenton Moss, in explaining why accessibility makes business sense, makes two major points: “An accessible Website will make your client money” and “An accessible Website will save your client money” (Moss). The first way accessibility will fulfill these two points is that a "website will be easier to manage”. Moss names CSS as the key factor to how this happens: “An accessible website separates the content (HTML) and presentation (CSS) of each page … Now, to adjust the layout of the Website, developers only need to make changes to the CSS file, rather than amending each and every page of the site, saving considerable time (and, therefore, money)” (Moss). Using CSS will make designing easier and most cost-effective.

Accessibility can be tricky when developing a web application. When using the server side approach (PHP/ASP), you are limited to the abilities of the browser in which the application will be run. This can sometimes lead to clunky, awkward interfaces to which users often have difficulty adapting. However, when using the client-side approach (Java/Flash), the programmer has the ability to create much more interactive and familiar interfaces with which the user can interact. Advantages of this technique would include not having to open a new web page everytime one needs to view new information, imitating a native desktop application.

Conclusion

Usability has become increasingly important as the internet becomes a part of our daily lives. Not only will a usable site make your users happy, the convserse is true: an difficult-to-use site will drive your users away. Using some of the new technologies we have discussed will help you to make your site more usable and keep your users happy.

Bibliography

Gaffney, Gerry. “Why Consistency is Critical.” February 25, 2005. http://www.sitepoint.com/article/why-consistency-is-critical (September 29,2005).

Moss, Trenton. “Secret Benefits of Search Engine Optimization: Increased Usability” November 15, 2005. http://www.sitepoint.com/article/increased-usability (September 29, 2005).

New Riders Publishing. “Designing Web Usability” May 4, 2001. http://wdvl.internet.com/Authoring/Design/Usability/ (September 29, 2005).

Roger E. Masse, “Guide to Usability for Software Engineers” November 17, 1998. http://www.otal.umd.edu/guse/ (September 30, 2005).

“The World Wide Web Consortium” September 30, 2005. http://www.w3c.com (September 30, 2005).

Jakob Neilson, “useit.com” September 30, 2005. http://www.useit.com (September 30, 2005).

Mullet, Kevin and Darrel Sano. Designing Visual Interfaces. Mountain View: Prentice Hall, 1995.

Krug, Steve. Don't Make Me Think. New York: New Riders Press, 2000.

Graham, Paul. “The Other Road Ahead.” September 2001. http://www.paulgraham.com/road.html (September 29, 2005).

Wikipedia. “Web Applications.” September 26, 2005. http://en.wikipedia.org/wiki/Web_application (September 29, 2005).

Garrett, Jesse James, “AJAX: A New Approach to Web Applications”, February 18, 2005 (September 30, 2005).

McCarthy, P. (2005) “Ajax for Developers: Build dynamic Java applications.” http://www- 128.ibm.com/developerworks/library/j-ajax1/?ca=dgr-lnxw01Ajax (September 26, 2005).

Ginda, R. (2005) JavaScript. http://www.mozilla.org/js/ (September 27, 2005).

Google, Inc. (2005) Google. http://www.google.com (October 7, 2005).

Adaptive Path, LLC. (2005) Adaptive Path. http://www.adaptivepath.com/ (October 7, 2005).

Usability. (2005) Usability.gov. http://www.usability.gov/ (October 7, 2005).

Amazon.com (2005) Amazon. http://www.amazon.com (October 21, 2005).