Preface to the Third Edition |
|
xi | |
1 Designing for People |
|
1 | (26) |
|
|
2 | (6) |
|
|
2 | (1) |
|
Interactions Are Conversations |
|
|
2 | (1) |
|
Match Your Content and Functionality to Your Audience |
|
|
3 | (1) |
|
|
4 | (2) |
|
Goals: Your Interface Is Just a Means to Their Ends |
|
|
6 | (1) |
|
|
6 | (1) |
|
Design's Value: Solve the Right Problem, and Then Solve It Right |
|
|
6 | (2) |
|
Research: Ways to Understand Context and Goals |
|
|
8 | (3) |
|
|
9 | (1) |
|
|
9 | (1) |
|
|
9 | (1) |
|
|
10 | (1) |
|
Design Research Is Not Marketing Research |
|
|
10 | (1) |
|
The Patterns: Cognition and Behavior Related to Interface Design |
|
|
11 | (15) |
|
|
12 | (1) |
|
|
13 | (1) |
|
|
14 | (1) |
|
|
15 | (1) |
|
|
16 | (1) |
|
|
17 | (1) |
|
|
18 | (1) |
|
|
19 | (1) |
|
|
20 | (1) |
|
|
21 | (2) |
|
|
23 | (1) |
|
|
24 | (1) |
|
Social Media, Social Proof, and Collaboration |
|
|
25 | (1) |
|
|
26 | (1) |
2 Organizing the Content: Information Architecture and Application Structure |
|
27 | (102) |
|
|
28 | (1) |
|
|
29 | (1) |
|
Designing an Information Space for People |
|
|
29 | (1) |
|
|
29 | (2) |
|
Separate Information from Presentation |
|
|
30 | (1) |
|
Mutually Exclusive, Collectively Exhaustive |
|
|
31 | (1) |
|
Ways to Organize and Categorize Content |
|
|
32 | (1) |
|
|
32 | (1) |
|
|
32 | (1) |
|
|
32 | (1) |
|
|
33 | (1) |
|
|
33 | (1) |
|
|
33 | (1) |
|
Designing for Task and Workflow-Dominant Apps |
|
|
33 | (2) |
|
Make Frequently Used Items Visible |
|
|
33 | (1) |
|
"Chunk Up" Jobs into a Sequence of Steps |
|
|
34 | (1) |
|
Multiple Channels and Screen Sizes Are Today's Reality |
|
|
34 | (1) |
|
Display Your Information as Cards |
|
|
34 | (1) |
|
Designing a System of Screen Types |
|
|
35 | (1) |
|
Overview: Show a List or Grid of Things or Options |
|
|
36 | (1) |
|
Focus: Show One Single Thing |
|
|
37 | (1) |
|
Make: Provide Tools to Create a Thing |
|
|
38 | (1) |
|
Do: Facilitate a Single Task |
|
|
38 | (1) |
|
|
39 | (88) |
|
Feature, Search, and Browse |
|
|
39 | (12) |
|
|
51 | (2) |
|
|
53 | (14) |
|
|
67 | (11) |
|
|
78 | (4) |
|
|
82 | (4) |
|
|
86 | (4) |
|
|
90 | (7) |
|
|
97 | (8) |
|
|
105 | (5) |
|
|
110 | (10) |
|
|
120 | (7) |
|
|
127 | (2) |
3 Getting Around: Navigation, Signposts, and Wayfinding |
|
129 | (80) |
|
Understanding the Information and Task Space |
|
|
130 | (1) |
|
|
130 | (1) |
|
|
130 | (1) |
|
|
131 | (2) |
|
|
131 | (1) |
|
|
132 | (1) |
|
Associative and Inline Navigation |
|
|
132 | (1) |
|
|
132 | (1) |
|
|
132 | (1) |
|
|
133 | (1) |
|
|
133 | (2) |
|
Separate the Navigation Design from the Visual Design |
|
|
133 | (1) |
|
|
133 | (1) |
|
|
134 | (1) |
|
|
135 | (7) |
|
|
136 | (1) |
|
|
137 | (1) |
|
|
138 | (1) |
|
|
139 | (1) |
|
|
140 | (1) |
|
|
141 | (1) |
|
|
142 | (66) |
|
|
143 | (5) |
|
|
148 | (7) |
|
|
155 | (3) |
|
|
158 | (7) |
|
|
165 | (6) |
|
|
171 | (3) |
|
|
174 | (5) |
|
|
179 | (6) |
|
|
185 | (4) |
|
|
189 | (4) |
|
|
193 | (6) |
|
|
199 | (3) |
|
|
202 | (6) |
|
|
208 | (1) |
4 Layout of Screen Elements |
|
209 | (46) |
|
|
209 | (17) |
|
|
209 | (2) |
|
What Makes Things Look Important? |
|
|
211 | (6) |
|
Four Important Gestalt Principles |
|
|
217 | (3) |
|
|
220 | (3) |
|
|
223 | (1) |
|
|
224 | (1) |
|
|
224 | (1) |
|
|
225 | (1) |
|
|
226 | (29) |
|
|
228 | (3) |
|
|
231 | (4) |
|
|
235 | (3) |
|
|
238 | (4) |
|
|
242 | (3) |
|
|
245 | (4) |
|
|
249 | (3) |
|
|
252 | (3) |
5 Visual Style and Aesthetics |
|
255 | (40) |
|
The Basics of Visual Design |
|
|
256 | (25) |
|
|
258 | (1) |
|
|
258 | (1) |
|
|
258 | (7) |
|
|
265 | (8) |
|
|
273 | (1) |
|
|
274 | (4) |
|
|
278 | (3) |
|
Visual Design for Enterprise Applications |
|
|
281 | (1) |
|
|
282 | (1) |
|
|
282 | (12) |
|
|
282 | (3) |
|
|
285 | (2) |
|
|
287 | (3) |
|
|
290 | (2) |
|
|
292 | (2) |
|
|
294 | (1) |
6 Mobile Interfaces |
|
295 | (40) |
|
The Challenges and Opportunities of Mobile Design |
|
|
296 | (2) |
|
|
296 | (1) |
|
|
296 | (1) |
|
|
297 | (1) |
|
Difficulty of Typing Text |
|
|
297 | (1) |
|
Challenging Physical Environments |
|
|
297 | (1) |
|
|
298 | (1) |
|
Social Influences and Limited Attention |
|
|
298 | (1) |
|
How to Approach a Mobile Design |
|
|
298 | (7) |
|
|
301 | (4) |
|
|
305 | (29) |
|
|
306 | (4) |
|
|
310 | (3) |
|
|
313 | (3) |
|
|
316 | (2) |
|
|
318 | (4) |
|
|
322 | (3) |
|
|
325 | (3) |
|
Loading or Progress Indicators |
|
|
328 | (3) |
|
|
331 | (3) |
|
|
334 | (1) |
7 Lists of Things |
|
335 | (40) |
|
|
335 | (1) |
|
Back to Information Architecture |
|
|
336 | (2) |
|
What Are You Trying to Show? |
|
|
338 | (2) |
|
|
340 | (34) |
|
Two-Panel Selector or Split View |
|
|
341 | (5) |
|
|
346 | (3) |
|
|
349 | (4) |
|
|
353 | (3) |
|
|
356 | (5) |
|
|
361 | (4) |
|
|
365 | (3) |
|
|
368 | (2) |
|
|
370 | (2) |
|
|
372 | (2) |
|
|
374 | (1) |
8 Doing Things: Actions and Commands |
|
375 | (58) |
|
|
377 | (1) |
|
|
377 | (1) |
|
|
377 | (1) |
|
|
378 | (1) |
|
|
378 | (1) |
|
|
378 | (1) |
|
|
378 | (1) |
|
|
378 | (1) |
|
|
379 | (1) |
|
|
379 | (1) |
|
Single-Clicking Versus Double-Clicking Items |
|
|
379 | (1) |
|
|
380 | (1) |
|
|
380 | (1) |
|
|
380 | (1) |
|
|
380 | (1) |
|
|
381 | (1) |
|
|
381 | (1) |
|
Direct Manipulation of Objects |
|
|
382 | (1) |
|
|
383 | (49) |
|
|
384 | (3) |
|
|
387 | (3) |
|
|
390 | (6) |
|
Prominent "Done" Button or Assumed Next Step |
|
|
396 | (6) |
|
|
402 | (2) |
|
|
404 | (5) |
|
Spinners and Loading Indicators |
|
|
409 | (6) |
|
|
415 | (3) |
|
|
418 | (4) |
|
|
422 | (3) |
|
|
425 | (7) |
|
|
432 | (1) |
9 Showing Complex Data |
|
433 | (38) |
|
The Basics of Information Graphics |
|
|
433 | (13) |
|
Organizational Models: How Is This Data Organized? |
|
|
434 | (1) |
|
Preattentive Variables: What's Related to What? |
|
|
435 | (4) |
|
Navigation and Browsing: How Can I Explore This Data? |
|
|
439 | (2) |
|
Sorting and Rearranging: Can I Rearrange This Data to See It Differently? |
|
|
441 | (2) |
|
Searching and Filtering: How Can I See Only the Data That I Need? |
|
|
443 | (2) |
|
The Actual Data: What Are the Specific Data Values? |
|
|
445 | (1) |
|
|
446 | (25) |
|
|
447 | (5) |
|
|
452 | (3) |
|
|
455 | (4) |
|
|
459 | (3) |
|
|
462 | (3) |
|
|
465 | (4) |
|
The Power of Data Visualization |
|
|
469 | (2) |
10 Getting Input from Users: Forms and Controls |
|
471 | (62) |
|
The Basics of Form Design |
|
|
472 | (4) |
|
Form Design Continues to Evolve |
|
|
474 | (1) |
|
|
475 | (1) |
|
|
476 | (55) |
|
|
477 | (5) |
|
|
482 | (3) |
|
|
485 | (4) |
|
|
489 | (5) |
|
|
494 | (3) |
|
|
497 | (5) |
|
|
502 | (8) |
|
|
510 | (6) |
|
|
516 | (3) |
|
Good Defaults and Smart Prefills |
|
|
519 | (5) |
|
|
524 | (7) |
|
|
531 | (2) |
11 User Interface Systems and Atomic Design |
|
533 | (24) |
|
|
534 | (4) |
|
An Example Component-Based UI System: Microsoft's Fluent |
|
|
534 | (4) |
|
Atomic Design: A Way of Designing Systems |
|
|
538 | (3) |
|
|
539 | (1) |
|
The Atomic Design Hierarchy |
|
|
540 | (1) |
|
|
541 | (15) |
|
|
542 | (1) |
|
|
542 | (1) |
|
The Rise of UI Frameworks |
|
|
543 | (1) |
|
A Look at Selected UI Frameworks |
|
|
543 | (13) |
|
|
556 | (1) |
12 Beyond and Behind the Screen |
|
557 | (4) |
|
The Ingredients: Smart Systems |
|
|
558 | (1) |
|
|
558 | (1) |
|
|
559 | (1) |
|
|
559 | (1) |
|
|
559 | (1) |
|
|
559 | (2) |
Index |
|
561 | |