Quince - Patterns

Pattern: Data Visualization

salsafreakpr — Mon, 19 Jul 2010 18:49:00 +0100

Display map-able (e.g., geographic) data together with the non-visual pieces of information on a web-based browser making full use of color, pushpins, animations, etc. according to application-specific factors including density, distribution, importance or immediacy of data to allow for focused drill-down and jumpstart analysis. Introduce spatial dimensions to show how data has changed over time.

Pattern: Map

Cedric Wagrez — Mon, 15 Jun 2009 18:32:00 +0100

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

Pattern: Dashboard

Quince Team — Mon, 02 Feb 2009 10:53:00 Z

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.

Pattern: Intriguing Branches

Quince Team — Sun, 01 Feb 2009 22:31:00 Z

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

Pattern: Inline Validation

Quince Team — Sun, 01 Feb 2009 22:24:00 Z

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

Pattern: Extras on Demand

Quince Team — Sun, 01 Feb 2009 22:16:00 Z

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

Pattern: Closable Panels

Quince Team — Sun, 01 Feb 2009 22:05:00 Z

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.

Pattern: Wizard

Quince Team — Sun, 01 Feb 2009 21:42:00 Z

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

Pattern: Undo

Quince Team — Sun, 01 Feb 2009 15:34:00 Z

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

Pattern: Two-Panel Selector

Quince Team — Sun, 01 Feb 2009 00:13:00 Z

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

Pattern: Tree-Table

Quince Team — Sat, 31 Jan 2009 21:46:00 Z

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

Pattern: Visual Framework

Quince Team — Sat, 31 Jan 2009 20:43:00 Z

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

Pattern: Annotated Scrollbar

Quince Team — Sat, 31 Jan 2009 19:23:00 Z

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

Pattern: Few Hues

Quince Team — Sat, 31 Jan 2009 18:56:00 Z

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

Pattern: Faceted Navigation

Quince Team — Sat, 31 Jan 2009 18:52:00 Z

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

Pattern: Transition

Quince Team — Sat, 31 Jan 2009 18:41:00 Z

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

Pattern: Data Tips

Quince Team — Sat, 31 Jan 2009 18:40:00 Z

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

Pattern: Data Brushing

Quince Team — Sat, 31 Jan 2009 15:38:00 Z

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

Pattern: Corner Treatments

Quince Team — Sat, 31 Jan 2009 14:58:00 Z

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

Pattern: Command Area

Quince Team — Sat, 31 Jan 2009 14:43:00 Z

Group commands together into a unified area of the interface.

Pattern: Clear Entry Points

Quince Team — Sat, 31 Jan 2009 14:06:00 Z

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

Pattern: Alternative Views

Quince Team — Sat, 31 Jan 2009 13:41:00 Z

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

Pattern: Cascading Lists

Quince Team — Sat, 31 Jan 2009 13:40:00 Z

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

Pattern: Button Groups

Quince Team — Sat, 31 Jan 2009 13:32:00 Z

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

Pattern: Breadcrumbs

Quince Team — Sat, 31 Jan 2009 12:35:00 Z

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.

Pattern: One-Window Drilldown

Quince Team — Sat, 31 Jan 2009 00:21:00 Z

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

Pattern: Search

Quince Team — Sat, 31 Jan 2009 00:19:00 Z

Provide users with an easy to use search mechanism.

Pattern: Table Filter

Quince Team — Sat, 31 Jan 2009 00:17:00 Z

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

Pattern: Work With

Quince Team — Sat, 31 Jan 2009 00:15:00 Z

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

Pattern: Treemap

Quince Team — Sat, 31 Jan 2009 00:13:00 Z

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.