The 12 Patterns for User Interface Design

A few years ago I worked on a project where we needed to look at how to deliver true multi channel applications. It was during this work that I defined a set of User Interface Design Patterns that I believe still hold true today.

The issue that was hurting this customer was it was taking up to 50 days from design to going into production for every screen. This was a lot of time for basically a simple CRUD (Create, Read, Update, Delete) pattern for the User Interface.

For the modern enterprise applications a variety of technologies are coming into play that are reducing the amount of boiler plate code we need to write to achieve these same steps. I am currently looking at the following list of technologies for my Web 2.0 JEE stack.

Dojo<->JSON Rest Store<->JSON<->JAX-RS<->JPA-EJB3

To assist in the use of this approach I still keep coming back to these User Interface Design patterns . They help me to think of what the User Interface is doing and how to map it into service calls to the server. With the server now turning into a true data server and frameworks like Dojo doing the heavy lifting for the User Interface it becomes very easy to map the asynchronous requests to these patterns.

Here are my initial list let me know if you can think of others.

Pattern Name Description Type
Display Form Displays a model object as a form in a read only display Form
Validating Form Presents a model object as a data input form and interacts with a validation service for validation Form
Update Form Update form is based on the Display Form pattern but will display model data and then validate ready for it to be updated Form
Validating Form Wizard The Validating Form Wizard is based on the Validating Form pattern but displays a large form in the style of Paged Wizard, Tabbed Page or Individual Pages. This will depend on the channel device characteristics Form
Simple List This pattern will display an array of model objects in a simple single column list List
Table List This pattern will display and array of model objects in a multi column grid/table List
List to List This pattern is based on a Simple list pattern but will display two lists and allow the moving of data from one list to another and back again List
Linked List This pattern will link multiple list or combo controls together so when a selection on one list is made it may change the information displayed in the other linked list List
Master Detail This pattern will use a Simple List or Table List pattern and link it to a Display Form pattern. When a row on the lists is selected the detailed model object is presented in the display form Composite
Create, Read , Update, Delete This composite pattern is build from the Table List pattern and uses the Validating Form pattern for creating items, Update Form pattern for Update. Composite
Search List This pattern uses a Validating Form pattern linked to a Table List pattern for display of the items that have been searched for Composite
Search Form This pattern uses a Validating Form pattern and is linked to a Display Form pattern for a single item display Composite

Most task worker or business level user interfaces will use a combination of these types of patterns. They can also be used in combination for multi channel solutions where you keep the controller and model elements common across the channels.

The presentation link below shows more detail, here is an example for Master Detail pattern which I use a lot.

image

Intent:

–The master to detail pattern is often used within client facing applications. The requirement to retrieve a record of data and then display the detail associated with is very common in application design. This pattern can be easily mapped to a many-to-one relational schema used within a database design. The data can be displayed in a grid or table type control and when a selection is made on the table a more detailed form of data can be displayed.

Based On:

–This pattern is based on the Model View Controller pattern and Display Form, Validating Form, Update Form patterns.

Dictionary Entries:

–Key, Table, List Form, Retrieve, Object

Motivation:

–The requirement to search a list and then display more details of the items in that this is very common in user interface design. This pattern will allow a list of model objects to be presented in the Table List pattern and then when an item is selected it can be displayed in a Display Form pattern. As the user navigates through the list the form will update with the information.

Advertisements

4 Comments Add yours

  1. jt says:

    There’s no technical reason stopping any product using it. Easiest way to get it internally is from the mdmexchange project. Come and see us in the new year if you’re interested- think Jay said he’d already spoken to you at some point.

    Here’s a taster of how it works:

    http://jtlog.wordpress.com/2008/12/23/creating-user-interfaces-another-way/

  2. mattperrins says:

    The next project I am working on will be heavily using JET2 and templates around these patterns. Be nice to see if we can use your generator ? is it broken out as a component that other SWG products could use ?

  3. jt says:

    For task worker and business user interfaces with a lot of CRUD related screens, it would save a lot of time if the screen layout and coding could be automated.

    I haven’t had a chance to post in any detail but the product I work on now includes a user interface generator that should be able to help. It takes in a model that is very much focused on the user, rather than the technology being used to render the screens, which should result in a much more consistent and useable interface.

    I hope to have a few examples to share before too long, but in the case of your master detail pattern: you would model the objects to be shown in the form, along with a filter for the list view; model a task with search, select and view actions; and generate the code. That’s pretty much it. Think I need a few pictures to make up for my poor description… watch this space!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s