Webpage Design
Parts of this page, along with a handout by Charles Kelly, were used at a discussion at TESOL '00 in Vancouver, BC, Canada in March 2000. A report on this session can be read at http://www.siu.edu/~cesl/teachers/pd/prdr1.html.
More recent work: [ Teachers' projects ][ Tom Leverett's weblog ]
Linked Quotes about various subjects (2000)
GENERAL DESIGN
My estimate is that at least 90% of all commercial websites are overly difficult to use due to problems like:
- Bloated page design that takes forever to download.
- internally focused design that hypes products without giving any real info about them.
- Obscure site structures that either have no logic or are based on the company's org.chart.
- Lack of navigation support, making it very hard to find things when combined with an obscure structure.
- Narrative writing style optimized for print and linear reading; not for the way users read online (they don't; they scan).
Even though 90% of sites are bad, users don't spend 90% of their time at bad sites. People only visit a bad site once but become loyal users of the good sites. Thus, any individual user may spend 90% of his or her time at good sites and only 10% checking out bad sites. For example, Yahoo! is the most-visited site on the Web, partly because they have one of the fastest and most minimalist designs.
-Jakob Nielsen Alertbox
Here's a list of ten additional design elements that will increase the usability of virtually all sites:
1.Place your name and logo on every page and make the logo a link to the home page (except on the home page itself, where the logo should not be a link: never have a link that points right back to the current page).
2. Provide search if the site has more than 100 pages.
3. Write straightforward and simple headlines and page titles that clearly explain what the page is about and that will make sense when read out-of-context in a search engine results listing.
4. Structure the page to facilitate scanning and help users ignore large chunks of the page in a single glance: for example, use grouping and subheadings to break a long list into several smaller units.
5. Instead of cramming everything about a product or topic into a single, infinite page, use hypertext to structure the content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic. The goal is to allow users to avoid wasting time on those subtopics that don't concern them.
6. Use product photos, but avoid cluttered and bloated product family pages with lots of photos. Instead have a small photo on each of the individual product pages and link the photo to one or more bigger ones that show as much detail as users need.
This varies depending on type of product. Some products may even need zoomable or rotatable photos, but reserve all such advanced features for the secondary pages. The primary product page must be fast and should be limited to a thumbnail shot.
7. Use relevance-enhanced image reduction when preparing small photos and images: instead of simply resizing the original image to a tiny and unreadable thumbnail, zoom in on the most relevant detail and use a combination of cropping and resizing.
8. Use link titles to provide users with a preview of where each link will take them, before they have clicked on it.
9. Ensure that all important pages are accessible for users with disabilities, especially blind users.
10. Do the same as everybody else: if most big websites do something in a certain way, then follow along since users will expect things to work the same on your site. Remember Jakob's Law of the Web User Experience: users spend most of their time on other sites, so that's where they form their expectations for how the Web works.
Finally, always test your design with real users as a reality check. People do things in odd and unexpected ways, so even the most carefully planned project will learn from usability testing.
-Jakob Nielsen's Alertbox
Anything that is a great print design is likely to be a lousy web design. There are so many differences between the two media that it is necessary to take different design approaches to utilize the strengths of each medium and minimize its weaknesses. Print design is based on letting the eyes walk over the information, selectively looking at information objects and using spatial juxtaposition to make page elements enhance and explain each other. Web design functions by letting the hands move the information (by scrolling or clicking); information relationships are expressed temporally as part of an interaction and user movement.
With better hardware, differences in terms of appearance and layout may diminish. At the same time, more powerful software and a better understanding of interactive information objects will increase the differences in terms of interaction and user control. Current web designs are insufficiently interactive and have extremely poor use of multimedia. It is rare to see a web animation that has any goal besides annoying the user.
Print design is highly refined, as evidenced by glancing through the recent book of award-winning designs. Web design is impoverished because too many sites strive for the wrong standards of excellence that made sense in the print world but do not make sufficient advances in interactivity.
-Jakob Nielsen Alertbox
INTERNATIONAL CONSIDERATIONS
Different countries have different levels of Internet maturity:
-northern Europe and Australia/New Zealand are about a year behind the United States/Canada
-middle Europe and the Asian tigers are about two years behind
-southern Europe and the rest of the world are three or more years behind
Most countries are slightly behind the U.S. on the Internet maturity curve. This does not mean that all American sites are better than all overseas sites. On the contrary, most U.S. sites are worthless, exactly because the U.S. is ahead and thus has more companies online. It seems to be a law of nature that everybody makes the same mistakes the first time they launch a website, and many American companies continue to waste millions of dollars on bloated designs that contradict all available usability studies. Even so, many of these companies recognize the error of their ways after a few years of low hit rates and irate user email and redesign their sites to be faster and more useful. Thus, since the U.S. has more companies that have been on the Web for a long time, it also has more decent sites.
-Jakob Nielsen Alertbox
JAVASCRIPT ETC.
There is a strong correlation between too much garbage, er, sophisticated java and javascript and auto-launching sound files, and forgetting why a band's contact page might be online in the first place. Don't let this happen to you...It is worth remembering that the average person using a home modem is getting throughput of about 500-1000 bytes/sec, sometimes an order of magnitude less. As a practical matter, this means that if the sum total of everything that is automatically downloaded for your page: graphics, sounds, and text, is greater than 50KBytes, the odds that a person will actually wait for the entire download are minuscule. In-line graphics should be as light as possible. In some cases, it may make more sense to have a thumbnail that people can click to wait for the bigger, screen-size one. Note that in Europe and other parts of the world outside the United States, people are often paying for their phone connection, and possibly their online connection as well, by the minute.
-Ari Davidow's web tips
In general, if a special effect does not make your page more clear, or provide better access to information, it is getting in the way of whatever information your page was set up to provide. Eschew the tempation to show the world that you can clutter and waste user's time. -Ari Davidow's web tips
Never include page elements that move incessantly. Moving images have an overpowering effect on the human peripheral vision. A web page should not emulate Times Square in New York City in its constant attack on the human senses: give your user some peace and quiet to actually read the text! Of course, is simply evil. Enough said. -Jakob Nielsen's Alertbox
...there is too much animation that has no usability benefits to the user but is simply used to try to attract attention to something that is irrelevant (usually advertising banners). Users have realized this and are now avoiding design elements that move in the belief that they are probably useless. -Jakob Nielsen Alertbox
Many marketers are in denial of the plain-spoken message communicated by the data. They would like advertising to succeed on the Web just like it was successful in the old media they know how to deal with. So they keep running banners even though they don't work. I say, let's believe the data and move on. . -Jakob Nielsen's Alertbox
LINKROT
6% of the links on the Web are broken according to a recent survey by Terry Sullivan's All Things Web. Even worse, linkrot in May 1998 was double that found by a similar survey in August 1997...linkrot contributes to dissolving the very fabric of the Web: there is a looming danger that the Web will stop being an interconnected universal hypertext and turn into a set of isolated info-islands. Anything that reduces the prevalence and usefulness of cross-site linking is a direct attack on the founding principle of the Web. Any time one of your old URLs stop working, you are throwing away business. It is like refusing entry to a shop for anybody who is dressed in last year's fashion.
-Keep all old pages on your server forever (unless they are truly misleading and are replaced by an update)
-If moving pages, leave a redirect behind
-Jakob Nielsen Alertbox
More comments about design
MISC.
The Internet doubles every year and has done so ever since it was founded. Currently, the Web grows even faster (doubling every four months or so), though this higher growth rate will have to slow down eventually since the Web is a subset of the Internet and thus cannot outgrow it. In comparison, computers double in power approximately every 18 months, following Moore's Law.
-Jakob Nielsen Alertbox
I particularly encourage universities to conduct more research into Web use. Soon, it will be too late to study the transition from the pre-Web to the post-Web world. The control group of non-wired people will vanish. Hurry. . -Jakob Nielsen's Alertbox
photo (Spider Web) by Jim Leverett
[CESL] [ CESL Teachers' Page ] [ webpage design ]
Page made and maintained by
Thomas Leverett, CESL, SIUC
