Home Page Icon
Home Page
Table of Contents for
Cover
Close
Cover
by Jenifer Tidwell
Designing Interfaces
Designing Interfaces
Preface
SMALL INTERFACE PIECES, LOOSELY JOINED
ABOUT PATTERNS IN GENERAL
OTHER PATTERN COLLECTIONS
ABOUT THE PATTERNS IN THIS BOOK
AUDIENCE
HOW THIS BOOK IS ORGANIZED
COMMENTS AND QUESTIONS
ACKNOWLEDGMENTS
1. What Users Do
1.1. A MEANS TO AN END
1.2. THE BASICS OF USER RESEARCH
1.3. USERS’ MOTIVATION TO LEARN
1.4. THE PATTERNS
1. safe exploration
2. instant gratification
3. satisficing
4. changes in midstream
5. deferred choices
6. incremental construction
7. habituation
8. spatial memory
9. prospective memory
10. streamlined repetition
11. keyboard only
12. other people’s advice
2. Organizing the Content:Information Architecture and Application Structure
2.1. THE BASICS OF INFORMATION ARCHITECTURE: DIVIDING STUFF UP
2.1.1. LISTS OF OBJECTS
2.1.2. LISTS OF ACTIONS
2.1.3. LISTS OF SUBJECT CATEGORIES
2.1.4. LISTS OF TOOLS
2.2. PHYSICAL STRUCTURE
2.2.1. MULTIPLE WINDOWS
2.2.2. ONE-WINDOW PAGING
2.2.3. TILED PANES
2.3. THE PATTERNS
13. two-panel selector
2.3.1.1. what
2.3.1.2. use when
2.3.1.3. why
2.3.1.4. how
2.3.1.5. examples
14. canvas plus palette
2.3.2.1. what
2.3.2.2. use when
2.3.2.3. why
2.3.2.4. how
2.3.2.5. examples
15. one-window drilldown
2.3.3.1. what
2.3.3.2. use when
2.3.3.3. why
2.3.3.4. how
2.3.3.5. examples
16. alternative views
2.3.4.1. what
2.3.4.2. use when
2.3.4.3. why
2.3.4.4. how
17. wizard
2.3.5.1. what
2.3.5.2. use when
2.3.5.3. why
2.3.5.4. how
2.3.5.4.1. “CHUNKING” THE TASK
2.3.5.4.2. PHYSICAL STRUCTURE
2.3.5.5. examples
18. extras on demand
2.3.6.1. what
2.3.6.2. use when
2.3.6.3. why
2.3.6.4. how
19. intriguing branches
2.3.7.1. what
2.3.7.2. use when
2.3.7.3. why
2.3.7.4. how
20. multi-level help
2.3.8.1. what
2.3.8.2. use when
2.3.8.3. why
2.3.8.4. how
2.3.8.5. examples
3. Getting Around:Navigation, Signposts, and Wayfinding
3.1. STAYING FOUND
3.2. THE COST OF NAVIGATION
3.2.1. KEEPING DISTANCES SHORT
3.2.2. TOO MANY JUMPS
3.3. THE PATTERNS
21. clear entry points
3.3.1.1. what
3.3.1.2. use when
3.3.1.3. why
3.3.1.4. how
3.3.1.5. examples
22. global navigation
3.3.2.1. what
3.3.2.2. use when
3.3.2.3. why
3.3.2.4. how
3.3.2.5. examples
23. hub and spoke
3.3.3.1. what
3.3.3.2. use when
3.3.3.3. why
3.3.3.4. how
3.3.3.5. examples
24. pyramid
3.3.4.1. what
3.3.4.2. use when
3.3.4.3. why
3.3.4.4. how
3.3.4.5. examples
25. modal panel
3.3.5.1. what
3.3.5.2. use when
3.3.5.3. why
3.3.5.4. how
3.3.5.5. examples
26. sequence map
3.3.6.1. what
3.3.6.2. use when
3.3.6.3. why
3.3.6.4. how
3.3.6.5. examples
27. breadcrumbs
3.3.7.1. what
3.3.7.2. use when
3.3.7.3. why
3.3.7.4. how
3.3.7.5. examples
28. annotated scrollbar
3.3.8.1. what
3.3.8.2. use when
3.3.8.3. why
3.3.8.4. how
3.3.8.5. examples
29. color-coded sections
3.3.9.1. what
3.3.9.2. use when
3.3.9.3. why
3.3.9.4. how
3.3.9.5. examples
30. animated transition
3.3.10.1. what
3.3.10.2. use when
3.3.10.3. why
3.3.10.4. how
3.3.10.5. examples
31. escape hatch
3.3.11.1. what
3.3.11.2. use when
3.3.11.3. why
3.3.11.4. how
3.3.11.5. examples
4. Organizing the Page:Layout of Page Elements
4.1. THE BASICS OF PAGE LAYOUT
4.1.1. VISUAL HIERARCHY: WHAT’S IMPORTANT?
4.1.2. VISUAL FLOW: WHAT SHOULD I LOOK AT NEXT?
4.1.3. GROUPING AND ALIGNMENT: WHAT GOES WITH WHAT?
4.1.4. PUTTING IT ALL TOGETHER
4.1.5. USING DYNAMIC DISPLAYS
4.2. THE PATTERNS
32. visual framework
4.2.1.1. what
4.2.1.2. use when
4.2.1.3. why
4.2.1.4. how
4.2.1.5. examples
33. center stage
4.2.2.1. what
4.2.2.2. use when
4.2.2.3. why
4.2.2.4. how
4.2.2.5. examples
34. titled sections
4.2.3.1. what
4.2.3.2. use when
4.2.3.3. why
4.2.3.4. how
4.2.3.5. examples
35. card stack
4.2.4.1. what
4.2.4.2. use when
4.2.4.3. why
4.2.4.4. how
4.2.4.5. examples
36. closable panels
4.2.5.1. what
4.2.5.2. use when
4.2.5.3. why
4.2.5.4. how
4.2.5.5. examples
37. movable panels
4.2.6.1. what
4.2.6.2. use when
4.2.6.3. why
4.2.6.4. how
4.2.6.5. examples
38. right/left alignment
4.2.7.1. what
4.2.7.2. use when
4.2.7.3. why
4.2.7.4. how
4.2.7.5. examples
39. diagonal balance
4.2.8.1. what
4.2.8.2. use when
4.2.8.3. why
4.2.8.4. how
4.2.8.5. examples
40. property sheet
4.2.9.1. what
4.2.9.2. use when
4.2.9.3. why
4.2.9.4. how
4.2.9.5. examples
41. responsive disclosure
4.2.10.1. what
4.2.10.2. use when
4.2.10.3. why
4.2.10.4. how
4.2.10.5. examples
42. responsive enabling
4.2.11.1. what
4.2.11.2. use when
4.2.11.3. why
4.2.11.4. how
4.2.11.5. examples
43. liquid layout
4.2.12.1. what
4.2.12.2. use when
4.2.12.3. why
4.2.12.4. how
4.2.12.5. examples
5. Doing Things:Actions and Commands
5.1. PUSHING THE BOUNDARIES
5.2. THE PATTERNS
44. button groups
5.2.1.1. what
5.2.1.2. use when
5.2.1.3. why
5.2.1.4. how
5.2.1.4.1. PLACEMENT OF BUTTON GROUPS
5.2.1.5. examples
45. action panel
5.2.2.1. what
5.2.2.2. use when
5.2.2.3. why
5.2.2.3.1. PUTTING THE ACTION PANEL ON THE UI
5.2.2.3.2. STRUCTURING THE ACTIONS
5.2.2.3.3. LABELING THE ACTIONS
5.2.2.4. examples
46. prominent “done” button
5.2.3.1. what
5.2.3.2. use when
5.2.3.3. why
5.2.3.4. how
5.2.3.5. examples
47. smart menu items
5.2.4.1. what
5.2.4.2. use when
5.2.4.3. why
5.2.4.4. how
5.2.4.5. example
48. preview
5.2.5.1. what
5.2.5.2. use when
5.2.5.3. why
5.2.5.4. how
5.2.5.5. examples
49. progress indicator
5.2.6.1. what
5.2.6.2. use when
5.2.6.3. why
5.2.6.4. how
5.2.6.5. example
50. cancelability
5.2.7.1. what
5.2.7.2. use when
5.2.7.3. why
5.2.7.4. how
5.2.7.5. examples
51. multi-level undo
5.2.8.1. what
5.2.8.2. use when
5.2.8.3. why
5.2.8.4. how
5.2.8.4.1. UNDOABLE OPERATIONS
5.2.8.4.2. DESIGN AN UNDO STACK
5.2.8.4.3. PRESENTATION
5.2.8.5. examples
52. command history
5.2.9.1. what
5.2.9.2. use when
5.2.9.3. why
5.2.9.4. how
5.2.9.5. examples
53. macros
5.2.10.1. what
5.2.10.2. use when
5.2.10.3. why
5.2.10.4. how
5.2.10.4.1. DEFINING THE MACRO
5.2.10.4.2. RUNNING THE MACRO
5.2.10.5. examples
6. Showing Complex Data:Trees, Tables, and Other Information Graphics
6.1. THE BASICS OF INFORMATION GRAPHICS
6.1.1. ORGANIZATIONAL MODELS: HOW IS THIS DATA ORGANIZED?
6.1.2. PREATTENTIVE VARIABLES: WHAT’S RELATED TO WHAT?
6.1.3. NAVIGATION AND BROWSING: HOW CAN I EXPLORE THIS DATA?
6.1.4. SORTING AND REARRANGEMENT: CAN I REARRANGE THIS DATA TO SEE IT DIFFERENTLY?
6.1.5. SEARCHING AND FILTERING: SHOW ME ONLY WHAT I NEED TO KNOW.
6.1.6. THE ACTUAL DATA: WHAT ARE THE SPECIFIC DATA VALUES?
6.2. THE PATTERNS
54. overview plus detail
6.2.1.1. what
6.2.1.2. use when
6.2.1.3. why
6.2.1.4. how
6.2.1.5. examples
55. datatips
6.2.2.1. what
6.2.2.2. use when
6.2.2.3. why
6.2.2.4. how
6.2.2.5. examples
56. dynamic queries
6.2.3.1. what
6.2.3.2. use when
6.2.3.3. why
6.2.3.4. how
6.2.3.5. examples
57. data brushing
6.2.4.1. what
6.2.4.2. use when
6.2.4.3. why
6.2.4.4. how
6.2.4.5. examples
58. local zooming
6.2.5.1. what
6.2.5.2. use when
6.2.5.3. why
6.2.5.4. how
6.2.5.5. examples
59. row striping
6.2.6.1. what
6.2.6.2. use when
6.2.6.3. why
6.2.6.4. how
6.2.6.5. examples
60. sortable table
6.2.7.1. what
6.2.7.2. use when
6.2.7.3. why
6.2.7.4. how
6.2.7.5. examples
61. jump to item
6.2.8.1. what
6.2.8.2. use when
6.2.8.3. why
6.2.8.4. how
6.2.8.5. example
62. new-item row
6.2.9.1. what
6.2.9.2. use when
6.2.9.3. why
6.2.9.4. how
6.2.9.5. example
63. cascading lists
6.2.10.1. what
6.2.10.2. use when
6.2.10.3. why
6.2.10.4. how
6.2.10.5. examples
64. tree table
6.2.11.1. what
6.2.11.2. use when
6.2.11.3. why
6.2.11.4. how
6.2.11.5. example
65. multi-y graph
6.2.12.1. what
6.2.12.2. use when
6.2.12.3. why
6.2.12.4. how
6.2.12.5. examples
66. small multiples
6.2.13.1. what
6.2.13.2. use when
6.2.13.3. why
6.2.13.4. how
6.2.13.5. examples
67. treemap
6.2.14.1. what
6.2.14.2. use when
6.2.14.3. why
6.2.14.4. how
6.2.14.5. examples
7. Getting Input from Users:Forms and Controls
7.1. THE BASICS OF FORM DESIGN
7.2. CONTROL CHOICE
7.2.1. LISTS OF ITEMS
7.2.2. TEXT
7.2.3. NUMBERS
7.2.4. DATES OR TIMES
7.3. THE PATTERNS
68. forgiving format
7.3.1.1. What
7.3.1.2. use when
7.3.1.3. why
7.3.1.4. how
7.3.1.5. example
69. structured format
7.3.2.1. what
7.3.2.2. use when
7.3.2.3. why
7.3.2.4. how
7.3.2.5. examples
70. fill-in-the-blanks
7.3.3.1. what
7.3.3.2. use when
7.3.3.3. why
7.3.3.4. how
7.3.3.5. examples
71. input hints
7.3.4.1. what
7.3.4.2. use when
7.3.4.3. why
7.3.4.4. how
7.3.4.5. example
72. input prompt
7.3.5.1. what
7.3.5.2. use when
7.3.5.3. why
7.3.5.4. how
7.3.5.5. example
73. autocompletion
7.3.6.1. what
7.3.6.2. use when
7.3.6.3. why
7.3.6.4. how
7.3.6.5. examples
74. dropdown chooser
7.3.7.1. what
7.3.7.2. use when
7.3.7.3. why
7.3.7.4. how
7.3.7.5. examples
75. illustrated choices
7.3.8.1. what
7.3.8.2. use when
7.3.8.3. why
7.3.8.4. how
7.3.8.5. examples
76. list builder
7.3.9.1. what
7.3.9.2. use when
7.3.9.3. why
7.3.9.4. how
7.3.9.5. examples
77. good defaults
7.3.10.1. what
7.3.10.2. use when
7.3.10.3. why
7.3.10.4. how
7.3.10.5. examples
78. same-page error messages
7.3.11.1. what
7.3.11.2. use when
7.3.11.3. why
7.3.11.4. how
7.3.11.5. examples
8. Builders and Editors
8.1. THE BASICS OF EDITOR DESIGN
8.1.1. WYSIWYG EDITING
8.1.2. DIRECT MANIPULATION
8.1.3. MODES
8.1.4. SELECTION
8.2. THE PATTERNS
79. edit-in-place
8.2.1.1. what
8.2.1.2. use when
8.2.1.3. why
8.2.1.4. how
8.2.1.5. examples
80. smart selection
8.2.2.1. what
8.2.2.2. use when
8.2.2.3. why
8.2.2.4. how
8.2.2.5. example
81. composite selection
8.2.3.1. what
8.2.3.2. use when
8.2.3.3. why
8.2.3.4. how
8.2.3.5. example
82. one-off mode
8.2.4.1. what
8.2.4.2. use when
8.2.4.3. why
8.2.4.4. how
8.2.4.5. example
83. spring-loaded mode
8.2.5.1. what
8.2.5.2. use when
8.2.5.3. why
8.2.5.4. how
8.2.5.5. examples
84. constrained resize
8.2.6.1. what
8.2.6.2. use when
8.2.6.3. why
8.2.6.4. how
8.2.6.5. examples
85. magnetism
8.2.7.1. what
8.2.7.2. use when
8.2.7.3. why
8.2.7.4. how
8.2.7.5. examples
86. guides
8.2.8.1. what
8.2.8.2. use when
8.2.8.3. why
8.2.8.4. how
8.2.8.5. examples
87. paste variations
8.2.9.1. what
8.2.9.2. use when
8.2.9.3. why
8.2.9.4. how
8.2.9.5. examples
9. Making It Look Good:Visual Style and Aesthetics
9.1. SAME CONTENT, DIFFERENT STYLES
9.2. THE BASICS OF VISUAL DESIGN
9.2.1. COLOR
9.2.2. TYPOGRAPHY
9.2.3. SPACIOUSNESS AND CROWDING
9.2.4. ANGLES AND CURVES
9.2.5. TEXTURE AND RHYTHM
9.2.6. IMAGES
9.2.7. CULTURAL REFERENCES
9.2.8. REPEATED VISUAL MOTIFS
9.3. WHAT THIS MEANS FOR DESKTOP APPLICATIONS
9.4. THE PATTERNS
88. deep background
9.4.1.1. what
9.4.1.2. use when
9.4.1.3. why
9.4.1.4. how
89. few hues, many values
9.4.2.1. what
9.4.2.2. use when
9.4.2.3. why
9.4.2.4. how
9.4.2.5. examples
90. corner treatments
9.4.3.1. what
9.4.3.2. use when
9.4.3.3. why
9.4.3.4. how
9.4.3.5. examples
91. borders that echo fonts
9.4.4.1. what
9.4.4.2. use when
9.4.4.3. why
9.4.4.4. how
9.4.4.5. examples
92. hairlines
9.4.5.1. what
9.4.5.2. use when
9.4.5.3. why
9.4.5.4. how
9.4.5.5. examples
93. contrasting font weights
9.4.6.1. what
9.4.6.2. use when
9.4.6.3. why
9.4.6.4. how
9.4.6.5. examples
94. skins
9.4.7.1. what
9.4.7.2. use when
9.4.7.3. why
9.4.7.4. how
Index
Colophon
Copyright
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Next
Next Chapter
Designing Interfaces
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset