101User Interface Patternsand its applications

Tonya GrooverDepartment 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. 181-182)

[Alexander, 1979]

Historical Context

» Christopher Alexander

» Emerged in SE mid-late 1990’s

» Gang of Four (GoF)QuickTime™ and a

decompressorare needed to see this picture.

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

http://www.cmcrossroads.com/bradapp/docs/patterns-nutshell.html

Good Patterns

» Solve a problem

» Is a proven concept

» The solution isn’t obvious

» Describes a relationship

» Significant human component

[ http://hillside.net/patterns/definition.html]

Defining A Pattern

» Name» Problem» Context» Forces» Solution

» Examples» Resulting Context» Rationale» Related Patterns» Known Uses

http://www.cmcrossroads.com/bradapp/docs/patterns-intro.html

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.

[ http://hillside.net/patterns/definition.html]

“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

QuickTime™ and a decompressor

are needed to see this picture.

This approach only works if there are a small

number of “generic” tasks, which can describe very

different business activities.

Design MethodQuickTime™ and a

decompressorare needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

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

http://www.welie.com/patterns/

User Needs

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

Application Needs

QuickTime™ and a decompressor

are needed to see this picture.QuickTime™ and a

decompressorare needed to see this picture.

Context of the Design

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.QuickTime™ and a decompressor

are needed to see this picture.

Finally …

there are pattern library resources.

QuickTime™ and a decompressor

are needed to see this picture.

http://developer.yahoo.com/ypatterns/

QuickTime™ and a decompressor

are needed to see this picture.

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

http://msdn2.microsoft.com/en-us/practices/default.aspx

QuickTime™ and a decompressor

are needed to see this picture.

http://norvig.com/design-patterns/ppframe.htm

Thank you, for your attention!

References» Von Udo Arend (2004). User Interface Patterns

http://www.sapdesignguild.org/editions/edition8/print_patterns.asp

» Brad Appleton (2000). Patterns and Software: Essential Concepts and Terminology http://www.cmcrossroads.com/bradapp/docs/patterns-intro.html

» Brad Appleton. Patterns in a Nutshell http://www.cmcrossroads.com/bradapp/docs/patterns-nutshell.html

» James O. Coplien (2007). Software Patterns http://hillside.net/patterns/definition.html

» Bill Venners (2005). How to Use Design Patterns: A conversation with Erich Gamma. http://www.artima.com/lejava/articles/gammadp.html

» Christopher Alexander (1979). The Timeless Way of Binding