Web site design

[Steve]

x-no-archive: yes

=======================

When Bad Design Elements Become the Standard  


(Jakob Nielsen's Alertbox: excerpts)---Web design is easy: If you are 
thinking about how to design a certain page element, all you have to 
do is to look at the twenty most-visited sites on the Internet and see 
how they do it.  

If 90% or more of the big sites do things in a single way, then this is 
the de-facto standard and you have to comply. Only deviate from a 
design standard if your alternative design has at least 100% higher 
measured usability. 

If 60-90% of the big sites do things in a single way, then this is a 
strong convention and you should comply unless your alternative 
design has at least 50% higher measured usability. 

If less than 60% of the big sites do things in a single way, then there 
are no dominant conventions yet and you are free to design in an 
alternative way. Even so, if there are a few options, each of which 
are used by at least 20% of big sites, you should limit yourself to 
choosing one of these reasonably well-known designs unless your 
alternative design has at least 25% higher measured usability than 
the best of the choices used by the big sites.  

Admittedly, the percentages in this list are my own best guesses. 
There is currently too little research on consistency theory to know 
exactly how many sites it takes for a certain design element to 
reach the level of a convention or a standard. Similarly, we don't 
know exactly how much it harms users to deviate from the two 
levels of expectations, though it is absolutely certain that it does 
hurt.  

Therefore, I recommend following the conventions even in those 
cases where a different design would be better if seen in isolation. 
The fact is, no website is seen in isolation: users come to your site 
expecting things to work the same way they are already used to.  

Of course, the truth is that web design is difficult, because the main 
issues concern information architecture and task flow, neither of 
which can be standardized. Both vary greatly from site to site 
because they relate to the specific nature of the information and the 
problems the site is trying to support.  

The mother of bad web design conventions is the decision to make 
hypertext links blue. Other colors would have been a better choice 
and would have increased the reading speed of the anchor text by a 
few percent. It is unfortunate to put the most important text on the 
page in a color that is known to reduce readability.  

If we were designing the Web from scratch, I would recommend 
using a different link color than blue. Since we are designing sites 
for the Web as it exists, I retain my recommendation to leave the 
standard link colors alone:  

Blue text means "click here" on the Web, so by keeping unvisited 
links blue, there is no doubt in users' minds as to what they can do. 
The time they save by knowing what to do on a page is probably 
much bigger than the time they lose by having the few words in the 
hypertext anchors be a few milliseconds slower to read. Even more 
important, knowing the difference between unvisited (blue) and 
previously visited (purple) links helps users understand the 
structure of the website and their own navigation history. On sites 
that change the colors, we often observe users revisiting the same 
pages again and again because they do not realize that they have 
already seen those pages. The added confusion, substantial 
navigation delays, and reduced probability of ever finding the right 
page are all very severe usability penalties from changing the 
default link colors.  

In the last two years, many sites have started placing a horizontal 
set of tabs across the top of the screen to indicate the main areas of 
their information architecture. In principle, this is a bad design and 
an abuse of the tab metaphor.  

Tabs are supposed to be used for rapid switching between 
alternative views of the same information object. For example, a site 
may have a standardized information architecture for product 
descriptions, with an overview page, a detailed specification, 
enlarged photos, and several other views. It would be very 
appropriate to use tabs to switch between the alternatives while 
retaining the main context and illusion of being at a single location 
on the site.  

Once users are deep inside a certain area of the site, tabs lose their 
meaning if they take users to another area of the site but do not 
preserve context in any meaningful ways. Such jumps are simply 
standardized navigation and should use a regular list of alternative 
links.  

I maintain that tabs would be better used for switching between 
alternative (but related) views than for navigating to unrelated 
locations. But unfortunately, users will soon lose any understanding 
they may have had of tabs as a special design element if more and 
more sites keep abusing tabs.  

I still think that less than 50% of sites use tabs in the (erroneous) 
meaning of navigating to the main sections of the site. Thus, I still 
think that the correct use of tabs is preferred and I recommend using 
different techniques to visualize the main areas of the site. But this 
may be a losing battle and I may have to revise this 
recommendation in a year or so if more and more sites adopt a 
misguided use of tabs.  

The "Yellow Fever" design style was introduced by CNET, and has 
since spread to so many sites that it has become a fairly strong 
convention: have a colored stripe down the left side of the page to 
contain the main navigation links.  

I have never been a great fan of this design approach because the 
colored navigation rail takes up about 20% of the pixels on the 
screen, even after the user has scrolled to the bottom of the page. 
Navigation is a secondary concern for users who are on the Web for 
the content.  

Interestingly, CNET itself abandoned the Yellow Fever in 1999 and 
now uses a design where the navigation links are concentrated on 
the top of the page, leaving the rest of the screen available for 
content.  

But there are still so many sites that use a colored navigation rail 
that I view it as an interaction convention: users know what to do 
with a colored stripe down the side of the page. It may waste pixels, 
but it probably helps users.  

Two things that are absolutely clear is that the navigation rail has to 
have some kind of colored background to set it aside from the 
content and that it has to be on the left side of the page. There are a 
few usability reasons why it would have been better to have the 
navigation rail on the right side of the page:  

Fitts' Law dictates that shorter mouse movements are better: it is 
always faster to click a target if it is closer to your starting position. 
Thus, placing the navigation rail next to the scroll bar will usually 
save users time over placing these two frequently-accessed areas 
on opposite sides of the window. Users always look at the content 
first when they encounter a new web page, so it would be better if 
the content started at the left border of the window (for users in 
cultures that read left-to-right). After the users are done with the 
content, their gaze could naturally shift to the right to decide where 
to go next. In contrast, placing the navigation rail to the left requires 
users to skip over it before they can start scanning the content area. 
 
If we were starting from scratch, we might improve the usability of a 
site by 1% or so by having a navigation rail on the right rather than 
on the left. But deviating from the standard would almost certainly 
impose a much bigger cost in terms of confusion and reduced ability 
to navigate smoothly.  

Many websites are starting to supply a breadcrumb trail across the 
top of the page to situate the current page relative to its parent 
nodes and to allow users to jump up several levels in a single click. 
 
Breadcrumb trails only work for sites with a hierarchical information 
architecture, but they do facilitate navigation in such sites. They 
would help even more if they were available on more sites so that 
users could get used to relying on them.  

There is no standard for how to indicate the progression between the 
levels of the hierarchy in a breadcrumb trail. My own site has used 
an arrow for the last four years. Before then I used a colon, as 
currently used by CNET. Yahoo and ZDNet both use a > sign, and 
yet other sites use a slash. There is no standard and there is no 
real reason to believe that any of these symbols is much better than 
the others.  

If a single symbol ever gained enough prominence to be used on 
more than 60% of the sites, then I would surely recommend using 
that. Right now, I would say that : > / and arrows are all equally 
good. But don't start using yet another symbol. For example, the 
vertical bar | is reserved for alternative choices and should not be 
used to indicate a progression.
* * * * * * * * * * * * * *  From the Listowner  * * * * * * * * * * * *
.	To unsubscribe from this list, send a message to:
majordomo at scn.org		In the body of the message, type:
unsubscribe scn
==== Messages posted on this list are also available on the web at: ====
* * * * * * *     http://www.scn.org/volunteers/scn-l/     * * * * * * *