User Interface Patterns and its applications

1
User Interface Patternsand its applications
101

• Tonya Groover
• Department of Computer Science

2
Format of Seminar

• what is a pattern?
• historical context
• good UI patterns
• elements of a UI pattern
• pattern languages
• applications

3
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
4
Patterns help to answer these and other
questions.
5
Patterns are reusable components.
insight into design problems.
design principles.
relationships
. . .
6
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
7
Historical Context

• Christopher Alexander
• Emerged in SE mid-late 1990s
• Gang of Four (GoF)

8
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
9
Good Patterns

• Solve a problem
• Is a proven concept
• The solution isnt obvious
• Describes a relationship
• Significant human component

http//hillside.net/patterns/definition.html
10
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
11
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
12
Application of Patterns

• Business Application

Arend, 2004
13
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.

14
Pattern Approach
15
This approach only works if there are a small
number of generic tasks, which can describe
very different business activities.
16
Design Method
17
(No Transcript)
18
(No Transcript)
19
(No Transcript)
20
Results

• powerful and general components.
• generic functions.
• simple.
• easy.

21
Advantages of UI Patterns

• Highly consistent user interfaces
• Usability can be optimized
• High production gains

22
Application of Patterns

• Web Interfaces

http//www.welie.com/patterns/
23
User Needs
24
Application Needs
25
Context of the Design
26
Finally

• there are pattern library resources.

27
http//developer.yahoo.com/ypatterns/
28
http//msdn2.microsoft.com/en-us/practices/default
.aspx
Microsoft's recommendations for how to design,
develop, deploy, and operate architecturally
sound applications for the Microsoft application
platform.
29
http//norvig.com/design-patterns/ppframe.htm
30
Thank you, for your attention!
31
References

• Von Udo Arend (2004). User Interface Patterns
  http//www.sapdesignguild.org/editions/edition8/pr
  int_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