IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell
-
date post
18-Sep-2014 -
Category
Education
-
view
78 -
download
0
description
Transcript of IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell
![Page 1: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/1.jpg)
IA Interfaces
![Page 2: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/2.jpg)
⁄ From Jenifer Tidwell Designing Interfaces O’Reilly, 2005
![Page 3: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/3.jpg)
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
![Page 4: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/4.jpg)
1. What Users Do
![Page 5: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/5.jpg)
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
![Page 6: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/6.jpg)
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
![Page 7: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/7.jpg)
⁄ “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
![Page 8: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/8.jpg)
⁄ “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!”
![Page 9: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/9.jpg)
⁄ “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
![Page 10: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/10.jpg)
⁄ “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
![Page 11: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/11.jpg)
⁄ “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
![Page 12: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/12.jpg)
⁄ “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”
![Page 13: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/13.jpg)
⁄ “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
![Page 14: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/14.jpg)
⁄ “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
![Page 15: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/15.jpg)
⁄ “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
![Page 16: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/16.jpg)
⁄ “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
![Page 17: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/17.jpg)
⁄ “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
![Page 18: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/18.jpg)
⁄ “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
![Page 19: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/19.jpg)
2. IA & Structure
![Page 20: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/20.jpg)
Content Structure • List of objects • List of actions • List of categories • List of tools
Physical Structure • Multiple windows • One-window paging • Tiled panes
![Page 21: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/21.jpg)
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
![Page 22: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/22.jpg)
![Page 23: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/23.jpg)
![Page 24: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/24.jpg)
![Page 25: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/25.jpg)
![Page 26: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/26.jpg)
![Page 27: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/27.jpg)
![Page 28: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/28.jpg)
![Page 29: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/29.jpg)
![Page 30: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/30.jpg)
3. Navigation
![Page 31: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/31.jpg)
Staying Found • Good signage • Environmental clues • Maps
The Cost • Keeping distances
short • Avoiding too many
jumps
![Page 32: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/32.jpg)
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
![Page 33: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/33.jpg)
![Page 34: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/34.jpg)
![Page 35: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/35.jpg)
![Page 36: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/36.jpg)
![Page 37: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/37.jpg)
![Page 38: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/38.jpg)
![Page 39: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/39.jpg)
![Page 40: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/40.jpg)
![Page 41: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/41.jpg)
![Page 42: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/42.jpg)
![Page 43: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/43.jpg)
![Page 44: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/44.jpg)
4. Layout
![Page 45: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/45.jpg)
The Basics • Visual hierarchy • Visual flow
Grouping and Alignment • Proximity • Similarity • Continuity • Closure
Dynamic Aspects
![Page 46: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/46.jpg)
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
![Page 47: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/47.jpg)
![Page 48: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/48.jpg)
![Page 49: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/49.jpg)
![Page 50: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/50.jpg)
![Page 51: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/51.jpg)
![Page 52: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/52.jpg)
![Page 53: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/53.jpg)
![Page 54: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/54.jpg)
![Page 55: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/55.jpg)
![Page 56: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/56.jpg)
![Page 57: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/57.jpg)
![Page 58: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/58.jpg)
![Page 59: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/59.jpg)
5. Actions
![Page 60: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/60.jpg)
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 …
![Page 61: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/61.jpg)
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
![Page 62: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/62.jpg)
![Page 63: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/63.jpg)
![Page 64: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/64.jpg)
![Page 65: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/65.jpg)
![Page 66: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/66.jpg)
![Page 67: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/67.jpg)
![Page 68: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/68.jpg)
![Page 69: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/69.jpg)
![Page 70: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/70.jpg)
![Page 71: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/71.jpg)
![Page 72: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/72.jpg)
6. Info Graphics
![Page 73: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/73.jpg)
Organizational Models • Linear • Tabular • Hierarchical • Network • Geographic • Other
Pre-attentive Variables • Color hue • Color brightness • Color saturation • Texture • Position and alignment • Orientation • Size • Shape
![Page 74: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/74.jpg)
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
![Page 75: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/75.jpg)
Searching and Filtering • Highly interactive • Iterative • Contextual
The Data • Labels • Legends • Axes, rulers, scales,
and timelines • Datatips • Data brushing
![Page 76: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/76.jpg)
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
![Page 77: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/77.jpg)
![Page 78: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/78.jpg)
![Page 79: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/79.jpg)
![Page 80: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/80.jpg)
![Page 81: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/81.jpg)
![Page 82: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/82.jpg)
![Page 83: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/83.jpg)
![Page 84: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/84.jpg)
![Page 85: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/85.jpg)
![Page 86: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/86.jpg)
![Page 87: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/87.jpg)
![Page 88: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/88.jpg)
![Page 89: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/89.jpg)
![Page 90: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/90.jpg)
![Page 91: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/91.jpg)
7. Forms & Controls
![Page 92: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/92.jpg)
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
![Page 93: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/93.jpg)
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
![Page 94: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/94.jpg)
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
![Page 95: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/95.jpg)
![Page 96: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/96.jpg)
![Page 97: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/97.jpg)
![Page 98: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/98.jpg)
![Page 99: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/99.jpg)
![Page 100: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/100.jpg)
![Page 101: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/101.jpg)
![Page 102: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/102.jpg)
![Page 103: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/103.jpg)
![Page 104: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/104.jpg)
![Page 105: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/105.jpg)
![Page 106: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/106.jpg)
8. Builders & Editors
![Page 107: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/107.jpg)
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
![Page 108: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/108.jpg)
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
![Page 109: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/109.jpg)
![Page 110: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/110.jpg)
![Page 111: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/111.jpg)
![Page 112: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/112.jpg)
![Page 113: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/113.jpg)
![Page 114: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/114.jpg)
![Page 115: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/115.jpg)
![Page 116: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/116.jpg)
![Page 117: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/117.jpg)
![Page 118: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/118.jpg)
9. Looks Good?
![Page 119: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/119.jpg)
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
![Page 120: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/120.jpg)
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
![Page 121: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/121.jpg)
![Page 122: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/122.jpg)
![Page 123: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/123.jpg)
![Page 124: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/124.jpg)
![Page 125: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/125.jpg)
![Page 126: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/126.jpg)
![Page 127: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/127.jpg)
![Page 128: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/128.jpg)
Credits
![Page 129: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/129.jpg)
/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
![Page 130: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/130.jpg)
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
![Page 131: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/131.jpg)
Read More
![Page 132: IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell](https://reader034.fdocuments.in/reader034/viewer/2022050711/541ac88c7bef0a0c2d8b6f39/html5/thumbnails/132.jpg)
⁄ Harald Felgner ⁄ A spectrum of projects, from international marketing to IT. ⁄ ux.felgner.ch