Download - User Interface Patterns and its applications
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