Quince

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.

From the Field: Few Hues

Jon Brown — Tue, 09 Feb 2010 14:12:23 Z

This is an awsome color scheme. A perfect blend of color, layout and subject matter.

From the Field: Text Field Autocompletion

Heather B — Tue, 02 Feb 2010 16:29:02 Z

i use this for a search box on a web site to provide results based in what the user types

From the Field: Work With

Ignacio Alvarez — Fri, 08 Jan 2010 22:00:49 Z

My comment!

From the Field: Paging

Cedric Wagrez — Thu, 18 Jun 2009 04:21:42 +0100

I used paging for a clinical application where we had to track thousands of subjects. The only issue is that it the identification of patterns or search a little harder, but that can be used with additional interfaces.

From the Field: Map

Ambrose Little — Wed, 17 Jun 2009 13:36:38 +0100

As noted in the third example given, we are using this in Quince.

From the Field: Tab Dialogs

Tobias Komischke — Fri, 12 Jun 2009 14:48:17 +0100

I use this very often to structure complexity into manageable sub-parts.

From the Field: Right Aligned Labels

Tobias Komischke — Fri, 12 Jun 2009 14:45:13 +0100

I use this based on the recommendation of ISO 9241-17. Depending on the different length of the labels the result sometimes doesn't look very nice. But I think it's more important to have labels and input fields close to each other.

From the Field: Real Time Monitor

Tobias Komischke — Fri, 12 Jun 2009 14:40:42 +0100

Used this for a supervisory control system in the pulp and paper industry.

From the Field: Paging

Tobias Komischke — Fri, 12 Jun 2009 14:16:19 +0100

I use paging for lists when there are so many items that scrolling would be too effortsome to find things.

From the Field: Magnetism

Tobias Komischke — Fri, 12 Jun 2009 14:12:41 +0100

We used this for a multimedia player. The menu hosting the chapters (videos, audio, etc.) was hidden on the left, just the right-most part wsa visible to provide affordance. Magnetism helped to increase the activity space around the menu.

From the Field: Liquid Layout

Tobias Komischke — Fri, 12 Jun 2009 14:08:22 +0100

We used this for a hospital IT reference application. The various parts of the app (like patient list, orders, etc.) were shown on a dashboard for better overview and when you changed the size of one, the sizes of the others adopted to the available real estate.

From the Field: Grid Layout

Tobias Komischke — Fri, 12 Jun 2009 13:57:12 +0100

I always try to do this. To me, this is one of the most powerful patterns out there!

From the Field: Edit-in-Place

Tobias Komischke — Fri, 12 Jun 2009 13:53:31 +0100

I used this for a concept depicting different ways of writing list-based drug prescriptions. This feature was embedded in a pretty large IT system, so I thought it's great for users that they can enter and revise data right where it is shown (instead of e.g. a separate dialog).

From the Field: Dashboard

Tobias Komischke — Fri, 12 Jun 2009 13:46:02 +0100

Did this for a supervisory control system in the area of power transmission.

From the Field: Active Filtering

makoto kern — Thu, 11 Jun 2009 13:19:03 +0100

We are currently trying to use the same interactive slider technology for Health Benefits intranet website. This same slider technology is used at goarmy.com or Ford's website when selecting a car, but the general consensus from our usability team is that there is a time to use this interactive tool and a time not to use it for "coolness"...selecting heath benefits is one of those times.

From the Field: Edit-in-Place

bmijuskovic — Sun, 29 Mar 2009 18:19:13 +0100

I did use this pattern in the past, especially within the Grids (WinForms) where the users could easily create/edit records. It seemed as a good approach to our team, but soon we discovered that users were NOT happy about it, even though editing could happen instantly.

Accidental (as well as intentional) clicks over the cells would trigger edit mode of the cell and in combination with the mouse wheel (used for scrolling the grid rows in this case) would mess-up the original cell value, for example rolling through the items of the combo box. Escape route for the user was usually clicking somewhere else in the UI just to move the focus off the grid, which in return modified the row. Series of validation procedures would then fire, making it too messy for the user to find the way out. Something that supposed to be simple view-only, mouse-only, scroll-only operation made user frustrated. Just to make it clear, this was the case with the single-click edit activation of the grid cell. Double-click could have helped in this case, but not solving the problem fully.

After couple of releases later, we've locked the grid and provided double-click on the row, which activated the popup dialog with reasonably placed edit controls (not to divert the user's attention from the current context). It proved to be a much cleaner solution for the users, even though double click (in combination with the context menus) was required to perform the edit.

Even to this day, we are strong opponents of the typical editable grids in WinForms, while at the same time exploring "cures" to this issue using wonderful capabilities of WPF.

Other suggested scenarios above (Visio, file rename in W.Explorer, etc.) really show that in-place editing is useful, but I strongly believe that the reason is because the mentioned contexts allow clean access to the values to be edited.

From the Field: Forgiving Format

Matt Eland — Fri, 27 Mar 2009 21:37:40 Z

I use this for parsing Bible references (including verse ranges). I also back it up with a wizard-style UI if the user needs additional help or enters an invalid / unparsable reference.

From the Field: Alphanumeric Filter Links

Matt Eland — Fri, 27 Mar 2009 21:35:11 Z

I've used this in a plug-in using Microsoft Media Center's gallery UI.

From the Field: Property Sheet

Sharky — Wed, 25 Feb 2009 16:50:14 Z

I used the property grid in drawing applications and for apps that used heavy charting. I like it and of course I am heavily used to it with my work with Visual Studio. But I realized that users will not easily adapt to this concept. They are used to dialogs (maybe modal ones) to accept or cancel changes done. I think it is perfect for users with a technical background, but not for "general office" users.

From the Field: Titled Sections

Simon Jones — Fri, 20 Feb 2009 00:42:56 Z

We make extensive use of Group Boxes and Table Layout Panels in our Windows Applications to break large forms into logical, manageable chunks.

From the Field: Same Page Error Messages

Simon Jones — Fri, 20 Feb 2009 00:35:44 Z

We find validation error icons work better if they are shown to the left of the field rather than the right. User's scan the labels and the data and the icon can get lost if the data is short.

In tabbed dialogs we also put a validation error icon on the tab if any field on that tab has an error. That way the error is apparent even if the user isn't actually looking at that tab.

From the Field: Inline Validation

Simon Jones — Thu, 19 Feb 2009 23:59:01 Z

For validations errors like "Possible Duplicate Entry" we show this text with a warning icon above the field in question which acts as a link. (It grows an underline when the user moves over it to show it is clickable). Clicking the link activates the application's search facility showing the other records that might be duplicates.

From the Field: Input Prompt

Simon Jones — Thu, 19 Feb 2009 23:31:41 Z

This is good where space is a premium as you don't need a label with the field.

From the Field: Forgiving Format

Simon Jones — Thu, 19 Feb 2009 23:23:42 Z

We use this pattern for entering the names of people. The user gets one field to type in and we parse it into Title, Given Names, Family Name & Suffix fields. We also infer the person's gender from the title where possible. It is easier to type the name naturally with spaces between items than to have to put it all in separate fields, pressing Tab to move between them. We also have an "Edit Name" button to present the separate fields for editing just in case the name is unusual - such as if it has a two part Family Name without a hyphen which can't be parsed correctly by the software.

From the Field: List Sorter

Simon Jones — Thu, 19 Feb 2009 23:15:20 Z

Drag & Drop is easiest for people to use providing they can discover it is available.
Up & Down arrows are more obviously available and can be used by physically disabled people who may find drag & drop difficult.

From the Field: Primary Action

Ambrose Little — Sat, 07 Feb 2009 13:39:33 Z

This is one of my favorite patterns because it can really help people to not have to spend a lot of time picking between mutliple action possibilities. I wish more folks would use it, including even OS dialogs.

From the Field: Transition

Ambrose Little — Mon, 02 Feb 2009 04:14:51 Z

We use this in quite a few places in Quince.

From the Field: Search Results

Ambrose Little — Mon, 02 Feb 2009 04:12:38 Z

You can see this in Quince.

From the Field: Search

Ambrose Little — Mon, 02 Feb 2009 04:12:07 Z

We're using this in Quince.

From the Field: Responsive Disclosure

Ambrose Little — Mon, 02 Feb 2009 04:09:57 Z

I've worked on a few financial application solutions that use this.

Suggestion: Progress Indicator

Colleen Hamilton — Thu, 05 Aug 2010 19:00:25 +0100

Parallel progress operations as part of a whole are still poorly represented in general.

Suggestion: Data Visualization

Ambrose Little — Tue, 20 Jul 2010 13:30:33 +0100

This is good stuff! I wonder how you think it compares with the Map pattern we have. Data Visualization may be too broad a name for this pattern given the focus on mapping.

Suggestion: Small Multiples

David Cain — Mon, 12 Jul 2010 21:49:43 +0100

Had to guess that the "small multiples" pattern would have a product showcase - was a stretch, but it did have one. Should keyword any product showcases, storefronts, ecommerce patterns so they can be found by use, not by design pattern names.

Suggestion: Faceted Navigation

Gorazd Svajger — Wed, 19 May 2010 08:30:21 +0100

Regarding the logical operators: we've had success with combining AND and OR in the following way:
AND for values from different facets
OR within the same facet
E.g.: (blue OR red) AND (tiny OR small), given the Color and Size facets with multiple selection enabled.

Suggestion: Property Sheet

Gary Howlett — Thu, 25 Mar 2010 16:17:55 Z

Would be nide to have a WPF implementation of this.

Suggestion: Input Prompt

Ambrose Little — Tue, 23 Mar 2010 23:09:20 Z

Michele, seems to me their test is flawed in a few ways. First, it assumes HTML and that the default will be accepted; this is easy enough to fix w/ validation or a tech like SL that knows the difference. Similarly, smartly implemented, you won't let people run into the "this is actual text I have to clear out" problem. In the tested example, the text looks just like regular form text, so no wonder they thought it was already filled in with a default. And finally, if you make the hint obvious that it's a hint, that helps, too. For instance, we try to say verbs like "type keyword here" or "e.g., blah" or a message that is clearly not a possible answer. The devil is in the details as is the case with most good design.

Suggestion: Input Prompt

Michele Marut — Tue, 23 Mar 2010 20:36:01 Z

New research suggests not using this pattern. It is no longer needed for web accessibility and users may take the hint as a default. http://www.uxmatters.com/mt/archives/2010/03/dont-put-hints-inside-text-boxes-in-web-forms.php

Suggestion: Data Tips

makoto kern — Thu, 08 Oct 2009 19:49:54 +0100

I'm cautious about putting interactive functionality into the tooltip itself and try to limit its content for websites. This might be more common place and perferred for web apps than websites...

Suggestion: Structured Format

Michele Marut — Tue, 29 Sep 2009 20:27:13 +0100

This is similar to an affordance. Can you add that tag? I also think Luke W has a nice image http://www.flickr.com/photos/rosenfeldmedia/2367265712/

Suggestion: Top Aligned Labels

Ambrose Little — Mon, 28 Sep 2009 13:21:16 +0100

Hi David,

Have you seen the Input Prompt pattern? I think it may be what you are thinking of when you say "in-field" labels. Let me know if not.

Suggestion: Top Aligned Labels

davidvb — Mon, 28 Sep 2009 07:48:05 +0100

i think above the field labels work best in small in small forms like login screens (see the login on twitter.com). One thats missing from this website is in-field labels that can really cleanup a login screen too in some cirumstances.

Suggestion: Left Aligned Labels

Jeremy Gollehon — Wed, 08 Jul 2009 03:33:30 +0100

I did look at the articles and said "both of the sited sources conclude vertical labels are the best..." We're saying the same thing correct? 'Top labels' vs 'Vertical labels'.
Also, I agree. Path to completion is the key.

Suggestion: Map

Cedric Wagrez — Tue, 16 Jun 2009 05:24:27 +0100

"Map" name is a bit too vague and could be confused with other types of maps. Another name should be considered for this pattern, such as "Node Map".

Suggestion: Left Aligned Labels

Ambrose Little — Thu, 11 Jun 2009 01:42:17 +0100

Hi GollyJer, from your comment, I have to guess that maybe you didn't look at Luke W's article. He calls out specific usability issues that suggest top aligned is, as a rule, best, at least for Web. The key thing seems to be path to completion.

Suggestion: Alternating Row Colors

Ambrose Little — Wed, 10 Jun 2009 22:39:25 +0100

Hi djzoos, yeah, good catch. I just updated that so it is no longer row stripping. :) Thanks!

Suggestion: Alternating Row Colors

Allard van Helbergen — Wed, 10 Jun 2009 16:16:30 +0100

@Sources: It's 'Row StriPing' ;)

Suggestion: Left Aligned Labels

Jeremy Gollehon — Wed, 10 Jun 2009 00:18:34 +0100

I'm new here and this is the first pattern I looked at as the title grabbed my attention given the research I've done on the subject.

I'm really surprised by this pattern especially given it has three stars and is "approved by the patterns council". Not sure what that is yet.
Anyway... Both of the sited sources conclude that vertical labels are the best, with horizontal but RIGHT justified labels next best, and horizontal LEFT justified labels the least effective.

I think this pattern is more of "it looks better" than "it's more usable".

Suggestion: Number in Range Input

dfbaechtel — Thu, 16 Apr 2009 12:39:46 +0100

How about using a guage and set the dial position using a click. Or a Slider or Bar Graph input.

Suggestion: Smart Menu Items

Simon Jones — Fri, 20 Feb 2009 00:28:23 Z

I Office 2007, Microsoft have abandoned this pattern to a large extent because it can confuse the user. Previously the command " Table | Show Gridlines" in Word would change to be "Table | Hide Gridlines" if gridlines were shown. Now, in Word 2007, the command is always "Show Gridlines" but the button is shown selected or unselected to indicate its current state and therefore the consequence of clicking the button. Usability testing shows this lets users find the relevent command faster because it is always called the same thing.

Suggestion: Button Groups

Simon Jones — Thu, 19 Feb 2009 23:51:14 Z

The standard actions at the bottom right of a window are OK, Cancel, Apply & Help in that order. (Miss out any buttons which don't make sense in your circumstances.) Any other order will confuse users and lead them to dither and/or click the wrong button.

Suggestion: Multiple Selection from a Small List

Simon Jones — Thu, 19 Feb 2009 23:45:22 Z

You may need to consider having a button to show only the selected items in the list to save the user having to scan through a large list to find the one or two selected items.

Suggestion: Multiple Selection from a Small List

Simon Jones — Thu, 19 Feb 2009 23:42:34 Z

If you have a column of checkboxes in a grid, the "Select All"/"Unselect All" function can be given to the column header - an icon that looks like multiple checkboxes and a "Select All" tooltip work well for making the function discoverable.

Suggestion: Input Prompt

Simon Jones — Thu, 19 Feb 2009 23:31:42 Z

It is best if the prompt is in a slightly different colour to regular data - EG grey rather than black. It would be even better if the prompt didn't disappear until the user started to type rather than just if they enter the field.

Suggestion: List Sorter

Simon Jones — Thu, 19 Feb 2009 23:15:52 Z

Drag & Drop is even better if you can select a range of items and drag them rather than being limited to one item at a time.

Suggestion: Top Aligned Labels

Simon Jones — Thu, 19 Feb 2009 23:10:56 Z

Making labels bold makes they appear more important than the data.
Making your eye scan two lines for each piece of data is going to take longer than if the label and field are both on one line. You can end up with a very scappy layout using this pattern if you're not careful.

Suggestion: Right Aligned Labels

Simon Jones — Thu, 19 Feb 2009 23:04:31 Z

This works well if the user will mostly understand the data without refering to the labels or the data is mostly filled in already. If the user needs to scan the labels to find the information they want or where they have to enter data it is not so good because it takes longer to scan the labels when they don't all start in the same place. Left aligned labels may be better in those circumstances.

Suggestion: Data Tips

erinlynnyoung — Wed, 11 Feb 2009 23:19:34 Z

In this article, http://www.uie.com/articles/subtle_interaction_design/, Netflix reports that in usability testing, they found that 250ms (a quarter of a second) was the ideal delay before the hover effect pops up. This delay helps you to avoid the flashing effect you'd otherwise see as you move mouse across a page.

Suggestion: Navigation Tabs

erinlynnyoung — Wed, 11 Feb 2009 22:50:17 Z

Sticking with a single row of tabs. 2 rows of tabsclutters the visual hierarchy - is row 2 at the same level, or beneath, row 1?

Example: Data Visualization

salsafreakpr — Mon, 19 Jul 2010 15:10:01 +0100

This example is Verizon’s Family Locator which is a simple map control embedded in a web page with push pins displaying saved locations of family members whereabouts. Note that the user can add to the map public locations (partially shown below) such as Schools, Emergency Services, Entertainment, etc. Clicking on the Locate button (shown below as Unavailable) allows the user to quickly zoom in to find the exact location of a person (actually, usually a person’s cell phone).