Designing Interfaces : Patterns for Effective Interaction Design

by Tidwell, Jenifer

• ISBN13: 9780596008031
• ISBN10: 0596008031
• Format: Paperback
• Copyright: 2005-11-01
• Publisher: Oreilly & Associates Inc

Summary

This book catalogs well-known solutions to common UI design problems, and expresses them as a collection of patterns. These solutions are drawn from desktop software, web sites, web applications, and even consumer electronics. For each pattern, the book describes why these interfaces work as well as what they do, sometimes digging deep into software history, sometimes referring to recent cognitive science research, and sometimes using visual design principles well-known to artists but rarely taught to technical folk. Each pattern contains concrete examples, recommendations, design alternatives, warnings, and occasionally notes on implementation issues. Readers are shown, not just told, how to go about using these techniques in their designs.

Author Biography

For more than a decade, Jenifer Tidwell has been designing and building user interfaces for a variety of industry verticals, often in the Java programming language. She has experience in designing both desktop and Web applications. As a user interface designer at The MathWorks, Jenifer was instrumental in a redesign of the charting and visualization UI of MATLAB, which is used by researchers, students, and engineers worldwide to develop cars, planes, proteins, and theories about the universe.

Table of Contents

Preface	x
What Users Do	54
A Means to an End	3	(2)
The Basics of User Research	5	(2)
Users' Motivation to Learn	7	(3)
The Patterns	10	(1)
safe exploration	11	(1)
instant gratification	11	(1)
satisficing	11	(1)
changes in midstream	12	(1)
deferred choices	13	(1)
incremental construction	14	(1)
habituation	14	(1)
spatial memory	15	(1)
prospective memory	16	(1)
streamlined repetition	17	(1)
keyboard only	17	(1)
other people's advice	18	(2)
Organizing the Content: Information Architecture and Application Structure	20	(34)
The Basics of Information Architecture: Dividing Stuff Up	22	(6)
Physical Structure	28	(2)
The Patterns	30	(1)
two-panel selector	31	(3)
canvas plus palette	34	(2)
one-window drilldown	36	(3)
alternative views	39	(3)
wizard	42	(3)
extras on demand	45	(2)
intriguing branches	47	(2)
multi-level help	49	(5)
Getting Around: Navigation, Signposts, and Wayfinding	54	(34)
Staying Found	55	(1)
The Cost of Navigation	56	(7)
The Patterns	63	(1)
clear entry points	64	(2)
global navigation	66	(2)
hub and spoke	68	(3)
pyramid	71	(3)
modal panel	74	(2)
sequence map	76	(2)
breadcrumbs	78	(2)
annotated scrollbar	80	(2)
color-coded sections	82	(2)
animated transition	84	(2)
escape hatch	86	(2)
Organizing the Page: Layout of Page Elements	88	(42)
The Basics of Page Layout	89	(10)
The Patterns	99	(1)
visual framework	100	(3)
center stage	103	(4)
titled sections	107	(2)
card stack	109	(2)
closable panels	111	(3)
movable panels	114	(2)
right/left alignment	116	(2)
diagonal balance	118	(2)
property sheet	120	(3)
responsive disclosure	123	(2)
responsive enabling	125	(3)
liquid layout	128	(2)
Doing Things: Actions and Commands	130	(30)
Pushing the Boundaries	133	(3)
The Patterns	136	(1)
button groups	137	(3)
action panel	140	(4)
prominent ``done'' button	144	(2)
smart menu items	146	(1)
preview	147	(2)
progress indicator	149	(2)
cancelability	151	(2)
multi-level undo	153	(3)
command history	156	(2)
macros	158	(2)
Showing Complex Data: Trees, Tables, and Other Information Graphics	160	(46)
The Basics of Information Graphics	161	(12)
The Patterns	173	(1)
overview plus detail	174	(2)
datatips	176	(2)
dynamic queries	178	(3)
data brushing	181	(3)
local zooming	184	(3)
row striping	187	(2)
sortable table	189	(2)
jump to item	191	(2)
new-item row	193	(2)
cascading lists	195	(2)
tree table	197	(1)
multi-y graph	198	(2)
small multiples	200	(3)
treemap	203	(3)
Getting Input From Users: Forms and Controls	206	(36)
The Basics of Form Design	207	(2)
Control Choice	209	(9)
The Patterns	218	(1)
forgiving format	219	(1)
structured format	220	(2)
fill-in-the-blanks	222	(2)
input hints	224	(1)
input prompt	225	(2)
autocompletion	227	(3)
dropdown chooser	230	(3)
illustrated choices	233	(2)
list builder	235	(2)
good defaults	237	(2)
same-page error messages	239	(3)
Builders and Editors	242	(26)
The Basics of Editor Design	244	(4)
The Patterns	248	(1)
edit-in-place	249	(2)
smart selection	251	(2)
composite selection	253	(2)
one-off mode	255	(2)
spring-loaded mode	257	(2)
constrained resize	259	(2)
magnetism	261	(2)
guides	263	(3)
paste variations	266	(2)
Making It Look Good: Visual Style and Aesthetics	268	(44)
Same Content, Different Styles	270	(9)
The Basics of Visual Design	279	(8)
What This Means for Desktop Applications	287	(3)
The Patterns	290	(1)
deep background	291	(3)
few hues, many values	294	(3)
corner treatments	297	(3)
borders that echo fonts	300	(3)
hairlines	303	(3)
contrasting font weights	306	(2)
skins	308	(4)
References	312	(6)
Index	318