Category list

Make Videos for the Web

Pundits make much of the "convergence" of media, and the fact that people are increasingly using their computers as media centers. There are still significant differences between broadcast media and the Webmost significantly that the Web is interactive, and people want to be in control and move around it.

Make sure to produce and edit videos so they're tailored for online use. Since users dislike sitting through long video clips on the Web, break them up into small, compelling segments. Videos made for broadcast tend to be too long and can contain too many distracting visuals for small computer screens.

People don't sit passively in front of their computers, as they would in front of a television set; they want to click on things and drive their experiences. Most audio and video clips should be less than a minute long; very rarely should they last more than five minutes. The data from our eye-tracking study shows that even after a short 24 seconds, people's attention is diverted to other elements, especially if the subject is boring. For example, on a news site, people's eyes rested on the news anchor for a short time, but then wandered to mundane objects in the background, such as the trashcan or stop sign. Even more interesting, people's attention focused outside the video window on elements such as alternative headlines and options.

Tip: When to Take a Commercial Break

If your videos have commercials, it's better to play them after the primary clip than before. When commercials play before the main clip, people wonder if they've selected the wrong thing, or if the Web site is buggy . If you must play a commercial first, make sure to indicate this clearly, or users may close down your video before seeing the real content.

Eye-tracking diagram of a user watching a video clip on CNN. Red indicates the parts of the screen that were viewed the most; yellow and blue indicate areas that were viewed less. Even though the user only watched this video clip for 24 seconds, his attention soon drifted from the person being interviewed to other things.

www.cnn.com

The Practice of Simplicity

Throughout this book, we've been evangelizing simplicity, but ironically, the practice of simplicity is not at all simple. It's easy to build a bulky design by adding layer upon layer of navigation and features; it's much more difficult to create simple, graceful designs. Paring designs to essential elements while maintaining elegance and functionality requires courage and discipline.

Take interior decorating, for example. Why are some rooms more inviting than others? An amateur decorator might pack a living room with a jumble of furniture styles, patterns, and textures in a misguided attempt to dazzle . In contrast, skilled designers carefully select items that support their clients ' needs, ruthlessly eliminating those elements that do not serve a real purpose. If an element doesn't complement the fundamental plan, it dilutes the impact of the room's decor.

The animation on this site interferes with its content. The tumbling man in the upper left distracts people from the content they came to the site to get. One user commented:

"I like these icons but they can be a bit too much you get fed up seeing them come up all the time. The images and graphics are fine for a while, but then you want to get on with it, without the interference of the chap tumbling over."

www.nestle.com

It's the same with Web sites. Good designers get the maximum use out of limited space (both screen space and bandwidth) by paring down the interaction to the essentials. Gratuitous effects, graphics, and pictures take away from the important elements you want to display on your site. When everything is flashing and screaming for attention, nothing gets it.

Take a good, critical look at your site. See if you find any extraneous design elements that are cluttering it up. Make every effort to simplify the interactions on your site. Is there a slick or fancy feature that's more difficult to use than a simple static one? Every icon, picture, graphic, and animation should serve a purpose and communicate something meaningful. Before adding design elements to your site, ask yourself:

Does this element simplify the user's task?
Does this element add value to the user?

If the answer is "no," eliminate it.

What does this picture of a sunflower have to do with corporate responsibility (not to mention its size and download time)? This useless photograph takes up prime screen real estate. People don't mind waiting a little longer for useful information, but they resent waiting for something meaningless. Use photographs to augment content, not to decorate the page.

www.bms.com

Before adding a design element to your site, ask yourself: Does it simplify the user's task? Does it add value to the user? If the answer is "no",eliminate it.

Look at the two versions of the navigational menu on the Tiffany & Co. Web site. In the first design, the translucent menu opens on top of the image, making the menu extremely difficult to read. The second design is an improvement because the text is darker and doesn't compete with the background. While the first design appears elegant, it's too difficult to read and alienates customers. The second design balances aesthetics with usability. The menu is more legible yet maintains the site's elegance.

An earlier version of the Tiffany & Co. Web site used transparent menus , which looked interesting but were difficult to read.

www.tiffany.com

Since our study, Tiffany.com improved the navigational menu design without compromising aesthetics.

www.tiffany.com

Improving Your Site: Sooner or Later?

This book contains many examples of designs that failed our user testing and have since been replaced by better designs. Hopefully, by the time you read the book, many more sites will have been updated to take advantage of our free consulting advice.

Sometimes, when you see the revised, improved design, you may say, "That's obviously the way to go" and discount the usability insight behind it. However, the better design was not obvious from the get-go, as proven by the fact that even rich companies with fat Web budgets may feature bad sites that hurt their business for years .

To a large extent, usability equals simplicity, which again implies that usability improvements are obvious. One of the big points we hope to drive home is that easy-to-use sites don't happen by themselves . You must employ usability methodology and test with your target users. We discovered all these usability problems through quick, cheap studies. Each company could have done so on its own instead of waiting until it had suffered lost traffic and floods of customer complaints.

Usability defects will surface sooner or later: The main issue is whether you discover them early in your project, before you have wasted untold time and money implementing a bad design. Sooner is betterand cheaper too.

Now let's look at two approaches to map design, the first interactive and the second one not. The interactive map shows the locations of restaurants in the city. Moving the cursor over each orange ball reveals the restaurant name , and clicking it shows the restaurant details. Simple, right? Actually, no. If you were not familiar with the restaurants in this city, you would have to click on each ball to find out about them. Click on a ball, back out, click on another ball, back outwhew!

The second map is easier to use. It reveals information about each establishment without forcing people to work harder than they have to. The map gives people the most relevant information at a glance without requiring any clicks. While the first map might seem slicker, it's not as functional as the simpler one.

Three Tips: Simplify. Simplify. Simplify.

Include only the features that will help people simplify their tasks . When interactions are too complex, people often can't find the information they need and can't benefit from the site. Complex interactions increase both learning time and the likelihood that people will be bewildered. It's better to have a few helpful features rather than many unhelpful ones.

{% if main.adsdop %}{% include 'adsenceinline.tpl' %}{% endif %}

This interactive map probably required more time and resources to create than a static map would, but it is less useable.

http://surfcityusa.com

This low-tech design serves its purpose, giving people relevant information quickly and easily.

www.flagshipresearch.com

Developing fewer features allows you to conserve development resources and spend more time refining those features that users really need. Fewer features mean fewer things to confuse users, less risk of user errors, less description and documentation, and therefore simpler Help content. Removing any one feature automatically increases the usability of the remaining ones.

In one study, we asked participants to use the Sydney Opera House Web site to locate a particular restaurant. Most people tried finding the answer using the Virtual Tour because it was the most prominent element on the site.

The robust feature allowed people to do advanced things such as:

Move arrows around to view the building from various vantage points
Watch balls shoot up and reveal the names of the locations
Reveal more icons and photographs of the building
Listen to sound effects resonate as different things are clicked

This Virtual Tour contained a lot of useful information. Most people couldn't figure out how it worked, however, and so they never saw much of the content. In addition, it was slow to load, had progressive disclosure, and the sound effects impeded people's progress. Users want direct answers when seeking information; feature-rich applications often hamper users because the interactions tend to be circuitous.

Here are some of the comments from our test users about this instance of fancy design:

"This ball shooting up is annoying.…I'm trying to figure out if any one of these balls indicates the Playhouse.…It took me a while to find the Playhouse."

"I didn't notice the little arrow. What am I supposed to do with that? I don't get what that is."

"I don't really want to do this grand tour. It takes a lot of time. You get all of this stuff coming up: music, introsomething I would rather not go through."

"Constructing maps and loading panoramasthis is more information than I would want to have. I don't need the architectural drawings. I just want to see where the restaurant is relative to the Opera House. I wish I had a list on here that showed the entities within the Sydney Opera House, like where I can find a restaurant, but I don't see it. I like the panorama view but I don't need that right now. I wish they had Search, so I could type in 'playhouse' and it would show me the Playhouse rather than bouncing around the entire multilevel Opera House."

"It's rather distracting, this 3D thing. It's a little overkill. This is like the USS Enterprise. If you've never been on it, you wouldn't know where to begin. It's pretty and dynamic, but how helpful is it?"

When you find users comparing your user interface to that of the Star Trek spaceship, it's usually not a good sign.

This virtual tour might be enjoyable for a few people who have a lot of spare time and curiosity , and want a challenge. However, for most visitors who need general information about the Sydney Opera House, this application is excessive. People didn't like having to hover their mouse over yellow balls in order to get basic information such as location names. Many people didn't notice or understand the myriad of icons such as the yellow arrow (shown here in the central corridor on the lower map) and the "i" (here superimposed on the upper photo).

www.sydneyoperahouse.com

People were more successful at finding locations on a well-labeled static map than on a complex interactive one. The simple sketch has enough detail to give people context and orientation. Having the main areas labeled helps them make associations and understand the layout of the facility.

www.sydneyoperahouse.com

(Facing page, top) This is the first of two splash pages on the Wynn Las Vegas Web site. Not only is this two-step entry process time consuming, the options on this page are based on the company's priorities, and not on the end users'. The first things people want is to find information about this hotel, not Buy Tickets or Book Now. Asking people to Buy Tickets and Book Now is premature. In addition, these terms are vague and have overlapping meanings in this context. At this stage, viewers might wonder what they are booking and buying tickets are for.

www.wynnlasvegas.com

(Facing page, bottom) This is the first of two splash pages for the Wynn Las Vegas Web site. Not only is this two-step entry process time-consuming , the options on this page are based on the company's priorities, and not the end users'. The homepage slowly loads with audio of Steve Wynn saying, "Unlike other Web sites, we filled it with surprises. Have fun, go find the surprises , and enjoy." People trying to compare hotels and book reservations don't want to find surprises, the want information quickly.