useit.com sun.com redesign 1997 redesign

Sun Microsystem's 1997 Web Design

We had several goals for the 1997 redesign of Sun's Web site:

• Increase download speed.
• Facilitate navigation of our increasingly large site.
• Provide a unified visual appearance of our highly heterogeneous content.
• Make search available from every page; in particular, make search prominent on the home page. No matter how well one supports navigation, many users still want to search and you never know where they are when they decide to search.
• Ensure high usability and a quality user experience: we conducted user tests of several advanced Web design concepts but found that users preferred a simpler approach with established interaction principles.
• Replace our 1995 design which had become outdated (it is a testament to its quality that a design launched in May 1995 lasted more than two years: normally it is recommended to redesign a site every year).

Speed

Of course, we still wanted the design to look good. Not only is .08 a positive weight (meaning that good graphic design adds quality in its own right), but we also found that a great visual appearance made users think more highly of the site. Our polished visual design made our test users say things like you can tell that they have put a lot of thought into this site.

The balance between looks and speed was resolved by a design that utilizes plain-and-fast HTML (prettied up with style sheets) to define the basic features of the page. Visual enhancements like the Sun logo and other graphic elements will fill in more slowly the first time a user visits but will appear immediately if they are cached on the user's local system. We wanted to optimize the download speed for repeat users since our user surveys have shown that the overwhelming majority of page views are due to repeat users. In fact, a very large proportion of users visit daily or several times a week.

The figure shows Sun's new home page as it appears for a repeat user early in the download process (after about one second). The home page is fully rendered (with the exception of the current feature stories) after a download of only 8 kilobytes if the user has the logo and other permanent graphics cached. Human factors research has shown that Web pages need to download in no more than one second for optimal usability of hypertext navigation: we have succeeded in getting below this limit for users connecting at ISDN speed or better. Even modem users will get a working home page after about 3-4 seconds; while not optimal, this is still faster than the 10 seconds that are the limit where users divert their attention from a site. Fast downloads were indeed one of the main arguments given for including Sun in FORTUNE Magazine's list of top corporate Web sites in their Winter 1998 Technology Buyer's Guide.

Navigation Templates

To unify the appearance of our highly heterogeneous content, we decided to use a visually striking page template that could surround a wide range of page content with a uniform set of navigation options. Universal options appear across the top of the page where they will be prominent when the page loads; special options for the current part of the site appear down the side in a colored stripe that remains visible no matter how far down the user scrolls. The "flipped-L" navigation area is dominated by the company's logo color since our studies have shown that many users strongly identify this color with Sun.

Most Web sites follow a hierarchical information architecture, and such sites need to provide two kinds of navigational information to users:

Navigational Breadth:

Show users which other options are available at a given level of the hierarchy. Sun's new templates provide breadth at two levels: global and local. The very top level of the site structure is visualized across the top of the horizontal navigation bar, giving users a global indication of the total scope of content that's available to them. Local alternatives are listed down the side of the vertical navigation stripe. The user's current location is highlighted to provide a sense of place.

Navigational Depth:

Shows users where their current location fits within the structure of the site. Ideally, depth is visualized as a complete path from the home page down through all levels of the information architecture, revealing all the higher-level structures inside of which the current page is nested. On a large site, a full list of all the levels can become overwhelming, so, as a compromise, the new Sun templates provide an abbreviated view of navigational depth, with three levels shown at the top of the page. If the current page is more than three levels deep, then intermediate levels are elided to simplify the display.

Does Your Site Need a Similar Template?

Smaller sites can get away with a much simpler approach. The figure shows the navigation area from Toby Braun Information Design. It is obvious that the user is in the "visioning" part of the site, which again is a part of the "information" area. This design provides two levels of navigational depth as well as navigational breadth on both the global level (the four main areas of the site) and the local level (neighboring pages). Also note how the use of standard link colors make it very clear to users what parts of the site they have already seen.

Homogeneous sites can use simpler navigation that emphasizes one or two organizing principles for very large collections of pages. For example, news sites can use a time line to hide most older stories unless the user explicitly requests them. Also, by encoding richer attributes in XML, user-defined views can focus on pages of interest to individual users. For example, if all articles are encoded with an AUTHOR tag, it should be possible to automatically generate a list of all columns by, say, Jesse Berst, no matter what magazine they originally appeared in.

Plan for Growth