All Design Patterns

Here's an alphabetical listing of all 59 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.


Availability

Provide a way for a user to display to other people (either the public, or their contacts, depending on the rules of the system) when they are available for contact and when not.

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.

Display Collection

The user has created a collection and wants to display it to other people.


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.


Find with Tags

A user wants to find objects associated with a specific concept or term.

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.


Left Navigation

The user needs to locate content and features necessary to accomplish a task.

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.

Progress Bar

User needs to know at where they are in a multi-screen process (such as purchase or set-up).

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.

Tag an Object

A user wants to attach their own keyword or set of keywords to an object for organization and later retrieval.

Tag Cloud

With sufficient tags in a system it becomes possible to present the most popular tags as a browsing aid.


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 Navigation

The user needs to locate content and features necessary to accomplish a task.

Top X

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

Updates

Provide people with mini-stories about what their connections and others are doing on the net. People can also consume mini-stories on topics they are interested in.


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.