Quince : Examples

Example: Overview Plus Detail

Ambrose Little — Fri, 29 Jul 2011 13:56:46 +0100

Not sure how useful this particular one is, but Google's "What do you love?" site uses OPD to navigate the page.t

Example: Transition

Andy Pierrepoint — Tue, 12 Apr 2011 08:36:13 +0100

With the introduction of Windows Phone 7, many developers have found new and interesting ways to design and present their applications. Through the use of beautiful typography, geometric designs and subtle use of motion, the Metro design language enables us to create user experiences that are modern, clean and consistent. One of the characteristic effects of this design language is the well-known "turnstile" transition, featured in the Windows Phone 7 start screen and in some applications that come with the phone. This animation consists in rotating each element of the screen in 3D in succession in such a way that the whole page seems to move fluidly.

Example: Hub and Spoke

Andy Pierrepoint — Tue, 12 Apr 2011 08:30:36 +0100

Microsoft's Windows Phone 7 home screen, called the "Start screen", is made up of "Tiles". Tiles are links to applications, features, functions and individual items (such as contacts, web pages, applications or media items). Users can add, rearrange, or remove Tiles. Tiles are dynamic and update in real time - for example, the tile for an email account would display the number of unread messages or a Tile could display a live update of the weather. Several features of Windows Phone 7 are organized into "hubs", which combine local and online content via Windows Phone 7's integration with popular social networks such as Facebook and Windows Live. For example, the Pictures hub shows photos captured with the device's camera and the user's Facebook photo albums, and the People hub shows contacts aggregated from multiple sources including Windows Live, Facebook, and Gmail. From the Hub, users can directly comment and 'like' on social network updates. The other built-in hubs are Music and Video (which integrates with Zune), Games (which integrates with Xbox Live), Windows Phone Marketplace, and Microsoft Office.

Example: Search

Akshay Luther — Thu, 17 Feb 2011 10:14:43 Z

Facebook's approach to predictive search

Example: Multiple Selection from a Large List

Akshay Luther — Thu, 17 Feb 2011 10:01:27 Z

This example shows how Facebook implements this pattern.

Example: Local Zooming

Akshay Luther — Thu, 17 Feb 2011 09:57:39 Z

A tile view is a kind of local zooming. This example shows Infragistics' Avee Talent Management example.

Example: Large Set Single Selector

Akshay Luther — Thu, 17 Feb 2011 09:49:21 Z

A common scenario is choosing a destination from a large set of options. Travel website cleartrip.com a great job of making this efficient. Its filtering is intelligent and matches airport names.

Example: Large Set Single Selector

Akshay Luther — Thu, 17 Feb 2011 09:46:27 Z

Facebook does this exceedingly well throughout the site when when choosing a friend from your list of friends is required.

Example: Input Prompt

Akshay Luther — Thu, 17 Feb 2011 09:29:55 Z

Masks are a kind of Input Prompt. This example shows the use of masks in a Silverlight application.

Example: Inline Validation

Akshay Luther — Thu, 17 Feb 2011 09:20:46 Z

This is an example of inline validation in Silverlight applications.

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).

Example: Data Visualization

salsafreakpr — Mon, 19 Jul 2010 15:08:03 +0100

A second and very prominent example of the data visualization technology is Microsoft’s Silverlight website. It’s a little tricky to find as you need to go to the Show Case page and then click on the View Map button. This example uses a combination of data visualization aspects mentioned in this pattern such as visual cues, concentric circles, colors, time slider, clusters of POI, etc.

Example: Data Visualization

salsafreakpr — Mon, 19 Jul 2010 15:05:28 +0100

The primary example is IDV Solutions demo Retail Analyzer application which uses SharePoint and their flagship product Visual Fusion. The web page beautifully integrates a Bing Map web-part with highly customizable map-viewer feeds which serve as a filter (and they’re part of the legend) to the data displayed. Data feeds that were set up for the demo below include proprietary retail locations and customer data along with US County demographic data (which can be obtained from a variety of public sources). Note the presence of the Year slider control allowing the data displayed to be further limited to the time window selected.

Example: Search

makoto kern — Thu, 06 May 2010 16:30:49 +0100

Another example for predicitve seach at apple.com

Example: Search

makoto kern — Thu, 06 May 2010 16:24:57 +0100

This is an example from Pella.com on Predicitve search results. Once the user clicks inside the search box, a secondary load will stream additional lightweight JS, CSS and images. As keystrokes are entered and results are returned, those results are cached in the JS/browser to reduce requests to the server. To select a search result, the user clicks on the result or uses the arrow up/down and ‘return’ keys. To close the search results overlay, the user can click outside of the results overlay or press the ‘escape’ key. Search is driven by a configurable algorithm that determines the most relevant results to display with each keystroke. Keyword matching can be configured to return results sorted in alphabetical order or by the assigned weight/rank of each keyword. Keywords with the highest weight/rank will be returned first when competing with other keywords.

Example: Grid Layout

Antonio Grillo — Fri, 30 Apr 2010 15:55:57 +0100

As many ejourals, paginemediche.it is considered a grid-based layout, where each column contains a particular type of informations, according to the paradigma showed below: highlight, topics and tools.

Example: Progress Indicator

Ambrose Little — Sat, 24 Apr 2010 20:47:15 +0100

What list of progress indicator examples would be complete without the barber shop indefinite indicator. It's an animated gif that spins happily.

Example: Primary Action

Ambrose Little — Sat, 24 Apr 2010 20:39:15 +0100

This is a really great example of primary action in the context of a wizard. Most of the time folks will want to keep moving forward, so they make it really obvious while the back you kind of have to search for (may be a bit too subtle even).

Example: Primary Action

Troy Dalldorf — Mon, 29 Mar 2010 17:09:51 +0100

This UI uses the "More Actions" as a means to tuck less important or less frequently used actions out of the primary display area. The original idea is from Google's GMail.

Example: Undo

Quince Team — Fri, 22 Jan 2010 21:24:40 Z

This example illustrates the idea that the Back and Forward buttons in browsers are a kind of Undo implementation—undoing navigation. We support deep linking and Journal Navigation in Quince, so you can see here that I could “undo” my last N navigation actions to get back to an earlier state. For RIAs, there is a pattern to support the Undo semantic, but it is still emerging and it likely depends a lot on your users as to whether or not they’ll expect to be able to undo, say, a commit action using the Back button. This is an updated example for Quince. We trimmed down the titles to focus on the key aspects and help people more easily see the things they've done and be able to pick what they might want to roll back to.

Example: Active Filtering

Michael Iantosca — Wed, 11 Nov 2009 13:56:55 Z

The Institute for Healthcare Improvement's Silverlight 3 application - Improvement Map - allows users to filter an extensive catalog of processes by selecting from 11 different filters. As soon as a value is selected, the list is refiltered to reflect the current criteria allowing the user to find items that meet their needs.

Example: Invitation

Ambrose Little — Tue, 03 Nov 2009 02:34:31 Z

I just really liked the feel of Blogo's purchase invitation. It fits with their overall visual framework and almost makes you want to buy it.

Example: Top Aligned Labels

Ambrose Little — Mon, 02 Nov 2009 18:57:09 Z

I've noticed a few newer sites using unnaturally large input boxes on sign up forms, but the point here is that it is a pleasantly straightforward example of top aligned labels.

Example: Dashboard