Problem

User has to select a link

Solution

Show a partial menu with "expand" capabilities

From www.cnn.com/


Use when

Very full web pages with secondary navigation. You have the main menu but there are also other menus that do not fit with the main menu.

How

Present a list of links that come from the menu and allow the users to see all links. When users click on the "expand" link the entire list is show, either on a new page or by moving down other items below.


Why

The teaser menu shows what kind of things the users are able to find without showing them all. This saves spaces and increases the information "scent" of the menu label.

More Examples

A variation at www.zibb.nl



plml logo

Comments

3 comments have been added to this pattern


Louise Hewitt, 14th December 2008
I have seen teasers fail because of the styling of the more link quite often. If the 'more' is not enticing and clear, then it can be interpreted as another menu item, leading the user to 'see' only 4 items (for example) instead of 44. Understanding the scope of a resource can be critical to a users decision to use a resource in certain circumstances (e.g. deciding relevance).

So I will always approach this with caution in anything other than temporal lists (e.g. news stories, blog entires) preferring a clear heading and count with an expandable list instead.
Louise Hewitt, 14th December 2008
I have seen teasers fail because of the styling of the more link quite often. If the 'more' is not enticing and clear, then it can be interpreted as another menu item, leading the user to 'see' only 4 items (for example) instead of 44. Understanding the scope of a resource can be critical to a users decision to use a resource in certain circumstances (e.g. deciding relevance).

So I will always approach this with caution in anything other than temporal lists (e.g. news stories, blog entires) preferring a clear heading and count with an expandable list instead.
Eric Scheid, 22nd March 2009
I would also add that the "more..." link can fail if it is poorly located e.g. the CNN.com example has it located above and to the right of the headlines.

The zibb.nl link however is located *after* the few headlines there which is about when the visitor would be looking for more.

Ask when and where in the flow would they feel the need for "more", and then put the link there.


Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name

Comment

Enter the verification code you see in the image below
captcha