Evolution of the Home Page Design for the 1995 Sun Microsystems' Website

by Jakob Nielsen on May 25, 1995

Summary: The Sun Microsystems' 1995 Web site redesign effort included at least 15 different designs for the home page. Usability testing and iterative design were used to optimize the layout and content to match user needs.


Part of article about the design of Sun's website in 1995.

 

Miniatures of nine home page designs

We went through at least 15 different designs for the home page. This figure shows the major variations. Most, but not all, of these designs were subjected to usability testing . Each page miniature has a larger image and a detailed description below.

Please note that none of these pages are active: they are just screendumps at this stage.

Version A

Version A Screenshot

Version A was our first attempt at a magazine-style home page. Unfortunately, users did not understand that the page represented Sun's corporate home page. Instead, they wondered whether it was Adobe's page, whether it was associated with an independent magazine, or whether it was associated with the SunWorld tradeshow. Most users said that their initial impression of the page was that it was "very busy," "complicated," and that it was hard to know where to look first.

Even though the month name was beautifully designed, the users did not notice it, thus depriving us of one of the most powerful benefits of the magazine design: the notion of time-dependent information that will be different next month. When the month was pointed out to users, they liked it but worried how they would be able to access the cover story next month. As a result, we added a "back issues" feature in subsequent designs. After all, it is one of the benefits of online publishing that one can easily "ship" all older issues together with the current one (just try that in paper publishing!).

The users liked the "Entertainment for Propellerheads" motto, but we decided to remove it in order to enhance the credibility of the information. Humor is appreciated in webdesign, but maybe not in that prominent a position. The users did not like too many frivolous design elements, though. All users were very adamant in preferring technical specifications and detailed information over slogans and what was derisively referred to as "marketing fluff." Instead of saying "this is the fastest in the industry," say how fast it is.

Users did not understand that they could click on the lead paragraph to get more information about the Adobe story. The design had no affordance for clickability. The same was true for the Weekly Update bar and the three bullet items. Many users did not understand that they were clickable.

The users liked the use of graduated colors in the headers and the consistent color scheme for most of the home page. Some users commented that the very colorful and striking Adobe photo was too harsh in comparison and that it seemed to clash with the color scheme used in the rest of the page "it is like having two different designs on the same screen" as one user put it. 

Version B

The month name was now more prominent and was seen by the users. Also, they understood that "News and Commentary" was clickable. Adding the blue {MORE} button to the lead paragraph made it very clear to the users that there was more information and that they could click on the button to get to it.

Users still often misunderstood the status of this page, believing that it was a page about Adobe and not Sun's home page. Based on this observation, we decided to make the Sun logo much more prominent on all subsequent designs. The downside of our new design with a new cover story every month is that the cover story easily takes over from the "Sun" identity and dominates the page.

Users generally liked the design and particularly praised the use of a dominating purple color to frame the page. Terms used to describe the page included "pretty," "nice looking," "looks professional" (the user contrasted this page with "much on the Web looks like something people put together in a night"), "very professional part of the corporate persona," "cohesive presence," and "a very macho home page." Users liked that they were not inundated with a lot of choices that they had to read through (one user referred to the design as "not very crowded - more like a hub with spikes and a central message"). Confirming results from previous studies, many users were highly appreciative of the fact that the page would fit on a single screen.

Compared with Version A, some usability problems had been fixed: users easily discovered the month name (and they all liked the fact that the page was dated), they understood that they could get more information about the lead story by clicking on {MORE}, and they also easily found the search feature (many users appreciated the easy access to search). Furthermore, more users understood that they could click on the individual stories under News & Commentary for more information, but most users still were attracted to clicking on the News & Commentary bar before clicking on the individual stories. A few users thought that they could only click on the News & Commentary bar and that the individual stories were not clickable, leading us to increase the clickability affordance of the stories in subsequent designs (we finally ended up including blue keywords in each story to indicate their hypertext nature). 

Version C

This page was our most refined design in the "SunWorld" series. We had made the Sun logo larger but still had problems with users' understanding of the status of the page compared with other things called SunWorld. In subsequent iterations, we decided to get rid of the name and have a nameless home page dominated by the Sun logo and the changing cover story.

Users liked the graduated map on top of this design, but since we were getting rid of the "SunWorld" name for the home page, it did not make sense to have a world map as its graphic identity, so the map was removed in subsequent iterations.

 

Version D

This design succeeded in making the Sun logo prominent, thus addressing some of the usability problems identified in the tests with the initial "SunWorld" series of designs. Unfortunately, this design looked too much too like a series of boxes without the feeling of being a unified single thing for users to look at. On the contrary, this design overwhelmed the users with buttons, thus violating one of our usability findings: that users did not want to have too many options thrown at them.

The different kinds of information were shown by different graphic conventions, but the use of the same style arrow buttons for all options made the interface look less prioritized and more like a "laundry list interface" in last year's homepage style: in 1994 it was considered good style the more options you could give the users because not that many things were available on the WWW. In 1995, the preferred design style is one that prioritizes the information space and recognizes that the users have severely limited time to spend on any individual site.

Actually, our final design  has as many buttons as this one, but they are differentiated and prioritized, meaning that the user's initial impression is that of a much more orderly and less intimidating interface.

Version E

This was the first design produced after we had chosen the final cover story for the rollout of the new design: Sun's new Java technology. The previous iterations had all used a story about the use of PhotoShop on Sun workstations because we had a nice cover illustration available for that story from the advertising campaign.

For the HotJava story, we needed a cover illustration and as an initial placeholder we picked the project mascot, "Duke." The test users did not like this illustration, though. Duke was designed to be shown as a rather small figure and did not communicate "advanced new technology" when he was enlarged.

This was our first design with real icons for the various buttons. Notice how some of the icons are larger and more colorful than others to indicate a prioritzation of the information. As always, some of the initial icons turned out not to work very well when they were tested . Here are some of the user comments:

  • Sun on the Net icon: a punctured balloon, a snowman, a talking collapsing world, or an idea coming out of a globe.
  • What's happening icon: a parade, "people at a Sun launch" (pretty close), and an "intensely ugly logo with people in front of it." We decided to simply remove this icon from subsequent designs.
  • Sales and Service icon: gas station, diner, public restroom, store to buy Sun equipment (very close to the intended meaning), and "fast food."
  • Technology and Developers icon: "thunder and lightening," "electric - looks painful," "person being killed by technology," "dance machine," and "why do Sun developers look bug-eyed?"

Version F

This design introduced the use of a coffee cup as the cover illustration for our cover story about HotJava. The page layout was chosen to enable us to replace the cover story every month and just plug in a new lead paragraph and a new cover illustration without having to change the user interface or the main interaction elements on the page.

To make the page look simpler, we got rid of the explicit button boxes around the three secondary stories under What's happening, and it turned out that the use of the bullets and the blue keywords was sufficient to indicate hypertext clickability to the users. Unfortunately, users now did not understand that they could click on "What's happening" itself to get to a longer list of news items.

The main goal of this design iteration was to try out ways of making the design look simpler, more unified, and more approachable. We were running on a very tight development schedule with user tests every second day, so we did not have time to redesign the icons for this iteration. We did try a new globe icon for "Sun on the Net" but it did not work very well. We finally decided that a globe had to be round!

 

Version G

Adding the little triangle to the What's happening bar really made a difference with respect to clickability. In the previous design, users never clicked on the bar, and now they did so quite often. This version made the triangle look a little too much like something sitting on top of the button rather than as a control element engraved into the button, so we changed the triangle a little in the next two designs to make it look more like the label on a physical button.

By now, we were almost there. We still had a little trouble with the Technology and Developers icon, with people complaining that the thunderbolt looked too much like lightning striking the machinery and destroying it. We finally decided to get rid of the references to electricity and in the next design we represented the concept of development by a CD-ROM. We also had trouble with the building on the Corporate Overview icon: some people still thought that the stock chart line looked like Sun's corporate headquarters was suffering earthquake damage, and others thought it was a fever chart. We decided to simplify the icon and stay with the concept of the headquarters building without any embellishments.

We had made the globe icon round, but our attempt to make a literal world to represent the concept of world-wide computer networking was still not fully successful: about half the users did recognize the icon as the world but the rest referred to our globe as an astronaut in a space suit, an olive, and "a golfer trying to hack his way out of the rough," so given the small size of the world icon, we decided to use a much more stylized design for the final icon in the next iteration.

The flaming coffee cup seen here was just a placeholder drawn over the weekend and we replaced it with a more polished illustration in the final iterations.

 

Version H

We now had our final design, except that the triangle on the What's happening button was a tiny bit too dark to really look engraved. Also, our first professionally illustrated coffee cup looked too much like a nuclear explosion, so we had it remade to look more like an eruption of cappuccino foam and less like a mushroom cloud.

We also removed the graduated colors around the coffee cup to make the image smaller and thus faster to load (large monochrome areas of a picture compress better). Some polishing of the graphic design resulted in slightly lighter tones of purple to make the image look better on monitors with highly saturated color representations. We also made the trademark symbol for HotJava smaller than the default size in our chosen font.

 

Version I

At last: the perfect home page :-)

Actually, of course, the page is not perfect. User tests in several different countries have all shown the same problem: people have difficulties interacting with hyperlinks on imagemaps because there is no indication about what is clickable and because they don't get "breadcrumbs" on the links they have already seen (in text-based links, the underline turns from blue to purple when a link anchor points to a page the user has already visited). The Java version of the home page addresses the first of these problems by highlighting clickable areas when the user moves the cursor over them. We currently don't have a solution to the lack of breadcrumbs in imagemaps though they should be fairly easy to implement in Java.

 

 


Share this article: Twitter | LinkedIn | Google+ | Email