OfficeTalk: Improving Web Site Usability and Appeal
This content is no longer actively maintained. It is provided as is, for anyone who may still be using these technologies, with no warranties or claims of accuracy with regard to the most recent product version or service release.
Summary: The following article by Kevin Keeker of MSN Usability & Marketing, was originally published on 19 May 1997 and is being republished here in its entirety based on customer requests. (12 printed pages)
Kevin Keeker, Microsoft Corporation
Republished: September 2008
Applies to: Microsoft Office SharePoint Designer 2007, Microsoft Expression Web
Contents
Overview
Content Quality
Ease of Use
Promoting Content
Made-for-the-Medium Content
Emotional Response
Overview
This document describes research findings that can provide designers and producers with ideas to increase the usability and appeal of Web sites.
Although most of the tips will not surprise experienced designers or producers, this document should be helpful as a reference, checklist, reminder or brainstorming tool. Each section gives a broad overview of an appeal concept, a website review checklist and a list of concrete design tips. Some ideas may work as described, but designers will often need to creatively adapt an idea to their particular site.
For the purposes of this paper, appeal refers to whether people enjoy and become engaged in an experience. Appeal should translate directly into repeat Web-site visits. We theorize that there are five main attributes of appeal that increase site use. You can:
Provide relevant, high-quality content.
Make it easy to use.
Promote effectively, both on the site and in other media.
Make the experience unique to the medium.
Evoke emotion.
This document is primarily based on more than a year's worth of usability and marketing research on the Microsoft Network (MSN) Shows. Ideas have also come from MSN producers, the MSN LinkFinder's best-of-the-Web criteria, Microsoft cross-product usability research, advanced technology research, and publications of the broader software-research community.
Content Quality
Relevance
To be useful to an Internet audience, each site must deliver entertainment or knowledge, or improve the way its audience accomplishes some important task (such as purchase tickets or get fit). Designers sometimes take it for granted that their content is relevant. They also sometimes take it for granted that audiences will see or discover the relevance of their site.
Website Review: Relevance
Will the topic matter be interesting to the core audience?
Will people have an opportunity to learn or accomplish something valued?
Design Tips: Relevance
Make relevant, high-quality content your number one priority. Everything else is secondary, including look and feel, ease of use, uniqueness to the medium, and promotion.
Use market research to determine your target market and how valuable that market finds your site's primary content.
Tell potential audience members how your site is relevant to them.
Identify related topics or tasks that are important to your target market.
Attractive Use of Media
Great animation, sound, and graphics can make content come alive by evoking mood or emotion. It's hard to imagine one's favorite game or dramatic film without the music. Perhaps because it's harder to avoid (without plugging your ears), bad music is more aversive to people than poor graphics. Computer users often turn their audio off to avoid annoying music, and may not remember to turn it back on for your site. Take special care to coordinate audio and video. Disjunctive or competing stimuli can cause your audience to leave your site.
Website Review: Attractive Use of Media
Will the graphics be appealing to the core audience?
Will the audio be pleasing to the core audience?
Does the music evoke the appropriate mood or emotion?
Will the experience be enjoyable if a person views the site without audio?
Design Tips: Attractive Use of Media
Some of the following recommendations on audio, animation, and video were adapted from a convenient list by Jakob Nielsen, available at Jakob Nielsen's Alertbox, http://www.useit.com/alertbox/9512.html .
Don't replay audio or animation introductions on repeat visits to a location.
Coordinate audio and video.
Warn people to turn on their audio before important audio segments, cues, or instructions.
When audio and video compete for the viewer's attention, provide cues that indicate which stimulus should have their attention.
Design Tips: Audio
Audio's main benefit is that it provides a separate sensory channel from the display. Use audio to offer commentary or help without obscuring information on the screen.
Use audio to provide a sense of place or mood (as done to perfection in the game MYST). Mood-setting audio should employ very quiet background sounds that do not compete with the main information for the audience's attention.
Use audio to demonstrate a piece of music.
Use audio to give a sense of a speaker's personality.
Use audio to teach the pronunciation of words (for example, see the Microsoft Wine Guide).
Use audio to inform your audience about background events such as the progress of a file download or the arrival of new information.
Repetitive audio samples are usually annoying to people. Use subtle variations.
For sound effects, low-tone sounds (such as woodwind instruments or the cello) may be more universally palatable than high-tone sounds.
It is worth investing in professional-quality sound production. For example, in separate studies of video games and for high-definition television (HDTV), people claimed improvements in the graphics or picture quality when only the sound quality improved.
Design Tips: Animation
Permanently moving (looping) animations should rarely be included on a Web page because they will make it very hard for your audience to concentrate on other page content. Research suggests that movement in our peripheral vision can dominate our attention. Research also indicates that moving text is harder to read than static text.
Use animation to draw the audience's attention to a single element out of several or to alert people to updated information.
Use animation to indicate the function of a hot spot (for example, a moving hiker could indicate the current location of Mungo Park adventurers).
Use animation to draw attention to changes from one state to another (for example, animated map area changes could indicate deforestation over time).
Use animation to demonstrate navigation in a particular direction (for example, a simple page-flip animation could easily distinguish forward from backward movement).
Use animation to create icons for actions that can't be adequately expressed with a flat, static picture. In one experiment, such icons increased the comprehension of a set of abstract toolbar actions from 62 percent to 100 percent (Ronald Baecker, Ian Small, Richard Mander, "Bringing Icons to Life," in Proceedings of ACM CHI'91 Conference on Human Factors in Computing Systems, Use of Familiar Things in the Design of Interfaces, pp. 1-6, 1991).
Jostled camera movements give the viewer a sense of precarious imbalance. Ticking clock-like sounds create a sense of urgency. Predominant use of red can indicate anger or tension. Tunnel vision and narrow or confining camera perspectives can create a good kind of claustrophobia (observations from the video game "Creature Shock" by Don Bluth).
Design Tips: Video
Use video to promote television shows, films, or other non-computer media that traditionally have used trailers in their advertising.
Use video to give your audience an impression of a speaker's personality. Focus on the head. Don't use long shots.
Use video to show things that move (for example, ballet, sports, demonstrations, and so forth).
Appropriate Depth and Breadth
Your audience will judge the utility of a site partly on whether it has the right amount of information to suit their needs. Your site should have enough breadth to be relevant to more than a niche audience. However, if the subject matter is too broad, the goal of the site may be unclear. Links, archives, or search engines can provide a balance between providing valuable content depth/breadth and providing so much information that your site is hard to use or understand.
Website Review: Appropriate Depth and Breadth
Will the site have the right amount of variety for the subject matter?
Will the articles be the right lengths?
Can people go into greater depth about topics if they desire?
Design Tips: Appropriate Depth and Breadth
Provide links to additional high-quality information in your articles or topics.
Link directly to relevant content. For example, when presenting information about Star Wars, link directly to the Cinemania article on Star Wars rather than to the Cinemania home page.
Add a consistent icon or motif to notify people when a link will take them off your site.
Provide enough content breadth to appeal to a non-niche audience.
Tailor search interfaces to the content domain. Present simple starting options. Prioritize and format results for easy scanning. Use query reformulation techniques to refine the search (for example, suggest related topics or offer to find "more like this").
Timely/Current Information
Obviously, timely information is more reliable and more interesting than stale information. Many sites do a poor job of communicating that their content is fresh and that they have a release schedule with specific exciting events.
Website Review: Timely/Current Information
Will the site feature the latest information available on the topic?
Does your site clearly indicate when and how-often content is updated?
Design Tips: Timely/Current Information
Use visual design cues to let people know that your information is timely. Include episode and article dates. Animations may reinforce the timeliness of dynamic content.
Tie content to current real-world events, such as movies, events, political elections, holidays, and so forth.
Highlight timely content on your site's home page. Don't count on people navigating to discover that you have fresh content.
Highlight fresh content in your promos to let people know you always have something new.
Notify people to visit your site for exciting future events.
Ease of Use
Goals
When you started thinking about your site, you probably had a few great ideas about what would hook people and make them want to return to your site. These high-priority features have to grab the viewer's attention as soon as they reach the site. By using design and written languages smartly, you can give your audience a set of goals that will lead them directly to your best content or help them experience your site in the way that you'd like it to be experienced.
Website Review: Goals
Are the goals and value propositions of the site immediately clear?
Will the basic steps to achieve the goal be clear from the start?
Are there clear indicators of progress toward the main goal?
Is there any danger that the use of metaphors, language, graphics, or sounds set an inappropriate expectation for the site?
Design Tips: Goals
Prioritize your content.
Boldly promote your most exciting content with size, color, animation, and/or screen position. Minimize less important content.
Promote topics, articles, guests, or features specifically and dynamically (for example, "This week, Jon Stamos on Freudianism in TVTalk"); as opposed to generically promoting a section of content (for example, "See stars in TVTalk").
Structure
A simple, clear structure and prominent in-site location feedback will enable your audience to easily navigate, greatly increasing your site's appeal. Icons, labels, metaphors, and other information may not be evident to the average person. Clarity on all levels is crucial.
Website Review: Structure
Will the design clearly communicate the site's core activities?
Will the terms (especially the site's title and sections) adequately communicate the consequences of selection or action?
Will the core activities require few actions to locate?
When appropriate, can each audience member control the pace of sequences (for example, skip or replay sequences)?
Design Tips: Structure
Organize your home page/site by creating clearly distinguishable areas. Chunk information into visual groups, based on topic or functional similarity from the audience's perspective (such as the navbar, the adventure area, and the ad area).
Use meaningful and consistent button names to label sections and content areas. Use distinguishing adjectives to label special versions of common Internet activities (for example, Kids Chat or News Chat).
Try not to overload your pages with navigation choices. People will stop reading options after they see 4-5 distinct choices. When people see a page, they immediately start trying to make sense of all their options. Grouping choices into functional units will reduce mental effort and help people quickly interpret your whole page. For example, with the appropriate layout people will quickly interpret a list of 12 adjectives (such as comedy, drama, western, and so on) as a single set of movie genres.
Content pages should contain one conceptual unit of content. In general, people prefer to scroll to continue a single unit of content like an article, skit, or short story, rather than click from page to page of an article. If people do need to click to continue an article, the word "continue" or a small right arrow () set into the context of the article have been effective. Don't visually separate article continuation buttons from the text body.
Most navigation pages should not scroll. However, a scrolling page should be used to contain a long list of navigation links that form a conceptual unit (for example, NFL team links).
Avoid labeling buttons "Back," "Next," or "More." It's best to name the actual content (for example, "To page 2" or "To Bob Bejan cover story").
Provide context for links whenever possible (for example, "To Bejan video clip, download = 50 seconds).
Distinguish between decorative and functional graphic elements (links). Use 3-D, layout, rollovers, and cursor changes.
Group navigation elements in a common space that people can easily distinguish from content. This will avoid confusion and reduce the effort required for people to find what they need.
Place navigation elements or navbars in a consistent and/or predictable location.
Provide a home base that is easy to locate.
Break text in mid-sentence and/or use visual design cues to keep people reading past "visual cliffs" or "below the fold" (for example, the bottom of a page).
Never make the viewer scroll to locate important navigation buttons or the focal point of a page (such as "Buy now").
Avoid page-load tricks that trap people in an endless loop when they try to use the back button to leave some part of your site.
Instructions and/or help should be presented in the context of completing tasks. Instructions and help should be task-focused rather than feature-focused, and use common language rather than computer jargon.
Use multiple choice to complete difficult tasks. Recognition is easier than recall (for example, The capital of Illinois is a. Chicago or b. Springfield).
Feedback
Going down any path involves uncertainty. It's important to have road signs along the way to let people know when they're on the right track and when they need to change paths. Uncertainty causes people to make bad decisions. Feedback through page headings, page-load or download delay warnings, and reminders about system status (for example, "there are 5 people in Chat A" or "Audio off"), will help keep people on track and feeling oriented.
Website Review: Feedback
Do page headings help people understand where they are located?
Will people be confused or frustrated by uncertainties regarding page-loading, audio loading, or download time?
Design Tips: Navigation Feedback
Use highly visible page headers to provide location feedback.
Visually distinguish major page sections.
Provide accurate plain-language error messages that focus on appropriate solutions.
Design Tips: Wait-time Feedback
There are not any widely accepted guidelines for how long computer users will wait for a page to load. Expectations about content quality, relevance, and action complexity affect willingness to wait for a sequence or page to load. A page that is just an intermediary step to another page should load fast. A page that is a "destination" can take longer. People will think that the system is slow if you violate their expectations, although their expectations may be naive or unrealistic. For example, people think that selecting an option from a menu should be fast. Searching through a database of 30 million terms should be slow. Let people know what to expect.
Warn people before long downloads. Attention may wander during delays as brief as 1 second. Delays of more than 10 seconds will almost certainly lead to attention loss.
Notify people during long page-loads or audio loads (see Retrospect 360, available on MSN). Provide download and page-load status indicators (for example, MSN Heartbeat).
Distract people with subtasks during long wait times to minimize frustration.
Loading elements in the background of some other task is a good strategy. However, people will want to skip through long background-load sequences on repeat visits to a location.
Give people a long download in snippets so that they can sample as the download occurs. This gives them control over the UI and provides the freedom for the audience to decide if they want to wait for the entire download.
Stated user wait times (the amount of time a user is willing to wait) for a software application download are around 8 minutes. The actual amount of time people are willing to wait is much lower. If faced with a lengthy software download, let them know how long (in minutes) and try to front-load the download as much as possible.
Promoting Content
Site designers seem to believe that their content will automatically draw the appropriate audience -- the "Field of Dreams Fallacy," if you build it, they will come. To be effective, promotional materials should communicate where the site is located, how often it is updated, and why it's relevant to the promotion viewer. Promotional material must also communicate the primary features, goals, or themes of the site. It has to convey an appealing attitude to its target audience.
Most sites have not done a good job of using their promotional spots to let people know that they have time-sensitive events and fresh content.
Website Review: Promoting Content
Will people know the name of the site when the promo is over?
Will the promo highlight tangible, valuable site content?
If the promo is dynamic, will people receive appropriate prompts to click the promo before it disappears?
Design Tips: Promoting Content
Identify your site's target audiences and emphasize the relevance of your site to each target audience.
Convey your site's basic attitude and primary activities (for example, Rifff on MSN lets you compose music along with celebrities, MINT helps you keep up on the freshest in pop culture, music, film, astrology, and so forth).
Advertise your site in related media (that is, advertise online guitar lessons in Guitar Magazine, on music Web sites, and so forth).
Use fresh promos for each update of your site that advertise events, or storylines and plots to generate tangible interest in your site.
Let people know what is coming soon on your site. They may not be able to get to this week's issue, but a good teaser might convince them to visit before missing next week's update.
Emphasize that sites are frequent and timely by referring to important dates and date-stamping the episode/promo with phrases like "in this week's episode..."Emphasize any celebrities associated with your site.
Consider using one distinct area of the page to promote new or timely content. This area should be distinguishable at a glance. Preferably this area will stay in the same prominent place but the look will change over time. Train people to look for new information in this location.
Encourage people to interact with your online ads by using audio encouragement, click here links, and rollover effects.
Distinguish promotional sites from actual sites (for example, distinguish the show.msn.com promotional site from the MSN Premiere site).
Made-for-the-Medium Content
Community
Community is feeling connected with other people. Communities provide a place to make new friends, stay in touch, learn about the world, show off skills, appreciate each other, and just have fun. Creating a community involves more than simply adding a chat or bulletin board to a site.
People have different social goals when online, and different spaces create different types of communities. Given all of these differences, it is unlikely that the generic solution of adding a BBS or chat room will foster a successful community. Tailor your site to support the type of community you want to foster.
"Nontraditional" community interfaces could include a high score list, a poll, or getting musical recommendations from others based on a clustering algorithm. At its most basic, community is about having people that share your interests nearby.
Website Review: Community
Will the site offer people the opportunity to feel like part of a community?
Does the interface support the social goals people will have while experiencing the site?
Will people be able to represent themselves to others in their preferred way?
Will people be able to express themselves freely (that is, safely and appropriately)?
Will people be able to find out about others easily?
Will the site give people something to talk about (for example, MSNBC has a daily chat about a specific news topic).
Will the site promote a sense of group identification?
Design Tips: Community
If you want to create a safe environment where people are encouraged to participate, you may want to "seed" conversations by introducing topics.
Have moderated conversations.
Organize different conversations into clearly labeled, mutually exclusive topics.
Have people fill out profiles and make these profiles easily discoverable.
Encourage people to send in pictures.
Make sure that people can tell each other apart.
Enable people to choose their own nicknames or avatars, but still be able to trace specific individuals.
Enable people to filter out annoying conversation.
Personalization
Rifff (available on MSN) enables a viewer to personalize the music that they hear as its being played. Similarly, MSNBC provides people with the news that interests them on their own personalized home page. The Internet is a medium that enables us to tailor our presentation to individuals, and we should take advantage of the opportunity.
Website Review: Personalization
Will the site respond to each person as an individual?
Will people be able to create and interact in a manner that is uniquely their own?
Will people be able to tailor the look and feel of the site to their own tastes?
Design Tips: Personalization
Enable people to highlight particular interests.
Enable people to make their environment feel unique.
Refer to audience members by name.
Enable people to speed up or automate frequent actions.
Make your site accessible to all computer users.
Infinite Refinement and Addition of Content
With certain exceptions (for example, George Lucas) directors rarely get to refine and re-release their movies. Likewise, it's difficult for all other entertainment media to refine and add to their presentation as time passes. Web sites are uniquely well suited to being organic knowledge repositories, communities, or works of art that can maintain great ideas and change over time.
Website Review: Infinite Refinement
Will the structure enable the addition of new information?
Will people know exactly when new information is available?
Will the site provide new content on an appropriate schedule?
Design Tips: Infinite Refinement
Use persistent article locations so people can access information via bookmarks, even after publishing new articles.
People may not think in terms of your site's structure when looking for information or content from past sites. It's probably best to organize archives by topic, author, and date. For example, people may not care whether you locate an article on Ted Turner in the Business or the World section. You'll have to determine which organizational scheme is most appropriate for your site. You may wish to provide several organizational mechanisms.
Provide links to relevant past content in current content.
Emotional Response
Challenge
Challenge is exciting and attention-getting. Everyone realizes that challenge is a common element of all games. It's harder to effectively apply challenge to an online magazine or an interactive music-maker. Magazines may use provocative, complex, or counter-intuitive writing to push their readers and keep them involved.
To be continually challenging but not threatening, sites can present new ideas and content in a relatively safe manner. The familiar setting of a bar, for example, is a safe environment for people to experience the different plot lines of Cheers. We know everyone will greet Norm with "Norm!" but we don't know what he'll say in return.
It's particularly difficult to provide an appropriate level of challenge for all of your audience members. Like chess, a good site should be easy enough to learn, but complex enough to keep people coming back.
Website Review: Challenge
Will the level of challenge found in the site's content be appropriate for the core audience?
Will people find new challenges as they gain experience?
Are there qualities in the site that are familiar to the viewer?
Are there qualities that are unique to this site?
Design Tips: Challenge
Accommodate a range of user goals, knowledge-levels and skill-levels.
Organize information logically (for example, from broad to narrow).
Enable users to change the rules or create their own challenges.
Use decoys, plot-twists, sub-themes, complex characters, puzzles, or different languages to increase the challenge level.
Plot
Plot is more than a pattern of events: it is the ordering of emotions. The author selects and organizes scenes to ascend toward a climax that maximizes the characters' and the audience's emotional reactions. Although humor is a great way to evoke emotion, research indicates that compelling stories, rather than jokes, bring people back to sitcoms.
Most shows have a three-act structure in which a conflict is set up and resolved. Clear turning points distinguish the setup and resolution from the second-act movement. Turning points typically change the direction of the story, provide clear opportunities for action and increase the complexity.
Website Review: Plot
Is the primary conflict set up immediately?
Can the viewer relate to the situation or conflict, either directly or indirectly?
Will the viewer suspend disbelief and accept the reality of the show?
Does the show propel the viewer forward through frequent "cliff-hangers?"
Is the show set in a place to which the viewer will want to return?
Design Tips: Plot
Write the user experience with the climax in mind. Select a conflict that people will understand (for example, the countryside is burning, a first date, someone's going bankrupt). The main conflict or crisis may be emotional or physical; it should not be intellectual. Then figure out the conflict's climax and resolution. Make sure that you can summarize the main story arc in one line.
Interest people with a strong and tangible event that establishes the primary character or conflict.
The story line must be coherent. The viewer should be able to create a plausible mental representation of the story's sequence of events and character motivations. Among other things, this will enable the viewer to suspend disbelief (interviews with Bob Bejan, MSN Executive Producer & Joey King, UW Professor). Create a coherent story line by linking scenes in a causal network. In a linear story, each scene will cause the next.
The viewer is prepared to believe the familiar in a plot. Familiarity adds believability and identification. Most people understand estranged relationships with an aunt, uncle, or parent as does the young hero of Star Wars.
Authors create challenge by leaving out details and letting the reader fill them in with personal knowledge or inferences. This decreases the overall coherence of the story. However, if the challenge is moderate the mental work will be a lot of fun. Myst is a good example; it uses implied characters and moderate ambiguity to create positive challenges and some anxiety.
Each scene should have a beginning, middle, and an end; it should be complete itself.
Each scene should advance the plot. Something is wrong with the structure if you can remove a scene without changing those that precede and follow it. Each scene should contain important information about one or more of the characters and help explain future scenes.
The writer should understand and convey the emotional impact of each scene (for example, wonder, awe, fear, pleasure, hate, boredom, and so on).
Define turning points clearly.
Foreshadowing creates suspense. Foreshadowing will establish viewer expectations that can tie together scenes and create movement through apparently disconnected content. For example, an online magazine can maintain a pace across different stories by referring all stories to a central theme.
Subplots also increase complexity and provide an opportunity to provide themes that may be compelling to other groups of people. For example, shoot-em-ups often contain a romantic subplot.
Games or jokes should be a part of the movement of the story (unlike most musicals).
Storytelling may need distance. Consider avoiding the temptation to be immediate and pedestrian (from the Washington Post article "Microsoft Online Travel Magazine Misses the Trail" by Marc Fisher, 1997).
Character Strength
Content becomes more tangible, relevant, meaningful, and engaging when it's communicated as part of the context of another person's life. Building and manipulating characters is one of the most common and effective ways to evoke emotion.
Website Review: Character Strength
Will people relate to the characters?
Are the lead and secondary characters both recognizable and distinguishable?
Are there strong relationships between the characters in the show?
Design Tips: Character Strength
When possible, give the viewer someone with whom they can build a relationship (for example, a host or a set of characters to follow).
Study contrasts between characters. Build distinguishable characters. For example, "Siskel and Ebert" are distinguishable in personality, physical appearance, and opinion.
People must respect hosts and narrators as talents in their field. The audience must relate to the host or narrator. They must think that the host's or narrator's perspective is similar to their own or relevant to their lives.
Each character should give the audience a different view of the story. Supporting characters may reveal a different take on the main conflict, theme, or primary character.
Use a subjective or first-person camera as appropriate to increase audience-protagonist identification.
Pace
Pace refers to the timing with which ideas unfold in the audience member's mind through written, audio, or animated scenes. Stories that unfold too slowly are boring. For example, the one-liners in Mystery Science Theater 3000 don't interfere with the forward progression of the movie.
Website Review: Pace
- Will the show move at a pace appropriate to the material and the target audience?
Design Tips: Pace
At some point, consider giving up control to the user. This can help ensure that the pace is right for everyone. At other times, it may be important for timing to remain in the author's control.
Eliminate irrelevant pages or content. All content should have a good reason to exist. Fluff will always kill the pace.
Use mid-sentence breaks to entice people to continue stories that scroll or flow over several pages.
Use recurring references or themes to maintain consistency or plot movement.
Use foreshadowing to establish viewer expectations; tie together scenes, articles, or sections; and create movement through loosely connected content.
Use a cliffhanger ending to bring the audience back for the next episode.
Movies and other mediums sometimes add to tension by delaying events that are both clearly expected and extremely exciting. These audiences are both captive, suggesting that it's less likely to work on the Internet unless people are certain that their wait will be rewarded.