1. The User Picks panel is promoted on the right side of the page.
2. Hovering over the title of one of the cars expands the accordion to reveal that car's detail.
3. Clicking the arrows in the upper right slide to the previous or next list, and the dot indicator above the arrows show what page you're viewing in the set.
Screencast of This Interface
Yahoo! Autos has uses a nice hybrid design pattern for promoting the different categories of top cars selected by users. Situated in the right hand column, the arrows at the upper right allow the user to slide through the different lists. The details for the top car are shown in an exposed panel of the accordion, and the titles of the remaining 4 are displayed as well with large number to indicate order. Moving the cursor over one of the other titles slides that panel open and collapses the others out of view.
URL
Tags
Company
Media
Views
1601 reads
Posted
Bookmark
Comments
09/06/08 @ 01:23
hey, that is pretty slick. is that pattern used anyplace else on Yahoo?
09/06/08 @ 10:26
The carousels are used a lot, but this is the only place I've seen them combined with accordions on Y!.
10/08/08 @ 14:31
It's slick and all but users would have to cycle through up to five pages to find a list that appeals to them.
For example, if they are browsing for coups, the would have to cycle through, flex fuels, hybrids, etc. to get to page 5. Is the sacrificing in scan-abiity worth the gain in screen real estate? I'd probably stick to old school tabs just to play it safe.
10/08/08 @ 14:52
@anonymous(#03): I agree. What's gained in saving space is lost in terms of visibility of chunks. Tabs would work, but with 5 labels, a drop-down menu would be just as functional in that narrow space. Ever better, in my opinion, is a more link that links to a full page with chart views showing more than 5 and each categorization displayed prominently.
These types of small modules should be used as teasers to draw you in and invite drill down. Sadly, the high level view is limited to 5, and there's now "View all."
Post new comment