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 6. Showing Complex Data:Trees, Tables, and Other Information Graphics

Information graphics—including maps, tables, and graphs—communicate knowledge visually rather than verbally. When done well, they let people use their eyes and minds to draw their own conclusions; they show, rather than tell.

These graphics are my favorite kinds of interfaces. However, poor tools or inadequate design can sharply limit what you can do with them, and many information-rich interfaces just don't quite work as well as they could.

The patterns in this chapter will help you make the best of the tools you have, and introduce you to some useful and interesting innovations in visualization design. The ideas described in this introduction can help you sort out which design aspects are most important to you in a given interface.

THE BASICS OF INFORMATION GRAPHICS

"Information graphics" simply means data presented visually, with the goal of imparting knowledge to the user. I'm including tables and tree views in that description because they are inherently visual, even though they're constructed primarily from text instead of lines and polygons. Other familiar static information graphics includes maps, flowcharts, bar plots, and diagrams of real-world objects.

But we're dealing with computers, not paper. You can make almost any good static design better with interactivity. Interactive tools let the user hide and show information as she needs it, and they put the user in the "driver's seat" as she chooses ...

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 6. Showing Complex Data:Trees, Tables, and Other Information Graphics

THE BASICS OF INFORMATION GRAPHICS

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.