Action Links

Use links instead of buttons to minimize visual noise, conserve screen real estate, or to contrast with buttons to indicate importance or precedence.

Active Filtering

Enable people to change filters on a large set of information and see the results actively update as they do so.

Alphanumeric Filter Links

Show a list of alphabetical links that filter the list with the words that start with the selected character.

Alternating Row Colors

Alternate the background color of rows to subtly differentiate each row from surrounding rows.

Alternative Views

Create multiple, alternative views of the same interface that address competing design needs.

Annotated Scrollbar

Provide an indicator of significant sections in or near the scrollbar.

Breadcrumbs

Provide a list of side-by-side links that give users a sense of where they’ve been or where they are and how it fits in the overall structure of your site or application.

Button Groups

Display related commands using buttons that are grouped together and similarly aligned and styled.

Cascading Lists

Show a few lists next to each other that allow users to drill down into hierarchical information.

Clear Entry Points

Give people a set of clear entry points into the application or Web site based on their most common tasks or destinations.

Closable Panels

Put some or all of your ancillary things, such as tools, controls, or extra information, into distinct panels that users can close or open individually as needed.

Command Area

Group commands together into a unified area of the interface.

Corner Treatments

Use rounded, odd-angled, or cut off corners on rectangular elements to liven up your UI and add visual interest.

Dashboard

Create a view that has high-level indicators that provide immediate insight into the current state of the things that a person is interested in.

Data Brushing

Enable users to select data points and highlight those same points in the other visualizations.

Data Tips

When the user hovers over the target item, show a small window like a tooltip to display additional information about the item.

Date and Time Input

Provide mechanisms that allow the user to select dates and times or enter the data in a natural ways, as opposed to forcing users to enter text in unfamiliar formats (which is more error prone).

Date Picker

Provide a visual representation of dates in the familiar calendar format to facilitate people entering dates in a consistent format.

Date Time Range Input

Provide mechanisms that allow the user to select dates and times as opposed to forcing users to enter text (which is more error prone).

Drop Down Button

Use a button with an indicator that, when selected, shows more commands related to the primary command.

Drop Down Chooser

Supply a drop-down chooser dialog to help people find an answer.

Edit-in-Place

Whenever possible, let people edit values in the same place that they are displayed.

Extras on Demand

Show the most common or important stuff first, and let people get to extra stuff easily.

Faceted Navigation

Help people gradually find what they want by providing them with various facets that they can use to filter a result set.

Few Hues

Pick a few hues and base your entire color palette on those, using saturation and brightness for variety.

Forgiving Format

Allow users to enter data in formats that seem natural to them and have your system take responsibility for intelligently parsing and structuring it.

Form

Design an interface that resembles a form to allow people to communicate information to a computer system.

Formatted Text Input

Provide a tool to enable people to decorate their text using standard markup features.

Global Navigation

Design a persistent, global navigation facility that enables people to get to the key areas or functions of your site or application.

Grid Layout

Use a grid layout to order the visual elements in the views that you design.

Hub and Spoke

Create a navigation model that has a central hub with entry points into the various isolated tasks or applications (spokes).

Illustrated Choices

Provide illustrations to accompany or replace text choices in lists.

Inline Validation

Validate user input as soon as possible and show any validation messages in line with the thing being validated.

Input Hints

Add some explanation and/or examples of valid values near fields to give people hints at the kind of input they need to provide.

Input Prompt

Supply an explanation or example of what a person should do with an input inside of the input itself.

Intriguing Branches

Strategically place links to related content to attract and keep people’s attention.

Invitation

Use interactive visual indicators to invite people to take advantage of capabilities when and where they are applicable.

Journal Navigation

Give people a mechanism that they can use to go back and forth in their navigation history.

Large Set Single Selector

Give users an efficient way to find and select the item.

Left Aligned Labels

Help people quickly scan the fields on the form by aligning their labels evenly on the left side and aligning their corresponding inputs in an adjacent column.

Liquid Layout

Treat your content like liquid and have it expand to fill the shape of its container.

List Sorter

Help people bring order to chaos by letting them arbitrarily sort the items in a list.

Local Zooming

Show an overview of your information with the ability to select specific points to see more details without losing the context.

Magnetism

Help people precisely position things where they want by creating a larger “magnetic” boundary in relation to potential targets.

Map

Display pieces of information (e.g. web sites) as nodes on a Map and the relation between these pieces of information as arcs.

Modal Panel

Display a panel front and center that requires people to focus and take action on before continuing.

Movable Panels

Group your various tools and content meaningfully into panels and let people move them around to where they like them.

Multiple Selection from a Large List

Provide users with the ability to filter the list and select the desired items.

Multiple Selection from a Small List

Provide people the ability to choose a more than one item from a small set.

Multi-Y Graph

Establish a common X axis and then stack multiple Y axes up against that same X axis.

Navigation Tabs

Use one or two rows of tabs at the top of your site or application for global navigation.

New-Item Row

Provide a row at the top or bottom of the list that is dedicated to adding new items.

Number in Range Input

Provide a control that guides people to enter an acceptable number within a given range.

One-Window Drilldown

Show all the views in an application in one window, changing the windows contents as people navigate through it.

Overview Plus Detail

Display a smaller window viewport inset within the larger overall view to show the relationship between the detailed part that is currently being displayed and the overall set of data.

Paging

Present the items grouped across multiple pages, with a consistent number of items per page, and provide an easy to use set of controls to navigate the pages.

Plain Text Input

Give people an input that accepts open-ended plain text.

Preview

Show a preview of the consequences of an action before people commit to it.

Primary Action

Make the primary action for a given context more visually prominent than other options.

Progress Indicator

Display an indicator that shows actual progress or at least that progress is being made.

Property Sheet

Provide a list of property name-value pairs that lets people directly change the values.

Real Time Monitor

Use information visualization techniques that are typically found in “operational dashboards” to differentiate information that users should notice immediately, and if possible provide guidance for an appropriate immediate action.

Responsive Disclosure

Initially only show users information and elements that are necessary, and only show potentially needed information as needed.

Responsive Enabling

Show all information and UI elements that users may need to interact with, but initially only enable those elements that are necessary for the initial step. As selections are made or as the context changes, subsequently enable other elements as they become relevant.

Ribbon

Surface the capabilities of your application through a tabbed ribbon using task-based grouping and informative and illustrative visualizations.

Right Aligned Labels

To make relationships between information clear, right align labels up against the information or fields they describe, leaving a consistent small amount of space between them.

Same Page Error Messages

Place error messages as close as possible to whatever the user needs to interact with to get rid of the error.

Search

Provide users with an easy to use search mechanism.

Search Results

Offer search results in comprehensible formats, allowing users to modify these formats to suit their needs.

Skins

Create a pluggable look and feel architecture for your application, enabling third parties to customize it.

Small Multiples

Show many instances of the items next to each other on the same page, or in a matrix format depending on the situation and number of dimensions, so that patterns of differences can be noticed.

Small Set Single Selector

Present all choices together at once, using a selection control that allows only one item to be selected.

Smart Menu Items

Dynamically update action labels to reflect what will happen if invoked.

Sortable Table

Provide users with the ability to sort data in column based tables.

Status Area

Use a dedicated area to provide status to users in a manner that will not interrupt them.

Structured Format

Represent input fields in a way that clearly guides the user as to what format to use.

Tab Dialogs

Break up related chunks of information on individual tabs that can be accessed one at a time.

Table Filter

Provide a way to let the users to specify the filters for the data directly above the table.

Task Pane

Present a large group of related actions on a UI panel that's richly organized and always visible.

Text Field Autocompletion

As the user types into a text field, anticipate the possible answers and automatically complete the entry when appropriate.

Titled Sections

Group information into sections on a view and add prominent titles to them.

Top Aligned Labels

When designing a form, put the labels above the controls.

Transition

Use transitions to make visual connections when things change in an interface.

Treemap

Use rectangles that can vary in size, color, and position to show hierarchical information to allow users to quickly understand the underlying data. Use nested rectangles to express the hierarchical relationships, and use size, color, position or labels to show different data dimensions.

Tree-Table

Show information in a table that allows expansion of rows in a tree-like format to show hierarchical relationships.

Two-Panel Selector

Use two panels, one that shows a list of things and one that shows the contents of what’s selected in the other.

Undo

Empower people to undo the actions they take while using your software.

Visual Framework

Create an overall visual framework that consistently uses styles, layout, and navigational elements.

Wizard

Guide people to complete their goal using a step-by-step wizard.

Work With

Provide a way to create, select, modify and delete objects that people need to work with.