George Hackman, Senior Director, Applications User Experience

Design patterns have been around since the 1960’s as a way of bringing commonly established best practices to architecture. Christopher Alexander wrote a book on architectural patterns that shows common ways of organizing and designing physical spaces ranging from parks to children’s bedrooms. It is a classic and a very good read, even for non- architects. Stemming from these architectural patterns, software code patterns took off as a way of providing high level solutions to common software problems.

User Interface (UI) Patterns are reusable building blocks that allow the business analyst, product manager, or developer to quickly and consistently put together user interfaces. Instead of architecting from scratch, developers can leverage these patterns to design quality UIs with limited resources.

If we start with the reusable high-level building blocks when putting together our applications, we get UI consistency and code reuse for these large chunks of our application. Then, we focus our creative juices and design talent on the parts of the applications that need to be unique. As an added bonus, we save teams a lot of time searching through lower- level UI guidelines as they try to piece components together.

Patterns at Oracle

Oracle has built a library containing more than 100 UI design patterns. These range from simple operations, like drilling into detail, to more complex interfaces for hierarchies, searching, and analytics.

Figure 1. A drill- to- detail pattern

The key components of Alexander’s architectural patterns (problem, context, and solution), still ring true for UI design patterns. You need to know your users and how they are using the product to pick the best pattern for the job. One of the tough jobs in creating a pattern set is making it easy for developers to pick the right pattern. We spent a huge amount of time creating organizational schemas, search mechanisms, and decision support tools for our patterns.

An example of a decision support tool is the Design Filter Tool or DeFT. This allows a designer to easily filter patterns by checking boxes for the user type (context) and task (problem).

Figure 2. The Design Pattern Filter Tool (DeFT)

Oracle has used patterns extensively in the building of next generation applications. We started with them during the design phase as wireframe and prototype templates. Then as coding started they were translated into Java code templates and development guides that the developers could use to build the product. The patterns have fulfilled their promise of making it easy to design and code in a consistent way to increase designer and developer productivity.

It’s easy to find good UI patterns on the web and in books. Here are a couple of good references.

Designing Interfaces: Patterns for Effective Interaction Design by Jennifer Tidwell.

The Design of Sites, Douglas K. van Duyne, James A. Landay and Jason I. Hong

A Pattern Language: Towns, Buildings, Construction (Center for Environmental Structure Series) , Christopher Alexander, Sara Ishikawa, and Murray Silverstein