http://quince.infragistics.com/See new examples people are sharing for patterns in the Infragistics Quince UX Patterns Explorer.en-usWed, 30 Sep 2009 16:33:19 +0100http://quince.infragistics.com/favicon.icohttp://quince.infragistics.com/Examples09602a5d-cbb6-47d7-8eec-0093f39a9ff2http://quince.infragistics.com/#/Main/ViewPattern$pattern=Closable+Panels/PatternExamples$id=3<br></br>Microsoft Expression Design 2 uses closeable panels in the property editors, both for task-oriented section (like modifying the appearance or adding effects) and for hiding the less-commonly-used controls.<br></br><img src="http://quince.infragistics.com/Patterns/cf32e008-8306-4319-a560-acca9debb587/rId22.png"/><br></br>Mon, 15 Jun 2009 18:24:00 +010035637590-2eb3-482c-8b3e-00a4d3da0faehttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Corner+Treatments/PatternExamples$id=4<br></br>This example shows how angles can give a relaxed looking too. For tabs, angles make sense as they allow them to overlap visually without hiding the entire adjacent tabs.<br></br><img src="http://quince.infragistics.com/Patterns/ebeefe81-db19-4688-8d18-a4c853fdd892/rId17.png"/><br></br>Fri, 12 Jun 2009 18:44:00 +010016da52e4-54b5-4cf4-8820-00f6ab141e1fhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Liquid+Layout/PatternExamples$id=7Jithesh<br></br>Times Reader 2.0 has a very good liquid layout that is generated using an algorithm that determines content to resize the layout. The approach is a deviation away from the traditional template based layout design methods.<br></br><img src="http://quince.infragistics.com/Patterns/Liquid Layout/Examples/0431b078-4441-4e61-bfd9-2cf525a0831b-TR.png"/><br></br>Fri, 22 May 2009 05:54:38 +0100ae232d6b-0eb2-454f-93b2-0128ad3bb8b7http://quince.infragistics.com/#/Main/ViewPattern$pattern=Responsive+Disclosure/PatternExamples$id=3plusonetwo<br></br>Hotel preferences are initially limited but expand to a complete list when an option is selected or the "Show more" link is clicked.<br></br><img src="http://quince.infragistics.com/Patterns/Responsive Disclosure/Examples/fdc98cc0-8083-4121-9420-b37e0a3de483-expedia_prefs.jpg"/><br></br><a href="http://www.expedia.com/Hotels"/>Thu, 05 Mar 2009 01:45:12 Z1d04b500-a3b1-42ff-99e0-017c7a15d330http://quince.infragistics.com/#/Main/ViewPattern$pattern=Inline+Validation/PatternExamples$id=1<br></br>The primary example shows a selection from Yahoo’s sign up form that goes above and beyond inline validation, also offering alternatives that would work.<br></br><img src="http://quince.infragistics.com/Patterns/efb68767-0c0d-48da-9dab-d398ae1d7e8c/rId8.png"/><br></br>Mon, 15 Jun 2009 17:37:00 +0100ccdfb78a-7796-49c8-b2dc-0290bc5ed80dhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Magnetism/PatternExamples$id=4<br></br>OmniGraffle’s palettes use magnetism to snap to each other and also have a neat, strong magnetism to snap to the edges of the screen itself to make it really easy to position them on the edges. <br></br><img src="http://quince.infragistics.com/Patterns/16249792-81a3-44c2-bb87-4a8b880f381f/rId14.png"/><br></br>Tue, 13 Jan 2009 22:13:00 Z56417d89-1630-4d74-95c7-02a8eb2858bfhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Preview/PatternExamples$id=8<br></br>Infragistics AppStylist lets designers preview the effects of the styles they’re building for applications.<br></br><img src="http://quince.infragistics.com/Patterns/30b225bb-4ebb-416f-a7a1-c5f486c4d0e8/rId29.png"/><br></br>Sat, 13 Jun 2009 19:08:00 +0100c0e71596-c30e-4bcb-ad09-02b635057df8http://quince.infragistics.com/#/Main/ViewPattern$pattern=Local+Zooming/PatternExamples$id=1<br></br>The primary example of DateLens is a PocketPC and Desktop calendar application. It shows several months of the calendar, and when you click on a date, that day’s schedule is displayed using a Transition. Note that the day’s schedule has both maximize and minimize buttons. If you click the minimize one, it will go back to the monthly view. If you click the maximize button, it will further zoom into that day.<br></br><img src="http://quince.infragistics.com/Patterns/263ee0d9-0544-4cab-a44b-3c6209a2102c/rId9.png"/><br></br>Tue, 13 Jan 2009 22:05:00 Zf8e1f5d7-6ac1-4417-b41c-02b9930a72efhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Data+Tips/PatternExamples$id=3<br></br>Yahoo Financials shows the data tips always in the same place, at the top of the chart.<br></br><img src="http://quince.infragistics.com/Patterns/faadc383-22ba-414f-9bd5-f517316c860c/rId27.png"/><br></br>Mon, 15 Jun 2009 18:12:00 +01008812c5e4-5f4a-47b0-8c06-02cba4fe70f7http://quince.infragistics.com/#/Main/ViewPattern$pattern=Primary+Action/PatternExamples$id=7<br></br>Twitter takes this pattern to a daring extreme. On the settings view, the main task is to tweak settings and ultimately save those tweaks, so the big button at the bottom does that; however, off to the left as a plain link is the action to delete the account, which indeed is tangential (beyond secondary) for what you’d expect on this view, so it’s good that it is so different and even out of the way.<br></br><img src="http://quince.infragistics.com/Patterns/6c74208b-9b1d-4cfe-a77e-28371784c7e0/rId20.png"/><br></br>Tue, 23 Dec 2008 19:03:00 Z06331b3c-30b0-4cc5-8a21-0368eb345dcehttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Hub+and+Spoke/PatternExamples$id=5<br></br>FaceBook has an extensible application model and uses its your home page and, especially, Applications menu as a hub to launch into the individual spokes. It does have perhaps a bit more control in the spokes themselves (serving ads and facilitating links), but it is essentially built on this pattern.<br></br><img src="http://quince.infragistics.com/Patterns/9206850d-8383-49e8-8109-50957f8f6138/rId16.png"/><br></br>Fri, 30 Jan 2009 01:09:00 Ze809bd4c-7c40-4b3d-a69f-037e173f385fhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Liquid+Layout/PatternExamples$id=1<br></br>In the primary example, iGoogle’s page changes the content layout when the page is resized. Each section changes it size, rearranging its content in a different way. The YouTube widget adds more videos. The calendar widget is kept centered, and the text content is unwrapped. <br></br><img src="http://quince.infragistics.com/Patterns/9bd7c0dd-9450-46bd-b2fc-7a8bc1342814/rId8.png"/><br></br>Sat, 13 Jun 2009 17:49:00 +010021121b8c-9189-4a36-9e8f-03b6032208b8http://quince.infragistics.com/#/Main/ViewPattern$pattern=Treemap/PatternExamples$id=1<br></br>The primary example for this pattern comes from the Smart Money Market Map. Size and color of each block are used to represent the amount of recent gains or losses. Users can quickly get a sense of market behavior just by glancing at the map.<br></br><img src="http://quince.infragistics.com/Patterns/dd1a3f60-aa23-40aa-97a4-61aab12cd61b/rId8.png"/><br></br>Mon, 15 Jun 2009 15:20:00 +01004eb2fd7a-8645-45e1-9819-040f2ab4c077http://quince.infragistics.com/#/Main/ViewPattern$pattern=Two-Panel+Selector/PatternExamples$id=4<br></br>Mac Office has a Project Gallery (similar in concept to the New Microsoft Office Document tool for Windows). It shows the idea of having categories as the things in the list panel, and it uses nice iconic representations of the items in the details panel.<br></br><img src="http://quince.infragistics.com/Patterns/b5e52a7b-3f8f-458e-9da9-cbe03eb8c778/rId28.png"/><br></br>Mon, 15 Jun 2009 15:23:00 +01004e7a3c31-fd44-4bc3-98ad-04c31bd6fae0http://quince.infragistics.com/#/Main/ViewPattern$pattern=Journal+Navigation/PatternExamples$id=4<br></br>Live Maps is another good example of an Ajax Web application that makes intelligent use of the browser’s built in journal navigation facilities.<br></br><img src="http://quince.infragistics.com/Patterns/a7f49049-cf82-4c13-8c30-12d460082623/rId13.png"/><br></br>Mon, 15 Jun 2009 14:55:00 +0100039276c4-4717-4036-9450-04c8e6db93e5http://quince.infragistics.com/#/Main/ViewPattern$pattern=Alternating+Row+Colors/PatternExamples$id=2<br></br>This example comes from NJ Transit’s Northeast Corridor line schedule. The colors have low saturation and match their overall palette. They take it a step further and provide guidelines for major stops. It is a pretty busy design, but it serves the purpose in this case. Since they distribute these in print, it is important to conserve space, and the number of columns far outstrips the number of rows for the schedule, so no spacing makes sense. Also, since they opt to not use a neutral background color (of white) for most of the row colors, it is actually less noisy to use a red column line than it would be to use white space between columns.<br></br><img src="http://quince.infragistics.com/Patterns/58fb1be2-1777-419d-981a-ab536e041403/rId20.png"/><br></br>Fri, 12 Jun 2009 19:12:00 +0100bfe37063-01e6-478f-bc52-04d8904a4bd5http://quince.infragistics.com/#/Main/ViewPattern$pattern=Paging/PatternExamples$id=1<br></br>The primary example is from Google. The number of O’s in the “Gooooooooooooogle” above correspond to the number of search result pages, and become part of the visual indication of what page you are currently viewing.<br></br><img src="http://quince.infragistics.com/Patterns/97d2db8e-01a4-4b93-aa64-a01a46bd0e50/rId9.png"/><br></br>Fri, 12 Jun 2009 22:16:00 +010073692d07-66b1-4bca-972e-05bce3a578e0http://quince.infragistics.com/#/Main/ViewPattern$pattern=Intriguing+Branches/PatternExamples$id=3<br></br>Amazon.com is probably the king of intriguing branches. When you are looking for a product, it is very easy to get distracted and sucked into exploring related possibilities. This example shows a couple of their techniques—suggesting package deals as well as products others bought with this one.<br></br><img src="http://quince.infragistics.com/Patterns/f96c4082-67da-45d8-8fa1-1eb08ef4625e/rId14.png"/><br></br>Mon, 02 Feb 2009 03:31:00 Z486a6b8a-e6f1-473f-87cc-061fbd1b8661http://quince.infragistics.com/#/Main/ViewPattern$pattern=Preview/PatternExamples$id=5<br></br>Google Picasa lets you apply different filters to an image, and it shows the result after they are applied. This app blends Preview and Undo in that if you are happy with the preview, it sticks, but you can easily undo it as well.<br></br><img src="http://quince.infragistics.com/Patterns/30b225bb-4ebb-416f-a7a1-c5f486c4d0e8/rId23.png"/><br></br>Sat, 13 Jun 2009 19:08:00 +0100ed8320d5-4743-4284-e7ad-075f489f09a4http://quince.infragistics.com/#/Main/ViewPattern$pattern=Wizard/PatternExamples$id=9Ambrose Little<br></br>This is a good example of how you can offer people the guided (wizard) approach or the advanced (just let me get directly at all the knobs) approach. You might argue this is also an example of Clear Entry Points.<br></br><img src="Patterns/Wizard/Examples/24a12684-bf35-4b02-b8a7-7d10d5e70d6f-advance-guided.png"/><br></br><a href="http://turbotax.intuit.com/"/>Sat, 07 Feb 2009 13:54:35 Zb66d8ab8-4ca4-4808-934d-0760efb3c07fhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Primary+Action/PatternExamples$id=9<br></br>This is a less inimical example from GoDaddy in that the primary action is indeed Checkout Now, so it is brighter, while the Keep Shopping (what they want you to do) is a less prominent grey; however, the secondary action is still pretty prominent.<br></br><img src="http://quince.infragistics.com/Patterns/6c74208b-9b1d-4cfe-a77e-28371784c7e0/rId24.png"/><br></br>Tue, 23 Dec 2008 19:03:00 Z46bf3044-17e2-4bf7-a8f0-0761340fb3c5http://quince.infragistics.com/#/Main/ViewPattern$pattern=Alternating+Row+Colors/PatternExamples$id=3<br></br>This example from Infragistics’ ASP.NET toolkit shows the use of alternating colors in a mail client sample.<br></br><img src="http://quince.infragistics.com/Patterns/58fb1be2-1777-419d-981a-ab536e041403/rId22.png"/><br></br>Fri, 12 Jun 2009 19:12:00 +0100923148c1-e34d-4c80-b550-0802a66757b8http://quince.infragistics.com/#/Main/ViewPattern$pattern=Search+Results/PatternExamples$id=4Ambrose Little<br></br>Bing has a couple nice features in the left sidebar that help with exploratory search. The related helps people potentially discover both related information as well as possibly alternative ways to find the same information. The search history helps people keep track of and easily return to prior searches which can help give people more confidence to try different search queries without feeling like they'll loose their current search results and in that way shares some of the same benefits as the Undo pattern.<br></br><img src="http://quince.infragistics.com/Patterns/Search Results/Examples/3f3c388c-5103-460a-9f0c-9b3db9139a0b-search-result-bing.png"/><br></br><a href="http://www.bing.com"/>Wed, 30 Sep 2009 16:33:19 +01006055d325-1e67-4575-8916-0817086e6649http://quince.infragistics.com/#/Main/ViewPattern$pattern=Grid+Layout/PatternExamples$id=2<br></br>This example from Yahoo Pattern’s Library shows how the grid layout can be used to create variety within an overall, common grid structure.<br></br><img src="http://quince.infragistics.com/Patterns/a443a4a8-3a31-414a-a50a-9ab240047df5/rId14.png"/><br></br>Mon, 15 Jun 2009 17:46:00 +01004504e99a-f96a-4f28-9011-089951706aa0http://quince.infragistics.com/#/Main/ViewPattern$pattern=Modal+Panel/PatternExamples$id=1<br></br>The primary example is from Scrivener. Although the Preferences dialog is not, itself, modal, the file chooser dialog for picking the citations manager is.<br></br><img src="http://quince.infragistics.com/Patterns/9673cc08-046a-4aef-90cc-2e6f0e6df29a/rId8.png"/><br></br>Mon, 15 Jun 2009 19:33:00 +0100527ccb62-bf2b-4c2f-a794-08fc113d288ehttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Responsive+Disclosure/PatternExamples$id=2<br></br>This example is taken from an internal application at Northwestern Mutual. Initially only the first group of checkboxes is shown. The second and third boxes are only progressively shown as the user makes selections.<br></br><img src="http://quince.infragistics.com/Patterns/0a2db5cc-d658-4c6f-8983-a0877f1353da/rId10.png"/><br></br>Fri, 30 Jan 2009 02:26:00 Z6dadcaf3-1192-4031-9b6c-0917645fe922http://quince.infragistics.com/#/Main/ViewPattern$pattern=New-Item+Row/PatternExamples$id=1<br></br>The attendee list in Microsoft Outlook 2007 lets people just click in the next row and type a name to add a new attendee to meeting requests.<br></br><img src="http://quince.infragistics.com/Patterns/ce7c16a2-d3f9-4401-936b-f423cf9295bc/rId9.png"/><br></br>Wed, 17 Jun 2009 20:01:00 +010040f4964f-a7b9-45e9-86f8-0a1f3ae83c59http://quince.infragistics.com/#/Main/ViewPattern$pattern=Status+Area/PatternExamples$id=4<br></br>The Adobe Dreamweaver CS3 HTML editor provides information such as the current HTML tag, and uses it as a Command Area for other selections.<br></br><img src="http://quince.infragistics.com/Patterns/01baac68-cd62-4b9b-8431-e5d98a7926c6/rId16.png"/><br></br>Mon, 15 Jun 2009 14:02:00 +0100f0ccf2ce-8d03-424a-9ead-0a3bafb30cefhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Transition/PatternExamples$id=4<br></br>Collapsing and expanding (as in Closeable Panels) is a common candidate for a transition. It usually involves incrementally changing the dimensions of the area that is being collapsed or expanded. In this example, you can collapse/expand the overview window when needed. This shows it expanded; when it is collapsed, it just shows the little chevron indicator pointing down, indicating the expansion direction.<br></br><img src="http://quince.infragistics.com/Patterns/9a652b6a-b71a-4dbc-8239-c2020bfe7236/rId39.png"/><br></br>Wed, 17 Jun 2009 15:40:00 +010055a3252f-4d82-4e3e-89ec-0a73a0a47e9ehttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Cascading+Lists/PatternExamples$id=1<br></br>The primary example for this pattern is a font chooser from TextEdit. You select the collection, then family, then typeface, then size. <br></br><img src="http://quince.infragistics.com/Patterns/565659b5-738d-436b-a6a2-128858645410/rId7.png"/><br></br>Tue, 16 Jun 2009 16:35:00 +0100