IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell

  • 4,625 views
Uploaded 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. …

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!

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,625
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
151
Comments
2
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 22. 3. Navigation
  • 23. Staying Found The Cost •  Good signage •  Keeping distances •  Environmental clues short •  Maps •  Avoiding too many jumps
  • 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. 4. Layout
  • 26. The Basics Grouping and •  Visual hierarchy Alignment •  Visual flow •  Proximity Dynamic •  Similarity Aspects •  Continuity •  Closure
  • 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. 5. Actions
  • 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. 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. 6. Info Graphics
  • 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. 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. Searching and The Data Filtering •  Labels •  Highly interactive •  Legends •  Iterative •  Axes, rulers, scales, •  Contextual and timelines •  Datatips •  Data brushing
  • 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. Forms & Controls
  • 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. 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. 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. Builders & Editors
  • 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. 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. 9. Looks Good?
  • 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. 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. Credits
  • 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. /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. Read More
  • 50. ⁄  Harald Felgner ⁄  A spectrum of projects, from international marketing to IT. ⁄  ux.felgner.ch