Design a UX the Quince way
Written by Mike James   
Friday, 17 September 2010
Article Index
Design a UX the Quince way
Quince - a pattern library

How do you design a UI?

How do you improve the overall UX (User eXperience?

The problem is that there is no science of UI/UX to apply to the situation. However, there are ways that you can  make the design task more than just raw inspiration and Quince can help.


Quince is an online system, from Infragistics, that allows you to examine, create, edit and maintain patterns. You can use it free and there is an enhanced professional version by subscription. For getting started the free version is well up to the job.

First we have to answer the question "what is a pattern" and more specifically "what is a UI/UX pattern?"

Patterns are what you notice if you have been doing any job for any length of time. They are the repeating sets of conditions, strategies and actions that you engage in to get the job done. For example, you might have noticed that when there's data from a database to present to a user  then a data grid control is often involved. It may be obvious to you now but when you first started you probably didn't even know that a data grid control existed, let alone what you do with one. In other words, patterns are the often informal knowledge that you acquire while doing a job.

Given that patterns are so fundamental to getting a job done it makes sense to try to write them down and preserve them. This has more advantages than you might imagine. If you attempt to write down a pattern then you are likely make it clearer than it  was before you tried to write it down. Writing it down also probably means that you will give it a name and this means you can talk to other "experts" about the process that the pattern represents. You might not have been able to do this before you formalised the pattern

Having a formal pattern to look at and communicate about means that you are more likely to evaluate the pattern, improve it and even invent something completely new as an alternative. Finally patterns can serve as a design standard which you can communicate to a team to make sure that they are working together. You can say we, as a group, are going to follow "this" - referencing a pattern and you can even use a written pattern to make sure that you stick to your original intention.

Patterns are very general and crop up just about everywhere but until recently patterns didn't figure much in UI design. Partly because it hadn't really occurred to anyone that UIs had patterns. With the increasing complexity and richness of the UI and the complexity of the sort of data they attempt to present to the end user, it becomes unmistakable that patterns play a part. An experienced designer will propose a UI that presents data and interactions with the data in ways that the novice will only slowly work towards as part of a process of refinement.



A pattern in Quince


In the modern UI it is clear that there are patterns and some are very old, even if they haven't been written down. For example, take the "Alternating row colors" pattern which describes how the lines of a table should have alternating background colors to make it easier for users to scan along a row. It has been in use since the early days of computing when most line printer paper was "piano ruled", i.e. had alternating strips. However if you simply drag-and-drop a data grid onto a page you have to think about making it easy for the user to follow a line without slipping to the adjacent line. It is one of the advantages in taking a patterns approach that actions are suggested to make things better even before you know that there is a problem.





Last Updated ( Friday, 17 September 2010 )