Introducing Quince - A UX Design Pattern Explorer

Ambrose Little / Monday, February 02, 2009

Howdy folks!  I'm really happy to announce that Infragistics has launched a really cool (if I do say so myself) new tool for you.  It's all based around the idea of design patterns, which most of us are familiar with, but it is focused in on user experience (UX) design patterns in particular.

Now we've been thinking about and promoting UX design patterns for some time.  In the past, we've listed several catalogues on our UX resources page:

We have presented on them at Devscovery and elsewhere, and we've been really digging into them ourselves and have found them to be invaluable resources.  But something has been lacking! There are no good tools that make these patterns usable, and there isn't much community to speak of around them. 

We at Infragistics thought that we could help and fill the gap--helping to make UX design patterns more findable, more discoverable, more usable, and, we hope, more communal and social.  To do this, we built a new tool called Quince.  [That's quince, not the number 15 in Spanish!]

This is the start view for Quince.  You can see that you can search for patterns by keywords or explore all patterns, by task, by tag relations, and by wireframe.  We hope that these facilities will help people find specific patterns they're looking for, explore for and discover patterns they might not know about, and stumble upon patterns they hadn't even thought about.

Explore by tag relations looks something like this (it changes based on the actual tagging going on in the catalog).  The idea here is to explore patterns through their relationships, which are based upon like tags, e.g., patterns tagged with Navigation were also tagged with Data Entry and so on.

This is the Explore by Wireframe Map view.  The idea here is to show a stereotypical UI wireframe and elements and to show where the patterns are typically located within it.  This has the dual benefit of helping people find patterns they think they've seen in particular areas of the UI as well as helping people discover spatially and interactionally related patterns they might not otherwise discover.  You can see that you can filter the patterns in the view by tag on the right.

The Explore by User Tasks view is a way to find patterns based on how the people who you are building software for need them.  They may need to find stuff, analyze something, enter information, get somewhere, etc., and this view helps you find patterns that are related to those tasks.

Last in the ways to explore is the Explore by All Patterns.  This approach is particularly useful if you know the pattern name you're looking for--you can use the Alphanumeric Filter Links (a pattern in Quince) up top to quickly filter based on the first letter of the pattern name.  You can also use the tag filters on the right to filter the list--together these form an implementation of Faceted Navigation (another pattern in Quince).  We used quite a few patterns building Quince itself!

Of course, finding and discovering patterns is awesome, but it is only part of the story.  What about the patterns themselves??

For that we have an Interactive Pattern Viewer.  This view has been optimized for 1280x1024 screens (as shown in this screen shot).  While most of the other views targeted 1024x768 as a baseline (though we do use Liquid Layout to take advantage of larger resolutions), we found we needed more space to optimize this one because we wanted to show the examples up top in the carousel as big as possible and also show the pattern detail (the Problem, Solution, Context, Rationale, and Implementation) in the same view--so that you can read through the detail while keeping the examples visible as a visual reference point throughout. 

(We thought this capability of being able to read through it fully with the examples always in view was valuable enough to create two scrollbars, even though that's normally not ideal.  Let me know if you agree or disagree!)

Now, on this view, you can:

  1. Look through the examples at a potentially scaled state in the carousel and read about them in the accompanying infobox. 
  2. Read and fully understand the pattern using the pattern detail viewer.
  3. Indicate that you use this and comment on what worked and what didn't in the From the Field area.
  4. Share your own examples using the I Have an Example button--I hope this is widely used as it will make Quince even more valuable than it already is!
  5. Make suggestions for improving the pattern detail and/or example using the This Could Be Better section.
  6. Bookmark and share with friends using the tools in the Do Stuff section.
  7. Subscribe to various feeds to stay on top of what's happening in Quince.
  8. You can click to view examples in their full/original size by clicking on the current example as shown next. 
    In this view you can use the navigation arrows at the top just like in the carousel to navigate through the examples in full view.  (Tip: You can also use the arrow keys in this view, and Esc works to close most dialogs in Quince.)
  9. Lastly, you can use the Popout link to read the original pattern document in HTML view, which you may find easier for reading, and this view also supports a Print stylesheet for printing.  (Together, these make Alternative Views of patterns in Quince--another pattern.)

So that's a quick tour of the Interactive Pattern Viewer and the different ways to explore in Quince.  There's one more thing to note.  We hope that Quince will help build a better patterns community to ultimately make our collective software design better.  Part of that is the easy participation you can do around existing patterns in the Interactive Pattern Viewer, but we (Infragistics) don't want to be the voice from on high, telling you how things should be and what are or are not patterns, so we've made a way for you to Propose a Pattern.

Proposing Patterns

You have to sign in to do this, but that's so we can give you credit for your contributions!  As you'll note if you hover on your name in the sign in status area, anywhere in Quince you participate, we'll show your profile that tells others just how much you're in to the Quince community.  You can customize what is shown there by clicking on your name up there:

Pattern Ratings
One last note..  You might note the "Uses N patterns." community stat.  We thought about letting people rate patterns using, e.g., the star system, but we asked ourselves if this made sense.  What's important with a pattern is not so much how much we like it but whether or not people are actually using it--the more it is being used, the more value it must be seen to have and thus the more confidence we can have in that pattern. 

So we came up with the idea that your saying that you use the pattern (in the From the Field area of the pattern viewer) is a sort of vote of confidence.  The more people who use a pattern, the more confidence we can have in it.  If you hover over the stars in the pattern viewer, it explains the ratings: 

When a new pattern is proposed, it starts with no one using it (no stars), and as more people say they use it, it gets more stars.  This is, by the way, similar to the way Alexander rates patterns--the stars in his books indicate their level of confidence in the pattern.  To get the third star--the golden seal, as it were, it needs to be reviewed by the Patterns Council. 

Right now the Patterns Council is folks from Infragistics who have been deep in creating Quince (the Quince Team), but we'll be watching the community for others who demonstrate their knowledge of patterns and hope that those folks will be willing to further share their expertise by reviewing proposed patterns and helping guide the Quince patterns community.  If you think you're a candidate, do feel free to contact us.

Uncle Quince Wants You!
Having people like you propose new patterns, share your examples, and sharing your insights of how you used it and how the patterns can be improved will make Quince so much better.  So we hope you'll consider becoming an active member.

In any case, we hope that you will find Quince as useful as we think it is.  Infragistics is committed to supporting the Quince and patterns community. 

Interested in Private Libraries?
One addition we think folks will love is to be able to have private corporate/domain-specific libraries of patterns.  We have the infrastructure in place to allow you to plug your patterns into Quince and use them (in a secure fashion, of course!) to help your teams better collaborate and share within your organizations.  Let us know if you are interested in that.

Discuss Quince and UX Patterns
We also want to encourage discussion of the tool itself and how we can improve--what new ways we can help people find, discover, and use design patterns--as well as encourage open discussion of UX design patterns in and outside of Quince, so we set up a forum just for that (uses same credentials as Quince and!  Please if you have any suggestions or questions, don't hesitate to jump in there! 

What Are You Waiting For? :)
Stop reading my blathering! Go experience Quince for yourself:



Ambrose Little
Quince PM and IxD