Welcome, guest Sign In

All Design Patterns

Here's an alphabetical listing of all 49 patterns in the library today.

As always, we welcome your feedback on these patterns as well as any stories you might like to share with us about how you've applied them to real-world design projects.

Browse Patterns

Accordion

There are too many items to fit into a limited space without overwhelming the user.

Add / Subscribe

A person wants to subscribe to the content of another person and read it in an environment of their own choosing.

Alphanumeric Filter Links

The user needs the ability to look up information alphabetically within a large data set.


Animate Transition

The designer needs to communicate that an object is changing its spatial relationship within the page.

Architecture of a Review

A product or website needs to present ratings and reviews with a variety of informational elements.

Auto Complete

The user needs to enter an item into a text box which could ambiguous or hard to remember and therefore has the potential to be mis-typed.


Breadcrumbs

User needs to navigate potentially large quantities of information efficiently, without becoming lost.

Brighten Transition

Designer wants to make a previously dimmed object a point of focus by making the object bright again.

Calendar Picker

User wants to find or submit a particular piece of information based on a date or between a date range.


Carousel

User needs to browse among a set of like objects represented pictorially.

Collapse Transition

An object is no longer of primary importance, but must remain available in a smaller form.

Collectible Achievements

Some participants in communities respond to opportunities to collect and display awards.


The Competitive Spectrum

The designer needs to match the reputation system to the community's degree of competitiveness.

Cross Fade Transition

Designer wants to communicate that a new view of an object is replacing the previous view.

Cursor Invitation

Designer needs to cue the user that an object can be interacted with.


Dim Transition

Designer needs to communicate that an object is of secondary importance.

Drag and Drop Modules

The user needs needs to re-arrange the layout of modules on a web page directly with the mouse.

Drop Invitation

Designer needs to indicate valid candidate drop sites during a drag and drop operation.


Expand Transition

Designer needs to show the detail of an object in its context or reveal a previously collapsed object.

Fade In Transition

Designer needs to communicate that an object is being added to the page or application.

Fade Out Transition

Designer needs to communicate that an object is going away.>


Favorites

A user wants to mark an item (person, place or thing) as a preferred object.

Hover Invitation

Designer needs to cue the user about what will happen when the mouse is clicked on the hovered object.

Identifying Labels

Community members need to identify distinguished members of the community.


Invite

The user sends an invitation to a friend or group of friends to have them join in a site experience.

Item Pagination

The user needs to view data items from a potentially large set of sorted data that will not be easy to display within a single page.

Leaderboard

In highly competitive communities, users may want to know who are the very best performers in a category or overall.


Module Tabs

The user needs to navigate through one or more stacked panes of content without refreshing the page.

Named Levels

Participants in a community need some way to gauge their own personal development within that community.

Navigation Tabs

The user needs to navigate through a site to locate content and features and have clear indication of their current location in the site.


Numbered Levels

Participants in a community need some way to gauge how far they've progressed within that community.

Page Grids

For consistent use of common page elements, page width, division of space, ad usage and code base.

Points

In some communities, users want a tangible measurement of their accomplishments.


Rating an Object

A user wants to quickly leave their opinion on an object, with minimal interruption to any other task flow they are involved in.

Reflector

A user needs to know what public identity she is participating under when creating content.

Saving

A user wants to save an item for later viewing, sharing, or discussion.


Search Pagination

The user needs to view a set of search results ranked by relevance that is too large to easily display within a single page.

Self Healing Transition

Designer wants to show that an object has been removed from a list of objects.

Sign-in Continuity

A user with an account but who is not currently signed in wants to participate by contributing something.


Slide Transition

The designer wants to bring new content into the page and would like to communicate the additional content's relationship with other items on the page.

Spotlight Transition

Designer needs to call attention to where a data value or content has changed within the interface.

Talk Like a Person

People reading impersonal text on a screen will remain disengaged.


Terms of Service

Users often don't notice TOS checkboxes and get harassed by error messages.

Tool Tip Invitation

Designer needs to cue the user about what will happen if they click the mouse on the hovered object.

Top X

Participants in some communities welcome the challenge of striving to enter the top tier of competitors.


User Card

A user needs to get more information about another participant in an online community without interrupting his or her current task.

Vote to Promote

User wants to promote a particular piece of content in a community pool of submissions.

Writing a Review

User wants to share her opinion with others about an object (place, person, thing) in greater detail than a simple rating.


You're Invited

The user receives an invitation from a friend or connection to join a site.

Your vs. My

Labeling stuff with "Your" instead reinforces the conversational dialogue. It is how another human being might address you when talking about your stuff.


Copyright © 2009 Yahoo! Inc. All rights reserved. Copyright | Privacy Policy

Help us continue to improve the Yahoo! Developer Network: Send Your Suggestions