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.
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.
|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.
–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.
–This pattern is based on the Model View Controller pattern and Display Form, Validating Form, Update Form patterns.
–Key, Table, List Form, Retrieve, Object
–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.
You can find more in the PDF presentation.