Summary: The 1997 redesign of the Sun Microsystems' Web site aimed to improve the visual appearance, ease of navigation, and performance of the Web site.

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

Fast downloads are the single most important usability consideration in Web design. We recently surveyed 1854 users and found that the regression weight between "download speed" and overall satisfaction was 0.264 in a multiple regression to predict users' overall satisfaction ratings from six different attributes of Web quality. In comparison, "looks great" only got a regression weight of 0.08. Simplistically stated, our users thought that speed was more than three times as important than looks.

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

Sun's Web site is extremely large and has a very wide variety of content, including hardware and software product information ranging from complex electronics to mass-market Web authoring tools as well as financial information, job listings, news stories, events promotions, research projects, and much more. Each type of content has its own requirements, but our test users had been telling us that the resulting differences in appearance made the site look disorganized and more difficult to navigate under the old design.

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?

Only if you are running a large and heterogeneous site. Sun's website has a large amount of highly diverse content which is why we need elaborate navigation support and a strongly stated unifying visual look of the navigation 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

Sun's web site went live in January 1994 when there were only 700 other sites on the Web. Our first site ran on a "liberated" workstation and was pretty small. Now, only four years later, the Web has about 2,500 times as many sites, Sun's own site has grown to 22,000 pages, and we are on our third major user interface redesign. There is every reason to believe that the Web and our site will both continue to grow as we build the WebTone vision of a network economy. Truly, on the Web, the only constant is change, and it is important to design a scalable information architecture that can accommodate such change. A site that works perfectly as long as it stays the same will quickly die.