Quincehttp://quince.infragistics.com/Keep up on all patterns, comments, and examples to the Infragistics Quince UX Patterns Explorer.en-usTue, 25 Mar 2014 11:29:05 -0400http://quince.infragistics.com/favicon.icoQuincehttp://quince.infragistics.com/Main10f8922b-b913-4d53-bd21-9d0022e8fa97http://quince.infragistics.com/#/Main/ViewPattern$pattern=Data+VisualizationsalsafreakprPattern: Data Visualization<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/10f8922b-b913-4d53-bd21-9d0022e8fa97/10f8922b-b913-4d53-bd21-9d0022e8fa97.png"/><br></br>Mon, 19 Jul 2010 18:49:00 -04002010-07-19T18:49:00-04:00e1b5f40f-1b2f-438f-8cc0-cd01404b2235http://quince.infragistics.com/#/Main/ViewPattern$pattern=MapCedric WagrezPattern: Map<br></br>Display pieces of information (e.g. web sites) as nodes on a Map and the relation between these pieces of information as arcs.<br></br><img src="http://quince.infragistics.com/Patterns/e1b5f40f-1b2f-438f-8cc0-cd01404b2235/e1b5f40f-1b2f-438f-8cc0-cd01404b2235.png"/><br></br>Mon, 15 Jun 2009 18:32:00 -04002009-06-15T18:32:00-04:00eb6cae22-0548-4f48-b60f-a12e187cdab7http://quince.infragistics.com/#/Main/ViewPattern$pattern=DashboardQuince TeamPattern: Dashboard<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/eb6cae22-0548-4f48-b60f-a12e187cdab7/eb6cae22-0548-4f48-b60f-a12e187cdab7.png"/><br></br>Mon, 02 Feb 2009 10:53:00 -05002009-02-02T10:53:00-05:00f96c4082-67da-45d8-8fa1-1eb08ef4625ehttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Intriguing+BranchesQuince TeamPattern: Intriguing Branches<br></br>Strategically place links to related content to attract and keep people’s attention.<br></br><img src="http://quince.infragistics.com/Patterns/f96c4082-67da-45d8-8fa1-1eb08ef4625e/f96c4082-67da-45d8-8fa1-1eb08ef4625e.png"/><br></br>Sun, 01 Feb 2009 22:31:00 -05002009-02-01T22:31:00-05:00efb68767-0c0d-48da-9dab-d398ae1d7e8chttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Inline+ValidationQuince TeamPattern: Inline Validation<br></br>Validate user input as soon as possible and show any validation messages in line with the thing being validated.<br></br><img src="http://quince.infragistics.com/Patterns/efb68767-0c0d-48da-9dab-d398ae1d7e8c/efb68767-0c0d-48da-9dab-d398ae1d7e8c.png"/><br></br>Sun, 01 Feb 2009 22:24:00 -05002009-02-01T22:24:00-05:00336a9aef-2526-4a9b-8e54-a85c5529366chttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Extras+on+DemandQuince TeamPattern: Extras on Demand<br></br>Show the most common or important stuff first, and let people get to extra stuff easily.<br></br><img src="http://quince.infragistics.com/Patterns/336a9aef-2526-4a9b-8e54-a85c5529366c/336a9aef-2526-4a9b-8e54-a85c5529366c.png"/><br></br>Sun, 01 Feb 2009 22:16:00 -05002009-02-01T22:16:00-05:00cf32e008-8306-4319-a560-acca9debb587http://quince.infragistics.com/#/Main/ViewPattern$pattern=Closable+PanelsQuince TeamPattern: Closable Panels<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/cf32e008-8306-4319-a560-acca9debb587/cf32e008-8306-4319-a560-acca9debb587.png"/><br></br>Sun, 01 Feb 2009 22:05:00 -05002009-02-01T22:05:00-05:00b4fde81e-b705-4d42-825a-d37dcb0f12a3http://quince.infragistics.com/#/Main/ViewPattern$pattern=WizardQuince TeamPattern: Wizard<br></br>Guide people to complete their goal using a step-by-step wizard.<br></br><img src="http://quince.infragistics.com/Patterns/b4fde81e-b705-4d42-825a-d37dcb0f12a3/b4fde81e-b705-4d42-825a-d37dcb0f12a3.png"/><br></br>Sun, 01 Feb 2009 21:42:00 -05002009-02-01T21:42:00-05:007ec5d8a9-434a-4ee9-9711-ad6aff36beefhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=UndoQuince TeamPattern: Undo<br></br>Empower people to undo the actions they take while using your software.<br></br><img src="http://quince.infragistics.com/Patterns/7ec5d8a9-434a-4ee9-9711-ad6aff36beef/7ec5d8a9-434a-4ee9-9711-ad6aff36beef.png"/><br></br>Sun, 01 Feb 2009 15:34:00 -05002009-02-01T15:34:00-05:00b5e52a7b-3f8f-458e-9da9-cbe03eb8c778http://quince.infragistics.com/#/Main/ViewPattern$pattern=Two-Panel+SelectorQuince TeamPattern: Two-Panel Selector<br></br>Use two panels, one that shows a list of things and one that shows the contents of what’s selected in the other.<br></br><img src="http://quince.infragistics.com/Patterns/b5e52a7b-3f8f-458e-9da9-cbe03eb8c778/b5e52a7b-3f8f-458e-9da9-cbe03eb8c778.png"/><br></br>Sun, 01 Feb 2009 00:13:00 -05002009-02-01T00:13:00-05:002c6361f1-727f-4103-a64d-942ccabb2372http://quince.infragistics.com/#/Main/ViewPattern$pattern=Tree-TableQuince TeamPattern: Tree-Table<br></br>Show information in a table that allows expansion of rows in a tree-like format to show hierarchical relationships.<br></br><img src="http://quince.infragistics.com/Patterns/2c6361f1-727f-4103-a64d-942ccabb2372/2c6361f1-727f-4103-a64d-942ccabb2372.png"/><br></br>Sat, 31 Jan 2009 21:46:00 -05002009-01-31T21:46:00-05:00ec7edf5e-1984-4cb3-8699-8020e08b6a50http://quince.infragistics.com/#/Main/ViewPattern$pattern=Visual+FrameworkQuince TeamPattern: Visual Framework<br></br>Create an overall visual framework that consistently uses styles, layout, and navigational elements.<br></br><img src="http://quince.infragistics.com/Patterns/ec7edf5e-1984-4cb3-8699-8020e08b6a50/ec7edf5e-1984-4cb3-8699-8020e08b6a50.png"/><br></br>Sat, 31 Jan 2009 20:43:00 -05002009-01-31T20:43:00-05:0034c9692c-5ba4-4758-9daa-32c4dd316ba6http://quince.infragistics.com/#/Main/ViewPattern$pattern=Annotated+ScrollbarQuince TeamPattern: Annotated Scrollbar<br></br>Provide an indicator of significant sections in or near the scrollbar. <br></br><img src="http://quince.infragistics.com/Patterns/34c9692c-5ba4-4758-9daa-32c4dd316ba6/34c9692c-5ba4-4758-9daa-32c4dd316ba6.png"/><br></br>Sat, 31 Jan 2009 19:23:00 -05002009-01-31T19:23:00-05:009205a61d-afa7-492a-aa78-1838a4bad48dhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Few+HuesQuince TeamPattern: Few Hues<br></br>Pick a few hues and base your entire color palette on those, using saturation and brightness for variety.<br></br><img src="http://quince.infragistics.com/Patterns/9205a61d-afa7-492a-aa78-1838a4bad48d/9205a61d-afa7-492a-aa78-1838a4bad48d.png"/><br></br>Sat, 31 Jan 2009 18:56:00 -05002009-01-31T18:56:00-05:00445b1879-b631-4262-b7be-f2dd032acb68http://quince.infragistics.com/#/Main/ViewPattern$pattern=Faceted+NavigationQuince TeamPattern: Faceted Navigation<br></br>Help people gradually find what they want by providing them with various facets that they can use to filter a result set.<br></br><img src="http://quince.infragistics.com/Patterns/445b1879-b631-4262-b7be-f2dd032acb68/445b1879-b631-4262-b7be-f2dd032acb68.png"/><br></br>Sat, 31 Jan 2009 18:52:00 -05002009-01-31T18:52:00-05:009a652b6a-b71a-4dbc-8239-c2020bfe7236http://quince.infragistics.com/#/Main/ViewPattern$pattern=TransitionQuince TeamPattern: Transition<br></br>Use transitions to make visual connections when things change in an interface.<br></br><img src="http://quince.infragistics.com/Patterns/9a652b6a-b71a-4dbc-8239-c2020bfe7236/9a652b6a-b71a-4dbc-8239-c2020bfe7236.png"/><br></br>Sat, 31 Jan 2009 18:41:00 -05002009-01-31T18:41:00-05:00faadc383-22ba-414f-9bd5-f517316c860chttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Data+TipsQuince TeamPattern: Data Tips<br></br>When the user hovers over the target item, show a small window like a tooltip to display additional information about the item.<br></br><img src="http://quince.infragistics.com/Patterns/faadc383-22ba-414f-9bd5-f517316c860c/faadc383-22ba-414f-9bd5-f517316c860c.png"/><br></br>Sat, 31 Jan 2009 18:40:00 -05002009-01-31T18:40:00-05:00f090f64e-4db5-43ac-b984-0ab50e442544http://quince.infragistics.com/#/Main/ViewPattern$pattern=Data+BrushingQuince TeamPattern: Data Brushing<br></br>Enable users to select data points and highlight those same points in the other visualizations.<br></br><img src="http://quince.infragistics.com/Patterns/f090f64e-4db5-43ac-b984-0ab50e442544/f090f64e-4db5-43ac-b984-0ab50e442544.png"/><br></br>Sat, 31 Jan 2009 15:38:00 -05002009-01-31T15:38:00-05:00ebeefe81-db19-4688-8d18-a4c853fdd892http://quince.infragistics.com/#/Main/ViewPattern$pattern=Corner+TreatmentsQuince TeamPattern: Corner Treatments<br></br>Use rounded, odd-angled, or cut off corners on rectangular elements to liven up your UI and add visual interest.<br></br><img src="http://quince.infragistics.com/Patterns/ebeefe81-db19-4688-8d18-a4c853fdd892/ebeefe81-db19-4688-8d18-a4c853fdd892.png"/><br></br>Sat, 31 Jan 2009 14:58:00 -05002009-01-31T14:58:00-05:00fd79ec1a-423c-47c6-b196-841b866926cdhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Command+AreaQuince TeamPattern: Command Area<br></br>Group commands together into a unified area of the interface.<br></br><img src="http://quince.infragistics.com/Patterns/fd79ec1a-423c-47c6-b196-841b866926cd/fd79ec1a-423c-47c6-b196-841b866926cd.png"/><br></br>Sat, 31 Jan 2009 14:43:00 -05002009-01-31T14:43:00-05:00894735b6-7e79-48c0-9892-5d9f5d2f8c7dhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Clear+Entry+PointsQuince TeamPattern: Clear Entry Points<br></br>Give people a set of clear entry points into the application or Web site based on their most common tasks or destinations.<br></br><img src="http://quince.infragistics.com/Patterns/894735b6-7e79-48c0-9892-5d9f5d2f8c7d/894735b6-7e79-48c0-9892-5d9f5d2f8c7d.png"/><br></br>Sat, 31 Jan 2009 14:06:00 -05002009-01-31T14:06:00-05:0008ae7f34-31c4-462b-b736-bcb9bfd19432http://quince.infragistics.com/#/Main/ViewPattern$pattern=Alternative+ViewsQuince TeamPattern: Alternative Views<br></br>Create multiple, alternative views of the same interface that address competing design needs.<br></br><img src="http://quince.infragistics.com/Patterns/08ae7f34-31c4-462b-b736-bcb9bfd19432/08ae7f34-31c4-462b-b736-bcb9bfd19432.png"/><br></br>Sat, 31 Jan 2009 13:41:00 -05002009-01-31T13:41:00-05:00565659b5-738d-436b-a6a2-128858645410http://quince.infragistics.com/#/Main/ViewPattern$pattern=Cascading+ListsQuince TeamPattern: Cascading Lists<br></br>Show a few lists next to each other that allow users to drill down into hierarchical information.<br></br><img src="http://quince.infragistics.com/Patterns/565659b5-738d-436b-a6a2-128858645410/565659b5-738d-436b-a6a2-128858645410.png"/><br></br>Sat, 31 Jan 2009 13:40:00 -05002009-01-31T13:40:00-05:00830770f3-560f-47c2-82a0-0d8ab25c9567http://quince.infragistics.com/#/Main/ViewPattern$pattern=Button+GroupsQuince TeamPattern: Button Groups<br></br>Display related commands using buttons that are grouped together and similarly aligned and styled.<br></br><img src="http://quince.infragistics.com/Patterns/830770f3-560f-47c2-82a0-0d8ab25c9567/830770f3-560f-47c2-82a0-0d8ab25c9567.png"/><br></br>Sat, 31 Jan 2009 13:32:00 -05002009-01-31T13:32:00-05:007b0c4d59-0831-44c8-90f6-b82947b0d6e7http://quince.infragistics.com/#/Main/ViewPattern$pattern=BreadcrumbsQuince TeamPattern: Breadcrumbs<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/7b0c4d59-0831-44c8-90f6-b82947b0d6e7/7b0c4d59-0831-44c8-90f6-b82947b0d6e7.png"/><br></br>Sat, 31 Jan 2009 12:35:00 -05002009-01-31T12:35:00-05:001d9afb77-7864-491a-bb5e-57e5804f122bhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=One-Window+DrilldownQuince TeamPattern: One-Window Drilldown<br></br>Show all the views in an application in one window, changing the windows contents as people navigate through it.<br></br><img src="http://quince.infragistics.com/Patterns/1d9afb77-7864-491a-bb5e-57e5804f122b/1d9afb77-7864-491a-bb5e-57e5804f122b.png"/><br></br>Sat, 31 Jan 2009 00:21:00 -05002009-01-31T00:21:00-05:00e1a01801-8084-4f2a-a57b-1276a0da870fhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=SearchQuince TeamPattern: Search<br></br>Provide users with an easy to use search mechanism.<br></br><img src="http://quince.infragistics.com/Patterns/e1a01801-8084-4f2a-a57b-1276a0da870f/e1a01801-8084-4f2a-a57b-1276a0da870f.png"/><br></br>Sat, 31 Jan 2009 00:19:00 -05002009-01-31T00:19:00-05:00932ecb93-d60d-460a-9679-46d08afa56b7http://quince.infragistics.com/#/Main/ViewPattern$pattern=Table+FilterQuince TeamPattern: Table Filter<br></br>Provide a way to let the users to specify the filters for the data directly above the table.<br></br><img src="http://quince.infragistics.com/Patterns/932ecb93-d60d-460a-9679-46d08afa56b7/932ecb93-d60d-460a-9679-46d08afa56b7.png"/><br></br>Sat, 31 Jan 2009 00:17:00 -05002009-01-31T00:17:00-05:00bd5d109f-804c-486e-96c0-82fac3e8c3f1http://quince.infragistics.com/#/Main/ViewPattern$pattern=Work+WithQuince TeamPattern: Work With<br></br>Provide a way to create, select, modify and delete objects that people need to work with.<br></br><img src="http://quince.infragistics.com/Patterns/bd5d109f-804c-486e-96c0-82fac3e8c3f1/bd5d109f-804c-486e-96c0-82fac3e8c3f1.png"/><br></br>Sat, 31 Jan 2009 00:15:00 -05002009-01-31T00:15:00-05:00dd1a3f60-aa23-40aa-97a4-61aab12cd61bhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=TreemapQuince TeamPattern: Treemap<br></br>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. <br></br><img src="http://quince.infragistics.com/Patterns/dd1a3f60-aa23-40aa-97a4-61aab12cd61b/dd1a3f60-aa23-40aa-97a4-61aab12cd61b.png"/><br></br>Sat, 31 Jan 2009 00:13:00 -05002009-01-31T00:13:00-05:007ae02883-8004-0e10-54d4-ca1fa2fe6121http://quince.infragistics.com/#/Main/ViewPattern$pattern=DashboardTaweesak HinonFrom the Field: DashboardthxWed, 05 Mar 2014 15:42:37 -0500c54a3487-980e-4bd7-afcd-d5e3cfe73780http://quince.infragistics.com/#/Main/ViewPattern$pattern=Input+Hints2429designFrom the Field: Input HintstestFri, 28 Dec 2012 17:16:05 -05003875979a-71b5-4562-a585-dff653a926c9http://quince.infragistics.com/#/Main/ViewPattern$pattern=Active+FilteringAkhilesh TiwariFrom the Field: Active FilteringdsgfsdagasdFri, 02 Nov 2012 11:47:14 -040036cb4175-7baf-4a78-a7dd-f680b0ad533chttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Alphanumeric+Filter+Linksolivier dahan / Dot.BlogFrom the Field: Alphanumeric Filter LinksI used it a few times in Silverlight and WPF apps. It's simple, users always understand, and efficient. The main problem is that on big files it helps not so much... If you've got 2000 items for a given letter, you still need to add another filtering trick... I tried once to use 2 bars of letters, for the 2 first letters of items. It works but UI was not perfect with these 2 bars of letters...Thu, 25 Oct 2012 16:13:55 -0400adea7dc6-306f-4975-b076-2b859de3a4a9http://quince.infragistics.com/#/Main/ViewPattern$pattern=Tab+DialogsArthur LucenaFrom the Field: Tab DialogsIndispensable in interfaces configurations or even in the edition of entries previously made with multiple steps.Mon, 14 May 2012 14:21:47 -0400ab4de046-2d31-41de-a497-a113712ca801http://quince.infragistics.com/#/Main/ViewPattern$pattern=Responsive+EnablingArthur LucenaFrom the Field: Responsive EnablingIn a certain step of a wizard, we had a lot of conditional information that couldn't be in others steps. To not overwhelm the user with a huge amount of fields, we balance the use of Responsive Enabling with Responsive Disclosure - we can say that the first worked best for a group of fields (enabled by a checkbox) and the second worked best to 1 or 2 complementary fields, visible by selecting a certain option or checking a checkbox or radio button.Fri, 20 Apr 2012 22:11:57 -0400652cbb95-bc3d-4d67-8583-95cd1674a007http://quince.infragistics.com/#/Main/ViewPattern$pattern=Multiple+Selection+from+a+Large+ListAkshay LutherFrom the Field: Multiple Selection from a Large ListiPhone's "Compose Message" screen does this very well!Thu, 17 Feb 2011 10:03:54 -0500e0b9ed59-1bcc-466f-8a4f-0c6c90552e1dhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Text+Field+Autocompletiongomez cordobaFrom the Field: Text Field Autocompletioni use this pattern in web application, for search user's of a bussinessMon, 08 Nov 2010 12:22:56 -05004d5a72e6-ea36-4099-9079-020557ce340dhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Few+HuesJon BrownFrom the Field: Few HuesThis is an awsome color scheme. A perfect blend of color, layout and subject matter.Tue, 09 Feb 2010 14:12:23 -0500dcb742e3-8096-4c0c-a572-7d720436597ehttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Text+Field+AutocompletionHeather BFrom the Field: Text Field Autocompletioni use this for a search box on a web site to provide results based in what the user typesTue, 02 Feb 2010 16:29:02 -05009fc4ee0d-5083-457c-8c4c-519cc8b75599http://quince.infragistics.com/#/Main/ViewPattern$pattern=Work+WithIgnacio AlvarezFrom the Field: Work WithMy comment!Fri, 08 Jan 2010 22:00:49 -0500401d92c3-7f88-49cf-806e-e4df08dfdc2ahttp://quince.infragistics.com/#/Main/ViewPattern$pattern=PagingCedric WagrezFrom the Field: PagingI 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.Thu, 18 Jun 2009 04:21:42 -040034b4d154-f69e-4e9c-b9c6-1c6ac03ba23ahttp://quince.infragistics.com/#/Main/ViewPattern$pattern=MapAmbrose LittleFrom the Field: MapAs noted in the third example given, we are using this in Quince.Wed, 17 Jun 2009 13:36:38 -0400fe79ce95-60e4-4983-a311-529fc26c3b28http://quince.infragistics.com/#/Main/ViewPattern$pattern=Tab+DialogsTobias KomischkeFrom the Field: Tab DialogsI use this very often to structure complexity into manageable sub-parts.Fri, 12 Jun 2009 14:48:17 -0400c077f2c7-3e36-4d44-b33b-fd41fb305d25http://quince.infragistics.com/#/Main/ViewPattern$pattern=Right+Aligned+LabelsTobias KomischkeFrom the Field: Right Aligned LabelsI 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.Fri, 12 Jun 2009 14:45:13 -0400c9c5dae1-f82d-4b63-8b1b-a876ae715336http://quince.infragistics.com/#/Main/ViewPattern$pattern=Real+Time+MonitorTobias KomischkeFrom the Field: Real Time MonitorUsed this for a supervisory control system in the pulp and paper industry.Fri, 12 Jun 2009 14:40:42 -04000c1c27da-ae17-4ee5-b8cf-e99532ed277bhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=PagingTobias KomischkeFrom the Field: PagingI use paging for lists when there are so many items that scrolling would be too effortsome to find things.Fri, 12 Jun 2009 14:16:19 -0400fb59ffbd-d35f-42aa-8393-faf99b845febhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=MagnetismTobias KomischkeFrom the Field: MagnetismWe 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.Fri, 12 Jun 2009 14:12:41 -04003af168b1-a622-44bd-863b-958d3364649ahttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Liquid+LayoutTobias KomischkeFrom the Field: Liquid LayoutWe 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.Fri, 12 Jun 2009 14:08:22 -04004c4655f8-af08-40dc-a4c1-96c1e8b3b9e1http://quince.infragistics.com/#/Main/ViewPattern$pattern=Grid+LayoutTobias KomischkeFrom the Field: Grid LayoutI always try to do this. To me, this is one of the most powerful patterns out there!Fri, 12 Jun 2009 13:57:12 -0400f413f49d-6b44-4599-b4c8-b542697010cbhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Edit-in-PlaceTobias KomischkeFrom the Field: Edit-in-PlaceI 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).Fri, 12 Jun 2009 13:53:31 -0400797050ba-9aed-424d-ad5f-a201cc76e485http://quince.infragistics.com/#/Main/ViewPattern$pattern=DashboardTobias KomischkeFrom the Field: DashboardDid this for a supervisory control system in the area of power transmission.Fri, 12 Jun 2009 13:46:02 -04001bc507d1-df82-4f85-bcdb-fa14b74331c1http://quince.infragistics.com/#/Main/ViewPattern$pattern=Active+Filteringmakoto kernFrom the Field: Active FilteringWe 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.Thu, 11 Jun 2009 13:19:03 -0400b87116fe-92ca-4e6a-87c7-bb46fed85e44http://quince.infragistics.com/#/Main/ViewPattern$pattern=Edit-in-PlacebmijuskovicFrom the Field: Edit-in-PlaceI 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.<br/><br/>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.<br/><br/>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.<br/><br/>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.<br/><br/>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.Sun, 29 Mar 2009 18:19:13 -040046499d6a-9c1c-45b4-b480-06bf26f05211http://quince.infragistics.com/#/Main/ViewPattern$pattern=Forgiving+FormatMatt ElandFrom the Field: Forgiving FormatI 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.Fri, 27 Mar 2009 21:37:40 -0400c27c2c17-304b-41fd-b8b4-fd6308e66697http://quince.infragistics.com/#/Main/ViewPattern$pattern=Alphanumeric+Filter+LinksMatt ElandFrom the Field: Alphanumeric Filter LinksI've used this in a plug-in using Microsoft Media Center's gallery UI.Fri, 27 Mar 2009 21:35:11 -04004a998403-e0e3-4662-9e2f-770684863765http://quince.infragistics.com/#/Main/ViewPattern$pattern=Property+SheetFrank GebhardtFrom the Field: Property SheetI 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.Wed, 25 Feb 2009 16:50:14 -0500aefea611-0344-4576-924a-c5257f4c774ahttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Titled+SectionsSimon JonesFrom the Field: Titled SectionsWe make extensive use of Group Boxes and Table Layout Panels in our Windows Applications to break large forms into logical, manageable chunks.Fri, 20 Feb 2009 00:42:56 -0500127cd972-85c4-4434-b6ff-1724268b9c12http://quince.infragistics.com/#/Main/ViewPattern$pattern=Same+Page+Error+MessagesSimon JonesFrom the Field: Same Page Error MessagesWe 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.<br/><br/>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.Fri, 20 Feb 2009 00:35:44 -0500163cbf0b-ae81-4807-b0d7-f4843e43aeaahttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Inline+ValidationSimon JonesFrom the Field: Inline ValidationFor 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.Thu, 19 Feb 2009 23:59:01 -0500e3b69a79-1bda-4fba-aec2-b0e87b670343http://quince.infragistics.com/#/Main/ViewPattern$pattern=BreadcrumbsAlexander SpringerSuggestion: BreadcrumbsfsdfsdfsdfsdfTue, 25 Mar 2014 11:29:05 -040027a967ee-29a6-4fdc-a053-50b0bd500a9bhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=MagnetismPhilippSuggestion: MagnetismGreatThu, 29 Aug 2013 07:56:46 -04008749e2d9-e862-4c13-b654-d7459455ea82http://quince.infragistics.com/#/Main/ViewPattern$pattern=Active+FilteringAkhilesh TiwariSuggestion: Active FilteringdfgsdgdsfaFri, 02 Nov 2012 11:47:29 -0400782b2179-bdae-463a-94dd-1fa41ef86ad0http://quince.infragistics.com/#/Main/ViewPattern$pattern=Alphanumeric+Filter+Linksolivier dahan / Dot.BlogSuggestion: Alphanumeric Filter LinksPattern works well for little set of data. If there are many items for each letter the data still need to be filtered using another way.Thu, 25 Oct 2012 16:13:53 -0400ddc616b9-0601-40e7-bcb9-48dd47d57367http://quince.infragistics.com/#/Main/ViewPattern$pattern=Responsive+DisclosureArthur LucenaSuggestion: Responsive DisclosureAnother correction:<br/>"[...] taking longer to compete than they would [...]" to "[...] taking longer to complete than they would [...]"Mon, 23 Apr 2012 12:35:25 -0400f60a7d99-217b-4ee0-a218-93f2511542d0http://quince.infragistics.com/#/Main/ViewPattern$pattern=Responsive+DisclosureArthur LucenaSuggestion: Responsive DisclosureJust a small correction:<br/>"[...] users may feel mislead [...]" to "[...] users may feel misled [...]"Mon, 23 Apr 2012 12:34:03 -04009db0040d-76ab-411b-84ea-071ab01c0a92http://quince.infragistics.com/#/Main/ViewPattern$pattern=MapKarega AnglinSuggestion: MapI just visited the website and I don't see any map example?Wed, 23 Nov 2011 02:03:36 -0500da35834d-2bca-4f8d-a89d-0d80b3ec49eahttp://quince.infragistics.com/#/Main/ViewPattern$pattern=WizardJohn Wilton WilliamsSuggestion: WizardThere is an additional resource for Wizards that rarely gets mentions. Albeit, it is a little dated, but the core premises and the information/rationale regarding wizards is solid and quite usable to this day. It is Designing Effective Wizards: A Multidisciplinary Approach. Information on this text can be found here: http://www.amazon.com/Designing-Effective-Wizards-Multidisciplinary-Approach/dp/013092377XMon, 07 Nov 2011 15:10:07 -0500a2454e12-4f5a-4be0-8045-180de8de46e5http://quince.infragistics.com/#/Main/ViewPattern$pattern=Tag+CloudPepe CanteroSuggestion: Tag CloudWe need tag input examples. Great job Quince!Fri, 18 Feb 2011 18:20:57 -05004707074a-e0aa-4284-b15e-e47b866277e4http://quince.infragistics.com/#/Main/ViewPattern$pattern=MapMark EdgarSuggestion: MapProvide implementation details like most of the other patterns have.Tue, 05 Oct 2010 17:01:07 -040044dd9af5-976e-4a54-b5e7-e13913bac913http://quince.infragistics.com/#/Main/ViewPattern$pattern=Progress+IndicatorColleen HamiltonSuggestion: Progress IndicatorParallel progress operations as part of a whole are still poorly represented in general.Thu, 05 Aug 2010 19:00:25 -0400b319cf92-cf7a-a396-0b02-048c4c58f0cehttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Data+VisualizationAmbrose LittleSuggestion: Data VisualizationThis 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.Tue, 20 Jul 2010 13:30:33 -0400dfd28841-0e08-442c-a28b-993ad716747ahttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Small+MultiplesDavid CainSuggestion: Small MultiplesHad 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.Mon, 12 Jul 2010 21:49:43 -0400ce0cff97-2873-423c-bf40-dfe77740b8d7http://quince.infragistics.com/#/Main/ViewPattern$pattern=Faceted+NavigationGorazd SvajgerSuggestion: Faceted NavigationRegarding the logical operators: we've had success with combining AND and OR in the following way:<br/>AND for values from different facets<br/>OR within the same facet<br/>E.g.: (blue OR red) AND (tiny OR small), given the Color and Size facets with multiple selection enabled.Wed, 19 May 2010 08:30:21 -04001e8a3c52-4fbc-4a41-9e08-89af04f3a447http://quince.infragistics.com/#/Main/ViewPattern$pattern=Property+SheetGary HowlettSuggestion: Property SheetWould be nide to have a WPF implementation of this.Thu, 25 Mar 2010 16:17:55 -0400fc2fff1b-703f-a6da-59df-c59778042ea1http://quince.infragistics.com/#/Main/ViewPattern$pattern=Input+PromptAmbrose LittleSuggestion: Input PromptMichele, 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.Tue, 23 Mar 2010 23:09:20 -04007888ed61-806d-1ea6-cc39-9b3b2ee9ea3ehttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Input+PromptMichele MarutSuggestion: Input PromptNew 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.phpTue, 23 Mar 2010 20:36:01 -0400d4551de5-71b3-484c-bae3-f69622b76841http://quince.infragistics.com/#/Main/ViewPattern$pattern=Data+Tipsmakoto kernSuggestion: Data TipsI'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...Thu, 08 Oct 2009 19:49:54 -0400d605ab68-013e-75e3-8d1f-dd7600aede86http://quince.infragistics.com/#/Main/ViewPattern$pattern=Structured+FormatMichele MarutSuggestion: Structured FormatThis 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/Tue, 29 Sep 2009 20:27:13 -0400869f8ac3-3aa0-11cc-8147-d45763efddc6http://quince.infragistics.com/#/Main/ViewPattern$pattern=Top+Aligned+LabelsAmbrose LittleSuggestion: Top Aligned LabelsHi David,<br/><br/>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.Mon, 28 Sep 2009 13:21:16 -04001b32b626-e382-3900-902b-a76aea77d182http://quince.infragistics.com/#/Main/ViewPattern$pattern=Top+Aligned+LabelsdavidvbSuggestion: Top Aligned Labelsi 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.Mon, 28 Sep 2009 07:48:05 -040097b0b89f-034a-4b89-aac6-ea129337f0f4http://quince.infragistics.com/#/Main/ViewPattern$pattern=Left+Aligned+LabelsJeremy GollehonSuggestion: Left Aligned LabelsI 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'.<br/>Also, I agree. Path to completion is the key.Wed, 08 Jul 2009 03:33:30 -0400266f2578-f5c2-429d-96ef-b167af81fdb4http://quince.infragistics.com/#/Main/ViewPattern$pattern=MapCedric WagrezSuggestion: Map"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".Tue, 16 Jun 2009 05:24:27 -04004e542d61-acaa-ee3a-f564-ea0a044dc611http://quince.infragistics.com/#/Main/ViewPattern$pattern=Left+Aligned+LabelsAmbrose LittleSuggestion: Left Aligned LabelsHi 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.Thu, 11 Jun 2009 01:42:17 -040077235b94-c721-4833-a856-7a4920f6079bhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Alternating+Row+ColorsAmbrose LittleSuggestion: Alternating Row ColorsHi djzoos, yeah, good catch. I just updated that so it is no longer row stripping. :) Thanks!Wed, 10 Jun 2009 22:39:25 -0400b810ae68-b9e5-46f4-9534-23ce29037ba4http://quince.infragistics.com/#/Main/ViewPattern$pattern=Alternating+Row+ColorsAllard van HelbergenSuggestion: Alternating Row Colors@Sources: It's 'Row StriPing' ;)Wed, 10 Jun 2009 16:16:30 -0400ab81d0e7-cb56-4e14-8b3f-4feb69dcfd3fhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Left+Aligned+LabelsJeremy GollehonSuggestion: Left Aligned LabelsI'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.<br/><br/>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.<br/>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.<br/><br/>I think this pattern is more of "it looks better" than "it's more usable".Wed, 10 Jun 2009 00:18:34 -04003b7f52a0-8710-48b0-ab18-7cd8408735c8http://quince.infragistics.com/#/Main/ViewPattern$pattern=Number+in+Range+InputdfbaechtelSuggestion: Number in Range InputHow about using a guage and set the dial position using a click. Or a Slider or Bar Graph input.Thu, 16 Apr 2009 12:39:46 -0400c5a5028d-1729-4098-8106-9465ac692240http://quince.infragistics.com/#/Main/ViewPattern$pattern=Smart+Menu+ItemsSimon JonesSuggestion: Smart Menu ItemsI 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.Fri, 20 Feb 2009 00:28:23 -050068716856-a52a-413f-877f-8518cf5f9afdhttp://quince.infragistics.com/#/Main/ViewPattern$pattern=Button+GroupsSimon JonesSuggestion: Button GroupsThe 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.Thu, 19 Feb 2009 23:51:14 -0500e0bfc22a-0ab0-431d-9b69-1a49d00df82ehttp://quince.infragistics.com/49x7PAOLI pascalExample: Action Links<br></br>dsfsdf<br></br><img src="http://quince.infragistics.com/Patterns/Examples/5f4bf1bd-7409-42ae-bf1f-94bbb97ecf5f.png"/><br></br>Mon, 05 Nov 2012 09:17:07 -0500562f1532-9bd4-4d95-b1cf-6a3393fe2c8fhttp://quince.infragistics.com/40idArthur LucenaExample: Tab Dialogs<br></br>In this example the main tab has icons, so the user could easily recognize each one of all 8 sections. Besides, there's another level of tabs, inside "Advanced" - most recommended when the sub tabs differ graphically the main tabs, making confusion less occurring.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/4c813a27-0d23-4173-bfb2-95f526fda049.png"/><br></br>Mon, 14 May 2012 14:15:51 -0400216a7333-43ae-64e9-40f8-1fb0c30581a1http://quince.infragistics.com/40edAmbrose LittleExample: Overview Plus Detail<br></br>This shows a common implementation on retail sites where the thumbnail/smaller image is used as the overview, and an overlay shows the detail for an area highlighted on the smaller image.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/3c669bf9-661c-4d47-916a-f4918b250900.jpg"/><br></br><a href="http://www.amazon.com/Wingback-Traditional-Guest-Chair-Black/dp/B002FL3M2K"/>Sat, 12 May 2012 20:45:48 -040080e1b1c8-b7fc-47ce-b9b5-0c2a8a800324http://quince.infragistics.com/3x8uIngrid van BaastExample: Work With<br></br>A mailbox is an example of a work with pattern. In microsoft outlook the items are listed in a table. Each column in the table has it's own shortcut menu with actions for the selected item.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/0158c097-208d-46c3-8baa-139f5a61f2e7.png"/><br></br>Tue, 27 Mar 2012 13:00:02 -0400ab93c214-6685-dbc5-575d-4a781be35767http://quince.infragistics.com/3e5nAmbrose LittleExample: Overview Plus Detail<br></br>Not sure how useful this particular one is, but Google's "What do you love?" site uses OPD to navigate the page.t<br></br><img src="http://quince.infragistics.com/Patterns/Examples/e9a13bfa-983a-4c01-b8ce-857b616dba89.png"/><br></br><a href="http://www.wdyl.com"/>Fri, 29 Jul 2011 13:56:46 -04001657f404-0e2f-47c1-847c-c82502339344http://quince.infragistics.com/2t2fAndy PierrepointExample: Transition<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/354e1c08-e621-4e43-ae88-c0b028573ff8.png"/><br></br><a href="http://www.codeproject.com/KB/windows-phone-7/WP7Turnstile.aspx"/>Tue, 12 Apr 2011 08:36:13 -0400b1c4f29a-a0b2-4548-b7ba-08413480c72fhttp://quince.infragistics.com/2t2eAndy PierrepointExample: Hub and Spoke<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/846e54b5-e452-4cd4-af9f-760fd85d7b41.png"/><br></br><a href="http://en.wikipedia.org/wiki/Windows_Phone_7"/>Tue, 12 Apr 2011 08:30:36 -0400ce5325aa-a86c-4c8d-9f54-adde980f1457http://quince.infragistics.com/2h8rAkshay LutherExample: Search<br></br>Facebook's approach to predictive search<br></br><img src="http://quince.infragistics.com/Patterns/Examples/02631dd7-4d40-4a7d-b99e-d96aa6fc8538.png"/><br></br>Thu, 17 Feb 2011 10:14:43 -050022083eb2-5422-4e25-ad46-118ae3392ce8http://quince.infragistics.com/2h8qAkshay LutherExample: Multiple Selection from a Large List<br></br>This example shows how Facebook implements this pattern.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/2a6b869c-48a3-4220-8562-e7564742cd51.png"/><br></br>Thu, 17 Feb 2011 10:01:27 -050060cdbd85-2b57-4d95-b2b9-4ef819e43b70http://quince.infragistics.com/2h8pAkshay LutherExample: Local Zooming<br></br>A tile view is a kind of local zooming. This example shows Infragistics' Avee Talent Management example.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/c34490c6-06d6-4c49-ac30-cd1919c42706.png"/><br></br><a href="http://labs.infragistics.com/silverlight/lobsamples/2010.3/#/Samples/Scenarios/AveeTalentManagement/AveeTalentManagementView"/>Thu, 17 Feb 2011 09:57:39 -0500a08759a1-5f58-4e65-8c45-bc39e8d7f95ehttp://quince.infragistics.com/2h8oAkshay LutherExample: Large Set Single Selector<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/3b7419ed-c829-4398-854f-d27a813023b7.png"/><br></br>Thu, 17 Feb 2011 09:49:21 -0500af7c6168-81e9-4659-aac6-eb6d8718f4adhttp://quince.infragistics.com/2h8nAkshay LutherExample: Large Set Single Selector<br></br>Facebook does this exceedingly well throughout the site when when choosing a friend from your list of friends is required.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/5024a7d1-104a-46fc-9348-aa894eaf0570.png"/><br></br>Thu, 17 Feb 2011 09:46:27 -050074da9e43-b8bf-488d-a398-cf6373b6e64ahttp://quince.infragistics.com/2h7jAkshay LutherExample: Input Prompt<br></br>Masks are a kind of Input Prompt. This example shows the use of masks in a Silverlight application.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/3e7c8ab5-60eb-46de-8125-e9b8819683fa.png"/><br></br><a href="http://labs.infragistics.com/silverlight/lobsamples/2010.3/#/Samples/Editors/XWMaskedEditor/IsAwaysInEditMode"/>Thu, 17 Feb 2011 09:29:55 -050006d41653-0211-4d44-b41c-4ce528fcc02fhttp://quince.infragistics.com/2h7iAkshay LutherExample: Inline Validation<br></br>This is an example of inline validation in Silverlight applications.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/59cd94d5-9104-4372-b219-9c874c76b81b.png"/><br></br><a href="http://labs.infragistics.com/silverlight/lobsamples/2010.3/#/Samples/Grid/KeyFeature/IDataErrorInfoSupport"/>Thu, 17 Feb 2011 09:20:46 -05007839d532-52ab-45ce-8180-0e9f88b2a398http://quince.infragistics.com/1mk5salsafreakprExample: Data Visualization<br></br>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).<br></br><img src="http://quince.infragistics.com/Patterns/Examples/9529d5fb-35fb-4d9e-b80f-4ff0ba91fc4c.JPG"/><br></br><a href="https://familylocator.vzw.com/landing"/>Mon, 19 Jul 2010 15:10:01 -0400ebdc58bc-e934-41ae-9381-15e24b074c76http://quince.infragistics.com/1mk4salsafreakprExample: Data Visualization<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/491b8e84-37d4-447d-a4ad-5c6bcfd0e317.JPG"/><br></br><a href="http://www.silverlight.net/showcase/"/>Mon, 19 Jul 2010 15:08:03 -040043c2b354-179d-42c7-b83b-c26fb6152ff3http://quince.infragistics.com/1mk3salsafreakprExample: Data Visualization<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/3e47ea97-b018-4941-b3b8-dee3edf0d2c2.JPG"/><br></br><a href="http://demovf.idvsolutions.com/RetailAnalyzer/default.aspx"/>Mon, 19 Jul 2010 15:05:28 -04009d02f331-9c77-40d0-965e-99709a7d33ebhttp://quince.infragistics.com/1734makoto kernExample: Search<br></br>Another example for predicitve seach at apple.com<br></br><img src="http://quince.infragistics.com/Patterns/Examples/22278994-96e8-4785-9146-357d0f07b298-applepredictivesearch.png"/><br></br><a href="http://apple.com"/>Thu, 06 May 2010 16:30:49 -0400822674b4-0589-4cf5-8076-8f075fd9884dhttp://quince.infragistics.com/1733makoto kernExample: Search<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/f2482acf-f54f-49df-99c9-34f3024e79b6-Predictivesearch.png"/><br></br><a href="http://www.pella.com"/>Thu, 06 May 2010 16:24:57 -04000ce8d9c4-2265-4272-b20b-c97bbf2e30c8http://quince.infragistics.com/16ylAntonio GrilloExample: Grid Layout<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/63387131-b64a-4342-83ff-c8a1c4352766-paginemediche.jpg"/><br></br><a href="http://www.paginemediche.it/"/>Fri, 30 Apr 2010 15:55:57 -04005d77cb46-c400-c5e1-8843-befe28062faahttp://quince.infragistics.com/16t1Ambrose LittleExample: Progress Indicator<br></br>What list of progress indicator examples would be complete without the barber shop indefinite indicator. It's an animated gif that spins happily.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/f55ab323-e629-4fdc-bfec-0211e1a734d6-pi_mt_purchase.jpg"/><br></br><a href="http://mediatemple.net/"/>Sat, 24 Apr 2010 20:47:15 -0400cbf67251-8336-bfcf-72a3-e099598ddda2http://quince.infragistics.com/16t0Ambrose LittleExample: Primary Action<br></br>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).<br></br><img src="http://quince.infragistics.com/Patterns/Examples/3d189f22-8d1f-484a-8589-d5681ee13fb2-mt_primary_action_wizard.jpg"/><br></br><a href="http://mediatemple.net/"/>Sat, 24 Apr 2010 20:39:15 -040044f37317-2c3a-4b8f-9275-22ed249f6e53http://quince.infragistics.com/15z1Troy DalldorfExample: Primary Action<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/fa12777c-98a6-48e7-b8c1-0e883f1ee6d9-OmsMoreActions.png"/><br></br>Mon, 29 Mar 2010 17:09:51 -0400004ce851-3a04-1d1e-94e6-f2c40b57eb96http://quince.infragistics.com/12ldQuince TeamExample: Undo<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/3503b0ff-de7f-4792-a6e1-0aefebb6914f-undo_example.png"/><br></br><a href="http://quince.infragistics.com"/>Fri, 22 Jan 2010 21:24:40 -050017302b1b-2ff7-464d-8e23-3e8497e09e4fhttp://quince.infragistics.com/110uMichael IantoscaExample: Active Filtering<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/f8cce2af-1d8a-4e2b-b00c-7e2ba022ae88-active-filtering.png"/><br></br><a href="http://www.ihi.org/imap/tool/"/>Wed, 11 Nov 2009 13:56:55 -0500c392af36-3f08-fef1-eb88-614d629b54c3http://quince.infragistics.com/113jAmbrose LittleExample: Invitation<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/da373224-953b-46bd-b0a3-da06a5515a50-invitation-blogo.png"/><br></br><a href="http://www.drinkbrainjuice.com/download/blogo"/>Tue, 03 Nov 2009 02:34:31 -0500f48cbbb7-8e51-42c6-af9b-1562739c0d50http://quince.infragistics.com/10xaAmbrose LittleExample: Top Aligned Labels<br></br>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.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/af999967-0787-4d2b-be70-ce6b25085401-top-aligned-twitterfeed.jpg"/><br></br><a href="http://twitterfeed.com/feed/newuser"/>Mon, 02 Nov 2009 18:57:09 -0500edd8f9dd-79fe-488b-9796-0b58b896e49chttp://quince.infragistics.com/10wiQuince TeamExample: Dashboard<br></br>This is a Silverlight sample put out by Infragistics using a preview of their Silverlight toolkit. It uses Microsoft Virtual Earth to mashup a dashboard for Customer Relationship Management (CRM). Picking a different customer on the left will show their relationship information.<br></br><img src="http://quince.infragistics.com/Patterns/Examples/d9f0ac93-a5a8-4ee2-ad0b-ebe3869e2fb5.png"/><br></br>Mon, 02 Nov 2009 15:39:00 -0500