Hello world & welcome to my very first GottaQuirk blog post. It’s great to be here :)

Being a UX designer, part of my responsibility is to come up with design ideas for the creation of web standards-compliant, easy-to-use and compelling online user interfaces. Interfaces that are most often a combination of a number of different GUI Controls, page elements & information visualisation elements.

I am always having to produce interface wireframes (basic visual guides used to suggest the layout of a website) for an endless number of clients across many different market segments. When you do something often enough, you have to ask whether it's really necessary to reinvent the wheel each time we use certain page elements or whether there are any useful resources that a person in my position can access?

Thankfully there have been many who have travelled down this road before, and it is from their successes and failures that we can learn.

What’s a Design Pattern or Pattern Library?

It has long been common practice to use recurring solutions to solve common problems. Such solutions are called design patterns. Design patterns are essentially used as standard reference points for user interface designers and these catalogues of creative UI solutions all have examples of previous implementations for you to check out. Design patterns have not only been used for many years in software development, but they are also used for other design related industries such as architecture.

Benefits of using design patterns?

Creating and using patterns promotes software reuse; a pattern is designed once and is used many times. Reuse of patterns potentially lowers production costs and saves time by eliminating redesign. Another great aspect of design patterns is that the pattern user does not need to know how to design a pattern. They simply need to know what problem the pattern solves, how it is solved and the consequences of applying it. You can share patterns within a project, within a company, or across many companies. The limitations of a pattern are determined by the pattern design and the intent of the pattern creator.

"Ok, show me the good stuff!”

When the time in the project comes to take all of your research and transform it into really usable and, hopefully, world-class user interfaces, how do you know what user interface elements to use and which ones work better than others in the given context of your project?

Well, today I'm going to be talking about and giving you an overview of one pattern library in particular - Quince - a beautifully managed online directory of UX design patterns from international software development house, Infragistics.

The application is basically an organised collection of various interface patterns. Each pattern is part of a “problem”, and several examples are usually provided as viable solutions. Each of these problems is also accompanied by a bit of text describing the solution and providing tips on things like accessibility and what one should look out for when implementing them. They are incredibly useful. Check it out below

Firstly, there are a number of different ways to navigate the Quince pattern library.

You can browse:

• All the patterns alphabetically
• By User Tasks (like “Data Entry” or “Sorting lists”)
• By Tag Relations
• By Wireframe

Here’s the landing page of the application:

And here’s an alphabetical view:

As mentioned earlier, you can also browse by something called “tag relations” which shows an interesting mindmap-like chart. Explore by tag relations looks something like this (it changes based on the actual tagging going on in the catalogue). The idea here is to explore patterns through their relationships, which are based upon similar or related 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 its associated 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 how the related patterns might be used spatially within an interface. It also goes to show how these elements interact with eachother on a typical layout. You can also filter the display of patterns in the ‘view by tag’ filter on the right.

The Explore by User Tasks view is a way to find patterns based on how people actually use them. They may need to find stuff, analyse something, enter information or get somewhere. This view helps you find patterns that are related to those tasks.

Of course, finding and discovering patterns is awesome, but it is only part of the story. What about the patterns themselves? For that there is the Interactive Pattern Viewer that also shows the pattern detail window (the Problem, Solution, Context, Rationale, and Implementation guidelines) so that you can read through the detail while keeping the examples visible as a visual reference point throughout.

You can also click to view examples in their original size by clicking on the example you’ve selected.

Additionally you can use the ‘Pop out’ link to read the original pattern document in HTML view, which you may find easier for reading, and this view also supports a Print style sheet for printing. Pretty nifty for offline reading:

Because user-generated libraries like this rely on the community to submit content, users are able to sign up to be able to submit examples of patterns they’ve implemented on their own projects and users are encouraged to give ratings on each pattern. There’s a difference with this rating engine though. As you’ll see below, the ratings are not like your normal ratings of “like” or “dislike” as you see in Facebook. Instead the ratings indicate the general level of confidence in each pattern and indicate the number of times the user community has used the patterns in their own projects. 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. To get the third star, it needs to be reviewed by the Patterns Council. (Note: Right now the Patterns Council only consists of folks from Infragistics who have been instrumental in creating Quince, so I’m not sure the use of the word “Council” is fitting.)

Ok, that sounds too good to be true, what’s the catch?

Yes, the application itself is pretty cool, fine and dandy, but there is a major drawback that I simply have to mention.

For the full Quince experience, you need Microsoft’s Silverlight 2 framework installed in your browser. Silverlight is essentially Microsoft’s response to Adobe’s ever-popular Flash development platform. Even if you do have Silverlight installed, any attempt to access the site with previous versions of Silverlight will simply return an error screen. You have to use version 2.0.

While some may argue that it’s great for new technologies to be developed to increase competition and spark innovation, I simply think that, in this case specifically, it’s a serious barrier for people out there who don’t necessarily get that warm and fuzzy feeling when thinking about having to install and use another “proprietary” Microsoft platform.

Where can I go to find more on this topic?

The next time you find yourself battling with what could be a common design problem, or you've simply run out of ideas and need some inspiration, check out Quince and some of these other fabulous pattern library and design resources I've listed below. I'd love to hear your feedback on which ones work best for you.

As I always say “Don't work hard, work smart!”

• Pattern Tap
• UI Pattern Factory
• Yahoo’s UI Design Pattern Library
• Welie UI Patterns
• Design Snips
• UI Scraps
• Designing Interfaces
• UI Patterns.net
• Designing Social Interfaces
• Factory Joe Patterns
• Konigi UI Patterns
• UI Patterns
• Pattern Browser
• Smiley Cat Design Elements
• Blink UI Library
• 40 Useful UI
• Resources from Smashing Magazine
• Mepholio
• UI Design Patterns
• Info Design Patterns
• CSS Bake
• Morville’s UI Collection
• Web Design Practices
• Essential UI Design
• Controls
• Interaction Patterns
• Style Ignite