Note: This is a simple, HTML-based list of the design patterns in Quince. We suggest using the Silverlight interface for richer pattern discovery and community interaction.
Use links instead of buttons to minimize visual noise, conserve screen real estate, or to...
Enable people to change filters on a large set of information and see the results actively...
Show a list of alphabetical links that filter the list with the words that start with the...
Alternate the background color of rows to subtly differentiate each row from surrounding rows.
Create multiple, alternative views of the same interface that address competing design needs.
Provide an indicator of significant sections in or near the scrollbar.
Provide a list of side-by-side links that give users a sense of where they’ve been or where they...
Display related commands using buttons that are grouped together and similarly aligned and styled.
Show a few lists next to each other that allow users to drill down into hierarchical information.
Give people a set of clear entry points into the application or Web site based on their most...
Put some or all of your ancillary things, such as tools, controls, or extra information, into...
Group commands together into a unified area of the interface.
Use rounded, odd-angled, or cut off corners on rectangular elements to liven up your UI and add...
Create a view that has high-level indicators that provide immediate insight into the current...
Enable users to select data points and highlight those same points in the other visualizations.
When the user hovers over the target item, show a small window like a tooltip to display...
Display map-able (e.g., geographic) data together with the non-visual pieces of information on a...
Provide mechanisms that allow the user to select dates and times or enter the data in a natural...
Provide a visual representation of dates in the familiar calendar format to facilitate people...
Provide mechanisms that allow the user to select dates and times as opposed to forcing users to...
Use a button with an indicator that, when selected, shows more commands related to the primary...
Supply a drop-down chooser dialog to help people find an answer.
Whenever possible, let people edit values in the same place that they are displayed.
Show the most common or important stuff first, and let people get to extra stuff easily.
Help people gradually find what they want by providing them with various facets that they can...
Pick a few hues and base your entire color palette on those, using saturation and brightness for...
Allow users to enter data in formats that seem natural to them and have your system take...
Design an interface that resembles a form to allow people to communicate information to a...
Provide a tool to enable people to decorate their text using standard markup features.
Design a persistent, global navigation facility that enables people to get to the key areas or...
Use a grid layout to order the visual elements in the views that you design.
Create a navigation model that has a central hub with entry points into the various isolated...
Provide illustrations to accompany or replace text choices in lists.
Validate user input as soon as possible and show any validation messages in line with the thing...
Add some explanation and/or examples of valid values near fields to give people hints at the...
Supply an explanation or example of what a person should do with an input inside of the input...
Strategically place links to related content to attract and keep people’s attention.
Use interactive visual indicators to invite people to take advantage of capabilities when and...
Give people a mechanism that they can use to go back and forth in their navigation history.
Give users an efficient way to find and select the item.
Help people quickly scan the fields on the form by aligning their labels evenly on the left side...
Treat your content like liquid and have it expand to fill the shape of its container.
Help people bring order to chaos by letting them arbitrarily sort the items in a list.
Show an overview of your information with the ability to select specific points to see more...
Help people precisely position things where they want by creating a larger “magnetic” boundary...
Display pieces of information (e.g. web sites) as nodes on a Map and the relation between these...
Display a panel front and center that requires people to focus and take action on before continuing.
Group your various tools and content meaningfully into panels and let people move them around to...
Provide users with the ability to filter the list and select the desired items.
Provide people the ability to choose a more than one item from a small set.
Establish a common X axis and then stack multiple Y axes up against that same X axis.
Use one or two rows of tabs at the top of your site or application for global navigation.
Provide a row at the top or bottom of the list that is dedicated to adding new items.
Provide a control that guides people to enter an acceptable number within a given range.
Show all the views in an application in one window, changing the windows contents as people...
Display a smaller window viewport inset within the larger overall view to show the relationship...
Present the items grouped across multiple pages, with a consistent number of items per page, and...
Give people an input that accepts open-ended plain text.
Show a preview of the consequences of an action before people commit to it.
Make the primary action for a given context more visually prominent than other options.
Display an indicator that shows actual progress or at least that progress is being made.
Provide a list of property name-value pairs that lets people directly change the values.
Use information visualization techniques that are typically found in “operational dashboards” to...
Initially only show users information and elements that are necessary, and only show potentially...
Show all information and UI elements that users may need to interact with, but initially only...
Surface the capabilities of your application through a tabbed ribbon using task-based grouping...
To make relationships between information clear, right align labels up against the information...
Place error messages as close as possible to whatever the user needs to interact with to get rid...
Provide users with an easy to use search mechanism.
Offer search results in comprehensible formats, allowing users to modify these formats to suit...
Create a pluggable look and feel architecture for your application, enabling third parties to...
Show many instances of the items next to each other on the same page, or in a matrix format...
Present all choices together at once, using a selection control that allows only one item to be...
Dynamically update action labels to reflect what will happen if invoked.
Provide users with the ability to sort data in column based tables.
Use a dedicated area to provide status to users in a manner that will not interrupt them.
Represent input fields in a way that clearly guides the user as to what format to use.
Break up related chunks of information on individual tabs that can be accessed one at a time.
Provide a way to let the users to specify the filters for the data directly above the table.
Show the most used tags together, using font size and weight to reflect the relative number of...
Present a large group of related actions on a UI panel that's richly organized and always visible.
As the user types into a text field, anticipate the possible answers and automatically complete...
Group information into sections on a view and add prominent titles to them.
When designing a form, put the labels above the controls.
Use transitions to make visual connections when things change in an interface.
Use rectangles that can vary in size, color, and position to show hierarchical information to...
Show information in a table that allows expansion of rows in a tree-like format to show...
Use two panels, one that shows a list of things and one that shows the contents of what’s...
Empower people to undo the actions they take while using your software.
Create an overall visual framework that consistently uses styles, layout, and navigational elements.
Guide people to complete their goal using a step-by-step wizard.
Provide a way to create, select, modify and delete objects that people need to work with.