Web Design in Usability

John MacKenzie
Andrew McAlister
Sahil Desai
Kevin McCarthy

Executive Summary

This report addresses the 3 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.

With the confluence of Web-based and Desktop-based applications slowly drifting into sight, a slew of new architectures and development techniques are beginning to take precedence over their lesser peers. The one technology that has really captured the attention of web developers, because it maximizes the usability of a site, is the newly discovered (although previously implemented – although nameless at the time) web development architecture called AJAX (Asynchronous Javascript and XML).

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 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 90s. They would often display large banner ads next to search results and ask you to register for all their portal services – 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.

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.

According to Gerry Gaffney, “Consistency is critical” when designing your sites to be more usable for your users (Gaffney). When we talk about trying to make a design, layout, or overall format consistent; CSS is the perfect technology to help you reach that goal. CSS lets you create one file to describe what you want your entire site or specific pieces of the site to look like. Since you can put all of your formatting and design code in one file, you can tell all your pages to look to that file to know how to display its information. This gives your site a consistent look and feel to the entire site, while also letting you change things here and there to mix it up if you need to.

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 a very important issue to consider. When writing a web application using languages such as PHP or Microsoft’s ASP, this can be a little tricky 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, the only thing the server needs to be there for is to deliver the Java application or Flash application. 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 graphic 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 you have 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 you load the page. What this means is you only have 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. Re-iterating an earlier point, 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 seemed to have pioneered this new, as some say “Pattern” of web design, as a result 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, a technology discussed at length later in this whitepaper. 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.

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 that user must adapt to use. However, when using the client-side approach (Java/Flash), the programmer has the ability to create much more interactive and “native” interfaces for the user to interact with. Such advantages would include not having to open a new web page everytime one needs to view new information, this once again mimicks the native desktop application.

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 he discusses accessibility will fulfill those two points is “his website will be easier to manage”. He mentions 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). This about says it all. If the most important factor affecting you is cost, it is imperative that CSS be used to make designing easier and better. As a result you gain consistency, speed, and accessibility.

Conclusion

As the technologies of tomorrow slowly begin to become a reality today, it’s important to find the best use of these technologies. It is not enough to have amazing new technology, they must be used in a way that maximizes usability and improves the all round user experience.

Some of the key technologies that have really impacted the web design industry are Cascading Style Sheets (CSS), JavaScript and Extensible Markup Language (XML). Each has their own optimizations and ways to improve usability via speedup, accessibility and brevity. When combined, these 3 technologies form the brand new and revolutionary web development technique (AJAX) that mimics the behavior and usability of desktop applications that are used today.

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.

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).