Interaction design patterns as presented at the University of Applied Sciences/ Communication Design faculty and the Bavarian Academy for Advertising and Marketing between 2003 and 2008. Based on Designing Interfaces: Patterns for Effective Interaction Design by Jenifer Tidwell, O'Reilly, 2005. Thanks, Jenifer Tidwell!

1. IA Interfaces

2. ⁄ From
Jenifer Tidwell
Designing Interfaces
O’Reilly, 2005

3. 2. Organizing the
3. Getting Around
1. What Users Do Content – IA &
– Navigation
Structure
6. Showing
5. Doing Things –
4. Organizing the Complex Data –
Actions &
Page – Layout Information
Commands
Graphics
7. Getting Input 9. Making it look
8. Builders and
From Users – good – Visual
Editors
Forms & Controls Style & Aesthetics

4. 1. What Users Do

5. A Means to an User Research Motivation to
End • Direct Learn
• Why? observation • Intermediate-to-
• Why really? • Case studies expert users
• Surveys • Occasional users
• Personas • The middle
ground

6. Human 1.1 Safe 1.2 Instant 1.3
Behaviors Exploration Gratification Satisficing
1.4 Changes 1.6
1.5 Deferred
in Incremental
Choices
Midstream Construction
1.9
1.7 1.8 Spatial
Streamlined
Habituation Memory
Repetition
1.10 1.11 1.12 Other
Prospective Keyboard People‘s
Memory Only Advice

7. ⁄ “Let me explore without getting lost or getting into trouble.”
⁄ Make it possible to explore without dire consequences
⁄ Avoid pop-ups and provide a predictable back button
⁄ Patterns:
3.31 Escape Hatch - 5.51 Multi-level
Undo

8. ⁄ “I want to accomplish something now, not later.”
⁄ Make the first screen stunningly easy
⁄ Don’t hide functionality behind a splash screen
⁄ Don’t put long sets of instructions in front of the first task
⁄ Don’t use “(Skip this) Ad!”

9. ⁄ “This is good enough. I don’t want to spend more time
learning to do better.”
⁄ Make labels short
⁄ Simplify the layout
⁄ Use forward/ backward navigation
⁄ “Don’t Make Me Think”
⁄ Use the layout to communicate meaning
All patterns 4.32-4.43

10. ⁄ “I changed my mind about what I was doing.”
⁄ Provide opportunities
⁄ Don’t lock users into a choice-poor environment
⁄ Provide re-entrance: “I’ll finish it later”
2.17 Wizard - 3.22 Global Navigation -
3.23 Hub and Spoke - 3.25 Modal
Panel - 3.27 Breadcrumbs - 7.77 Good
Defaults

11. ⁄ “I don’t want to answer that now; just let me finish.”
⁄ Keep registration hurdles to the bare minimum
⁄ Don’t require a first-time registration at all
⁄ “You can always change this later”
⁄ Don’t offer too many up-front choices
2.18 Extras on Demand - 7.77 Good
Defaults

12. ⁄ “Let me change this. That doesn’t look right; let me change
it again. That’s better.”
⁄ Make it easy to build small pieces one at a time
⁄ Keep the interface responsive to quick changes
⁄ Give feedback
⁄ Induce a state of “flow”

13. ⁄ “That gesture works everywhere else; why doesn’t it work
here, too?”
⁄ Control-S, Control-C, Control-V
⁄ Provide consistency
⁄ Don’t rely on dialog boxes with default choices

14. ⁄ “I swear that button was here a minute ago. Where did it
go?”
⁄ Make use of the desktop metaphor
⁄ Don’t rearrange controls
⁄ Don’t use dynamically changing menus
⁄ Put similar functionality in similar places
⁄ Purposefully use tops and bottoms of lists
4.37 Movable Panels - 4.41 Responsive
Disclosure

15. ⁄ “I’m putting this here to remind myself to deal with it later.”
⁄ Give people the tools to create their own reminder systems
⁄ Don’t organize or sort things automatically
⁄ Leave artifacts around that identify unfinished tasks

16. ⁄ “I have to repeat this how many times?”
⁄ Make use of the desktop metaphor
⁄ Don’t rearrange controls
⁄ Don’t use dynamically changing menus
⁄ Put similar functionality in similar places
⁄ Purposefully use tops and bottoms of lists
5.53 Macros

17. ⁄ “Please don’t make me use the mouse.”
⁄ Switching between the mouse and keyboard takes time and
effort
⁄ Define keyboard shortcuts
⁄ Integrate the use of arrow keys, the Tab key, and the Return
key
⁄ Define “default buttons” representing the “safe” action
8.83 Spring-Loaded Mouse

18. ⁄ “What did everyone else say about this?”
⁄ Integrate social components
⁄ Link to external resources
⁄ Encourage people to post their creations/ advice …
2.20 Multi-level Help

19. 2. IA & Structure

20. Content Structure Physical Structure
• List of objects • Multiple windows
• List of actions • One-window paging
• List of categories • Tiled panes
• List of tools

21. Content & 2.13 Two-
2.14 Canvas
Physical panel
Plus Palette
Structure Selector
2.15 One- 2.16
window Alternative
Drilldown Views
2.19
2.18 Extras
Sequence 2.17 Wizard
on Demand
Intriguing
Branches
2.20 Multi-
Help level Help

30. 3. Navigation

31. Staying Found The Cost
• Good signage • Keeping distances
• Environmental clues short
• Maps • Avoiding too many
jumps

32. 3.21 Clear 3.22 Global 3.23 Hub and
Interlinks Entry Points Navigation Spoke
3.25 Modal
3.24 Pyramid
Panel
Sign- 3.26
Sequence
3.27
3.28
Annotated
Breadcrumbs
posts Map Scrollbar
3.29 Color-
coded
Sections
Visual 3.30
Animated
Trick Transition
Trump 3.31 Escape
Hatch
Card

44. 4. Layout

45. The Basics Grouping and
• Visual hierarchy Alignment
• Visual flow • Proximity Dynamic
• Similarity Aspects
• Continuity
• Closure

46. 4.32 Visual 4.33 Center
Hierarchy Framework Stage
4.34 Titled 4.35 Card
Chunking Sections Stack
4.36 4.37
Closable Movable
Panels Panels
4.38 Right/ 4.39
Flow Left Diagonal
Alignment Balance
4.40
? Property
Sheet
Dynamic 4.41
Responsive
4.42
Responsive
4.43 Liquid
Aspects Layout
Disclosure Enabling

59. 5. Actions

60. Renderings Invisibles Nonstandards
• Buttons • Double-clicks • Icons
• Menu bars • Keyboard actions • Clickable text
• Pop-up menus • Drag-and-drop • Hovers
• Dropdown menus • Typed commands • Manipulable objects
• Toolbars • Anything …
• Links
• Action panels

61. 5.44 Button 5.45 Action
Presentation Groups Panel
5.46 Prominent 5.47 Smart
Specifics “Done” Button Menu Items
5.49 Progress 5.50
Operation 5.48 Preview
Indicator Cancelability
5.51 Multi- 5.52 Command
Sequence level Undo History
5.53 Macros

72. 6. Info Graphics

73. Organizational Models Pre-attentive Variables
• Linear • Color hue
• Tabular • Color brightness
• Hierarchical • Color saturation
• Network • Texture
• Geographic • Position and alignment
• Other • Orientation
• Size
• Shape

74. Navigation and Browsing Sorting and Rearrangement
• Scroll and pan • Alphabetically
• Zoom • Numerically
• Open and close points of interest • By date or time
• Drill down into points of interest • By physical location
• By category or tag
• By popularity
• User-designed
• Completely random

75. Searching and The Data
Filtering • Labels
• Highly interactive • Legends
• Iterative • Axes, rulers, scales,
• Contextual and timelines
• Datatips
• Data brushing

76. 6.54 6.56
6.55
For All Overview
Datatips
Dynamic
Plus Detail Queries
6.57 Data 6.58 Local
Brushing Zooming
For Tables 6.60
6.59 Row
Sortable
& Lists Striping
Table
6.61 Jump 6.62 New-
to Item item Row
For 6.63
6.64 Tree
Cascading
Hierarchies Table
Lists
6.65 Multi- 6.66 Small 6.67
Sequence Y Graph Multiples Treemaps

91. Forms & Controls

92. Principles Factors
• Make it understandable • Available space
• Avoid questions • User sophistication
• Don’t rely on memory • Expectations
• Don’t literally translate • Available technology
the programming model
• Usability test it
• Choose wisely

93. List of Items Text Numbers Dates or
• One of two • One line • Any type or Times
options • One-of-N choice format • Forgiving
• One of N items • Multiple lines • Bounded range format
• Many of N • Subrange • Structured
items format
• Constructing an • Chooser
unordered list

94. 7.68 7.69
7.70 Fill-in-
Text Forgiving Structured
the-blanks
Format Format
7.71 Input 7.72 Input 7.73 Auto-
Hints Prompt completion
Other 7.74
Dropdown
7.75
Illustrated
7.76 List
Than Text Builder
Chooser Choices
7.78 Same-
7.77 Good
For All Defaults
page Error
Message

106. Builders & Editors

107. Idioms Principles Selection
• Page layout editors • WYSIWYG • Single click
• Image editors • Direct manipulation • Double click
• Vector-graphics • Modes • Triple click
editors • Click, drag, release
• Web site builders • Shift-click
• GUI builders • Control-click
• Generic text editors

108. 8.81
8.79 Edit-in- 8.80 Smart
Overall place Selection
Composite
Selection
8.83 Spring-
8.82 One-off
loaded
Mode
Mode
8.84
Direct 8.85
8.86 Guides
Constrained
Manipulation Resize
Magnetism
WYSIWYG- 8.87 Paste
related Variations

118. 9. Looks Good?

119. Principles Web and Apps!
• Color • UI Guidelines
• Typography • Backgrounds
• Spaciousness and crowding • Colors and fonts
• Angles and curves • Borders
• Texture and rhythm • Images
• Images
• Cultural references
• Repeated visual motifs

120. 9.89 Few
9.88 Deep 9.90 Corner
Design Background
Hues, Many
Values
Treatments
9.91 Borders 9.93
9.92
that Echo Contrasting
Hairlines
Fonts Font Weights
Meta- 9.94 Skins
design

128. Credits

129. /kubina/120536705/
/ntr23/730371240/
http://www.flickr.com
/angelamaphone/2663422833/
/8177037@N06/2137654069/
/photos_by_kenneth/3150864569
Screenshots:
⁄ Jenifer Tidwell
/mauricekoop/1112430097/
⁄ Me, myself, and I

130. /23176450@N08/2663925153/
/zen/1585255/
http://www.flickr.com
/haraldfelgner/2589744468/
The book:
/byammar/2920274366/
⁄ Jenifer Tidwell, Designing
Interfaces, 2006, O‘Reilly
/haraldfelgner/2562128495/ ⁄ www.designinginterfaces.com
⁄ jtidwell.net
Order via:
/liewcf/894035077/
⁄ bit.ly/cf7TQD

131. Read More

132. ⁄ Harald Felgner
⁄ A spectrum of projects, from international marketing to IT.
⁄ ux.felgner.ch