Design Pattern Library

Patterns from A to Z

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.>
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.
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.
Ranking
In highly competitive communities, users may want to compare their performance against that of their peers.
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.
Reputation
The user expects to develop a reputation and hopes for insight into the reputations of others.

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.
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.
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.