book

Designing Interfaces

Name: Designing Interfaces
Author: Jenifer Tidwell
ISBN: 9780596555177

by Jenifer Tidwell

November 2005

Intermediate to advanced

352 pages

10h 37m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Designing Interfaces
SPECIAL OFFER: Upgrade this ebook with O’Reilly
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 exploration2. instant gratification3. satisficing4. changes in midstream5. deferred choices6. incremental construction7. habituation8. spatial memory9. prospective memory10. streamlined repetition11. keyboard only12. other people's advice
2. Organizing the Content:Information Architecture and Application Structure
2.1. THE BASICS OF INFORMATION ARCHITECTURE: DIVIDING STUFF UP2.1.1. LISTS OF OBJECTS2.1.2. LISTS OF ACTIONS2.1.3. LISTS OF SUBJECT CATEGORIES2.1.4. LISTS OF TOOLS
2.2. PHYSICAL STRUCTURE
2.2.1. MULTIPLE WINDOWS2.2.2. ONE-WINDOW PAGING2.2.3. TILED PANES
2.3. THE PATTERNS
13. two-panel selector2.3.1.1. what2.3.1.2. use when2.3.1.3. why2.3.1.4. how2.3.1.5. examples14. canvas plus palette2.3.2.1. what2.3.2.2. use when2.3.2.3. why2.3.2.4. how2.3.2.5. examples15. one-window drilldown2.3.3.1. what2.3.3.2. use when2.3.3.3. why2.3.3.4. how2.3.3.5. examples16. alternative views2.3.4.1. what2.3.4.2. use when2.3.4.3. why2.3.4.4. how17. wizard2.3.5.1. what2.3.5.2. use when2.3.5.3. why2.3.5.4. how2.3.5.4.1. "CHUNKING" THE TASK2.3.5.4.2. PHYSICAL STRUCTURE2.3.5.5. examples18. extras on demand2.3.6.1. what2.3.6.2. use when2.3.6.3. why2.3.6.4. how19. intriguing branches2.3.7.1. what2.3.7.2. use when2.3.7.3. why2.3.7.4. how20. multi-level help2.3.8.1. what2.3.8.2. use when2.3.8.3. why2.3.8.4. how2.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 SHORT3.2.2. TOO MANY JUMPS
3.3. THE PATTERNS
21. clear entry points3.3.1.1. what3.3.1.2. use when3.3.1.3. why3.3.1.4. how3.3.1.5. examples22. global navigation3.3.2.1. what3.3.2.2. use when3.3.2.3. why3.3.2.4. how3.3.2.5. examples23. hub and spoke3.3.3.1. what3.3.3.2. use when3.3.3.3. why3.3.3.4. how3.3.3.5. examples24. pyramid3.3.4.1. what3.3.4.2. use when3.3.4.3. why3.3.4.4. how3.3.4.5. examples25. modal panel3.3.5.1. what3.3.5.2. use when3.3.5.3. why3.3.5.4. how3.3.5.5. examples26. sequence map3.3.6.1. what3.3.6.2. use when3.3.6.3. why3.3.6.4. how3.3.6.5. examples27. breadcrumbs3.3.7.1. what3.3.7.2. use when3.3.7.3. why3.3.7.4. how3.3.7.5. examples28. annotated scrollbar3.3.8.1. what3.3.8.2. use when3.3.8.3. why3.3.8.4. how3.3.8.5. examples29. color-coded sections3.3.9.1. what3.3.9.2. use when3.3.9.3. why3.3.9.4. how3.3.9.5. examples30. animated transition3.3.10.1. what3.3.10.2. use when3.3.10.3. why3.3.10.4. how3.3.10.5. examples31. escape hatch3.3.11.1. what3.3.11.2. use when3.3.11.3. why3.3.11.4. how3.3.11.5. examples
4. Organizing the Page:Layout of Page Elements
4.1. THE BASICS OF PAGE LAYOUT4.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 TOGETHER4.1.5. USING DYNAMIC DISPLAYS
4.2. THE PATTERNS
32. visual framework4.2.1.1. what4.2.1.2. use when4.2.1.3. why4.2.1.4. how4.2.1.5. examples33. center stage4.2.2.1. what4.2.2.2. use when4.2.2.3. why4.2.2.4. how4.2.2.5. examples34. titled sections4.2.3.1. what4.2.3.2. use when4.2.3.3. why4.2.3.4. how4.2.3.5. examples35. card stack4.2.4.1. what4.2.4.2. use when4.2.4.3. why4.2.4.4. how4.2.4.5. examples36. closable panels4.2.5.1. what4.2.5.2. use when4.2.5.3. why4.2.5.4. how4.2.5.5. examples37. movable panels4.2.6.1. what4.2.6.2. use when4.2.6.3. why4.2.6.4. how4.2.6.5. examples38. right/left alignment4.2.7.1. what4.2.7.2. use when4.2.7.3. why4.2.7.4. how4.2.7.5. examples39. diagonal balance4.2.8.1. what4.2.8.2. use when4.2.8.3. why4.2.8.4. how4.2.8.5. examples40. property sheet4.2.9.1. what4.2.9.2. use when4.2.9.3. why4.2.9.4. how4.2.9.5. examples41. responsive disclosure4.2.10.1. what4.2.10.2. use when4.2.10.3. why4.2.10.4. how4.2.10.5. examples42. responsive enabling4.2.11.1. what4.2.11.2. use when4.2.11.3. why4.2.11.4. how4.2.11.5. examples43. liquid layout4.2.12.1. what4.2.12.2. use when4.2.12.3. why4.2.12.4. how4.2.12.5. examples
5. Doing Things:Actions and Commands
5.1. PUSHING THE BOUNDARIES
5.2. THE PATTERNS
44. button groups5.2.1.1. what5.2.1.2. use when5.2.1.3. why5.2.1.4. how5.2.1.4.1. PLACEMENT OF BUTTON GROUPS5.2.1.5. examples45. action panel5.2.2.1. what5.2.2.2. use when5.2.2.3. why5.2.2.3.1. PUTTING THE ACTION PANEL ON THE UI5.2.2.3.2. STRUCTURING THE ACTIONS5.2.2.3.3. LABELING THE ACTIONS5.2.2.4. examples46. prominent "done" button5.2.3.1. what5.2.3.2. use when5.2.3.3. why5.2.3.4. how5.2.3.5. examples47. smart menu items5.2.4.1. what5.2.4.2. use when5.2.4.3. why5.2.4.4. how5.2.4.5. example48. preview5.2.5.1. what5.2.5.2. use when5.2.5.3. why5.2.5.4. how5.2.5.5. examples49. progress indicator5.2.6.1. what5.2.6.2. use when5.2.6.3. why5.2.6.4. how5.2.6.5. example50. cancelability5.2.7.1. what5.2.7.2. use when5.2.7.3. why5.2.7.4. how5.2.7.5. examples51. multi-level undo5.2.8.1. what5.2.8.2. use when5.2.8.3. why5.2.8.4. how5.2.8.4.1. UNDOABLE OPERATIONS5.2.8.4.2. DESIGN AN UNDO STACK5.2.8.4.3. PRESENTATION5.2.8.5. examples52. command history5.2.9.1. what5.2.9.2. use when5.2.9.3. why5.2.9.4. how5.2.9.5. examples53. macros5.2.10.1. what5.2.10.2. use when5.2.10.3. why5.2.10.4. how5.2.10.4.1. DEFINING THE MACRO5.2.10.4.2. RUNNING THE MACRO5.2.10.5. examples
6. Showing Complex Data:Trees, Tables, and Other Information Graphics
6.1. THE BASICS OF INFORMATION GRAPHICS6.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 detail6.2.1.1. what6.2.1.2. use when6.2.1.3. why6.2.1.4. how6.2.1.5. examples55. datatips6.2.2.1. what6.2.2.2. use when6.2.2.3. why6.2.2.4. how6.2.2.5. examples56. dynamic queries6.2.3.1. what6.2.3.2. use when6.2.3.3. why6.2.3.4. how6.2.3.5. examples57. data brushing6.2.4.1. what6.2.4.2. use when6.2.4.3. why6.2.4.4. how6.2.4.5. examples58. local zooming6.2.5.1. what6.2.5.2. use when6.2.5.3. why6.2.5.4. how6.2.5.5. examples59. row striping6.2.6.1. what6.2.6.2. use when6.2.6.3. why6.2.6.4. how6.2.6.5. examples60. sortable table6.2.7.1. what6.2.7.2. use when6.2.7.3. why6.2.7.4. how6.2.7.5. examples61. jump to item6.2.8.1. what6.2.8.2. use when6.2.8.3. why6.2.8.4. how6.2.8.5. example62. new-item row6.2.9.1. what6.2.9.2. use when6.2.9.3. why6.2.9.4. how6.2.9.5. example63. cascading lists6.2.10.1. what6.2.10.2. use when6.2.10.3. why6.2.10.4. how6.2.10.5. examples64. tree table6.2.11.1. what6.2.11.2. use when6.2.11.3. why6.2.11.4. how6.2.11.5. example65. multi-y graph6.2.12.1. what6.2.12.2. use when6.2.12.3. why6.2.12.4. how6.2.12.5. examples66. small multiples6.2.13.1. what6.2.13.2. use when6.2.13.3. why6.2.13.4. how6.2.13.5. examples67. treemap6.2.14.1. what6.2.14.2. use when6.2.14.3. why6.2.14.4. how6.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 ITEMS7.2.2. TEXT7.2.3. NUMBERS7.2.4. DATES OR TIMES
7.3. THE PATTERNS
68. forgiving format7.3.1.1. What7.3.1.2. use when7.3.1.3. why7.3.1.4. how7.3.1.5. example69. structured format7.3.2.1. what7.3.2.2. use when7.3.2.3. why7.3.2.4. how7.3.2.5. examples70. fill-in-the-blanks7.3.3.1. what7.3.3.2. use when7.3.3.3. why7.3.3.4. how7.3.3.5. examples71. input hints7.3.4.1. what7.3.4.2. use when7.3.4.3. why7.3.4.4. how7.3.4.5. example72. input prompt7.3.5.1. what7.3.5.2. use when7.3.5.3. why7.3.5.4. how7.3.5.5. example73. autocompletion7.3.6.1. what7.3.6.2. use when7.3.6.3. why7.3.6.4. how7.3.6.5. examples74. dropdown chooser7.3.7.1. what7.3.7.2. use when7.3.7.3. why7.3.7.4. how7.3.7.5. examples75. illustrated choices7.3.8.1. what7.3.8.2. use when7.3.8.3. why7.3.8.4. how7.3.8.5. examples76. list builder7.3.9.1. what7.3.9.2. use when7.3.9.3. why7.3.9.4. how7.3.9.5. examples77. good defaults7.3.10.1. what7.3.10.2. use when7.3.10.3. why7.3.10.4. how7.3.10.5. examples78. same-page error messages7.3.11.1. what7.3.11.2. use when7.3.11.3. why7.3.11.4. how7.3.11.5. examples
8. Builders and Editors
8.1. THE BASICS OF EDITOR DESIGN8.1.1. WYSIWYG EDITING8.1.2. DIRECT MANIPULATION8.1.3. MODES8.1.4. SELECTION
8.2. THE PATTERNS
79. edit-in-place8.2.1.1. what8.2.1.2. use when8.2.1.3. why8.2.1.4. how8.2.1.5. examples80. smart selection8.2.2.1. what8.2.2.2. use when8.2.2.3. why8.2.2.4. how8.2.2.5. example81. composite selection8.2.3.1. what8.2.3.2. use when8.2.3.3. why8.2.3.4. how8.2.3.5. example82. one-off mode8.2.4.1. what8.2.4.2. use when8.2.4.3. why8.2.4.4. how8.2.4.5. example83. spring-loaded mode8.2.5.1. what8.2.5.2. use when8.2.5.3. why8.2.5.4. how8.2.5.5. examples84. constrained resize8.2.6.1. what8.2.6.2. use when8.2.6.3. why8.2.6.4. how8.2.6.5. examples85. magnetism8.2.7.1. what8.2.7.2. use when8.2.7.3. why8.2.7.4. how8.2.7.5. examples86. guides8.2.8.1. what8.2.8.2. use when8.2.8.3. why8.2.8.4. how8.2.8.5. examples87. paste variations8.2.9.1. what8.2.9.2. use when8.2.9.3. why8.2.9.4. how8.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. COLOR9.2.2. TYPOGRAPHY9.2.3. SPACIOUSNESS AND CROWDING9.2.4. ANGLES AND CURVES9.2.5. TEXTURE AND RHYTHM9.2.6. IMAGES9.2.7. CULTURAL REFERENCES9.2.8. REPEATED VISUAL MOTIFS
9.3. WHAT THIS MEANS FOR DESKTOP APPLICATIONS
9.4. THE PATTERNS
88. deep background9.4.1.1. what9.4.1.2. use when9.4.1.3. why9.4.1.4. how89. few hues, many values9.4.2.1. what9.4.2.2. use when9.4.2.3. why9.4.2.4. how9.4.2.5. examples90. corner treatments9.4.3.1. what9.4.3.2. use when9.4.3.3. why9.4.3.4. how9.4.3.5. examples91. borders that echo fonts9.4.4.1. what9.4.4.2. use when9.4.4.3. why9.4.4.4. how9.4.4.5. examples92. hairlines9.4.5.1. what9.4.5.2. use when9.4.5.3. why9.4.5.4. how9.4.5.5. examples93. contrasting font weights9.4.6.1. what9.4.6.2. use when9.4.6.3. why9.4.6.4. how9.4.6.5. examples94. skins9.4.7.1. what9.4.7.2. use when9.4.7.3. why9.4.7.4. how
Index
About the Author
Colophon
SPECIAL OFFER: Upgrade this ebook with O’Reilly

Content preview from Designing Interfaces

Chapter 4. Organizing the Page:Layout of Page Elements

Page layout is the art of manipulating the user's attention on a page to convey meaning, sequence, and points of interaction.

If the word "manipulating" sounds unseemly to you, think about it this way. Film and television directors make their living by manipulating your attention on the movie or TV screen, and you are presumably a willing participant. Likewise for editors who arrange articles, headlines, and ads on a newspaper. If all this content were presented in a drab monotone, with no graphic emphasis to grab and move your attention, you would actually find it harder to extract meaning—what's supposed to be important, and what's not?

Even though it is ultimately an art, there might be more rationality to good page layout than you think. Some important ideas from graphic design are explained in this chapter introduction; each can guide you in the layout of pages, screens, and dialog boxes. We'll talk about visual hierarchy, visual flow and focal points, and grouping and alignment—all are predictable and rational approaches to page design. This chapter's patterns describe concrete ways to apply those high-level concepts to interface design.

But the changeable, interactive nature of computer displays makes layout easier in some ways, harder in others. We'll talk about why that's true. Some of these patterns work as well in print as they do onscreen, but most of them would be useless in print because they presume that the user ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 0596008031Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Designing Interfaces

by Jenifer Tidwell

Chapter 4. Organizing the Page:Layout of Page Elements

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.