Brief review of the new Yahoo web site

Yahoo made a layout change again, so let's take a look of the design decisions they've made. In this brief review I want to explain the advantages and disadvantages of the new version from my point of view. You are free to make your own opinion.

The following screenshots will settle the context:

Yahoo before/after
Figure 1: The old vs. the new version of the Yahoo website

Yahoo popups
Figure 2: Sample interactions on the new Yahoo website

Observations

We notice that the left menu became wider and its icons now are more prominent. The search engine was emphasized through the applied contour. The header height decreased, which increased the viewable area. The tabs at the top of the middle column have been omitted in favor of the news, which are supported by bigger corresponding images. The news tab below, shows more links; the line spacing has been increased, improving legibility. Below the search engine, you see a small avatar and the message "Hi, [your name]", making the relationship more personal. These are all nice improvements.

The new logo has a high contrast in relation to the background, so it easily grabs the user attention. The purple color was reserved only for the logo and the horizontal line, making them even more dominant. The line could have been lighter on the eyes since it serves only a decorative purpose. On the right, below the search engine you have the option to change the color schemes or the layout. This flexibility isn't necessary good, as it burdens the user with multiple alternatives to choose from, effectively distracting him from the reason why he came to the site.

Use

When we mouse over some items in the left menu, a large overlay appears, covering a high percentage of the website and making it inaccessible. The only way to close it, is to use the close button, located far on the right from your initial position. But when we close it, we can easily activate it again—accidentally. The left side of figure 2 shows this situation. The overlay to some menu items was only half full of content, wasting some screen space. There is also another overlay, indicated on the right side of figure 2, which is activated when you click on the "Add" tab near "My favorites" under the purple horizontal line. Again—big portion of the screen remains hidden. If we don't see the close button on the right, we can mistake the overlay for being part of the web page—there is no other visual cue that an overlay has been activated. If this happens, you may think that the red button will close the bigger of the two columns on the page, which is confusing.

Conclusion

The new Yahoo website has a very clean and modern design, but the user interaction is awkward. Dynamically generating overlays through client-server interaction is slow and affects the accessibility of the information—both on the overlay and underneath it. A better solution would have been to load another page, showing users all the options they currently have, but this will require a change in the information architecture.

bit.ly/XvOmvG