Using design patterns and layers to support the early-stage design and prototyping of cross-device user interfaces

People often use a variety of computing devices, such as PCs, PDAs, and cell phones, to access the same information. The user interface to this information needs to be different for each device, due to the different input and output constraints of each device. Currently designers designing such cross-device user interfaces either have to design a UI separately for each device, which is time consuming, or use a program to automatically generate interfaces, which often result in interfaces that are awkward. Each method also discourages iterative design, considered critical for creating good user interfaces. I have created a system called Damask to support the early-stage design of user interfaces targeted at multiple devices. Within Damask, designers use layers to specify which parts of a user interface is common across all devices and which are specific to one device. They use design patterns to specify higher-level concepts within a user interface. Design patterns in Damask include pre-built UI fragments that are already optimized for each device. Designers can instantiate patterns in their designs and then customize the instances to fit their particular requirements. Through a study performed with twelve professional web designers, we have found that, in the early stages of design, designers using patterns and layers in Damask create cross-device user interfaces that are as good as or better than those created without patterns and layers, in less time.