Yahoo! Design Patterns and Yahoo! News

My mentor, Diane Deseta at UXMentors assigned me an exercise to examine how Yahoo! implements their  Yahoo's design pattern library throughout their site.  This is one of several posts drawn from that assignment.

The exercise brought to light how complicated it is to follow conventions when there are competing motivations behind a page.  In several instances, the patterns were ignored.  Whether these divergences were created by or inherited by the recently fired SVP for User Experience Design Tim  Parsey is impossible to know, the end result left my brow furrowed.

---------

Example studied: http://news.yahoo.com/vote-gay-youth-scouts-face-more-turmoil-203143778.html 

Navigation Tabs - APPLIED WHERE CONVENIENT - The use of navigation tabs is to provide a clear way for the user to see where they are (in this case - in the Yahoo! News section) and easily determine how to get to other parts of the site. 

The place where this convention is ignored is the number of tabs.  The design pattern explicitly says no more than 10 tabs should be used though 13 appear here.  

Why violate the pattern? I’m guessing there are 13 individuals who have titles that correspond to curating the sections delineated by those tabs.  

The solution to this would seem pretty clear cut - merge a couple of the tabs.  Science/Health/Technology seem good candidates, and "local" and "popular" don't even seem to be the same kind of label, thereby further diluting the power of the convention.  Even the example given in the design pattern shows a different implementation from the one being used on the live site.

Here’s the example given with the design patterns:

Here’s the live page:

I'm guessing the people responsible for curating the site have louder voices than those who compile the design patterns.

Page Grids - FOLLOWED - The layout of the page uses the large column on the left and a thinner column on the right (the first pattern shown among the four preferred layouts):

The pattern encourages the use of these grids because:

·       Templates reduce designers' preparation time and let them focus more on the site's content and features.

·       Consistency across pages and page elements contributes to a cohesive brand and user experience.

·       A common source code offers a number benefits:

o   Reduces the number of subtle or major variations in the page layout.

o   Expedites development and global page updates.

The code for the page shows that a CSS and HTML template was indeed used to lay out the page...these templates are likely populated by the CMS used for news items (which, themselves, are also likely auto-populated by content providers (in this case AP)

Yahoo! Design Patterns and Shopping; Search results pages

My mentor, Diane Deseta at UXMentors assigned me an exercise to examine how Yahoo! implements their  Yahoo's design pattern library throughout their site.  This is one of several posts drawn from that assignment.

The exercise brought to light how complicated it is to follow conventions when there are competing motivations behind a page.  In several instances, the patterns were ignored.  Whether these divergences were created by or inherited by the recently fired SVP for User Experience Design Tim  Parsey is impossible to know, the end result left my brow furrowed.

---------

Yahoo! Shopping page examined: http://tinyurl.com/kbahrvc

Rating an Object - UNCLEAR - The mechanism for rating an object follows the conventions of the design pattern, but one "consideration" appears unconsidered (or, if addressed, was decided against ease of use).  

The pattern states "Consideration should be made about the call to action for a rating if a user is not logged in." and while I can't know IF consideration was actually made, the result was that if someone goes to rate the item, and they are not logged in, they are yanked from their current page and forced to log in.

The stated purpose of the star rating device is allow a user to quickly leave their opinion...but forced log-in defeats that purpose.  Perhaps greying out the stars (or a tool-tip saying ratings can only be left when logged in) could help achieve both goals, but that doesn't happen.  

This may have been accidentally overlooked, or perhaps done to use this function to encourage people to log in so buying behavior can be tracked...but it discourages user input in favor of potentially gathering better data.  Since that purchasing data can be valuable, I expect the decision was made to force log-in...but surprising the user with that decision seems lazy.

Top navigation - FOLLOWED - The design pattern seems to state that the top nav could be accompanied with a secondary level of navigation, but since each product would likely bring the user many levels deep, they chose to use breadcrumbs for that purpose.

Breadcrumbs - FOLLOWED - Unlike on the travel page, the use of breadcrumbs on the shopping page precisely follows the design pattern.

---------

Yahoo! Search results page examined:  http://tinyurl.com/latqyav 

Search Pagination - FOLLOWED - While the conventions for Search Pagination are followed, extraneous boxes are drawn around each number in a well-intentioned attempt at a "re-design."  This additional non-data-ink would make Edward Tufte sad.

Module tabs - IGNORED - The design patterns include a way to handle multiple kinds of information on the same page...using module tabs.  The search results, though also displaying different kinds of information (in this case results), instead use a quasi-top-nav format that's neither a top nav nor module tabs.

I expect this was ignored also due to a desire to "re-design" and "freshen up" the results.