IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell

5,684 views
5,481 views

Published on

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!

Published in: Education
2 Comments
12 Likes
Statistics
Notes
No Downloads
Views
Total views
5,684
On SlideShare
0
From Embeds
0
Number of Embeds
137
Actions
Shares
0
Downloads
161
Comments
2
Likes
12
Embeds 0
No embeds

No notes for slide

IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell

  1. 1. IA Interfaces
  2. 2. ⁄  From Jenifer Tidwell Designing Interfaces O’Reilly, 2005
  3. 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. 4. 1. What Users Do
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 19. 2. IA & Structure
  20. 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. 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
  22. 22. 3. Navigation
  23. 23. Staying Found The Cost •  Good signage •  Keeping distances •  Environmental clues short •  Maps •  Avoiding too many jumps
  24. 24. 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
  25. 25. 4. Layout
  26. 26. The Basics Grouping and •  Visual hierarchy Alignment •  Visual flow •  Proximity Dynamic •  Similarity Aspects •  Continuity •  Closure
  27. 27. 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
  28. 28. 5. Actions
  29. 29. 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
  30. 30. 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
  31. 31. 6. Info Graphics
  32. 32. Organizational Models Pre-attentive Variables •  Linear •  Color hue •  Tabular •  Color brightness •  Hierarchical •  Color saturation •  Network •  Texture •  Geographic •  Position and alignment •  Other •  Orientation •  Size •  Shape
  33. 33. 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
  34. 34. Searching and The Data Filtering •  Labels •  Highly interactive •  Legends •  Iterative •  Axes, rulers, scales, •  Contextual and timelines •  Datatips •  Data brushing
  35. 35. 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
  36. 36. Forms & Controls
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. Builders & Editors
  41. 41. 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
  42. 42. 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
  43. 43. 9. Looks Good?
  44. 44. 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
  45. 45. 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
  46. 46. Credits
  47. 47. /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
  48. 48. /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
  49. 49. Read More
  50. 50. ⁄  Harald Felgner ⁄  A spectrum of projects, from international marketing to IT. ⁄  ux.felgner.ch

×