IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell

IA Interfaces

⁄  From Jenifer Tidwell Designing Interfaces O’Reilly, 2005

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

1. What Users Do

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

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

⁄  “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

⁄  “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!”

⁄  “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

⁄  “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

⁄  “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

⁄  “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”

⁄  “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

⁄  “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

⁄  “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

⁄  “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

⁄  “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

⁄  “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

2. IA & Structure

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

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

3. Navigation

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

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

4. Layout

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

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

5. Actions

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

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

6. Info Graphics

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

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

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

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

Forms & Controls

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

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

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

Builders & Editors

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

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

9. Looks Good?

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

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

Credits

/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

/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

http://www.slideshare.net	45
http://www.felgner.ch	12
http://simpleandopen.blogspot.com	12
http://www.todopps.info	7
http://felgner.ch	1
http://ux.felgner.ch	1
http://todopps.info	1

IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell

by Harald Felgner on May 15, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 79

Statistics

IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell — Presentation Transcript