Designing Usable & Visually Appealing Web Sites

Wayne Neale is a user interface designer and the manager of the Kodak web site. Wayne has research, published, and built hypermedia software interfaces for the past eight years. He has been involved with the web since 1993 and has designed, built and maintained the 10,000+ page Kodak web site over the past three years. His educational background is in human-computer interaction, cognitive psychology, business and industrial engineering.

Cindy McCombe is a visual interaction designer supporting the Kodak web site. Cindy's background is in communications, journalism, graphic design, graphic arts publishing and typography. She has taught a number of courses in the publishing arena, ranging from web design to newswriting at the Rochester Institute of Technology and Kodak.

© 1997 Copyright on this material is held by the authors.

Introduction

Objectives of the Course

• Structure content to maintain user orientation
• Facilitate access to information
• Design usable and visually appealing web pages
• Learn design techniques that are unique to the web
• Achieve consistency and support usability throughout a site
• Maximize the quality of images while minimizing download time

Hypermedia

• Hypermedia was conceptualized in 1945 by Vannevar Bush
• Hypertext coined in 1965 by Ted Nelson
• First Hypermedia application - Aspen Movie Map 1978
• Hypercard introduced by Apple - 1987
• HTTP/HTML invented by Tim Berners-Lee 1990
• Lost in hyperspace phenomenon

Hypermedia is the non-linear transversal and random access to information represented in multiple media.

Approaching web site design

• Who are your targeted users of the site?
• What are the objectives for the site?
• What types of tasks do you expect them to perform?
• How will you communicate the presence of your site?
• How will you respond to inquires and how quickly?
• How will the site be maintained and refreshed?
• How will you measure the effectiveness of the site?

Designing web pages of primarily text and graphics have different requirements and objectives than building a web application (e.g., shopping cart for internet commerce).Typical web pages present information about people, products, services, etc. Web applications, conversely, change the way people interact with a company or changes the way they currently perform certain tasks. An order-entry system for buying products, for example, changes the current process of faxing or phoning in an order to accessing a web site, interacting with an application, and tracking inventory and invoicing.

Web applications like these require an in-depth analysis of the user's current work environment and process to understand first if the application is viable and meets the user's needs. This task analysis will also yield information on how to structure and design the web application.

Customer support is one of the most important aspects of an interactive web site. Users expect a one day response to email concerning questions about a company or products. Corporations should utilize their existing support structure so that questions are answered by the appropriate expert. Automatic routing of these questions can be handled in the interface by delineating the categories of topics to target the question to the right person.

Design process - rationale

• Usability
• Performance
• Compatibility
• Visual Design
• Interaction

Part of the design rationale is to develop a design process that is user -centered which involves the above objectives.

A design rationale should be documented to be used as a tool for expressing the foundation for the hundreds of decisions and tradeoffs that need to be made for each design instance. A design rationale is a lot like the "vision" for design. While it does not answer every question for every instance of a design decision, it keeps you focused on the objectives for the site and supports the design decisions and tradeoffs that are inevitable.

The design rationale also acts as a reference for developers and agencies that will develop content for a site.

Design process - iterative design

• Analysis
• Design
• Prototype
• Test

1. Define requirements - Understand the target user profile, marketing requirements, system/product functional requirements, user interface requirements, function and task analysis.
2. Collect voice of the customer data - Collect and interpret data from focus groups, usability tests, beta test feedback, technical service hotline, sales statistics; analyze user needs.
3. Collect benchmark data - Review competitive sites.
4. Develop user interface design concepts - Define interaction metaphor, design alternatives, task flow storyboards.
5. Design preliminary user interface - Working with multiple disciplines design the user interface.
6. Prototype - Produce a first iteration of pages and the site.
7. Test or evaluate usability - Apply usability inspection methods or formal usability testing in a lab or in the field.
8. Redevelop or refine design concept - Iterate user interface design and prototype, verify compliance with usability specifications.
9. Document - Document specifications, design guidelines, and design rationale.

Global Principles of Web Site Design

• Follow HTML standards - use extensions where appropriate
• Use redundant text menus
• Use ALT tags for images
• Use descriptive naming of URLs
• Separate interface from file structure

Do not design your HTML for specific browsers. Popular browsers will change or probably go away. Remember that HTML is a markup language for structure and not for format! The user has a lot of control over format inside the browser. A lot of designers struggle over controlling layout based on the system they are designing on. Always test your pages on other systems and try modifying the browser settings to see how it affects your pages.

Minimizing download time

• Use image width/height tags
• Crop graphics tight
• Reduce color palette
• Reuse graphics
• Use thumbnails
• Keep file sizes low ~ 35k or lower on average

Rule of thumb for page size - hold your breath until the page downloads over a 28.8 modem while looking into mirror. If you turn blue, your web page is probably too large.

For any file over 60k, depict the size of the file next to the link so that the user knows what he or she is getting into.

Monitor Size

• Design for 640 pixel width which means something less wide
• "Web Gamma" average is 2.2
• LCD is 8-bit or 256 colors
• Some colors are used by system
• Use Netscape 216 color palette

Monitor size and resolution vastly affect the presentation of web pages. Bit depth has a profound effect on the quality of images. Resolution can also affect page layout in dramatic ways especially when designers "force" the layout of HTML. For example, with large resolutions background graphics which tile over and over create an undesired affect. With low resolution monitors, frames can be forced to display with a vertical height of only a couple of lines of text or less while looking just fine on other monitors.

Trademarks/Copyright

• Do not use photographs, graphics, or text for which you have not obtained release
• Use a copyright symbol in the footer instead of in every file
• Copyright should contain date, symbol, company or individual name
• TM should be used at least at first appearance of phrase

• Image usage rights must be checked each time for every image.
• Additional rights may need to be acquired.
• When negotiating image-use rights, try to secure unlimited, worldwide rights.
• Model releases are also required for all identifiable individuals in an image.
• Special care must be taken when images show sports/entertainment figures or other celebrities.
• Before releasing an image for use on the Worldwide Web, make sure you have copies of all image rights documentation and model releases.
• Failure to secure the rights to a single image could result in unwanted claims, litigation and possible liability.

Metadata

• Description of content
• Content document owner
• Document type
• Post date for documents
• Review dates for documents
• Expiration date for documents
• Receive direct responses regarding page content

We have created a tool for internal use that allows anyone in the company to access all the metadata about every page and email comments to the document owner and/or creator, thus involving the whole company in the site.

Information Design and Structure

Web site structure

• Linear - good for instructional
• Hierarchical - flexible, comfortable, represent complex organization
• Embedded linking - web structure
• Most sites use combination of all

The simple rule is to keep it very, very simple. Limit the number of links in any one page to a minimum. Keep the "structure" links or menus to 7 +/- 2.

Web site style

• Base on your objectives and users
• Publication
• Illustrative
• Image rich
• Supporting the Brand!

• Making sites easy to navigate
• Provide compelling interactive content
• A robust site that works the way users expect it to
• Answer email quickly and accurately
• Provide clear ,simple, effective messaging
• Build customer relationships
• Don't buy web ads
• Sponsor sites or pages linked to events or companies that are relevant to your company as well as your customers.
• Provide capability for people to communicate!

Alternative views to same underlying data

• Redundancy is pervasive
• Accommodate individual differences
• Facilitate access to information
• Certain implementations may be confusing

One approach to the lost in cyberspace phenomenon is to provide a map or mental model of the information space. Several "maps" of the information on a site: a spatial overview, a graphical overview, table of contents, index or alphabetical listing can be used. Another approach to the lost in cyberspace phenomenon is to provide alternative "views" to the same information space. This approach accommodates the vast range of individual differences in computer behavior shown to be as high as 25:1.

Make it clear that that these alternative views are different representations and that they do not represent the data collectively or it may be confusing.

Navigation in hyperspace

• Lost in hyperspace?
• Provide information cues to answer three questions:
  • Where did I come from?;
  • Where am I?;
  • Where can I go?
• Provide robust global navigation
• Provide contextual navigation

Global navigation should allow a user to always get back to the home page as well as to search from any page in case the user is lost in hyperspace.

Contextual navigation provides the user a robust way to navigate a single information space that might be a self-contained section within a larger site (sitelett).

Siteletts are very effective as far as a marketing web site is concerned. They may have very different appearances, style and tone which is appropriate for targeting customers and building relationships. However, the pages should contain enough elements to "belong" to the larger site (e.g., logo, footer, URL). What is more important is the feel or behavior of the sitelett. Navigation should be consistent across the whole site.

Global navigation

• The home page is your context
• Return to Home on every page gets you back to this context
• Provide a search engine
• Provide contextual searching elsewhere
• Supports goal-directed behavior
• Use footers through server-side includes
• Include link to home page, search and feedback
• Include copyright information
• Other periodic links (e.g., site survey, URL minder)
• Site Maps-graphical, textual, and/or spatial overviews
• Support orientation and build mental models
• Table of Contents
• Graphical overviews
• Zoomable site maps
• Most people use back button
• Generally, do not use back buttons in pages
• History lists "trim trees"
• Do not change color of links

Large sites should have small home pages. Small sites should have small home pages. The home page is the most important page on a web site. Navigationally speaking, it sets the expectations or mental model of the subsequent user experience. Long home pages of graphics, animation and text are not only confusing but they are also not visually appealing. Most people do not scroll through pages. Even if they do, they will forget what they saw or read at the top once they get to the bottom.

Never assume how or where someone arrived at a certain page. They may have bookmarked a page or hotlinked it in a jump page. If so, then button or links like previous or next are inappropriate.

Global navigation - Frames

• Friends don't let friends use frames!
• A browser displays frames by reading from a single file creating the frames and HTML files
• The file also tells which files goes into what frame
• Advantages -standardized navigation and design flexibility?
• Disadvantages -not supported by all browsers, can be confusing, problems printing

Contextual navigation

• Table of contents
• Provide TOCs for local information space
• Limit menus to 7 +/-2
• Carry contextual menu over to all pages within that context
• When exceeding 8 items use "Name of Menu" as a link
• Contextual menus- menus that map the local information space
• Contextual menus should be consistent with the TOC
• Place at bottom of page above footer
• Provide "one item" links to upper context
• Context menu should "stack" from bottom up
• Embed links throughout text based on association
• Do not overwhelm user with too many links
• Link only a few words or phrases
• Do not use "click here"

Consistency

• Naming - call things what they represent
• Use that name everywhere
• Navigation -most important factor in usability
• Text and graphics should be consistent in both presentation and style

Text is used in many different aspects on a web site. Nevertheless, it should always be made consistent. Font, size and style should only be changed to signify a point to the user. Bigger, bolder fonts for titles are useful hints to the user about what they are reading. These elements need to remain consistent throughout the site to convey the most meaning to the user. Use the same font, size, and style for each aspect of text on the site.

Graphics are more subjective when it comes to consistency. However, a really well designed site will make use of consistent graphics. This means that a style of graphic will be adopted for a site and used throughout. Color also should be mentioned as an element that should be made consistent. A color palette should be chosen for the site based on the overall look and feel that is being presented. The colors in the palette should work well together and be able to be used in a variety of combinations. This will allow for the site to retain a consistent feel while holding the user's attention.

Design Techniques

Backgrounds

• Color - strive for high contrast
• Graphic/Hexadecimal

Most browsers use gray as a default.

Hexadecimal numbers are assigned to represent RGB values.

When choosing colors, strive for high contrast. Avoid really bright and highly saturated colors.

Black text on a white background provides high contrast, but sometimes it is too harsh. A light background which facilitates high contrast is more comfortable for reading.

Graphics can be used as elements that are tiled or repeated over and over again on a background. If these are used, make sure they are very light and muted. If a graphic is used and not intended to tile across the whole screen, it should be made large.

Page length

• Page and screen size relationship
• 640 x 480 considered lowest common denominator
• Scrolling through long pages is disorienting
• When the bandwidth of the web increases by a factor of 10, web page sizes will increase by a factor of 15

Also, take in to consideration the tool bar, so graphics have to be considerably smaller than this size.

Several of our usability studies and others have shown that people do not scroll through web pages. Therefore, put the most salient information at the top. This finding also supports keeping your pages very short on average.

Titles

• Always include the company/site name inside Title tags
• Short, accurate descriptions of content in page

This requirement mainly provides those who bookmark a particular page with an accurate description of the page as well as who it came from. The title also appears in the browser window bar which helps conveys information to the user.

Banners

• Gives the user information as to where they are on the server
• Describes content of current page
• May provide contextual or global navigation
• If kept consistent in size, one graphic file can be used over and over again (nice for search function)

Buttons

• Size - make sure the buttons aren't too big or too small
• Consistent placement
• Buttons should be faded when that option in not available
• There is currently no standard for button shape, color, size, etc.
• Javascript and JAVA are giving designers more flexibility

Menu design

• Usability test menu names and icons
• Menus can help the user follow the information structure even when links are deeply embedded
• Menus contribute to the mental model of the structure of the site

Many customers come to the site without a specific goal in mind. A user may have a high level goal, such as finding some images or information about a product for instance. This behavior is best supported with an intuitive hierarchical structure. This structure must be confined within the limits of human cognitive capabilities and limitations. The number of menu items should be restricted to minimize short-term memory load. A well supported phenomenon in cognitive research shows that our short- term memory capacity is limited to 7 +/-2 "chunks" of information.

A good example of using server-side includes would be to have a dynamic menu for all of your web pages. To do so, you could create HTML files containing a contextual menu. By using an include statement, if you ever decide to change the menu items, all you would need to do is change an HTML file and it will change every page that has the include. This approach gives the designer more flexibility over the design of the menu.

Tables

• Used for presenting tabular data
• Can also be used to format text and images
• Tables can be used as grid structures
• Can hide or show the table box

Tables allow for a great amount of flexibility when it comes to screen layout. HTML natively has limited capabilities with respect to this function. However, tables make it possible to align and position every element of a web page. Tables have the following characteristics: rows, columns, adjustable widths, spacing and padding, borders and colors.

With tables, it is important to remember the following:

1. If you are using a table with no borders, it is helpful to work with a border during the creation of a table, and remove it when complete.
2. Putting a width tag on columns allows for even distribution of the contents of the table.
3. Use cellspacing and cellpadding to create a well proportioned table with proper layout of the contents.
4. Set the width of a table to 100% for the table to appear good at all resolutions.

Forms

• Facilitate user input with documents containing checkboxes, radio boxes, pull-down menus and text windows
• Input from user is collected and sent to server to collect information or interact with databases
• E.g., questionnaires, dealer locators, searching
• Use tables to format form elements

The information that is passed to the server can then be decoded and processed using any CGI compliant programming language, such as C, C++ or PERL.

These tips should be followed when using forms:

1. Always double-check alignment within the form.
2. Use tables within the form to insure proper spacing.
3. Set the default for pull-down menus to instructions for the user. For example, if the user is supposed to select a color from a pull -down menu, set the default to "Please Choose a Color."
4. Do not implement the script until all other portions are complete.

Image maps - Server/Client side

• Clickable or "active" images which are linked to other pages or sites
• Server side: processed on server
• Client side: processed at client
• Important design issues include saliency, nomenclature, and size of "hotspot"

1. Image in GIF/JPEG Format
2. Map File Based on the Image
3. Image Map Program

In general, a map file contains the coordinates of each region you wish to make active and their corresponding URL links.

Image map is a CGI program that resides on your server. On NCSA servers, this program usually resides in the cgi-bin directory. When a user clicks on an area of an image map, the coordinates are sent to the image map program, which compares the coordinates of the map file with and click and returns the page corresponding to area the mouse click occurred.

Client-side image maps are processed by the browser which affords web page visitors a more expedient link to other documents and less burden on the web server. Since client-side maps do not send requests to the server, a program such as imagemap is not required. As such, image maps can be tested offline and implemented locally. In addition, supporting browsers display the URL link as the user's mouse pointer passes over a "hot spot."

Typography

• Understand what is being said by the type
• Typesetting should be invisible
• Breaks must be made in logical and grammatical places
• Make sure the shape is appropriate after the typesetting

The purpose of typographic design is to help the reader understand the wording of the text, so breaks must be made in logical and grammatical places. Analyzing the copy reveals keywords, and an unimportant word should never be given undue precedence by placing it on a line by itself.

Design templates

• Contain standard data used on every page
• Helps keep design consistent
• Enables novices to quickly build nice pages

Design Templates are used to create and organize a web site. There are many different software applications that provide design templates for you that will help you in your web site creation. Below is a list of items that are made easier through the use of design templates"

• Organizing the flow of large, hierarchical sites
• Testing links within the site
• Uploading associated files for the site to the server
• Creating a server environment on your local PC

• Inflexibility in screen layout
• Decreased control over elements on the page
• Advanced techniques difficult to implement within the confines of the tool.

SeverSide includes

• Designed to make building content easier
• Data is stored in one location, and used several places throughout the web site
• Easily updated

<!--#exec cgi="/cgi-bin/webFooter.pl"-->

Instead of:

<HR>
<H5>
<P>
<A HREF="/homePage.shtml">
<IMG BORDER=0 ALT="[Home Page Thumbnail]" >
< SRC="/images/pages/homePageImageTN.gif"> Kodak Home Page</A> |
<A HREF="/cgi-bin/webSearchForm.pl">Search</A> |
< A HREF="/guestBook.shtml">Guest Book </A> |
< /P>
<Last Update: Tuesday October 31, 1995 at 15:9:19
<BR>
Contact
< I>
<A HREF="/cgi-bin/webFeedback.pl">
webmaster@kodak.com
< /A>
< /I>
if this server presents any problems.
< P>
<A HREF="/copyrightNotice.shtml">
Copyright</A>, Eastman Kodak Company, 1994
< /P>
< /H5>

Image width/height tags

• Example: <IMG SRC="picture.GIF" WIDTH = 412 HEIGHT=137>
• Netscape and other current WWW browsers instantly create a bounding box for the graphic
• After the text on the page loads, the image data is rendered
• Allows user to read page while image loads
• Provides instant navigation

Graphic and Image Design/Preparation

Bit depth/color palettes

• Homepage is your neon light of the Internet
• Homepage has to be amazing
• Use 7 bit fixed Netscape palette for graphics
• Several plugins available for smoothing, custom palettes, transparency and interlacing

Monitor gamma

• Gamma controls the overall brightness of an image
• Also controls the relative ratios of red to green to blue
• SGIs and Mac gamma ~ 1.8
• PCc and Suns gamma ~ 2.5
• Create your final image with monitor gamma set to 2.2 for the web

Almost every computer monitor has an intensity to voltage response curve which is roughly a 2.5 power function. This means that if you send your computer monitor a message that a certain pixel should have intensity equal to x, it will actually display a pixel which has intensity equal to x ^ 2.5

Because the range of voltages sent to the monitor is between 0 and 1, this means that the intensity value displayed will be less than what you wanted it to be. (0.5 ^ 2.5 = 0.177 for example) Monitors, then, are said to have a gamma of 2.5.

System gamma is affected by software (such as Netscape), graphics boards, and hardware such as the monitor and motherboard. All systems have different configurations of all of the above which impact how a graphic or photograph will look.

GIFs/JFIF

• Supports up to 8 bit ­p; or 256 colors
• 4-pass interlacing transparency
• LZW compression algorithm - not designed specifically for graphics 4:1 &- 10:1 compression
• There are two types of GIFs:
  • GIF87a: supports interlacing and storage of multiple files. Named after year invented, and is the standard
  • GIF89a: extends GIF87a specification, adds transparency, text comments, text/graphics animation
• Graphic and Image Design/Preparation
• Minimize vertical detail and noise in GIFs
• Avoid dithering
• Optimize pallets to reduce colors and to match Navigator and MSIE pallets
• Works best for flat color, sharp-edged art
• GIF is obsolete

PNG (Pronounced Ping)

• PNG is being developed by the W3C, and will always be a free and open standard
• PNG uses better image compression technology than GIF
• A permanent, royalty-free license
• Higher bit depths (more colors) PNG allows for 1, 2, 4, 8, 16, 24 and 32 bit
• Multiple layers of transparency - PNG images allow for full alpha channel transparency, which makes moving images from one background to another easy
• Built-in gamma correction. Users can see an image the way it was intended to be seen by selecting the gamma level intended for their monitor
• Graphic and Image Design/Preparation

Flashpix

• Multiresolution
• Structured Storage Container Format
• Standardized Color Space
• Alpha Channel Compositing
• Viewing Transforms and Scripting

Evaluating Web Sites

Usability testing

• Start with colleagues
• Move to people outside your department
• Use the intranet for broad internal testing
• Always use targeted users
• Use internet behind "blind" URLs

Learnability

Time and effort to reach proficiency, given a specified amount of training and user support.

Ease of use

Ease and degree to which goal-directed tasks can be accomplished at the required level of criterion, performance, with predictable results, by the specified target users, within the conditions of use environments.

Errors

Proportion of non-productive actions and errors committed, in comparison with useful actions, and amount of time and effort needed to recover appropriately from errors.

Productivity

Level of effectiveness achieved relative to the resources users must expend, in terms of effort, time, materials, or cost, to meet the goals of using the product or system.

Retention

Time and effort required to relearn to use the product or system to a certain level of performance, following a given period of non-use.

Satisfaction

Quality of the user's experience with the product or system, and attitude during and after use with respect to comfort, frustration, and enthusiasm.

Platform/Browser testing

• Test with at least two browsers
• Test on Mac, PC, UNIX
• Monitor log files
• Evaluate against other media
• Experiment, Learn, Learn, Learn!