At the same time, interactivity and multimedia elements can be very powerful for conveying information beyond that of text, diagrammatic representations, or static images.

This is a tradeoff! If you choose to integrate such twinkles, you must be sure to understand their limitations and make a conscious effort to provide the most highly usable context possible.

There are times when interactivity and multimedia can be used to increase comprehension or facilitate understanding and information retrieval. In addition, they can be used to enhance the user experience.

However, these advantages must be competently weighed against the restrictions and distractions such techniques often incur. The goal of this section is to make you aware of the potential usability issues involved in employing interactivity and multimedia and to allow you to make a conscious choice of the tradeoffs involved in adopting such techniques.

Animation
Animation can be a very powerful means of conveying information. It is also a very effective way to mislead, distract, and aggravate users. Animation has repeatedly been shown to distract users.

Users would escape from animations by covering the screen with their hands or scrolling animated objects off the display (Spool, Scanlon, Schroeder, and Snyder, 1997). Animation triggers our attention through our low-level visual processes, and as such it is difficult to avoid. However, users do adapt and may ignore your animation entirely.

Thus, animation can cause problems, particularly if you are developing a site where users are searching for information or skimming the page contents. However, there are some advantages to animation. It can be used to help people find information more easily or to describe processes that are difficult to explain simply with text or static diagrammatic representations. Animation can also make information significantly more engaging for the viewer.

If you plan to use animation on your site, be sure to keep some of these guidelines in mind. Animation should support the user’s goals and tasks. You can use animation to elaborate or clarify processes that are not possible to describe in text. That is, animation can be used to convey content, not merely to decorate.

Try to keep the animation from looping infinitely (if the user has stayed on a page long enough, it is likely he or she is looking for information on that page and an animation will only serve to distract). Use only a single animation per page, and use it to bring the viewer to the focal point of the page. Animation seriously distracts the eye, so multiple animations can cause a conflict as to where to look on the page.

Macromedia Flash
Flash movies enable highly interactive, animated, multimedia experiences. The use of Flash involves some significant tradeoffs. At the time of this writing, a major concern is what percentage of users actually have the plug-in installed (and the latest version of the plug-in). While Flash can be used quite effectively to provide higher levels of interactivity and more interesting online animation, each use must be carefully considered to make sure that it provides value to the end user without causing problems. The following are some tips for applying Flash with minimal disruption for users.

Report This Post

In fact, the perceived structure, established by the way navigation is displayed, can be significantly more important to the usability of the site than the actual underlying structure.

Presentation
Visual metaphors help organize the information and make the options more memorable. While most navigation will be presented as lists of text labels or icons, links may also be organized in maps, diagrams, or other pictures.

For example, an approach that seems to pop up periodically is a room metaphor, where links are associated with objects in a three-dimensional scene, such as a room with a “help desk.”

However, unless your domain is architecture or furniture, a 3D room is most likely to be a stretch that confuses the users rather than helping them. Visual metaphors should be used when they clarify the content but avoided when they conflict with or confuse the interpretation of the content.

If you use them at all, find metaphors that are strongly related to your subject domain. When no obvious metaphor is available, avoid them altogether and use a simple list of links.

Navbar Layout
Some of the basics of navigation layout are presented here. The main issues are coping with limited screen real estate (i.e., the amount of space available on a given display) and clearly indicating the relationships between multiple navigation bars.

Screen Real Estate
Dominating the problem of fitting information into limited space on the screen is the fact that English words are longer horizontally than vertically. Actually, English is a fairly dense language, and other European languages typically require even more horizontal space. (Some languages such as Japanese and Chinese require less horizontal space, on average, and more vertical space. They also allow convenient vertical layout of words when needed.)

The primary impact of this is that while horizontal navbars require very little vertical space, they can’t hold a lot of items. Multiline horizontal navbars are possible, and even common, but they can be confusing because the second line may be interpreted as a separate list or a subnav.

Because horizontal navbars can fit very few items, they will necessarily vary in shape (i.e., vertical space) on different pages, creating design inconsistencies. In addition, if you need to add more options at a later time, you’ll have to introduce a new layout when the list gets too long.

A vertical navbar doesn’t suffer from this maintenance problem as much, but instead limits the length of individual link labels (thus putting pressure on you to create less meaningful labels). Vertical navbars also steal horizontal space that would otherwise be available to the body text.

One solution is to use drop-down menus to present navigation options. This saves screen space but is somewhat more difficult for users. We recommend it only for lists of shortcuts, not as a substitute for the primary navigation.

The limits of screen real estate have driven many sites to implement cascading menus in DHTML. Compatibility issues are a factor here, but if carefully tested, it’s possible to design this to work with the most common platforms.

Because so many interaction styles are possible, it’s important to test that users are comfortable with your implementation. If you decide to go the route keep the menus simple and straightforward imitating the behavior of standard desktop menus.

Avoid multilevel menus (where one submenu leads to another level of submenus), which are more cognitively complex and more difficult for people to select with a mouse. People vary greatly in their motor ability to accurately point at links, and complex cascading menus can be among the most difficult to accurately manipulate.
There are still other ways to present navigation elements.

Subnav Design
Several different navigation bars may be on a screen simultaneously, including top level categories, multiple levels of subnav, breadcrumbs, and utilities. Users must determine which is which, and your responsibility is to make this obvious. If users see two lists of links, how are they to know what each represents? There may be two lists of links at the same level, a main nav and a subnav many levels deeper, a main nav and a breadcrumb trail, or one of several other alternatives.

You can indicate the relationship between a navbar and its subnav in several ways. You can put the subnav below and to the right of the main navbar, make the subnav smaller, or draw a line from the category in the main navbar that the subnav represents.

It’s also possible to enclose the subnav within a frame encompassed by the main navbar, or to use typography to indicate the primacy of the main navbar over the subnav – that is, to indicate the relationship by changes in font size, capitalization, indentation, color, or contrast. For instance, the main navbar can be in all caps, the first level down in title case, and the second level down in lowercase. Through illustrate several different ways to design subnavigation.

Grouping Navigation Items
When your site is organized in a shallow structure (i.e., few levels of depth), you may have lots of links at the same level, which can be more easily scanned if they are grouped into related items.

These groups help make a more sensible page, but they need to be carefully presented to avoid two problems: (1) a group may be mistaken for a subnav if it’s not presented as being at the same level, and (2) people quickly become accustomed to using only one group and may be blind-sighted to the presence of the other group. For an example of a complex site with multiple navigation groups.

Isolating the Navbar
The navigation bar can also be isolated from the content of pages by putting it in a separate window or frame. On the plus side, an isolated navbar can make site maintenance easier, may slightly improve the speed of the site, and can improve the apparent stability of the navbar.

On the down side, separate windows can create difficulties in window management, especially on small screens. They also make it more difficult (though not impossible) for the programmer to customize breadcrumbs and provide indicators of the current page.

Report This Post

However, too often forms adopt improper controls (such as drop-down menus and radio buttons), provide the user with inadequate feedback, or simply don’t work.

Great progress can be made by simply applying the consistency principle to all of your forms. Use common conventions, make form layout similar across forms, and take advantage of what users already know about or are comfortable with. When using forms to submit data, you must be consistent!

A great way to achieve consistency is to establish a style guideline for all your online forms. This is simply a guide that developers and designers can consult that makes the layout, interactions, formatting, and labeling of forms explicit. A style guide serves as a reference and is particularly valuable when designing sites with several forms or working on a site that continually adds new forms and data over time.

The style guide should address form layout, standard widget use and guide lines, labeling conventions, interaction guidelines for multiple page forms, and techniques for presenting feedback to the user. In addition, a style guide should provide a graphic demonstration of each recommendation.

Overall Form Design
Online forms should present a clear step-by-step procedure for the user. Often, it’s good to label the steps numerically within a page (1, 2, 3) so that the user can quickly see the sequence.

In the absence of numbers, make sure the next step is always clear. A common problem is to have a submission button that is not obvious and that the user never presses. If the steps occur across multiple pages, it’s helpful to note the total number of steps by labeling them as “1 of 4,” “2 of 4,” and so on.

Keep Forms Short
As in surveys, most people don’t like to fill in much information. Minimize the number of form fields. You can make the respondents’ job easier by allowing them to use checkboxes and radio buttons rather than fill in freeform text fields.

Identify Required Fields in the Form
Boldface text or asterisks next to the required fields are common conventions. We’ve found that small arrows or triangles work well too. Required fields can prevent you from getting information that’ useless – for example, it doesn’t do any good for respondents to ask for more information if they don’t provide you with contact information. However, never require any more information than the bare minimum you need. If users get blocked in submitting the form, there’s a greater likelihood of their becoming frustrated and giving up.

Form Elements
There are several common elements that appear in forms. They should be used in consistent ways and should never go against the standards.

Introductory Statement
Every form should have a few sentences at the top of the page detailing what the form is and describing any constraints of the form.

Labels
Labels are the descriptive text used to communicate what information is being requested.

Controls
Controls allow users to make selections and input data. There are several different types of controls. These are defined as follows.

Text fields: These allow users to type in responses using their keyboard.
Drop-down menus: These allow the user to select a single value from a list of choices. Drop-down menus should always be populated with a default value. The label used for the default value should be a description of the contents beginning with an action word – for example, “Select a State,” where the rest of the choices are state abbreviations (e.g., CA).

Scrolling lists: These provide a list of preset values from which the user can select any subset.

Radio buttons: These serve a similar function to drop-down menus. They are used to present a list of choices from which the user can make a single selection. Radio buttons are more direct and easier to use than drop-down menus. However, they do not scale well when there are a large number of choices.

Checkboxes: These are similar to scrolling lists in that they provide a list of elements from which the user can select any number of choices. Checkboxes are more direct and exact to use than scrolling lists. However, they do not scale well when there are a large number of choices.

Action Buttons
Action buttons are used to trigger an action. A Submit button could trigger the sending of data, and a Reset button could clear the contents of a form.
There should only be one Submit button per form, and this button should be clearly labeled. Instead of “Submit,” label it “Send This Message” or “Submit This Order” or whatever specific text is relevant to the form.

If you have a Reset button, this too should be labeled clearly, with text like “Clear All Values” or “Restore Default Values.” However, we actually recommend you don’t use the Reset functionality on a form because it generally causes more harm than good.

It is not necessary for short forms, and for long forms it poses the risk of wiping out monumental efforts on the part of the user – with no opportunity to undo its effects! Still, Reset buttons can be useful when there are default values contained within the form that are difficult to reconstruct. When using them for such cases, remember to label the button “Reset to Default Values” or something appropriately descriptive.

Form Layout
A key to developing highly usable forms is to develop a consistent layout that is used on all forms throughout a site. Here we address some layout issues that are exclusive to forms.

Introductory Statement
As mentioned earlier, the introductory statement should be placed at the top of every form. In addition, if this form is part of a multistaged process, you’ll want to be sure to indicate where the user is in the process (e.g., “Stage 1 of 3” or “Background Information ? Detailed Bug Report ? Response and Feedback”).

Labels
In general, labels should be placed to the left of the designated control. This creates a visually consistent layout and helps to clarify the layout when a form includes grouped controls such as radio buttons. If you put the labels above the controls, the relationship between label and control is less clear. Placing labels on the left of the control allows users to visually group the items based on proximity.
Labels should be right aligned so that the end of the label is flush against the corresponding control. On the Web, where font size is not set in stone and pages can be dynamically resized, left-aligned labels can end up far from the controls they are intended to label.

Controls
Controls include areas where the user enters data, selects a choice, or chooses a subset of choices. These typically include text fields, drop-down menus, and scrolling lists. The size of text fields should reflect the expected size of the input. For example, if the user is expected to enter a middle initial, the text box should be small. Controls should be left aligned so that the left edges are flush against the labels.

Checkboxes and Radio Buttons
Checkboxes and radio buttons often require additional levels of layout. They typically have a high-level description of the group (e.g., “Payment Type” (and then require labels for each of the subchoices within that group) e.g., “Visa”). The high-level group label should be placed to the left of the control and right aligned. Subchoice labels should be placed to the right of the control and should be left aligned.

Action Buttons
Action buttons should be placed at the bottom of the form. Studies have found that users go directly to the bottom of a form to look for a Submit button (Spool et al. 1997), and placing them elsewhere on the page leads to users overlooking them. Action buttons should be left aligned underneath the controls.

Report This Post

Interpret Thus Icon
Once you have candidate icon designs, you need to know whether your design makes any sense. A simple approach is to show the icons to users and ask them to write down what they think each icon means.

You can use a simple worksheet Form (download from http://www.mkp.com/uew/), or if you have a mockup of the site ready, show them the mockup and simply ask what they think each icon means in context. Don’t expect people to guess the icons correctly all the time, but identify your worst icons and keep working on them.

Match the Icon to Its Concept
While optimally icons will be recognizable in any context, many times it’s fair to assume that your users will understand the context and won’t be guessing the meaning of an icon in a vacuum.

For instance, if your users are domain experts, they’ll know what types of features to expect on your site, so they’ll have a head start in figuring out what an icon might do. Thus, in some cases, all you need to do is make sure that your set of icons can unambiguously be mapped to the correct concept. Form 9-4 demonstrates a simple way to test this. (Download from http://www.mkp.com/uew/.)

Report This Post

It is reasonable to do the first couple of iterations with simple paper-based representations. Later on, as the icons become more refined, you can move to digital representations and begin testing on the screen. In this section we describe how you can be lazy and let the best icons design themselves.

1. Shirk Responsibility: Brainstorm Icons
Start off by giving as many people as possible a list of concepts. Then ask them to draw, sketch, or simply describe the images they would use to support such concepts. It’s always easier to let others do your work for you, and it provides you with some data regarding the most common themes.

Starting this way is similar to the development of thumbnail sketches for page layout. You quickly get a large selection of ideas from which to base your further development. In addition, you learn which ideas might be common across the selection of people you’ve gathered for the brainstorming.

For this reason, it is often beneficial to involve as diverse a population as possible. Better yet, let the developers of your initial icon concepts be as close as possible to your target population of users.

To brainstorm possible ways of representing a concept in an icon, a simple worksheet can be used to elicit ideas from people, and it only takes a few minutes; download from http://www.mkp.com/uew/).

List the names of the icons you want down the left column. Give descriptions if needed. In the second column, ask them to give synonyms, related terms, and describe objects that they associate with each concept.

Many people won’t feel comfortable drawing potential icons, but they can still suggest visual ideas that will help you to come up with an icon. In the last column, ask them to draw some candidate icons. These sketches will usually be pretty rough, but they help you to identify prototypical visual concepts.

2. Limit Your Options
On the first pass, you may want to choose a subset of icon designs to continue refining. You should pay particular attention to those icons that people suggested most often. However, you’ll want to be sure that you haven’t mislabeled the concept or that the icons aren’t just a simple, but inaccurate, metaphor for the concept you are attempting to visualize.

3. Refine With Details and Begin Testing
At this point you should have several alternatives for each concept that you want. Here you might want to begin to develop higher-resolution or slightly more detailed versions. You’ll also want to begin an iterative testing process using a mixture of tests described in the following section.

You should also begin testing your icons in black and white. An icon should be able to convey everything it needs to in grayscale form. If you require color for the meaning to be clear, in most (although not all) instances this means your icon is not properly communicating to the users.

4. Go Against Your Intuitions and Choose the Best
Once you have tested and refined the icons several times, it should be obvious which are the best choices. Often this may go against your original inclinations – but who are you to resist! At this point, you have combined the minds of several individuals along with testing data to determine the best solution.

Be humble. Do what’s right. Of course, it will be up to the graphic designer to make these icons a visually appealing as possible, but a lot can be gained from utilizing the power of numbers.

In summary, there are several tips to follow when developing icons: take advantage of others in the initial development of ideas; start with simple sketches; refine initially in black and white or grayscale; and develop an iterative system of testing and redesign.

Report This Post

However, when not carefully designed, they can do more harm than good. There are few things more frustrating, for example, than clicking an icon expecting one thing to happen only to find a completely different action taking place.

Icons, like the rest of your design, should support the user’s task. Thus, icons should be used only when they effectively and comprehension or communication. If they are being used solely to make your page look good, you need to be sure that they in no way detract from the communication and usability of the page.

Characteristic of good icons are as follows they should be identifiable out side the context of the page unambiguous, distinct and memorable, familiar, consistent (both across icons and across pages), and attractive.

Icons can be used as compact graphical representations to facilitate navigation. They are most effective when used to complement a link where the text alone doesn’t provide a clear definition of the link. Use icons to clarify the meaning of your link labels.

It’s useful to provide a text link along with your icon. A text link can be read by screen readers for the visually impaired. If you choose not to include text links, be sure to include adequate ALT tags to provide for screen-reading software.

Report This Post

Good typography relies on the ability of the type to create a visual contrast between fonts as well as across the page as a whole (e.g., body text or headlines). There are a few simple ideas that can help you to make the presentation of type communicate effectively.

Match the Typeface to the Content
Match the style of typeface you choose to the style of site you want to produce. For example, if your client is looking for a highly professional but somewhat modern look you’ll want to use a typeface that supports that feel. Thus, you wouldn’t use old gothic type, but rather something more elegant and formal, such as Optima.

Get To Know Your Typeface
It’s difficult to know the quirks of a given typeface until you’ve seen it in action. Select a typeface and use it for everything you do for a few weeks. Use it on letterhead, memos, in word-processing documents. Make it large, make it small, make it wide, and make it tall. After a few weeks of this, you’ll know how the typeface works best. Is it a good font for large titles? Is it better and more suitable for long text passages at smaller font sizes?

Don’t Go Overboard
A mistake that beginners often make when discovering the world of typography is to go overboard in their use of different typefaces. Very subtle changes in font size or weight can contribute to large perceptual cues, particularly if the vast majority of your page is similar in scale, weight, and structure. On the other hand, make sure that if you intend for something to be distinguished, it has sufficient contrast to eliminate any ambiguity.

Using Variations on a Single Typeface
When creating subdued, formal, and highly structured text, it is often useful to stick with the same typeface throughout the design space. For instance, a form design can often benefit from using the same typeface throughout. This allows you to easily draw attention where you need to and also to direct the flow of a user’s eye across the page with deliberate control (there are methods for defining areas of emphasis; see sidebar “The Squint Test”).

Using Contrasting Typefaces
Contrasting typefaces can create a very strong visual impact. However, too many contrasting typefaces produces a cluttered page. A confusing hodgepodge of graphical intensity can lead users to despair rather than to your information!

Changing the Typeface on a Single Dimension to Emphasize Structure
By varying one dimension of a typeface, you can effectively structure the visual space, reinforcing the uniformity of most elements on your page and giving clarity to the single distinction that you want to make.

For example, increasing a single typeface in point size can effectively create a focal point in the page and help relate key elements in the display. Changing the weight of the stroke has a similar effect. Type can be varied on any of a number of dimensions, but it’s easiest to retain control over the structure of the page by varying only one dimension. Type can be varied along these dimensions: width of the stroke, size of the font, and color of the font.

Report This Post

In addition, users may be using devices with either black-and-white screens or reduced-color screens. Human constraints include differences in color preferences, in cultural meanings, and in color perception. In addition, color blindness is relatively common (about 4% of all people) so it usually unsafe to depend on people’s ability to accurately distinguish colors.

Make It Work In Grayscale
As a result of these limitations, make sure your designs work in black work in black and white. While you can still design in color, if you want to distinguish between two colored areas, make sure they contrast in brightness as well as in color, and that this difference in brightness is sufficient. To test whether a design works without color, convert the design to grayscale and make sure it’s still possible to use.

Color Perception
Watch how colors work together. Certain pairs of colors do not work side by side, because the edge between them will appear to vibrate; these include red/green, blue/violet, and red/blue.

If you need to put these pairs of color next to each other, you can reduce the vibration effect by separating them with a solid black line. You can also reduce the effect by increasing the difference in brightness between the two colors.

Keep in mind that it’s not good enough to make subtle changes that improve it “just enough.” Because of differences in the color calibration of monitors, you can’t be sure that they won’t fall back into an unacceptable range on certain monitors.

People also have difficulty focusing on thin blue lines (the blue receptors in the eye are the least acute). For this reason, avoid highly saturated blue for sharp lines or detailed work.

Effective Use of Color
While we’ve discussed several concerns with the use of color, color is also extremely effective at accomplishing certain perceptual effects. Some good uses of color include making things pop out (one bright color among dull colors is easy to spot), emphasizing important information, grouping related items and reinforcing layouts (by providing redundant color cues to highlight which items are meant to be more prominent than others), and increasing comprehension and memorability.

Report This Post

In addition, you should consider how much the site will change and grow. While you always want designs that are scalable (i.e., easy to add new pages and navigation), some site will likely require more dynamic growth than others. This can be determined in part by asking clients to describe their future plans for growth.

However, you should beware of relying too heavily on a client’s assessment. Most estimates on growth can be wildly off and very misleading. It is best to approach this question with common sense and a conservative perspective.

Assume that the site will need to grow massively, unless you have good reason to believe otherwise. Set scalability as your goals and design accordingly. This may make your initial design more difficult to achieve, but in the long run it will pay off, particularly if there is a need for major growth.

Report This Post

The overall style of the site is determined by analyzing information collected from an array of sources. Marketing departments often have a good deal of investment in the public image a site should present, but you may have additional insight based on your early user needs analysis, where you’ve heard from interviewees or focus group participants what style the users prefer.

Defining your web site style requires understanding your clients and their position within their domain and business environment. Should they portray corporate image, a playful image, or a contemporary image?

You won’t know this unless you have close ties to your clients, or you do a lot of probing and investigating. Get your clients to provide you with a list of competing companies. If they have web sites, be sure to have your clients take a few minutes to go over the sites with you. Identify ways in which they are successful and ways in which they don’t succeed.

The second half of the Client Interview/Web Site Information Worksheet provides a place for recording information about the content that needs to be included in the design and provides a means for gathering any information on preestablished style guidelines that a given company may already have (e.g., specific fonts used, logo requirements, etc).

Once the style is established, your design elements will need to be created to fit this style. Thus, the style may affect the font chosen (e.g., corporate vs. playful), the icon style (e.g., bulky vs. elegant), the color (e.g. striking contrasts and bright colors vs. subtle and subdued), or any element on the page. They style you establish provides the voice for the web site, implying a frame of mind and providing a point of view.

Report This Post