101 User Interface Patterns and its applications Tonya Groover Department of Computer Science

Format of Seminar »what is a pattern? »historical context »good UI patterns »elements of a UI pattern »pattern languages »applications

Designing User Interfaces (UI) »Should I use icons? »Where should the header data and detail be positioned? »How do users search for objects or data? »How should new rows be inserted into a table? »Which working areas make up a new view? [Arend, 2004]

Patterns help to answer these [and other] questions.

Patterns are reusable components. design principles. relationships insight into design problems

The most useful patterns are generative. These patterns in our minds are, more or less, mental images of the patterns in the world : they are abstract representations of the very morphological rules which define the patterns in the world. However, in one respect they are very different. The patterns in the world merely exist. But the same patterns in our minds are dynamic. They have force. They are generative. They tell us what to do ; they tell us how we shall, or may, generate them; and they tell us too, that under certain circumstances, we must create them. Each pattern is a rule which describes what you have to do to generate the entity which it defines. (pp ) [Alexander, 1979]

Historical Context »Christopher Alexander »Emerged in SE mid- late 1990’s »Gang of Four (GoF)

Why Patterns? »Solve "real world" problems »Capture domain expertise »Document design decisions and rationale »Reuse wisdom and experience of master practitioners »Convey expert insight to novices »Form a shared vocabulary for problem- solving discussion »Show more than just the solution

Good Patterns »Solve a problem »Is a proven concept »The solution isn’t obvious »Describes a relationship »Significant human component [

Defining A Pattern »Name »Problem »Context »Forces »Solution »Examples »Resulting Context »Rationale »Related Patterns »Known Uses

A Pattern Language … defines a collection of patterns and the rules to combine them into an architectural style. Pattern languages describe software frameworks or families of related systems. [ “It not only tells us the rules of arrangement, but shows us how to construct arrangements -- as many as we want -- which satisfy the rules." (p. 186) [Alexander, 1979]

Application of Patterns Business Application [Arend, 2004]

SAP Design Guild »Users working practices is the starting point. »Usability »Designers configure the interface using predefined components. »Use one component for a large number of applications. »“A user interface pattern fulfills one or more generic tasks, such as searching for and selecting a business object.”

Pattern Approach

This approach only works if there are a small number of “generic” tasks, which can describe very different business activities.

Design Method

Results »powerful and general components. »generic functions. »simple. »easy.

Advantages of UI Patterns »Highly consistent user interfaces »Usability can be optimized »High production gains

Application of Patterns Web Interfaces

User Needs

Application Needs

Context of the Design

Finally … there are pattern library resources.

Microsoft's recommendations for how to design, develop, deploy, and operate architecturally sound applications for the Microsoft application platform.

Thank you, for your attention!

References »Von Udo Arend (2004). User Interface Patterns sp sp »Brad Appleton (2000). Patterns and Software: Essential Concepts and Terminology »Brad Appleton. Patterns in a Nutshell nutshell.html nutshell.html »James O. Coplien (2007). Software Patterns »Bill Venners (2005). How to Use Design Patterns: A conversation with Erich Gamma. »Christopher Alexander (1979). The Timeless Way of Binding