Monica Okubo

In an effort to stay relevant in the ever-shifting internet landscape, Yahoo has redesigned their homepage with a focus on becoming your one-stop shop for keeping up to date on the content that interests you. Despite a few hiccoughs concerning the branding and interaction design, I can appreciate–but am not sold on–Yahoo’s strategy.

Yahoo’s Homepage Redesigned Yahoo aims to be your homepage by including content and updates from external partners such as Facebook and Wired.

The Good

What I respect most about Yahoo’s homepage redesign is not what they’ve created, but the fact that they did it. Given existing products such as iGoogle, and even My Yahoo, the idea of a customizable homepage is hardly novel. While the content doesn’t say anything new, the redesign speaks clearly. By choosing this direction for their homepage Yahoo is sending the message that they recognize the transformations that the web has undergone since they were at their prime, and instead of watching it pass them by they’re going to do something about it. Exactly what their ultimate plan is remains to be seen, but this redesign is a reminder that Yahoo isn’t about to give up.

That being said, the redesign reflects a gradual evolution of Yahoo’s strategy rather than a revolution. The changes they’ve made to the layout are subtle, but decisive.

• De-emphasizing search signals the shift in Yahoo’s approach. Although the new search bar is larger and positioned higher up on the page than the old one was, its placement next to the toned-down version of the logo makes it much less visually prominent.
• The clean design invites the eye to scan the content as each element on the page is given room to breathe. Since search is no longer the focus, the content below the header must be more engaging; the redesign accomplishes this goal. Although the old layout packed more information onto the homepage, the new layout uses space much more effectively since users are less likely to skip over the content.

The most significant change is the transformation of the left column into the My Favorites panel. Users can customize what content will be displayed here. The functionality for adding favorites is robust, but the interface for editing My Favorites stands out.

• Drag-and-drop is implemented elegantly in reordering your favorites. Upon hovering over an element that can be dragged, the cursor changes to indicate this attribute. When dragging a favorite to a new position the list of favorites is updated, reflecting the new order with a blank space representing the new position. In these ways the interface gives excellent user feedback and upholds the principles of direct manipulation.
• Deleting a favorite is a reversible action, thus preventing accidental deletions and unobtrusively encouraging the user to reconsider their decision. Rather than immediately removing the favorite from the list, it goes into a purgatory state and an “undo” link replaces the “delete” icon. The favorite will only be deleted when the user exits the Edit mode.

Editing My Favorites Users can reorder their favorites via drag-and-drop (left) and undo deletions (right).

The Bad

Yahoo generally possesses a strong user interface, but there are some gaffes concerning user interaction on the new homepage.

• The My Favorites panel unexpectedly transforms into a window in the Add and Edit modes. The list of favorites disappears and the panel disguises itself as a pop-up window (its width increases to cover other content on the page and it displays a “close window” icon in the upper right corner) upon entering these special modes. The transformation can be easily overlooked as there is no smooth transition between these states. This becomes especially problematic when the user clicks on the “Edit” or “Add” buttons on the bottom of the panel. The user experience is shaken because the buttons suddenly disappear along with the rest of the panel.
• The ambiguous button depicting an up arrow on the upper right corner of the tabbed news box is confusing. Its meaning is only clarified upon hovering over the element until the title attribute is displayed or after clicking on the button.

The major problems with the redesign lie within the weak image Yahoo is putting forth.

• The anemic header dilutes the brand. Upon first viewing the homepage I found the design rather generic due in large part to the header. Since Yahoo’s design aesthetic is very clean and typical of tech companies, the header is where its unique personality must shine. The purple logo fades into the background whereas the red logo from the old design drew your eye. Additionally, the logo is no longer of singular importance as the search bar rests on the same horizontal plane. Given another stylistic treatment this arrangement could be interpreted as equating search with the Yahoo brand, but since the header is so weak this association becomes a stretch. Yahoo looses its chance to send a clear message about who the company is.
• Yahoo’s lack of direction is evident in the redesign. Although they made the effort to redesign their homepage to show that they’re still in the game, they need to make a stronger argument for relevance in today’s web culture in order to grab people’s attention.

Final Thoughts

Yahoo’s redesigned homepage certainly has made a statement. Whether or not it is the message that they intended to send is up for debate, but even with a polished user interface it is evident that they are searching for a sense of direction.

The Mascot Saloon Museum in Skagway, Alaska has a great collection of artifacts from the early 1900s. Among them is this gem:

Aesthetics Over Readability

This box of washing powder is a prime example of aesthetics trumping readability. The layout of the product selling points on either side of the Citrus logo is ill-conceived, particularly the portion on the left. Due to a combination of unfortunate hyphenation, equal line spacing and illusory right alignment, the text can be interpreted upon first glance as “Pure Harm — Less Effective.”

This highlights the main problem: the copy isn’t easy to parse, thus hindering its effectiveness. Two obstacles to better readability are:

1. Each selling point isn’t easily identifiable as a distinct unit.
2. The hyphens can be mistaken for visual clutter.

Poor Typography at Work This text is difficult to parse and can be misinterpreted as “Pure Harm — Less Effective.”

Suggestions For Improvement

In order to increase the scanability and effectiveness of the copy while preserving the general layout, I suggest the following changes:

• Inserting bullets before each selling point and removing the decorative bullets at the end of each line
• Increasing the vertical space between each selling point
• Decreasing the line height within each selling point
• Aligning the truncated endings of the hyphenated words flush right with the hyphens

Last week indie fashion retailer ModCloth launched a fresh version of their site. Along with a new visual design, they added several features aimed to improve navigability and to build a stronger user community. While the redesign is generally an improvement over the old site, its implementation lacks polish.

Homepage Comparison A side-by-side comparison of the old (left) and new (right) homepages.

The Good

ModCloth has been successful in creating a strong following of fans. New features, such as product reviews, ratings and the “Love It” button, encourage shoppers to become more engaged in the experience of using the site.

• Reviews and ratings give shoppers an outlet to share their impressions of the products and to help prospective buyers make better informed decisions before committing to a purchase. Reviewers are prompted to report on the fit of the garment. As ModCloth carries products from many different brands and clothing sizes are not standardized, this feature becomes especially pertinent.
• The “Love It” button is a low friction way of letting others know that you like a product–think of it as casting a vote in a very informal popularity contest. For some, friend approval is important when shopping for clothes. A high number of lovers of a product is similar to a virtual shopping buddy approving of your pick.

In order to use these features you need to create an account. Although it will not convert everyone who visits the site, it makes creating an account more enticing than it was before the redesign. Since the ultimate goal is to turn visitors into customers, this is a strong step in the right direction.

ModCloth has also introduced features that facilitate browsing and interacting with the site–things that everyone can enjoy.

• Quick Look enables users to preview a product in a pop-up window without leaving the listing page. This feature is helpful to users who prefer not to/can’t open links in tabs or new browser windows, but who want to learn more about a product without leaving the listing page.
• New products are labeled as “New Today” or “New Yesterday”. Since new products are added almost every day, these labels serve as a helpful indicator to users who frequently visit the site. They also suggest to the user that ModCloth is a very dynamic company–a quality that is not easily conveyed by an online storefront.
• All size options for a product are visible on the product pages. If a size is sold out, the element representing that size is grayed out rather than not displayed at all. Listing all the sizes in which a garment was manufactured is helpful because sizing is relative. For instance, if Product A comes in sizes XS-L and Product B comes in S-XL, you would be able to determine approximately where you would fit in each product’s sizing scheme. However, if sizes that are sold out were not displayed, you would experience greater difficulty in purchasing the product you want.

The Bad

The redesign is not without its flaws. In terms of visual design, the old site was much more effective at communicating the brand and showcasing the products.

• The generic design weakens the brand. Personally, I did not care too much for the old site’s design, but it did have character. It gave off the impression that it was crafted by an enthusiastic shopkeeper rather than produced by an uninspired professional. While the new design is visually cleaner, it lacks originality and it looks like just another e-commerce storefront.
• Smaller product thumbnail photos on the listings pages make it more difficult to scan the page and to discover products of interest. The old site featured 3 products in a row as opposed to 5 on the redesigned site. Although the old layout made less economical use of space, my eye spent more time on each individual product because of the larger thumbnail size. Also, I experience less fatigue of attention from scanning 3 items in a row than I do with 5 items.

Listing Page Comparison The old layout (left) was easier to scan than the new one (right).

While the addition of certain features improves user engagement in the site, their rough implementation harms the user experience.

• The perceived high cost of writing a review may turn some would-be reviewers away. At first glance the review form is large and more complicated than it needs to be. In addition to rating the product, the user has the option to review the ModCloth’s service. Although it isn’t required to fill out these fields, there is little visual indication that this is the case. The required and non-required fields are mixed together with only an asterisk differentiating them. Additionally, there is the question of privacy when submitting a review. There is no setting in the “My Account” section to choose how your name/nickname will be displayed. Personally, I do not want people to be able to search for my name and find out what I think of X product.
• The terms used to describe “fit” leave room for ambiguity in the user reviews. The 5 options reviewers can choose from are: Very Large, Large, True to Size, Small and Very Small. With this range of fidelity, a graphic that plots the rated fit along a line (”Very Large” at one end, “Very Small” on the other) would be more helpful than a vague term that can be misinterpreted out of context.
• A poorly conceived information architecture is reflected in the header. The navbar of the site is adequate save for the inclusion and placement of the “My Account” link. Their old header made a clear visual distinction between “Content” links (e.g. Home, Blog) and “User Action” links (e.g. Account, Wishlist, Cart), while this concept is lost in the new header.

Header Comparison The old header (top) separates “User Action” links from “Content” links better than the new header (bottom).

Final Thoughts

Overall, I enjoy the new ModCloth. It is not the best e-commerce site I’ve visited, but it is definitely an improvement over the old site in terms of engaging user’s attention and improving their interaction with the site.