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)