ia 6: patterns for effective interaction design. jenifer tidwell

IA Interfaces

⁄  From Jenifer Tidwell Designing Interfaces O’Reilly, 2005

1. What Users Do 2. Organizing the Content – IA &

Structure 3. Getting Around

– Navigation

4. Organizing the Page – Layout

5. Doing Things – Actions & Commands

6. Showing Complex Data –

Information Graphics

7. Getting Input From Users –

Forms & Controls 8. Builders and

Editors 9. Making it look

good – Visual Style & Aesthetics

1. What Users Do

A Means to an End •  Why? •  Why really?

User Research •  Direct

observation •  Case studies •  Surveys •  Personas

Motivation to Learn •  Intermediate-to-

expert users •  Occasional users •  The middle

ground

Human Behaviors

1.1 Safe Exploration

1.2 Instant Gratification

1.3 Satisficing

1.4 Changes in

Midstream 1.5 Deferred

Choices 1.6

Incremental Construction

1.7 Habituation

1.8 Spatial Memory

1.9 Streamlined Repetition

1.10 Prospective

Memory

1.11 Keyboard

Only

1.12 Other People‘s 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 •  List of objects •  List of actions •  List of categories •  List of tools

Physical Structure •  Multiple windows •  One-window paging •  Tiled panes

Content & Physical Structure

2.13 Two-panel

Selector 2.14 Canvas Plus Palette

2.15 One-window

Drilldown

2.16 Alternative

Views

Sequence 2.17 Wizard 2.18 Extras on Demand

2.19 Intriguing Branches

Help 2.20 Multi-level Help

3. Navigation

Staying Found •  Good signage •  Environmental clues •  Maps

The Cost •  Keeping distances

short •  Avoiding too many

jumps

Interlinks 3.21 Clear Entry Points

3.22 Global Navigation

3.23 Hub and Spoke

3.24 Pyramid 3.25 Modal Panel

Sign-posts

3.26 Sequence

Map 3.27

Breadcrumbs 3.28

Annotated Scrollbar

3.29 Color-coded

Sections

Visual Trick

3.30 Animated Transition

Trump Card

3.31 Escape Hatch

4. Layout

The Basics •  Visual hierarchy •  Visual flow

Grouping and Alignment •  Proximity •  Similarity •  Continuity •  Closure

Dynamic Aspects

Hierarchy 4.32 Visual Framework

4.33 Center Stage

Chunking 4.34 Titled Sections

4.35 Card Stack

4.36 Closable Panels

4.37 Movable Panels

Flow 4.38 Right/

Left Alignment

4.39 Diagonal Balance

? 4.40

Property Sheet

Dynamic Aspects

4.41 Responsive Disclosure

4.42 Responsive

Enabling 4.43 Liquid

Layout

5. Actions

Renderings •  Buttons •  Menu bars •  Pop-up menus •  Dropdown menus •  Toolbars •  Links •  Action panels

Invisibles •  Double-clicks •  Keyboard actions •  Drag-and-drop •  Typed commands

Nonstandards •  Icons •  Clickable text •  Hovers •  Manipulable objects •  Anything …

Presentation 5.44 Button Groups

5.45 Action Panel

Specifics 5.46 Prominent “Done” Button

5.47 Smart Menu Items

Operation 5.48 Preview 5.49 Progress Indicator

5.50 Cancelability

Sequence 5.51 Multi-level Undo

5.52 Command History 5.53 Macros

6. Info Graphics

Organizational Models •  Linear •  Tabular •  Hierarchical •  Network •  Geographic •  Other

Pre-attentive Variables •  Color hue •  Color brightness •  Color saturation •  Texture •  Position and alignment •  Orientation •  Size •  Shape

Navigation and Browsing •  Scroll and pan •  Zoom •  Open and close points of interest •  Drill down into points of interest

Sorting and Rearrangement •  Alphabetically •  Numerically •  By date or time •  By physical location •  By category or tag •  By popularity •  User-designed •  Completely random

Searching and Filtering •  Highly interactive •  Iterative •  Contextual

The Data •  Labels •  Legends •  Axes, rulers, scales,

and timelines •  Datatips •  Data brushing

For All 6.54

Overview Plus Detail

6.55 Datatips

6.56 Dynamic Queries

6.57 Data Brushing

6.58 Local Zooming

For Tables & Lists

6.59 Row Striping

6.60 Sortable

Table

6.61 Jump to Item

6.62 New-item Row

For Hierarchies

6.63 Cascading

Lists 6.64 Tree

Table

Sequence 6.65 Multi-Y Graph

6.66 Small Multiples

6.67 Treemaps

7. Forms & Controls

Principles •  Make it understandable •  Avoid questions •  Don’t rely on memory •  Don’t literally translate

the programming model •  Usability test it •  Choose wisely

Factors •  Available space •  User sophistication •  Expectations •  Available technology

List of Items •  One of two

options •  One of N items •  Many of N

items •  Constructing an

unordered list

Text •  One line •  One-of-N choice •  Multiple lines

Numbers •  Any type or

format •  Bounded range •  Subrange

Dates or Times •  Forgiving

format •  Structured

format •  Chooser

Text 7.68

Forgiving Format

7.69 Structured

Format

7.70 Fill-in-the-blanks

7.71 Input Hints

7.72 Input Prompt

7.73 Auto-completion

Other Than Text

7.74 Dropdown Chooser

7.75 Illustrated Choices

7.76 List Builder

For All 7.77 Good Defaults

7.78 Same-page Error Message

8. Builders & Editors

Idioms •  Page layout editors •  Image editors •  Vector-graphics

editors •  Web site builders •  GUI builders •  Generic text editors

Principles •  WYSIWYG •  Direct manipulation •  Modes

Selection •  Single click •  Double click •  Triple click •  Click, drag, release •  Shift-click •  Control-click

Overall 8.79 Edit-in-place

8.80 Smart Selection

8.81 Composite Selection

8.82 One-off Mode

8.83 Spring-loaded Mode

Direct Manipulation

8.84 Constrained

Resize 8.85

Magnetism 8.86 Guides

WYSIWYG-related

8.87 Paste Variations

9. Looks Good?

Principles •  Color •  Typography •  Spaciousness and crowding •  Angles and curves •  Texture and rhythm •  Images •  Cultural references •  Repeated visual motifs

Web and Apps! •  UI Guidelines •  Backgrounds •  Colors and fonts •  Borders •  Images

Design 9.88 Deep Background

9.89 Few Hues, Many

Values 9.90 Corner Treatments

9.91 Borders that Echo

Fonts 9.92

Hairlines 9.93

Contrasting Font Weights

Meta-design

9.94 Skins

Credits

/mauricekoop/1112430097/

/kubina/120536705/

/ntr23/730371240/

/angelamaphone/2663422833/

/8177037@N06/2137654069/

/photos_by_kenneth/3150864569 http

://w

ww

.flic

kr.c

om

Screenshots: ⁄  Jenifer Tidwell ⁄  Me, myself, and I

http

://w

ww

.flic

kr.c

om

/liewcf/894035077/

/23176450@N08/2663925153/

/zen/1585255/

/haraldfelgner/2589744468/

/byammar/2920274366/

/haraldfelgner/2562128495/

The book: ⁄  Jenifer Tidwell, Designing

Interfaces, 2006, O‘Reilly ⁄  www.designinginterfaces.com ⁄  jtidwell.net Order via: ⁄  bit.ly/cf7TQD

Read More

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