Web Design in Usability

John MacKenzie
Andrew McAlister
Sahil Desai
Kevin McCarthy

Executive Summary

This report addresses the 4 concepts relating to web design that are currently viewed as being the most important with strong attention to usability. Web Page Layout & Accessibility is the most general of the 4 ideas, simply because it applies the idea of usability to all of the other 3 concrete concepts. 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. Once again this goes hand in hand with making sure people of all walks of life have an equal opportunity to access the site, be it handicapped or children. Cascading Style Sheets (CSS) is a up and coming technology that has revolutionized how people can maintain consistency throughout their page by having these pre-made template files that can be applied to any page, forcing it to take the form specifies by the relating CSS file. By storing images and color schemes in your CSS file there is a major speedup in accessing information that will be used frequently. A centralized, common CSS file will in the long term save a company or individual time and money since editing a single file would suffice, rather than rebuilding the site. Web Applications are a new and developing environment that is being adopted by many people across the web development spectrum. There is still a lot of room for improvement but as of now the current technologies being used quite commonly are Hypertext Preprocessor (PHP), Active Server Pages (ASP) and Java Server Pages (JSP). These applications are all server side (installed and run off of a server), which allows for developers to have a lot of room to optimize usability by having more resources available via the server. There are 2 new technologies, one of which is an actual environment, Macromedia’s Flash and the other being based of JavaScript, which when combined with XHTML allow for a new mindset of web development known as AJAX. AJAX (Asynchronous JavaScript and XML) is a new web development technique for creating web applications using HTML (or XHTML) and CSS for presenting information. It utilizes JavaScript to allow for a very usable interface and the fact that it is partially cached on the client side allows for avoidance of wait times, as experienced with legacy techniques. This is though to be the future of web design and at some point it will be standard development technique. Large companies such as Google, Apple, Microsoft and Yahoo are all utilizing the AJAX approach to create more usable web applications.

Introduction

As the Internet gains popularity and the amount of information online increases exponentially, web design and usability are becoming increasingly important. In our whitepaper, we break this broad topic down into several main sub-topics, including page layout and accessibility, cascading style sheets, web applications, and new web technologies. In the section on page layout and accessibility, we will overview what usability is and why you should be concerned by it, as well as give you some good pointers to get you on your way to making your site usable. In the next section, we discuss cascading style sheets - a great way to separate content from layout - and their benefits. In the section on web applications, we detail the usability issues you will encounter when creating an application for the web. Finally, we will discuss some new technologies that will change how the web is used in the future.

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.

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

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.

Cascading Style Sheet

Consistency

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.

Speed

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

Accessibility

One area of web design that goes hand and hand with usability is accessibility. While usability focuses on making a site easy to use and handy for the visitor, accessibility focuses on making your site able to be used by many different groups of users. 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.

Web Applications

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.

Accessibility

This can be another tricky aspect to overcome in web application design. When using the server side approach (PHP/ASP), you are limited to the abilities of the browser in which the application will be run in. 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.

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