I still remember the first Web page I couldn't use. By "couldn't use" I mean that I couldn't figure out how to view any of the content. It was one of the earliest Shockwave pages; I think it pre-dated the adoption of Flash. The page had a big design, with four differently colored sections. I saw some things that looked like they might be links, but clicking on them didn't do anything. I think someone eventually helped me find the buttons that took me where I wanted to go. Sadly, they were the only things on the page that didn't look clickable.

Estimates vary for what percentage of browsers support technologies like JavaScript and Flash. Surveys have been done, but any Web-based surveys inevitably pre-select for users who are not deterred by technology limitations. Certainly, the majority of viewers can see Flash animations. Similarly, security concerns notwithstanding, most users seem to have enough JavaScript support to handle the profusion of objects swirling through today's Web pages. So the question of whether users can handle animated Web pages is less important than the question of why they should be forced to.

Web designers struggle to understand how they can use animation and interactive design to actually benefit users. In fact, there are some worthwhile ways to use technologies like JavaScript and Flash -- which makes it all the more unfortunate that they're so often used in ways that are just annoying. The question of when and where to use animation in Web pages is important, so I'll focus on that in this month's column.

In praise of the familiar

Too many Web designers believe that they have to stock their Web pages with JavaScript and Flash animation to make them lively and interactive. And they're right -- my pulse really races when I can't find the information I'm looking for on a Web page! But they can probably find better ways to get my attention.

One of the curses of the Web is that navigation seems to be permanently trapped between the two fixed categories of "unusable" and "boring." Users are most familiar with links denoted by underlined blue text, purple text for ones they've visited recently. Underlining text in one color for new links and another for old is also acceptable. Image maps can be tolerable (and some are even clever), but they can also make navigation harder for some users.

Navigation based on elaborate animation is almost always a challenge. When animation takes the place of a reliable, well-known set of visual cues, users have to expend energy figuring out what's going on with the Web page before they can begin to navigate it. In some cases doing so might be interesting, and even be fun, but it's not particularly functional. I get annoyed if the keyword I'm looking for isn't immediately visible until I move my mouse to just the right place on the page.

Some site designers intentionally turn navigation into a puzzle, inventing Easter egg hunts or mathematical puzzles that users must solve to navigate the site. (See Resources for an excellent example of puzzle-based navigation.) Designers should be aware, however, that navigation as a puzzle demands a major shift in thinking from the user. If the user is visiting a site that is game- or puzzle-oriented, then this type of navigation probably won't offend. If the page is intended to provide access to information it could.

Innovation in Web page design isn't necessarily a good idea. User interfaces benefit a lot from stability and consistency; users aren't just using your page, after all -- they're also using other pages. Even if your design is better, your page will ultimately stand out as weird and confusing if it's too different from other pages. In practice, your design won't really be better. Playing around with presentation can be fun for users and designers alike, but if I can't immediately find a link, click on it, and get to the page I want, then your design has failed.

Back to top

Is that optional?

It is not cool, not desirable, and, frankly, not sane for a page that has any purpose other than showing off cool Flash animation to require Flash. The same goes for pretty much any technology. If I follow a link to a product page only to find that I need some other technology to view the it, I start out frustrated, and it's not likely to get better from there. It doesn't matter that plug-ins are usually easy to come by. If I'm already frustrated, I'm probably not going to take the extra steps to download one. (In fact, my primary desktop lacks some of the common plug-ins. I have to switch machines to view many pages.)

The number of pages that require new (or newer) plug-in features to work is testimony to the false-consensus fallacy, where people perceive themselves as more representative than they are. It's easy for Web designers with high-speed connections and fully updated systems to be careless about establishing reasonable requirements for their pages to work. Better to spend at least part of your testing time using less common browsers, such as cell phones and PDAs, or old Windows installs with no plug-ins, then decide how you want to design your pages.

In addition to thinking about older Web browsers, it's important to consider cell phone and PDA browsers when you design Web pages. Even a user who has all the plug-ins on her primary Web browser might view your product pages on a less-equipped device. Another issue that designers often overlook is search engines. Search engines don't index graphically rendered text. If you actually want people to see your content you ought to provide it in a format that Web spiders can index.

Smart designers get around these issues by using features like Flash for functionality that isn't essential to view a page. If you design a section to present the technical specifications of a product, you should probably provide that content as plain text. Leave the animation for another section -- such as the one where you present a slide-show of product images.

Back to top

Content comes first

I think it's fair to say that some Web sites make their content hard to get just to cover up the fact that they didn't have much of content to start with. I've come away from more than one visually dazzling Web site (stacked menus that zoom in and out, layers and layers of highly detailed graphical texture) knowing only that, whatever the product for sale did, it was said to do it very well in a way that would surely increase my social popularity if I bought one.

Graphically intensive pages often omit trivial details like hardware specifications. Who cares about a computer monitor's resolution, or even what it would cost; just look at the lights flashing before your eyes and slowly type in your credit card number.

In reality, especially as users become more Web savvy, online sales don't work that way. The more information you put on a page, the easier it is for a customer to decide to buy your product. Putting less information on a page not only frustrates potential customers, it can also make you look bad. After several weeks of seeing ads about a particular product, a friend of mine finally posted a question about it to a mailing list: "What is this product, anyway?" None of the ads offered anything more specific than assurances that the product would change your life. Needless to say, my friend's post generated some laughs, and probably didn't do much for the product's sales.

Sometimes information isn't available for a reason. In the run-up to the release of a new gaming console, detailed specifications can be very hard to find, as can prices. Still, advertisement without information is annoying, and it shouldn't persist months after a product has been released.

Back to top

In conclusion

Well-designed Web sites use animation and dynamic content to draw users in, rather than to drive them away. With interactive elements, you can enhance a product overview. Animation can help users get a feel for what a product looks like and how it works. JavaScript elements actually can improve the navigation experience, rather than just complicate it. But none of these technologies is a good substitute for textual content and real information. In many cases, they're just an expensive substitute for a few well-chosen still images.

However you choose to employ dynamic content, don't go overboard with the plug-in requirements. It's popular to assert that the greater percentage of users can see Flash animation just fine, but what about the ones who can't? Most companies don't hire someone to stand in front of their storefront and insult two out of every 100 people who approached the door; why do it on a Web page?

This week's action item: Un-install a couple of your browser plug-ins and wander around the Web looking at the nearly featureless white boxes that result. Inspiring, isn't it?

Resources

Learn

• My not-so-invisible enemy (Peter Seebach, developerWorks, July 2005): In contrast to this month's topic, read as The cranky user explains the downsides of too much information on your Web pages.
  
  
• Rich Ajax slide shows with DHTML and XML (Jack Herrington, developerWorks, April 2006): Actually, slide-shows can be pretty effective for showcasing some kinds of content. Learn how to create one using Ajax technology.
  
  
• Considering Ajax, Part 1: Cut through the hype and Considering Ajax, Part 2: Change your life with mashups (Chris Laffra, developerWorks, May 2006): Consider the pros and cons of using Ajax for dynamic page development.
  
  
• Notpron: Try to solve a beautifully constructed Internet riddle. Good luck navigating the pages!
  
  
• Macromedia Flash and Shockwave Players: See Adobe's published numbers on Shockwave and Flash adoption rates for "Internet-connected PCs."
  
  
• The cranky user columns: Read any of the earlier articles in this column.
  
  
• developerWorks technical events and webcasts: Stay current with jam-packed technical sessions that shorten your learning curve, and improve the quality and results of your most difficult software projects.
  
  

Get products and technologies

• Free downloads and learning resources: Improve your work with articles, tutorials, and downloads from the developerWorks Web Architecture zone.
  
  

Discuss

• developerWorks blogs: Get involved in the developerWorks community!
  
  

About the author

Peter Seebach has been using computers for years and is gradually becoming acclimated. He still doesn't know why mice need to be cleaned so often, though.

Rate this article

Comments

Back to top

Table of contents

• In praise of the familiar
• Is that optional?
• Content comes first
• In conclusion
• Resources
• About the author
• Comments