Web Form Design: Filling in the Blanks by Michael Grillhösl

registration, and any task requiring information entry. In Web Form Design, Luke Wroblewski draws on original research, his considerable experience at Yahoo! and eBay, and the perspectives of many of the field’s leading designers to show you everything you need to know about designing effective and engaging web forms. “Luke Wroblewski has done the entire world a great favor by writing this book. With deft explanations and clear examples, he presents a clear case for better Web forms and how to achieve them. This book will help you every day.” ALAN COOPER Chairman Cooper

“If I could only send a copy of Web Form Design to the designer of every web form that’s frustrated me, I’d go bankrupt from the shipping charges alone. Please. Stop the pain. Read this book now.”

W E B F O R M D E S I G N by LUKE WROBLE W SK I

Forms make or break the most crucial online interactions: checkout,

ERIC MEYER Author of CSS: The Definitive Guide meyerweb.com

“Luke’s book is by far the most practical, comprehensive, data-driven guide for solving form design challenges. It is an essential reference that will become a must-read for many years.” IRENE AU Director, User Experience Google

WEB FORM DESIGN www.rosenfeldmedia.com

Filling in the Blanks

MORE ON WEB FORM DESIGN www.rosenfeldmedia.com/books/webforms/

by LUKE WROBLE W SK I foreword by Jared Spool

K_Xeb pfl ]fi gliZ_Xjè^ k_\ [`^`kXc \[`k`fe f] N\Y =fid ;\j`ê1 =`ccè^ è k_\ 9cXebj Pfl d`^_k efk\ k_Xk k_\ YffbËj `dX^\j Xi\ efk XcnXpj Xj Zi`jg Xj nflc[ Y\ `[\Xc% K_\i\ Xi\ c`k\iXccp _le[i\[j f] `dX^\j è k_`j Yffb# Xe[ èZfigfiXkè^ k_\d Xk X _`^_\i i\jfclk`fe nflc[ i\jlck è X Ôc\ j`q\ k_Xk nflc[ Y\ ]Xi kff cXi^\ kf [fnecfX[% K_XkËj n_p n\Ëm\ dX[\ \XZ_ `dX^\ XmX`cXYc\ m`X =c`Zbi% Aljk Zc`Zb fe k_\ `dX^\ fi `kj =c`Zbi LIC# Xe[ pflËcc cXleZ_ X Zi`jg\i# dfi\ i\X[XYc\ m\ij`fe f] k_Xk `dX^\% 8ck_fl^_ efk Xe `[\Xc nfib$Xifle[# n\ [f _fg\ `k dXb\j ]fi X Y\kk\i# dfi\ ljXYc\ i\X[è^ \og\i`\eZ\% Gc\Xj\ ZfekXZk d\ n`k_ pfli hl\jk`fej Xe[ jl^^\jk`fej2 k_Xeb pfl Cfl`j Ifj\e]\c[# GlYc`j_\i Ifj\e]\c[ D\[`X cfl7ifj\e]\c[d\[`X%Zfd

WEB FORM DESIGN FILLING IN THE BLANKS by: Luke Wroblewski

Rosenfeld Media Brooklyn, New York

Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

TABLE OF CONTENTS How to Use This Book Who Should Read This Book? Whatâ&#x20AC;&#x2122;s in the Book? What Comes with the Book?

Frequently Asked Questions Foreword

x xi xii xv

xviii xxiii

Form Structure CHAPTER 1 The Design of Forms

Form Design Matters The Impact of Form Design Design Considerations

5 16 27

CHAPTER 2 Form Organization

What to Include Have a Conversation Organizing Content Group Distinctions Best Practices

32 37 40 48 56

ii Table of Contents

TABLE OF CONTENTS CHAPTER 3 Path to Completion Name That Form Start Pages Clear Scan Lines Minimal Distractions Progress Indicators Tabbing Best Practices

59 60 62 64 68 70 81 85

Form Elements CHAPTER 4 Labels

Label Alignment Top-Aligned Labels Right-Aligned Labels Left-Aligned Labels

87 89 94 96

Labels Within Inputs Mixed Alignments Best Practices

99 102 104

CHAPTER 5 Input Fields

106

Types of Input Fields Field Lengths Required Fields

107 116 119

iii Table of Contents

TABLE OF CONTENTS Input Groups Flexible Inputs Best Practices

131 132 136

CHAPTER 6 Actions

138

Primary and Secondary Actions Placement Actions in Progress Agree and Submit Best Practices

CHAPTER 7 Help Text

139 147 150 155 158

160

When to Help Automatic Inline Help User-Activated Inline Help User-Activated Section Help Secure Transactions Best Practices

CHAPTER 8 Errors and Success Errors Success No Dead Ends Best Practices

161 166 173 178 182 184

186 187 205 211 212

iv Table of Contents

TABLE OF CONTENTS Form Interaction CHAPTER 9 Inline Validation Confirmation Suggestions Limits Best Practices

214 215 225 228 230

CHAPTER 10 Unnecessary Inputs Removing Questions Smart Defaults Personalized Defaults Best Practices

231 232 239 246 248

CHAPTER 11 Additional Inputs

249

Inline Additions Overlays Progressive Engagement Best Practices

250 254 265 269

v Table of Contents

TABLE OF CONTENTS CHAPTER 12 Selection-Dependent Inputs Page-Level Selection Horizontal Tabs Vertical Tabs Drop-Down List Expose Below Radio Buttons Expose Within Radio Buttons Exposed Inactive Exposed Groups Best Practices

CHAPTER 13 Gradual Engagement

271 276 279 282 285 287 290 292 295 299

302

Signing Up Getting Engaged Best Practices

303 306 316

CHAPTER 14 Whatâ&#x20AC;&#x2122;s Next?

317

The Disappearing Form The Changing Form Getting It Built

vi Table of Contents

318 321 329

TABLE OF CONTENTS Index Acknowledgments About the Author

vii Table of Contents

331 342 344

N\Y =fid ;\j`ê1 =`ccè^ è k_\ 9cXebj 9p Clb\ NifYc\njb` Ifj\e]\c[ D\[`X# CC: .', :Xiifcc Jki\\k# )C 9iffbcpe# E\n Pfib (()(, LJ8 Fe k_\ n\Y1 nnn%ifj\e]\c[d\[`X%Zfd Gc\Xj\ j\e[ \iifij kf1 \iiXkX7ifj\e]\c[d\[`X%Zfd GlYc`j_\i1 Cfl`j Ifj\e]\c[ <[`kfi&Gif[lZk`fe <[`kfi1 DXikX AljkXb @ek\i`fi CXpflk1 JljXe ?fe\pn\cc :fm\i ;\j`ê1 K_\ ?\X[j f] JkXk\ @e[\o\i1 EXeZp >l\ek_\i Giff]i\X[\i1 :_lZb ?lkZ_èjfe )''/ Ifj\e]\c[ D\[`X# CC: 8cc I`^_kj I\j\im\[ @J9E1 ($0**/)'$),$O @J9E$(*1 0./$($0**/)'$),$, C`YiXip f] :feî\jj :fekifc EldY\i1 )''/0)*)+( Gièk\[ Xe[ Yfle[ è k_\ Le`k\[ JkXk\j f] 8d\i`ZX

=fi \m\ipfe\ n_f _Xj _X[ kf Ôcc `e X ]fid%

HOW TO USE THIS BOOK N\Y ]fid [\j`ê% ;f n\ i\Xccp e\\[ Xe \ekì\ Yffb fe jlZ_ X dle[Xe\ kfg`Z6 Pfl Y\k n\ [f% 8j XiY`k\ij f] Z_\Zbflk# i\^`jkiXk`fe# Xe[ [XkX \ekip# N\Y ]fidj Xi\ f]k\e k_\ cpeZ_gèj f] jlZZ\jj]lc N\Y Xggc`ZXk`fej% :_\Zbflk ]fidj Xi\ _fn \Zfdd\iZ\ m\e[fij Zcfj\ [\XcjÇk_\p jkXe[ Y\kn\\e g\fgc\ Xe[ k_\ gif[lZkj fi j\im`Z\j k_\p nXek Xe[ Y\kn\\e ZfdgXe`\j Xe[ k_\ì gifÔkj% =fi \oXdgc\# \9XpËj mXjk èm\ekfip `kËj k_\ *'k_ cXi^\jk \Zfefdp è k_\ nfic[ `j [i`m\e è ef jdXcc gXik Yp `kj J\cc Pfli @k\d ]fid% I\^`jkiXk`fe ]fidj Xi\ k_\ ^Xk\b\\g\ij kf Zfddle`kp d\dY\ij_`gÇk_\p Xccfn g\fgc\ kf [\Ôe\ k_\ì `[\ek`kp n`k_è jfZ`Xc Xggc`ZXk`fej% 8cc f] DpJgXZ\Ëj (,'" d`cc`fe lj\ij afè\[ k_ifl^_ X N\Y ]fid%

x How to Use this Book

HOW TO USE THIS BOOK ;XkX èglk ]fidj Xccfn lj\ij kf Zfeki`Ylk\ fi j_Xi\ è]fidXk`fe# Xe[ k_\p Xccfn ZfdgXe`\j kf îfn k_\ì Zfek\ek% Dfjk f] PflKlY\Ëj _l^\ m`[\f Zfcc\Zk`fe Zfd\j ]ifd `kj LgcfX[ Pfli M`[\f ]fid% N\Y ]fidj Xi\ f]k\e k_\ cXjk Xe[ dfjk `dgfikXek d`c\ è X cfe^ aflie\p% ;\jg`k\ k_\ì `dgfikXeZ\# k_\ [\j`ê f] ]fidj `j f]k\e gfficp k_fl^_k flk Xe[ ZfeZ\`m\[% Pfli fi^Xe`qXk`fe dXp _Xm\ Xci\X[p èm\jk\[ _\Xm`cp è fg\eè^ X i\cXk`fej_`g n`k_ `kj Zljkfd\ij k_ifl^_ _`^_$hlXc`kp dXib\kè^# j`k\ [\j`ê# Xe[ j\XiZ_ \e^è\ fgk`d`qXk`fe% 9lk efn `k `j k`d\ kf ÈZcfj\ k_\ [\XcÉ Yp dXbè^ jli\ k_fj\ Zljkfd\ij ZXe Zfdgc\k\ pfli ]fidj% 8e[ k_XkËj n_\i\ k_`j Yffb n`cc _\cg% Who Should Read this Book? N\Y =fid ;\j`ê1 =`ccè^ è k_\ 9cXebj `j kilcp ]fi Xepfe\ n_f e\\[j kf [\j`ê fi [\m\cfg

xi How to Use this Book

HOW TO USE THIS BOOK N\Y ]fidjÇXe[ n_f [f\jeËk6 N_Xk\m\i kpg\ f] [\j`ê\i pfl Xi\ÇljXY`c`kp \e^è\\i# N\Y [\m\cfg\i# gif[lZk dXeX^\i# m`jlXc [\j`ê\i# èk\iXZk`fe [\j`ê\i# fi è]fidXk`fe XiZ_`k\ZkÇ pflËi\ gifYXYcp èmfcm\[ è N\Y ]fid [\j`ê è jfd\ ]Xj_`fe% K_`j Yffb n`cc gifm`[\ pfl n`k_ jfd\k_è^ k_Xk pfl ZXe lj\ `dd\[`Xk\cp kf `dgifm\ pfli j`k\Ëj ]fidj% @] pflËi\ X Y\^èe\i# pflËcc i\Z\`m\ X YifX[ fm\im`\n f] Xcc k_\ Zfej`[\iXk`fej k_Xk Zfejk`klk\ ^ff[ ]fid [\j`ê% @] pflËi\ Xe \og\i`\eZ\[ giXZk`k`fe\i# pflËcc \e^X^\ Xk X [\\g\i c\m\c n`k_ `jjl\j Xe[ jfclk`fej pfl dXp efk _Xm\ \eZflek\i\[ Y\]fi\% What’s in the Book? K_`j Yffb `j X Zfcc\Zk`fe f] k_\ èj`^_kj Xe[ Y\jk giXZk`Z\j ]fi N\Y ]fid [\j`ê @Ëm\ XZZldlcXk\[ k_ifl^_ () p\Xij f] [\j`êè^ N\Y \og\i`\eZ\j% N_\i\m\i gfjj`Yc\# @Ëm\

xii How to Use this Book

HOW TO USE THIS BOOK Zfe[lZk\[ fi i\]\i\eZ\[ i\j\XiZ_ kf Y\kk\i le[\ijkXe[ k_\ `dgXZk f] N\Y ]fid [\j`ê [\Z`j`fej% N_\i\ ef i\j\XiZ_ nXj XmX`cXYc\# @Ëm\ ZXcc\[ fe dp fne \og\i`\eZ\j Xe[ k_fj\ f] fk_\i [\j`ê\ij Xe[ [\m\cfg\ij% Aljk XYflk \m\ip Z_Xgk\i è k_`j Yffb niXgj lg n`k_ X j\k f] Y\jk giXZk`Z\j k_Xk flkcè\ nXpj pfl ZXe Y\^è kf Xggcp k_\ b\p gfèkj dX[\ n`k_è \XZ_ Z_Xgk\i% 8ck_fl^_ k_\j\ Y\jk giXZk`Z\j ZXe ^l`[\ pfl kfnXi[ k_\ i`^_k [\j`ê jfclk`fej ]fi pfli ]fidj# k_\ Zfek\ek n`k_è \XZ_ Z_Xgk\i \ogcXèj k_\ n_Xk# n_\e# Xe[ n_p k_Xk è]fidj \XZ_ Y\jk giXZk`Z\% J\Zk`fe Fe\# È=fid JkilZkli\#É Y\^èj n`k_ Xe fm\im`\n f] n_p ]fid [\j`ê dXkk\ij Xe[ k_\ gièZ`gc\j Y\_è[ ^ff[ ]fid [\j`ê% K_\ i\dXèè^ Z_Xgk\ij gifm`[\ X j\k f] Y\jk giXZk`Z\j ]fi fi^Xe`qè^ ]fidj Xe[ ]fZljè^ g\fgc\ fe k_\ì gi`dXip ^fXc f] Zfdgc\kè^ X ]fid%

xiii How to Use this Book

HOW TO USE THIS BOOK Chapter 1: Design of Forms Chapter 2: Form Organization Chapter 3: Path to Completion

J\Zk`fe Knf# È=fid <c\d\ekj#É [`m\j èkf X j\i`\j f] Y\jk giXZk`Z\j ]fi k_\ Zfi\ Zfdgfe\ekj k_Xk dXb\ lg ]fidj1 cXY\cj# èglk Ô\c[j# XZk`fej# Xe[ d\jjX^è^ _\cg# \iifij# jlZZ\jj % ?\i\ pfl n`cc Ôe[ è]fidXk`fe fe Xc`êè^ cXY\cj# i\hlì\[ èglk Ô\c[j# gi`dXip m\ijlj j\Zfe[Xip XZk`fej# XlkfdXk`Z _\cg jpjk\dj# Xe[ dlZ_ dfi\% Chapter Chapter Chapter Chapter Chapter

4: Labels 5: Input Fields 6: Actions 7: Help Text 8: Errors and Success

J\Zk`fe K_i\\# È=fid @ek\iXZk`fe#É ]fZlj\j fe k_\ gifZ\jj f] Ôccè^ è ]fidj% =ifd ècè\ mXc`[Xk`fe jfclk`fej k_Xk ZfeÔid fi jl^^\jk mXc`[ Xejn\ij kf îX[lXc \e^X^\d\ek jfclk`fej

xiv How to Use this Book

HOW TO USE THIS BOOK k_Xk `dd\ij\ g\fgc\ n`k_`e X N\Y \og\i`\eZ\ n`k_flk ]fidj# k_`j j\Zk`fe `j XYflk Xggcp`e^ [peXd`Z Y\_Xm`fi kf dXb\ ]fidj dfi\ lj\]lc# ljXYc\# Xe[ \eafpXYc\% Chapter Chapter Chapter Chapter Chapter Chapter

9: Inline Validation 10: Unnecessary Inputs 11: Additional Inputs 12: Selection-Dependent Inputs 13: Gradual Engagement 14: What’s Next?

What Comes with the Book? K_`j YffbËj ZfdgXe`fe N\Y j`k\ ( http:// www.rosenfeldmedia.com/books/ webforms) ZfekXèj gfèk\ij kf lj\]lc N\Y ]fid [\j`ê Xik`Zc\j k_Xk @Ëm\ ]fle[ Xe[ @Ëm\ Xcjf ni`kk\e% @k èZcl[\j X ZXc\e[Xi f] dp lgZfdè^ kXcbj# Xe[ X gcXZ\ ]fi pfl kf \e^X^\ è [`jZljj`fe n`k_ fk_\ij èk\i\jk\[ è N\Y ]fid [\j`ê% N\ \og\Zk kf gfjk è]fidXk`fe fe e\n N\Y ]fid [\j`ê$i\cXk\[ i\jfliZ\j

xv How to Use this Book

HOW TO USE THIS BOOK Xe[ jg\Z`Xc [`jZflekj ]fi i\cXk\[ Xggc`ZXk`fej% Pfl ZXe b\\g lg n`k_ k_\ j`k\ Yp jlYjZi`Yè^ kf `kj IJJ ]\\[ ( http://feeds. rosenfeldmedia.com/webforms/) N\Ëm\ Xcjf dX[\ k_\ YffbËj [`XîXdj# jZi\\ej_fkj# Xe[ fk_\i `ccljkiXk`fej XmX`cXYc\ le[\i X :i\Xk`m\ :fddfej c`Z\ej\ ]fi pfl kf [fnecfX[ Xe[ lj\ è pfli fne gi\j\ekXk`fej% PflËcc Ôe[ k_\d è =c`Zbi (http://www. flickr.com/photos/rosenfeldmedia). N\ i\Zfdd\e[ k_Xk pfl [`jgcXp k_\ [`^`kXc m\ij`fe f] k_\ Yffb ljè^ X i\Z\ek m\ij`fe f] 8[fY\Ëj I\X[\i fi 8ZifYXk Gif]\jj`feXc# n_`Z_ jlggfik c`m\ cèbj% K_Xk nXp pfl ZXe aldg kf fk_\i gXikj f] k_\ Yffb `%\%# ]ifd k_\ kXYc\ f] Zfek\ekj kf X jg\Z`ÔZ j\Zk`fe Xe[ kf \ok\ieXc n\Y gX^\j jlZ_ Xj k_\ cXi^\# _`^_$i\jfclk`fe m\ij`fe f] \XZ_ f] k_\ YffbËj `ccljkiXk`fej# n_`Z_ n\Ëm\ dX[\ XmX`cXYc\ m`X =c`Zbi Yp j`dgcp Zc`Zbè^% PflËcc Xcjf Ôe[ eXm`^Xk`fe

xvi How to Use this Book

HOW TO USE THIS BOOK \Xj`\i `] pfl [`jgcXp k_\ EXm`^Xk`fe GXe\ è 8ggc\Ëj Gi\m`\n i\X[\i# k_\ ;iXn\i % N\Ëm\ fgk`d`q\[ k_\ [`^`kXc m\ij`fe f] k_`j Yffb ]fi Y\è^ i\X[ Xe[ lj\[ fe X Zfdglk\i% 8j [`^`kXc Yffbj Xi\ jk`cc hl`k\ X e\n g_\efd\efe# n\Ë[ cfm\ pfli jl^^\jk`fej ]fi _fn kf `dgifm\ fli [`^`kXc [\j`ê2 gc\Xj\ ZfekXZk lj Xk è]f7ifj\e]\c[d\[`X%Zfd%

xvii How to Use this Book

FREQUENTLY ASKED QUESTIONS Why does Web form design matter?

=fidj \eXYc\ Zfdd\iZ\# Zfddle`k`\j# Xe[ gif[lZk`m`kp fe k_\ N\Y kf k_i`m\% @] pfl Xi\ è fecè\ i\kX`c# pfli ^fXc `j kf j\cc k_è^j% 9lk jkXe[è^ è k_\ nXp f] pfli gif[lZkj Xe[ pfli Zljkfd\ij `j X Z_\Zbflk ]fid% @] pfl Xi\ [\m\cfgè^ jfZ`Xc jf]knXi\# pfli ^fXc `j kf îfn pfli Zfddle`kp% JkXe[è^ è Y\kn\\e pfl Xe[ Zfddle`kp d\dY\ij `j X ]fid% @] pflËm\ Yl`ck X gif[lZk`m`kp$YXj\[ N\Y Xggc`ZXk`fe# ]fidj \eXYc\ b\p èk\iXZk`fej k_Xk c\k g\fgc\ Zi\Xk\ Xe[ dXeX^\ Zfek\ek% See page 5 ]fi dfi\ è]fidXk`fe% How should I organize my Web form—within one Web page or across several?

N_f `j Ôccè^ k_\ ]fid è Xe[ n_p6 8ejn\iè^ k_`j lg ]ifek Xccfnj lj kf k_èb XYflk fli ]fidj Xj X [\c`Y\iXk\ Zfem\ijXk`fe èjk\X[ f] k_\ èglkj ]fi X [XkXYXj\% N_\e pfl XggifXZ_ ]fidj Xj X Zfem\ijXk`fe# eXkliXc Yi\Xbj n`cc \d\i^\ Y\kn\\e kfg`Zj% N_\e k_\j\ [`jkèZk

xviii Frequently Asked Questions

FREQUENTLY ASKED QUESTIONS kfg`Zj Xi\ j_fik \efl^_ kf Ôk èkf X ]\n j\Zk`fej# X jè^c\ N\Y gX^\ n`cc gifYXYcp nfib Y\jk kf fi^Xe`q\ k_\d% N_\e \XZ_ j\Zk`fe Y\^èj kf ile cfe^# dlck`gc\ N\Y gX^\j dXp Y\ i\hlì\[ kf Yi\Xb lg k_\ Zfem\ijXk`fe èkf d\Xeè^]lc# le[\ijkXe[XYc\ kfg`Zj% See page 40. If my form spans several Web pages, do I tell people what page they’re on?

N_\e k_\ hl\jk`fej k_Xk e\\[ kf Y\ Xejn\i\[ Y\]fi\ X N\Y ]fid `j Zfdgc\k\ Xi\ jgi\X[ XZifjj dlck`gc\ N\Y gX^\j# pfl dXp nXek kf èZcl[\ Xe fm\im`\n f] k_\ eldY\i f] N\Y gX^\j èmfcm\[ jZfg\ # Xe è[`ZXk`fe f] n_Xk gX^\ pfl Xi\ fe gfj`k`fe # Xe[ X nXp kf jXm\ Xe[ i\klie kf pfli gifî\jj jkXklj % K_fl^_ Zcfj\cp èk\îXk\[# k_\j\ k_i\\ gifî\jj è[`ZXkfij g\i]fid [`]]\i\ek ]leZk`fej% See page 70.

xix Frequently Asked Questions

FREQUENTLY ASKED QUESTIONS Should I top-, right-, or left-align the labels for input fields?

N_\e pfl Xi\ kipè^ kf i\[lZ\ Zfdgc\k`fe k`d\j fi `] pfl e\\[ Õ\o`Yc\ cXY\c c\e^k_j ]fi cfZXc`qXk`fe# Zfej`[\i kfg$Xc`ê\[ cXY\cj% N_\e pfl _Xm\ j`d`cXi ^fXcj Ylk m\ik`ZXc jZi\\e i\Xc \jkXk\ ZfejkiXèkj# Zfej`[\i i`^_k$Xc`ê\[ cXY\cj% N_\e pfli ]fid i\hlì\j g\fgc\ kf jZXe cXY\cj kf c\Xie n_XkËj i\hlì\[ fi kf Xejn\i X ]\n jg\Z`ÔZ hl\jk`fej flk f] dXep# Zfej`[\i c\]k$Xc`ê\[ cXY\cj% See page 87. How are smart defaults used in Web forms?

JdXik [\]Xlckj ZXe _\cg g\fgc\ Xejn\i hl\jk`fej Yp glkkè^ [\]Xlck j\c\Zk`fej è gcXZ\ k_Xk j\im\ k_\ èk\i\jkj f] dfjk g\fgc\% K_\i\ Xi\ dXep fggfikle`k`\j n`k_è N\Y ]fidj kf lk`c`q\ k_\ gfn\i f] jdXik [\]Xlckj kf i\[lZ\ k_\ eldY\i f] Z_f`Z\j g\fgc\ _Xm\ kf dXb\ Xe[ k_\i\Yp \og\[`k\ ]fid Zfdgc\k`fe% See page 239.

xx Frequently Asked Questions

FREQUENTLY ASKED QUESTIONS When should I include help text on my forms?

Pfl j_flc[ Zfej`[\i X[[è^ _\cg k\ok n_\e1 ]fidj Xjb ]fi le]Xd`c`Xi [XkX2 g\fgc\ hl\jk`fe n_p k_\p Xi\ Y\è^ Xjb\[ ]fi jg\Z`ÔZ [XkX2 g\fgc\ dXp Y\ ZfeZ\ie\[ XYflk k_\ j\Zli`kp fi gi`mXZp f] k_\ì [XkX2 k_\i\ Xi\ i\Zfdd\e[\[ nXpj f] gifm`[è^ [XkX2 Xe[ Z\ikXè [XkX Ô\c[j Xi\ fgk`feXc fi i\hlì\[ n_\e k_\ Ylcb f] k_\ ]fid `j efk% See page 164. How should I indicate required input fields?

@] dfjk f] k_\ èglkj fe X ]fid Xi\ i\hlì\[# è[`ZXk\ k_\ ]\n k_Xk Xi\ fgk`feXc% @] dfjk f] k_\ èglkj fe X ]fid Xi\ fgk`feXc# è[`ZXk\ k_\ ]\n k_Xk Xi\ i\hlì\[% N_\e è[`ZXkè^ n_Xk ]fid Ô\c[j Xi\ \`k_\i i\hlì\[ fi fgk`feXc# k\ok `j k_\ dfjk Zc\Xi% ?fn\m\i# k_\ ! jpdYfc `j i\cXk`m\cp n\cc le[\ijkff[ kf d\Xe i\hlì\[% See page 119.

xxi Frequently Asked Questions

FREQUENTLY ASKED QUESTIONS What’s the difference between a primary and secondary action?

8Zk`fej jlZ_ Xj JlYd`k# JXm\# fi :fekèl\ Xi\ èk\e[\[ kf \eXYc\ Zfdgc\k`fe# n_`Z_ `j k_\ gi`dXip ^fXc f] aljk XYflk Xepfe\ n_f _Xj jkXik\[ Ôccè^ è X ]fid% 8j X i\jlck# k_\p Xi\ f]k\e i\]\ii\[ kf Xj gi`dXip XZk`fej% J\Zfe[Xip XZk`fej# fe k_\ fk_\i _Xe[# k\e[ kf Y\ c\jj lk`c`q\[% See page 139.

xxii Frequently Asked Questions

FOREWORD @Ëd jfiip kf Yi\Xb k_`j kf pfl# Ylk pfli c`]\ `j XYflk kf Z_Xe^\% @ befn k_`j Y\ZXlj\ f] X jkl[p n\ Zfe[lZk\[ p\Xij X^f n_\e n\ _X[ k_\ fggfikle`kp kf fYj\im\ DXjk\i :XYè\kdXb\ij% N_Xk [f\j Yl`c[è^ b`kZ_\e ZXYè\kj _Xm\ kf [f n`k_ [\j`êè^ ]fidj è Xe fecè\ Xggc`ZXk`fe6 C\k d\ \ogcXè¿ K_\ gligfj\ f] fli jkl[p nXj kf cffb Xk k_\ [`]]\i\eZ\ Y\kn\\e k_fj\ n_f [f d\[`fZi\ nfib Xe[ k_fj\ n_fj\ nfib `j \oZ\cc\ek% N\ g`Zb\[ X mXi`\kp f] kiX[\j kf jkl[p# n_\i\ n\ Zflc[ Ôe[ g\fgc\ n_f n\i\ kil\ dXjk\ij% N\ nXek\[ kf j\\ k_\ [`]]\i\eZ\j Y\kn\\e k_\ dXjk\ijË nfib Xe[ k_fj\ f] g\fgc\ n_fj\ jb`ccj n\i\eËk Xj i\Ôe\[% K_`j Yifl^_k lj kf ZXYè\kdXb\ij% :XYè\kip `j X m\ip fc[ ZiX]k# Xe[ k_\ g\fgc\ n_f dXjk\i `k Xi\ XdXqè^ è k_\ì kXc\ekj Xe[ jb`ccj% K_\p

xxiii Foreword

FOREWORD ZXe Zi\Xk\ jfd\k_è^ k_Xk `j Yfk_ lj\]lc Xe[ Y\Xlk`]lc% K_\ Y\jk Xi\ XnXi\ k_\ì gif[lZkj Xi\ fecp X g`\Z\ f] k_\ fm\iXcc [ Zfi Xe[ befn _fn kf Yc\e[ k_\ì i\jlckj g\i]\Zkcp èkf k_\ jliifle[è^ \og\i`\eZ\% 8]k\i Xcc# n_\e n\Ëi\ è k_\ b`kZ_\e# `kËj XYflk k_\ Zffbè^ Xe[ k_\ ]Xd`cp èk\iXZk`feÇefk XYflk \k\ieXc X[dìXk`fe f] k_\ [fm\kX`c afèkj _fc[è^ k_\ lk\ej`cj è gcXZ\% Fe\ f] k_\ Y`^^\jk kXb\XnXpj ]ifd fli i\j\XiZ_ nXj k_\ ZXig\ek\ijË \oki\d\ Xkk\ek`fe kf [\kX`c% <m\e k_fl^_ \XZ_ g\ijfe n\ èk\im`\n\[ _X[ p\Xij f] \og\i`\eZ\# efk_è^ nXj kXb\e ]fi îXek\[% <m\ip _è^\ Xe[ afèk nXj Ôe\cp ZiX]k\[# Xcdfjk Xj `] `k n\i\ k_\ dfjk `dgfikXek \c\d\ek è k_\ì \ekì\ ZXi\\i% K_\ gi`[\ k_\p kffb è k_\ ÔeXc ZXYè\k nXj k_\ jld f] k_\ gi`[\ k_\p kffb è \XZ_ è[`m`[lXc \c\d\ek% :XYè\kdXb\ij Xi\eËk k_\ fecp ]fcbj n_f Y\_Xm\ k_`j nXp% Jf Xi\ k_\ dXjk\i ZiX]kjd\e f]

xxiv Foreword

FOREWORD fli fne Ô\c[# c`b\ Clb\ NifYc\njb`% @e k_`j Yffb# Clb\ Xggc`\j k_Xk jXd\ cfmè^ Xkk\ek`fe kf [\kX`c kf k_\ [\j`ê f] N\Y ]fidj% C`b\ k_\ ZXYè\kdXb\ij# _`j dXjk\infib `j Yfk_ lj\]lc Xe[ Y\Xlk`]lc% 9lk lec`b\ dXep ZiX]kjd\e# Clb\ `j n`ccè^ kf j_Xi\ _`j j\Zi\kj flkj`[\ k_\ ^l`c[_Xcc% Pfl Xi\ XYflk kf c\Xie k_\ j\Zi\k \c\d\ekj f] dXbè^ î\Xk ]fidj Xe[# feZ\ pfl jkXik Xggcpè^ k_`j befnc\[^\# pflËcc Xcjf i\Xc`q\ k_Xk k_\ g\i]\Zk`fe f] k_\ fecè\ \og\i`\eZ\ Zfd\j ]ifd k_\ jld f] k_\ g\i]\Zk ]fid \c\d\ekj Xe[ Õfnj k_Xk ^f èkf `k% K_`j `j n_Xk n`cc Z_Xe^\ pfli c`]\1 k_\ e\n Xggi\Z`Xk`fe f] _fn jlYkc\kp Xe[ elXeZ\ è ]fid [\j`ê ZXe _Xm\ [iXdXk`Z fm\iXcc \]]\Zkj fe k_\ kfkXc fecè\ \og\i`\eZ\ Xe[ pfli Yfkkfd cè\ % 8e[# feZ\ pfl c\Xie kf Zfekifc k_fj\ jlYkc\k`\j Xe[ elXeZ\j# pfl# kff# n`cc Y\ X dXjk\i f] pfli ZiX]k%

xxv Foreword

FOREWORD 8j @ jX`[# pfli c`]\ `j XYflk kf Z_Xe^\% @k jkXikj i`^_k 多 efn AXi\[ D% Jgffc =fle[è^ GièZ`gXc Lj\i @ek\i]XZ\ <e^è\\iè^

xxvi Foreword

CHAPTER 1

The Design of Forms Form Design Matters The Impact of Form Design Design Considerations

5 16 27

1 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

fidj jlZb% @] pfl [feËk Y\c`\m\ d\# kip kf Ôe[ g\fgc\ n_f c`b\ Ôccè^ k_\d è% Pfl dXp klie lg Xe XZZflekXek n_f ^\kj X ilj_ n_\e niXggè^ lg X Zc`\ekËj kXo i\klie fi g\i_Xgj X [\jb Zc\ib n_f cfm\j kf k`[p lg f]ÔZ\ gXpifcc% 9lk ]fi dfjk f] lj# ]fidj Xi\ aljk Xe XeefpXeZ\% N_Xk n\ nXek kf [f `j kf mfk\# Xggcp ]fi X afY# Ylp X Yffb fecè\# afè X îflg# fi ^\k X i\YXk\ YXZb ]ifd X i\Z\ek gliZ_Xj\% =fidj aljk jkXe[ è fli nXp%

@k [f\jeËk _\cg k_Xk dfjk ]fidj Xi\ [\j`ê\[ ]ifd k_\ Èèj`[\ flkÉ èjk\X[ f] k_\ Èflkj`[\ è%É( LjlXccp èj`[\ f] Xe fi^Xe`qXk`fe fi X Zfdglk\i [XkXYXj\# X jg\Z`ÔZ j\k f] è]fidXk`fe _Xj Zfd\ kf [\Ôe\ X mXc`[ i\Zfi[ f] X g\ijfe# gcXZ\# gifZ\jj# fi k_è^% N_\e `k Zfd\j k`d\ kf lg[Xk\ fi Zi\Xk\ fe\ f] k_\j\ i\Zfi[j# k_\ fi^Xe`qXk`fe fi Zfdglk\i gifîXd j`dgcp jXpj È_\i\Ëj k_\ è]fidXk`fe @ e\\[#É Xe[ k_Xk i\hl\jk j_fnj lg è ]ifek f] g\fgc\ Xj X ]fid% (

Cfl :XiYfe\ èkif[lZ\[ d\ kf k_\ k\idj Èèj`[\ flkÉ Xe[ Èflkj`[\ èÉ kf [\jZi`Y\ _fn ZfdgXe`\j k_èb XYflk k_\ì j\im`Z\j è X kXcb Xk D@O'.1 http://www.lukew.com/ff/entry. asp?532

2 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

=fi \oXdgc\# X N\Y j`k\Ëj [XkXYXj\ dXp Y\ ZfejkilZk\[ è X nXp k_Xk [\Ôe\j X Èd\dY\iÉ Xj X le`hl\ ZfdYèXk`fe f] X Ôijk eXd\# cXjk eXd\# \dX`c X[[i\jj# Xe[ gXjjnfi[% Jf n_\e X g\ijfe ki`\j kf Y\Zfd\ X d\dY\i f] k_Xk j`k\# lg gfgj X ]fid Xjbè^ ]fi k_Xk Ôijk eXd\# cXjk eXd\# \dX`c X[[i\jj# Xe[ gXjjnfi[% K_`j `j èj`[\ flk% 8 j\k f] [XkXYXj\ Ô\c[j `jeËk _fn dfjk g\fgc\ k_èb f] Y\Zfdè^ X d\dY\i f] Xe fi^Xe`qXk`fe fi j\im`Z\% Cffbè^ Xk k_è^j Èflkj`[\ èÉ d\Xej jkXikè^ ]ifd k_\ g\ijg\Zk`m\ f] k_\ g\fgc\ flkj`[\ pfli fi^Xe`qXk`fe fi N\Y j`k\% ?fn nflc[ k_\p [\Ôe\ Y\è^ X d\dY\i f] pfli j\im`Z\6 :_XeZ\j Xi\# k_\pË[ [\jZi`Y\ `k [`]]\i\ekcp k_Xe pfli [XkXYXj\ nflc[% K_\pË[ kXcb XYflk n_XkËj fe k_\ fk_\i j`[\ f] k_\ ]fidÇ]fi \oXdgc\# XYflk k_\ k_è^j k_\pË[ ^\k fi Y\ \dgfn\i\[ kf [f% 8cc k_`j `ccljkiXk\j n_p fli gi`dXip ^fXc n_\e [\j`êè^ ]fidj e\\[j kf Y\ ^\kkè^ g\fgc\ k_ifl^_ k_\d hl`Zbcp Xe[ \Xj`cp% Fi Y\kk\i p\k# dXbè^ k_\d èm`j`Yc\ è X nXp k_Xk ^\kj 3 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

fi^Xe`qXk`fej k_\ è]fidXk`fe k_\p e\\[ Xe[ g\fgc\ k_\ k_è^j k_\p nXek% =fidj jlZb% N\ j_flc[ [\j`ê XZZfi[è^cp%

FIGURE 1.1 http://www.flickr.com/photos/rosenfeldmedia/2366423465 The registration form for Facebook, a very popular social networking service. Almost half of this form is devoted to a security check!

4 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Form Design Matters K_fl^_ befnè^ dfjk g\fgc\ [`jc`b\ Ôccè^ è ]fidj j_flc[ Y\ i\Xjfe \efl^_ kf ZXi\ XYflk ^ff[ ]fid [\j`ê# k_\i\ Xi\ gc\ekp f] fk_\i i\Xjfej n_p ]fid [\j`ê dXkk\ijÇ\jg\Z`Xccp fecè\% Fe k_\ N\Y# ]fidj Xi\ k_\ cèZ_gèj f] \Zfdd\iZ\# jfZ`Xc èk\iXZk`fej# Xe[ dfjk gif[lZk`m`kp$YXj\[ Xggc`ZXk`fej% Ecommerce

@e k_\ g_pj`ZXc nfic[# X kpg`ZXc j_fggè^ \og\i`\eZ\ èmfcm\j dfmè^ k_ifl^_ gif[lZk$ cX[\e X`jc\j f] Zfcfi]lc gXZbX^è^ Xe[ dXib\kè^ gifd`j\j% FeZ\ pfl j\c\Zk k_\ `k\dj pfl e\\[# `kËj f]] kf Z_\Zb flk n_\i\ X _fg\]lccp ]i`\e[cp Zc\ib î\\kj pfl# iè^j lg pfli gliZ_Xj\j# gifZ\jj\j pfli gXpd\ek# YX^j pfli `k\dj# i\jfcm\j Xep `jjl\j c`b\ d`jjè^ gi`Z\ kX^j fi [`jZi\gXeZ`\j f] Zfjk# Xe[ Y`[j pfl È^ff[ [XpÉ j\\ =`^li\ (%) %

5 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Photograph by Andrew Walsh http://www.flickr.com/photos/radiofree/150535853

6 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 1.2 When youâ&#x20AC;&#x2122;re shopping in a local store, checkout usually comes with a smile.

7 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

:fekiXjk k_`j \og\i`\eZ\ n`k_ j_fggè^ fecè\ j\\ =`^li\ (%* % N`k_è k_\ ZpY\i X`jc\j f] Xe fecè\ jkfi\# pfl ZXe j\XiZ_ Xe[ Yifnj\ Zfcfi]lc gXZbX^è^ Xe[ dXib\kè^ gifd`j\j# jkXZb lg n_Xk pflË[ c`b\ è X Èj_fggè^ ZXik#É Xe[ dXb\ pfli nXp kf Z_\Zbflk% 9lk _\i\ k_\ gXiXcc\cj \e[% @ejk\X[ f] X jd`cè^ Xe[ _\cg]lc Zc\ib# pfl ^\k X ]fid% K_\ ]fid Zflc[eËk Zfd\ Xk X nfij\ k`d\% Pfl nXek kf Ylp k_\ `k\dj pflËm\ ]fle[% K_\ jkfi\ nXekj kf Zcfj\ k_\ jXc\ jf `k ZXe dXb\ dfe\p% JkXe[è^ Y\kn\\e Yfk_ pfli ^fXcj `j X ]fid Xe[ Xj n\ befnÇef fe\ c`b\j ]fidj% Social Interactions

Fli [X`cp èk\iXZk`fej n`k_ g\fgc\# j\im`Z\j# Xe[ gif[lZkj Xi\ \e_XeZ\[ k_ifl^_ m`jlXc# kXZk`c\# Xe[ Xl[`kfip Zl\j% N_\e _Xmè^ X Zfem\ijXk`fe n`k_ jfd\fe\# n\ ZXe j\\ k_\ì i\XZk`fej Xe[ _\Xi k_\ì mf`Z\% N_\e n\ Z_ffj\ kf \e^X^\ n`k_ X îflg f] g\fgc\# k_\ jXd\ kpg\j f] èk\iXZk`fej dXb\ lj ]\\c n\cZfd\ fi efk%

8 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 1.3 top image: http:// www.flickr.com/photos/ rosenfeldmedia/2366423729 bottom image: http:// www.flickr.com/photos/ rosenfeldmedia/2366423541

Browsing for products on the ecommerce site, eBay Express, is fun. Checking out, on the other hand, is a form. 9 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

<m\e g_pj`ZXc gif[lZk \og\i`\eZ\j _Xm\ k_\ jXd\ gfk\ek`Xc ]fi \e^X^\d\ek% :fej`[\i# ]fi \oXdgc\# k_\ `e`k`Xc \e^X^\d\ek n`k_ X e\n 8ggc\ cXgkfg Zfdglk\i j\\ =`^li\ (%+ % K_\ mXi`flj dXk\i`Xcj Xe[ k\okli\j pfl \eZflek\i Xj pfl leniXg k_\ gXZbX^`e^ jg\Xb kf k_\ hlXc`kp f] \og\i`\eZ\ pflĂ&#x2039;cc _Xm\ n`k_ k_\ XZklXc Zfdglk\i1 Xcc k_\ [\kX`cj _Xm\ Y\\e

FIGURE 1.4 http://www.flickr.com/photos/rosenfeldmedia/2366424337 Unpacking a new Apple MacBook Pro is a tactile, engaging experience that reflects the quality of the product inside.

10 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

n\cc k_fl^_k flk% G\i_Xgj k_\ dfjk g\ijfeXc dfd\ek Zfd\j n_\e k_\ Zfdglk\i f]]\ij kf kXb\ pfli g`Zkli\ kf i\gi\j\ek pfli XZZflek% ?fn\m\i# n_\e n\Ëi\ fecè\# \XZ_ f] k_\j\ \og\i`\eZ\j Zfd\j kf lj Xj X ]fid% NXek kf afè X ]le e\n jfZ`Xc e\knfib6 Aljk Ôcc è k_`j ]fid j\\ =`^li\ (%, % :Xi\ kf j_Xi\ k_`j î\Xk m`[\f n`k_ X Zcfj\ ]i`\e[6 Aljk Ôcc è X ]fid% NXek kf i\jgfe[ kf Xe èk\i\jkè^ Xlk_fiËj Ycf^ gfjk6 Pfl ^l\jj\[ `kÇX ]fid% Aljk XYflk \m\ipn_\i\ g\fgc\ nXek kf gXik`Z`gXk\ è jfZ`Xc èk\iXZk`fej fecè\# ]fidj ^\k è k_\ nXp% 8e[ jèZ\ gXik`Z`gXk`feÇeldY\i f] d\dY\ij# eldY\i f] XZk`m`k`\j Zfdgc\k\[# \kZ%Ç`j _fn dfjk jfZ`Xc Xggc`ZXk`fej k_i`m\# k_\ fi^Xe`qXk`fej ileeè^ k_\j\ j`k\j i\cp fe ]fidj ]fi Yljè\jj jlZZ\jj%

11 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 1.5 top image: http:// www.flickr.com/photos/ rosenfeldmedia/2367262662 botom image: http:// www.flickr.com/photos/ rosenfeldmedia/2366424417

Vox looks like a fun social network but if you want to join, youâ&#x20AC;&#x2122;ll need to fill out this new account form, which isnâ&#x20AC;&#x2122;t fun at all.

12 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Productivity

@e X[[`k`fe kf \Zfdd\iZ\ Xe[ jfZ`Xc èk\iXZk`fej# k_\ N\Y `j èZi\Xjè^cp X gcXZ\ n_\i\ g\fgc\ ^\k k_è^j [fe\% =ifd fecè\ YXebè^ kf N\Y$YXj\[ nfi[ gifZ\jjè^# N\Y Xggc`ZXk`fej [\j`ê\[ ]fi gif[lZk`m`kp Xi\ îfnè^ è eldY\i% =fi gif[lZk`m`kp$YXj\[ N\Y Xggc`ZXk`fej# k_\ fecè\ nfic[ [f\jeËk [`]]\i k_Xk dlZ_ ]ifd k_\ f]Õè\ nfic[% @] Ôccè^ è X jlim\p è k_\ g_pj`ZXc nfic[ i\hlì\j X ]fid# k_\ ZpY\ijgXZ\ m\ij`fe `j efk c`b\cp kf Y\ dlZ_ [`]]\i\ek j\\ =`^li\ (%- % P\k X^Xè# n\ Ôe[ ]fidj jkXe[è^ Y\kn\\e lj\i e\\[j Xe[ Yljè\jj ^fXcj% G\fgc\ nXek kf dXeX^\ k_\ì è]fidXk`fe fi Zi\Xk\ e\n Xik`]XZkj% K_\ Yljè\jj\j jlggcpè^ k_\j\ j\im`Z\j Xi\ èk\i\jk\[ è îfnè^ Xe[ fgk`d`qè^ k_\ Xdflek f] [XkX fi Zljkfd\i XZk`m`kp k_\p dXeX^\% K_\ YXii`\i ]fi Yfk_ j`[\j `j# f] Zflij\# X ]fid%

13 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 1.6 top image: http://www.flickr.com/photos/rosenfeldmedia/2367263846 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366428127

California voter registration offline and onlineâ&#x20AC;&#x201D;itâ&#x20AC;&#x2122;s all just a form.

14 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

8cc k_\j\ \oXdgc\j j_flc[ dXb\ `k gi\kkp Zc\Xi k_Xk N\Y ]fidj jkXe[ è k_\ nXp f] lj\i e\\[j n_Xk g\fgc\ nXek ]ifd X gif[lZk fi j\im`Z\ Xe[ Yljè\jj ^fXcj _fn k_\ fi^Xe`qXk`fej ileeè^ k_\j\ Xggc`ZXk`fej jkXp è Yljè\jj % Fe \Zfdd\iZ\ j`k\j# g\fgc\ nXek kf Ylp k_\ k_è^j k_\p e\\[ Xe[ Yljè\jj\j nXek kf dXo`d`q\ jXc\j% JkXe[è^ è k_\ nXp `j k_\ Z_\Zbflk ]fid% Fe jfZ`Xc Xggc`ZXk`fej# g\fgc\ nXek kf afè Zfddle`k`\j# Z_Xk n`k_ k_\ì ]i`\e[j# fi j_Xi\ Zfek\ek% =ifd X Yljè\jj g\ijg\Zk`m\# k_\j\ j`k\j nXek kf îfn Xe[ èZi\Xj\ \e^X^\d\ek Y\kn\\e g\fgc\% @e k_\ nXp Xi\ i\^`jkiXk`fe Xe[ ZfekXZk ]fidj% @e N\Y$YXj\[ gif[lZk`m`kp kffcj# g\fgc\ nXek kf ^\k k_è^j [fe\ Xe[ Zi\Xk\ fi ZfccXYfiXk\% 9ljè\jj\j nXek kf èZi\Xj\ k_\ Xdflek f] Zfek\ek Xe[ k`d\ jg\ek fe k_\ì j`k\% FeZ\ X^Xè# ]fidj Xi\ è Y\kn\\e%

15 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Jf ]fidj \eXYc\ Zfdd\iZ\# Zfddle`k`\j# Xe[ gif[lZk`m`kp fe k_\ N\Y kf k_i`m\% @kËj ef nfe[\i k_Xk ]fid [\j`ê dXkk\ij% The Impact of Form Design JèZ\ N\Y ]fidj Yifb\i ZilZ`Xc èk\iXZk`fej c`b\ Z_\Zbflk Xe[ i\^`jkiXk`fe# `k j_flc[eËk Zfd\ Xj X jligi`j\ k_Xk k_\p ZXe _Xm\ X Y`^ `dgXZk fe Yljè\jj ^fXcj% @eZi\Xj\[ Zfdgc\k`fe iXk\j f] ('Æ+' g\iZ\ek n\i\ efk leZfddfe è dXep f] k_\ ]fid i\[\j`ê gifa\Zkj @Ëm\ Y\\e gXik f]% 8e[ n_\e ]fid Zfdgc\k`fe d\Xej e\n jXc\j fi e\n Zljkfd\ij# `kËj \Xjp kf j\\ _fn `dgifm\d\ekj è ]fid [\j`ê ZXe Xdflek kf jlYjkXek`Xc èZi\Xj\j è i\m\el\ j\\ =`^li\ (%. %

16 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 1.7 http://www.flickr.com/photos/rosenfeldmedia/2366428239 Where would online video sharing site YouTube be without the form that enables its customers to upload over 70,000 videos per day?

Fe\ f] k_\ Y`^^\jk ]fid i\[\j`ê jlZZ\jj jkfi`\j @ befn f] nXj flkcè\[ è X )''+ :?@ :fdglk\i ?ldXe @ek\iXZk`fe Zfe]\i\eZ\ gXg\i k`kc\[ È8 gifZ\jj ]fi Zi\Xkè^ k_\ Yljè\jj ZXj\ ]fi lj\i \og\i`\eZ\ gifa\ZkjÉ) Yp k_\ )

K_`j gXg\i ZXe Y\ ]fle[ Xk1 http://portal.acm.org/citation.cfm?id=986078&dl=portal&dl=AC M

17 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

\9Xp lj\i \og\i`\eZ\ Xe[ [\j`ê k\Xd% K_\ì i\^`jkiXk`fe i\[\j`ê _X[ jlZ_ X gfj`k`m\ `dgXZk fe k_\ Yfkkfd cè\ f] k_\ ZfdgXep k_Xk `k Y\ZXd\ X df[\c ]fi _fn [\j`ê gifa\Zkj n\i\ \mXclXk\[ Xe[ ]le[\[% K_\ \efidflj jlZZ\jj f] k_\ \9Xp i\^`jkiXk`fe i\[\j`ê nXj îfle[\[ è X [\\g le[\ijkXe[è^ f] k_\ fggfikle`k`\j Xe[ `jjl\j gi\j\ek è k_\ i\^`jkiXk`fe gifZ\jj% K_\ k\Xd Zlcc\[ k_ifl^_ ljXY`c`kp [XkX# Zljkfd\i jlggfik i\Zfi[j# j`k\ cf^j# Xe[ N\Y Zfem\ek`fej kf è]fid k_\ì ]fid i\[\j`ê i\Zfdd\e[Xk`fej j\\ =`^li\ (%/ % <XZ_ f] k_\j\ le`hl\ jfliZ\j f] [XkX gifm`[\j mXclXYc\ nXpj kf d\Xjli\ k_\ `dgXZk f] X ]fid [\j`ê% C\kËj kXb\ X cffb Xk k_\d è[`m`[lXccp1 LjXY`c`kp K\jkè^1 FYj\imè^ _fn g\fgc\ èk\iXZk n`k_ ]fidj è X ljXY`c`kp cXY j\kkè^ ZXe gifm`[\ mXclXYc\ hlXc`kXk`m\ Xe[ hlXek`kXk`m\ è]fidXk`fe% EldY\i Xe[ cfZXk`fe f] \iifij fi `jjl\j J\m\i`kp f] \iifij fi gifYc\dj 18 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 1.8 http://www.flickr.com/photos/rosenfeldmedia/2367264212 In the eBay registration redesign, customer support, usability findings, and site tracking data were used to illustrate major issues. The entire flow was mapped out page by page with site click-through data that illustrated user drop-off and best practice analysis.

:fdgc\k`fe iXk\j K`d\ jg\ek kf Zfdgc\k\ k_\ ]fid fi j\Zk`fej f] k_\ ]fid JXk`j]XZk`fe jZfi\j JlYa\Zk`m\ Zfdd\ekj XYflk kXjbj

19 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

=`\c[ K\jkè^1 <k_efîXg_`Z fYj\imXk`fe f] g\fgc\ èk\iXZkè^ n`k_ ]fidj è k_\ì _fd\ fi f]ÔZ\% JfliZ\j lj\[ kf XZZ\jj è]fidXk`fe i\hlì\[ Yp ]fidj1 [fZld\ekj# jf]knXi\# g\fgc\# \kZ% <emìfed\ek è n_`Z_ ]fidj Xi\ Ôcc\[ è1 cfl[ f]ÔZ\# jdXcc dfe`kfi# \kZ% 8ep X[[`k`feXc Zfek\ok k_Xk è]fidj ]fid Zfdgc\k`fe fi \iifi iXk\j :ljkfd\i Jlggfik1 Befnè^ k_\ gifYc\dj i\gfik\[ Yp lj\ij n_\e Ôccè^ è ]fidj ZXe _\cg `jfcXk\ `jjl\j Xe[ nXpj kf i\jfcm\ k_\d% Kfg gifYc\dj i\gfik\[ :fddfe nXpj kf i\jfcm\ i\gfik\[ gifYc\dj ;\dfîXg_`Z è]fidXk`fe XYflk g\fgc\ i\gfikè^ gifYc\dj Fg\iXkè^ jpjk\d Xe[ N\Y Yifnj\i j\kkè^j ]fi g\fgc\ i\gfikè^ gifYc\dj J`k\ KiXZbè^1 =fidj ZXe Y\ èjkild\ek\[ kf kiXZb Xep eldY\i f] lj\]lc hlXek`kXk`m\ d\ki`Zj% 20 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

:fdgc\k`fe iXk\j N_\i\ g\fgc\ [ifgg\[ f]] k_\ ]fid `] k_\p [`[ efk Zfdgc\k\ `k ?fn g\fgc\ XZZ\jj\[ k_\ ]fid N_`Z_ ]fid \c\d\ekj n\i\ lj\[ N_Xk [XkX nXj \ek\i\[ N\Y Yifnj\i Xe[ fg\iXkè^ jpjk\d è]fidXk`fe <p\ KiXZbè^1 I\Zfi[è^ _fn g\fgc\ dXb\ j\ej\ f] k_\ gi\j\ekXk`fe f] ]fidj ZXe `ccldèXk\ gfèkj f] Zfdgc\o`kp j\\ =`^li\ (%0 %

FIGURE 1.9 http://www.flickr.com/photos/rosenfeldmedia/2366440213 Eye-tracking data from Matteo Penzo’s study of form label layouts published in UXmatters, July 2006, showing how people’s eyes move through a simple form. 21 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

N_Xk g\fgc\ cffb\[ Xk fe X ]fid EldY\i f] \p\ ÔoXk`fej1 c\m\c f] \]]fik i\hlì\[ kf gXij\ X ]fid C\e^k_ f] \p\ ÔoXk`fej1 k`d\ jg\ek cffbè^ Xk \XZ_ \c\d\ek N\Y :fem\ek`fej1 Jlim\pè^ Zfddfe jfclk`fej kf ]fid [\j`ê gifYc\dj ZXe gifm`[\ mXclXYc\ èj`^_kj j\\ =`^li\ (%(' % Le`hl\ jfclk`fej kf [\j`ê gifYc\dj :fddfe gXkk\iej è lj\ XZifjj k_\ N\Y K_\j\ [XkX gfèkj efk fecp è]fid k_\ [\j`ê gifZ\jj# Ylk k_\p Xcjf _\cg d\Xjli\ jlZZ\jj% K_\i\]fi\# `kËj X ^ff[ `[\X kf lj\ jfd\ f] k_\j\ d\ki`Zj n`k_ pfli ]fid [\j`êj jf pfl ZXe Y\kk\i ^Xl^\ pfli jlZZ\jj% K_`j [f\jeËk i\hlì\ X cfk f] \og\ej`m\ k\jkè^ fi [\m\cfgd\ek% FYj\imè^ _fn X ]\n g\fgc\ Zfdgc\k\ pfli ]fidj fi dfe`kfiè^ N\Y j\im\i cf^j n`k_ f]]$ k_\$j_\c] N\Y XeXcpk`Zj gifîXdj ZXe gifm`[\ X cfk f] lj\]lc è]fidXk`fe%

22 Chapter 1 The Design of Forms

23 Chapter 1 The Design of Forms

FIGURE 1.10 http://www.flickr.com/photos/rosenfeldmedia/2366423377 A Web conventions survey of online checkout forms that illuminates some interesting patterns weâ&#x20AC;&#x2122;ll look at in a later chapter.

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Jared Spool

Founding Principal, User Interface Engineering Changing a Button Increased Annual Revenues for a Web Site by $300 Million @kĂ&#x2039;j _Xi[ kf `dX^è\ X ]fid k_Xk Zflc[ Y\ j`dgc\i1 knf ]`\c[j# knf Ylkkfej# Xe[ fe\ cèb% P\k# `k kliej flk k_`j ]fid nXj gi\m\ekè^ Zljkfd\ij ]ifd gliZ_Xjè^ gif[lZkj ]ifd X dXafi \Zfdd\iZ\ j`k\# kf k_\ kle\ f] *''#'''#''' X p\Xi% N_Xk nXj \m\e nfij\1 K_\ [\j`ê\ij f] k_\ j`k\ _X[ ef Zcl\ k_\i\ nXj \m\e X gifYc\d% K_\ ]fid nXj j`dgc\% K_\ ]`\c[j n\i\ <dX`c 8[[i\jj Xe[ GXjjnfi[% K_\ Ylkkfej n\i\ Cf^è Xe[ I\^`jk\i% K_\ cèb nXj =fi^fk GXjjnfi[% @k nXj k_\ cf^è ]fid ]fi k_\ j`k\% @kĂ&#x2039;j X ]fid k_Xk lj\ij \eZflek\i Xcc k_\ k`d\% ?fn Zflc[ k_\p _Xm\ gifYc\dj n`k_ `k6 K_\ gifYc\d nXjeĂ&#x2039;k Xj dlZ_ XYflk k_\ ]fidĂ&#x2039;j cXpflk Xj `k nXj XYflk n_\i\ k_\ ]fid c`m\[% Lj\ij nflc[ \eZflek\i `k X]k\i k_\p ]`cc\[ k_\ì j_fggè^ ZXik n`k_ gif[lZkj k_\p nXek\[ kf gliZ_Xj\ Xe[ k_\e gi\jj\[ k_\ :_\Zbflk Ylkkfe% @k ZXd\ Y\]fi\ k_\p Zflc[ XZklXccp \ek\i k_\ è]fidXk`fe kf gXp ]fi k_\ gif[lZk% K_\ k\Xd jXn k_\ ]fid Xj \eXYcè^ i\g\Xk Zljkfd\ij kf gliZ_Xj\ ]Xjk\i% =ìjk$k`d\ gliZ_Xj\ij nflc[eĂ&#x2039;k dè[ k_\ \okiX \]]fik f] i\^`jk\iè^ Y\ZXlj\# X]k\i Xcc# k_\p nflc[ Zfd\ YXZb ]fi dfi\# Xe[ k_\pĂ&#x2039;[ Xggi\Z`Xk\ k_\ \og\[`\eZp è jlYj\hl\ek gliZ_Xj\j% <m\ipYf[p nèj# i`^_k6 N\ Zfe[lZk\[ ljXY`c`kp k\jkj n`k_ g\fgc\ n_f e\\[\[ kf Ylp gif[lZkj ]ifd k_\ j`k\% N\ Xjb\[ k_\d kf Yiè^ k_\ì j_fggè^ c`jkj# Xe[ n\ ^Xm\ k_\d dfe\p kf dXb\ k_\ gliZ_Xj\j% 8cc k_\p e\\[\[ kf [f nXj Zfdgc\k\ k_\ gliZ_Xj\%

24 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Jared Spool (Continued) N\ n\i\ nife^ XYflk k_\ ]ìjk$k`d\ j_fgg\ij% K_\p [`[ dè[ i\^`jk\iè^% K_\p i\j\ek\[ _Xmè^ kf i\^`jk\i n_\e k_\p \eZflek\i\[ k_\ gX^\% 8j fe\ j_fgg\i kfc[ lj# È@Ëd efk _\i\ kf \ek\i èkf X i\cXk`fej_`g% @ aljk nXek kf Ylp jfd\k_è^%É Jfd\ ]ìjk$k`d\ j_fgg\ij Zflc[eËk i\d\dY\i `] `k nXj k_\ì ]ìjk k`d\# Xe[ Y\ZXd\ ]iljkiXk\[ Xj \XZ_ Zfddfe \dX`c Xe[ gXjjnfi[ ZfdYèXk`fe ]X`c\[% N\ n\i\ jligi`j\[ Xk _fn dlZ_ k_\p i\j`jk\[ i\^`jk\iè^% N`k_flk \m\e befnè^ n_Xk nXj èmfcm\[ è i\^`jkiXk`fe# Xcc k_\ lj\ij n_f Zc`Zb\[ fe k_\ Ylkkfe [`[ jf n`k_ X j\ej\ f] [\jgXì% DXep mfZXc`q\[ _fn k_\ i\kX`c\i fecp nXek\[ k_\ì è]fidXk`fe kf g\jk\i k_\d n`k_ dXib\kè^ d\jjX^\j k_\p [`[eËk nXek% Jfd\ `dX^è\[ fk_\i e\]Xi`flj gligfj\j# jlZ_ Xj k_\ fYm`flj Xkk\dgk kf èmX[\ k_\ì gi`mXZp% @e i\Xc`kp# k_\ j`k\ Xjb\[ efk_è^ [liè^ i\^`jkiXk`fe k_Xk `k [`[eËk e\\[ kf Zfdgc\k\ k_\ gliZ_Xj\1 eXd\# j_`ggè^ X[[i\jj# Y`ccè^ X[[i\jj# Xe[ gXpd\ek è]fidXk`fe% I\g\Xk Zljkfd\ij n\i\eËk Xep _Xgg`\i% <oZ\gk ]fi X ]\n n_f i\d\dY\i\[ k_\ì cf^è è]fidXk`fe# dfjk jkldYc\[ fe k_\ ]fid% K_\p Zflc[eËk i\d\dY\i k_\ \dX`c X[[i\jj fi gXjjnfi[ k_\p _X[ lj\[ gi\m`fljcp% I\d\dY\iè^ n_`Z_ \dX`c X[[i\jj k_\p i\^`jk\i\[ n`k_ nXj gifYc\dXk`ZÇdXep _X[ dlck`gc\ \dX`c X[[i\jj\j fi _X[ Z_Xe^\[ k_\d fm\i k_\ p\Xij% N_\e j_fgg\ij Zflc[eËk i\d\dY\i k_\ì \dX`c X[[i\jj\j Xe[ gXjjnfi[j# k_\pË[ Xkk\dgk kf ^l\jj n_Xk `k Zflc[ Y\ dlck`gc\ k`d\j% K_\j\ ^l\jj\j iXi\cp jlZZ\\[\[% Jfd\ nflc[ \m\eklXccp Xjb k_\ j`k\ kf j\e[ k_\ gXjjnfi[ kf k_\ì \dX`c X[[i\jj# n_`Z_ Zflc[ Y\ X gifYc\d `] k_\p [`[eËk i\d\dY\i n_`Z_ \dX`c X[[i\jj k_\p è`k`Xccp i\^`jk\i\[ n`k_% 25 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Jared Spool (Continued) CXk\i# n\ [`[ Xe XeXcpj`j f] k_\ i\kX`c\iĂ&#x2039;j [XkXYXj\# fecp kf [`jZfm\i +, g\iZ\ek f] Xcc Zljkfd\ij _X[ dlck`gc\ i\^`jkiXk`fej è k_\ jpjk\d# jfd\ Xj dXep Xj ('% N\ Xcjf XeXcpq\[ _fn dXep g\fgc\ i\hl\jk\[ gXjjnfi[j# kf ]è[ flk `k i\XZ_\[ XYflk (-'#''' g\i [Xp% 8ifle[ ., g\iZ\ek f] k_\j\ g\fgc\ e\m\i \m\e ki`\[ kf Zfdgc\k\ k_\ gliZ_Xj\ feZ\ i\hl\jk\[% K_\ ]fid# n_`Z_ nXj èk\e[\[ kf dXb\ j_fggè^ \Xj`\i# klie\[ flk kf _\cg fecp X jdXcc g\iZ\ekX^\ f] k_\ Zljkfd\ij n_f \eZflek\i\[ `k% <m\e dXep f] k_fj\ Zljkfd\ij n\i\eĂ&#x2039;k _\cg\[# jèZ\ `k kffb aljk Xj dlZ_ \]]fik kf lg[Xk\ Xep èZfii\Zk è]fidXk`fe# jlZ_ Xj Z_Xe^\[ X[[i\jj\j fi e\n Zi\[`k ZXi[j% @ejk\X[# k_\ ]fid aljk gi\m\ek\[ jXc\jĂ&#x2021;X cfk f] jXc\j% K_\ [\j`ê\ij ]ò\[ k_\ gifYc\d \Xj`cp% K_\p kffb XnXp k_\ I\^`jk\i Ylkkfe% @e `kj gcXZ\# k_\p glk X :fekèl\ Ylkkfe n`k_ X j`dgc\ d\jjX^\1 Ă&#x2C6;Pfl [f efk e\\[ kf Zi\Xk\ Xe XZZflek kf dXb\ gliZ_Xj\j fe fli j`k\% J`dgcp Zc`Zb :fekèl\ kf gifZ\\[ kf Z_\Zbflk% Kf dXb\ pfli ]lkli\ gliZ_Xj\j \m\e ]Xjk\i# pfl ZXe Zi\Xk\ Xe XZZflek [liè^ Z_\Zbflk%Ă&#x2030; K_\ i\jlckj1 K_\ eldY\i f] Zljkfd\ij gliZ_Xjè^ n\ek lg Yp +, g\iZ\ek% K_\ \okiX gliZ_Xj\j i\jlck\[ è Xe \okiX (%, d`cc`fe k_\ ]ìjk dfek_% =fi k_\ ]ìjk p\Xi# k_\ j`k\ jXn Xe X[[`k`feXc *''#'''#'''% Fe dp Xejn\iè^ dXZ_è\ `j k_\ d\jjX^\ @ i\Z\`m\[ ]ifd k_\ :<F f] k_\ ), Y`cc`fe i\kX`c\i# k_\ ]ìjk n\\b k_\p jXn k_\ e\n jXc\j eldY\ij ]ifd k_\ i\[\j`ê\[ ]fid% @kĂ&#x2039;j X j`dgc\ d\jjX^\1 Ă&#x2C6;Jgffc PflĂ&#x2039;i\ k_\ dXe Ă&#x2030; @k [`[eĂ&#x2039;k e\\[ kf Y\ X Zfdgc\o d\jjX^\% 8cc n\ [`[ nXj Z_Xe^\ X Ylkkfe%

26 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Design Considerations >`m\e k_\ `dgXZk k_Xk ]fid [\j`ê ZXe _Xm\ fe ZilZ`Xc d\ki`Zj jlZ_ Xj Zfdgc\k`fe Xe[ \iifi iXk\j# `kËj fecp eXkliXc kf Xjb1 ?fn ZXe n\ [\j`ê ^ff[ ]fidj6 Le]fikleXk\cp# k_\ i`^_k Xejn\i `j X Y`k lejXk`j]pè^1 @k [\g\e[j% @k [\g\e[j fe k_\ Yljè\jj ^fXcj# lj\i e\\[j# Xe[ Zfek\ok f] pfli ]fidj% @k dXp Xcjf [\g\e[ fe k_\ `jjl\j fi fggfikle`k`\j pfli ljXY`c`kp k\jkè^# c`m\ j`k\ d\ki`Zj# fi fk_\i [XkX jfliZ\j `ccldèXk\% @e fk_\i nfi[j# k_\i\ `jeËk aljk fe\ i`^_k Xejn\i% =fikleXk\cp# k_\i\ `j X nXp kf ^f ]ifd k_\ hlèk\jj\ek`Xc [\j`ê Xejn\i f] È`k [\g\e[jÉ kf XZk`feXYc\ jfclk`fej Xe[ `[\Xj% N\ ZXe [f k_`j Yp le[\ijkXe[è^ k_\ [\j`ê Zfej`[\iXk`fej f] k_\ gifYc\d n\ Xi\ kipè^ kf jfcm\% ;\j`ê Zfej`[\iXk`fej Xi\ X ZfdYèXk`fe f] gièZ`gc\j Xe[ gXkk\iej k_Xk gifm`[\ X ]iXd\nfib ]fi Ôe[è^ Xggifgi`Xk\ jfclk`fej%

27 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Design Principles

;\j`ê gièZ`gc\j Xi\ k_\ ^l`[è^ c`^_k ]fi Xep jfclk`fe% K_\p Xik`ZlcXk\ k_\ ]le[Xd\ekXc ^fXcj k_Xk Xep jfclk`fe j_flc[ \dYf[p% @e k_\ ZXj\ f] N\Y ]fid [\j`ê# k_\ gièZ`gc\j @ ZfekèlXccp jki`m\ ]fi Xi\ Dè`d`q\ k_\ GXè1 G\fgc\ nXek n_Xk c`\j fe k_\ fk_\i j`[\ f] X ]fid jf k_\ gifZ\jj f] Zfdgc\kè^ ]fidj j_flc[ Y\ Xj j`dgc\ Xe[ \Xjp Xj gfjj`Yc\% @ccldèXk\ X GXk_ kf :fdgc\k`fe1 JèZ\ k_\ gfèk f] aljk XYflk \m\ip ]fid `j kf ^\k `k Ôcc\[ è# dXb\ `k XYle[Xekcp Zc\Xi _fn g\fgc\ ZXe XZZfdgc`j_ k_Xk ^fXc% :fej`[\i k_\ :fek\ok1 =fidj iXi\cp \o`jk è X mXZlld% K_\p Xi\ Xcdfjk XcnXpj gXik f] X YifX[\i Zfek\ok Xl[`\eZ\# Xggc`ZXk`fe# Yljè\jj # n_`Z_ è]fidj _fn k_\pËcc Y\ lj\[% <ejli\ :fej`jk\ek :fddle`ZXk`fe1 =fidj Yifb\i Zfem\ijXk`fej Y\kn\\e Zljkfd\ij Xe[ ZfdgXe`\j% 8ck_fl^_ Xe fi^Xe`qXk`fe ZXe _Xm\ dXep îflgj kXbè^ 28 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

gXik è k_\j\ Zfem\ijXk`fej dXib\kè^# gi`mXZp# \e^è\\iè^# [\j`ê# Yljè\jj# \kZ% # X ]fid e\\[j kf jg\Xb n`k_ fe\ mf`Z\% Design Patterns

;\j`ê gXkk\iej# fe k_\ fk_\i _Xe[# Xi\ XZklXc jfclk`fej kf gifYc\dj è Zfek\ok % N_\e Xggc`\[ Xggifgi`Xk\cp# k_\p \e]fiZ\ [\j`ê gièZ`gc\j Xe[ èZi\Xj\ jlZZ\jj ]fi Yfk_ lj\i e\\[j Xe[ Yljè\jj ^fXcj% @Ëm\ fi^Xe`q\[ k_`j Yffb Xifle[ k_\ j\k f] Y\jk giXZk`Z\j @Ëm\ Zfd\ kf befn Xe[ lk`c`q\ fm\i () p\Xij f] N\Y ]fid [\j`ê% <m\ip Y\jk giXZk`Z\ è k_\ Yffb \e]fiZ\j le[\icpè^ gièZ`gc\j f] ^ff[ ]fid [\j`ê% Dfjk Xi\ gi\j\ek\[ Xj [\j`ê gXkk\iej k_Xk flkcè\ _fn k_\p ZXe Y\ Xggc`\[Ç]fi \oXdgc\# `] pfli ^fXcj Xi\ Èo#É k_\e X ^ff[ jfclk`fe dXp Y\ Èp%É Fi j`d`cXicp# `] pfli ZfejkiXèkj Xi\ ÈX#É k_\e X nfik_n_`c\ XggifXZ_ `j ÈY%É K_`j kpg\ f] jkilZkli\ Xccfnj pfl# k_\ i\X[\i# kf

29 Chapter 1 The Design of Forms

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

le[\ijkXe[ n_`Z_ gXkk\ie `j k_\ Y\jk giXZk`Z\ ]fi pfli gXik`ZlcXi Zfek\ok# jf k_Xk pfl ZXe ^f hl`Zbcp ]ifd È`k [\g\e[jÉ kf XZk`feXYc\ jfclk`fej% @kËj Xcjf nfik_ gfèkè^ flk k_Xk dXep f] k_\ Y\jk giXZk`Z\j è k_`j Yffb _Xm\ Y\\e è]fid\[ Yp c`m\$kf$j`k\# \p\$kiXZbè^# Xe[ ljXY`c`kp k\jkè^ XZifjj X n`[\ iXe^\ f] N\Y ZfdgXe`\j Xe[ lj\ij% @e ]XZk# n\ [`[ jfd\ \p\$kiXZbè^ Xe[ Zfdgc\k`fe jkl[`\j aljk ]fi k_`j Yffb% K_Xk [f\jeËk d\Xe n\ _Xm\ Xcc k_\ i`^_k Xejn\ij# Ylk k_\i\Ëj jfd\ i\Xc [XkX Y\_è[ k_\j\ k`gj Jf n`k_flk ]lik_\i X[f# c\kËj [`^ è%

30 Chapter 1 The Design of Forms

CHAPTER 2

Form Organization What to Include Have a Conversation Organizing Content Group Distinctions Best Practices

32 37 40 48 56

31 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

ck_fl^_ dXep m`jlXc Xe[ èk\iXZk`fe [\j`ê Zfej`[\iXk`fej gcXp Xe `dgfikXek ifc\ è _fn g\fgc\ Zfdgc\k\ ]fidj# `kËj f]k\e k_\ Zfek\ek n`k_è k_\ ]fid Xe[ _fn n\ fi^Xe`q\ `k k_Xk \`k_\i c\Xm\j g\fgc\ jZiXkZ_è^ k_\ì _\X[j fi Xccfnj k_\d kf n_`q k_ifl^_ leg\ikliY\[% What to Include G\fgc\ e\\[ kf gXij\ \m\ip hl\jk`fe pfl Xjb k_\d# ]fidlcXk\ k_\ì i\jgfej\ kf k_Xk hl\jk`fe# Xe[ k_\e \ek\i k_\ì i\jgfej\ èkf k_\ jgXZ\ pfl _Xm\ gifm`[\[% K_\ Y\jk nXp kf jg\\[ lg k_Xk gifZ\jj `j efk kf Xjb k_\ hl\jk`fe Xk Xcc% K_Xk d\Xej `] pfl nXek kf Y\ m`^`cXek XYflk fgk`d`qè^ pfli ]fidj# glk \m\ip hl\jk`fe pfl Xi\ Xjbè^ g\fgc\ kf k_\ k\jk% ;f pfl i\Xccp e\\[ kf Xjb k_`j hl\jk`fe6 @j `k è]fidXk`fe k_Xk pfl ZXe ^\k XlkfdXk`ZXccp6 @j k_\i\ X Y\kk\i k`d\ fi gcXZ\ kf ^\k Xe Xejn\i ]ifd g\fgc\6 K_fl^_ k_`j gifZ\jj Xgg\Xij k\[`flj# pfl dXp Y\ jligi`j\[ n_\e pfl [`jZfm\i n_Xk pfl ZXe c\Xm\ f]] pfli ]fidj% ;\Z`[è^ n_Xk jkXpj fe X ]fid dXp d\Xe Z_Xcc\e^è^ k_\ è]fidXk`fe Zfcc\Zk\[ n_\e 32 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k_\ ]fid nXj X gXg\i [fZld\ek% F]k\e# c\^XZp hl\jk`fej k_Xk Xi\ ef cfe^\i Xggc`ZXYc\ Xi\ j`dgcp gfik\[ fm\i n_\e X gXg\i ]fid `j [`^`k`q\[% 8î\\è^ Xj kf n_`Z_ hl\jk`fej j_flc[ i\dXè fe X ]fid dXp Xcjf Y\ X [`jZljj`fe Xdfe^ j\m\iXc [\gXikd\ekj è pfli ZfdgXep fi fi^Xe`qXk`fe% K_\ dXib\kè^ k\Xd dXp _Xm\ jg\Z`ÔZ hl\jk`fej kf le[\ijkXe[ Zljkfd\ij Y\kk\i% K_\ \e^è\\iè^ k\Xd dXp i\hlì\ jg\Z`ÔZ è]fidXk`fe kf `[\ek`]p le`hl\ è[`m`[lXcj% K_\ c\^Xc k\Xd d`^_k dXe[Xk\ Z\ikXè k\idj Xe[ Zfe[`k`fej k_Xk _Xm\ kf Y\ XZZ\gk\[ Yp e\n Zljkfd\ij% 8e[ k_\ c`jk ^f\j fe% K_fl^_ Xcc k_\j\ k\Xdj dXp _Xm\ hl\jk`fej k_\p nXek kf gfj\ kf pfli Zljkfd\ij# pfli ]fidj e\\[ kf jg\Xb n`k_ fe\ mf`Z\% Kf XZ_`\m\ k_Xk ^fXc# k\Xdj n`cc e\\[ kf Zfd\ kf^\k_\i Xe[ nfib flk n_`Z_ hl\jk`fej dXb\ `k èkf \XZ_ ]fid% KXb\ X cffb Xk :Xifcè\ AXii\kkËj ÈB\\g# Zlk# gfjkgfe\# Xe[ \ogcXèÉ ]iXd\nfib flkcè\[ è k_\ j`[\YXi ]fi X nXp kf [\Z`[\ n_Xk dXb\j k_\ Zlk% 33 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Caroline Jarrett

Usability consultant, Effortmark Ltd. Co-author: Forms That Work (Morgan Kaufmann, in press) Co-author: User Interface Design and Evaluation (Morgan Kaufmann, 2005)

People Before Pixels WHAT TO THINK ABOUT BEFORE YOU START @ cfm\ ]fidj# dfjkcp Y\ZXlj\ k_\p f]]\i jf dXep fggfikle`k`\j ]fi `dgifm\d\ek% 8e[ @ cfm\ [`jZljjè^ ]fidj n`k_ [\j`ê\ij% Jf @ \eZfliX^\ g\fgc\ kf ni`k\ kf d\ n`k_ hl\jk`fej XYflk k_\ì ]fidj% F]k\e# k_\j\ hl\jk`fej j_fn k_Xk [\j`ê\ij Xi\ k_èbè^ _Xi[# n_`Z_ `j î\Xk# Ylk g\i_Xgj k_\pËi\ d`jjè^ k_\ g\fgc\ Xjg\Zk n_`c\ ZfeZ\ekiXkè^ fe gò\cjÇk_\ ]è\ [\kX`cj# jlZ_ Xj n_\k_\i kf glk X Zfcfe fe k_\ \e[ f] k_\ cXY\c% Lj\ij i\Xccp [feËk ZXi\ XYflk Zfcfej% USERS REALLY DO CARE ABOUT WHAT THEY’RE ASKED AND WHY Lj\ij ZXi\ XYflk n_Xk k_\pËi\ Xjb\[# n_p k_\p Xi\ Xjb\[ `k# Xe[ Y\pfe[ \m\ipk_è^ \cj\# n_\k_\i k_fj\ hl\jk`fej Xi\ Xggifgi`Xk\ kf k_\ Zfek\ok# d\Xeè^ n_Xk\m\i k_\ lj\i `j kipè^ kf XZ_`\m\ Yp ]`ccè^ è k_\ ]fid% =fi \oXdgc\1 X jki\\k X[[i\jj% @] pfl _Xm\ kf glk pfli jki\\k X[[i\jj èkf X N\Y j`k\ Y\]fi\ Yifnjè^ `k# Z_XeZ\j Xi\ k_Xk pflËcc i\XZk YX[cp% DXep f] lj dXèkXè X Zfem\e`\ek ]Xcj\ j\k f] g\ijfeXc Xejn\ij# èZcl[è^ Xe X[[i\jj Xe[ \dX`c k_Xk n\ lj\ n_\e n\ Zfej`[\i k_Xk `kËj `dg\ikè\ek kf Y\ Xjb\[ g\ijfeXc hl\jk`fej i`^_k efn% 9lk `] pflËm\ [\Z`[\[ fe Ylpè^ jfd\k_è^ k_Xk e\\[j kf Y\ j_`gg\[# k_\e `k nflc[ Y\ [`jkèZkcp jkiXe^\ `] k_\ j`k\ [`[ efk Xjb pfl ]fi X jki\\k X[[i\jj% 8e[ pflËcc gifYXYcp kXb\ ZXi\ kf \ek\i X i\Xc X[[i\jj XZZliXk\cp%

34 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Caroline Jarrett (Continued) START BY THINKING ABOUT PEOPLE AND RELATIONSHIPS Jf Y\]fi\ pfl jkXik k_èbè^ XYflk n_\i\ kf gcXZ\ pfli hl\jk`fej fe k_\ gX^\# k_èb XYflk g\fgc\ Xe[ i\cXk`fej_`gj% N_p Xi\ lj\ij ]`ccè^ è pfli ]fid6 N_Xk `j k_\ì i\cXk`fej_`g kf pfli fi^Xe`qXk`fe6 ;f k_\p ]\\c ^ff[ fi YX[ XYflk `k6 @j k_`j ]fid aljk Xefk_\i jk\ggè^ jkfe\ fe k_\ ifX[ kf k_\ì Zfekèlè^ \ek_lj`Xjd ]fi pfli gif[lZk# j\im`Z\# fi n_Xk\m\i6 Fi `j `k X ]\Xi]lc YXii`\i k_XkËj b\\gè^ k_\d ]ifd jfd\k_è^ \cj\ k_\pË[ gi\]\i kf Y\ [fè^6 Fi Xi\ pfl aljk YXkkcè^ è[`]]\i\eZ\1 k_\p [feËk ZXi\ fe\ nXp fi Xefk_\i# Xe[ dXp aljk YX`c Y\ZXlj\ k_\p ZXeËk j\\ k_\ gfèk6 @] pfl [feËk befn \efl^_ XYflk pfli lj\ij kf Y\ jli\# k_\e Xjb k_\d% NXkZ_ k_\d ljè^ pfli N\Y j`k\ fi kXcb kf k_\d# jfd\_fn% @] pflËm\ Xci\X[p ^fk hl\jk`fej ]fi pfli ]fid# k_\e n_p Xi\ pfl Xjbè^ k_fj\ gXik`ZlcXi hl\jk`fej6 8e[ n_p Xi\ pfl Xjbè^ k_\d i`^_k efn# Xk k_`j gfèk è k_\ i\cXk`fej_`g6 @] pfl [feËk befn \efl^_ XYflk pfli fi^Xe`qXk`fe kf Y\ jli\# k_\e èm\jk`^Xk\% =è[ jfd\fe\ è k_\ fi^Xe`qXk`fe n_f [f\j befn% @] k_\i\ `jeËk Xepfe\# k_XkËj k\ccè^ pfl k_Xk dXpY\ pfli n_fc\ XggifXZ_ e\\[j i\k_èbè^% @j k_\ ]fid e\Z\jjXip Xk Xcc6 KEEP, CUT, POSTPONE, OR EXPLAIN: FOUR STRATEGIES FOR BETTER QUESTIONS DXpY\# Xj n`k_ dp Èj_`ggè^É \oXdgc\# pfl Xe[ pfli lj\ij Xi\ è _Xidfep1 pflËi\ Xjbè^ ]fi Xejn\ij k_Xk k_\p Xi\ \X^\i kf ^`m\ pfl% N\cc [fe\Çb\\g k_fj\ hl\jk`fej Xe[ dfm\ kf k_èbè^ XYflk k_\ [\kX`cj f] [\j`ê%

35 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Caroline Jarrett (Continued) 9lk g\i_Xgj pflËi\ Xjbè^ X hl\jk`fe k_Xk pfl [feËk i\Xccp e\\[ i`^_k efn% :lk1 ^\k i`[ f] k_\ hl\jk`fe Xe[ _\cg \m\ipfe\% K_Xk kiXejcXk\j kf c\jj nfib ]fi pfl è [\j`ê# c\jj nfib ]fi pfli lj\ij# Xe[ ef cfe^$k\id jkfiX^\% Fi dXpY\ `kËj k_\ Éi`^_k efnÉ gXik1 gfjkgfe\ Xjbè^ k_Xk hl\jk`fe lek`c cXk\i# lek`c k_\ gfèk n_\i\ `k dfm\j ]ifd lee\Z\jjXip fi èkilj`m\ kf _Xidfe`flj% Fi dXpY\ `kËj fe\ f] k_fj\ [`]]`Zlck hl\jk`fej k_Xk pfli lj\ij [feËk nXek kf Xejn\i1 g\ijfeXc [XkX# jlZ_ Xj X g_fe\ eldY\i# fi jfd\k_è^ k_Xk i\hlì\j i\j\XiZ_ fi \okiX k_fl^_k% 9lk pflËm\ èm\jk`^Xk\[ pfli ]fid# pfl befn k_Xk k_\i\ `j X i\Xc mXcl\ kf pfli fi^Xe`qXk`fe è Xjbè^ k_\j\ hl\jk`fej# Xe[ k_\i\ `j jfd\ `dgfikXek i\Xjfe n_p pfl _Xm\ kf Xjb k_\d X_\X[ f] k`d\% Pfli jkiXk\^p `j kf \ogcXè1 ni`k\ X m\ip j_fik Ylk Zc\Xi i\Xjfe n_p pflËi\ Xjbè^% DXb\ jli\ `k f]]\ij X Y\e\]`k kf k_\ lj\iÇ ]fi \oXdgc\# È8jbè^ pfl k_`j efn _\cgj lj kf gifZ\jj pfli fi[\i dfi\ hl`Zbcp%É 8e[ `] pfl ZXeËk k_èb f] Xep Y\e\]`k kf k_\ lj\i# k_\e pflË[ Y\kk\i ^f YXZb kf ]è[è^ flk n_\k_\i pfl i\Xccp e\\[ k_Xk hl\jk`fe Y\ZXlj\ pflËi\ ^fè^ kf ]è[ k_Xk pfl cfj\ lj\ij Xk k_Xk gfèk è k_\ ]fid% YOUR VIEW, MY VIEW: BALANCING USER AND BUSINESS NEEDS F] Zflij\# k_\i\Ëj efk_è^ e\n XYflk Y\è^ kfc[ kf k_èb XYflk pfli lj\ij Y\]fi\ jkXikè^ pfli [\j`ê% Dp d\jjX^\ `j XYflk YXcXeZè^ lj\i e\\[j Xe[ Yljè\jj e\\[jÇ_Xi[\i nfib k_Xe jki\jjè^ XYflk cXY\cj Xe[ Zfcfej# Ylk n`k_ X dlZ_ î\Xk\i `dgXZk fe pfli ]fid [\j`ê% C`b\ @ jX`[1 G\fgc\ Y\]fi\ gò\cj% 36 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Have a Conversation 9\ZXlj\ ]fidj ]XZ`c`kXk\ Zfem\ijXk`fe Y\kn\\e X g\ijfe Xe[ X ZfdgXep fi fi^Xe`qXk`fe# `k _\cgj kf k_èb XYflk fi^Xe`qè^ k_\ jkilZkli\ f] X ]fid Xj X Zfem\ijXk`fe% :fej`[\i k_\ ]fccfnè^ jZ\eXi`f% Pfl \eZflek\i X jkiXe^\i n_f Xjbj pfl1 ÈN_XkËj pfli eXd\6É ÈN_XkËj pfli X[[i\jj6É ÈN_XkËj pfli \dX`c X[[i\jj6É ÈN_XkËj pfli Yìk_ [Xk\6É 9\]fi\ kff cfe^ pfl# Ôe[ pflij\c] Xjbè^1 ÈN_f `j k_`j g\ijfe6É ÈN_p [f\j _\ fi j_\ e\\[ Xcc k_`j è]fidXk`fe6É ÈN_p Xd @ k\ccè^ _`d fi _\i Xcc k_`j6É Hl`k\ hl`Zbcp# pfl Y\Zfd\ le\Xjp Xe[ n`j_ k_\ jkiXe^\i nflc[ k\cc pfl jfd\k_è^ XYflk _`dj\c] fi _\ij\c] èjk\X[ f] YXiiX^è^ pfl n`k_ hl\jk`fej% K_Xk YXiiX^\ f] hl\jk`fej `jÇf] Zflij\Çfli ]i`\e[# k_\ ]fid% K_èbè^ XYflk _fn X ]fid ZXe Y\ fi^Xe`q\[ Xj X Zfem\ijXk`fe èjk\X[ f] Xe èk\iif^Xk`fe ZXe ^f X cfe^ nXp kfnXi[ dXbè^ e\n Zljkfd\ij ]\\c n\cZfd\% @ jk`cc _Xm\ X m`m`[ d\dfip f] X nfdXe n_f nXj èk\im`\n\[ 37 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

[liè^ X Ô\c[ jkl[p ]fi X dXafi N\Y i\kX`c\i i\dXibè^# ÈK_`j j`k\ nXekj kf befn jf dlZ_ XYflk d\# Ylk @ befn efk_è^ XYflk `k%É >`mè^ g\fgc\ k_\ ZfeÔ[\eZ\ kf Zfdgc\k\ ]fidj jkXikj n`k_ _fn n\ Xjb k_\d k_\ hl\jk`fej i\hlì\[ kf Zfdgc\k\ X ]fid jlZZ\jj]lccp% @eglk Ô\c[j Xi\ k_\ \c\d\ekj fe X ]fid i\jgfej`Yc\ ]fi ^Xk_\iè^ g\fgc\Ëj Xejn\ij kf fli hl\jk`fej% CXY\cj Xi\ k_\ ]fid \c\d\ekj i\jgfej`Yc\ ]fi Xjbè^ k_\ hl\jk`fej% N_\e\m\i k_\j\ knf \c\d\ekj ZXe XZk Xj X eXkliXc gXik f] X d\Xeè^]lc Zfem\ijXk`fe# g\fgc\ Xi\ c`b\cp kf i\jgfe[ n`k_ Xejn\ij \Xj`cp Xe[ i\X[`cp% :fej`[\i k_\ [`]]\i\eZ\ Y\kn\\e k_\ ]fccfnè^ hl\jk`fej ]ifd knf [`]]\i\ek m\ij`fej f] k_\ PX_ff i\^`jkiXk`fe ]fid# Xj j_fne è =`^li\ )%(% http://www.flickr.com/photos/ rosenfeldmedia/2366424557 http://www.flickr.com/photos/ rosenfeldmedia/2366424481 http://www.flickr.com/photos/ rosenfeldmedia/2367260500 http://www.flickr.com/photos/ rosenfeldmedia/2367260436

FIGURE 2.1 Two ways conversational language can clarify questions. “Day” and “Year” vs. “dd” and “yyyy”; “Preferred content” vs. “I prefer content from.” 38 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

N_`Z_ m\ij`fe j\\dj dfi\ XggifXZ_XYc\6 N_`Z_ fe\ Xi\ pfl dfi\ c`b\cp kf _Xm\ Xe Xejn\i ]fi6 Ki\Xkè^ èglkj Xj gXik f] k_\ hl\jk`fe Y\è^ Xjb\[ k_\ cXY\c dìifij k_\ nXp n\ Xejn\i hl\jk`fej è k_\ i\Xc nfic[% K_`j Y\Zfd\j \m\e dfi\ `dgfikXek Xj k_\ hl\jk`fej pfl Xjb Y\Zfd\ dfi\ Zfdgc\o fi le]Xd`c`Xi% :fej`[\i k_\ cXY\c È@jjlè^ 9Xeb%É N_Xk `j k_Xk Xjbè^6 Efn# `] n\ i\g_iXj\[ `k Xj ÈN_Xk YXeb `jjl\[ pfl k_`j [fZld\ek6É f[[j Xi\ k_Xk pflË[ _Xm\ X hl`Zb\i Xejn\i% F] Zflij\# Yfk_ f] k_\j\ cXY\cj n`cc Y\ dX[\ Zc\Xi\i Yp k_\ì jliifle[è^ Zfek\ok% =fi \oXdgc\# Xi\ pfl Ôccè^ X ]fid XYflk X d`jjè^ ÔeXeZ`Xc [fZld\ek fi X ]fid kf j\k lg X e\n fecè\ XZZflek6 K_\ k\idj pfl lj\ è pfli cXY\cj Xcjf gcXp X g`mfkXc ifc\ è [\k\idèè^ _fn hl`Zbcp g\fgc\ ZXe gifm`[\ Xe Xejn\i% Kf Zfekèl\ n`k_ fli YXebè^ \oXdgc\# [f g\fgc\ le[\ijkXe[ k_\ k\id\[ È`jjlè^É6 @j k_Xk mfZXYlcXip k_\pË[ lj\# fi `j `k X k\id lj\[ Yp k_\ YXeb6 G\i_Xgj 39 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

g\fgc\ k_èb èjk\X[1 ÈN_`Z_ YXeb ^Xm\ pfl k_`j [fZld\ek6É Ljè^ k_\ k\idj pfli Zljkfd\ij lj\ kf [\jZi`Y\ k_\ì XZk`fej _\cgj ]iXd\ hl\jk`fej è X dfi\ le[\ijkXe[XYc\ nXp% K_`j [f\jeËk d\Xe k_Xk Xcc f] k_\ cXY\cj fe X ]fid j_flc[ Y\ i\nfi[\[ Xj j\ek\eZ\j% K_\i\ Xi\ dXep èjkXeZ\j n_\e ZfeZ`j\# jè^c\$ nfi[ cXY\cj nfib dlZ_ Y\kk\i k_Xe cfe^\i# dfi\ [\jZi`gk`m\ cXY\cj% 9lk n_\e k_\i\Ëj gfk\ek`Xc XdY`^l`kp è pfli hl\jk`fej# Zc\Xi Zfem\ijXk`feXc cXe^lX^\ f]k\e _\cgj Zc\Xi k_è^j lg% Organizing Content @e fi[\i kf b\\g k_\ Zfem\ijXk`fe Õfnè^ jdffk_cp# `kËj X ^ff[ `[\X kf fi^Xe`q\ k_\ hl\jk`fej pflËi\ Xjbè^ g\fgc\ èkf d\Xeè^]lc îflgj% ;\g\e[è^ fe k_\ì j`q\ Xe[ Zfek\ok# k_\j\ îflgj Zflc[ k_\e Y\ gi\j\ek\[ XZifjj dlck`gc\ N\Y gX^\j fi Xj j\Zk`fej f] X jè^c\ N\Y gX^\% 8j Xe \oXdgc\# k_\ PX_ff i\^`jkiXk`fe ]fid è =`^li\ )%) îflgj hl\jk`fej XYflk pfl# 40 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k_\ XZZflek pfl Xi\ Zi\Xkè^# X nXp ]fi pfl kf i\XZZ\jj pfli XZZflek# Xe[ X ]\n kiljk Xe[ jX]\kp `k\dj k\idj f] j\im`Z\ Xe[ jgXd gifk\Zk`fe èkf ]fli [`jkèZk j\Zk`fej% K_\j\

FIGURE 2.2 http://www.flickr.com/photos/rosenfeldmedia/2367260580 The new Yahoo! registration form uses a conversational tone to engage new members.

41 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

j\Zk`fej Xi\ cXY\c\[ n`k_ _\X[\ij k_Xk jkXe[ flk ]ifd k_\ i\jk f] k_\ \c\d\ekj fe k_\ gX^\% K_\ Yfc[ gligc\ ]fek è n_`Z_ k_\p Xi\ [`jgcXp\[ ZXii`\j dfi\ m`jlXc Èn\`^_kÉ k_Xe k_\ fk_\i ]fid cXY\cj# Xccfnè^ pfl kf hl`Zbcp jZXe k_\ ]fid kf j\\ n_Xk kpg\ f] è]fidXk`fe pflËcc e\\[ kf gifm`[\% Cfe^\i fi dfi\ Zfdgc\o ]fidj dXp e\\[ kf [`jki`Ylk\ Zfek\ek îflgj XZifjj dlck`gc\ gX^\j# Xj j\\e è fecè\ i\Xc \jkXk\ j`k\ I\[ÔeËj ]fid ]fi Ylpè^ _flj\j fecè\% K_`j fm\icp Zfdgc\o gifZ\jjÇefk k_ifl^_ Xep ]Xlck f] I\[ÔeÇXcjf Y\e\Ôkj ]ifd Y\è^ fi^Xe`q\[ è X nXp k_Xk Xccfnj g\fgc\ kf \Xj`cp jZXe i\hlì\[ j\Zk`fej k_\p e\\[ kf Xejn\i% @e ZXj\ jfd\fe\ [`[eËk befn n_Xk _\ nXj ^\kkè^ èkf n_\e Ylpè^ X _fd\# I\[ÔeËj \`^_k$gX^\ ]fid dXb\j `k m`m`[cp Zc\Xi j\\ =`^li\ )%* @kËj nfik_ efkè^ k_Xk ]fidj k_`j cfe^ Y\e\Ôk ]ifd X[[`k`feXc ]\\[YXZb Xe[ èk\iXZk`fej# n_`Z_ n\Ëcc [`jZljj è cXk\i Z_Xgk\ij% N_\e [\Z`[è^ _fn kf fi^Xe`q\ ]fidj# [\j`ê\ij n`cc f]k\e nfe[\i `] k_\p Xi\ Y\kk\i 42 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 2.3 http://www.flickr.com/photos/rosenfeldmedia/2366424765 Redfin groups the myriad of steps required to purchase a home into a series of manageable content groups. Each section has a title and some also include a bit of descriptive text.

43 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

f]] îflgè^ Xcc k_\ì Zfek\ek Xi\Xj èkf X jè^c\ N\Y gX^\ fi [`m`[è^ k_\d èkf X j\i`\j f] gX^\j% 8e[ `] X ]fid `j [`m`[\[ èkf X j\i`\j f] gX^\j# _fn dXep gX^\j `j kff dXep6 K_\ Xejn\i# f] Zflij\# `j¿ `k [\g\e[j% 9lk n\ ZXe ^\k X Y\kk\i Xejn\i Yp le[\ijkXe[è^ k_\ Zfek\ok ]fi \XZ_ ]fid n\ [\j`ê% N_f `j Ôccè^ k_\ ]fid è Xe[ n_p6 8ejn\iè^ k_`j lg ]ifek Xccfnj lj kf k_èb XYflk fli ]fidj Xj X [\c`Y\iXk\ Zfem\ijXk`fe n`k_ X jg\Z`ÔZ g\ijfe èjk\X[ f] k_\ èglkj ]fi X [XkXYXj\% N_\e pfl XggifXZ_ ]fidj Xj X Zfem\ijXk`fe# eXkliXc Yi\Xbj n`cc \d\i^\ Y\kn\\e kfg`Zj% =ìjk# c\kËj kXcb XYflk n_f pfl Xi\% Efn c\kËj [`jZljj n_\i\ pfl c`m\% N_\e k_\j\ [`jkèZk kfg`Zj Xi\ j_fik \efl^_ kf Ôk èkf X ]\n j\Zk`fej# X jè^c\ N\Y gX^\ n`cc gifYXYcp nfib Y\jk kf fi^Xe`q\ k_\d% N_\e \XZ_ j\Zk`fe Y\^èj kf ile cfe^# dlck`gc\ N\Y gX^\j dXp Y\ i\hlì\[ kf Yi\Xb lg k_\ Zfem\ijXk`fe èkf d\Xeè^]lc# le[\ijkXe[XYc\ kfg`Zj%

44 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

@e Z\ikXè j`klXk`fej# j\m\iXc j\Zk`fej n`k_ cfkj f] hl\jk`fej dXp e\\[ kf Y\ Xjb\[ è j\hl\eZ\ Y\ZXlj\ k_\p [feËk dXb\ j\ej\ flk f] Zfek\ok% G\fgc\ e\\[ kf j\\ Xcc k_\ hl\jk`fej kf^\k_\i è fi[\i kf Xejn\i \XZ_% @e k_`j ZXj\# fe\ cfe^ N\Y gX^\ dXp m\ip n\cc Y\ k_\ Y\jk Xejn\i% @e fk_\i j`klXk`fej# jfd\ j\Zk`fej n`cc g\i]fid Y\jk X]k\i X ]fid `j Zfdgc\k\[% =fi èjkXeZ\# fgk`feXc dXib\kè^ hl\jk`fej jlZ_ Xj È?fn [`[ pfl Ôijk _\Xi XYflk lj6É fi ÈNflc[ pfl c`b\ X[[`k`feXc è]fidXk`fe XYflk fli j\im`Z\j6É dXp XZklXccp ^\k _`^_\i i\jgfej\ iXk\j n_\e Xjb\[ X]k\i jfd\fe\ _Xj Zfdg\k\[ X ]fid% @e fe\ i\[\j`ê @Ëm\ j\\e# Xjbè^ k_\j\ hl\jk`fej X]k\i X i\^`jkiXk`fe ]fid nXj Ôcc\[ flk èZi\Xj\[ Xejn\ij Yp Xcdfjk +' g\iZ\ek K_\ i\Xjfe Y\_è[ k_`j dXp Y\ k_Xk fgk`feXc hl\jk`fej ]\\c c\jj èmXj`m\ n_\e gi\j\ek\[ Xj ]fccfn$lg kfg`Zj èjk\X[ f] i\hlì\d\ekj ]fi ]fid Zfdgc\k`fe% 9\ZXlj\ pfli ]fidj Xi\eËk Xcfe\ fe k_\ N\Y# Xefk_\i nXp kf [\Z`[\ _fn kf jkilZkli\ pfli Zfem\ijXk`fej n`k_ Zljkfd\ij `j kf Zfe[lZk X 45 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

N\Y Zfem\ek`fej jlim\p kf j\\ `] Xep gXkk\iej \d\i^\% 8 N\Y Zfem\ek`fej jlim\p `j j`dgcp X ZfdgXi`jfe f] [\j`ê jfclk`fej XZifjj X eldY\i f] j`d`cXi N\Y j`k\j% @k ljlXccp _\cgj kf cffb Xk k_\ kfg g\i]fidè^ j`k\j è X jg\Z`ÔZ ZXk\^fip c`b\ \Zfdd\iZ\ kf \ejli\ k_Xk k_\ j`k\j Y\è^ ZfdgXi\[ j_Xi\ Zfddfe d\Xjli\j f] jlZZ\jj% 8 N\Y Zfem\ek`fej jlim\p dXp c\X[ pfl kf leZfm\i Zfddfe ]fid fi^Xe`qXk`fe jkilZkli\j k_Xk _Xm\ \d\i^\[ fe k_\ N\Y% =fi èjkXeZ\# dXggè^ flk n_Xk è]fidXk`fe `j Xjb\[ è \Zfdd\iZ\ j_fggè^ ZXik ]fidj j\\ =`^li\ )%+ i\m\Xcj jfd\ èk\i\jkè^ èj`^_kj% K_\ Ôijk gX^\ k\e[j kf Y\ J`ê @e2 k_\ j\Zfe[# g\ijfeXc è]fidXk`fe% 8]k\i k_Xk `kËj ljlXccp j_`ggè^ gi\]\i\eZ\j% 8e[ jf fe%

46 Chapter 2 Form Organization

47 Chapter 2 Form Organization

FIGURE 2.4 http://www.flickr.com/photos/rosenfeldmedia/2367260748 In this Web conventions survey, the questions asked by 15 ecommerce checkout forms are organized by the Web page on which they appear: page 1, page 2, and so on.

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

K_\j\ Zfem\ek`fej ZXe gifm`[\ X î\Xk jkXikè^ gfèk ]fi k_èbè^ XYflk _fn kf fi^Xe`q\ k_\ Zfem\ijXk`fe fe pfli j_fggè^ ZXik ]fid% JèZ\ g\fgc\ Xi\ c`b\cp kf Y\ ]Xd`c`Xi n`k_ k_\j\ gXkk\iej# Z_XeZ\j Xi\ k_\p Zflc[ nfib n\cc è pfli \Zfdd\iZ\ j`k\% ?fn\m\i# `kËj `dgfikXek kf nfib ]ifd k_\ gXkk\iej X N\Y Zfem\ek`fej jlim\p leZfm\ij Xe[ efk j`dgcp Zfgp n_Xk k_\ Zfdg\k`k`fe `j [fè^ fe k_\ì j`k\% LjlXccp X [ì\Zk i\gc`ZX f] jfd\fe\ \cj\Ëj ]fid fi^Xe`qXk`fe nfeËk Y\ k_\ i`^_k Ôk ]fi pfli jg\Z`ÔZ j`klXk`fe% Group Distinctions @e Yfk_ k_\ PX_ff Xe[ I\[Ôe \oXdgc\j n\ jXn \Xic`\i# \XZ_ Zfek\ek îflg nXj m`jlXccp [`]]\i\ek`Xk\[ ]ifd k_\ i\jk f] k_\ ]fid1 X Yfc[ gligc\ ]fek fe PX_ff Xe[ X Yfc[ ]fek Xe[ jlYkc\ YXZbîfle[ Zfcfi fe I\[Ôe% 8j k_\j\ \oXdgc\j `ccljkiXk\# Zfddle`ZXkè^ d\Xeè^]lc [`jkèZk`fej Y\kn\\e Zfek\ek îflgj [f\jeËk i\hlì\ X cfk f] m`jlXc [`]]\i\eZ\% @e ]XZk# kff

48 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

dlZ_ ZfekiXjk Y\kn\\e Zfek\ek îflgè^j f]k\e Zi\Xk\j \oZ\jj`m\ m`jlXc ef`j\ k_Xk ^\kj è k_\ nXp f] g\fgc\Ëj XY`c`kp kf jZXe X ]fid% :fej`[\i k_\ [`]]\i\eZ\j Y\kn\\e k_\ ]fccfnè^ knf ]fidj è =`^li\j )%, Xe[ )%-% Fe\ i\c`\j fe p\ccfn Yfi[\ij# X p\ccfn YXZbîfle[ Zfcfi# i\[ j\Zk`fe _\X[\ij# Xe[ d\i^\[ kXYc\ Z\ccj kf îflg i\cXk\[ Zfek\ek% K_\ fk_\i j`dgcp i\c`\j fe X jlYkc\ YXZbîfle[ Zfcfi Z_Xe^\ kf j\gXiXk\ d\Xeè^]lc j\Zk`fej f] k_\ ]fid% Ljè^ X dè`dld Xdflek f] m`jlXc è]fidXk`fe _\cgj b\\g k_\ ]fZlj fe X ]fidËj Zfek\ek Xe[ efk `kj gi\j\ekXk`fe%

49 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 2.5 http://www.flickr.com/photos/rosenfeldmedia/2367260810 Many distinct visual elements on this form get in the way of seeing the questions the form is asking.

FIGURE 2.6 http://www.flickr.com/photos/rosenfeldmedia/2366425019 A subtle background color change or thin rule is often all you need to effectively group related content in a form. 50 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

9lk \m\e jlYkc\ [`jkèZk`fej Y\kn\\e Zfek\ek îflgj ZXe Y\ fm\ilj\[% Kf XZZflek ]fi n_Xk k_\p Zfej`[\i kf Y\ j_fikZfdè^j f] c\]k$ Xc`ê\[ ]fid cXY\cj# jfd\ [\j`ê\ij fgk kf lj\ Xck\ieXkè^ YXZbîfle[ Zfcfij kf îflg c\]k$ Xc`ê\[ cXY\cj n`k_ k_\ì i`^_k$Xc`ê\[ èglkj# Xj j\\e è =`^li\ )%.% ?fn\m\i# \p\$kiXZbè^ jkl[`\j [fe\ fe cXY\c gcXZ\d\ek( i\m\Xc k_Xk g\fgc\ ^\e\iXccp [feËk _Xm\ gifYc\dj Zfii\cXkè^ èglkj kf cXY\cj è X c\]k$Xc`ê\[ cXpflk Xj n\Ëcc j\\ è :_Xgk\i + % @k aljk kXb\j k_\d cfe^\i kf [f jf% 8j X i\jlck# k_`j XggifXZ_ [f\jeËk i\Xccp jfcm\ k_\ gifYc\d% @e ]XZk# `k ZXe XZklXccp Zi\Xk\ X [`]]\i\ek `jjl\%

( DXkk\f G\eqfËj CXY\c GcXZ\d\ek `e =fidj jkl[p ]ifd LOdXkk\ij Alcp )''-1 http://tinyurl. com/fefbx

51 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 2.7 http://www.flickr.com/photos/rosenfeldmedia/2366424971 Although it may be tempting to use alternating background colors to group left-aligned labels and their corresponding inputs, these elements can add a lot of visual noise to a form.

:fej`[\i k_\ \oXdgc\ è =`^li\ )%/ n_\i\ knf [`]]\i\ek YXZbîfle[ Zfcfij Xi\ lj\[ kf [`jkè^l`j_ cXY\cj Xe[ èglkj Xe[ X _fi`qfekXc ilc\ `j lj\[ kf j\gXiXk\ \XZ_ cXY\c Xe[ èglk Ô\c[ gXì% K_`j XggifXZ_ lck`dXk\cp X[[j Xe X[[`k`feXc (, m`jlXc \c\d\ekj kf k_\ cXpflk1 k_\ Z\ek\icè\# \XZ_ YXZbîfle[ Yfo# Xe[ \XZ_ _fi`qfekXc cè\% K_\j\ \c\d\ekj Y\^è kf [`jkiXZk fli \p\ Xe[ dXb\ `k dfi\ [`]ÔZlck kf ]fZlj fe k_\ dfjk `dgfikXek \c\d\ekj è k_\ 52 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

cXpflk1 k_\ cXY\cj Xe[ èglkj% 8j è]fidXk`fe [\j`ê \og\ik <[nXi[ Kl]k\ gfèkj flk1 È@e]fidXk`fe Zfej`jkj f] [`]]\i\eZ\j k_Xk dXb\ X [`]]\i\eZ\%É) @e fk_\i nfi[j# Xep m`jlXc \c\d\ek k_Xk `j efk _\cgè^ pfli cXpflk \e[j lg _likè^ `k% K_`j ZXe Y\ j\\e n_\e pfl kip kf jZXe k_\ c\]k Zfclde f] cXY\cj% Pfli \p\ i\g\Xk\[cp gXlj\j j\\ k_\ Yfkkfd f] =`^li\ )%/ kf Zfej`[\i \XZ_ _fi`qfekXc cè\ Xe[ k_\ ) <[nXi[ Kl]k\# <em`j`feè^ @e]fidXk`fe# (00' >iXg_`Zj Gi\jj

FIGURE 2.8 http://www.flickr.com/photos/rosenfeldmedia/2366425057 The addition of excessive visual elements can distract from a form’s primary content: and interrupt the scan line of a form.

53 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Yfo Zi\Xk\[ Yp \XZ_ ZfdYèXk`fe f] cè\ Xe[ YXZbîfle[ Zfcfi% F] Zflij\# k_`j [f\jeĂ&#x2039;k d\Xe k_Xk YXZbîfle[ Zfcfij Xe[ ilc\j j_flc[ e\m\i Y\ lj\[ n`k_è ]fid cXpflkj% K_\p Z\ikXècp _Xm\ k_\ì gcXZ\% 9lk n_\e k_èbè^ XYflk _fn kf [`jkè^l`j_ Y\kn\\e Zfek\ek îflgj# Zfej`[\i n_Xk k_\ dè`dld Xdflek f] m`jlXc è]fidXk`fe e\\[\[ `j j\\ =`^li\ )%0 % :_XeZ\j Xi\ dlZ_ dfi\ c`b\cp k_Xk `k n`cc Y\Zfd\ X [`jkiXZk`fe èjk\X[ f] Xe X`[%

54 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 2.9 http://www.flickr.com/photos/rosenfeldmedia/2367260984 The eBay Express checkout form uses a thin rule to separate meaningful content sections. Just the minimum amount is needed to make a clear distinction.

55 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices KXb\ k_\ k`d\ kf \mXclXk\ \m\ip hl\jk`fe pfl Xi\ X[[è^ kf pfli ]fidj% 9\ m`^`cXek XYflk i\dfmè^ \m\ipk_è^ k_Xk `jeËk e\Z\jjXip% Jki`m\ ]fi jlZZèZke\jj è Xcc k_\ hl\jk`fej cXY\cj pfl Xjb è pfli ]fidj% N_\e jlZZèZk cXY\cj dXp Y\ d`jèk\igi\k\[# cffb ]fi fggfikle`k`\j kf lj\ eXkliXc cXe^lX^\ kf ZcXi`]p k_\ hl\jk`fej pfli ]fidj Xjb g\fgc\ kf Xejn\i% <ejli\ k_Xk pfli ]fidj jg\Xb n`k_ fe\ mf`Z\# [\jg`k\ hl\jk`fej ]ifd j\m\iXc [`]]\i\ek g\fgc\ fi [\gXikd\ekj% Fi^Xe`q\ k_\ Zfek\ek fe pfli ]fidj èkf cf^`ZXc îflgj kf X`[ jZXeeè^ Xe[ Zfdgc\k`fe% N_\e gfjj`Yc\# jkilZkli\ pfli ]fidj Xj X Zfem\ijXk`fe% EXkliXc Yi\Xbj Y\kn\\e kfg`Zj n`cc \d\i^\ k_Xk ZXe _\cg pfl fi^Xe`q\ pfli ]fid%

56 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices (continued) @] X ]fid eXkliXccp Yi\Xbj [fne èkf X ]\n j_fik kfg`Zj# X jè^c\ N\Y gX^\ `j c`b\cp kf Y\ X ^ff[ nXp kf fi^Xe`q\ k_\ ]fid% N_\e X ]fid ZfekXèj X cXi^\ eldY\i f] hl\jk`fej k_Xk Xi\ fecp i\cXk\[ Yp X ]\n kfg`Zj# dlck`gc\ N\Y gX^\j Xi\ gifYXYcp X ^ff[ nXp kf fi^Xe`q\ k_\ ]fid% N_\e X ]fid ZfekXèj X cXi^\ eldY\i f] hl\jk`fej i\cXk\[ kf X jè^c\ kfg`Z# fe\ cfe^ N\Y gX^\ `j ^\e\iXccp X ^ff[ nXp kf fi^Xe`q\ k_\ ]fid% :fej`[\i Xjbè^ fgk`feXc hl\jk`fej fecp X]k\i X ]fid `j Zfdgc\k\[% :_XeZ\j Xi\ pflËcc ^\k dfi\ Xejn\ij k_Xe `] k_\j\ hl\jk`fej n\i\ gXik f] k_\ è`k`Xc ]fid% :fej`[\i ljè^ N\Y Zfem\ek`fe jlim\pj kf [`jZfm\i gXkk\iej è _fn ]fidj Xi\ fi^Xe`q\[ fe jg\Z`ÔZ bè[j f] j`k\j%

57 Chapter 2 Form Organization

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices (continued) Lj\ k_\ dè`dXc Xdflek f] m`jlXc è]fidXk`fe e\Z\jjXip kf [`jkè^l`j_ Zfek\ek îflgj% Lj\ è`k`Xc ZXg`kXc c\kk\ij kf dXb\ k_\ k`kc\j f] Zfek\ek îflgj \Xj`\i kf jZXe%

58 Chapter 2 Form Organization

CHAPTER 3

Path to Completion Name That Form Start Pages Clear Scan Lines Minimal Distractions Progress Indicators Tabbing Best Practices

60 62 64 68 70 81 85

59 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k_èb `kËj jX]\ kf jXp k_Xk g\fgc\ j_flc[ e\m\i Y\ gi\j\ek\[ n`k_ N\Y ]fidj k_\p [feËk e\\[ kf Ôcc flk% K_`j# f] Zflij\# d\Xej k_Xk k_\ gi`dXip ^fXc f] Xepfe\ \eZflek\iè^ X ]fid `j kf Zfdgc\k\ `k% K_\ _fg\ `j k_Xk k_\p nXek n_XkËj fe k_\ fk_\i j`[\1 kf dXb\ X gliZ_Xj\# kf jkXik ljè^ X j\im`Z\# kf dXeX^\ è]fidXk`fe# \kZ% 9\ZXlj\Ç@Ëcc i\`k\iXk\ ]ifd :_Xgk\i (Çef fe\ c`b\j Ôccè^ è ]fidj% Kiljk d\# @Ëm\ Xjb\[ k_fljXe[j f] g\fgc\ n_`c\ kXcbè^ XYflk ]fid [\j`ê% Fecp fe\ _Xj jX`[ j_\ \eafpj `k K_`j d\Xej k_Xk `ccldèXkè^ X gXk_ kf Zfdgc\k`fe Yp j_fnè^ g\fgc\ _fn k_\p ZXe Zfdgc\k\ X ]fid `j ZilZ`Xc% Name That Form GXik f] gifm`[è^ X Zc\Xi gXk_ kf Zfdgc\k`fe `j k\ccè^ g\fgc\ n_Xk ]fid k_\p Xi\ fe Xe[ n_Xk k_\p ZXe XZZfdgc`j_ Yp Ôccè^ `k flk% 8j g\fgc\ Xi\ lec`b\cp kf i\X[ X [\kX`c\[ [\jZi`gk`fe f] n_Xk \XZ_ ]fid k_\p \eZflek\i [f\j# k_`j Yli[\e dfjkcp ]Xccj fe k_\ ]fidËj k`kc\% 8j X i\jlck# `kËj ZilZ`Xc k_Xk ]fid k`kc\j dXkZ_ k_\ ZXccj kf XZk`fe k_Xk g\fgc\ lj\ kf XZZ\jj k_\d% 60 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

@e k_\ =Xìdfek ?fk\cj è =`^li\ *%(# fe\ f] k_\ ZXccj kf XZk`fe fe k_\ gX^\ `j X cèb k_Xk Xccfnj g\fgc\ kf È8Zk`mXk\ 8ZZflek%É K_\ ]fid k_\p cXe[ fe X]k\i ]fccfnè^ k_`j cèb# _fn\m\i# `j

FIGURE 3.1 top image: http://www.flickr.com/photos/rosenfeldmedia/2366425337 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366425317

Clicking on the Activate Account link from the Fairmont Hotels front page leads to a form titled “Manage Your Fairmont President’s Club Profile.” Are you in the right place?

61 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k`kc\[ ÈDXeX^\ Pfli =Xìdfek Gi\j`[\ekËj :clY GifÔc\%É 8i\ k_\p è k_\ i`^_k gcXZ\6 :Xe k_`j ]fid Y\ lj\[ kf XZk`mXk\ k_\ì XZZflek6 @] k_\p kXb\ k_\ k`d\ kf i\X[ k_\ èjkilZk`feXc k\ok# `k kliej flk k_Xk# è ]XZk# k_\p ZXe XZk`mXk\ k_\ì XZZflek# Ylk k_\j\ leZ\ikXèk`\j Zflc[ _Xm\ Y\\e Xmf`[\[ Xckf^\k_\i `] k_\ ]fid n\i\ j`dgcp k`kc\[ È8Zk`mXk\ Pfli 8ZZflek%É Start Pages N_`c\ k_\ i`^_k k`kc\ ]fi X ]fid ZXe \ejli\ k_Xk g\fgc\ jkXik è k_\ i`^_k gcXZ\# n\ f]k\e _Xm\ kf gifm`[\ jfd\ X[[`k`feXc è]fidXk`fe fe _fn kf jkXik% @e ZXj\j n_\i\ ]fidj i\hlì\ X j`ê`ÔZXek Xdflek f] è]fidXk`fe k_Xk g\fgc\ Xi\ lec`b\cp kf _Xm\ i\X[`cp XmX`cXYc\ fi X jlYjkXek`Xc Xdflek f] k`d\ kf Zfdgc\k\# jkXik gX^\j ZXe gifm`[\ mXclXYc\ Zfek\ok% N_\e pflËi\ Xggcpè^ ]fi X =`[\c`kp XZZflek fecè\# k_\ jkXik gX^\ è =`^li\ *%) c\kj pfl befn k_Xk XZZflek jkXk\d\ekj# X [i`m\iËj c`Z\ej\# YXeb XZZflek è]fidXk`fe# Xe[ dfi\

62 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Xi\ i\hl`i\[ kf jlZZ\jj]lccp Zfdgc\k\ k_\ ]fid% PflËi\ Xcjf kfc[ k_\ gifZ\jj j_flc[ kXb\ Xifle[ ('$(, d`elk\j%

FIGURE 3.2 http://www.flickr.com/photos/rosenfeldmedia/2366425401 A start page on Fidelity lets you know what it takes to complete this form.

K_\j\ kpg\j f] jkXik gX^\j [feËk Y\cfe^ Y\]fi\ \m\ip ]fidÇ\jg\Z`Xccp efk fe ]fidj k_Xk Xjb hl\jk`fej pfl Xi\ c`b\cp kf _Xm\ Xe Xejn\i kf i`^_k XnXp% Fecp n_\e ]fidj i\hl`i\

63 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

X j`ê`ÔZXek k`d\ èm\jkd\ek# c`b\ fecè\ jlim\pj# fi n_\e g\fgc\ d`^_k ^\k ]iljkiXk\[ n_\e ^\kkè^ _Xc]nXp k_ifl^_ X ]fid fecp kf [`jZfm\i jfd\ fYjZli\ g`\Z\ f] è]fidXk`fe `j gi\m\ekè^ k_\d ]ifd Ôe`j_è^# j_flc[ pfl Zfej`[\i ljè^ jkXik gX^\j kf _\cg `ccldèXk\ X Zc\Xi gXk_ kf Zfdgc\k`fe% Clear Scan Lines N_`c\ pfli Ôijk èZcèXk`fe n_\e k_èbè^ XYflk `ccldèXkè^ X gXk_ kf Zfdgc\k`fe è X N\Y ]fid dXp Y\ kf k\cc g\fgc\ n_\i\ k_\p Xi\ n`k_è X dlck`gc\ N\Y gX^\ ]fid# @Ë[ c`b\ kf ]fZlj Ôijk fe Xe \m\e dfi\ YXj`Z# Ylk f]k\e ]fi^fkk\e Zfej`[\iXk`fe1 gifm`[è^ X Zc\Xi jZXe cè\ ]ifd jkXik kf Ôe`j_% =`^li\ *%* j_fnj \p\$kiXZbè^ [XkX ]fi X j`dgc\ ]fid k_Xk _`^_c`^_kj k_\ `dgfikXeZ\ f] X Zc\Xi jZXe cè\% @e k_`j \oXdgc\# k_\ jkife^ m\ik`ZXc Xo`j f] cXY\cj# èglk Ô\c[j# Xe[ X gi`dXip XZk`fe Ylkkfe gifm`[\j X jè^c\ gXk_ k_ifl^_ k_\ ]fid% K_`j Xccfnj g\fgc\ kf i\jgfe[ hl`Zbcp

64 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

kf hl\jk`fej Xe[ Zfdgc\k\ k_\ì kXjb n`k_ X dè`dld eldY\i f] [`m\ij`fej% Kf `ccljkiXk\ k_`j gfèk ]lik_\i# Zfej`[\i k_\ [`]]\i\eZ\ Y\kn\\e k_\ knf GXpGXc Z_\Zbflk

FIGURE 3.3 http://www.flickr.com/photos/rosenfeldmedia/2367261378 A composite eye-tracking image (heat map) from Etre (www. etre.com) showing what people look at when filling in a simple Web form.

65 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

]fidj è =`^li\ *%+% Fe\ _Xj X Zc\Xi jZXe cè\ k_Xk jkXikj Xk k_\ Ă&#x201D;ijk è]fidXk`fe gfèk# \e[j

http://www.flickr.com/photos/ rosenfeldmedia/2367261472

http://www.flickr.com/photos/ rosenfeldmedia/2367261684

FIGURE 3.4 Although the top form design includes some meaningful distinctions between content, the bottom PayPal form provides a clear path to completion because people can simply follow a straight line down. 66 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Xk k_\ gi`dXip XZk`fe# Xe[ Xccfnj g\fgc\ kf kXb\ è Xcc k_\ è]fidXk`fe k_\p e\\[ kf i\m`\n hl`Zbcp% K_\ fk_\i _Xj X eldY\i f] [`]]\i\ek m`jlXc ki\Xkd\ekj k_Xk Yi\Xb lg k_\ gXk_ kf Zfdgc\k`fe èkf X j\i`\j f] q`^qX^^è^ \p\ dfm\d\ekj% 8 jè^c\ gXk_ dXb\j `k \Xj`\i kf gifZ\jj k_\ hl\jk`fej X ]fid `j Xjbè^ k_ifl^_ X Zfej`jk\ek cXpflk% K_`j# è klie# ZXe èZi\Xj\ Zfdgc\k`fe iXk\j Yp b\\gè^ g\fgc\ fe kXjb Xe[ \ejliè^ k_Xk k_\p j\\ Xe[ i\jgfe[ kf Xcc k_\ hl\jk`fej X ]fid Xjbj k_\d% 8 n\cc$[\j`ê\[ jZXe cè\ _Xj aljk k_\ i`^_k Xdflek f] m`jlXc jgXZè^ Y\kn\\e hl\jk`fej kf \eXYc\ Xe \m\e gXZ\ Y\kn\\e \XZ_ cXY\c&èglk gXì j\\ =`^li\ *%, % @e fk_\i nfi[j# `k Xccfnj g\fgc\ kf dfm\ Zfd]fikXYcp k_ifl^_ k_\ ]fid n`k_flk d`jjè^ Xep `dgfikXek è]fidXk`fe% K_\ i`^_k Xdflek f] jgXZè^ [\g\e[j X cfk fe

FIGURE 3.5 http://www.flickr.com/photos/rosenfeldmedia/2366425847 A well-paced flow between questions requires adequate spacing between questions. 67 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k_\ jkpc\ f] pfli ]fid# Ylk ^\e\iXccp XYflk ,' kf ., g\iZ\ek f] k_\ _\`^_k f] Xe èglk Ô\c[ Y\kn\\e \XZ_ hl\jk`fe nfibj Y\jk% Minimal Distractions Kf b\\g g\fgc\ ]fZlj\[ fe Zfdgc\kè^ X ]fid# pfl Xcjf j_flc[ Zfej`[\i n_`Z_ N\Y j`k\ \c\d\ekj _\cg `ccldèXk\ X Zc\Xi gXk_ kf Zfdgc\k`fe Xe[ n_`Z_ \c\d\ekj [`jkiXZk ]ifd `k% <m\e k_fl^_ k_\ Zfej`jk\ek eXm`^Xk`fe# _\X[\i# fi gifdfk`fej k_Xk dXb\ pfli N\Y j`k\ î\Xk Xi\ Xggifgi`Xk\ fe dfjk f] pfli j`k\Ëj gX^\j# k_\p dXp efk Y\ Xggifgi`Xk\ fe pfli ]fidj% K_\j\ X[[`k`feXc \c\d\ekj ZXe Y\ X [`jkiXZk`fe Xk Y\jk Xe[ X [\kfli Xk nfijk# gXik`ZlcXicp ]fi Zi`k`ZXc ]fidj c`b\ Z_\Zbflk è \Zfdd\iZ\ j`k\j fi i\^`jkiXk`fe è jfZ`Xc Xggc`ZXk`fej% I\dfmè^ èk\i]XZ\ \c\d\ekj efk [ì\Zkcp i\cXk\[ kf Zfdgc\kè^ X ]fid _\cgj b\\g g\fgc\ fe kXjb Xe[ i\dfm\j gXk_j kf XYXe[fed\ek% K_\ [`]]\i\eZ\ Y\kn\\e Z_\Zbflk Xe[ j_fggè^ fe 8dXqfe%Zfd j_fne è =`^li\ *%- `j jkXib% <m\e k_\ j`k\Ëj cf^f# n_`Z_ ljlXccp

68 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 3.6 top image: http://www.flickr.com/photos/rosenfeldmedia/2367262208 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366425901

While Amazon.com may merchandise its categories and specials through its Web site, once you are in checkout, there are no frills. 69 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Xccfnj g\fgc\ kf i\klie kf k_\ 8dXqfe _fd\ gX^\# `j [\XZk`mXk\[ kf dè`d`q\ nXpj f]] k_`j ZilZ`Xc ]fid% Progress Indicators N_\e k_\ hl\jk`fej k_Xk e\\[ kf Y\ Xejn\i\[ Y\]fi\ X N\Y ]fid `j Zfdgc\k\ Xi\ jgi\X[ XZifjj dlck`gc\ N\Y gX^\j# `k dXp Y\ lj\]lc kf Zfddle`ZXk\ k_\ jkXklj f] g\fgc\Ëj gifî\jj k_ifl^_ k_\ ]fid% Kf `ccljkiXk\ k_`j# c\kËj i\klie kf k_\ \oXdgc\ f] Ylpè^ X _flj\ fecè\% P\Xij f] i\Xckfij# c\e[\ij# Ylp\ij# j\cc\ij# Xe[ cXnp\ij _Xm\ X[[\[ eld\iflj ZcXlj\j# Zfej`[\iXk`fej# Xe[ [\Z`j`fej kf k_\ gifZ\\[è^j% 8j X i\jlck# Xep ]fid kipè^ kf \eXYc\ _fd\ gliZ_Xj\j fecè\ `j ^fè^ kf _Xm\ kf XZZflek ]fi X cXi^\ hlXek`kp f] i\hlì\[ Xejn\ij% K_\ fYm`flj Ôijk jk\g `j kf fi^Xe`q\ k_\ ]fid èkf d\Xeè^]lc Zfek\ek îflgj% K_\ e\ok jk\g `j kf `ccldèXk\ X gXk_ kf Zfdgc\k`fe k_ifl^_ k_\j\ îflgj%

70 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

@e X[[`k`fe kf Zc\Xicp cXY\c\[ j\Zk`fe _\X[\ij# k_\ I\[Ă&#x201D;e ]fid ]fi Ylpè^ X _flj\ è =`^li\ *%. èZcl[\j Xe fm\im`\n f] k_\ eldY\i f] N\Y gX^\j èmfcm\[ jZfg\ # Xe è[`ZXk`fe f] n_Xk gX^\ pfl Xi\ fe gfj`k`fe # Xe[ X nXp kf jXm\ Xe[ i\klie kf pfli gifî\jj jkXklj %

FIGURE 3.7 http://www.flickr.com/photos/rosenfeldmedia/2367262288 Redfin provides multiple progress indicators that indicate scope, position, and status information.

K_fl^_ Zcfj\cp èk\îXk\[# k_\j\ k_i\\ gifî\jj è[`ZXkfij g\i]fid [`]]\i\ek ]leZk`fej% K_\ c`jkè^ f] k_\ kfkXc eldY\i f] gX^\j ^`m\j g\fgc\ X j\ej\ f] k_\ jZfg\ f] k_`j ]fid1 ?fn cfe^ n`cc `k kXb\ kf Zfdgc\k\ Xe[ n_Xk Xi\ k_\ [`]]\i\ek j\Zk`fej&jk\gj6 K_\ è[`ZXkfi f]

71 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Zlii\ek gfj`k`fe c\kj g\fgc\ befn n_\i\ k_\p Xi\ i\cXk`m\ kf k_\ \ekì\ ]fid% K_\ ]fid jkXklj è[`ZXk\j n_\k_\i k_\ f]]\i nXj jlYd`kk\[ fi efk Xe[ n_\e `k nXj cXjk jXm\[% =fi cfe^ ]fidj# gifm`[è^ k_\ fgk`fe kf jXm\ fi [fè^ jf XlkfdXk`ZXccp `j X î\Xk nXp kf b\\g g\fgc\ fe X gXk_ kf Zfdgc\k`fe% N_`c\ `kËj Z\ikXècp X ^ff[ `[\X kf c\k g\fgc\ befn _fn ]Xi Xcfe^ è X gifZ\jj k_\p Xi\# pfl e\\[ kf Y\ nXip f] gifî\jj è[`ZXkfij k_Xk èZfii\Zkcp i\gi\j\ek k_\ eldY\i f] N\Y gX^\j fi jk\gj i\hlì\[ kf Zfdgc\k\ X ]fid% 8e Xcc kff Zfddfe giXZk`Z\ ]fi ]fidj jgXeeè^ dlck`gc\ N\Y gX^\j `j k_\ èZclj`fe f] X gifî\jj è[`ZXkfi k_Xk [f\j efk XZZliXk\cp dìifi k_\ eldY\i f] gX^\j X ]fid i\hlì\j% @e k_`j =`[\c`kp @em\jkd\ekj \oXdgc\ è =`^li\ *%/# k_\ eldY\i f] gX^\j f] èglkj i\hlì\[ kf Xggcp ]fi Xe XZZflek fecè\ `j flkcè\[ è X [\kX`c\[ gifî\jj è[`ZXkfi% ?fn\m\i# Xj jffe Xj jfd\fe\ j\c\Zkj ÈE\ok#É X gX^\ efk èZcl[\[ è k_\ gifZ\jj Cf^ @e Xgg\Xij%

72 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 3.8 top image: http://www.flickr.com/photos/rosenfeldmedia/2366426465 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366426505

Fidelity.com features a two-level progress bar letting you know where you are in the process of filling in a long form. However, it disappears on step one (login), which is not included in the list of steps required.

K_`j `ccljkiXk\j Xe Xcc kff Zfddfe gifYc\d n`k_ gifî\jj è[`ZXkfij% K_\p gifd`j\ X j\i`\j f] n\cc$[\Ă&#x201D;e\[# cè\Xi jk\gj Ylk iXi\cp [\c`m\i% :fej`[\i X kpg`ZXc \Zfdd\iZ\ Z_\Zbflk ]fid 73 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

c`b\ k_\ fe\ è =`^li\ *%0 fe ?Xc]%Zfd% K_\ gifî\jj è[`ZXkfi jkXk\j k_Xk k_\i\ Xi\ k_i\\ gX^\j f] èglkj pfl ZXe \og\Zk1 j_`ggè^# Y`ccè^# Xe[ gcXZ\ fi[\i% N_\e `k Zfd\j k`d\ kf j\c\Zk X j_`ggè^ X[[i\jj# _fn\m\i# gX^\ fe\ `j j\c\Zkè^ ]ifd Xe \o`jkè^ c`jk f] j_`ggè^ X[[i\jj\j% @] k_\ X[[i\jj pfl nXek kf j_`g kf `j efk c`jk\[# Xe X[[`k`feXc gX^\ `j i\hlì\[# Xe[ pfl e\\[ kf X[[ X e\n X[[i\jj% 8cc f] X jl[[\e# jk\g fe\ Y\Zfd\j knf jk\gj% N_\e j\c\Zkè^ Y`ccè^ è jk\g knf# pfl dXp e\\[ kf m\i`]p Xe fecè\ gXpd\ek j\im`Z\ gifm`[\i# cf^ è kf `kj j`k\# j\c\Zk X jfliZ\ f] ]le[è^# fi gifm`[\ X e\n Y`ccè^ X[[i\jj% Efn jk\g knf `j ]fli jk\gj%

FIGURE 3.9 http://www.flickr.com/photos/rosenfeldmedia/2366426533 The three steps promised by Half.com can easily become many more.

74 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Jf n\Ëm\ kXb\e jò jk\gj kf XZZfdgc`j_ n_Xk n\ kfc[ fli Zljkfd\ij nXj ^fè^ kf kXb\ knf jk\gj% @kËj efk k_Xk ^`mè^ g\fgc\ X j\ej\ f] _fn dXep jk\gj Xi\ i\hlì\[ `j X YX[ k_è^2 Ylk n\ Xi\ iXi\cp k\ccè^ k_\d k_\ kilk_% Fe\ jfclk`fe `j kf Xmf`[ k_\ gifî\jj è[`ZXkfi Xckf^\k_\i Xe[ aljk ^\k g\fgc\ k_ifl^_ k_\ ]fid Xj ]Xjk Xj gfjj`Yc\% K_\ fk_\i `j kf gifm`[\ X dfi\ _`^_$c\m\c gifî\jj è[`ZXkfi k_Xk [f\j efk j\k \og\ZkXk`fej \ogc`Z`kcp% K_\ 8dXqfe%Zfd Z_\Zbflk gifZ\jj è =`^li\ *%(' dXb\j ef \ogc`Z`k gifd`j\j XYflk k_\ eldY\i f] jk\gj% @ejk\X[# k_\ gifî\jj è[`ZXkfi flkcè\j k_\ kpg\j f] è]fidXk`fe pflËcc e\\[ kf gifm`[\% 8ck_fl^_ jfd\ g\fgc\ Zflc[ èk\igi\k k_\j\ ZXk\^fi`\j Xj j\gXiXk\ gX^\j# ef jg\Z`ÔZ \og\ZkXk`fej Xi\ j\k% G\fgc\ ^\k X ^\e\iXc j\ej\ f] k_\ bè[j f] è]fidXk`fe k_\pËcc e\\[ kf gifm`[\ Xe[ n_\i\ k_\p Xi\ è k_Xk gifZ\jj%

FIGURE 3.10 http://www.flickr.com/photos/rosenfeldmedia/2367261014 Amazon does not promise any number of pages, just a high-level set of tasks. 75 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Peter Wallack

Accessibility Program Director, Oracle

Designing Accessible Forms =fi dXep [`jXYc\[ lj\ij# k_\ mìklXc nfic[ f] k_\ Zfdglk\i \c`dèXk\j dfjk f] k_\ YXii`\ij f] k_\ g_pj`ZXc nfic[# Ylk `kËj lg kf pfl# k_\ N\Y gX^\ [\j`ê\i# kf \eXYc\ `k% 8e XZZ\jj`Yc\ ]fid kXb\j èkf XZZflek k_\ le`hl\ e\\[j f] lj\ij n_f _Xm\ c`d`k\[ fi ef m`j`fe# c`d`k\[ fi ef _\Xiè^# c`d`k\[ g_pj`ZXc dfm\d\ek# fi Zfê`k`m\ `dgXìd\ekj% JkXk`jk`ZXccp jg\Xbè^# k_\i\Ëj X ), g\iZ\ek Z_XeZ\ k_Xk Zflc[ Y\ Xep fe\ f] lj Xk jfd\ gfèk è fli c`m\j DXep [`jXYc\[ lj\ij n`cc fg\iXk\ N\Y gX^\j n`k_ X[[`k`feXc _Xi[nXi\ fi jf]knXi\ ZXcc\[ ÈXjj`jk`m\ k\Z_efcf^pÉ 8K # jlZ_ Xj X jZi\\e i\X[\i fi X 9iX`cc\ gièk\i% @kËj `dgfikXek k_Xk pfl [\j`ê n`k_ k_\ gifg\i Zfek\ek Xe[ jkilZkli\ è k_\ ]ìjk gcXZ\# Xe[ k_\e c\k k_\ 8K Zfddle`ZXk\ n`k_ k_\ lj\i% ?\i\ Xi\ jfd\ Xi\Xj n_\i\ pfli [\j`ê jfclk`fej k_Xk pfl dXb\ ]fi XZZ\jj`Y`c`kp gligfj\j n`cc Y\e\]`k fk_\i lj\ij Xj n\cc1 :cfj\[ ZXgk`feè^ f] dlck`d\[`X _\cgj n_\e pfl Xi\ nXkZ_è^ KM è X ef`jp \emìfed\ek jlZ_ Xj X i\jkXliXek# ^pd# fi Xìgfik% B\pYfXi[$fecp XZZ\jj `j î\Xk ]fi Ègfn\i lj\ij#É n_f Ôe[ i\XZ_è^ ]fi k_\ dflj\ jcfnj k_\d [fne% N_\e ileeè^ fm\i jcfn e\knfibj# jfd\ g\fgc\ [`jXYc\ k_\ i\e[\iè^ f] `dX^\j# i\cpè^ fe k_\ Xck\ieXk\ k\ok XjjfZ`Xk\[ n`k_ k_fj\ `dX^\j èjk\X[%

76 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Peter Wallack (Continued) Fe\ dfi\ i\Xjfe kf ZXi\Ç`] pfl gfjk pfli N\Y j`k\ è X glYc`Z gcXZ\# fi `] `k `j lj\[ Yp Xe \dgcfp\\ f] jfd\ ZfdgXep# fi `] `k `j jfc[ kf X ^fm\ied\ek# k_\i\ Xi\ gifYXYcp cXnj k_Xk [\dXe[ `k Y\ XZZ\jj`Yc\% 8k k_\ _\Xik f] XZZ\jj`Y`c`kp `j ljXY`c`kp% =fi \oXdgc\# X gX^\ k_Xk `jeËk ljXYc\ kf Y\^è n`k_ nfeËk jkXe[ X Z_XeZ\ f] Y\è^ XZZ\jj`Yc\% K_èb f] XZZ\jj`Y`c`kp Xj ]ìjk i\hlìè^ ÈlY\i$[\j`êÉ1 LY\i$dè`d`q\ k_\ gXè1 K_\ gifZ\jj f] Zfdgc\kè^ ]fidj j_flc[ Y\ i`[`Zlcfljcp \Xjp Xe[ j`dgc\# jf k_Xk jfd\fe\ n`k_ d\dfip `jjl\j fi Xkk\ek`fe jgXe gifYc\dj ZXe ^\k k_ifl^_ `k% LY\i$`ccldèXk\ X gXk_ kf Zfdgc\k`fe1 DXb\ `k XYle[Xekcp Zc\Xi _fn g\fgc\ ZXe XZZfdgc`j_ k_\ ^fXc# jf k_Xk X g\ijfe c`jk\eè^ kf k_\ jZi\\e ZXe È^\k `kÉ hl`Zbcp n`k_flk e\\[è^ kf _\Xi \m\ip cXjk Z_XiXZk\i fe `k% LY\i$Zfej`[\i k_\ Zfek\ok1 Jfd\ [`jXYc\[ lj\ij dXp Y\ ljè^ j`g$Xe[$gl]] [\m`Z\j kf kpg\ Z_XiXZk\ij# jf [feËk i\hlì\ k_\d kf kpg\ è efm\cj LY\i$\ejli\ Zfej`jk\ek Zfddle`ZXk`fe1 8 Zfej`jk\ek gi\j\ekXk`fe XZifjj Xcc k_\ gX^\j dXb\j c`]\ \Xj`\i ]fi k_fj\ ljè^ X b\pYfXi[ fecp# k_fj\ ljè^ X jZi\\e i\X[\i# k_fj\ n`k_ cfn m`j`fe# k_fj\ n`k_ Zfê`k`m\ [`jXY`c`k`\j¿\m\ipfe\ FeZ\ pfl X[_\i\ kf k_\j\ gièZ`gc\j# k_\ Y\jk ^l`[\cè\j ]fi XZZ\jj`Y`c`kp Zfd\ ]ifd k_\ N\Y :fek\ek 8ZZ\jj`Y`c`kp >l`[\cè\j

77 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Peter Wallack (Continued) N:8> gif[lZ\[ Yp k_\ N*: nnn%n*%fi^&KI&N:8>('& Xe[ k_\ L%J% J\Zk`fe ,'/ =\[\iXc GifZli\d\ek cXnj nnn% j\Zk`fe,'/%^fm % ?\i\ `j X Yi`\] jlddXip f] k_\ dfjk `dgfikXek XZZ\jj`Y`c`kp i\hlì\d\ekj kf Zfej`[\i è pfli ]fidj1 Jg\Z`]p k\ok ]fi \m\ipk_è^ k_Xk `j efk aljk Õl]]% K_`j èZcl[\j ! 8ck\ieXk`m\ k\ok ]fi `dX^\j c`b\ Kffck`gj % ! J lddXip kX^j ]fi kXYc\j X Yi`\] jlddXip f] k_\ Zfek\ekj f] X kXYc\ % ! CXY\cj k_Xk Xi\ È`dgc`\[É Yp k_\ì g_pj`ZXc i\cXk`fej_`g kf fk_\i fYa\Zkj% =fi \oXdgc\# X[[i\jj Ô\c[j Xi\ f]k\e lecXY\c\[ Y\ZXlj\ k_\ i\cXk`fej_`g f] X[[i\jj# Z`kp# jkXk\# Xe[ q`g Zf[\ `j `dgc`\[% Kf Y\ XZZ\jj`Yc\# \XZ_ e\\[j `kj fne cXY\c# Xck_fl^_ k_Xk cXY\c ZXe Y\ _`[[\e% ! K`kc\j ]fi ]iXd\j Xe[ gX^\j% DXb\ k_\d d\Xeè^]lc Xe[ le`hl\% DXb\ Xcc cèbj fe X gX^\ le`hl\# lec\jj k_\p i\Xccp [f k_\ jXd\ k_è^% 8e[ ^`m\ k_\d d\Xeè^]lc cXY\cj k_Xk dXb\ j\ej\ flk f] Zfek\ok# Xj fggfj\[ kf k_\ [i\X[\[ È:c`Zb _\i\%É ;f efk lj\ Zfcfi Xj k_\ fecp nXp kf Zfem\p è]fidXk`fe% =fi \oXdgc\# `] pfl Zfcfi X ifn è X kXYc\ i\[ kf è[`ZXk\ k_Xk jfd\k_è^ `j è \iifi# Xcjf gifm`[\ X Zfclde k_Xk j_fnj k_\ nfi[ È<iifi%É

<ejli\ ^ff[ Zfcfi ZfekiXjk# \jg\Z`Xccp Y\kn\\e k\ok Xe[ YXZb^ifle[j% 8e[ Y\ XnXi\ k_Xk Zfcfi$Yc`e[ lj\ij ZXeefk

78 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Peter Wallack (Continued) [`jkè^l`j_ Y\kn\\e Z\ikXè Zfcfij% K_\ Y\jk jfclk`fe `j kf Xccfn lj\ij kf j\c\Zk Zfcfij k_\dj\cm\j% 9p k_\ nXp# `kËj efk k_Xk k_è^j Xi\ Èèm`j`Yc\É kf Zfcfi$Ycè[ lj\ij2 k_\p aljk ZXeefk [`jkè^l`j_ k_\ [`]]\i\eZ\ Y\kn\\e Z\ikXè Zfcfij# c`b\ i\[$ î\\e Xe[ Ycl\$p\ccfn% DXb\ ]fek j`q\j cXi^\ \efl^_ kf i\X[% 8^Xè# k_\ Y\jk jfclk`fe `j kf Xccfn lj\ij kf j\c\Zk k_\ì fne ]fekj Xe[ j`q\j# n_`Z_ Xcjf d\Xej k_Xk pfli gX^\ _Xj kf Y\ [\j`ê\[ jf k_Xk `k jZXc\j n\cc n`k_ cXi^\ ]fekj# lg kf Xk c\Xjk (+$gfèk% ;f efk lj\ îXkl`kflj Xe`dXk`fe# Xj `k ZXe [`jkiXZk g\fgc\ n`k_ 8;;% 8mf`[ Xepk_è^ k_Xk ÕXj_\j dfi\ k_Xe k_i\\ k`d\j g\i j\Zfe[% @] X lj\i _Xj \g`c\gjp# k_`j ZXe ZXlj\ Xe XkkXZb% K_\i\ dljk Y\ X nXp kf XZZfdgc`j_ Xcc ]leZk`feXc`kp fe k_\ gX^\ n`k_ k_\ b\pYfXi[ fecp% Jf `] pfl _Xm\ [\j`ê\[ jfd\ ]XeZp [iX^$Xe[$[ifg èk\i]XZ\# pfl dljk Xcjf gifm`[\ X nXp kf g\i]fid k_\ jXd\ kXjb n`k_flk k_\ dflj\% ;feËk c\k k_`j gi\m\ek pfl ]ifd [fè^ k_\ ]XeZp jkl]]# k_fl^_# jèZ\ k_XkËj jf dlZ_ ]le% Lj\ Zc\Xi Xe[ gi\Z`j\ cXe^lX^\% 8cjf# Z_ffj\ pfli nfi[j ZXi\]lccpÇ[feËk i\]\i kf Èk_\ Ylkkfe fe k_\ i`^_kÉ fi k_\ ÈYlkkfe n`k_ k_\ î\\e Xiifn%É Fecp i\]\i kf fYa\Zkj Yp k_\ì eXd\ fi ]leZk`fe# efk k_\ì g_pj`ZXc Z_XiXZk\i`jk`Zj%

79 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Peter Wallack (Continued) @] k_\i\ Xi\ k`dè^ Xjg\Zkj f] k_\ gif[lZk# Xccfn k_\ lj\i kf klie k_\d f]]# X[aljk k_\d# fi \ok\e[ k_\d% =fi \oXdgc\# `] k_\ gif[lZk `dgfj\j X k`d\flk ]fi j\Zli`kp fi g\i]fidXeZ\ i\Xjfej# Xccfn k_\ \e[$lj\i kf \ok\e[ `k n`k_flk cfjè^ Xep nfib% :fej`jk\eZp dXkk\ij Lj\ `dX^\j Xe[ k\ok Zfej`jk\ekcp XZifjj Xcc gX^\j f] pfli j`k\% @] pfl Zfem\p è]fidXk`fe m`jlXccp fe k_\ gX^\ Yp d\Xej f] cXpflk# `k dljk Xcjf Y\ Zf[\[ k_Xk nXp% =fi \oXdgc\# `] pfl j_fn X _`\iXiZ_p f] [XkX Yp ljè^ è[\ekXk`fe# k_\ jXd\ è]fidXk`fe dljk Y\ XmX`cXYc\ è j\dXek`Z dXiblg jf k_Xk 8K ZXe èk\igi\k `k% @] k_Xk [f\jeËk dXb\ Xep j\ej\ kf pfl# aljk k\cc k_\ g\ijfe XZklXccp Zf[è^ k_\ gX^\ k_Xk `kËj _`j i\jgfej`Y`c`kp% Gifm`[\ X nXp ]fi X b\pYfXi[$fecp lj\i kf jb`g i\g\k`k`m\ Zfek\ek Xk k_\ kfg f] \XZ_ gX^\% Ef dXkk\i _fn \c\^Xek pflËm\ dX[\ pfli eXm`^Xk`fe jZ_\d\# `] pfl _Xm\ kf lj\ k_\ KXY b\p kf nX[\ k_ifl^_ `k fe \m\ip gX^\# pfli lj\ij n`cc i\Xccp _Xk\ pfl% Lck`dXk\cp# k_fl^_# k_\i\ `j fe\ i\Zfdd\e[Xk`fe k_Xk [nXi]j Xcc f] k_\j\1 K\jk pfli gX^\ n`k_ pfli èk\e[\[ lj\ij# èZcl[è^ k_fj\ n_f _Xm\ [`jXY`c`k`\j%

80 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Tabbing <m\ip k`d\ @ kXcb XYflk N\Y ]fid [\j`ê# @ XcnXpj Xjb k_\ Xl[`\eZ\ _fn dXep f] k_\d lj\ k_\ KXY b\p fe k_\ì b\pYfXi[ kf dfm\ Y\kn\\e k_\ èglk Ô\c[j f] X ]fid k_\p Xi\ Ôccè^ flk% <m\ip k`d\# dfi\ k_Xe _Xc] k_\ Xl[`\eZ\ iX`j\ k_\ì _Xe[j% 9Xj\[ fe k_`j è]fidXk`fe Xcfe\# `kËj X ^ff[ `[\X kf Zfej`[\i _fn g\fgc\ n`cc kXY Y\kn\\e èglkj kf Zfdgc\k\ pfli ]fid% :fej`[\i k_\ i\^`jkiXk`fe ]fid ]ifd F]ÔZ\ ;\gfk è =`^li\ *%((% N_\e jfd\fe\ `j dfmè^ Y\kn\\e èglk Ô\c[j ljè^ k_\ KXY b\p# _\ `j c`b\cp kf _Xm\ X gi\kkp aXiiè^ \og\i`\eZ\ Xj _\ dfm\j ]ifd k_\ Yfkkfd f] fe\ Zfclde kf k_\ kfg f] k_\ e\ok Zfclde% K_`j \og\i`\eZ\ nflc[ Y\ \m\e dfi\ [`jfi`\ekXkè^ è X jdXcc Yifnj\i nè[fn n_\e pfli cXjk èglk Ô\c[ efn j`kj f]]jZi\\e% @k Xcjf [f\jeËk _\cg k_Xk k_\ Ôijk èglk Ô\c[ Xk k_\ kfg f] k_\ j\Zfe[ Zfclde

81 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 3.11 http://www.flickr.com/photos/rosenfeldmedia/2366425259 Tabbing through inputs on the Office Depot registration form could result in a lot of page jumping when changing columns.

82 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

`j X jè^c\ Z_\ZbYfo jliifle[\[ Yp k\ok% K_`j iXk_\i jdXcc èglk ﾃ能c[ `j efk k_Xk efk`Z\XYc\ n_\e _`^_c`^_k\[# jf X g\ijfe d`^_k Y\ X Y`k Zfe]lj\[ XYflk _`j Zlii\ek gfj`k`fe n_\e _\ kXYj kf `k% <m\e n`k_è k_\ GXpd\ek @e]f j\Zk`fe# k_\ kXYYè^ fi[\i Zflc[ Y\ leZc\Xi Xj _\ aldgj Y\kn\\e dlck`gc\ ifnj Xe[ Zfcldej% 8]k\i _\ jg\Z`ﾃ能j GXpd\ek Kpg\# `j _\ ^fè^ kf :i\[`k :Xi[ EldY\i e\ok fi ^fè^ kf :i\[`k :Xi[ Kpg\6 9p _`^_c`^_kè^ k_`j \oXdgc\# @ﾃ掬 efk jXpè^ k_Xk Xcc knf$Zfclde ]fidj Xi\ gfficp [\j`ê\[% ?fn\m\i# @ Xd gfèkè^ flk k_Xk N\Y ]fid [\j`ê\ij j_flc[ Zfej`[\i n_Xk k_\ \og\i`\eZ\ n`cc Y\ c`b\ ]fi k_\ cXi^\ eldY\ij f] g\fgc\ n_f dfm\ Y\kn\\e èglk ﾃ能c[j ljè^ k_\ KXY b\p# Xe[ k_\p j_flc[ [\j`ê XZZfi[è^cp%

83 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

N_\e @ [\jZi`Y\[ k_\ \og\i`\eZ\ f] Ôccè^ flk k_\ F]ÔZ\ ;\gfk ]fid gi\m`fljcp# @ Xjjld\[ k_Xk k_\ [\m\cfg\ij _X[ jg\Z`Ô\[ Xe \ogc`Z`k fi[\i ]fi k_\ ]fid ljè^ k_\ ÈkXYè[\oÉ ?KDC Xkki`Ylk\% N_`c\ k_\ elXeZ\j f] ]fid [\m\cfgd\ek Xi\ Y\pfe[ k_\ jZfg\ f] k_`j Yffb# `k `j lj\]lc ]fi [\j`ê\ij kf befn k_Xk ]fidj k_Xk [feËk gifm`[\ Xe \ogc`Z`k fi[\i kf k_\ì èglkj ljè^ kXYè[\o n`cc j`dgcp Y\ kXYY\[ k_ifl^_ è k_\ fi[\i k_\p Xgg\Xi è k_\ ?KDC dXiblg% N_Xk k_Xk d\Xej `j kf Xmf`[ Xep \o`jk\ek`Xc aldgj Y\kn\\e èglk Ô\c[j# `kËj X ^ff[ `[\X kf kXcb kf X [\m\cfg\i XYflk jg\Z`]pè^ k_\ fi[\i è n_`Z_ èglkj j_flc[ Y\ XZZ\jj\[%

84 Chapter 3 Path to Completion

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices <ejli\ k_Xk k_\ k`kc\j f] pfli ]fidj dXkZ_ g\fgc\Ëj \og\ZkXk`fej Xe[ jlZZèZkcp \ogcXè n_Xk \XZ_ ]fid `j ]fi% =fi ]fidj i\hlìè^ jlYjkXek`Xc k`d\ fi è]fidXk`fe i\hlìè^ cffb$lg# lj\ X jkXik gX^\ kf j\k g\fgc\Ëj \og\ZkXk`fej% DXb\ jli\ k_Xk pfl `ccldèXk\ X Zc\Xi gXk_ kf Zfdgc\k`fe k_ifl^_ X ]fid Yp ljè^ Zc\Xi jZXe cè\j Xe[ \]]\Zk`m\ m`jlXc gXZè^ k_Xk Zfd]fikXYcp kXb\j g\fgc\ ]ifd jkXik kf Ôe`j_% =fi d`jj`fe$Zi`k`ZXc ]fidj c`b\ Z_\Zbflk fi i\^`jkiXk`fe# i\dfm\ [`jkiXZk`fej Xe[ Xep cèbj fi Zfek\ek k_Xk dXp c\X[ kf ]fid XYXe[fed\ek% =fi ]fidj n`k_ X befne j\hl\eZ\ f] dlck`gc\ N\Y gX^\j# èZcl[\ gifî\jj è[`ZXkfij k_Xk Zfddle`ZXk\ jZfg\# jkXklj# Xe[ gfj`k`fe% =fi ]fidj n`k_flk X Zc\Xi j\hl\eZ\ f] gX^\j# [f efk èZcl[\ gifî\jj è[`ZXkfij fi lj\ dfi\ ^\e\iXc gifî\jj è[`ZXkfij èjk\X[ f] k_fj\ k_Xk j\k èZfii\Zk \og\ZkXk`fej% :fej`[\i k_\ \og\i`\eZ\ f] ÈkXYYè^É k_ifl^_ X ]fid n_\e dXbè^ ]fid cXpflk [\Z`j`fej% Lj\ k_\ ÈkXYè[\oÉ ?KDC Xkki`Ylk\ kf Zfekifc kXYYè^ fi[\i k_ifl^_ X ]fid%

85 Chapter 3 Path to Completion

CHAPTER 4

Labels Label Alignment Top-Aligned Labels Right-Aligned Labels Left-Aligned Labels Labels Within Inputs Mixed Alignments Best Practices

87 89 94 96 99 102 104

86 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

m\ip N\Y ]fid _Xj Xk c\Xjk k_i\\ YXj`Z \c\d\ekj1 cXY\cj# èglk Ô\c[j# Xe[ XZk`fej% CXY\cj Xi\ i\jgfej`Yc\ ]fi Xjbè^ hl\jk`fej% @eglk Ô\c[j gifm`[\ X nXp ]fi g\fgc\ kf Xejn\i k_fj\ hl\jk`fej% 8Zk`fej Xccfn g\fgc\ kf jlYd`k k_\ Xejn\ij k_\p _Xm\ gifm`[\[% N_`c\ Xjklk\ i\X[\ij d`^_k Xi^l\ k_Xk X cXY\c$c\jj ]fid Zflc[ \o`jk# dfjk g\fgc\ nflc[ Y\ _Xi[$gi\jj\[ kf Ô^li\ flk _fn kf lj\ `k% 8j n\ jXn è :_Xgk\i )# cXY\cj e\\[ kf Xjb g\fgc\ hl\jk`fej jlZZèZkcp è X cXe^lX^\ k_\p le[\ijkXe[ jf k_Xk Xejn\iè^ `j \Xjp% 9lk _fn g\fgc\ Xejn\i k_\ hl\jk`fej cXY\cj gfj\ kf k_\d `j Xcjf [\g\e[\ek fe _fn k_\ \c\d\ekj f] X ]fid Xi\ cX`[ flk% Label Alignment Fe\ f] k_\ dfjk Zfddfe hl\jk`fej Xjb\[ XYflk ]fid [\j`ê `j ÈJ_flc[ @ kfg$# i`^_k$ # fi c\]k$Xc`ê k_\ cXY\cj ]fi èglk Ô\c[j6É J\\ =`^li\ +%(% Jf c\kËj Xejn\i `k lg ]ifek% <m\ipfe\ kf^\k_\i efn¿ È`k [\g\e[j%É C`b\

87 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 4.1 http://www.flickr.com/photos/rosenfeldmedia/2367264644 Left-, right-, or top-aligned labels?

Xep [\j`ê gifYc\d# k_\ i`^_k jfclk`fe [\g\e[j fe pfli jg\Z`ÔZ ^fXcj Xe[ ZfejkiXèkj% Pfl dXp nXek g\fgc\ kf Zfdgc\k\ X ]fid Xj hl`Zbcp Xj gfjj`Yc\ Xe[ dfjk f]k\e k_XkËj k_\ ZXj\% Jfd\k`d\j# k_fl^_# pfl d`^_k nXek kf jcfn g\fgc\ [fne jf k_\p [feËk dXb\ Z_f`Z\j k_Xk Xi\eËk n\cc k_fl^_k flk% Fi g\i_Xgj pfl _Xm\ jZi\\e i\Xc \jkXk\ ZfejkiXèkj k_Xk i\hlì\ 88 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

pfl kf dè`d`q\ k_\ Xdflek f] m\ik`ZXc fi _fi`qfekXc jgXZ\ pfli ]fid i\hlì\j% Fi pfl dXp e\\[ kf cfZXc`q\ pfli ]fid èkf dlck`gc\ cXe^lX^\j f] mXipè^ c\e^k_j% K_\ i`^_k Xejn\i Y\kn\\e kfg$# c\]k$# fi i`^_k$Xc`ê\[ cXY\cj [\g\e[j fe k_\j\ Zfej`[\iXk`fej Xe[ dfi\% Top-Aligned Labels F] k_\ k_i\\ cXY\c Xc`êd\ek fgk`fej# kfg$ Xc`ê\[ cXY\cj k\e[ kf i\[lZ\ ]fid Zfdgc\k`fe k`d\j k_\ dfjk j\\ =`^li\ +%) % 9\ZXlj\ cXY\cj Xe[ èglk ﾃ能c[j Xi\ è Zcfj\ gifo`d`kp# gifZ\jjè^ k_\d i\hlì\j c`kkc\ \]]fik% >\kkè^ k_ifl^_ k_\ \ekì\ ]fid `j Xcjf hl`Zb Xe[ \Xjp Y\ZXlj\ g\fgc\ ^\e\iXccp fecp e\\[ kf dfm\ è fe\ [ì\Zk`fe1 [fne% K_Xk dXb\j ]fi X m\ip Zc\Xi gXk_ kf Zfdgc\k`fe%

FIGURE 4.2 http://www.flickr.com/photos/rosenfeldmedia/2366428797 Some of the pros and cons of top-aligned labels.

89 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Kfg$Xc`ê\[ cXY\cj Xcjf _Xm\ gc\ekp f] _fi`qfekXc i\Xc \jkXk\ kf \ogXe[ fi ZfekiXZk cXY\c k\ok n`k_flk e\^Xk`m\cp `dgXZkè^ fm\iXcc gX^\ cXpflk% K_`j `j \jg\Z`Xccp lj\]lc ]fi ]fidj n`k_ cfe^ cXY\cj fi k_fj\ Y\è^ cfZXc`q\[ XZifjj dXep Zlckli\j% CXe^lX^\j c`b\ =i\eZ_# >\idXe# fi ;lkZ_ ZXe ile kn`Z\ Xj cfe^ Xj <e^c`j_ Xe[ Xj X i\jlck dXp hl`Zbcp k_ifn f]] X ]fid cXpflk% 8efk_\i X[mXekX^\ f] kfg$Xc`ê\[ cXY\cj `j k_Xk k_\p gifm`[\ X cfk f] _fi`qfekXc jgXZ\ ]fi îflgè^ i\cXk\[ èglk ﾃ能c[j è X mXi`\kp f] nXpj# Xj j_fne è =`^li\ +%*% 9fk_ c\]k$ Xe[ i`^_k$Xc`ê\[ èglk cXY\cj _Xm\ X cfk c\jj ﾃ表o`Y`c`kp ]fi k_\j\ bè[j f] cXpflkj# [l\ kf i\[lZ\[ _fi`qfekXc jgXZ\%

FIGURE 4.3 http://www.flickr.com/photos/rosenfeldmedia/2367264712 Top-aligned labels on Apple.com provide ample room to group related input fields horizontally.

90 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Kfg$Xc`ê\[ cXY\cj# _fn\m\i# [f kXb\ lg X[[`k`feXc m\ik`ZXc i\Xc \jkXk\% Jf `] pflËi\ nfibè^ n`k_ X jdXcc Xdflek f] m\ik`ZXc jZi\\e jgXZ\# pfl d`^_k nXek kf k_èb kn`Z\ Y\]fi\ ljè^ kfg$Xc`ê\[ cXY\cj% @kËj Xcjf `dgfikXek kf lj\ k_\ i`^_k Xdflek f] m\ik`ZXc jgXZè^ è pfli kfg$Xc`ê\[ cXpflkj% Kff c`kkc\ fi kff dlZ_ m\ik`ZXc jgXZ\ Y\kn\\e èglkj ZXe `dg\[\ g\fgc\Ëj dfm\d\ek k_ifl^_ X ]fid% @e ^\e\iXc# `kËj X ^ff[ `[\X kf lj\ ,' kf ., g\iZ\ek f] k_\ _\`^_k f] X jè^c\ èglk Ô\c[ Y\kn\\e X[aXZ\ek èglkj% Fe\ f] k_\ i\Xjfej kfg$Xc`ê\[ ]fidj Xi\ Zfdgc\k\[ hl`Zbcp dXp Y\ Y\ZXlj\ k_\p fecp i\hlì\ X jè^c\ \p\ ÔoXk`fe kf kXb\ è Yfk_ èglk cXY\c Xe[ èglk Ô\c[% @e ]XZk# Xe \p\$ kiXZbè^ jkl[p Yp DXkk\f G\eqf ]ifd Alcp )''-( ]fle[ k_Xk dfmè^ ]ifd cXY\c kf èglk i\hlì\[ aljk ,' d`cc`j\Zfe[j j\\ =`^li\ +%+ % K_XkËj (' k`d\j ]Xjk\i k_Xe c\]k$Xc`ê\[ cXY\cj# n_`Z_ i\hlì\[ X d\[`ld [liXk`fe f] ,''dj (

CXY\c GcXZ\d\ek `e =fidj glYc`j_\[ `e LOdXkk\ij Alcp# )''-1 http://tinyurl.com/fefbx

91 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 4.4 http://www.flickr.com/photos/rosenfeldmedia/2367264762 Eye-tracking data for top-aligned labels by Matteo Penzo.

Xe[ kn`Z\ Xj ]Xjk Xj i`^_k$Xc`ê\[ cXY\cj# n_`Z_ i\hlì\[ lg kf )+'dj% K_\ i\jlckj f] c`m\ j`k\ k\jkè^ XZifjj j\m\iXc [`]]\i\ek ^\fîXg_`\j _Xm\ Xcjf jlggfik\[ kfg$ Xc`ê\[ cXY\cj Xj k_\ hl`Zb\jk nXp kf ^\k g\fgc\ k_ifl^_ ]fidj% K_\j\ jkl[`\j Xcjf _X[ _`^_\i Zfdgc\k`fe iXk\j fm\i (' g\iZ\ek _`^_\i k_Xe k_\ c\]k$Xc`ê\[ m\ij`fej f] ]fidj k_\p n\i\ k\jk\[ X^Xèjk% 9\ZXlj\ f] k_\j\ hl`Zb Zfdgc\k`fe k`d\j Xe[ _`^_ Zfdgc\k`fe iXk\j# jfd\ [\j`ê\ij XcnXpj i\Zfdd\e[ ljè^ kfg$ Xc`ê\[ cXY\cj% 8]k\i Xcc# k_\ gi`dXip ^fXc f] Xep ]fid `j kf ^\k `k Zfdgc\k\[ n`k_ X dè`dld Xdflek f] gXè# Xe[ k_\ jg\\[ f] kfg$Xc`ê\[ cXY\cj Z\ikXècp _\cgj% 92 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

@k j_flc[ Y\ efk\[# _fn\m\i# k_Xk Yfk_ k_\ \p\ kiXZbè^ Xe[ c`m\$kf$j`k\ k\jkè^ i\]\i\eZ\[ _\i\ n\i\ [fe\ n`k_ ]fidj ZfekXèè^ ]Xd`c`Xi [XkX j\\ =`^li\ +%, % K_Xk d\Xej è]fidXk`fe k_Xk g\fgc\ ^\e\iXccp befn fi ZXe i\X[`cp Ôe[ jlZ_ Xj eXd\# X[[i\jj# Zi\[`k ZXi[ eldY\i# fi \dX`c X[[i\jj% N_\k_\i fi efk k_\j\ i\jlckj _fc[ lg ]fi le]Xd`c`Xi [XkXÇè]fidXk`fe g\fgc\ _Xm\ kf cffb XYflk fi c\Xie XYflkÇi\dXèj kf Y\ j\\e%

FIGURE 4.5 http://www.flickr.com/photos/rosenfeldmedia/2366428949 The eBay Express checkout form is an example of a top-aligned layout.

93 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Right-Aligned Labels I`^_k$Xc`ê\[ cXY\cj Xcjf _Xm\ k_\ X[mXekX^\ f] Zcfj\ gifo`d`kp Y\kn\\e èglk Ô\c[ Xe[ cXY\c Xe[# Xj X i\jlck# Xi\ hl`Zb kf Zfdgc\k\ j\\ =`^li\ +%- % K_\ i\jlckè^ c\]k iX^ f] k_\ cXY\cj è X i`^_k$Xc`ê\[ cXpflk# _fn\m\i# i\[lZ\j k_\ \]]\Zk`m\e\jj f] X hl`Zb jZXe kf j\\ n_Xk è]fidXk`fe k_\ ]fid i\hlì\j% @e k_\ N\jk\ie nfic[# g\fgc\ i\X[ ]ifd c\]k kf i`^_k# jf k_\ì \p\j gi\]\i X _Xi[ \[^\ Xcfe^ k_\ c\]k j`[\%

FIGURE 4.6 http://www.flickr.com/photos/rosenfeldmedia/2366428975 Some of the pros and cons of right-aligned labels.

I`^_k$Xc`ê\[ cXY\cj Xcjf _Xm\ Õ\o`Y`c`kp `jjl\j n_\e k_\ cXY\c k\ok Z_Xe^\j n`[k_j% @kËj hl`k\ Zfddfe kf j\\ cXY\cj niXggè^ kf knf cè\j f] k\ok# dXbè^ jZXeeè^ k_\ ]fid dfi\ [`]ÔZlck% K_Xk jX`[# è ZXj\j n_\i\ pfl nXek kf dè`d`q\ k_\ Xdflek f] m\ik`ZXc jZi\\e jgXZ\ pfli ]fid 94 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

lj\j# i`^_k$Xc`ê\[ cXY\cj ZXe gifm`[\ ]Xjk Zfdgc\k`fe k`d\j% DXkk\f G\eqfËj \p\$kiXZbè^ jkl[p j_fne è =`^li\ +%. ]fle[ k_Xk i`^_k$ Xc`ê\[ cXY\cj i\hlì\[ Xe Xm\iX^\ jXZZX[\ dfm\d\ek f] k_\ \p\j Y\kn\\e èglk cXY\c Xe[ Ô\c[ f] (.' d`cc`j\Zfe[j ]fi \og\ik lj\ij Xe[ )+'dj ]fi efm`Z\j Xe[ Zfdgc\k`fe k`d\j k_Xk n\i\ kn`Z\ Xj ]Xjk Xj c\]k$Xc`ê\[ cXY\cj% J\\ =`^li\ +%/ ]fi Xe \oXdgc\ f] X i`^_k$Xc`ê\[ cXpflk%

FIGURE 4.7 http://www.flickr.com/photos/rosenfeldmedia/2367264946 Eye-tracking data for right-aligned labels by Matteo Penzo.

95 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 4.8 http://www.flickr.com/photos/rosenfeldmedia/2366429101 LinkedIn’s registration form is an example of a right-aligned layout.

Left-Aligned Labels N_\e k_\ [XkX Y\è^ Zfcc\Zk\[ Yp X ]fid `j le]Xd`c`Xi fi [f\j efk ]Xcc èkf \Xjp$kf$ gifZ\jj îflgj jlZ_ Xj k_\ mXi`flj gXikj f] Xe X[[i\jj # c\]k$Xc`êè^ èglk Ô\c[ cXY\cj dXb\j jZXeeè^ k_\ è]fidXk`fe i\hlì\[ Yp X ]fid \Xj`\i j\\ =`^li\ +%0 % G\fgc\ ZXe j`dgcp èjg\Zk k_\ c\]k Zfclde f] cXY\cj lg Xe[ [fne n`k_flk Y\è^ èk\iilgk\[ Yp èglk Ô\c[j% 96 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 4.9 http://www.flickr.com/photos/rosenfeldmedia/2366429129 Some of the pros and cons of left-aligned labels.

Le]fikleXk\cp# X ]\n cfe^ cXY\cj f]k\e \ok\e[ k_\ [`jkXeZ\ Y\kn\\e cXY\cj Xe[ èglkj Xe[# Xj X i\jlck# Zfdgc\k`fe k`d\j dXp jl]]\i% G\fgc\ _Xm\ kf ÈaldgÉ ]ifd Zfclde kf Zfclde è fi[\i kf Ôe[ k_\ i`^_k XjjfZ`Xk`fe f] èglk Ô\c[ Xe[ èglk cXY\c Y\]fi\ \ek\iè^ [XkX% C\]k$Xc`ê\[ cXY\cj Xcjf _Xm\ k_\ X[mXekX^\ f] i\hlìè^ c\jj m\ik`ZXc jZi\\e jgXZ\ k_Xe kfg$ Xc`ê\[ ]fidj% ?fn\m\i# k_\p jk`cc ZXiip k_\ jXd\ [`jX[mXekX^\j Xj i`^_k$Xc`ê\[ cXY\cj# fe\ f] n_`Z_ `j c\jj Õ\o`Y`c`kp ]fi cXY\c c\e^k_j Xe[ èglk Ô\c[ îflgè^j% K_\ i\Xjfe c\]k$Xc`ê\[ ]fidj Xi\ k_\ jcfn\jk f] k_\ k_i\\ fgk`fej kf Zfdgc\k\ dXp Y\ Y\ZXlj\ f] k_\ eldY\i f] \p\ ÔoXk`fej k_\p i\hlì\

97 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

kf gXij\% G\fgc\ ^\e\iXccp _Xm\ ef gifYc\d XjjfZ`Xkè^ k_\ cXY\cj è X c\]k$Xc`ê\[ cXpflk n`k_ k_\ì Zfii\jgfe[è^ èglk Ô\c[j2 `k aljk kXb\j k_\d X n_`c\ kf [f jf% 8ZZfi[è^ kf DXkk\fËj jkl[p ÈX d\[`ld jXZZX[\ [liXk`fe f] ,''dj d`cc`j\Zfe[j nXj kpg`ZXc# n_`Z_ `j hl`k\ cfe^# j_fnè^ k_Xk lj\ij n\i\ \og\i`\eZè^ _\Xmp Zfê`k`m\ cfX[É j\\ =`^li\ +%(' %

FIGURE 4.10 http://www.flickr.com/photos/rosenfeldmedia/2367264266 Eye-tracking data for left-aligned labels by Matteo Penzo.

K_Xk jX`[# jcfn\i Zfdgc\k`fe k`d\j d`^_k efk XcnXpj Y\ X YX[ k_è^% @e ]XZk# `] pfl nXek g\fgc\ kf jcfn [fne Xe[ Zfej`[\i \XZ_ èglk è X ]fid dfi\ ZXi\]lccp# c\]k$Xc`ê\[ cXY\cj dXp Y\ X ^ff[ nXp kf ^f# \jg\Z`Xccp ]fi ]fidj n`k_ cfkj f] fgk`feXc Ô\c[j fi le]Xd`c`Xi [XkX 98 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

c`b\ ÈGi\]\i\eZ\jÉ [`Xcf^j fi X[mXeZ\[ j\kkè^j j\\ =`^li\ +%(( % Labels Within Inputs @e ZXj\j n_\i\ jZi\\e i\Xc \jkXk\ `j Xk X gi\d`ld# ZfdYèè^ cXY\cj Xe[ èglk Ô\c[j èkf X jè^c\ lj\i èk\i]XZ\ \c\d\ek dXp Y\ Xggifgi`Xk\% Dfjk Zfddfecp# k_`j i\hlì\j gcXZè^ èglk cXY\cj èj`[\ k_\ì Zfii\jgfe[è^ èglk Ô\c[j j\\ =`^li\ +%() % K_fl^_ `k dXp Y\ k\dgkè^ kf XcnXpj _Xcm\ k_\ Xdflek f] jZi\\e jgXZ\ X ]fid i\hlì\j Yp ljè^ k_`j d\k_f[# k_\i\ Xi\ X eldY\i f] Zfej`[\iXk`fej nfik_ ZXccè^ flk%

FIGURE 4.11 http://www.flickr.com/photos/rosenfeldmedia/2366428457 This advanced settings dialog from AdConnections is an example of where left-aligned labels might make sense.

99 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 4.12 http://www.flickr.com/photos/rosenfeldmedia/2367264348 In this simple form, labels within input fields are displayed as gray text and include an ellipsis to distinguish them from data.

8 i\c`XYc\ èk\iXZk`fe ]fi cXY\cj n`k_è ]fidj i\hlì\j k_\ cXY\c kf [`jXgg\Xi hl`Zbcp n_\e lj\ij gcXZ\ k_\ì Zlijfi èkf k_\ èglk Ô\c[ jf k_\p ZXe \Xj`cp gifm`[\ k_\ì Xejn\i% <Xicp Xkk\dgkj Xk k_`j èk\iXZk`fe jl]]\i\[ ]ifd gffi `dgc\d\ekXk`fe% Jfd\k`d\j# k_\ cXY\c nflc[ [`jXgg\Xi hl`Zbcp% Fk_\i k`d\j# `k nflc[ jkXp Xe[ Y\Zfd\ gXik f] jfd\fe\Ëj Xejn\i% <m\e k_fl^_ n\Ëm\ dX[\ X cfk f] gifî\jj n`k_ [peXd`Z N\Y k\Z_efcf^`\j# dXbè^ m\ip jli\ pfli cXY\cj Xi\eËk jk`Zbè^ Xifle[ è èglk Ô\c[j n_\e k_\p j_flc[eËk Y\ `j Zi`k`ZXc kf dXbè^ cXY\cj n`k_è èglk Ô\c[j nfib% 9\ZXlj\ cXY\cj n`k_è Ô\c[j e\\[ kf ^f XnXp n_\e g\fgc\ Xi\ \ek\iè^ k_\ì Xejn\i èkf Xe èglk Ô\c[# k_\ Zfek\ok ]fi k_\ Xejn\i `j ^fe\% 100 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Jf `] pfl jl[[\ecp ]fi^\k n_Xk hl\jk`fe pflËi\ Xejn\iè^# kfl^_ clZbÇk_\ cXY\c `j efn_\i\ kf Y\ ]fle[% 8j jlZ_# cXY\cj n`k_è èglkj Xi\eËk X ^ff[ jfclk`fe ]fi cfe^ fi \m\e d\[`ld$c\e^k_ ]fidj% N_\e pflËi\ [fe\ Ôccè^ è k_\ ]fid# Xcc k_\ cXY\cj Xi\ ^fe\ K_Xk dXb\j `k X Y`k _Xi[ kf ^f YXZb Xe[ Z_\Zb pfli Xejn\ij% Jè^c\$ hl\jk`fe ]fidj c`b\ X j\XiZ_ Yfo # ]fidj n`k_ aljk X Zflgc\ èglkj# fi ]fidj Xjbè^ ]fi m\ip ]Xd`c`Xi [XkX c`b\ Xe X[[i\jj Yffb Xi\ dlZ_ Y\kk\i ZXe[`[Xk\j% @kËj Xcjf ^\e\iXccp X ^ff[ ilc\ efk kf lj\ cXY\cj n`k_è èglkj ]fi efe$fYm`flj hl\jk`fej% K_Xk `j# hl\jk`fej k_Xk dXp i\hlì\ g\fgc\ kf i\]\i\eZ\ k_\ cXY\c n_`c\ Xejn\iè^% CXjkcp# cXY\cj n`k_è èglk Ô\c[j j_flc[ Y\ gi\j\ek\[ è X nXp k_Xk dXb\j `k fYm`flj Xk Ôijk ^cXeZ\ k_Xk k_\p Xi\ cXY\cj Xe[ efk [XkX% G\i_Xgj k_\ dfjk Zfddfe \oXdgc\ j\\e è =`^li\ +%(* `j k_\ lj\ f] j\c\Zk`fe cXY\cj è [ifg$[fne d\elj% ?\i\# X [Xj_ Y\]fi\ Xe[

101 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 4.13 http://www.flickr.com/photos/rosenfeldmedia/2367264474 Always ensure there is an obvious difference between labels and data. In this example, a set of dashes around a drop-down menu label distinguishes it from an actual answer.

X]k\i k_\ nfi[j ÈJ\c\Zk Dfek_É `j lj\[ kf [`jkè^l`j_ k_`j cXY\c ]ifd Xe XZklXc Xejn\i c`b\ È8gi`cÉ fi ÈDXiZ_%É Mixed Alignments @Ëm\ f]k\e Y\\e Xjb\[ `] dòè^ cXY\c gcXZ\d\ek n`k_è X ]fid fi Xe Xggc`ZXk`fe `j gifYc\dXk`Z% 8]k\i Xcc# k_\i\ dXp Y\ ZXj\j n`k_è X ]fid fi Xe Xggc`ZXk`fe n_\i\ pfl nXek g\fgc\ kf jcfn [fne Xe[ Zfej`[\i k_\ì fgk`fej# è n_`Z_ ZXj\# c\]k$Xc`ê\[ ]fid Ô\c[j d`^_k nfib Y\jk% @e fk_\i ZXj\j# ^\kkè^ g\fgc\ k_ifl^_ ]Xd`c`Xi èglkj d`^_k jk\\i pfl kfnXi[ ljè^ i`^_k$ Xc`ê\[ cXY\cj% @ XZklXccp _Xm\eËk j\\e Xep ZfeZclj`m\ [XkX k_Xk dòè^ cXY\c gcXZ\d\ekj n`k_è Xe Xggc`ZXk`fe [f\jeËk ZXlj\ gifYc\dj2 iXk_\i# è dp \og\i`\eZ\# Zfek\ok f]k\e nèj flk fm\i

102 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Zfej`jk\eZp% 9lk Y\ jli\ kf ki\X[ ZXi\]lccp n_\e ljè^ [`]]\i\ek ]fid cXpflkj è k_\ jXd\ Xggc`ZXk`fe% N_`c\ g\fgc\ d`^_k efk Y\ XYc\ kf i\d\dY\i k_\ [`]]\i\eZ\j Y\kn\\e ]fidj# k_\p dXp jlYZfejZ`fljcp Zfej`[\i Xggc`ZXk`fej n`k_ dXep [`]]\i\ek bè[j f] ]fidj È_Xi[ kf lj\%É Lec\jj pfl _Xm\ X m\ip ^ff[ i\Xjfe kf Z_Xe^\ Xc`êd\ekj Y\kn\\e [`]]\i\ek ]fidj è k_\ jXd\ Xggc`ZXk`fe# X jè^c\ cXpflk n`cc d`k`^Xk\ Xep Zfej`jk\eZp `jjl\j% :_Xe^è^ cXY\c Xc`êd\ekj n`k_è k_\ jXd\ ]fid# _fn\m\i# j_flc[ i\Xccp Y\ Xmf`[\[ jèZ\ `k ZXe Zcfl[ k_\ Zc\Xi gXk_ kf Zfdgc\k`fe g\fgc\ j\\b%

103 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices N\Y ]fid cXY\cj j_flc[ lj\ jlZZèZk# eXkliXc cXe^lX^\ Xe[ Zfej`jk\ek ZXg`kXc`qXk`fe kf dXb\ Xejn\iè^ k_\ hl\jk`fej k_\p gfj\ Xj \Xjp Xj gfjj`Yc\% N_\e pfl Xi\ kipè^ kf i\[lZ\ Zfdgc\k`fe k`d\j fi `] pfl e\\[ Õ\o`Yc\ cXY\c c\e^k_j ]fi cfZXc`qXk`fe# Zfej`[\i kfg$Xc`ê\[ cXY\cj% N_\e pfl _Xm\ j`d`cXi ^fXcj Ylk m\ik`ZXc jZi\\e i\Xc \jkXk\ ZfejkiXèkj# Zfej`[\i i`^_k$Xc`ê\[ cXY\cj% N_\e pfli ]fid i\hlì\j g\fgc\ kf jZXe cXY\cj kf c\Xie n_XkËj i\hlì\[ fi kf Xejn\i X ]\n jg\Z`ÔZ hl\jk`fej flk f] dXep# Zfej`[\i c\]k$Xc`ê\[ cXY\cj% N_\e pfl Xi\ le[\i \oki\d\ jgXZ\ ZfejkiXèkj ]fi m\ip j_fik ]fidj# cXY\cj n`k_è èglkj dXp Y\ X ^ff[ jfclk`fe% Aljk \ejli\ k_Xk pfl _Xm\ k_\ i`^_k èk\iXZk`fej Xe[ Zfek\ok è gcXZ\%

104 Chapter 4 Labels

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices (continued) DXb\ jli\ k_Xk pfl [`jkè^l`j_ Zc\Xicp Y\kn\\e cXY\cj Xe[ [XkX# \jg\Z`Xccp n_\e ljè^ cXY\cj n`k_è èglk Ô\c[j% N_\e Zfej`[\iè^ [`]]\i\ek cXY\c Xc`êd\ekj ]fi [`]]\i\ek ]fidj è X jè^c\ Xggc`ZXk`fe# k_èb k_ifl^_ k_\ Zfek\ok m\ijlj Zfej`jk\eZp kiX[\$f]]% ;`]]\i\ek cXY\c Xc`êd\ekj è X jè^c\ ]fid n`cc [`jilgk X Zc\Xi gXk_ kf Zfdgc\k`fe Xe[ dXp Zfe]lj\ g\fgc\%

105 Chapter 4 Labels

CHAPTER 5

Input Fields Types of Input Fields Field Lengths Required Fields Input Groups Flexible Inputs Best Practices

107 116 119 131 132 136

106 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

eZ\ `kËj Zc\Xi n_Xk hl\jk`fej j_flc[ Y\ fe X ]fid Xe[ _fn k_\p j_flc[ Y\ gi\j\ek\[# n\ e\\[ kf gifm`[\ g\fgc\ n`k_ X nXp kf Xejn\i k_\d% =fi k_`j# n\ klie kf èglk Ô\c[j1 Z_\ZbYfo\j# iX[`f Ylkkfej# [ifg$ [fne d\elj# Xe[ k\ok Yfo\j f] mXipè^ j`q\% Types of Input Fields 9\ZXlj\ j\c\Zkè^ n_`Z_ èglk Ô\c[ `j i`^_k ]fi X jg\Z`ÔZ èk\iXZk`fe `j X ]le[Xd\ekXc èk\iXZk`fe [\j`ê gifYc\d# `kËj X Y`k flkj`[\ k_\ jZfg\ f] k_`j Yffb%( ?fn\m\i# X hl`Zb fm\im`\n f] n_\e kf lj\ Z_\ZbYfo\j# iX[`f Ylkkfej# [ifg$[fne d\elj# Xe[ k\ok Yfo\j n`k_è N\Y ]fidj `j gifYXYcp è fi[\i j\\ =`^li\ ,%( Xe[ KXYc\ ,%( %

(

=fi Xe è$[\gk_ [`jZljj`fe f] n_\e kf lj\ èglk Ô\c[j# Z_\Zb flk 9fY 9Xoc\pËj Yffb1 DXbè^ k_\ N\Y Nfib# )'')# E\n I`[\ij% 107 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 5.1 http://www.flickr.com/photos/rosenfeldmedia/2367265752 The various types of input fields found in Web forms.

TABLE 5.1: TYPES OF INPUT FIELDS INPUT FIELD

DESCRIPTION

K\ok Yfo\j

8ccfn g\fgc\ kf \ek\i Xep eldY\i f] Z_XiXZk\ij c\kk\ij# eld\iXcj# fi jpdYfcj f] k_\ì Z_ffjè^% K\ok Yfo\j ZXe Y\ jè^c\ fi dlck`gc\ cè\j% 8ccfn g\fgc\ kf j\c\Zk \oXZkcp fe\ Z_f`Z\ ]ifd knf fi dfi\ XcnXpj m`j`Yc\ Xe[ dlklXccp \oZclj`m\ fgk`fej% 9\ZXlj\ iX[`f Ylkkfej Xi\ dlklXccp \oZclj`m\# k_\p j_flc[ _Xm\ X [\]Xlck mXcl\ j\c\Zk\[ dfi\ fe k_`j cXk\i % @kËj Xcjf X ^ff[ `[\X kf dXb\ jli\ Yfk_ k_\ iX[`f Ylkkfe Xe[ `kj cXY\c ZXe Y\ j\c\Zk\[ kf XZk`mXk\ X iX[`f Ylkkfe j\c\Zk`fe%

IX[`f Ylkkfej

108 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

:_\ZbYfo\j 8ccfn g\fgc\ kf j\c\Zk Xep eldY\i f] Z_f`Z\j ]ifd X c`jk f] fe\ fi dfi\ fgk`fej% J\c\Zkè^ fe\ Z_f`Z\ ]ifd fe\ fgk`fe `j ljlXccp X p\j fi ef hl\jk`fe% 8j n`k_ iX[`f Ylkkfej# `k `j X ^ff[ `[\X ]fi Yfk_ k_\ cXY\c Xe[ èglk ]`\c[ f] Z_\ZbYfo\j kf Y\ XZk`m\% ;ifg$[fne 8ccfn g\fgc\ kf j\c\Zk \oXZkcp fe\ Z_f`Z\ ]ifd d\elj knf fi dfi\ dlklXccp \oZclj`m\ fgk`fej% N_\e efk è lj\# [ifg$[fne d\elj fecp [`jgcXp k_\ Zlii\ekcp j\c\Zk\[ Z_f`Z\% 8j X i\jlck# k_\p Xi\ Y\kk\i ZXe[`[Xk\j k_Xe iX[`f Ylkkfej ]fi cfe^ c`jkj f] dlklXccp \oZclj`m\ Z_f`Z\j jèZ\ k_\p lj\ X dè`dld f] jZi\\e i\Xc \jkXk\% ;\jg`k\ k_`j X[mXekX^\# `kËj ^\e\iXccp X ^ff[ `[\X kf Xmf`[ i\Xccp cfe^ c`jkj è [ifg$[fne d\elj# \jg\Z`Xccp n_\e g\fgc\ Xi\ c`b\cp kf Y\ ]Xd`c`Xi n`k_ k_\ fgk`fej c`b\ j\c\Zkè^ k_\ jkXk\ k_\p c`m\ è % C`jk Yfo\j C`jk Yfo\j ZXe XZk Xj X j\k f] iX[`f Ylkkfej Xccfnè^ g\fgc\ kf j\c\Zk \oXZkcp fe\ Z_f`Z\ ]ifd X j\k f] dlklXccp \oZclj`m\ fgk`fej fi Xj X j\k f] Z_\ZbYfo\j Xccfnè^ g\fgc\ kf j\c\Zk Xep eldY\i f] Z_f`Z\j ]ifd X c`jk f] fgk`fej % C`jk Yfo\j ZXe Y\ Zfe]`^li\[ kf j_fn dfi\ fgk`fej# c`b\ X [ifg$[fne d\el# n_`c\ jk`cc kXbè^ lg c\jj jZi\\e i\Xc \jkXk\ k_Xe X c`jk f] iX[`f Ylkkfej fi Z_\ZbYfo\j% ;\jg`k\ k_\j\ X[mXekX^\j# k_\ [lXc eXkli\ f] c`jk Yfo\j dlklXccp \oZclj`m\ jè^c\ j\c\Zk`fe fi dlck`gc\ j\c\Zk`fe k\e[j kf ZXlj\ gifYc\dj ]fi dXep g\fgc\% 8j X i\jlck# c`jk Yfo\j Xi\ iXi\cp lj\[ è N\Y ]fidj%

109 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Efk\ k_Xk @ _Xm\eËk èZcl[\[ Ylkkfej è k_`j c`jk% K_\i\Ëj X n_fc\ Z_Xgk\i [\mfk\[ kf k_\d Zfdè^ lg Perspective: Bob Baxley

Author: Making the Web Work: Designing Effective Web Applications

Selecting Form Elements

Fe\ f] k_\ dfjk Z_Xcc\e^è^ Xjg\Zkj f] [\j`êè^ î\Xk ]fidj `j [\k\idèè^ k_\ dfjk Xggifgi`Xk\ èglk Zfekifcj% 9\ZXlj\ k_\i\ `j XcnXpj dfi\ k_Xe fe\ nXp kf \ogi\jj X gXik`ZlcXi èk\iXZk`fe fi i\hl\jk X gXik`ZlcXi kpg\ f] [XkX# k_\ ]fid [\j`ê\i `j èmXi`XYcp gi\j\ek\[ n`k_ X dlck`gc`Z`kp f] fgk`fej k_Xk [iXdXk`ZXccp X]]\Zk k_\ lj\iËj \og\i`\eZ\% @e fi[\i kf \mXclXk\ k_\ iXe^\ f] [\j`ê jfclk`fej# k_\ [\j`ê k\Xd e\\[j kf ]lccp îXjg k_\ i\cXk`m\ X[mXekX^\j Xe[ le`hl\ Z_XiXZk\i`jk`Zj f] \XZ_ gfjj`Y`c`kp% @k `j kpg`ZXc ]fi k_\ [\j`ê k\Xd kf jkil^^c\ n`k_ kiX[\$f]]j k_Xk g`k Zc`Zb$\]ÔZ`\eZp X^Xèjk \iifi gi\m\ek`fe# c\Xie$XY`c`kp X^Xèjk \]ÔZ`\eZp# dXafi`kp ZXj\ X^Xèjk Zfie\i ZXj\# Xe[

110 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Bob Baxley (Continued)

Õ\o`Y`c`kp X^Xèjk ZcXi`kp% ?fn k_\j\ kiX[\$f]]j Xi\ YXcXeZ\[ lck`dXk\cp [\g\e[j fe k_\ al[^d\ek f] k_\ [\j`ê k\Xd# fgk`d`qè^ ]fi k_\ jg\Z`ÔZ Xl[`\eZ\ Xe[ ljX^\ df[\cj èmfcm\[% K_\ jg\Z`ÔZXk`fe f] hlXek`kp Xe[ kpg\ `j X Zfddfe `jjl\ ]fi j`k\j k_Xk j\cc k`Zb\kj# Xe[ `k gifm`[\j X lj\]lc \oXdgc\ f] k_`j [\j`ê Z_Xcc\e^\% Kf Y\^è# n\ j_flc[ \jkXYc`j_ X ]\n gXiXd\k\ij XYflk k_\ Xl[`\eZ\ Xe[ ljX^\1 ( k_\i\ Xi\ fecp k_i\\ [`]]\i\ek kpg\j f] k`Zb\kjÇ >\e\iXc# :_`c[# Xe[ J\e`fi2 ) k_\ mXjk dXafi`kp f] kiXejXZk`fej èmfcm\ jdXcc îflgj# kpg`ZXccp ]\n\i k_Xe jò è[`m`[lXcj2 Xe[ * n`k_ ]\n \oZ\gk`fej# m`j`kfij n`cc Ylp k`Zb\kj ]ifd k_\ j`k\ c\jj k_Xe feZ\ X dfek_% K_\j\ gXiXd\k\ij ZXe Y\ e\Xkcp jlddXi`q\[ n`k_ k_`j gifYc\d jkXk\d\ek1 X ]fid k_Xk Xccfnj efm`Z\ lj\ij kf j\c\Zk lg kf jò kfkXc k`Zb\kj ]ifd Xep f] k_i\\ [`]]\i\ek ZcXjj\j% 9\ZXlj\ f] k_\ è]i\hl\eZp f] lj\# k_\ fm\iXcc Xl[`\eZ\ j_flc[ Y\ Zfej`[\i\[ i\Zliiè^ efm`Z\j# d\Xeè^ k_Xk k_\ [\j`ê j_flc[ 111 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Bob Baxley (Continued)

fgk`d`q\ ]fi c\Xie$XY`c`kp# fYm`flje\jj# Xe[ \iifi gi\m\ek`fe% K_\i\ Xi\ k_i\\ YXj`Z jfclk`fej kf k_`j gifYc\d# \XZ_ i\cpè^ fe X [`]]\i\ek kpg\ f] èglk Zfekifc1 k\ok Yfo\j# glcc$[fne d\elj# Xe[ iX[`f Ylkkfej% K_\ [\j`ê\ij f] =Xe[Xe^f%Zfd fgk\[ ]fi X jfclk`fe k_Xk lj\j YXj`Z k\ok Yfo\j# Xe XggifXZ_ k_Xk `j fYm`flj Xe[ èkl`k`m\ Ylk k_Xk Xcjf gi\j\ekj jfd\ le\og\Zk\[ `jjl\j%

http://www.flickr.com/photos/rosenfeldmedia/2405434961

Fe\ `jjl\ n`k_ k_`j jfclk`fe# jèZ\ dXep lj\ij [feËk i\Xc`q\ k_\p ZXe lj\ k_\ KXY b\p kf X[mXeZ\ ]ifd fe\ Ô\c[ kf Xefk_\i# `j _fn `k c\X[j lj\ij kf jb`g YXZb Xe[ ]fik_ Y\kn\\e k_\ì dflj\ Xe[ b\pYfXi[% 8j X i\jlck# X j`ê`ÔZXek eldY\i f] m`j`kfij n`cc _Xm\ kf YfleZ\ YXZb Xe[ ]fik_

112 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Bob Baxley (Continued)

Y\kn\\e k_\ì dflj\ Xe[ b\pYfXi[ è fi[\i kf Zfdgc\k\ k_\ èk\iXZk`fe% 8 c\jj fYm`flj Ylk dfi\ fe\iflj `jjl\ `j k_\ jfclk`feËj ]X`cli\ kf gi\m\ek èglk \iifij% @] k_\ lj\i kpg\j è X c\kk\i fi efeèk\^\i mXcl\# k_\ j`k\ gfgj fg\e X AXmXJZi`gk \iifi Xc\ikÇXe le]fikleXk\ Xe[ lee\Z\jjXip èkilj`fe f] k_\ fg\iXkè^ jpjk\d% 8ck_fl^_ k_\ k\ok Yfo jfclk`fe _Xj jfd\ Zc\Xi X[mXekX^\j è k\idj f] fYm`flje\jj Xe[ ZcXi`kp# `k _Xj jfd\ \hlXccp Zc\Xi [`jX[mXekX^\j è k\idj f] \]ÔZ`\eZp Xe[ \iifi gi\m\ek`fe%

http://www.flickr.com/photos/rosenfeldmedia/2406266586

8e Xck\ieXk`m\ jfclk`fe j\\e Xk Dfm`\K`Zb\kj% Zfd i\c`\j fe [ifg$[fne d\elj% 8^X`e# `kËj Xe fYm`flj jfclk`fe Ylk efk n`k_flk `jjl\j%

113 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Bob Baxley (Continued)

8ck_fl^_ k_`j jfclk`fe gifm`[\j X dfi\ X^î\jj`m\ jkXeZ\ X^Xèjk \iifij# gi\m\ekè^ k_\d Y\]fi\ k_\p ZXe \m\e fZZli# `k [f\j jf Yp èmfbè^ X [ifg$[fne d\el# k_\ dfjk Zfdgc\o Xe[ [`]ÔZlck èglk Zfekifc XmX`cXYc\% N_`c\ `kËj Zc\Xicp X lj\]lc d\Z_Xe`jd ]fi Zfekifccè^ cXpflk Xe[ m`jlXc gi\j\ekXk`fe# le]fikleXk\cp [ifg$[fne d\elj Xi\ _Xi[ kf lj\# Zfddfecp fm\icffb\[# Xe[ f]k\e `êfi\[% 8j n`k_ k_\ k\ok Yfo XggifXZ_# k_\ X[mXekX^\ f] k_`j jfclk`fe Xk gi\m\ekè^ \iifij Zfd\j Xk k_\ Zfjk f] ljXY`c`kp Xe[ fYm`flje\jj%

http://www.flickr.com/photos/rosenfeldmedia/2405434787

8 k_ì[ jfclk`fe lk`c`q\j iX[`f Ylkkfej kf Zfcc\Zk k_\ lj\iËj [\jì\[ k`Zb\k hlXek`kp% Gfjj\jjè^ k_\ fYm`flje\jj f] k_\ k\ok Yfo jfclk`fe# `k Xcjf 114 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Bob Baxley (Continued)

_Xj k_\ \iifi gi\m\ek`fe X[mXekX^\j f] k_\ d\el jfclk`fe% Le]fikleXk\cp# `k Xcjf i\hlì\j Zfej`[\iXYcp dfi\ èglk Zfekifcj# () `] k_\ hlXek`kp `j c`d`k\[ kf ]fli k`Zb\kj ]ifd \XZ_ ZcXjj% 8ck_fl^_ k_\ iX[`f Ylkkfej ZXe Y\ gi\j\ek\[ è X j`dgc\ îXg_`Z jkpc\# k_\ j_\\i n\`^_k f] () [`jZi\\k èk\i]XZ\ \c\d\ekj `j X Y`k fm\in_\cdè^% K_`j YXj`Z XeXcpj`j [\dfejkiXk\j k_Xk \m\e j\\dè^cp j`dgc\ [XkX Zfcc\Zk`fe gifYc\dj ZXe Y\ jfcm\[ è dlck`gc\ nXpj# n`k_ \XZ_ jfclk`fe gi\j\ekè^ X le`hl\ ZfdYèXk`fe f] X[mXekX^\j Xe[ [`jX[mXekX^\j% K_\ afY f] k_\ [\j`ê\i `j kf ]lccp \ogcfi\ Xe[ XeXcpq\ k_\j\ gfjj`Y`c`k`\j è fi[\i kf Xii`m\ Xk X jfclk`fe k_Xk Y\jk jXk`jﾃ能j k_\ le`hl\ e\\[j f] k_\ Xl[`\eZ\ Xe[ Xggc`ZXk`fe%

115 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Field Lengths 9\ZXlj\ èglk Ô\c[j gifm`[\ g\fgc\ n`k_ X nXp kf Xejn\i k_\ hl\jk`fej n\ Xjb# k_\p Xcjf gifm`[\ lj n`k_ Xe fggfikle`kp kf _\cg g\fgc\ n`k_ k_\ì Xejn\ij% K_\ nXp n\ [`jgcXp èglk Ô\c[j ZXe gif[lZ\ mXclXYc\ Zcl\j fe _fn k_\p j_flc[ Y\ Ôcc\[ è% ?ldXe =XZkfij gif]\jj`feXcj ZXcc k_\j\ Zcl\j X]]fi[XeZ\j%) =fi \oXdgc\# X _Xe[c\ fe X [ffi k_Xk cffbj c`b\ `k j_flc[ Y\ glcc\[ gifm`[\j X mXclXYc\ X]]fi[XeZ\% 9p mìkl\ f] `kj Xgg\XiXeZ\# `k c\kj g\fgc\ befn _fn k_\p ZXe fg\e k_\ [ffi1 Yp glccè^ èjk\X[ f] glj_è^% @eglk Ô\c[j ZXe nfib è X j`d`cXi nXp% @e k_\ \9Xp <ogi\jj \oXdgc\ j_fne è =`^li\ ,%)# k_\ j`q\ f] k_\ q`g Zf[\ èglk dXkZ_\j k_\ j`q\ f] Xe XZklXc q`g Zf[\ è k_\ Le`k\[ JkXk\j1 , [`^`kj% K_\ j`q\ f] k_\ g_fe\ eldY\i k\ok Yfo\j dXkZ_ k_\ eldY\i f] [`^`kj è X jkXe[Xi[ g_fe\ eldY\i è k_\ Le`k\[ JkXk\j% K_\ i\jk )

=fi ]lik_\i è]fidXk`fe XYflk X]]fi[XeZ\j# Z_\Zb flk ;feXc[ EfidXeËj Yffb# K_\ ;\j`ê f] <m\ip[Xp K_è^j# )'') 9Xj`Z 9ffbj

116 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 5.2 http://www.flickr.com/photos/rosenfeldmedia/2367265712 The different text box lengths on this eBay Express form provide an affordance that helps people understand how to answer questions.

f] k_\ k\ok Yfo\j Xi\ X Zfej`jk\ek c\e^k_ k_Xk gifm`[\j \efl^_ iffd ]fi X Zfdgc\k\ Xejn\i% :fekiXjk \9XpËj XggifXZ_ n`k_ k_\ 9`ccè^ @e]fidXk`fe ]fid ]ifd DXZpËj è =`^li\ ,%*% @e k_`j \oXdgc\# Xcc k_\ k\ok Yfo\j Xi\ [`jgcXp\[ n`k_ X le`]fid c\e^k_# i\^Xi[c\jj f] k_\ kpg\ f] Xejn\i g\fgc\ j_flc[ gifm`[\% @e fk_\i nfi[j# k_\i\ Xi\ ef X]]fi[XeZ\j gifm`[\[ kf _\cg g\fgc\ ^`m\ ^ff[ Xejn\ij% @ejk\X[# DXZpËj _X[ kf i\jfik kf _\cg k\ok k_Xk jk`glcXk\[ k_\ eldY\i f] [`^`kj k_\ì q`g Zf[\ èglk Ô\c[ i\hlì\[ ooooo , [`^`kj fecp % K_`j k\ok Zflc[ _Xm\ Y\\e Xmf`[\[ Yp j`dgcp dXbè^ k_\ èglk Ô\c[ k_\ i`^_k j`q\% 117 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 5.3 http://www.flickr.com/photos/rosenfeldmedia/2367265798 Macy’s opted for a consistent input length for primarily aesthetic reasons. However, this approach doesn’t capitalize on natural affordances that can help people provide answers.

9\ZXlj\ X]]fi[XeZ\j gifm`[\ mXclXYc\ Zcl\j XYflk _fn kf jkilZkli\ Xejn\ij# g\fgc\ n`cc eXkliXccp Zfej`[\i k_fj\ Zcl\j n_\e k_\p Xi\ k_èbè^ XYflk _fn kf Ôcc è Xe èglk Ô\c[% @] k_Xk èglk Ô\c[ `j XiY`kiXi`cp j`q\[# pfl dXp c\Xm\ g\fgc\ k_èbè^ XYflk n_Xk k_Xk d\Xej ]fi ef i\Xjfe% =fi \oXdgc\# fe k_\ ]fid ]ifd K`Zb è =`^li\ ,%+# Xcdfjk \m\ip èglk `j X [`]]\i\ek j`q\% K_Xk dXp c\Xm\ g\fgc\ nfe[\iè^ ÈJ_flc[ dp N\Y X[[i\jj Y\ dlZ_ j_fik\i k_Xe dp ZfdgXep eXd\6É fi ÈN_p jlZ_ X cfe^ èglk ]fi dp \dX`cÇXd @ d`jjè^ jfd\k_è^6É 118 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 5.4 http://www.flickr.com/photos/rosenfeldmedia/2366429989 Varying input sizes abound on this form from Tick.

JX`[ Xefk_\i nXp# `] k_`j èglk Ô\c[ `j cfe^ Ylk dp Xejn\i `j j_fik# _Xm\ @ d`jle[\ijkff[ k_\ hl\jk`fe6 9\jk efk kf dXb\ g\fgc\ k_èb kff dlZ_ Xe[ èjk\X[ lj\ X Zfej`jk\ek c\e^k_ ]fi Xcc k_\ Ô\c[j k_Xk [feËk Y\e\Ôk ]ifd Zc\Xi X]]fi[XeZ\j% Required Fields @Ëd ^fè^ kf èk\iilgk k_`j Z_Xgk\i ]fi X hl`Zb gfg hl`q1 N_Xk [f\j Xe Xjk\i`jb e\ok kf Xe èglk Ô\c[ d\Xe6 119 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

DXep g\fgc\ n`cc Xejn\i È@k d\Xej k_`j èglk `j i\hlì\[ jf @ _Xm\ kf gifm`[\ Xe Xejn\i%É DXepÇYlk efk Xcc% 8j `j Zfddfe n`k_ Xcc N\Y Zfem\ek`fej [\ ]XZkf jkXe[Xi[j k_Xk _Xm\ fi^Xe`ZXccp \d\i^\[ fecè\ # k_\i\ Xi\ \oZ\gk`fej kf k_`j ilc\% @e ]XZk# jfd\ N\Y j`k\j lj\ Xe Xjk\i`jb kf è[`ZXk\ fgk`feXc èglk Ô\c[j =`^li\ ,%, èjk\X[ f] i\hlì\[ fe\j%

FIGURE 5.5 http://www.flickr.com/photos/rosenfeldmedia/2367266030 Asterisks on the Hogan sign-up form indicate optional fields! Not what most people would expect.

120 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

@e Yfk_ ZXj\j# k_\ dfi\ `dgfikXek hl\jk`fe `j n_\e kf è[`ZXk\ i\hlì\[ fi fgk`feXc èglk Ô\c[j Xk Xcc j\\ =`^li\ ,%- % N_\e [`jZljjè^ Zfek\ek fi^Xe`qXk`fe \Xic`\i# @ dX[\ k_\ gfèk k_Xk Xep hl\jk`fe k_Xk [f\jeËk e\\[ Xe Xejn\i j_flc[ ^\k [ifgg\[ kf dXb\ `k \Xj`\i ]fi g\fgc\ kf Zfdgc\k\ k_\ ]fid% Jf pfl d`^_k Xi^l\ k_Xk k_\i\ j_flc[ e\m\i Y\ X j`klXk`fe n_\i\ n\ e\\[ kf [`jkè^l`j_ Y\kn\\e i\hlì\[ Xe[ fgk`feXc èglkj# i`^_k6

FIGURE 5.6 http://www.flickr.com/photos/ rosenfeldmedia/2367266066

Indicating optional or required fields next to input field labels.

121 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

N\cc# le]fikleXk\cp k_\ Zfdgc\o`kp f] è]fidXk`fe dXep ]fidj e\\[ kf Zfcc\Zk [f\jeËk dXb\ `k k_Xk \Xjp fe lj% DXep k`d\j k_\i\ XZklXccp Xi\ ^ff[ i\Xjfej ]fi è[`ZXkè^ n_Xk `j i\hlì\[ n_\e lg[Xkè^ fi Zi\Xkè^ X i\Zfi[ fecè\% @e gXik`ZlcXi# n_\e X N\Y ]fid _Xj cfkj f] èglk Ô\c[j Ylk fecp X ]\n f] k_\d Xi\ i\hlì\[# è[`ZXkè^ n_Xk _Xj kf Y\ Xejn\i\[ ZXe Y\ hl`k\ lj\]lc% @k _\cgj kf k_èb f] i\hlì\[ èglk Ô\c[j Xj [\Z`j`fej g\fgc\ _Xm\ kf dXb\% @] k_\p [feËk Xe[ kip kf Zfdgc\k\ k_\ ]fid# k_\pËcc ^\k Xe \iifi :fem\ij\cp# è[`ZXkè^ n_`Z_ èglk Ô\c[j Xi\ fgk`feXc `j lj\]lc n_\e dfjk hl\jk`fej i\hlì\ Xe Xejn\i Ylk X ]\n [f efk% E\`k_\i è[`ZXkfi `j gXik`ZlcXicp lj\]lc n_\e k_\ èglk Ô\c[j Xi\ \`k_\i Xcc i\hlì\[ fi Xcc fgk`feXc% @e k_\j\ ZìZldjkXeZ\j# è[`ZXkè^ i\hlì\[ fi fgk`feXc Ô\c[j X[[j lee\Z\jjXip è]fidXk`fe kf k_\ ]fid k_Xk g\fgc\ k_\e _Xm\ kf gXlj\ Xe[ Zfej`[\i% J`d`cXicp# è[`ZXkè^ k_\ dXafi`kp ZXj\ dfjk èglk Ô\c[j Xi\ i\hlì\[ fi fgk`feXc m\ijlj k_\ dèfi`kp ZXj\ aljk X ]\n èglk Ô\c[j Xi\ 122 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

i\hlì\[ fi fgk`feXc èZi\Xj\j k_\ Xdflek f] è]fidXk`fe k_Xk fm\ic`\j X ]fid% K_`j [`]]\i\eZ\ ZXe Y\ j\\e Yp ZfdgXiè^ k_\ DXZpËj Xe[ NXc$DXik \oXdgc\j è k_`j j\Zk`fe =`^li\j ,%. Xe[ ,%/ % DXZpËj lj\j X cfk f] m`jlXc è]fidXk`fe kf k\cc pfl k_\ knf Ô\c[j Xi\ fgk`feXc% NXc$DXik lj\j fe\ nfi[ kf k\cc pfl X jè^c\ Ô\c[ `j fgk`feXc% K_\ NXc$DXik \oXdgc\ Xcjf _`^_c`^_kj n_p `kËj Y\kk\i kf Y\ \ogc`Z`k n_\e è[`ZXkè^ n_Xk `j fgk`feXc fi i\hlì\[% C`k\iXccp èZcl[è^ k_\ g_iXj\ Èfgk`feXcÉ X]k\i X cXY\c `j dlZ_ Zc\Xi\i k_Xe Xep m`jlXc jpdYfc pfl Zflc[ lj\ kf d\Xe k_\ jXd\ k_è^% Jfd\fe\ dXp XcnXpj nfe[\i Èn_Xk [f\j k_`j Xjk\i`jb d\Xe6É Xe[ _Xm\ kf ^f _lekè^ ]fi X c\^\e[ k_Xk \ogcXèj k_è^j j\\ =`^li\ ,%0 % F] Zflij\# k_\i\ e\\[j kf Y\ X c\^\e[ kf Ôe[ Fe 9Xie\j EfYc\Ëj j`k\ j_fne è =`^li\ ,%('# ef c\^\e[ \o`jkj k_Xk \ogcXèj k_\ lj\ f] Xe Xjk\i`jb% Jfd\ g\fgc\ n`cc Xi^l\ k_Xk X j`k\Ëj N\Y ]fidj j_flc[ Y\ Zfej`jk\ek k_ifl^_flk# Xe[ k_\i\]fi\ \m\ip i\hlì\[ èglk Ô\c[ j_flc[ Y\ 123 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 5.7 http://www.flickr.com/photos/rosenfeldmedia/2367266224 On Macyâ&#x20AC;&#x2122;s every input is required and marked as such except for Middle Name and Attention. It may be clearer to simply mark these two fields as optional instead.

FIGURE 5.8 http://www.flickr.com/photos/rosenfeldmedia/2366430295 On Wal-Mart, every input is required but one (Address Line 2). Instead of marking everything required, the one optional field has been clearly marked optional, thereby reducing the amount of information on the form. 124 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 5.9 http://www.flickr.com/photos/rosenfeldmedia/2366430463 On Barnes & Nobleâ&#x20AC;&#x2122;s Web site, all the input fields are required and marked as such â&#x20AC;&#x201D;why?

FIGURE 5.10 http://www.flickr.com/photos/rosenfeldmedia/2367265092 When Barnes & Noble redesigned its site, the company kept the asterisks that indicated every input field was required but removed the text that explained what the asterisk indicated.

125 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

è[`ZXk\[ Xj jlZ_# i\^Xi[c\jj f] n_\k_\i fi efk k_\i\ Xi\ Xep fgk`feXc èglk Ô\c[j fe k_\ ]fid% N_`c\ k_`j dXp Y\ lj\]lc è ]fidj k_Xk i\hlì\ j\m\iXc gX^\j kf Zfdgc\k\# k_\ mXi`\kp f] N\Y ]fidj g\fgc\ \eZflek\i fecè\ dXb\j `k _Xi[ kf `dX^è\ k_Xk k_\p n`cc i\d\dY\i X jg\Z`ÔZ j`k\Ëj jpjk\d f] è[`ZXkè^ i\hlì\[ èglk Ô\c[j XZifjj k_\ fe\ kf knf ]fidj k_\p \eZflek\i% @] pfl [f fgk ]fi X m`jlXc jpjk\d kf è[`ZXk\ i\hlì\[ èglk Ô\c[j# ZXi\]lccp Zfej`[\i n_\i\ pfl gcXZ\ k_\ è[`ZXkfij fe k_\ ]fid% @e[`ZXkfij e\ok kf cXY\cj ^`m\ g\fgc\ X nXp kf jZXe X ]fid hl`Zbcp Xe[ [\k\idè\ n_Xk hl\jk`fej i\hlì\ Xe Xejn\i =`^li\ ,%(( % @e[`ZXkfij Xc`ê\[ n`k_ èglk Ô\c[j ZXe dXb\ k_`j [`]ÔZlck Y\ZXlj\ f] k_\ mXi`\kp f] j_Xg\j Xe[ j`q\j k_Xk èglk Ô\c[j ZXe _Xm\ =`^li\ ,%() %

126 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURES 5.11 & 5.12 Figure 5.11: Figure 5.12:

http://www.flickr.com/photos/rosenfeldmedia/2366429475 http://www.flickr.com/photos/rosenfeldmedia/2366429295

Try to scan each of these forms to see what input fields are required. When indicators are aligned with input fields instead of labels, itâ&#x20AC;&#x2122;s much harder to get a sense of which questions must be answered. 127 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Micah Alpern

Director of Social Search, Yahoo! Inc.

The Structural Design of Forms Gfn\i]lc [\j`ê Zfd\j ]ifd k_\ i\lj\ f] X jdXcc eldY\i f] j`dgc\ gXkk\iej% K_`j `j k_\ \jj\eZ\ f] k_\ gfn\i k_Xk X î`[ gifm`[\j ]fi m`jlXc [\j`ê\ij% =fi \oXdgc\# î`[j n`k_ jn\\gè^ _fi`qfekXc Xe[ m\ik`ZXc cè\j _\cg [\j`ê\ij gcXZ\ e\n \c\d\ekj fe k_\ gX^\# n_`c\ Zfej`[\iè^ k_\ì i\cXk`fej_`g kf k_\ n_fc\% J`d`cXicp# èk\iXZk`fe [\j`ê\ij _Xm\ Y\^le ljè^ Zfej`jk\ek èk\iXZk`fe gXkk\iej kf j`dgc`]p [\j`ê [\Z`j`fej Xe[ gifm`[\ ^cfYXc Zfej`jk\eZp%* Jf n_Xk gXkk\iej f] jkilZkli\ le[\ic`\ X ]fid6 THE CORE OF A FORM IS AN INPUT

@eglkj Xi\ Xkfd`Z L@ Zfdgfe\ekj [\j`ê\[ kf i\Z\`m\ lj\i ]\\[YXZb lgfe n_`Z_ Xcc ]fidj Xi\ Yl`ck% ?\i\ pfl j\\ dlck`gc\ èglkj f] [`]]\i\ek kpg\j# Ylk n`k_ k_\ jXd\ le[\icpè^ jkilZkli\% http://www.flickr.com/photos/rosenfeldmedia/2406455722 *

;\j`êè^ èk\i]XZ\j1 GXkk\iej ]fi \]]\Zk`m\ èk\iXZk`fe% ;\j`ê Yp A\e`]\i K`[n\cc 128 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Micah Alpern (Continued) @eglkj ZXe kXb\ dXep j_Xg\j# Ylk k_\ YXj`Z gXkk\ie `j k_\ jXd\1 k`kc\# [XkX# XZk`fej% K_`j YXj`Z gXkk\ie i\g\Xkj X^Xè Xe[ X^Xè XZifjj dlck`gc\ kpg\j f] èglkj Xe[ Xk dlck`gc\ c\m\cj n`k_è X ]fid ]fi \oXdgc\# Xk Xe èglk# X j\Zk`fe# X [`Xcf^# fi X gX^\ %

http://www.flickr.com/photos/rosenfeldmedia/2406455536

K_`j jkilZkli\ _\cgj [\]è\ k_\ m`jlXc [\j`ê Xj \ogi\jj\[ k_ifl^_ jkpc\ ]fekj# n\`^_kj# Zfcfi# `Zfej Xe[ cXpflk Xc`êd\ek# dXi^èj# Xe[ gX[[è^# % GROUPING INPUTS

8 >iflg `j knf fi dfi\ èglkj n`k_ jfd\ bè[ f] i\cXk`fej_`g% K_i\\ f] k_\ dfjk ]i\hl\ek kpg\j f] >iflg èglkj Xi\ :fdgfle[ èglkj# I\cXk\[ èglkj# Xe[ GXi\ek&:_`c[ èglkj% K_\j\ èglk kpg\j Xi\ `dgfikXek Y\ZXlj\ k_\p Xi\ \XZ_ jl`k\[ kf [`]]\i\ek kpg\j f] gifYc\dj# Xe[ k_\p _Xe[c\ \iifij Xe[ [\g\e[\eZ`\j [`]]\i\ekcp%

129 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Micah Alpern (Continued) K_i\\ [`]]\i\ek kpg\j f] îflgj èZcl[\ k_\ ]fccfnè^1 STRUCTURAL DESIGN

K_\ ]fid \oXdgc\j _\i\ Xi\ kXb\e ]ifd k_\ gXkk\ie cXe^lX^\ n\ [\m\cfg\[ n_\e i\[\j`êè^ k_\ j\ccè^ gifZ\jj\j Xk \9Xp% 9p k_èbè^ XYflk k_\ [\j`ê jkilZkliXccp# n\ ]fiZ\[ flij\cm\j kf Zfej`[\i k_\ ]fccfnè^ hl\jk`fej# ]fi \XZ_ e\n L@ \c\d\ek1 N_Xk bè[ f] k_è^ `j k_`j6 ?fn Xi\ fk_\i k_è^j f] k_`j bè[ ki\Xk\[6 N_Xk `j k_\ i\cXk`fej_`g f] k_`j \c\d\ek kf Xcc fk_\i \c\d\ekj6

http://www.flickr.com/photos/ rosenfeldmedia/2405624141

:Xe n\ j`dgc`]p k_\ [\j`ê Yp Zfejfc`[Xkè^ k_`j bè[ f] \c\d\ek n`k_ fk_\ij fi Yp \ok\e[è^ k_\ i\cXk`fej_`g Y\kn\\e k_`j \c\d\ek Xe[ fk_\ij6 9p Zfej`jk\ekcp Xe[ i\g\Xk\[cp Xjbè^ k_\j\ hl\jk`fej# n\ Zi\Xk\[ X Zf_\i\ek [\j`ê n_fj\ le[\icpè^ jkilZkliXc gXkk\iej dX[\ k_\ èk\i]XZ\ j`dgc\ Xe[ ZfeZ`j\%

130 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Input Groups =fi dXep f] k_\ hl\jk`fej n\ Xjb n`k_è N\Y ]fidj# k_\i\Ëj X Zfddfe nXp kf i\jgfe[% DX`cè^ X[[i\jj\j# ]fi \oXdgc\# _Xm\ X n`[\cp befne jkilZkli\ k_Xk ZXe Y\ c\m\iX^\[ kf _\cg g\fgc\ le[\ijkXe[ _fn kf Xejn\i hl\jk`fej XYflk j_`ggè^ fi Y`ccè^ cfZXk`fej% Fk_\i \oXdgc\j èZcl[\ Ôijk eXd\ Xe[ cXjk eXd\# [Xk\ Xe[ k`d\# fi k_\ gXikj f] X g_fe\ eldY\i% @eglk Ô\c[ îflgj ZXe Y\ lj\[ kf i\Õ\Zk d\Xeè^]lc i\cXk`fej_`gj Y\kn\\e k_\ [`]]\i\ek gXikj f] Xe èglk% :fej`[\i k_\ \9Xp j_`ggè^ j\c\Zk`fe èglkj j_fne è =`^li\ ,%(*% Dlck`gc\ j_`ggè^ j\im`Z\j Xi\ XmX`cXYc\ \XZ_ n`k_ X jkilZkli\ f] J_`g kf# ljè^ X J\im`Z\#

FIGURE 5.13 http://www.flickr.com/photos/rosenfeldmedia/2366429509 The grouping of inputs on eBay’s Sell Your Item format represents a meaningful structure.

131 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Xk X jg\Z`ÔZ :fjk% J`d`cXicp# k_\ îflgè^ f] X[[`k`feXc cfZXk`fej `j ^fm\ie\[ Yp X ^cfYXc Zfekifc1 n`cc j_`g nfic[n`[\ fi fecp kf jg\Z`ÔZ cfZXk`fej# n_`Z_ Xi\ c`jk\[ Y\cfn% K_\j\ èglk îflgj ZXe Y\ lk`c`q\[ n`k_è ]fidj kf gifm`[\ X[[`k`feXc Zcl\j fe _fn hl\jk`fej j_flc[ Y\ Xejn\i\[% Flexible Inputs K_fl^_ k_\i\Ëj dfi\ k_Xe fe\ i`^_k nXp kf Xejn\i X hl\jk`fe# dXep N\Y ]fidj Xi\eËk k_Xk Õ\o`Yc\% 9\ZXlj\ f] k\Z_e`ZXc# c\^Xc# fi Yljè\jj ZfejkiXèkj# k_\i\Ëj f]k\e X jg\Z`ÔZ nXp g\fgc\ e\\[ kf Xejn\i X hl\jk`fe ]fi k_\ì i\jgfej\ kf Y\ Zfej`[\i\[ mXc`[% KXb\ k_\ j\\dè^cp j`dgc\ hl\jk`fe f] ÈN_XkËj pfli g_fe\ eldY\i6É N\ ZXe gifm`[\ jfd\ j`dgc\ _\cg k\ok e\ok kf k_\ èglk Xj pflËcc j\\ è :_Xgk\i . kf c\k g\fgc\ befn _fn k_\p j_flc[ Xejn\i k_\ hl\jk`fe1 ÈLj\ ooo$ooo$ oooo Xj k_\ ]fidXk ]fi pfli Xejn\i%É N\ ZXe

132 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

jkilZkli\ k_\ èglk Ô\c[j Xe[ k_\ì X]]fi[XeZ\j kf XZZ\gk fecp X jg\Z`ÔZ ]fidXk1 k_i\\ k\ok Yfo\j f] k_\ Xggifgi`Xk\ c\e^k_ j\gXiXk\[ Yp k_\ Xggifgi`Xk\ gleZklXk`fe% Fi n\ ZXe gifm`[\ X Õ\o`Yc\ èglk Ô\c[ k_Xk Xccfnj g\fgc\ kf Xejn\i k_\ hl\jk`fe k_\ nXp k_\p n`j_ j\\ =`^li\ ,%(+ % @e fli g_fe\ eldY\i \oXdgc\# k_\i\ Xi\ YXj`ZXccp Ôm\ [`]]\i\ek nXpj X mXc`[ g_fe\ eldY\i Zflc[ Y\ jg\Z`Ô\[% 8 j`dgc\ jZi`gk ZXe Z_\Zb kf j\\ `] fe\ f] k_\j\ _Xj Y\\e lj\[ Xe[ jlYd`k k_\ è]fidXk`fe è n_Xk\m\i ]fidXk k_\ YXZb$ \e[ jpjk\d i\hlì\j% K_\ Z_fi\ f] X[_\iè^ kf X jg\Z`ÔZ ]fidXk `j kXb\e f]] k_\ g\ijfe gifm`[è^ Xe Xejn\i Xe[ èjk\X[ ^`m\e kf X jdXcc Y`k f] Zf[\%

FIGURE 5.14 http://www.flickr.com/photos/rosenfeldmedia/2367265570 Input fields can be made flexible enough to accept multiple formats of a valid answer.

133 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

8efk_\i \oXdgc\ f] Õ\o`Yc\ èglk Ô\c[j Zfd\j ]ifd k_\ èm`kXk`fe ]fid fe I\ebff# j_fne è =`^li\ ,%(,% N_\e jg\Z`]pè^ X gcXZ\ kf d\\k# k_`j èglk Ô\c[ Xccfnj k_i\\ bè[j f] Xejn\ij% @] g\fgc\ aljk nXek kf kpg\ è X cfZXk`fe# k_\p ZXe [f jf% @] k_\pË[ Xcjf c`b\ kf èZcl[\ Xe X[[i\jj fi X dXg# X jè^c\ Zc`Zb \ogfj\j k_\ Xggifgi`Xk\ jlYfgk`fej% @] jfd\fe\ nflc[ c`b\ kf èZcl[\ X dXg Ylk [f\jeËk befn k_\ X[[i\jj# _\ ZXe j\XiZ_ ]fi X gcXZ\ Xe[ _Xm\ k_\ X[[i\jj Ôcc\[ è XlkfdXk`ZXccp ]fi k_\d% 8cc k_i\\ f] k_\j\ fgk`fej i\jlck è mXc`[ Xejn\ij% ?fn dlZ_ fi

FIGURE 5.15 http://www.flickr.com/photos/rosenfeldmedia/2366429699 A flexible input on the Renkoo invitation form.

134 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

_fn c`kkc\ è]fidXk`fe `j gifm`[\[ `j lg kf k_\ g\ijfe Ôccè^ è k_\ ]fid% @e k_\ èk\i\jkj f] ]lcc [`jZcfjli\# k_`j \oXdgc\ [f\jeËk c\k g\fgc\ befn k_\p ZXe j\XiZ_ ]fi X gcXZ\ lg ]ifek% @kËj Xe fgk`fe _`[[\e Y\_è[ X Zc`Zb% Efe\k_\c\jj# @ k_èb `k [\dfejkiXk\j _fn èglk Ô\c[j Zflc[ Y\ Zfej`[\i\[ Zfdgc\k\ Xe[ mXc`[ n`k_ mXipè^ Xdflekj f] è]fidXk`fe fi [`]]\i\ek ]fidXkj ]ifd g\fgc\% @kËj Xcjf `dgfikXek kf efk\ k_Xk [\jg`k\ Xccfnè^ Xejn\ij f] mXipè^ [\kX`c# k_`j èk\iXZk`fe dXb\j `k \Xjp kf gifm`[\ k_\ j`dgc\jk Xejn\i% @] pfl aljk nXek kf kpg\ è X gcXZ\# efk_è^ jkXe[j è pfli nXp% =c\o`Y`c`kp Xk k_\ \og\ej\ f] _fn \Xj`cp g\fgc\ ZXe gifm`[\ k_\ dfjk Zfddfe Xejn\i `j c`b\cp kf [f dfi\ _Xid k_Xe ^ff[%

135 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices Lj\ k_\ i`^_k èglk Ô\c[ ]fi k_\ kpg\ f] hl\jk`fe pfl Xi\ Xjbè^1 ;f\j `k i\hlì\ X p\j fi ef Xejn\i2 X j\c\Zk`fe ]ifd dlklXccp \oZclj`m\ fgk`fej2 \kZ%6 N_\i\ gfjj`Yc\# \ejli\ k_Xk Ô\c[ c\e^k_j gifm`[\ d\Xeè^]lc X]]fi[XeZ\j k_Xk _\cg g\fgc\ Xejn\i hl\jk`fej \]]\Zk`m\cp% Fk_\in`j\# lk`c`q\ X Zfej`jk\ek c\e^k_ k_Xk gifm`[\j \efl^_ iffd ]fi Zfii\Zk Xejn\ij% Kip kf Xmf`[ fgk`feXc èglk Ô\c[j è ]fidj% @] dfjk f] k_\ èglkj fe X ]fid Xi\ i\hlì\[# è[`ZXk\ k_\ ]\n k_Xk Xi\ fgk`feXc% @] dfjk f] k_\ èglkj fe X ]fid Xi\ fgk`feXc# è[`ZXk\ k_\ ]\n k_Xk Xi\ i\hlì\[% N_\e è[`ZXkè^ n_Xk ]fid Ô\c[j Xi\ \`k_\i i\hlì\[ fi fgk`feXc# k\ok `j k_\ dfjk Zc\Xi% ?fn\m\i# k_\ ! jpdYfc `j i\cXk`m\cp n\cc le[\ijkff[ kf d\Xe i\hlì\[% @] pfl [f lj\ ! kf è[`ZXk\ i\hlì\[ Ô\c[j# [feËk ]fi^\k X c\^\e[ k_Xk \ogcXèj n_Xk `k è[`ZXk\j% 8jjfZ`Xk\ i\hlì\[ fi fgk`feXc è[`ZXkfij n`k_ èglk cXY\cj kf ^`m\ g\fgc\ Xe \Xjp nXp kf j\\ n_`Z_ hl\jk`fej e\\[ kf Y\ Xejn\i\[% @] k_\i\Ëj X eXkliXc jkilZkli\ Xdfe^ èglk Ô\c[j k_Xk gifm`[\j X mXclXYc\ Zcl\ fe _fn kf Xejn\i X hl\jk`fe# cffb ]fi nXpj kf îflg k_\j\ èglkj m`jlXccp kf Zc\Xicp Zfddle`ZXk\ k_Xk jkilZkli\%

136 Chapter 5 Input Fields

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices (continued) N_\e k_\i\Ëj Zc\Xicp dfi\ k_Xe fe\ nXp kf ]fidXk Xe Xejn\i Zfii\Zkcp# Zfej`[\i ljè^ X Õ\o`Yc\ èglk Ô\c[% <ejli\ k_Xk Õ\o`Yc\ èglkj [feËk dXb\ gifm`[è^ \Xjp Xejn\ij dfi\ [`]ÔZlck%

137 Chapter 5 Input Fields

CHAPTER 6

Actions Primary and Secondary Actions Placement Actions in Progress Agree and Submit Best Practices

139 147 150 155 158

138 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

XY\cj gifm`[\ k_\ hl\jk`fej k_Xk ]fidj Xjb g\fgc\% @eglk Ô\c[j ^`m\ g\fgc\ X nXp kf Xejn\i k_fj\ hl\jk`fej% E\`k_\i f] k_\j\ `k\dj# _fn\m\i# XZklXccp c\kj g\fgc\ Zfdgc\k\ X ]fid% K_Xk jè^lcXi i\jgfej`Y`c`kp i\jkj n`k_ XZk`fej% Primary and Secondary Actions 8 kpg`ZXc N\Y ]fid ljlXccp \eXYc\j j\m\iXc ÔeXc XZk`fej j\\ =`^li\ -%( % 8Zk`fej jlZ_ Xj JlYd`k# JXm\# fi :fekèl\ Xi\ èk\e[\[ kf \eXYc\ Zfdgc\k`fe# n_`Z_ `j k_\ gi`dXip ^fXc f] aljk XYflk Xepfe\ n_f _Xj jkXik\[ Ôccè^ è X ]fid% 9\ZXlj\ k_\p \eXYc\ k_\ dfjk `dgfikXek XZk`fe fe k_\ ]fid Zfdgc\k`fe # k_\p ZXe Y\ i\]\ii\[ kf Xj gi`dXip XZk`fej%

FIGURE 6.1 http://www.flickr.com/photos/rosenfeldmedia/2367266922 Primary and secondary actions on a Web form can be represented in ways that illuminate their importance.

139 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

J\Zfe[Xip XZk`fej# fe k_\ fk_\i _Xe[# k\e[ kf Y\ c\jj lk`c`q\[ Xe[ dfjk f]k\e Xccfn g\fgc\ kf i\kiXZk k_\ [XkX k_\pËm\ \ek\i\[% Fgk`fej c`b\ :XeZ\c# I\j\k# fi >f 9XZb i\gi\j\ek j\Zfe[Xip XZk`fej k_Xk Xi\ Zflek\i kf dfjk g\fgc\Ëj gi`dXip ^fXc f] Zfdgc\k`e^ k_\ ]fid k_\p Y\^Xe% 9\ZXlj\ j\Zfe[Xip XZk`fej ZXe _Xm\ e\^Xk`m\ Zfej\hl\eZ\j j\\ =`^li\ -%) # \jg\Z`Xccp n_\e

FIGURE 6.2 top image: http://www.flickr.com/photos/rosenfeldmedia/2366430857 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367266990

Even on very short forms like this one from eBay, secondary actions can be problematic. Which button would you have pressed? The redesign makes it much clearer. 140 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

lj\[ leèk\ek`feXccp# @Ëm\ f]k\e Xi^l\[ k_\p j_flc[ Y\ XYj\ek ]ifd ]fidj% @dX^è\ Ôccè^ è X cfe^ ]fid fecè\ fecp kf _`k k_\ I\j\k Ylkkfe Xe[ _Xm\ Xcc pfli [XkX \iXj\[% K_Xk jX`[# k_\i\ Xi\ j`klXk`fej n_\i\ j\Zfe[Xip XZk`fej dXb\ j\ej\ jlZ_ Xj JXm\ ]fi CXk\i# Gi\m`\n# <ogfik# \kZ% % G\i_Xgj k_\ dfjk Zfddfe \oXdgc\ èmfcm\j dlck`gc\ gX^\ ]fid n`qXi[j n_\i\ g\fgc\ ZXe dfm\ ]finXi[ Xe[ YXZbnXi[ k_ifl^_ N\Y gX^\j% K_fl^_ `k dXp Y\ k\dgkè^ kf ki\Xk Gi\m`flj Xe[ E\ok Xj \hlXc XZk`fej è k_\j\ ZìZldjkXeZ\j# b\\gè^ g\fgc\ dfmè^ ]finXi[ n`k_ X gi`dXip :fekèl\ XZk`fe Xe[ X j\Zfe[Xip 9XZb XZk`fe `j c`b\cp kf Y\ dfi\ gif[lZk`m\% 8]k\i Xcc# n\ nXek g\fgc\ kf Zfdgc\k\ k_\j\ ]fidj# i`^_k6 N_\e pfl i\[lZ\ k_\ m`jlXc gifdè\eZ\ f] j\Zfe[Xip XZk`fej# `k dè`d`q\j k_\ i`jb ]fi gfk\ek`Xc \iifij Xe[ ]lik_\i [ì\Zkj g\fgc\ kfnXi[ X jlZZ\jj]lc flkZfd\% 9lk n_XkËj k_\ Y\jk nXp kf XZZfdgc`j_ k_`j [`jkèZk`fe j\\ =`^li\ -%* 6 ?fn [`]]\i\ek j_flc[ gi`dXip Xe[ j\Zfe[Xip XZk`fej Y\ Xe[ n_\i\ j_flc[ k_\p Y\ 141 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 6.3 http://www.flickr.com/photos/rosenfeldmedia/2367267022 Various ways to distinguish primary and secondary actions include different button styles, combinations of buttons and links, and different links styles.

gcXZ\[6 Kf Xejn\i k_\j\ hl\jk`fej# @ iXe X ]\n k\jkj n`k_ Cfe[fe$YXj\[ ljXY`c`kp Ă&#x201D;id <ki\%( @e fi[\i kf Xjj\jj n_`Z_ gi\j\ekXk`fe f] gi`dXip Xe[ j\Zfe[Xip XZk`fej d`^_k nfib Y\jk# n\ k\jk\[ jò mXi`Xk`fej fe )* g\fgc\ ljè^ \p\$kiXZbè^ Xe[ ljXY`c`kp d\ki`Zj% GXik`Z`gXekj n\i\ gi\j\ek\[ \XZ_ f] jò [\j`êj è iXe[fd fi[\i kf dè`d`q\ ]Xd`c`Xi`kp Y`Xj\j (

K_\ ]lcc i\jlckj f] k_\ <ki\ jkl[p ZXe Y\ ]fle[ Xk1 http://www.lukew.com/resources/articles/ PSactions.asp

142 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Xe[ Xjb\[ kf ÈGc\Xj\ Zfdgc\k\ k_\ ]fid ]lccp Xe[ XZZliXk\cp%É K_fl^_ fk_\i fgk`fej Zflc[ _Xm\ Y\\e k\jk\[# n\ j\c\Zk\[ k_\j\ =`^li\ -%+ YXj\[ fe X jlim\p f] k_\ dfjk Zfddfecp lj\[ jfclk`fej Xk k_\ k`d\ n\ iXe fli k\jk%

FIGURE 6.4 http://www.flickr.com/photos/rosenfeldmedia/2366430953 The set of primary and secondary action designs tested for this book.

143 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

G\fgc\ XZZfdgc`j_\[ k_\ì kXjb g\i]\Zkcp n_\e ljè^ Ôm\ f] k_\ jò [\j`êj% Fgk`fej 8# 9# :# ;# Xe[ = XZ_`\m\[ jlZZ\jj iXk\j f] ('' g\iZ\ek# n`k_flk ZXljè^ g\fgc\ kf dXb\ X jè^c\ \iifi% K_\p Xcjf jXn ZfdgXiXYc\ kXjb Zfdgc\k`fe k`d\j Xe[ i\Z\`m\[ _`^_ jXk`j]XZk`fe iXkè^j% Fgk`fe <# Xj n\Ëcc j\\ cXk\i# [`[eËk ]Xi\ Xj n\cc% F] k_\ fgk`fej n\ k\jk\[# fgk`fe 9 g\i]fid\[ Y\jk f] Xcc% =òXk`fej n\i\ j_fik\i Xe[ ]\n\i è eldY\i n_\e ljè^ k_`j [\j`ê j\\ =`^li\ -%, % 8e[ g\fgc\ n\i\ Xcjf XYc\ kf Zfdgc\k\

FIGURE 6.5 http://www.flickr.com/photos/rosenfeldmedia/2366431053 Eye fixations from a single participant when both primary and secondary actions were visually identical. Image provided by Etre.

144 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k_\ kXjb dfi\ hl`Zbcp Xe[ \]ÔZ`\ekcp k_Xe k_\p [`[ n_\e ljè^ k_\ fk_\ij% @e ]XZk# fgk`fe 9 i\hlì\[ Xe Xm\iX^\ f] )%( j\Zfe[j c\jj kf Zfdgc\k\ k_Xe k_\ fgk`fej k_Xk m`jlXccp [`jkè^l`j_\[ gi`dXip Xe[ j\Zfe[Xip XZk`fej% 9lk n_\e ljè^ fgk`fe 9# X eldY\i f] g\fgc\ \ogi\jj\[ ZfeZ\ie k_Xk k_\p ÈZflc[ hl`k\ \Xj`cp Zc`Zb k_\ nife^ Ylkkfe%É J\m\iXc g\fgc\ Xcjf jgfb\ gfj`k`m\cp XYflk k_\ [\j`êj k_Xk dX[\ È:XeZ\cÉ jkXe[ flk è jfd\ nXp fgk`fej 8 Xe[ : è =`^li\ -%+ # d\ek`feè^ k_Xk k_\ m`jlXc [`jkèZk`fe _\cg\[ k_\d Xmf`[ kXbè^ k_\ nife^ XZk`fe j\\ =`^li\ -%- % 9fk_ fgk`fej 8 Xe[ : Xcjf _X[ X _`^_\i jXk`j]XZk`fe iXkè^ k_Xe fgk`fe 9% K_`j ZfdYèXk`fe f] gfj`k`m\ hlXc`kXk`m\ [XkX Xe[ jdXcc hlXek`kXk`m\ [`]]\i\eZ\j è g\i]fidXeZ\ `j k_\ i\Xjfe @ Zfekèl\ kf i\Zfdd\e[ m`jlXccp [`jkè^l`j_è^ j\Zfe[Xip XZk`fej n_\e k_\p ZXeËk Y\ i\dfm\[ ]ifd X ]fid%

145 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 6.6 http://www.flickr.com/photos/rosenfeldmedia/2366431173 Eye fixations from a single participant when primary and secondary differed in color. Image provided by Etre.

J\m\iXc g\fgc\ _Xm\ jl^^\jk\[ kf d\ k_Xk X gifm\e nXp kf Zc\Xicp [`jkè^l`j_ Y\kn\\e gi`dXip Xe[ j\Zfe[Xip XZk`fej `j k_ifl^_ k_\ lj\ f] î\\e ]fi k_\ gi`dXip XZk`fe Xe[ i\[ ]fi k_\ j\Zfe[Xip XZk`fe j\\ =`^li\ -%. % ;`jgcXpè^ \`k_\i k_\ Ylkkfe `kj\c] fi Xe `Zfe n`k_è `k è k_\j\ Zfcfij dXb\j X Zc\Xi FIGURE 6.7 http://www.flickr.com/photos/rosenfeldmedia/2366431201 Color and shape distinctions like those on Wufoo.com can be used to distinguish primary and secondary actions, but red text should be reserved for errors.

146 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

[`jkèZk`fe Y\kn\\e jlZZ\jj]lc î\\e XZk`fej Xe[ lejlZZ\jj]lc i\[ XZk`fej% G\ijfeXccp# @Ëd XcnXpj _\j`kXek kf lj\ i\[ kf cXY\c Xep XZk`fe# [l\ kf k_Xk ZfcfiËj Zcfj\ XjjfZ`Xk`fe n`k_ \iifij% I\[ `j lj\[ jf f]k\e kf è[`ZXk\ jfd\k_è^ YX[ _Xj _Xgg\e\[ fe X ]fidÇXj n\Ëcc j\\ cXk\i è k_\ YffbÇk_Xk @Ëd hl`k\ nXip f] ljè^ `k kf i\gi\j\ek \`k_\i j\Zfe[Xip fi gi`dXip XZk`fej% Fe\ nXp kf \ejli\ k_Xk j\Zfe[Xip XZk`fej [f efk i\jlck è ZXkXjkifg_`Z cfjj\j f] [XkX `j kf gifm`[\ Xe XlkfdXk`Z Le[f Y\_Xm`fi% IXk_\i k_Xe Xjbè^ g\fgc\ kf ZfeÔid k_Xk k_\pË[ c`b\ kf i\j\k X ]fid n_\e k_\p Zc`Zb I\j\k# j`dgcp i\gcXZ\ k_\ I\j\k Ylkkfe n`k_ Xe Le[f Ylkkfe X]k\i k_\p j\c\Zk `k% F] Zflij\# k_`j i\hlì\j pfli ]fid kf jkfi\ g\fgc\Ëj [XkX Xj k_\p \ek\i `k# Ylk k_XkËj X jdXcc gi`Z\ kf gXp ]fi gi\m\ekè^ ZXkXjkifg_`Z [XkX cfjj% Placement @e k_\ k\jkj @ iXe n`k_ <ki\# fecp Fgk`fe < g\i]fid\[ hl`k\ gfficp% N\ ]fle[ k_Xk )- g\iZ\ek f] k_\ g\fgc\ k\jk\[ d`jkXb\ecp Zc`Zb\[

147 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k_\ :XeZ\c Ylkkfe n_\e Xkk\dgkè^ k_\ kXjb n`k_ k_`j [\j`ê# n_`c\ dXep dfi\ cè^\i\[ fm\i `k Y\]fi\ i\Xc`qè^ k_Xk k_\p n\i\ XYflk kf dXb\ X d`jkXb\ j\\ =`^li\ -%/ %

FIGURE 6.8 http://www.flickr.com/photos/rosenfeldmedia/2367267446 Eye fixations from a single participant when primary and secondary were separated. Image provided by Etre.

G\fgc\Ëj ÔoXk`fej n\i\ cfe^\jk n_\e ljè^ Fgk`fe =% 8e[# Xj X n_fc\# k_\p n\i\ Xifle[ jò j\Zfe[j jcfn\i n_\e ljè^ Fgk`fe = k_Xe k_\p n\i\ n_\e ljè^ Fgk`fe 9# n_`Z_ `j X Zfej`[\iXYc\ ^Xg n_\e pfl Zfej`[\i k_Xk k_\ gcXZ\d\ek f] k_\ Ylkkfej nXj k_\ fecp k_è^ k_Xk [`]]\i\[ Y\kn\\e k_\ knf% N\ Y\c`\m\ k_Xk k_`j nXj Y\ZXlj\ k_\p \og\Zk\[ k_\ knf Ylkkfej kf Y\ c\]k$Xc`ê\[ `%\%# kf Xgg\Xi [ì\Zkcp Y\cfn k_\ cXjk èglk Ô\c[ fe k_\ gX^\ Xe[ lgfe Ôe[è^ k_Xk k_`j nXjeËk k_\

148 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

ZXj\# k_\p _X[ kf j\XiZ_ Xifle[ kf Ôe[ k_\d j\\ =`^li\ -%0 %

FIGURE 6.9 http://www.flickr.com/photos/rosenfeldmedia/2406455214 Eye fixations from a single participant when primary and secondary actions were centered on the bottom of a form. Image provided by Etre.

8ZZfi[è^ kf k_\ [XkX n\ Zfcc\Zk\[# k_\ dfjk \]]\Zk`m\ [\j`êj f] k_\ jò n\ k\jk\[ Xcc j_Xi\[ X Zfddfe Z_XiXZk\i`jk`Z1 k_\p gi\j\ek\[ k_\ì JlYd`k Xe[ :XeZ\c fgk`fej c\]k$Xc`ê\[ n`k_ k_\ èglk Ô\c[j Xe[ cXY\cj XYfm\ k_\d% K_\j\ Ôe[è^j dXg n\cc kf fli Ôijk ]fid [\j`ê gièZ`gc\1 `ccldèXk\ X Zc\Xi gXk_ kf Zfdgc\k`fe% Pfl j_flc[ Y\ ZfejZ`flj f] n_\i\ pfl gcXZ\ ]fid XZk`fej# jèZ\ gi`dXip XZk`fej [ì\Zkcp Xc`ê\[ n`k_ èglk Ô\c[j k\e[ kf [\Zi\Xj\ Zfdgc\k`fe k`d\j Xe[# Xj n\ befn#

149 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k_\ c\jj k`d\ g\fgc\ _Xm\ kf jg\e[ fe pfli ]fidj# k_\ _Xgg`\i k_\p n`cc Y\% Actions in Progress C\kËj Xjjld\ k_Xk pflËm\ Xejn\i\[ Xcc k_\ hl\jk`fej fe X ]fid Zfii\Zkcp Xe[ j\c\Zk\[ k_\ gi`dXip XZk`fe kf j`ê`]p pflËi\ [fe\% K_\e n_Xk6 @] efk_è^ Z_Xe^\j# g\i_Xgj k_\ j`k\ [`[eËk i\^`jk\i pfli Zc`Zb% @j pfli è]fidXk`fe Y\è^ gifZ\jj\[6 N_\e è [flYk# dfjk g\fgc\ n`cc kip X^Xè% ;\g\e[è^ fe _fn X ]fid `j [\m\cfg\[# k_`j dXp c\X[ kf X [lgc`ZXk\ jlYd`jj`fe% Efn pflËm\ [fe\ n_Xk pfl n\i\ kipè^ kf XZZfdgc`j_ kn`Z\ Fe\ gfk\ek`Xc jfclk`fe `j kf èZcl[\ X nXieè^ k_Xk Xjbj g\fgc\ efk kf Zc`Zb fe X gi`dXip XZk`fe kn`Z\# Xj j\\e è =`^li\ -%('% 9lk k_`j le]Xìcp gcXZ\j k_\ Yli[\e fe k_\ g\ijfe n_f `j Ôccè^ è k_\ ]fid% @kËj Xe Èèj`[\ flkÉ jfclk`fe%

FIGURE 6.10 http://www.flickr.com/photos/rosenfeldmedia/2367266540 Avoid excessive instructions that tell people not to press Submit more than once.

150 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

8 Y\kk\i Xejn\i `j kf i\gcXZ\ k_\ XZk`m\ gi`dXip XZk`fe n`k_ Xe Xe`dXk`fe fi k\ok d\jjX^\ k_Xk c\kj g\fgc\ befn k_\ì jlYd`jj`fe nXj XZZ\gk\[ Xe[ `j è gifî\jj j\\ =`^li\ -%(( % 8ep X[[`k`feXc gifZ\jj k_Xk n`cc e\\[ jfd\ k`d\ kf Zfdgc\k\ ZXe Y\ Zfddle`ZXk\[ è k_\ jXd\ nXp% @e k_\ ]fid ]ifd k_\ 9Xj\ZXdg gifa\Zk dXeX^\d\ek Xggc`ZXk`fe j_fne è =`^li\ -%((# efk fecp `j k_\ gi`dXip XZk`fe Ylkkfe i\gcXZ\[ n`k_ X gifî\jj è[`ZXkfi Xe`dXk`fe# Ylk Xe Xe`dXk\[ `dX^\ Xe[ k\ok è[`ZXk\j k_Xk X Ôc\ `j Y\è^ lgcfX[\[ Xj n\cc% @e Xcc c`b\c`_ff[# k_XkËj n_Xk `j ZXljè^ k_\ [\cXp è jlYd`kkè^ k_\ ]fid% K_\ ZfdYèXk`fe f] Yfk_ gifî\jj è[`ZXkfij dXb\j `k Zc\Xi% =fidj n`k_ Zc\Xicp [\Ôe\[ Xejn\ij Zflc[ \m\e \c\Zk kf [`jXYc\ k_\ gi`dXip XZk`fe lek`c Xcc k_\ hl\jk`fej n`k_è k_\ ]fid _Xm\ Y\\e Xejn\i\[ n`k_ mXc`[ è]fidXk`fe% K_`j XggifXZ_ i\hlì\j X [peXd`Z jpjk\d k_Xk ÈbefnjÉ n_Xk Zfejk`klk\j X mXc`[ i\gcp ]fi \m\ip hl\jk`fe fe

151 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 6.11 top image: http://www.flickr.com/photos/rosenfeldmedia/2367266580 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367266640

Basecamp provides progress indicators for form submission and file uploads using animated images.

152 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k_\ ]fid Xe[ n_\e Xcc k_\ hl\jk`fej _Xm\ Y\\e Xejn\i\[ j\\ =`^li\ -%() % Fecp k_\e `j k_\ gi`dXip XZk`fe dX[\ XZk`m\%

FIGURE 6.12 http://www.flickr.com/photos/rosenfeldmedia/2366430625 Basecamp’s sign-up form disables the Submit button until all inputs have valid answers.

Lec\jj \m\ip hl\jk`fe fe X ]fid dljk Y\ Xejn\i\[# [\k\idèè^ n_\e g\fgc\ Xi\ [fe\ÇXe[ k_\i\Yp XZk`mXkè^ k_\ gi`dXip XZk`feÇZXe Y\ gifYc\dXk`Z% K_\i\]fi\# k_`j d\k_f[ j_flc[ Y\ Xmf`[\[ fe ]fidj k_Xk èZcl[\ Xep fgk`feXc hl\jk`fej% @kËj Xcjf nfik_ efkè^ k_Xk [\jg`k\ Y\è^ [`jXYc\[# k_\ gi`dXip XZk`fe è =`^li\ -%() `j XcnXpj m`j`Yc\% K_`j gifm`[\j X Zc\Xi gXk_ kf Zfdgc\k`fe Y\ZXlj\ g\fgc\ ZXe XcnXpj j\\ k_\ XZk`fe k_Xk n`cc Xccfn k_\d kf Zfdgc\k\ k_\

153 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

]fid% :fekiXjk k_`j XggifXZ_ n`k_ k_\ \oXdgc\ è =`^li\ -%(*# n_`Z_ fecp j_fnj k_\ gi`dXip XZk`fe n_\e k_\ ]fid `j Zfdgc\k\[% K_`j dXp c\Xm\ g\fgc\ jZiXkZ_è^ k_\ì _\X[j Xj k_\p kip kf [\k\idè\ _fn kf Zfdgc\k\ k_\ ]fid%

FIGURE 6.13 left image: right image:

http://www.flickr.com/photos/rosenfeldmedia/2366430675 http://www.flickr.com/photos/rosenfeldmedia/2367266804

The ibahn activation form doesnâ&#x20AC;&#x2122;t display a primary action until someone selects the radio button. Not only does this form obscure a path to completion by hiding the primary action, but it also incorrectly uses radio buttons, which should never appear alone (see Chapter 5).

154 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Agree and Submit DXep i\^`jkiXk`fe ]fidj i\hlì\ g\fgc\ efk fecp kf Xejn\i X j\i`\j f] hl\jk`fej XYflk k_\dj\cm\j eXd\# \dX`c# gXjjnfi[# \kZ% # Ylk Xcjf kf Xî\\ kf X j\k f] Zfe[`k`fej ^fm\ieè^ k_\ì g\e[è^ d\dY\ij_`g% Dfjk f] k_\j\ ]fidj _Xm\ X c\^Xc i\hlì\d\ek kf \ejli\ k_Xk e\n d\dY\ij \ogc`Z`kcp Xî\\ kf k_\j\ Èk\idj f] j\im`Z\%É 8 Zfddfe XggifXZ_ kf jfcmè^ k_`j `jjl\ `j j\gXiXkè^ k_\ Xî\\d\ek Xe[ k_\ gi`dXip XZk`fe f] jlYd`kkè^ k_\ ]fid èkf knf j\gXiXk\ \c\d\ekj1 X Z_\ZbYfo ]fi Xî\\d\ek Xe[ X Ylkkfe ]fi Zfdgc\k`fe% Fe\ gfk\ek`Xc gifYc\d n`k_ k_`j k\Z_e`hl\ `j k_Xk g\fgc\ dXp jb`g fm\i k_\ k\idj f] j\im`Z\ Z_\ZbYfo# Xjjldè^ `k `j Xe fgk$è ]fi dXib\kè^ dXk\i`Xcj# e\njc\kk\ij# fi jgXd% K_\e n_\e k_\p kip kf Zfdgc\k\ k_\ ]fid# k_\p n`cc i\Z\`m\ Xe \iifi k\ccè^ k_\d k_\p dljk Xî\\ kf k_\ j`k\Ëj k\idj f] j\im`Z\% K_`j gifZ\jj dXp ZXlj\ ]iljkiXk`fe fi# \m\e nfij\# XYXe[fed\ek%

155 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

@k [f\jeËk _\cg k_Xk è dXep j`klXk`fej# k_\ dXib\kè^ fgk$èj Xi\ c`jk\[ i`^_k e\ok kf k_\ k\idj f] j\im`Z\ Xî\\d\ek j\\ =`^li\ -%(+ % ÈJ\e[ d\ dXib\kè^ dXk\i`XcjÉ `j f]k\e [\]Xlck Z_\Zb\[# Xe[ dfjk g\fgc\ nXek kf leZ_\Zb `k% K\idj f] J\im`Z\# [ì\Zkcp Y\cfn# `j k_\ \oXZk fggfj`k\% @k `j [\]Xlck leZ_\Zb\[# Xe[ dfjk g\fgc\ nXek kf Z_\Zb `k jf k_\p ZXe Zfdgc\k\ k_\ ]fid%

FIGURE 6.14 http://www.flickr.com/photos/rosenfeldmedia/2367266830 Common options for marketing materials and terms of service agreements.

156 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

ClZb`cp# k_\i\ Xi\ fggfikle`k`\j kf gifm`[\ X Zc\Xe\i gXk_ kf Zfdgc\k`fe% @ejk\X[ f] X j\gXiXk\ hl\jk`fe kf X[[i\jj k_\ k\idj f] j\im`Z\# k_\ gi`dXip XZk`fe ZXe Zfm\i Yfk_ k_\ k\idj f] j\im`Z\ X^i\\d\ek Xe[ ]fid Zfdgc\k`fe j\\ =`^li\j -%(, Xe[ -%(- %

FIGURES 6.15 & 6.16 top image: http://www.flickr.com/photos/rosenfeldmedia/2366430793 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367266892

Two approaches for combining terms of service agreement and form completion into a single action.

;\g\e[è^ fe k_\ c\^Xc i\hlì\d\ekj f] X j`k\# k_\ k\idj f] j\im`Z\ ZXe Y\ ^fm\ie\[ Yp X gi`dXip ZXcc kf XZk`fe k_Xk \ogc`Z`kcp èZcl[\j X c\^Xc Xî\\d\ek# ]fi \oXdgc\# X Ylkkfe cXY\c\[ È@ Xî\\ Xe[ dfm\ ]finXi[É fi fe\ k_Xk è]\ij `k k_ifl^_ k\ok gi\Z\[è^ k_\ gi`dXip XZk`fe ÈYp Zc`Zbè^ i\^`jk\i Y\cfn# @ Xî\\%É

157 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

K_\ X[mXekX^\ f] Yfk_ k_\j\ fgk`fej `j k_Xk k_\p i\hlì\ fe\ c\jj \ogc`Z`k hl\jk`fe ]fi g\fgc\ kf Xejn\i% ?fn\m\i# k_\ j\Zfe[ fgk`fe _Xj k_\ X[[\[ X[mXekX^\ f] efk Zfdgc`ZXkè^ k_\ gi`dXip ZXcc kf XZk`fe% :fej`[\i k_\ [`]]\i\eZ\ Y\kn\\e È9lp EfnÉ Xe[ È8î\\ 9lp Efn%É Fe\ `j Zc\Xicp dfi\ [ì\Zkcp Xc`ê\[ n`k_ g\fgc\Ëj ^fXcj f] Ylpè^ X gif[lZk k_Xe k_\ fk_\i% Best Practices 8mf`[ j\Zfe[Xip XZk`fej fe ]fidj n_\e\m\i gfjj`Yc\% Gifm`[\ g\fgc\ n`k_ X jè^c\ gXk_ kf Zfdgc\k`fe% @] j\Zfe[Xip XZk`fej Xi\ i\hlì\[# \ejli\ k_Xk k_\i\ `j X Zc\Xi m`jlXc [`jkèZk`fe Y\kn\\e k_\ gi`dXip Xe[ j\Zfe[Xip XZk`fej% N_\e pfl Xi\ [`jki`Ylkè^ k_\ hl\jk`fej è X ]fid XZifjj dlck`gc\ N\Y gX^\j# gi`dXip XZk`fej dfm\ g\fgc\ Zcfj\i kf Zfdgc\k`fe Xe[ j\Zfe[Xip XZk`fej Xccfn k_\d kf ^f YXZb%

158 Chapter 6 Actions

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices (continued) 8c`ê gi`dXip XZk`fej n`k_ èglk Ô\c[j kf Zi\Xk\ X Zc\Xi gXk_ kf Zfdgc\k`fe% @] pfl [f Z_ffj\ kf èZcl[\ gfk\ek`Xccp [\jkilZk`m\ j\Zfe[Xip XZk`fej c`b\ I\j\k fi :c\Xi è pfli ]fid# gifm`[\ g\fgc\ n`k_ Xe \Xjp nXp kf le[f k_\d% :c\Xicp Zfddle`ZXk\ n_\e X ]fid `j Y\è^ gifZ\jj\[ kf Xmf`[ [lgc`ZXk\ jlYd`jj`fej% ;feËk i\cp fe _\cg k\ok li^è^ g\fgc\ efk kf _`k X gi`dXip XZk`fe kn`Z\2 èjk\X[# [`jXYc\ k_\ gi`dXip XZk`fe Ylkkfe Xe[ gi\m\ek k_\d ]ifd [fè^ jf% :fej`[\i fggfikle`k`\j kf jki\Xdcè\ c\^Xc i\hlì\d\ekj Yp ZfdYèè^ k\idj f] j\im`Z\ Xî\\d\ekj n`k_ gi`dXip XZk`fej%

159 Chapter 6 Actions

CHAPTER 7

Help Text When to Help Automatic Inline Help User-Activated Inline Help User-Activated Section Help Secure Transactions Best Practices

161 166 173 178 182 184

160 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

ck_fl^_ k_\ nXp n\ g_iXj\ cXY\cj Xe[ [`jgcXp èglk Ô\c[j ZXe gifm`[\ lj\]lc Zcl\j fe _fn kf gifm`[\ Xejn\ij# k_\j\ \c\d\ekj Xcfe\ Xi\ jfd\k`d\j efk \efl^_% @e k_\j\ ZXj\j# `kËj Zfddfe giXZk`Z\ kf i\jfik kf Èk\ccè^É g\fgc\ _fn k_\p j_flc[ Xejn\i X hl\jk`fe Yp èZcl[è^ _\cg k\ok e\ok kf X ]fidËj cXY\cj fi èglk Ô\c[j% ?\cg k\ok `j YXj`ZXccp aljk X j\k f] d\jjX^\j k_Xk _\cg g\fgc\ Zfdgc\k\ ]fidj jlZZ\jj]lccp% K_`j d\Xej k_Xk _\cg d\jjX^\j Xi\ jkilZkliXccp j`d`cXi kf k_\ \iifi Xe[ jlZZ\jj d\jjX^\j n\Ëcc cffb Xk è :_Xgk\i / Xe[# Xj X i\jlck# j_Xi\ dXep Y\jk giXZk`Z\j% When to Help K\dgkè^ Xj `k dXp Y\ j`dgcp kf jg\cc flk _fn g\fgc\ j_flc[ Ôcc è Xe èglk Ô\c[# _\cg k\ok `jeËk k_\ _fcp îX`c f] N\Y ]fid Zfdgc\k`fe% =fi jkXik\ij# `] \oZ\jj`m\ èjkilZk`fej Xi\ i\hlì\[ kf \ogcXè _fn kf Zfdgc\k\ pfli ]fid# k_\e Z_XeZ\j Xi\ k_\ hl\jk`fej pfl Xi\ Xjbè^ Xi\ \`k_\i g_iXj\[ gfficp# kff Zfdgc\o# fi aljk

161 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

gcXè lee\Z\jjXip% <oZ\jj`m\ _\cg k\ok dXp Y\ Xe è[`ZXkfi k_Xk `kĂ&#x2039;j k`d\ kf ^f YXZb kf k_\ [iXnè^ YfXi[ Xe[ dXb\ jli\ k_\ hl\jk`fej pfl Xi\ Xjbè^ g\fgc\ Xi\ k_\ i`^_k fe\j j\\ =`^li\ .%( %

FIGURE 7.1 http://www.flickr.com/photos/rosenfeldmedia/2366431987 On this eBay form, excessive help text makes a single choice seem overly complex. There are over 10 different ways to get help picking one of three radio buttons.

?\cg k\ok ZXe Xcjf Y\ gifYc\dXk`Z Y\ZXlj\ g\fgc\ k\e[ efk kf i\X[ èjkilZk`fej gi\j\ek\[ fejZi\\e% I\cpè^ fe X j\k f] èjkilZk`fej kf

162 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

\ogcXè pfli ]fid n`cc c\X[ kf kiflYc\ n_\e k_fj\ èjkilZk`fej Xi\ YpgXjj\[ Yp dfjk g\fgc\ j\\ =`^li\ .%) % @e ]XZk# \p\$kiXZbè^ i\j\XiZ_ j_fnj k_Xk dXep g\fgc\ aldg [ì\Zkcp kf k_\ Ôijk èglk Ô\c[ n_\e gi\j\ek\[ n`k_ X ]fid% @k j\\dj kf Y\ X eXkliXc k\e[\eZp kf nXek kf jkXik Ôccè^ k_è^j è% N\ aljk nXek kf ^\k k_`j ]fid [fe\ Xe[ dfm\ fe

FIGURE 7.2 http://www.flickr.com/photos/rosenfeldmedia/2366432069 The three paragraphs of instructional text on this Fairmont Hotels page are likely to get passed over by most people.

163 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

P\k k_\i\ Xi\ ZXj\j n_\e èjkilZk`feXc k\ok `j Xggifgi`Xk\% @e gXik`ZlcXi# ZfeZ`j\ Y`kj f] _\cg k\ok Xi\ dfjk lj\]lc è k_\ ]fccfnè^ ZìZldjkXeZ\j1 N_\e ]fidj Xjb ]fi le]Xd`c`Xi [XkX1 N_XkËj X G8: Zf[\6 N_\e g\fgc\ hl\jk`fe n_p k_\p Xi\ Y\è^ Xjb\[ ]fi jg\Z`ÔZ [XkX1 N_p [f pfl e\\[ kf befn dp [Xk\ f] Yìk_6 N_\e g\fgc\ dXp Y\ ZfeZ\ie\[ XYflk k_\ j\Zli`kp fi gi`mXZp f] k_\ì [XkX1 @j dp Zi\[`k ZXi[ eldY\i jX]\ _\i\6 N_\e k_\i\ Xi\ i\Zfdd\e[\[ nXpj f] gifm`[è^ [XkX1 J\gXiXk\ pfli kX^j n`k_ ZfddXj# gc\Xj\% N_\e Z\ikXè [XkX Ô\c[j Xi\ fgk`feXc fi i\hlì\[ n_\e k_\ Ylcb f] k_\ ]fid `j efk% @e k_\j\ ZXj\j# X Zc\Xi Xe[ ZfeZ`j\ Y`k f] _\cg k\ok X[aXZ\ek kf Xe èglk Ô\c[ k\e[j kf [f k_\

164 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

ki`Zb% @e k_\ m`[\f\^^ j`ê$lg ]fid è =`^li\ .%*# k_\ j`k\ i\Zfdd\e[j k_Xk pfli gXjjnfi[ Y\ ]fli Z_XiXZk\ij fi dfi\ Xe[ k\ccj pfl k_Xk `] pfl Xi\ ZfeZ\ie\[ XYflk gifm`[è^ pfli \dX`c X[[i\jj# [feËk nfiip Ç`k [f\jeËk jgXd% G\i`f[% @e Yfk_ ZXj\j# k_\ dè`dld Xdflek f] _\cg k\ok e\\[\[ kf ^\k k_\ d\jjX^\ XZifjj nXj lj\[% @] fecp Xcc fli ]fidj n\i\ jf j`dgc\%

FIGURE 7.3 http://www.flickr.com/photos/rosenfeldmedia/2367268274 On videoegg’s sign-up form, the minimum amount of help text required is used to help people answer questions.

@e i\Xc`kp# k_\i\ Xi\ dXep ]fidj k_Xk i\hlì\ g\fgc\ kf gifm`[\ cfkj f] fYjZli\ [XkX è fYjZli\ ]fidXkj# Xj n\cc Xj ]fidj n_\i\ g\fgc\ Xi\ c`b\cp kf hl\jk`fe n_Xk k_\p Xi\ Y\è^ Xjb\[ 165 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Xe[ n_p% @e jfd\ f] k_\j\ ZXj\j# k_\ Xdflek f] _\cg k\ok e\Z\jjXip ]fi \XZ_ èglk ﾃ能c[ Zflc[ hl`Zbcp fm\in_\cd X ]fid# dXbè^ `k Xgg\Xi èk`d`[Xkè^ fi Zfdgc\o% =fi k_\j\ ]fidj# `k dXp dXb\ j\ej\ kf Zfej`[\i ljè^ X [peXd`Z _\cg jpjk\d% ;peXd`Z _\cg jpjk\dj ZXe Y\ XlkfdXk`ZXccp ki`^^\i\[ fi XZZ\jj\[ k_ifl^_ \ogc`Z`k lj\i XZk`fe% 8lkfdXk`Z ki`^^\i\[ jpjk\dj i\m\Xc Xggc`ZXYc\ _\cg k\ok n_\e g\fgc\ eXkliXccp \e^X^\ n`k_ X ]fid% 8Zk`fej c`b\ dfmè^ Y\kn\\e èglk ﾃ能c[j fi îflgj f] èglk ﾃ能c[j i\jlck è k_\ [`jgcXp f] lj\]lc _\cg k\ok% Lj\i$ XZk`mXk\[ _\cg jpjk\dj# fe k_\ fk_\i _Xe[# i\hlì\ g\fgc\ kf kXb\ XZk`fe è fi[\i kf i\m\Xc i\c\mXek _\cg k\ok n_\e k_\p ]\\c k_\p e\\[ `k% Automatic Inline Help 8lkfdXk`Z ècè\ _\cg jpjk\dj i\m\Xc k_\dj\cm\j n_\e Xe[ n_\i\ k_\ è]fidXk`fe k_\p ZfekXè `j dfjk Xggc`ZXYc\% =fi \oXdgc\# n_\e X g\ijfe Zc`Zbj fi kXYj kf Xe èglk ﾃ能c[# k_\ i\c\mXek _\cg k\ok Xgg\Xij Y\j`[\ fi Y\cfn

166 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k_\ èglk% K_\ Nl]ff \oXdgc\ è =`^li\ .%+ j_fnj k_`j Y\_Xm`fi è XZk`fe%

FIGURE 7.4 http://www.flickr.com/photos/rosenfeldmedia/2367268378 On Wufoo, help text is automatically shown as people engage with input fields.

@e fi[\i ]fi _\cg k\ok kf Xgg\Xi è X gi\[`ZkXYc\ cfZXk`fe# k_`j XggifXZ_ i\hlì\j Xe Xi\X f] k_\ N\Y gX^\ Y\ [\[`ZXk\[ kf [peXd`Z _\cg k\ok% @e k_\ Nl]ff \oXdgc\# k_\ i`^_k$_Xe[ j`[\ f] k_\ ]fid j\im\j k_`j e\\[% K_\ X[mXekX^\ f] k_`j d\k_f[ `j k_Xk _\cg k\ok XcnXpj Xgg\Xij kf k_\ i`^_k f] èglk ﾃ能c[j% K_\ [`jX[mXekX^\ `j k_Xk `k dXp Y\ [`jXjjfZ`Xk\[ ]ifd èglk ﾃ能c[j Xcc k_\ nXp fe k_\ c\]k j`[\ f] k_\ ]fid%

167 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

K_\ XlkfdXk`Z ècè\ _\cg jpjk\d lj\[ Yp =fid 8jj\dYcp è =`^li\ .%, [f\j efk i\hlì\ X [\[`ZXk\[ gfik`fe f] k_\ jZi\\e ]fi [`jgcXpè^ _\cg k\ok% @ejk\X[# `k [`jgcXpj _\cg k\ok [ì\Zkcp Y\cfn k_\ èglk Ô\c[ kf n_`Z_ `k Xggc`\j% K_\ X[mXekX^\ _\i\ `j k_Xk _\cg k\ok `j i`^_k e\ok kf k_\ hl\jk`fe Y\è^ Xejn\i\[# jf k_\i\Ëj c`kkc\ Z_XeZ\ f] [`jXjjfZ`Xk`fe% K_\ [`jX[mXekX^\# _fn\m\i# `j k_Xk X[[`k`feXc èglk Ô\c[j dXp Y\ Zfm\i\[ lg Yp _\cg k\ok [`Xcf^j# Xj j\\e è =`^li\ .%,%

FIGURE 7.5 http://www.flickr.com/photos/rosenfeldmedia/2366432243 Here is an alternate presentation style for inline help text on Form Assembly.

@kËj `dgfikXek kf Y\ Xj jg\Z`ÔZ Xj gfjj`Yc\ n`k_ _\cg k\ok# n_`Z_ ljlXccp d\Xej le`hl\ _\cg k\ok ]fi \XZ_ è[`m`[lXc èglk Ô\c[% ?fn\m\i# jfd\k`d\j k_\ dfjk jg\Z`ÔZ n\ ZXe ^\k `j X j\k f] i\cXk\[ èglk Ô\c[j%

168 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

N_\e _\cg k\ok `j dfi\ Xggc`ZXYc\ kf X j\k f] i\cXk\[ èglk ﾃ能c[j k_Xe Xe è[`m`[lXc èglk# XlkfdXk`Z ècè\ _\cg ZXe Xcjf Y\ lj\]lc% =fi \oXdgc\# k_\ JeXgKXo N\Y Xggc`ZXk`fe è =`^li\ .%- XlkfdXk`ZXccp _`^_c`^_kj i\c\mXek è]fidXk`fe ]fi \XZ_ j\k f] è]fidXk`fe1 `[\ek`kp# jgflj\# X[[i\jj# Xe[ jf fe%

FIGURE 7.6 http://www.flickr.com/photos/rosenfeldmedia/2367268468 SnapTax automatically reveals help text for related groups of input fields.

@k `j nfik_n_`c\ kf efk\ k_Xk Xcc f] k_\j\ \oXdgc\j dXb\ lj\ f] X jkife^ m`jlXc \c\d\ek kf Zfddle`ZXk\ k_\ i\cXk`fej_`g Y\kn\\e

169 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

èglk Ô\c[j Xe[ k_\ì XjjfZ`Xk\[ _\cg k\ok% @e k_\ Nl]ff \oXdgc\ è =`^li\ .%+# pflËcc j\\ knf Xc`ê\[ i\ZkXe^c\j% @e k_\ =fid 8jj\dYcp \oXdgc\ è =`^li\ .%,# pflËcc efk`Z\ X Yfc[ p\ccfn Zfcfi Xe[ Xiifn% @e k_\ JeXgKXo \oXdgc\ è =`^li\ .%-# k_\i\ `j X Zfddfe YXZbîfle[ Zfcfi% Fe\ gfk\ek`Xc [iXnYXZb f] k_`j kpg\ f] XlkfdXk\[ _\cg jpjk\d `j k_Xk g\fgc\ Xi\ lec`b\cp kf befn Xep _\cg k\ok `j XmX`cXYc\ lek`c k_\p Y\^è kf Ôcc flk k_\ ]fid% 8j X i\jlck# g\fgc\ n_f ]\\c k_\p dXp e\\[ _\cg kf Zfdgc\k\ k_\ ]fid d`^_k ^\k [`jZfliX^\[ Xe[ efk \m\e kip% 8 gfjj`Yc\ nXp kf X[[i\jj k_`j j_fikZfdè^ `j n`k_ _\cg k\ok n`k_è Xe èglk Ô\c[% K_`j d\k_f[ `j \jj\ek`Xccp k_\ fggfj`k\ f] XlkfdXk`Z ècè\ \ogfjli\ Y\ZXlj\ k_\ _\cg k\ok `j m`j`Yc\ Y\]fi\ jfd\fe\ XZZ\jj\j Xe èglk Ô\c[ Ylk ef cfe^\i m`j`Yc\ X]k\i% 9\ZXlj\ _\cg k\ok `j m`j`Yc\ i`^_k XnXp# g\fgc\ befn _\cg `j XmX`cXYc\ n_\e k_\p Ôijk \eZflek\i k_\ ]fid%

170 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

?fn\m\i# k_\ fecp kpg\ f] _\cg k\ok i\Xccp jl`k\[ ]fi [`jgcXp èj`[\ Xe èglk Ô\c[ `j _\cg k_Xk flkcè\j i\Zfdd\e[\[ nXpj f] gifm`[è^ Xejn\ij% ?\cg k\ok k_Xk \ogcXèj n_Xk `j Y\è^ Xjb\[# n_p g\fgc\ Xi\ Y\è^ Xjb\[# Xe[ n_\k_\i fi efk hl\jk`fej Xi\ fgk`feXc [f\j efk Y\cfe^ èj`[\ Xe èglk Ô\c[% =`^li\ .%. `ccljkiXk\j k_`j gièZ`gc\% ?fn k_\ GfjkXc :f[\ fe k_`j ]fid j_flc[ Y\ gifm`[\[ `j èZcl[\[ n`k_è k_\ èglk Ô\c[% N_p `k j_flc[ Y\ gifm`[\[ `j \ogcXè\[ n`k_ _\cg k\ok X[aXZ\ek kf k_\ èglk Ô\c[%

FIGURE 7.7 http://www.flickr.com/photos/rosenfeldmedia/2367268488 Help text within an input field on LinkedIn.

8cjf# k_\ jXd\ ZXm\Xkj k_Xk Xggcp kf cXY\cj n`k_è èglk Ô\c[j [`jZljj\[ è :_Xgk\i + Xcjf Xggcp kf _\cg k\ok n`k_è èglk Ô\c[j1 DXb\ jli\ k_\ _\cg k\ok ^f\j XnXp n_\e g\fgc\ Xi\ gifm`[è^ Xejn\ij jf `k [f\j efk Y\Zfd\ gXik f] k_\ì Xejn\ij% 171 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

9\ XnXi\ k_Xk k_\ _\cg k\ok `j ^fe\ Xj jffe Xj g\fgc\ jkXik gifm`[è^ Xe Xejn\i jf k_\p `dd\[`Xk\cp cfj\ Xep Xjj`jkXeZ\ k_\ _\cg k\ok gifm`[\[% 9\ nXip f] ljè^ k_`j d\k_f[ ]fi Zfdgc\o èglkj k_Xk Y\e\Ôk ]ifd XcnXpj m`j`Yc\ _\cg% DXb\ jli\ k_Xk g\fgc\ ZXe k\cc k_\ [`]]\i\eZ\ Y\kn\\e Xejn\ij è èglk Ô\c[j Xe[ _\cg k\ok n`k_è èglk Ô\c[j% @e k_\ Cèb\[@e \oXdgc\ è =`^li\ .%.# _\cg k\ok `j îXp Xe[ èZcl[\j k_\ gi\Ôo È\^1É 9\ZXlj\ k_\p j_fn ef _\cg k\ok lg ]ifek# XlkfdXk`Z ècè\ _\cg jpjk\dj k\e[ kf nfib Y\jk ]fi ]fidj k_Xk Xjb hl\jk`fej g\fgc\ Xi\ c`b\cp kf _Xm\ Xejn\ij ]fi Ylk dXp Y\ Xggi\_\ej`m\ fi lejli\ XYflk _fn kf gifm`[\ k_\d% N_\e jg\Z`ÔZ _\cg k\ok e\\[j kf Y\ gifm`[\[ ]fi \XZ_ èglk Ô\c[# Zfej`[\i ljè^ X d\k_f[ k_Xk [`jgcXpj _\cg X[aXZ\ek kf k_\ Ô\c[ kf n_`Z_ `k Xggc`\j% N_\e _\cg k\ok `j jg\Z`ÔZ kf X îflg f] èglkj# Zfej`[\i ljè^ X d\k_f[ k_Xk Zfej`jk\ekcp [`jgcXpj _\cg k\ok è X gi\[`ZkXYc\ cfZXk`fe% 172 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

User-Activated Inline Help 8efk_\i nXp kf c\k g\fgc\ befn _\cg `j XmX`cXYc\ lg ]ifek `j n`k_ X lj\i$XZk`mXk\[ ècè\ _\cg jpjk\d% Lj\i$XZk`mXk\[ ècè\ _\cg c\kj g\fgc\ \ogc`Z`kcp XZZ\jj _\cg k\ok n_\e k_\p e\\[ `k% K_`j d\k_f[ ljlXccp dXb\j Zfej`jk\ek lj\ f] Xe `Zfe# Ylkkfe# `dX^\# fi k\ok cèb kf c\k g\fgc\ befn _\cg `j XmX`cXYc\% 8 g\ijfe ZXe \`k_\i Zc`Zb fi gfèk kf k_\j\ ki`^^\ij kf i\m\Xc i\c\mXek _\cg k\ok Xj e\\[\[% =`^li\ .%/ j_fnj Xe \oXdgc\ f] lj\i$XZk`mXk\[ ècè\ _\cg ]ifd Al`Zp Jkl[`fj% N_\e X g\ijfe Zc`Zbj fe k_\ hl\jk`fe dXib `Zfe# Xe \ogcXeXk`fe f] k_\ hl\jk`fe Y\è^ Xjb\[ è k_`j ZXj\# k_\ @D<@ :f[\ `j i\m\Xc\[ [ì\Zkcp Y\cfn k_\ èglk Ô\c[% 8[[è^ _\cg k\ok kf X ]fid è k_`j dXee\i# _fn\m\i# ZXe ZXlj\ Zfek\ek Y\cfn k_\ èj\ik\[ _\cg k\ok kf aldg ]lik_\i [fne k_\ N\Y gX^\% Kff dlZ_ j_`]kè^ f] Zfek\ek ZXe c\Xm\ g\fgc\ [`jfi`\ek\[ Xj k_\ ]fid k_\p Xi\ Ôccè^ flk Zfekèl\j kf dfm\ lg Xe[ [fne%

173 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 7.8 top image: http://www.flickr.com/photos/rosenfeldmedia/2367268550 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367268502

Juicy Studios’ user-activated in-line help system inserts help text within a form pushing everything down the page. This type of page “jumping” may disorient people as they complete a form.

8efk_\i [iXnYXZb kf k_\ Al`Zp Jkl[`fj `dgc\d\ekXk`fe `j k_\ gcXZ\d\ek f] k_\ _\cg `Zfe e\ok kf k_\ èglk Ô\c[# iXk_\i k_Xe e\ok kf k_\ cXY\c% 8j n\ jXn è :_Xgk\i , n_\e [`jZljjè^ i\hlì\[ èglk Ô\c[ è[`ZXkfij# 174 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

XjjfZ`Xkè^ jpdYfcj n`k_ cXY\cj Xccfnj g\fgc\ kf jZXe ]fidj dfi\ \Xj`cp ]fi è]fidXk`fe k_\p e\\[% K_\ N\ccj =Xi^f \oXdgc\ è =`^li\ .%0 X[[i\jj\j k_\j\ knf `jjl\j Yp dXbè^ k_\ cXY\cj k_\dj\cm\j k_\ ki`^^\ij ]fi _\cg k\ok è[`ZXk\[ Yp Ycl\ Zfcfi Xe[ le[\icè\j Xe[ jli]XZè^ _\cg k\ok è X jdXcc nè[fn X[aXZ\ek kf k_\ cèb k_Xk ki`^^\i\[ `k% N_\e k_\ _\cg k\ok `j gcXZ\[ fe kfg f]# èjk\X[ f] èj`[\ k_\ ]fid# k_\ \]]\Zkj f] gX^\ aldgè^ Xi\ Xmf`[\[%

FIGURE 7.9 http://www.flickr.com/photos/rosenfeldmedia/2367268622 Wells Fargo uses a small window to reveal help text when people click on each input label.

175 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

?fn\m\i# k_\ jXd\ ZXm\Xkj ]fi XlkfdXk`Z ècè\ _\cg [`Xcf^j j\\e è =`^li\ .%, Xggcp _\i\ Xj k_\ _\cg k\ok ZXe Zfm\i lg fk_\i cXY\cj fi èglk Ô\c[j n_\e i\m\Xc\[# Xj j_fne è =`^li\ .%0% Lk`c`qè^ X ifccfm\i ki`^^\i kf \ogfj\ _\cg k\ok =`^li\ .%(' Xccfnj lj kf jli]XZ\ _\cg Zfek\ek k\dgfiXi`cp% 9\ZXlj\ ifccfm\i èk\iXZk`fej i\hlì\ g\fgc\ kf b\\g k_\ì gfèk\ij ZfekèlXccp gfj`k`fe\[ fe X ki`^^\iËj _fk jgfk kf b\\g Zfek\ek m`j`Yc\# k_\i\ Xi\ ef gX^\ aldgè^ \]]\Zkj# Xe[ n_\e g\fgc\ dfm\ k_\ì gfèk\i f]] k_\ _fk jgfk# k_\ _\cg k\ok [`jXgg\Xij%

FIGURE 7.10 http://www.flickr.com/photos/rosenfeldmedia/2366431361 Help text accessed with a mouse rollover can obscure input fields as seen in this sample form QLC.

K_\ [`jX[mXekX^\ f] k_`j d\k_f[ `j k_Xk _\cg Zfek\ek ZXe fecp Y\ j\\e n_\e k_\ gf`ek\i `j [\c`Y\iXk\cp gfj`k`fe\[ fe X ki`^^\iËj _fk jgfk% 176 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

<ok\e[è^ k_\ j`q\ f] k_\ ifccfm\iËj XZk`mXk`fe Xi\X `j i\Zfdd\e[\[ kf dXb\ `k \Xj`\i ]fi g\fgc\ kf ki`^^\i k_\ _\cg k\ok [`jgcXp% 8ep k`d\ pflËi\ j_fnè^ X[[`k`feXc è]fidXk`fe n_\e g\fgc\ ifcc fm\i X _fk jgfk# pfl dXp nXek kf Zfej`[\i X[[è^ X [\cXp f] XYflk ,'' d`cc`j\Zfe[j kf dXb\ jli\ g\fgc\ i\Xccp nXek\[ k_\ _\cg Xe[ [`[eËk XZZ`[\ekXccp dflj\ fm\i k_\ ki`^^\i% 8 hl\jk`fe dXib `j k_\ dfjk Zfddfe jpdYfc ]fi Xe `Zfe k_Xk [`jgcXpj _\cg Zfek\ek# Ylk k_\i\ Xi\ fk_\i jpdYfcj pfl Zflc[ lj\ j\\ =`^li\ .%(( % I\^Xi[c\jj f] n_\k_\i pfl lj\ Xe `Zfe# Ylkkfe# k\ok# fi X ZfdYèXk`fe k_\i\f] kf è[`ZXk\ gfèkj Xk n_`Z_ g\fgc\ ZXe XZZ\jj _\cg k\ok# `kËj ^\e\iXccp X ^ff[ `[\X kf èZcl[\ jfd\ bè[ f] m`jlXc Zl\ k_Xk è[`ZXk\j jlZ_ \c\d\ekj Xi\ XZk`feXYc\Ç]fi \oXdgc\# X *; Y\m\c fi le[\icèè^ Y\e\Xk_ k\ok% @kËj Xcjf X ^ff[ `[\X kf gcXZ\ k_\j\ XZZ\jj gfèkj e\ok kf cXY\cj iXk_\i k_Xe èglk Ô\c[j ]fi i\Xjfej d\ek`fe\[ \Xic`\i% =fidj k_Xk Xjb Zfdgc\o hl\jk`fej Xe[ k\e[ kf ^\k i\lj\[ Yp k_\ jXd\ g\fgc\ Xi\ ^ff[ 177 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 7.11 http://www.flickr.com/photos/rosenfeldmedia/2366431391 Though many symbols have been used to represent help, the question mark icon continues to be the most recognizable.

ZXe[`[Xk\j ]fi lj\i$XZk`mXk\[ ècè\ _\cg% K_\j\ jpjk\dj Xccfn Ôijk$k`d\ lj\ij kf XZZ\jj Xcc k_\ _\cg k_\p e\\[# Xe[ X[mXeZ\[ lj\ij kf fecp ki`^^\i k_\ ]\n Y`kj f] _\cg k_\p i\hlì\ kf af^ k_\ì d\dfip fi Xejn\i X hl`Zb hl\jk`fe% 9\ZXlj\ f] gX^\ aldgè^ Xe[ ifccfm\i èk\iXZk`fe `jjl\j# @ k\e[ kf ]Xmfi lj\i$ XZk`mXk\[ ècè\ _\cg jpjk\dj k_Xk jli]XZ\ _\cg k\ok fe kfg f] k_\ ]fid Xe[ X[aXZ\ek kf k_\ cXY\c Xe[ èglk Ô\c[ kf n_`Z_ k_\p Xggcp% User-Activated Section Help Lj\i$XZk`mXk\[ _\cg k\ok ZXe Xcjf Y\ [`jgcXp\[ è X Zfej`jk\ek cfZXk`fe fe X ]fid# èjk\X[ f] Y\è^ j_fne X[aXZ\ek kf k_\ èglk Ô\c[j n_\i\ `k Xggc`\j% DXbè^ lj\ f] X Zfej`jk\ek Xi\X n_\i\ _\cg k\ok `j [`jgcXp\[ ZXe gifm`[\ X cXi^\i [`jgcXp jli]XZ\ ]fi \ok\ej`m\ _\cg k\ok Xe[ Zfek\ek jlZ_ Xj îXg_`Zj fi Z_Xikj Xe[ 178 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

gifm`[\ g\fgc\ n`k_ X g\idXe\ek cfZXk`fe n_\i\ _\cg k\ok ZXe Y\ ]fle[% N_`c\ dXep j`k\j lj\ X e\n N\Y Yifnj\i nè[fn kf [`jgcXp cXi^\ Xdflekj f] lj\i$ XZk`mXk\[ _\cg k\ok =`^li\ .%() # gfg$lg YcfZb\ij Xe[ gffi nè[fnè^ Zfekifcj jfd\k`d\j dXb\ k_`j d\k_f[ c\jj k_Xe `[\Xc% 8e Xck\ieXk`m\ @Ă&#x2039;m\ j\\e nfib n\cc è k\jkè^ `j kf lk`c`q\ X Zfej`jk\ek Xi\X X[aXZ\ek kf k_\

FIGURE 7.12 http://www.flickr.com/photos/rosenfeldmedia/2366431549 Charles Schwab uses a new Web browser window to show large amounts of help text, including this chart.

179 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

]fid ]fi Zfek\oklXc ?\cg% M`qlËj _\cg j\Zk`fe j_fne è =`^li\ .%(* [f\j aljk k_Xk% 8 Zfej`jk\ek Zfclde kf k_\ i`^_k f] k_\ ]fid [`jgcXpj i\c\mXek _\cg k\ok Xj k_\ ]fid `j Ôcc\[ è% :fej`[\iè^ k_`j `j M`qlËj i\^`jkiXk`fe ]fid# k_fl^_# k_`j XggifXZ_ d`^_k Y\ fm\ib`cc# Xe[ M`ql dXp _Xm\ Y\\e Y\kk\i f]] ljè^ Xe XlkfdXk`Z ècè\ _\cg jpjk\d ]fi k_`j ]fid èjk\X[%

FIGURE 7.13 top image: http://www.flickr.com/photos/rosenfeldmedia/2366431643 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367267888

Vizu’s help section displays help text relevant to the active input fields within a consistent location on the form.

180 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

C`b\ lj\i$XZk`mXk\[ ècè\ _\cg# lj\i$XZk`mXk\[ j\Zk`fe _\cg `j X Y\kk\i Ôk ]fi ]fidj lj\[ dfi\ k_Xe feZ\# gXik`ZlcXicp fe\j k_Xk Xjb gfk\ek`Xccp Zfdgc\o hl\jk`fej% 8j jlZ_# X Y\kk\i ZXe[`[Xk\ ]fi k_`j kpg\ f] jpjk\d `j \9XpËj J\cc Pfli @k\d ]fid =`^li\ .%(+ % K_`j ]fid dXb\j lj\ f] X ?\cg gXe\c k_Xk g\fgc\ ZXe [`jgcXp fi _`[\ Yp Zc`Zbè^ X ^cfYXc ?\cg `Zfe Xk k_\ kfg f] k_\ ]fid% K_\ Zfek\ek è k_\ ?\cg gXe\c lg[Xk\j

FIGURE 7.14 http://www.flickr.com/photos/rosenfeldmedia/2367267948 eBay’s Sell Your Item Help panel can be turned on and off at any time.

181 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

n`k_ Zfek\oklXccp i\c\mXek _\cg k\ok n_\e X g\ijfe Zc`Zbj fe\ f] k_\ ?\cg `Zfej e\ok kf \XZ_ èglk Ô\c[% N_\e fg\e# k_\ ?\cg gXe\c Xcjf XlkfdXk`ZXccp lg[Xk\j n`k_ i\c\mXek Zfek\ek Xj g\fgc\ dfm\ ]ifd Ô\c[ kf Ô\c[ n_`c\ Zfdgc\kè^ k_\ ]fid% Jf Ôijk$k`d\ j\cc\ij fe \9Xp ZXe j`dgcp c\Xm\ k_\ ?\cg gXe\c fg\e Xe[ ^\k [\kX`c\[ _\cg Xj k_\p dfm\ k_ifl^_ k_\ ]fid% 8[mXeZ\[ lj\ij ZXe Z_ffj\ kf Zcfj\ k_\ gXe\c Xe[ fecp fg\e `k n_\e e\\[\[% K_\ j`q\ f] k_\ gXe\c Xccfnj \9Xp kf èZcl[\ îXg_`Zj# Z_Xikj# Xe[ \ok\ej`m\ _\cg k\ok k_Xk nflc[eËk Ôk è Xe ècè\ _\cg jpjk\d% Secure Transactions N_\e pflËi\ [\Xcè^ n`k_ j\ej`k`m\ è]fidXk`fe# c`b\ Zi\[`k ZXi[ eldY\ij fi YXeb XZZflekj# Xe X[[`k`feXc Y`k f] _\cg k\ok k_Xk i\Xjjli\j g\fgc\ k_\ì è]fidXk`fe `j jX]\ dXp Y\ Xggifgi`Xk\% @kËj `dgfikXek k_Xk k_`j _\cg k\ok _Xj jfd\ Èd\XkÉ Y\_è[ `k% @e fk_\i nfi[j# `k j_flc[ Y\ XZk`feXYc\# Xccfnè^ g\fgc\ kf m\i`]p

182 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k_\ j\Zli`kp pfl gifd`j\% DXep fecè\ j\im`Z\j jlZ_ Xj M\ij`ê fi Kiljk$\ n`cc Xccfn g\fgc\ kf ZfeĂ&#x201D;id k_\ Xlk_\ek`Z`kp f] X j\Zli\ kiXejXZk`fe Yp XZZ\jjè^ k_\ì j\im`Z\ ]ifd pfli ]fid j\\ =`^li\ .%(, %

FIGURE 7.15 top image: http://www.flickr.com/photos/rosenfeldmedia/2366431843 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367268014

Various ways of verifying a secure transaction.

@] pfl Xi\ Xjbè^ g\fgc\ kf gifm`[\ j\ej`k`m\ è]fidXk`fe# pfl dXp nXek kf \e^X^\ k_\ j\im`Z\j f] fe\ f] k_\j\ kiljk\[ k_ì[ gXik`\j kf i\Xjjli\ g\fgc\ k_Xk k_\ì [XkX n`cc Y\ jX]\%

183 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices ;feËk lj\ _\cg k\ok kf Zfdg\ejXk\ ]fi k_\ j_fikZfdè^j f] pfli ]fidj% Jki`mè^ kf dè`d`q\ k_\ Xdflek f] _\cg k\ok fe pfli ]fidj n`cc glj_ pfl kfnXi[ Y\kk\i [\j`ê jfclk`fej% ?\cg k\ok `j Y\jk ]fi \ogcXèè^ le]Xd`c`Xi [XkX i\hl\jkj# jlZ_ Xj n_p Z\ikXè hl\jk`fej Xi\ Y\è^ Xjb\[# j\Zli`kp Xe[ gi`mXZp ZfeZ\iej# i\Zfdd\e[\[ nXpj f] gifm`[è^ Xejn\ij# Xe[ è[`ZXkè^ fgk`feXc Xejn\ij% :feZ`j\ _\cg k\ok m`j`Yc\ Xe[ X[aXZ\ek kf k_\ hl\jk`fe Y\è^ Xjb\[ gifm`[\j k_\ dfjk ZcXi`kp ]fi g\fgc\% ?\cg k\ok n`k_è èglk Ô\c[j j_flc[ fecp Y\ lj\[ kf gifm`[\ i\Zfdd\e[\[ nXpj f] Xejn\iè^ hl\jk`fej% @] pfli ]fid `j Xjbè^ hl\jk`fej g\fgc\ _Xm\ Xejn\ij ]fi Ylk dXp Y\ lejli\ _fn fi n_p k_\p j_flc[ Xejn\i# Zfej`[\i ljè^ Xe XlkfdXk`Z ècè\ _\cg jpjk\d% @] pfli ]fid `j Xjbè^ le]Xd`c`Xi fi Zfdgc\o hl\jk`fej# Xe[ `j c`b\cp kf Y\ i\lj\[ Yp k_\ jXd\ g\fgc\ dlck`gc\ k`d\j# Zfej`[\i ljè^ X lj\i$ XZk`mXk\[ _\cg jpjk\d% 184 Chapter 7 Help Text

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices (continued) Lec\jj pfl _Xm\ X cfk f] _\cg k\ok fi Zfek\ek îXg_`Zj# Z_Xikj # ]fi \XZ_ hl\jk`fe Y\è^ Xjb\[# lj\ Xe ècè\ jpjk\d k_Xk Xmf`[j gX^\$aldgè^ Xe[ ifccfm\i gifYc\dj% @] pfl [f _Xm\ X cfk f] _\cg Zfek\ek# lj\ X Zfej`jk\ek _\cg j\Zk`fe èjk\X[ f] Xe è$cè\ jfclk`fe% 9\ Xj jg\Z`ÔZ Xj pfl ZXe n`k_ _\cg k\ok% @] _\cg k\ok Xggc`\j kf X îflg f] i\cXk\[ èglk Ô\c[j èjk\X[ f] è[`m`[lXc èglkj# Zfej`[\i [\mfkè^ X gfik`fe f] k_\ gX^\ kf [`jgcXpè^ _\cg kf Zfddle`ZXk\ X Zc\Xi XjjfZ`Xk`fe Y\kn\\e k_\ îflg f] Ô\c[j Xe[ k_\ _\cg k\ok% Ki`^^\ij ]fi lj\i$XZk`mXk\[ _\cg k\ok# jlZ_ Xj `Zfej# cèbj# fi Ylkkfej# j_flc[ Y\ gcXZ\[ e\ok kf cXY\cj Xe[ efk èglk Ô\c[j% N_\e Xjbè^ ]fi j\ej`k`m\ è]fidXk`fe# Zfej`[\i èZcl[è^ XZk`feXYc\ _\cg k\ok k_Xk Xccfnj g\fgc\ kf ZfeÔid k_Xk k_\ì è]fidXk`fe `j jX]\%

185 Chapter 7 Help Text

CHAPTER 8

Errors and Success Errors Success No Dead Ends Best Practices

187 205 211 212

186 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

_`c\ _\cg k\ok ZXe Y\ lj\[ kf k\cc g\fgc\ _fn kf jlZZ\jj]lccp Zfdgc\k\ X ]fid# `k `jeËk k_\ dfjk `dgfikXek k_è^ n\ _Xm\ kf k\cc k_\d% K_Xk _fefi ]Xccj kf \iifi Xe[ jlZZ\jj d\jjX^\j% <iifi d\jjX^\j c\k g\fgc\ befn n_\e k_\p ZXeefk Zfekèl\ Zfdgc\kè^ X ]fid Xe[ _fn k_\p ZXe i\d\[p k_\ j`klXk`fe% JlZZ\jj d\jjX^\j k\cc g\fgc\ n_Xk k_\p nXek\[ kf _\Xi ]ifd k_\ dfd\ek k_\p jkXikè^ Ôccè^ è X ]fidÇk_\pËi\ [fe\ C`b\ _\cg k\ok# \iifij Xe[ jlZZ\jj Xi\ d\jjX^\j ]fi g\fgc\% 8j X i\jlck# X cfk f] k_\ Y\jk giXZk`Z\j Xe[ [peXd`Z jpjk\dj n\ cffb\[ Xk è :_Xgk\i . ]fi _\cg k\ok Xcjf Xggcp kf k_\ \iifi Xe[ jlZZ\jj d\jjX^\j [`jZljj\[ _\i\% Errors ;\jg`k\ fli Y\jk \]]fikj kf jkilZkli\ hl\jk`fej Xe[ èglk Ô\c[j è d\Xeè^]lc nXpj# jfd\k`d\j g\fgc\ n`cc d`jle[\ijkXe[ fi ilj_ k_ifl^_ fli ]fidj Xe[ d`jkXb\j dXp _Xgg\e% F] Zflij\# n\ nXek kf dè`d`q\ k_\ gfk\ek`Xc ]fi k_\j\ kpg\j f] \iifij Xj dlZ_ Xj n\ ZXeÇk_XkËj n_Xk dfjk 187 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

f] k_`j Yffb `j XYflk 9lk n_\e d`jkXb\j [f _Xgg\e# n\ j_flc[ Y\ gi\gXi\[ kf [\Xc n`k_ k_\d hl`Zbcp Xe[ îXZ\]lccp% Jk\g fe\ ]fi [\Xcè^ n`k_ \iifij `j c\kkè^ g\fgc\ befn k_\p _Xgg\e\[% K_fl^_ k_`j dXp j\\d c`b\ X ki`m`Xc gfèk# Xcc kff f]k\e \iifi d\jjX^\j [feËk ^\k k_\ Xkk\ek`fe k_\p [\j\im\% N_\e gi\j\ek# Xe \iifi d\jjX^\ `j Xi^lXYcp k_\ dfjk `dgfikXek \c\d\ek fe k_\ gX^\% @k gi\m\ekj g\fgc\ ]ifd XZ_`\mè^ k_\ì gi`dXip ^fXc f] Zfdgc\kè^ X ]fid% 8j X i\jlck# k_\ m`jlXc gi\j\ekXk`fe f] Xe \iifi e\\[j kf dXkZ_ `kj `dgfikXeZ\% :fej`[\i k_\ \oXdgc\ ]ifd =Xìdfek ?fk\cj è =`^li\ /%(% 9\c`\m\ `k fi efk# k_\i\Ëj Xe \iifi gi\m\ekè^ jfd\fe\ ]ifd Zfdgc\kè^ k_`j ]fid% C\k d\ befn n_\e pfl Ôe[ `k% 8e[ n_`c\ pflËi\ Xk `k# c\k d\ befn n_\e pfl Ôe[ k_\ ]fid k_Xk c\[ kf k_\ \iifi Efk fecp `j k_\ \iifi d\jjX^\ Zfdè^c\[ n`k_ k_i\\ gXiXîXg_j f] èjkilZk`fej# `k `j Xcjf [`jgcXp\[ è k_\ jXd\ ]fek ]XZ\ Xe[ Zfcfi Xj k_\ i\jk f] k_\ k\ok fe k_\ gX^\% K_\ fecp [`]]\i\eZ\ 188 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 8.1 http://www.flickr.com/photos/rosenfeldmedia/2367269100 Where’s the error on this Fairmont Hotels form?

`j k_Xk k_\ \iifi k\ok `j Yfc[% Ef nfe[\i pfl [`[eËk efk`Z\ `k% G\i_Xgj dfi\ ZfeZ\ieè^ k_Xe k_\ m`jlXc gi\j\ekXk`fe f] k_`j \iifi d\jjX^\ `j k_\ cXZb f] X Zc\Xi nXp kf i\jfcm\ k_\ \iifi `kj\c]% K_\ d\jjX^\ k\ccj lj kf ÈGc\Xj\ m\i`]p k_\ eldY\i Xe[ kip X^Xè%É 9lk n_\i\ `j k_\ eldY\i6 ?fn [f @ kip X^Xè6 Jli]XZè^ k_\ \iifi d\jjX^\ e\ok kf k_\ i\jgfej`Yc\ \c\d\ekj nflc[ _Xm\ dX[\ X jfclk`fe dlZ_ dfi\ le[\ijkXe[XYc\ Xe[ XZk`feXYc\% C\kËj Zfej`[\i _fn =Xìdfek ?fk\cj Zflc[ gifm`[\ Zc\Xi ]\\[YXZb k_Xk g\fgc\ Zflc[ lj\ kf i\jfcm\ k_`j \iifi% @e k_\ i\[\j`ê\[ =Xìdfek 189 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

?fk\cj ]fid gX^\ è =`^li\ /%)# pflËcc efk`Z\ X ]\n k_è^j% =ìjk# k_\i\Ëj X gifdè\ek d\jjX^\ è[`ZXkè^ k_Xk Xe \iifi _Xj fZZlii\[% K_\i\ Xi\ j\m\iXc nXpj kf [`jkè^l`j_ `dgfikXek d\jjX^\j ]ifd k_\ i\jk f] X ]fid2 è k_`j \oXdgc\# n\Ëm\ Z_fj\e X ZfekiXjkè^ Zfcfi i\[ # X [`jkèZk

FIGURE 8.2 http://www.flickr.com/photos/rosenfeldmedia/2367269324 A redesigned version of the Fairmont Hotels error page makes it much clearer that there is an error preventing people from continuing. 190 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

m`jlXc \c\d\ek nXieè^ `Zfe # Xe[ X gifdè\ek gcXZ\d\ek kfg f] k_\ gX^\ % F] Zflij\# pfl Xi\eËk c`d`k\[ kf k_`j \oXZk m`jlXc gi\j\ekXk`fe% 8epk_è^ k_Xk _Xj X m\ip jkife^ ZfekiXjk n`k_ k_\ i\jk f] k_\ gX^\ Xe[ cffbj c`b\ Xe \iifi kpg`ZXccp i\[ k\ok Xe[ X nXieè^ `Zfe Zflc[ Y\ Xggifgi`Xk\% ;`]]\i\eZ\j è j`q\# j_Xg\# gfj`k`fe# k\okli\# fi Zfcfi ZXe Y\ lj\[ Xcfe\ fi kf^\k_\i kf Zi\Xk\ X[[`k`feXc \dg_Xj`j% K_\ b\p i\hlì\d\ek `j k_Xk k_\ \iifi Y\ `dd\[`Xk\cp efk`Z\XYc\ Y\ZXlj\ `k `j YcfZbè^ jfd\fe\Ëj gifî\jj% K_\ i\[\j`ê\[ ]fid Xcjf ZfekXèj knf Zc\Xi nXpj kf i\jfcm\ k_\ \o`jkè^ \iifi% K_\ èglk Ô\c[ k_Xk `j i\jgfej`Yc\ ]fi k_\ gifYc\d `j efk fecp m`j`Yc\ fe k_\ gX^\ Ylk Xcjf gifdè\ekcp dXib\[% 9fk_ k_\ kfg$c\m\c d\jjX^\ Xe[ k_`j èglk Ô\c[ _Xm\ Zc\Xi èjkilZk`fej k_Xk \eZfliX^\ g\fgc\ kf \`k_\i kip Xefk_\i Xejn\i fi j\\b _\cg `] k_\p ZXeËk%

191 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

K_\ èZclj`fe f] èjkilZk`fej e\ok kf k_\ èglk Ô\c[ i\jgfej`Yc\ ]fi k_\ \iifi gifm`[\j g\fgc\ n`k_ X i\d\[p n_\i\ k_\p e\\[ `k dfjk1 n_\i\ k_\ \iifi ZXe Y\ Ôo\[% :fej`[\i Xe Xck\ieXk`m\ n_\i\ k_\ ]XZk k_Xk Xe \iifi fZZlii\[ `j j_fne è X df[Xc [`Xcf^ nè[fn =`^li\ /%* k_Xk _Xj kf Y\ [`jd`jj\[ Y\]fi\ jfd\fe\ ZXe gifZ\\[% FeZ\ k_Xk [`Xcf^ `j ^fe\# jf `j k_\ è[`ZXk`fe f] n_`Z_ èglk e\\[j kf Y\ Zfii\Zk\[ Xe[ _fn%

FIGURE 8.3 http://www.flickr.com/photos/rosenfeldmedia/2367269388 This error message lacks a title that associates it with an input field, is difficult to read because of the centered, bold font, and has to be remembered when dismissed. Not a very effective way to remedy errors.

@e k_\ i\[\j`ê\[ =Xìdfek ?fk\cj ]fid =`^li\ /%) # k_\ èglk Ô\c[ i\jgfej`Yc\ ]fi k_\ \iifi lj\j X È[flYc\ m`jlXc \dg_Xj`jÉ kf jkXe[ flk ]ifd k_\ i\jk f] k_\ ]fid \c\d\ekj%

192 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

@e k_`j ZXj\# k_\ cXY\c `j i\[# Xe[ n\Ëm\ X[[\[ i\[ èjkilZk`fej aljk Y\cfn k_\ èglk Ô\c[% K_`j [flYc\[$lg XggifXZ_ `j `dgfikXek Y\ZXlj\ j`dgcp Z_Xe^è^ k_\ k\ok Zfcfi f] k_\ cXY\c d`^_k efk Y\ \efl^_ kf Y\ efk`Z\[ Yp Zfcfi$ Ycè[ g\fgc\% Jf kf \ejli\ k_Xk \m\ipfe\ befnj n_\i\ Xe \iifi _Xgg\e\[# n\ [flYc\ k_\ m`jlXc \dg_Xj`j% N\ Zflc[ _Xm\ fgk\[ ]fi Xe `Zfe Xe[ i\[ k\ok fi X YXZbîfle[ Zfcfi Xe[ èjkilZk`fej kf _`^_c`^_k k_\ èglkj i\jgfej`Yc\ ]fi k_\ \iifi Xj n\cc% 8ep ]fid f] [flYc\ \dg_Xj`j Zflc[ nfib# Xj k_\ \oXdgc\j è =`^li\ /%+ j_fn% ?fn\m\i# n_\e pfl [f [\Z`[\ fe X m`jlXc ki\Xkd\ek ]fi k_\ èglkj i\jgfej`Yc\ ]fi Xe \iifi# dXb\ jli\ k_Xk k_\ jkpc\ pfl j\c\Zk dXkZ_\j k_\ jkpc\ f] Xep gi`dXip \iifi d\jjX^\j fe k_\ ]fid% :c\Xi m`jlXc j`d`cXi`k`\j Y\kn\\e \iifij Xe[ \iifi d\jjX^\j _\cg g\fgc\ Zfee\Zk k_\ [fkj%

193 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 8.4 http://www.flickr.com/photos/rosenfeldmedia/2367269446 Several options for indicating errors with “double visual emphasis.”

Perspective: James Reffell

Director, Search User Experience, Yahoo! Inc.

Fun with Messages <iifi d\jjX^\j Xi\eËk Y`^$k`d\ ]le ]fi [\j`ê\ij fi Zljkfd\ij% 9lk [\Xcè^ n`k_ k_\dÇXe[ fk_\i ]fidj f] d\jjX^è^ n`k_è X ]fidÇ`j X Zi`k`ZXc gXik f] k_\ lj\i \og\i`\eZ\# Xe[ _Xe[cè^ k_\d n\cc fi YX[cp dXp dXb\ X _l^\ [`]]\i\eZ\ è k_\ fm\iXcc jlZZ\jj f] X ]fid% HOW MANY TYPES OF MESSAGES?

N_\e gcXeeè^ pfli d\jjX^è^ jpjk\d# pfl _Xm\ kf ]`^li\ flk _fn dXep kpg\j f] d\jjX^\j pflËcc e\\[ ]fi pfli \ekì\ Xggc`ZXk`feÇXe[ ]\n\i `j Xcdfjk XcnXpj Y\kk\i% @] pflËm\ [\j`ê\[

194 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: James Reffell (Continued) X ]fid k_XkËj jf j`dgc\ `k [f\jeËk _Xm\ Xep d\jjX^\j# k_\e pflËi\ X ifZb jkXi =fi dfjk ]fcbj# pflËcc e\\[ fe\ fi knf kpg\j% @] pfl k_èb pfl e\\[ k_i\\# pflËi\ \[^è^ èkf Zfdgc\o`kp k_Xk _likj k_\ lj\i Xe[ c`b\cp k_\ jpjk\d % @] pfl _`k ]fli fi dfi\# pflËm\ gifYXYcp [fe\ jfd\k_è^ _fii`Ycp nife^ Xe[ j_flc[ jkXik fm\i% ERROR MESSAGES

<iifi d\jjX^\j Xi\ k_\ dfjk Zfddfe# k_\ dfjk fm\ilj\[# Xe[ k_\ dfjk c`b\cp kf Xeefp pfli Zljkfd\ij% 8mf`[ k_\d n_\i\ gfjj`Yc\ Yp ljè^ èglk kpg\j n`k_ ef \iifi jkXk\j jlZ_ Xj [ifg$[fne d\elj # èglkj k_Xk _Xm\ le[f fgk`fej# Xe[ èglkj n`k_ ^ff[ [\]Xlck mXcl\j% N_\i\ pfl ZXeËk Xmf`[ \iifi d\jjX^\j# lj\ k_\d jgXiè^cp% K_\i\ Xi\ fecp knf i\Xjfej kf j_fn Xe \iifi d\jjX^\1 (% K_\ Zljkfd\i _Xj \ek\i\[ jfd\k_è^ k_Xk k_\ jpjk\d ZXeËk XZZ\gk# jf k_\ Zljkfd\i ZXeËk Zfekèl\ ]fi \oXdgc\# X d`jdXkZ_è^ lj\ieXd\ Xe[ gXjjnfi[ % K_`j bè[ f] d\jjX^\ j_flc[ Zc\Xicp Xe[ jlZZèZkcp k\cc k_\ Zljkfd\i n_Xk _Xgg\e\[# _fn kf Ôo `k# Xe[ k_\e dfm\ fe% )% Jfd\k_è^ m\ip# m\ip YX[ _Xj _Xgg\e\[ kf k_\ jpjk\d# jf k_\ Zljkfd\i ZXeËk Zfekèl\ \%^%# Xe \jj\ek`Xc j\im\i aljk ^fk jdfk\ Yp c`^_keè^ % K_`j bè[ f] d\jjX^\ j_flc[ Y\ m\ip Xgfcf^\k`Z Xe[ j_flc[ ^`m\ k_\ Zljkfd\i jfd\ Xck\ieXk\ nXp f] ZfekXZkè^ pfl% K_\i\ Xi\ ef fk_\i i\Xjfej kf j_fn Xe \iifi d\jjX^\% @] pfl j_fn jfd\k_è^ k_Xk cffbj c`b\ Xe \iifi d\jjX^\ è fi[\i kf dXib\k jfd\k_è^ kf k_\ Zljkfd\i# pfl Xi\ X YX[ g\ijfe%

195 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: James Reffell (Continued) SUCCESS MESSAGES

JlZZ\jj d\jjX^\j Xi\ X e`Z\ nXp f] k_Xebè^ pfli Zljkfd\i ]fi glkkè^ lg n`k_ pfli k\[`flj ]fid Xe[ `kj \iifi d\jjX^\j% K_\p j_flc[ Y\ j_fik Xe[ jn\\k# k_\ m`jlXc \hl`mXc\ek f] _\Xiè^ È?Xm\ X e`Z\ [Xp É fe pfli nXp flk f] k_\ îfZ\ip jkfi\% ANY OTHER KIND OF MESSAGES

=fi mXi`flj i\Xjfej pfl dXp Y\ k\dgk\[ kf X[[ X[[`k`feXc bè[j f] d\jjX^\j# c`b\ k_\ ]fccfnè^1 <[lZXk`feXc d\jjX^\j DXib\kè^ d\jjX^\j k_ècp [`j^l`j\[ Xj \[lZXk`feXc d\jjX^\j K_\ Èjfd\k_è^ YX[ _Xj _Xgg\e\[# Xe[ n_`c\ k_\fi\k`ZXccp k_\ lj\i Zflc[ Zfekèl\# `k d`^_k Y\ X YX[ `[\XÉ d\jjX^\ J`k\$jg\Z`ÔZ d\jjX^\j \%^%# ÈPflËi\ flkY`[ É fe \9Xp 8 Zc`g$Xik g`Zkli\ f] X dflj\ n`k_ X g\eZ`c [feËk Xjb 9Xj`ZXccp# pfl j_flc[ kip kf Xmf`[ Xcc f] k_\j\% K_\p èkif[lZ\ X[[`k`feXc Zfdgc\o`kp# Xe[ è\m`kXYcp Xep d\jjX^\ k_XkËj è k_\ jhl`j_p Xi\X f] Èefk YX[ fi ^ff[ Ylk jfd\n_\i\ è Y\kn\\eÉ _Xj X _`^_ c`b\c`_ff[ f] Y\è^ d`jle[\ijkff[% @] pfl dljk X[[ Xe X[[`k`feXc kpg\# Y\ m\ip jg\Z`]`Z XYflk n_\e `k j_flc[ fi j_flc[ efk Y\ lj\[# dXb\ `k m`jlXccp [`jkèZk ]ifd k_\ fk_\i d\jjX^\ kpg\j# Xe[ k\jk k_\ _\Zb flk f] `k n`k_ i\Xc lj\ij% HOW TO BUILD GREAT MESSAGES

FeZ\ pflËm\ ]`^li\[ flk _fn dXep kpg\j f] d\jjX^\ pfl _Xm\# pfl e\\[ kf Yl`c[ X m`jlXc Xe[ k\oklXc ]iXd\nfib ]fi k_\d% K_\

196 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: James Reffell (Continued) nXp k_Xk d\jjX^\j cffb Xe[ jfle[ j_flc[ dXkZ_ pfli fm\iXcc cffb Xe[ ]\\c# _Xm\ k_\ i`^_k kfe\# Xe[ ]\\c c`b\ X ]Xd`cp f] d\jjX^\j n_`c\ Y\è^ Zc\Xicp [`jkèZk ]ifd \XZ_ fk_\i% D\jjX^\j f]k\e èZcl[\ `Zfej# k\ok# X jliifle[è^ jkilZkli\# Xe[ è jfd\ ZXj\j# [peXd`Z Y\_Xm`fi jlZ_ Xj ]X[è^ è % K_\ gcXZ\d\ek Xe[ m`jlXc jkilZkli\ f] k_\ d\jjX^\ j_flc[ Yfk_ Y\ gifdè\ek \efl^_ kf Y\ efk`Z\[ Xe[ c\X[ k_\ lj\i kf k_\ gXik f] k_\ ]fid k_Xk e\\[j Xkk\ek`fe% >ff[ d\jjX^è^ `Zfej [`]]\i ]ifd \XZ_ fk_\i è dlck`gc\ nXpj1 jpdYfc# Zfcfi# Xe[ j_Xg\1

http://www.flickr.com/photos/rosenfeldmedia/2405623933

K_`j i\[le[XeZp _\cgj g\fgc\ Zfê`k`m\cp gifZ\jj k_\d ]Xjk\i# Xj n\cc Xj Zfm\iè^ ]fi k_è^j c`b\ Zfcfi$Ycè[e\jj%

left image: http://www.flickr.com/photos/rosenfeldmedia/2405623883 center image: http://www.flickr.com/photos/rosenfeldmedia/2405623863 right image: http://www.flickr.com/photos/rosenfeldmedia/2405623849

K_\ jpdYfcj lj\[ j_flc[ nfib n\cc ^cfYXccp# Xj k_\ fe\j _\i\ [f# [\jg`k\ fi`^èXkè^ è N\jk\ie Xcg_XY\kj% Fk_\i Zfddfecp lj\[ jpdYfcj ZXe Y\ d`jèk\igi\k\[ è jfd\ Zfek\okj1 ]fi \oXdgc\# k_\ ]cX^ `Zfe f]k\e lj\[ Xj X nXieè^ `Zfe XZklXccp Zfeefk\j jlZZ\jj è jfd\ Zfleki`\j% N_\e è [flYk# k\jkĂ&#x2021;Xe[ k\jk ^cfYXccp%

197 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: James Reffell (Continued) WHEN TO BREAK THE RULES

F] Zflij\# Xk k_\ \e[ f] k_\ [Xp# pfli d\jjX^\j j_flc[ ]`k pfli Xggc`ZXk`fe Xe[ pfli Zljkfd\ij% =fi Yljè\jj fi \Zfdd\iZ\ Xggc`ZXk`fej# pfl nXek Zc\Xi# Zfej`jk\ek# Xe[ ]i`\e[cp d\jjX^\j% 9lk `] pflËi\ Yl`c[è^ X ZiXqp N\Y )%' Xggc`ZXk`fe k_XkËj lj\[ dfjkcp Yp ^\\bj è k_\ 9Xp 8i\X kf k\cc k_\ì ]i`\e[j n_Xk bè[ f] jXe[n`Z_ k_\p _X[ ]fi cleZ_ Xe[ `j _Xmè^ jZXcè^ http://www.flickr.com/photos/ gifYc\dj# pfl d`^_k aljk [f rosenfeldmedia/2405623841 k_`j èjk\X[1

Efn# n_Xk _Xgg\ej n_\e k_\i\ `j dfi\ k_Xe fe\ \iifi fe X ]fid6 Fi n_\e ef gXik`ZlcXi èglk Ô\c[j Xi\ i\jgfej`Yc\ ]fi k_\ gifYc\d# jlZ_ Xj n_\e X j\im\i ^f\j [fne fi X gXpd\ek ZXeefk Y\ Xlk_fi`q\[6 @e dfjk ZXj\j# k_\ jXd\ jkilZkli\ jk`cc nfibj n\cc% (% 8 gifdè\ek d\jjX^\ è[`ZXkè^ Xe \iifi _Xj _Xgg\e\[

198 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

)% ;flYc\ m`jlXc \dg_Xj`j ]fi Xep èglk ﾃ能c[j i\jgfej`Yc\ ]fi k_\ \iifi `] k_\p \o`jk *% :c\Xi \ogcXeXk`fej Xe[ XZk`fej k_Xk Xccfn g\fgc\ kf hl`Zbcp i\jfcm\ k_\ \iifi gi\j\ek è Yfk_ gcXZ\j K_\ \9Xp NXek @k Efn ]fid è =`^li\ /%, j_fnj _fn X gifdè\ek d\jjX^\# [flYc\ m`jlXc \dg_Xj`j# Xe[ Zc\Xi i\jfclk`fe èjkilZk`fej è

FIGURE 8.5 http://www.flickr.com/photos/rosenfeldmedia/2366433263 A clear message and ways to resolve multiple input errors on eBay. 199 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Yfk_ gcXZ\j Zflc[ Y\ gi\j\ek\[ n_\e X ]fid ZfekXèj dXep \iifij% @Ëm\ _\Xi[ jfd\ [\j`ê\ij Xi^l\ k_Xk k_`j XggifXZ_ Zi\Xk\j kff dlZ_ Zclkk\i fe X ]fid Xe[ è ZXj\j n_\i\ \m\ip èglk Ô\c[ _Xj Xe XZk`m\ \iifi# k_`j ZXe Z\ikXècp Y\ k_\ ZXj\% ?fn\m\i# j`klXk`fej c`b\ k_`j Xi\ hl`k\ iXi\ Y\ZXlj\ dfjk g\fgc\ [feËk gifm`[\ èmXc`[ Xejn\ij kf \m\ip hl\jk`fe n_\e kipè^ kf Zfdgc\k\ X ]fid% @ejk\X[# k_\ dfi\ Zfddfe ZXj\ `j n_\e fe\ fi knf èglk Ô\c[j Xi\ gi\m\ekè^ jfd\fe\ ]ifd Zfdgc\kè^ X ]fid% @e k_\j\ èjkXeZ\j# `k `j hl`k\ lj\]lc kf Y\ XYc\ kf cfZXk\ k_\ i\jgfej`Yc\ èglk Ô\c[ j hl`Zbcp Xe[ \Xj`cpÇ\jg\Z`Xccp fe cfe^ ]fidj# Xj k_\ \oXdgc\ ]ifd HC: è =`^li\ /%- è[`ZXk\j% Efk`Z\ k_Xk k_\ m`jlXc j`d`cXi`kp Zfcfi# Yfi[\i# ]fek Y\kn\\e k_\ \iifi d\jjX^\ Xe[ i\jgfej`Yc\ èglk Ô\c[j Zi\Xk\j X Zc\Xi Zfee\Zk`fe Y\kn\\e k_\ knf%

200 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 8.6 http://www.flickr.com/photos/rosenfeldmedia/2367269674 On long forms, such as this one from QLC, a prominent error message and double visual emphasis on invalid input fields helps people quickly notice and remedy errors.

?fn\m\i# k_\i\ dXp Y\ j`klXk`fej n_\i\ Èc\jj `j dfi\É Xe[ X jè^c\ gifdè\ek \iifi d\jjX^\ ZXe [f k_\ ki`Zb% Fe j_fik ]fidj# c`b\ =`^li\ /%. ]ifd Afkjgfk C`m\# X gifdè\ek d\jjX^\ \ogcXèj n_`Z_ èglk Ô\c[ `j i\jgfej`Yc\ ]fi k_\ \iifi Xe[ gifm`[\j X _èk fe _fn kf 201 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 8.7 http://www.flickr.com/photos/rosenfeldmedia/2367269736 A single prominent message lets people know an error happened on Jotspot Live. Though how to resolve it isn’t as clear.

i\jfcm\ `k% G\ijfeXccp# @ ]\\c k_\ ]fid Zflc[ Y\ `dgifm\[ n`k_ X [flYc\ m`jlXc \dg_Xj`j fe k_\ i\jgfej`Yc\ èglk Ô\c[ jf k_Xk g\fgc\ Zflc[ Ôe[ `k hl`Zbcp# Xe[ `k Zflc[ Xcjf èZcl[\ jfd\ X[[`k`feXc èjkilZk`fej fe _fn kf i\d\[p k_\ \iifi# jlZ_ Xj ÈN_Xk [f @ [f `] k_`j `j dp \dX`c X[[i\jj Xe[ `k `j Xci\X[p i\^`jk\i\[6É @] pfl [f Z_ffj\ fecp kf lk`c`q\ X gifdè\ek d\jjX^\ Xe[ efk _`^_c`^_k k_\ i\jgfej`Yc\ èglk Ô\c[j# Y\ Z\ikXè k_Xk pfl Zc\Xicp [`jkè^l`j_ k_\ \iifi d\jjX^\ ]ifd k_\ i\jk 202 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

f] k_\ ]fid% K_`j j`ê$lg ]fid ]ifd 9fè^f è =`^li\ /%/ [f\j efk lj\ \efl^_ ZfekiXjk# fgkè^ èjk\X[ kf lj\ k_\ jXd\ ]fek ]XZ\ Xe[ Zfcfi Xj k_\ ]fid k`kc\ Xe[ èglk cXY\cj% K_`j dXb\j k_\ ]XZk k_Xk Xe \iifi _Xgg\e\[ dlZ_ c\jj fYm`flj%

FIGURE 8.8 http://www.flickr.com/photos/rosenfeldmedia/2366433543 Boingo’s error message blends in with its surroundings and, as a result, can be hard to notice.

@k [f\jeËk _\cg k_Xk 9fè^f _Xj lj\[ i\[ k\ok ]fi Xcc k_\ cXY\cj fe k_`j ]fid# n_`Z_ dXb\j `k dlZ_ _Xi[\i kf [`jkè^l`j_ Xe \iifi k_Xk `j Xcjf i\e[\i\[ è i\[ k\ok% 9\ZXlj\ i\[ k\ok _Xj k_\

203 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Zc\Xi\jk XjjfZ`Xk`fe n`k_ \iifij ]fi dfjk g\fgc\# @ XcnXpj i\Zfdd\e[ efk ljè^ `k ]fi cXY\cj fi _\cg k\ok kf Xmf`[ Xep gfk\ek`Xc Zfe]lj`fe% 8efk_\i gfk\ek`Xc jfclk`fe ]fi j_fik ]fidj `j kf i\cp fe [flYc\ m`jlXc \dg_Xj`j ]fi \XZ_ èmXc`[ èglk Xe[ efk lk`c`q\ X kfg$c\m\c \iifi d\jjX^\ Xk Xcc j\\ =`^li\ /%0 % K_fl^_ k_`j dXp nfib n`k_ j_fik\i ]fidj# `k Zflc[ Zi\Xk\ `jjl\j fe

FIGURE 8.9 http://www.flickr.com/photos/rosenfeldmedia/2366433591 On this short form, Wufoo does not utilize a top-level message and instead embeds instructions on how to remedy each error with each input field. Distinguishing the label from remedy instructions (right now both are bold) could help make these errors easier to scan. 204 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

cfe^\i ]fidj n_\e k_\ i\jgfej`Yc\ èglk Ô\c[j Xgg\Xi f]]jZi\\e Y\ZXlj\ k_\p Xi\ ÈY\cfn k_\ ]fc[É f] X dfe`kfiËj m`\nXYc\ Xi\X% @e jlZ_ ZXj\j# g\fgc\ d`^_k _Xm\ X _Xi[ k`d\ befnè^ Xe \iifi `j YcfZbè^ k_\ì gifî\jj% Fe\ gfk\ek`Xc nXp kf X[[i\jj k_`j `j kf aldg kf k_\ gfèk f] k_\ Ôijk \iifi fe X ]fid% K_Xk nXp# k_\ Ôijk k_è^ jfd\fe\ j\\j `j Xe èglk Ô\c[ k_Xk e\\[j kf Y\ Zfii\Zk\[% N_\e dlck`gc\ èglk Ô\c[j Xi\ èmXc`[# _fn\m\i# k_`j d\k_f[ [f\jeËk ^`m\ g\fgc\ Xe fm\im`\n f] Xcc k_\ \iifij gi\j\ek fe k_\ ]fid% K_\p Xi\ j`dgcp kXb\e kf k_\ Ôijk Xe[ dXp fi dXp efk befn fk_\ij \o`jk% 8 kfg$c\m\c \iifi d\jjX^\# fe k_\ fk_\i _Xe[# Zflc[ Zc\Xicp c`jk Xcc k_\ \iifij k_Xk e\\[ kf Y\ X[[i\jj\[ Y\]fi\ jfd\fe\ ZXe gifZ\\[% Success =èXccp# k_\ dfd\ek n\Ëm\ Xcc Y\\e nX`kè^ ]fi% Jfd\fe\ Zfdgc\k\j fli ]fid n`k_ ef \iifij% JlZZ\jj 9lk efn n_Xk6

205 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

9\]fi\ n\ ^\k X_\X[ f] flij\cm\j# c\kËj dXb\ jli\ g\fgc\ befn k_\pËm\ _`k k_`j d`c\jkfe\% K_\p Xejn\i\[ Xcc fli ZXi\]lccp j\c\Zk\[ hl\jk`fej ljè^ k_\ èglk Ô\c[j n\ gifm`[\[% Jf _fn XYflk X gXk fe k_\ YXZb6 K_èb f] jlZZ\jj d\jjX^\j Xj aljk k_XkÇX nXp kf c\k g\fgc\ befn k_\p XZZfdgc`j_\[ k_\ì ^fXc% K_\p Y\ZXd\ X Zljkfd\i# k_\p X[[\[ fi \[`k\[ k_\ì [XkX# k_\p Yfl^_k k_\ `k\d k_\p nXek\[% :feîXkj% 8ck_fl^_ efk Xj `dgfikXek Xj Xe \iifi d\jjX^\# X jlZZ\jj d\jjX^\ j_flc[ Y\ efk`Z\XYc\ \efl^_ kf ^`m\ g\fgc\ k_\ hl`Zb giX`j\ k_\p [\j\im\% 8j X i\jlck# dXep f] k_\ [`jkèZk`fej k_Xk Xggc`\[ kf \iifi d\jjX^\j ZXe Xcjf nfib ]fi jlZZ\jj d\jjX^\j1 [`]]\i\ek Zfcfij# j_Xg\j# ]fekj# j`q\j# Xe[ dfi\% K_\ b\p [`]]\i\eZ\ Y\kn\\e \iifi Xe[ jlZZ\jj d\jjX^\j# _fn\m\i# `j k_Xk \iifi d\jjX^\j ZXeefk Y\ `êfi\[ fi [`jd`jj\[Ç k_\p dljk Y\ X[[i\jj\[% JlZZ\jj d\jjX^\j# fe k_\ fk_\i _Xe[# j_flc[ e\m\i YcfZb g\fgc\Ëj gifî\jjÇk_\p j_flc[ \eZfliX^\ dfi\ f] `k%

206 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

K_\ jlZZ\jj d\jjX^\ fe GfneZ\Ëj @em`k\ Pfli =i`\e[j ]fid è =`^li\ /%(' gifm`[\j X efk`Z\XYc\ ZfeÔidXk`fe k_Xk X ]fid nXj Zfdgc\k\[ jlZZ\jj]lccp% K_\ d\jjX^\ `j j_fne è Zfek\ok fe k_\ jXd\ ]fid k_Xk nXj aljk Zfdgc\k\[% K_`j Zfek\ok `j gifYXYcp Xggifgi`Xk\ Y\ZXlj\ jfd\fe\ n_f aljk èm`k\[ X ]i`\e[ `j c`b\cp kf nXek kf èm`k\ X[[`k`feXc ]i`\e[j% K_\ jlZZ\jj d\jjX^\ [f\jeËk ^\k è k_\ nXp% @e ]XZk# `k \m\e gifm`[\j X

FIGURE 8.10 http://www.flickr.com/photos/rosenfeldmedia/2367268672 Pownce uses a short success message that does not get in the way of further action and clearly explains the result of people’s actions.

207 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

nXp kf ^\k flk f] k_\ nXp Yp èZcl[è^ X cèb kf Zcfj\ k_\ d\jjX^\ Xe[ i\dfm\ `k ]ifd k_\ gX^\% GfneZ\Ëj jlZZ\jj d\jjX^\ ZfekXèj è]fidXk`fe k_Xk g\fgc\ ZXe lj\ kf ZfeÔid k_\ì èk\e[\[ XZk`fej kffb gcXZ\% @k efk fecp k\ccj pfl k_Xk Xe èm`k\ nXj j\k# `k jg\Z`Ô\j kf n_fd# Xe[ `k gifm`[\j X nXp kf XZZ\jj k_Xk è]fidXk`fe X^Xè n`k_ Xe èm`k\ Zf[\ % K_XkËj mXclXYc\ è]fidXk`fe kf b\\g m`j`Yc\ fe k_\ jZi\\e% @e fk_\i ZXj\j# k_\ fecp ZfeÔidXk`fe e\\[\[ `j k_Xk X ]fid nXj Zfdgc\k\[ jlZZ\jj]lccp fi k_Xk Xe XZk`fe kffb gcXZ\% @e k_\j\ j`klXk`fej# `k dXp Y\ Xggifgi`Xk\ kf XlkfdXk`ZXccp i\dfm\ jlZZ\jj d\jjX^\j# gi\]\iXYcp n`k_ Xe`dXk`fe% 9\ZXlj\ _ldXe Y\è^j Xi\ èjkèZk`m\cp [iXne kf dfk`feÇn\ _X[ kf Xmf`[ jXY\i$kffk_\[ k`^\ij jfd\_fnÇXe`dXk\[ d\jjX^\j k_Xk kiXej`k`fe f]] X gX^\ ZXe c\k g\fgc\ befn k_\ì XZk`fej _Xm\ Y\\e jlZZ\jj]lc% K_\ dfjk Zfddfe kiXej`k`fej lk`c`q\[ ]fi k_`j Xi\ ]X[\j# [`jjfcm\j# fi ifcc$lgj%

208 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

@e *.j`êXcËj gifa\Zk dXeX^\d\ek Xggc`ZXk`fe# 9Xj\ZXdg =`^li\ /%(( # n_\e X e\n d\jjX^\ `j Zi\Xk\[ÇYp Ôccè^ è X ]fid# f] Zflij\# g\fgc\ Xi\ kXb\e kf X c`jk f] \o`jkè^ d\jjX^\j n_\i\ Xe Xe`dXk`fe è[`ZXk\j n_\i\ k_\ d\jjX^\ k_\p Zi\Xk\[ Xgg\Xij% K_`j Zfek\ok `j Xggifgi`Xk\ ]fi k_`j XZk`fe Y\ZXlj\ g\fgc\ aljk X[[\[ X d\jjX^\ kf k_`j c`jk% K_XkËj n_\i\ k_\p ZXe i\X[ `k# \[`k `k# [\c\k\# Xe[ Zfdd\ek fe `k% @e fk_\i j`klXk`fej# k_\ dfjk Xggifgi`Xk\ Zfek\ok dXp XZklXccp Y\ k_\ ]fid jfd\fe\ aljk Ôcc\[ è% =fi X i\Zfi[j [XkXYXj\ f] Zljkfd\i è]fidXk`fe# gifm`[è^ X jlZZ\jj d\jjX^\ fe k_\ ]fid k_Xk pfli Zljkfd\i aljk lg[Xk\[ ^`m\j k_Xk g\ijfe Xe fggfikle`kp kf i\m`\n Z_Xe^\j# dXb\ fk_\i Z_Xe^\j# fi cfZXk\ fk_\i i\Zfi[j kf lg[Xk\%

209 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 8.11 top left: http://www.flickr.com/photos/rosenfeldmedia/2366432541 bottom left: http://www.flickr.com/photos/rosenfeldmedia/2367268816 top right: http://www.flickr.com/photos/rosenfeldmedia/2366432665 bottom right: http://www.flickr.com/photos/rosenfeldmedia/2366432725

When you are adding a new message to Basecamp, a fading background color around your addition lets you know you have been successful.

210 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

No Dead Ends JlZZ\jj d\jjX^\j ZXe Xcjf èZcl[\ lj\]lc ]fccfn$lg XZk`fej i\cXk\[ kf k_\ kXjb jfd\fe\ aljk Zfdgc\k\[ j\\ =`^li\ /%() % 9ffb\[ X Õ`^_k fecè\6 G\i_Xgj pfl nXek kf ]finXi[ pfli `kè\iXip kf ]Xd`cp6 DXbè^ k_\j\ XZk`fej gXik f] X jlZZ\jj d\jjX^\ fe k_\ gX^\ ^`m\j g\fgc\ Zc\Xi Xe[ XZk`feXYc\ e\ok jk\gj% E\m\i c\Xm\ Ê\d _Xe^è^

FIGURE 8.12 http://www.flickr.com/photos/rosenfeldmedia/2367269044 After you have connected with someone on the professional networking site LinkedIn, the success page provides several relevant next steps.

211 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices :c\Xicp Zfddle`ZXk\ n_\e Xe \iifi `j YcfZbè^ jfd\fe\ ]ifd Zfdgc\kè^ X ]fid% <iifi d\jjX^\j Xi\ Xi^lXYcp k_\ dfjk `dgfikXek \c\d\ek fe X ]fid n_\e gi\j\ek% DXb\ jli\ k_\p Xgg\Xi k_Xk nXp ;`jgcXp \iifi d\jjX^\j è Zfek\ok jf k_\p ZXe Y\ i\jfcm\[ hl`Zbcp% Gifm`[\ XZk`feXYc\ i\d\[`\j k_Xk \eXYc\ g\fgc\ kf i\jfcm\ \iifij \Xj`cp% Kfg$c\m\c \iifi d\jjX^\j j_flc[ è[`ZXk\ Xe \iifi _Xj fZZlii\[ Xe[ _fn `k ZXe Y\ i\jfcm\[% @] dlck`gc\ \iifij \o`jk# k_\p j_flc[ Y\ c`jk\[ è k_\ kfg$c\m\c d\jjX^\% @] Xep èglk Ô\c[j Xi\ i\jgfej`Yc\ ]fi Xe \iifi# Zc\Xicp dXib k_\d n`k_ X [flYc\ m`jlXc \dg_Xj`j kf \ejli\ k_\p Xi\ efk`Z\XYc\% M`jlXccp XjjfZ`Xk\ Xep i\jgfej`Yc\ ]fid \c\d\ekj n`k_ X kfg$c\m\c \iifi d\jjX^\ kf Zc\Xicp Zfddle`ZXk\ k_\p e\\[ kf Y\ i\jfcm\[ è fi[\i kf Zfekèl\% 212 Chapter 8 Errors and Success

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices (continued) I\j\im\ i\[ k\ok Xe[ nXieè^ `Zfej ]fi \iifi d\jjX^\j% Fe j_fik ]fidj# `k dXp Y\ gfjj`Yc\ kf fd`k \`k_\i X kfg$c\m\c d\jjX^\ fi è[`ZXkfij ]fi i\jgfej`Yc\ èglk Ô\c[j% @] pfl Z_ffj\ k_`j XggifXZ_Ç[f jf k_fl^_k]lccp% :c\Xicp Zfddle`ZXk\ n_\e X ]fid _Xj Y\\e Zfdgc\k\[ jlZZ\jj]lccp Xe[ n_Xk _Xgg\e\[ Xj X i\jlck ljè^ jlZZ\jj d\jjX^\j% Gifm`[\ jlZZ\jj d\jjX^\j è Zfek\ok jf Xj efk kf YcfZb Xep ]lik_\i gifî\jj% :fej`[\i [peXd`Z jlZZ\jj d\jjX^\j kf _`^_c`^_k k_\ i\jlckj f] X jlZZ\jj]lc ]fid jlYd`jj`fe% 8mf`[ jlZZ\jj d\jjX^\ gX^\ [\X[ \e[j%

213 Chapter 8 Errors and Success

CHAPTER 9

Inline Validation Confirmation Suggestions Limits Best Practices

215 225 228 230

214 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

;

\jg`k\ fli Y\jk \]]fikj kf ]fidXk hl\jk`fej Zc\Xicp Xe[ gifm`[\ d\Xeè^]lc X]]fi[XeZ\j ]fi fli èglkj# jfd\ f] fli hl\jk`fej n`cc XcnXpj _Xm\ dfi\ k_Xe fe\ gfjj`Yc\ Xejn\i% @e k_\j\ ZXj\j# [ì\Zk ]\\[YXZb ZXe _\cg i\Xjjli\ g\fgc\ k_Xk k_\ì Xejn\ij Xi\ mXc`[% K_`j kpg\ f] i\Xc$k`d\ Zfddle`ZXk`fe `j f]k\e `dgc\d\ek\[ Xj ècè\ mXc`[Xk`fe% @ecè\ mXc`[Xk`fe ZXe gifm`[\ j\m\iXc kpg\j f] ]\\[YXZb1 ZfeÔidXk`fe k_Xk Xe Xggifgi`Xk\ Xejn\i nXj ^`m\e# jl^^\jk`fej ]fi mXc`[ Xejn\ij# Xe[ i\Xc$k`d\ lg[Xk\j [\j`ê\[ kf _\cg g\fgc\ jkXp n`k_è e\Z\jjXip c`d`kj% K_\j\ Y`kj f] ]\\[YXZb ljlXccp _Xgg\e n_\e g\fgc\ Y\^è# Zfekèl\# fi jkfg \ek\iè^ Xejn\ij n`k_è èglk Ô\c[j% Confirmation :feÔidè^ Xggifgi`Xk\ Xejn\ij `j dfjk lj\]lc n_\e k_\i\ `j X _`^_ c`b\c`_ff[ k_Xk g\fgc\ nfeËk ^\k k_\ Xejn\i Èi`^_k%É 8 Zfddfe \oXdgc\ `j k_\ j\c\Zk`fe f] X le`hl\ lj\ieXd\% :_XeZ\j Xi\ ^ff[ k_Xk k_\ Ôijk lj\ieXd\ kf 215 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

gfg èkf g\fgc\Ëj _\X[j `j fe\ k_Xk jfd\fe\ \cj\ Xci\X[p ZcX`d\[% Gifm`[è^ k_Xk jg\Z`ÔZ Xejn\i nflc[ p`\c[ Xe \iifi Y\ZXlj\ k_\ N\Y j`k\ le[\ijkXe[j k_Xk `k `j efk ÈmXc`[%É Jfd\fe\ \cj\ Xci\X[p _Xj k_Xk lj\ieXd\% F] Zflij\# `kËj `dgfjj`Yc\ ]fi g\fgc\ kf befn n_Xk lj\ieXd\j Xi\ XmX`cXYc\ kf k_\d n_\e k_\p Xi\ Ôccè^ è X i\^`jkiXk`fe ]fid jf k_\p Zfekèl\ kf ^l\jj Xe[ ^l\jj X^Xè lek`c k_\p jkldYc\ lgfe jfd\k_è^ fYjZli\ \efl^_ efk kf Y\ kXb\e% K_`j j`klXk`fe Y\Zfd\j nfij\ n_\e k_\ ]fid [f\j efk_è^ kf _\cg% @e k_\ 9fè^f \oXdgc\ è =`^li\ 0%(# efk fecp `j k_\i\ ef ]\\[YXZb k_Xk _\cgj g\fgc\ g`Zb X mXc`[ Xejn\i# Ylk k_\ ]\\[YXZb k_Xk k\ccj k_\d Xe \iifi fZZlii\[ `j _Xi[ kf \m\e efk`Z\ Xj `k lj\j k_\ jXd\ ]fek ]XZ\ Xe[ Zfcfi Xj k_\ ]fidËj cXY\cj j\\ :_Xgk\i / ]fi dfi\ fe \iifi d\jjX^\j %

216 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 9.1 top image: http://www.flickr.com/photos/rosenfeldmedia/2367269906 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366433731

In the Boingo sign-up form, people bounce back and forth trying to guess a valid username.

217 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

8e Xck\ieXk\ XggifXZ_ ZXe Y\ j\\e fe k_\ E\njmè\ j`k\ è =`^li\ 0%)% ?\i\# X j`dgc\ je`gg\k f] ècè\ mXc`[Xk`fe gifm`[\j mXclXYc\ ]\\[YXZb k_Xk k\ccj g\fgc\ `] k_\pËm\ \ek\i\[ X mXc`[ Xejn\i% JkXik kpgè^ Xe[ X d\jjX^\ Xgg\Xij k\ccè^ pfl `] k_\ lj\ieXd\ pfl j\c\Zk\[ `j kXb\e fi efk% N_\e pfl gifm`[\ X mXc`[ Xejn\i# k_\ d\jjX^\ lg[Xk\j kf i\Õ\Zk k_Xk% @e k_`j XggifXZ_# g\fgc\ Xi\ efk c\]k ZpZcè^ Y\kn\\e \iifijÇk_\p befn i`^_k XnXp `] k_\ì Xejn\i `j mXc`[ fi efk%

FIGURE 9.2 top image: http://www.flickr.com/photos/rosenfeldmedia/2366433755 middle image: http://www.flickr.com/photos/rosenfeldmedia/2366433789 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367270044

The Newsvine sign-up form uses inline validation to get people to an appropriate display name quickly and without pogo-sticking between error states.

218 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

8efk_\i hl\jk`fe Zfddfecp ]iXl^_k n`k_ \iifij `j k_\ gXjjnfi[% @ nfeËk [n\cc fe k_\ ]XZk k_Xk Xjbè^ g\fgc\ kf ^\e\iXk\ Zfdgc\o ZfdYèXk`fej f] lgg\iZXj\ Xe[ cfn\iZXj\ c\kk\ij# eld\iXcj# Xe[ jpdYfcj `j Xefk_\i \oXdgc\ f] _fn fli Èèj`[\ flkÉ jpjk\dj Zi\Xk\ Zfe]lj`fe ]fi g\fgc\% @ejk\X[# @Ëcc gifm`[\ X nXp n\ ZXe _\cg g\fgc\ fm\iZfd\ k_fj\ fYjkXZc\j k_ifl^_ k_\ lj\ f] ècè\ mXc`[Xk`fe% N_\e n\ kXcb\[ XYflk lj\ieXd\j# X mXc`[ Xejn\i nXj gi\kkp YcXZb Xe[ n_`k\% @kËj \`k_\i X le`hl\ lj\ieXd\ fi `kËj efk% GXjjnfi[j# Xe[ fk_\i hl\jk`fej c`b\ k_\d# ZXe _Xm\ mXipè^ [\î\\j f] Èi`^_k%É 8 gXjjnfi[ k_Xk d\\kj k_\ dè`dld i\hlì\d\ekj ]fi j\Zli`kpÇjXp fe\ lgg\iZXj\ c\kk\i Xe[ fe\ eld\iXcÇ`j X mXc`[ Xejn\i% ?fn\m\i# `k `j efk Xj j\Zli\ Xj X gXjjnfi[ n`k_ fe\ lgg\iZXj\ c\kk\i# knf jpdYfcj# Xe[ k_i\\ eld\iXcj% K_\ cXkk\i Xejn\i `j dfi\ Èi`^_k%É Jf _fn ZXe pfl jk\\i g\fgc\ kfnXi[ k_\ dfi\ j\Zli\ÇXe[ k_\i\]fi\ i`^_k Xejn\ij6

219 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

8j k_\ \9Xp <ogi\jj \oXdgc\ è =`^li\ 0%* j_fnj# pfl ZXe lk`c`q\ ècè\ mXc`[Xk`fe efk fecp kf ZfeÔid Xe Xggifgi`Xk\ gXjjnfi[ _Xj Y\\e gifm`[\[ Ylk Xcjf kf è[`ZXk\ _fn Xggifgi`Xk\ k_Xk gXjjnfi[ `j% K_\ gXjjnfi[ d\k\i kf k_\ i`^_k f] k_`j èglk Ô\c[ ^`m\j

FIGURE 9.3 top image: http://www.flickr.com/photos/rosenfeldmedia/2367270092 middle image: http://www.flickr.com/photos/rosenfeldmedia/2366433889 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366433919

On eBay Express, a progress bar indicates how secure your password is in real time.

220 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

g\fgc\ X _`^_cp m`jlXc nXp kf ^Xl^\ k_\ hlXc`kp f] k_\ì Xejn\i% G\i_Xgj dfi\ `dgfikXekcp# `k Xcjf _\cgj \ejli\ k_Xk g\fgc\ gXp Xkk\ek`fe kf _fn k_\p Xi\ Xejn\iè^ k_`j hl\jk`fe% N_\e gi\j\ek\[ n`k_ X d\k\i f] k_`j kpg\# g\fgc\ Xi\ jkiXe^\cp Zfdg\cc\[ kf Zfdgc\k\ `k% 8j X i\jlck# k_\p glk dfi\ k_fl^_k èkf k_\ì Xejn\ij% @e k_`j jg\Z`ÔZ \oXdgc\# k_\p dXp \e[ lg n`k_ X gXjjnfi[ jf j\Zli\ k_\p ZXeËk i\d\dY\i `k# Ylk k_XkËj X [`]]\i\ek gifYc\d >`m\e k_\ Y\e\Ôkj f] ZfeÔidè^ Xggifgi`Xk\ Xejn\ij è i\Xc k`d\# pfl d`^_k Y\ k\dgk\[ kf Zfej`[\i ljè^ ècè\ mXc`[Xk`fe ]fi Xcc k_\ hl\jk`fej pfl gfj\ è pfli ]fidj% 8]k\i Xcc# n_p efk c\k g\fgc\ befn \m\ip hl\jk`fe k_\pËm\ Xejn\i\[ `j i`^_k Xj k_\p Xejn\i `k6 9p k_\ k`d\ k_\p Zfdgc\k\ k_\ ]fid# k_\i\Ëj ef Z_XeZ\ f] Xe \iifi @Ëm\ _\Xi[ Xi^ld\ekj ]fi Xe[ X^Xèjk k_`j XggifXZ_ `ccljkiXk\[ è =`^li\ 0%+% Fe k_\ fe\ _Xe[# mXc`[Xkè^ Xcc èglk Ô\c[j è i\Xc k`d\ \ejli\j k_Xk X ]fid `j Zfdgc\k\[ Zfii\Zkcp k_\ Ôijk k`d\ k_ifl^_% Fe k_\ fk_\i _Xe[# 221 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 9.4 top image: http://www.flickr.com/photos/rosenfeldmedia/2366433981 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366433951

Lastfm.com uses inline validation on almost every input field in its sign-up form.

mXc`[Xkè^ \m\ipk_è^ Zflc[ efk fecp Y\Zfd\ X [`jkiXZk`fe# `k Zflc[ Xcjf iX`j\ jfd\ \p\Yifnj% ;f\j mXc`[Xkè^ Xe \dX`c X[[i\jj d\Xe k_Xk `k `j# è ]XZk# Xe \dX`c X[[i\jj YXj\[ fe `kj 222 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

]fidXkkè^ # fi k_Xk `k `j dp \dX`c X[[i\jj Xe[ k_`j j`k\ befnj k_Xk jfd\_fn # fi k_Xk k_`j \dX`c X[[i\jj `j Xci\X[p befne kf k_\ j`k\ \jg\Z`Xccp `dgfikXek `] @ Xd i\^`jk\iè^ fi lg[Xkè^ X Zljkfd\i i\Zfi[ 6 K_fl^_ efk \m\ipfe\ n`cc k_èb k_`j nXp# n_p dXb\ g\fgc\ k_èb Xk Xcc6 Lj\ ècè\ mXc`[Xk`fe kf _\cg g\fgc\ n`k_ Xejn\ij k_\p Xi\eËk ^lXiXek\\[ kf befn% @ befn dp eXd\# jf k_\i\Ëj ef e\\[ kf mXc`[Xk\ `k ]fi d\ @] pfl [f Z_ffj\ kf gifm`[\ ècè\ mXc`[Xk`fe ]fi dXep f] k_\ hl\jk`fej pfl Xjb# k`dè^ `j \m\ipk_è^% K_\ Dèk j`ê$lg ]fid è =`^li\ 0%, Yiè^j lg Xe \iifi jkXk\ `dd\[`Xk\cp n_\e jfd\fe\ Y\^èj gifm`[è^ Xe Xejn\i% @e k_\ \oXdgc\ `ccljkiXk\[# @Ëm\ fecp dXeX^\[ kf \ek\i k_\ Ôijk c\kk\i f] dp \dX`c X[[i\jj# Xe[ @Ëd Xci\X[p ]XZ\[ n`k_ Xe \iifi% 8 dlZ_ Y\kk\i XggifXZ_ `j kf fecp gifm`[\ ]\\[YXZb n_\e `kËj Zc\Xi jfd\fe\ `j [fe\ gifm`[è^ Xe Xejn\i% =`^li\ 0%- `ccljkiXk\j k_`j j\hl\eZ\ n_\e jfd\fe\ Zfdgc\k\j _`j fi _\i Xejn\i fe k_\ PX_ff i\^`jkiXk`fe ]fid%

223 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 9.5 top image: http://www.flickr.com/photos/rosenfeldmedia/2367270240 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366434047

Mintâ&#x20AC;&#x2122;s registration form interrupts people when they are answering questions with immediate error messages.

FIGURE 9.6 http://www.flickr.com/photos/rosenfeldmedia/2366434095 Yahoo!â&#x20AC;&#x2122;s registration form only validates an answer once someone has indicated he or she is done by moving to the next input field. 224 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Suggestions ;ì\Zk ]\\[YXZb `jeËk aljk c`d`k\[ kf ZfeÔidè^ k_\ Xejn\ij @ gifm`[\# Ylk `k ZXe Xcjf Y\ lj\[ kf jl^^\jk mXc`[ Xejn\ij% @e j`klXk`fej n_\i\ k_\i\Ëj X jg\Z`ÔZ j\k f] Xejn\ij k_Xk Xi\ mXc`[ Ylk k_Xk j\k `j kff YifX[ kf Ôk èkf X jè^c\ lj\i èk\i]XZ\ \c\d\ek c`b\ X [ifg$[fne d\el fi j\i`\j f] iX[`f Ylkkfej# ècè\ jl^^\jk`fej ZXe _\cg ^\k g\fgc\ kf k_\ i`^_k Xejn\i% Hl`Zb# n_XkËj k_\ Xìgfik Zf[\ ]fi :_`ZX^f# @C6 G\i_Xgj pfl be\n k_\ Xejn\i nXj FI;# g\i_Xgj pfl [`[eËk% @e \`k_\i ZXj\# k_\ ècè\ jl^^\jk`fej fe BXpXb _\cg \ejli\ pfl gifm`[\ k_\ i`^_k Xejn\i n_\e pfl Xi\ kipè^ kf kiXm\c kf k_\ Nè[p :`kp% J`dgcp jkXik kpgè^ ÈZ_`É fi Èfi[#É Xe[ X c`jk f] mXc`[ Xejn\ij pfl ZXe Z_ffj\ ]ifd Xgg\Xij è =`^li\ 0%.% :fdgXi\[ kf ècè\ ZfeÔidXk`fe# k_`j `j X [`]]\i\ek nXp kf \ejli\ k_Xk g\fgc\ gifm`[\ mXc`[ Xejn\ij% @ejk\X[ f] i\Xc$k`d\ Xejn\ij k_Xk jXp Èp\j# k_`j `j mXc`[É fi Èef# `k `j efk#É

225 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 9.7 top image: http://www.flickr.com/photos/rosenfeldmedia/2367270442 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366434187

Kayak.com uses inline suggestions to help people provide valid answers for travel destinations.

ècè\ jl^^\jk`fej jkXk\ È_\i\ Xi\ jfd\ mXc`[ Xejn\ij kf g`Zb ]ifd%É Kf ]lik_\i `ccljkiXk\ k_`j [`]]\i\eZ\# c\kËj cffb X^Xè Xk j\c\Zkè^ X lj\ieXd\% @e ZfekiXjk kf E\njmè\Ëj XggifXZ_ kf ZfeÔidè^ k_\ lj\ieXd\ g\fgc\ j\c\Zk ècè\

226 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

=`^li\ 0%) # PX_ff gifm`[\j X c`jk f] mXc`[ lj\ieXd\ jl^^\jk`fej YXj\[ fe k_\ ]lcc eXd\ k_Xk g\fgc\ gifm`[\[ \Xic`\i `e k_\ ]fid =`^li\ 0%/ % @ \ek\i\[ dp eXd\ Xj ÈClb\ NifYc\njb`É Xk k_\ jkXik f] k_\ ]fid Xe[ i\Z\`m\[ j\m\iXc i\c\mXek# mXc`[ Xejn\ij kf Z_ffj\ ]ifd%

FIGURE 9.8 http://www.flickr.com/photos/rosenfeldmedia/2366434297 Yahoo!’s registration form provides a series of valid usernames based on your name.

8efk_\i Xck\ieXk`m\ kf jl^^\jkè^ mXc`[ èglkj `j j`dgcp dXbè^ g\fgc\Ëj èglkj mXc`[ n_\k_\i k_\p c`b\ `k fi efk% :fej`[\i Xe èglk Ô\c[ k_Xk i\hlì\j g\fgc\ kf gifm`[\ k_\ì g_fe\ eldY\i è X jg\Z`ÔZ ]fidXk c`b\ OOO $OOO$OOOO% 8j @ d\ek`fe\[ è :_Xgk\i ,# n\ j_flc[ j`dgcp XZZ\gk dlck`gc\ ]fidXkj ]fi k_`j YXj`Z èglk# Ylk ]fi efn c\kËj Xjjld\ n\ e\\[ k_`j jg\Z`ÔZ kpg\ f] ]fidXk% 227 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

@] g\fgc\ \ek\i X mXc`[ g_fe\ eldY\i è X [`]]\i\ek ]fidXk# n\ ZXe j`dgcp Z_Xe^\ k_\ì Xejn\i kf k_\ Zfii\Zk fe\% @kËj ZilZ`Xc k_Xk k_`j Z_Xe^\ [f\j efk _Xgg\e n_`c\ g\fgc\ Xi\ XZklXccp \ek\iè^ k_\ì Xejn\ij% @ejk\X[ `k j_flc[ _Xgg\e X]k\i k_\p Xi\ [fe\% Limits =fi hl\jk`fej n`k_flk Zc\Xicp [\Ôe\[ Xejn\ij Ylk Zc\Xicp [\Ôe\[ c`d`kj# ècè\ mXc`[Xk`fe Xcjf Zfd\j è _Xe[p% K_\ PX_ff CfZXc ]fid è =`^li\ 0%0 Xccfnj g\fgc\ kf j\e[ Xe \dX`c kf

FIGURE 9.9 top image: http://www.flickr.com/photos/rosenfeldmedia/2367270528 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367270552

Inline validation can be used to communicate limits, such as the number of characters that can be included in this message on Yahoo! Local. 228 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

]i`\e[j fi ]Xd`cp% Kf Xmf`[ jgXd fi \oZ\jj`m\cp cfe^ Zfek\ek# PX_ff c`d`kj k_\ d\jjX^\ èglk kf (#''' Z_XiXZk\ij% 8j g\fgc\ \ek\i k_\ì Xejn\ij# k_\ Zflek\i Y\cfn k_\ èglk Ô\c[ gifm`[\j i\Xc$k`d\ lg[Xk\j fe _fn dlZ_ dfi\ k_\p ZXe kpg\% K_`j kpg\ f] ècè\ mXc`[Xk`fe _\cgj Xmf`[ gfk\ek`Xc \iifij `] g\fgc\ n\i\ kf \oZ\\[ k_\ c`d`kj f] k_\ èglk Ô\c[% @kËj `dgfikXek kf efk\ k_Xk k_\ PX_ff Z_XiXZk\i Zflek lg[Xk\j `dd\[`Xk\cp Xj pfl kpg\% 8ep j`ê`ÔZXek [\cXp nflc[ c`d`k k_\ lj\]lce\jj f] k_`j ]\Xkli\%

229 Chapter 9 Inline Validation

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices :fej`[\i ljè^ ècè\ mXc`[Xk`fe kf ZfeÔid fi jl^^\jk mXc`[ Xejn\ij Xe[ kf _\cg g\fgc\ jkXp n`k_è c`d`kj% @ecè\ ZfeÔidXk`fe nfibj Y\jk ]fi hl\jk`fej n`k_ gfk\ek`Xccp _`^_ \iifi iXk\j fi jg\Z`ÔZ ]fidXkkè^ i\hlì\d\ekj% @ecè\ jl^^\jk`fej nfib Y\jk n_\e k_\i\ `j X cXi^\ j\k f] mXc`[ Xejn\ij g\fgc\ ZXe g`Zb ]ifd% @ecè\ hlXc`kp è[`ZXkfij ZXe ^l`[\ g\fgc\ kf Y\kk\i Xejn\ij kf Zfdgc\o hl\jk`fej% N_\e mXc`[Xkè^ g\fgc\Ëj Xejn\ij ècè\# [f jf X]k\i k_\p _Xm\ Ôe`j_\[ gifm`[è^ Xe Xejn\i# efk [liè^ k_\ gifZ\jj% @] pfl e\\[ kf Z_Xe^\ g\fgc\Ëj i\jgfej\j èkf X jg\Z`ÔZ ]fidXk# dXb\ jli\ pfl [f jf X]k\i k_\p _Xm\ Ôe`j_\[ gifm`[è^ Xe Xejn\i# efk [liè^ k_\ gifZ\jj% N_\e èglk c`d`kj \o`jk# Zfddle`ZXk\ k_\ì Yfle[Xi`\j ljè^ i\Xc$k`d\# [peXd`Z lg[Xk\j%

230 Chapter 9 Inline Validation

CHAPTER 10

Unnecessary Inputs Removing Questions Smart Defaults Personalized Defaults Best Practices

232 239 246 248

231 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

ep hl\jk`fe pfl Xjb g\fgc\ i\hlì\j k_\d kf gXij\ `k# ]fidlcXk\ X i\jgfej\# Xe[ k_\e èglk k_\ì Xejn\i è k_\ X]]fi[XeZ\ pfl _Xm\ gifm`[\[ fe k_\ ]fid% 9\è^ m`^`cXek XYflk \m\ip hl\jk`fe pfl Xjb Xccfnj pfl kf i\dfm\ hl\jk`fej k_Xk Xi\ efk XYjfclk\cp e\Z\jjXip# fi ZXe Y\ Xjb\[ Xk X Y\kk\i k`d\ fi gcXZ\# fi ZXe Y\ è]\ii\[ XlkfdXk`ZXccp% 8e[ k_\ ]\n\i hl\jk`fej pfl Xjb# k_\ Y\kk\i k_\ f[[j Xi\ f] g\fgc\ Zfdgc\kè^ pfli ]fidj hl`Zbcp Xe[ \Xj`cp% Removing Questions N_\e \9Xp @eZ% i\[\j`ê\[ `kj i\^`jkiXk`fe ]fid è )'')# k_\ ZfdgXep ZXi\]lccp Zfej`[\i\[ \XZ_ hl\jk`fe Xe[ [\Z`[\[ n_`Z_ fe\j n\i\ efk XYjfclk\cp e\Z\jjXip% @kËj gifYXYcp efk X ZfèZ`[\eZ\ k_Xk jfd\ f] k_\j\ n\i\ Xcjf k_\ jXd\ hl\jk`fej k_Xk ki`gg\[ lg gfk\ek`Xc Zljkfd\ij1 XeelXc _flj\_fc[ èZfd\# ^\e[\i# gifdfk`feXc Zf[\j# Xe[ [Xk\ f] Yìk_ =`^li\ ('%( %

232 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 10.1 http://www.flickr.com/photos/rosenfeldmedia/2367270680 eBay’s old registration form asked a number of questions that tripped up potential customers.

Dfmè^ j\m\iXc fgk`feXc hl\jk`fej flk f] k_\ i\^`jkiXk`fe ]fid gifYXYcp i\hlì\[ jfd\ e\^fk`Xk`fe n`k_ k_\ g\fgc\ m\jk\[ è k_\ì Xejn\ijÇdXib\kè^ Xe[ kiljk Xe[ jX]\kp k\Xdj Xk k_\ ZfdgXep% K_\ `dgXZk# _fn\m\i# nXj ki\d\e[flj Y\ZXlj\ X cfk dfi\ g\fgc\ i\^`jk\i\[ jlZZ\jj]lccp Xe[ Y\^Xe kf lj\ \9Xp% 8e[ g\i_Xgj ìfe`ZXccp# j`ê`ÔZXekcp dfi\ g\fgc\ Xejn\i\[ k_\ fgk`feXc hl\jk`fej n_\e k_\p n\i\ Xjb\[ X]k\i k_\p i\^`jk\i\[

233 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

F] Zflij\# efk Xcc hl\jk`fej fe X ]fid Xi\ lee\Z\jjXip% 9lk \m\e n_\e pflËm\ glk è k_\ \]]fik kf dXb\ jli\ k_Xk \m\ipk_è^ pfl Xi\ Xjbè^ g\fgc\ `j# è ]XZk# i\hlì\[ kf d\\k lj\i e\\[j fi Yljè\jj ^fXcj# k_\i\ dXp jk`cc Y\ Xe fggfikle`kp kf ki`d lee\Z\jjXip èglk Ô\c[j% GXpGXcËj gXpd\ek ]fid cffbj c`b\ X kpg`ZXc j\k f] hl\jk`fej k_Xk i\hlì\ Xe Xejn\i n_\e jfd\fe\ `j kipè^ kf dXb\ X gliZ_Xj\ fecè\ =`^li\ ('%) % G\fgc\ Xi\ Xjb\[ kf j\c\Zk k_\ kpg\ f] Zi\[`k ZXi[ k_\p Xi\ ljè^ kf gXp Xe[ k_\e gifm`[\ k_\ eldY\i ]fi k_Xk ZXi[%

FIGURE 10.2 http://www.flickr.com/photos/rosenfeldmedia/2367270722 This PayPal form asks people to select the type of credit card they are using to make a purchase. Is that necessary?

234 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

?fn\m\i# `k kliej flk fe\ f] k_\j\ hl\jk`fej `j lee\Z\jjXip% :i\[`k ZXi[ eldY\ij ]fccfn X Zfej`jk\ek jkilZkli\% 8d\i`ZXe <ogi\jj ZXi[j jkXik n`k_ \`k_\i *+ fi *.% DXjk\iZXi[ eldY\ij Y\^è n`k_ ,(Ă&#x2020;,,% M`jX ZXi[j jkXik n`k_ +% 8e[ jf fe% K_`j è]fidXk`fe ZXe Y\ lj\[ kf è]\i n_Xk kpg\ f] Zi\[`k ZXi[ jfd\fe\ `j ljè^ j`dgcp Yp cffbè^ Xk _`j Zi\[`k ZXi[ eldY\i% @e k_\ i\[\j`ê\[ ]fid è =`^li\ ('%*# GXpGXc [f\j \oXZkcp k_Xk% N_\e jfd\fe\ \ek\ij X Zi\[`k ZXi[ eldY\i# k_\ Xggifgi`Xk\ ZXi[ kpg\

FIGURE 10.3 http://www.flickr.com/photos/rosenfeldmedia/2367270740 The redesigned PayPal form eliminates an unnecessary question by highlighting the type of credit card being used.

235 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

`j _`^_c`^_k\[ [ì\Zkcp Y\cfn% K_`j \c`dèXk\j k_\ e\\[ kf Xjb g\fgc\ n_Xk kpg\ f] Zi\[`k ZXi[ k_\p _Xm\Çfe\ c\jj hl\jk`fe kf gXij\# k_èb k_ifl^_# Xe[ i\jgfe[ kf% N_\e pfl Xi\ cffbè^ ]fi nXpj kf i\[lZ\ lee\Z\jjXip èglkj# `kËj `dgfikXek kf k_èb k_ifl^_ X eldY\i f] Zfej`[\iXk`fej% @e k_\ GXpGXc \oXdgc\# k_\ ]fli bè[j f] Zi\[`k ZXi[j GXpGXc XZZ\gkj Xcc ]fccfn X Zfej`jk\ek eldY\iè^ jpjk\d# jf k_\ èk\iXZk`fe nfibj% Fe k_\ N\Y\i Z_\Zbflk ]fid è =`^li\ ('%+# g\fgc\ Xi\ Xjb\[ ]fi k_\ì q`g Zf[\ Ôijk Xe[ k_\e ^`m\e X j\k f] Z_f`Z\j ]fi k_\ì Z`kp Xe[ jkXk\% Fe k_\ gclj j`[\# k_`j èk\iXZk`fe [\j`ê i\dfm\j jfd\ XnbnXi[ nXpj f] Xejn\iè^ hl\jk`fejÇ jg\Z`ÔZXccp# [ifg$[fne d\elj ]fi jkXk\j k_Xk ile ,' \eki`\j _`^_% Fe k_\ e\^Xk`m\ j`[\# k_\ nXp X j`dgc\ hl\jk`fe `j Xjb\[ _Xj Y\\e dX[\ dfi\ Zfdgc`ZXk\[% N_\e ]XZ\[ n`k_ X j\k f] èglk Ô\c[j k_Xk dXkZ_ k_\ jkilZkli\ f] X dX`cè^ X[[i\jj# g\fgc\ f]k\e jb`g fm\i cXY\cj Xj k_\p

236 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 10.4 top image: http://www.flickr.com/photos/rosenfeldmedia/2366434677 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367270962

Weberâ&#x20AC;&#x2122;s checkout form tries to eliminate questions, but potentially ends up complicating the form more. 237 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Ôcc è k_\ g`\Z\j% K_\ Zfdgfe\ekj Xe[ cXpflk f] X L%J% dX`cè^ X[[i\jj Xi\ ]Xd`c`Xi kf aljk XYflk \m\ipfe\ è k_\ Le`k\[ JkXk\j% K_\ N\Y\i j`k\ Yi\Xbj k_`j jkilZkli\ Yp Xjbè^ ]fi k_\ q`g Zf[\ flk f] fi[\i% @k Xcjf i\dfm\j k_\ i\[le[XeZp è_\i\ek è Xjbè^ g\fgc\ ]fi X q`g Zf[\ Xe[ Z`kp&jkXk\% K_\ Le`k\[ JkXk\j GfjkXc J\im`Z\j _Xj [\c`Y\iXk\cp efk i\dfm\[ k_\j\ Ô\c[j ]ifd dX`cè^ cXY\cj gi\Z`j\cp Y\ZXlj\ g\fgc\ f]k\e d`jkpg\ fe\ fi k_\ fk_\i% 8efk_\i è[`ZXkfi k_Xk k_\ hl\jk`fe Y\è^ Xjb\[ _Xj ^fkk\e dfi\ Zfdgc`ZXk\[ `j k_\ \ok\ej`m\ _\cg k\ok i\e[\i\[ è i\[ k\ok e\Xi k_\ Z`kp Xe[ jkXk\ j\c\Zk`fe% F[[j Xi\ k_Xk N\Y\i _X[ kf X[[ k_`j kf _\cg g\fgc\ le[\ijkXe[ n_Xk kf \og\Zk ]ifd k_\ ]fid% K_\ ZfdgXep Xcjf gifYXYcp dX[\ k_\ _\cg k\ok i\[ jf g\fgc\ nflc[ efk`Z\ `k jèZ\ dfjk g\fgc\ gXjj fm\i èjkilZk`feXc k\ok n_\e Ôccè^ è ]fidj lec\jj k_\p ]\\c k_\p e\\[ `k% Kipè^ kf [iXn Xkk\ek`fe kf _\cg k\ok è k_`j nXp `j efk X[m`j\[# Xj i\[ k\ok ]fi Xepk_è^ Ylk \iifij j_flc[ Y\ Xmf`[\[% 238 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

@ek\ieXk`feXc Zljkfd\ij Xi\ Xcjf flk f] clZb Y\ZXlj\ N\Y\i [f\j efk j_`g fm\ij\Xj% @] `k [`[# Zc\Xicp k_`j èk\iXZk`fe nflc[ efk nfib n_\e jg\Z`]pè^ èk\ieXk`feXc X[[i\jj\j k_Xk [f efk lk`c`q\ k_\ Le`k\[ JkXk\j q`g Zf[\ jpjk\d% Jf Xck_fl^_ k_\ N\Y\i \oXdgc\ i\dfm\j jfd\ lee\Z\jjXip èglkj# @ k_èb k_\ alip `j jk`cc flk fe n_\k_\i k_`j j`dgc`Ô\[ k_\ ]fid fi efk% Smart Defaults @e K_\ GXiX[fo f] :_f`Z\#( Xlk_fi 9Xiip JZ_nXikq [`jZljj\j k_\ `dgXZk f] _Xmè^ kff dXep Z_f`Z\j è fli c`m\j Xe[ jl^^\jkj jfd\ jkiXk\^`\j ]fi Zfgè^ n`k_ k_\ \oZ\jj`m\ fgk`fej n\ \eZflek\i aljk XYflk \m\ipn_\i\% @e gXik`ZlcXi# _\ flkcè\j k_\ gfn\i f] jdXik [\]XlckjÇj\c\Zk`fej glk è gcXZ\ k_Xk j\im\ k_\ èk\i\jkj f] dfjk g\fgc\ÇXj X nXp kf _\cg g\fgc\ dXb\ ^ff[ Z_f`Z\j% JZ_nXikq i\]\i\eZ\j fi^Xe [fefi gifîXdj Xj Xe \oXdgc\% @e k_\ Le`k\[ JkXk\j# 0' g\iZ\ek (

9Xiip JZ_nXikq# GXiX[fo f] :_f`Z\# )''+% ?Xig\i G\i\ee`Xc 239 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

f] 8d\i`ZXej Xggifm\ f] fi^Xe [feXk`fe Ylk fecp ), g\iZ\ek Xi\ fi^Xe [fefij% @e j\m\iXc <lifg\Xe Zfleki`\j# fm\i /' g\iZ\ek f] g\fgc\ Xi\ [fefij% K_\ [`]]\i\eZ\ Zfd\j [fne kf X [\]Xlck Z_f`Z\% @e k_\ L%J%# k_\ fi^Xe [fefi fgk`fe `j [\]Xlck\[ f]]% <cj\n_\i\# `k `j [\]Xlck\[ fe% K_\i\ Xi\ dXep fggfikle`k`\j n`k_è N\Y ]fidj kf lk`c`q\ k_\ gfn\i f] jdXik [\]Xlckj kf i\[lZ\ k_\ eldY\i f] Z_f`Z\j g\fgc\ _Xm\ kf dXb\ Xe[ k_\i\Yp \og\[`k\ ]fid Zfdgc\k`fe% @e k_\ j_`ggè^ Zfjkj gfik`fe f] \9XpËj Èj\cc pfli `k\dÉ ]fid j\\ =`^li\ ('%, # k_i\\ [\]Xlck Z_f`Z\j Xi\ dX[\ ]fi j\cc\ij1 jkXe[Xi[ [\c`m\ip# èjliXeZ\ efk f]]\i\[# Xe[ jXc\j kXo efk Z_Xi^\[% 9\ZXlj\ k_\j\ Z_f`Z\j i\jlck è k_\ c\Xjk Xdflek f] fm\i_\X[ ]fi dfjk j\cc\ij fe \9Xp# k_\p Xi\ jdXik [\]Xlckj k_Xk j`dgc`]p k_\ [\Z`j`fe$dXbè^ gifZ\jj% Efk jli\ n_Xk j_`ggè^ j\im`Z\ kf lj\6 JkXe[Xi[ [\c`m\ip `j k_\ dfjk Zfddfe% ;feËk befn `] pfl e\\[ kf Z_Xi^\ jXc\j kXo6 Cffbj c`b\ pfl [feËk _Xm\ kf% JdXik [\]Xlckj gifm`[\ Xejn\ij kf hl\jk`fej ]fi pfl% 240 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 10.5 http://www.flickr.com/photos/rosenfeldmedia/2366434777 Smart defaults on the eBay “sell your item” form include answers for shipping service, insurance, and sales tax.

9\ZXlj\ f] k_\ gfn\i f] jdXik [\]Xlckj# `k `j k\dgkè^ kf fgk g\fgc\ èkf j`klXk`fej X[mXekX^\flj ]fi Yljè\jj Ylk gfk\ek`Xccp c\jj jf ]fi Zljkfd\ij% =fi \oXdgc\# `kËj Zfddfe kf \eZflek\i ]fidj k_Xk fgk Zljkfd\ij èkf dX`cè^ c`jkj fi \okiX ]\Xkli\j Yp [\]Xlck j\\ =`^li\ ('%- %

FIGURE 10.6 http://www.flickr.com/photos/rosenfeldmedia/2367271034 This form defaults people into showing their real name and getting marketing materials from the site and third parties.

241 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

@] gfjj`Yc\# kip kf \ejli\ k_Xk k_\ [\]Xlckj pfl èZcl[\ è ]fidj Xc`ê n`k_ pfli Zljkfd\ijË èk\i\jkj% N_\e g\fgc\ Xi\ [\]Xlck\[ èkf j\im`Z\j fi fgk`fej k_\p [feËk c`b\# `k ZXjkj [flYk Xe[ jljg`Z`fe fe pfli j\im`Z\% @Ëm\ j\\e j\m\iXc èjkXeZ\j n_\i\ X [\]Xlck Z_f`Z\ dX[\ gfk\ek`Xc Zljkfd\ij nXip \efl^_ kf gXZb lg k_\ì YX^j Xe[ efk Zfdgc\k\ X ]fid% G\i_Xgj k_\ j`dgc\jk ]fid f] X [\]Xlck j\c\Zk`fe `j X gi\j\c\Zk\[ fgk`fe n`k_è X j\k f] iX[`f Ylkkfej% N_\i\ Xggifgi`Xk\# ^`m\ jfd\ k_fl^_k kf n_Xk k_Xk è`k`Xc j\c\Zk`fe `j Xe[ n_\k_\i fi efk `k `j k_\ i`^_k Z_f`Z\ ]fi k_\ dXafi`kp f] g\fgc\ \eZflek\iè^ pfli ]fid% 9\ZXlj\ f] k_\ gfn\i f] jdXik [\]Xlckj# Z_XeZ\j Xi\ k_Xk dXep g\fgc\ n`cc jk`Zb n`k_ k_Xk fgk`fe% Kf X[[i\jj k_`j Y\_Xm`fi# X cfk f] iX[`f Ylkkfe èglkj [feËk èZcl[\ Xe è`k`Xc j\c\Zk`fe j\\ =`^li\ ('%. % <`k_\i k_\ ]fid [\j`ê\ij Xi\eËk jli\ n_Xk k_\ i`^_k [\]Xlck j_flc[ Y\# fi k_\p

242 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 10.7 http://www.flickr.com/photos/rosenfeldmedia/2366434835 A set of radio buttons without an initially selected option on Redfin.

nXek g\fgc\ kf \ogc`Z`kcp dXb\ X j\c\Zk`fe% @ek\iXZk`fe [\j`ê\ij nflc[ Xi^l\ k_Xk k_`j Yi\Xbj k_\ df[\c f] X dlklXccp \oZclj`m\ èk\iXZk`fe \c\d\ek% 8]k\i Xcc# X j\k f] iX[`f Ylkkfej n`k_flk Xe \ogc`Z`k j\c\Zk`fe n`cc i\jlck è Xe \iifi n_\e X ]fid `j jlYd`kk\[% N_`c\ k_`j `j kil\# g\fgc\ jlZZ\jj]lccp dXb\ j\c\Zk`fej ]ifd j\kj f] iX[`f Ylkkfej n`k_flk X [\]Xlck Z_f`Z\ Xcc k_\ k`d\% 8e[ dlklXccp \oZclj`m\ Z_f`Z\j \o`jk n_\i\ ef [\]Xlck fgk`fe dXb\j j\ej\%

243 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

:fej`[\i k_\ hl\jk`fe f] ^\e[\i1 dXc\ fi ]\dXc\ j\\ =`^li\ ('%/ 6 8 iX[`f Ylkkfe èglk `j _Xi[$gi\jj\[ kf j\c\Zk X [\]Xlck mXcl\ n`k_flk jfle[è^ gi\jldgklflj% 8 [ifg$[fne d\el n`k_ X k_ì[ ÈGc\Xj\ j\c\ZkÉ fgk`fe èZi\Xj\j k_\ eldY\i f] jk\gj e\\[\[ kf Xejn\i k_`j j`dgc\ hl\jk`fe1 Zc`Zb fe k_\ d\el# [iX^ k_\ dflj\ kf j\c\Zk X Z_f`Z\# c\k ^f f] k_\ dflj\% J`dgcp Zc`Zbè^ X iX[`f Ylkkfe `j dlZ_ \Xj`\i% G\i_Xgj k_\ nXp kf ^\k k_\ Y\jk f] Yfk_ nfic[j `j Yp ljè^ X [ifg$[fne d\el n`k_ X k_ì[ fgk`fe1 ÈiXk_\i efk jXp%É K_`j nXp pflËi\ efk Y\è^ fm\icp glj_p

FIGURE 10.8 top image: http://www.flickr.com/photos/rosenfeldmedia/2366434865 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367271104

What’s the right default state for gender?

244 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

JdXik [\]Xlckj [feËk nfib m\ip n\cc n_\e k_\i\ `jeËk X Zc\Xi fgk`fe k_Xk Xggc`\j kf dfjk g\fgc\% K_\ Mfo i\^`jkiXk`fe ]fid è =`^li\ ('%0 [\]Xlckj k_\ Yìk_ [Xk\ kf AXe (# (0.,ÇgifYXYcp efk k_\ Yìk_[Xp f] \m\ipfe\ n_f ki`\j kf i\^`jk\i ]fi k_\ j`k\% 8 Y\kk\i jfclk`fe j`dgcp nflc[ Y\ kf Xjb g\fgc\ kf \ogc`Z`kcp j\c\Zk k_\ dfek_# [Xp# Xe[ p\Xi k_\p n\i\ Yfie% 8e[ n_`c\ pflËi\ Xk `k# c\k k_\d befn n_p pfl Xi\ Xjbè^% \9Xp è =`^li\ ('%0 k\ccj pfl k_Xk `k `jeËk Y\è^ efj\p2 pfl aljk ZXeËk j\cc fe \9Xp lec\jj pfl Xi\ (/%

FIGURE 10.9 top image: http://www.flickr.com/photos/rosenfeldmedia/2366434913 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366434933

Let’s not assume we can guess everyone’s birth date.

JdXik [\]Xlckj ZXe Xcjf Zfd\ ]ifd g\fgc\Ëj `dgc`Z`k Y\_Xm`fij% =fi èjkXeZ\# `] pfl befn jfd\fe\ `j XZZ\jjè^ pfli ]fid ]ifd k_\ Le`k\[ JkXk\j# pfl d`^_k Zfej`[\i [\]Xlckè^ k_\

245 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

È:flekipÉ èglk Ô\c[ kf ÈLe`k\[ JkXk\j%É @] pfl befn k_Xk 0' g\iZ\ek f] pfli Zljkfd\ij c`m\ è k_\ L%J%# pfl d`^_k [f k_\ jXd\% Personalized Defaults JdXik [\]Xlckj ZXe Xcjf Y\ g\ijfeXccp i\c\mXek kf è[`m`[lXcj% =fi èjkXeZ\# `] @ XcnXpj lj\ =\[\iXc <ogi\jj Xj dp J_`ggè^ J\im`Z\ n_\e @ j\cc `k\dj fe \9Xp# k_\ J_`ggè^ J\im`Z\ j\c\Zk`fe n\ jXn \Xic`\i Zflc[ Y\ [\]Xlck\[ kf dp g\ijfeXc Z_f`Z\% B\\gè^ j\c\Zk`fej XZk`m\ ]fi i\klieè^ Zljkfd\ij `j f]k\e i\]\ii\[ kf Xj dXbè^ k_\d Èjk`Zbp#É n_`Z_ YXj`ZXccp d\Xej jk`Zbè^ n`k_ k_\ Z_f`Z\ X Zljkfd\i dX[\ Y\]fi\% K_fl^_ jfd\ ]fidj j\k X _`^_ YXi ]fi _fn dXep k`d\j X Z_f`Z\ dljk Y\ dX[\ è fi[\i kf Y\Zfd\ Èjk`Zbp#É dXep fecp i\hlì\ X jè^c\ k`d\ k_ifl^_ kf j\k X g\ijfeXc`q\[ [\]Xlck% <og\[`X# ]fi \oXdgc\# j\kj dp [\]Xlck kiXm\c fgk`fej kf k_\ cXjk j\k f] k`Zb\kj @ cffb\[ ]fi j\\ =`^li\ ('%(' % K_\ ]fid Zflc[ Y\ \m\e jdXik\i

246 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

`] `k [\]Xlck\[ kf dp cXjk j\k f] kiXm\c fgk`fej fecp lek`c `k be\n @ Yfl^_k X k`Zb\k ]fi k_Xk ki`g% @e Xcc fk_\i ZXj\j# `k Zflc[ j`dgcp [\]Xlck kf dp dfjk ]i\hl\ekcp lj\[ [\gXikli\ X`igfik%

FIGURE 10.10 left image: right image:

http://www.flickr.com/photos/rosenfeldmedia/2367270636 http://www.flickr.com/photos/rosenfeldmedia/2366434375

Smart defaults for travel options on the Expedia site, based on previous usage.

247 Chapter 10 Unnecessary Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices :Xi\]lccp \oXdè\ Xcc k_\ hl\jk`fej Y\è^ Xjb\[ è pfli ]fid ]fi fggfikle`k`\j kf \c`dèXk\ lee\Z\jjXip èglkj% Cffb ]fi gXkk\iej è _fn g\fgc\ Xejn\i hl\jk`fej k_Xk Xccfn pfl kf è]\i Xejn\ij XZZliXk\cp% 9\ dè[]lc efk kf Zfdgc`ZXk\ hl\jk`fej ]fi k_\ jXb\ f] i\dfmè^ èglkj% JdXik [\]Xlckj ZXe _\cg g\fgc\ Xejn\i hl\jk`fej Yp glkkè^ [\]Xlck j\c\Zk`fej è gcXZ\ k_Xk j\im\ k_\ èk\i\jkj f] dfjk g\fgc\% 9\ZXlj\ g\fgc\ Xi\ c`b\cp kf c\Xm\ [\]Xlck j\c\Zk`fej è gcXZ\# \ejli\ k_\p Xc`ê n`k_ dfjk g\fgc\Ëj ^fXcj% N_\e\m\i gfjj`Yc\# èZcl[\ X [\]Xlck j\c\Zk`fe è X j\k f] iX[`f Ylkkfej% @] ef Zc\Xi [\]Xlck \o`jkj# Z_XeZ\j Xi\ k_Xk g\fgc\ n`cc jk`cc le[\ijkXe[ k_\p e\\[ kf dXb\ X Z_f`Z\% 9lk `] k_\p [feËk# k_\pËcc ^\k Xe \iifi% G\ijfeXccp i\c\mXek [\]Xlck j\c\Zk`fej \eXYc\ i\klie Zljkfd\ij kf Zfdgc\k\ ]fidj ]Xjk\i Y\ZXlj\ k_\ì Xejn\ij Xi\ Èjk`Zbp%É K_èb k_ifl^_ n_\i\ g\ijfeXc`q\[ [\]Xlckj dXb\ j\ej\% @k nfeËk Y\ \m\ip èglk fe \m\ip ]fid% 248 Chapter 10 Unnecessary Inputs

CHAPTER 11

Additional Inputs Inline Additions Overlays Progressive Engagement Best Practices

250 254 265 269

249 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

fk Xcc g\fgc\ i\hlì\ Xcc k_\ èglk Ô\c[j n`k_è X ]fid Xk Xcc k`d\j% K_\i\ Xi\ dXep ZXj\j n_\i\ X ]\n j`dgc\ fgk`fej Zfm\i k_\ dXafi`kp f] g\fgc\Ëj e\\[j% =fi k_\ i\dXèè^ ZXj\j# n\ ZXe klie kf X[[`k`feXc èglkj1 ècè\ X[[`k`fej# fm\icXpj# Xe[ gifî\jj`m\ \e^X^\d\ek% Inline Additions @ecè\ X[[`k`fej gifm`[\ X[[`k`feXc èglk Ô\c[j kf k_\ g\fgc\ k_Xk e\\[ k_\d n`k_flk ^\kkè^ è k_\ nXp f] g\fgc\ k_Xk [feËk% K_\j\ èglk Ô\c[j Xi\ f]k\e k_fl^_k f] Xj X[mXeZ\[ fi X[[`k`feXc fgk`fej# Ylk k_\p [feËk _Xm\ kf Y\ Xep dfi\ Zfdgc`ZXk\[ k_Xe X efidXc j\k f] Z_f`Z\j gi\j\ek\[ è k_\ ]fid Yp [\]Xlck% C\kËj cffb Xk X j`dgc\ \oXdgc\% Dfjk f] k_\ g\fgc\ Ôccè^ flk k_\ k\Xd Yl`c[è^ ]fid è =`^li\ ((%( n`cc _Xm\ fecp fe\ dXeX^\i% @e k_Xk ZXj\# k_\p j`dgcp \ek\i k_\ì dXeX^\iËj Ôijk Xe[ cXjk eXd\ Xe[ dfm\ fe% 8 jdXcc eldY\i f] g\fgc\# dfjk c`b\cp ]\n\i k_Xe (' g\iZ\ek# n`cc _Xm\ dfi\ k_Xe fe\ dXeX^\i% K_\j\ ]fcbj ZXe j\c\Zk È8[[ Xefk_\i dXeX^\iÉ kf \ogfj\ èglk 250 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Ô\c[j ]fi dlck`gc\ dXeX^\ij% FeZ\ k_\p [f jf# k_\p _Xm\ k_\ fgk`fe kf i\dfm\ k_\j\ X[[`k`feXc èglk Ô\c[j \Xj`cp% K_\ fi`^èXc èglk Ô\c[# _fn\m\i# ZXeefk Y\ i\dfm\[% <m\ipfe\ Ôccè^ è k_\ ]fid _Xj Xk c\Xjk fe\ dXeX^\i# Xe[ k_\ ècè\ X[[`k`fej [feËk ^\k è k_\ nXp f] k_Xk gi`dXip kXjb%

FIGURE 11.1 http://www.flickr.com/photos/rosenfeldmedia/2366435241 Adding a varying number of managers to a form doesn’t have to trip up people with only one manager.

251 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

8efk_\i \oXdgc\ ZXe Y\ ]fle[ è k_\ gifa\Zk dXeX^\d\ek Xggc`ZXk`fe# 9Xj\ZXdg =`^li\j ((%) Xe[ ((%* % @e k_`j Xggc`ZXk`fe# k_\ ]fid ]fi Zi\Xkè^ X e\n d\jjX^\ ]\Xkli\j knf \oXdgc\j f] ècè\ X[[`k`fej% @] g\fgc\ e\\[ kf XkkXZ_ X Ôc\ fi X d`c\jkfe\ kf k_\ d\jjX^\ k_\p Xi\ Xlk_fiè^# k_\p ZXe \ogfj\ X[[`k`feXc èglk Ô\c[j k_Xk \eXYc\ k_\d kf [f jf n`k_ X jè^c\ Zc`Zb% G\fgc\ k_Xk [feËk e\\[ k_\j\ ]\Xkli\j ZXe j`dgcp `êfi\ k_\ cèbj k_Xk \ogfj\ k_\d Xe[ Zfekèl\ fe n`k_ k_\ ]fid% @kËj gifYXYcp nfik_ efkè^ k_Xk è Yfk_ f] k_\ \oXdgc\j n\ _Xm\ j\\e jf ]Xi# k_\ cèbj kf \ogfj\ ècè\ X[[`k`fej _Xm\ Y\\e Zc\Xicp nfi[\[ jf k_\ì ]leZk`feXc`kp `j Zc\Xi1 8kkXZ_ Ôc\j kf k_`j d\jjX^\# X[[ Xefk_\i dXeX^\i% @e k_\ 9Xj\ZXdg \oXdgc\# ècè\ X[[`k`fej Xi\ \ogfj\[ Y\cfn k_\ XZk`fe k_Xk ki`^^\ij k_\d# Xe[ X Zc\Xi nXp kf i\dfm\ k_\ fgk`fej `j gifm`[\[1 X m`j`Yc\ cèb cXY\c\[ È:XeZ\c%É Fk_\i ]fidj f] ècè\ X[[`k`fej dXp \ogfj\

252 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURES 11.2 & 11.3 Figure 11.2 Figure 11.3

http://www.flickr.com/photos/rosenfeldmedia/2367271520 http://www.flickr.com/photos/rosenfeldmedia/2366435381

Exposing additional inline options in Basecamp is triggered by well-labeled links.

253 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

èglk Ô\c[j kf k_\ i`^_k fi XYfm\ k_\ XZk`fej k_Xk ki`^^\i\[ k_\d kf Xmf`[ kff dlZ_ gX^\ Èaldgè^É n_\e e\n Zfek\ek `j X[[\[ kf k_\ ]fid% GX^\ aldgè^ glj_\j \o`jkè^ Zfek\ek [fne k_\ ]fid Xe[ ZXe jfd\k`d\j [`jilgk g\fgc\Ëj XnXi\e\jj f] k_\ì gfj`k`fe fe k_\ gX^\% 8j X i\jlck# `kËj XcnXpj X ^ff[ `[\X kf kip Xe[ dè`d`q\ k_\ Xdflek f] gX^\ aldgè^ n`k_è X ]fid% N_\e ljè^ ècè\ X[[`k`fej k_Xk \ogfj\ X[[`k`feXc èglk Ô\c[j Y\cfn Xe XZk`fe# kip kf Xmf`[ m\ip cXi^\ j\kj f] èglk Ô\c[j k_Xk n`cc glj_ k_\ Zfek\ek fe X N\Y gX^\ [fne jlYjkXek`Xccp% N_\e pfl _Xm\ X cfk f] X[[`k`feXc fgk`fej# \ogfjè^ k_\d kf k_\ j`[\ fi è Xe fm\icXp d`^_k Y\ X Y\kk\i fgk`fe% Overlays 8efk_\i nXp kf [`jgcXp X[[`k`feXc fgk`fej `j kf lj\ Xe fm\icXp1 X j\k f] X[[`k`feXc èglk Ô\c[j k_Xk j`kj fe kfg f] X ]fid c`b\ X [`Xcf^ nè[fn fe pfli Zfdglk\iËj [\jbkfg% G\i_Xgj k_\ dfjk Zfddfe \oXdgc\ f] k_\j\ `j k_\ ZXc\e[Xi

254 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

n`[^\k k_Xk Xccfnj g\fgc\ kf j\c\Zk jg\Z`ÔZ [Xk\j Xj Xejn\ij kf hl\jk`fej gfj\[ Yp X ]fid% K_\ jXdgc\ ]fid BXpXb è =`^li\ ((%+ j_fnj lg XlkfdXk`ZXccp n_\e k_\ [Xk\ Ô\c[ `j XZk`m\ Xe[ gifm`[\j knf dfek_jË nfik_ f] [Xk\j kf Z_ffj\ ]ifd% :c\Xicp èZcl[è^ Xcc k_\j\ [Xk\j fe k_\ ]fid nflc[ _Xm\ X[[\[ X cfk f] ef`j\Ç `kËj dlZ_ Y\kk\i kf jli]XZ\ k_\j\ fgk`fej fecp n_\e k_\p Xi\ e\\[\[%

FIGURE 11.4 http://www.flickr.com/photos/rosenfeldmedia/2366435399 The date picker on Kayak is an example of an overlay that provides quick access to a lot of options.

255 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

9\ZXlj\ dXep ki`gj Xi\ c`b\cp kf jgXe X n\\b fi dfi\# BXpXbËj fm\icXp èk\ek`feXccp jli]XZ\j knf dfek_jË nfik_ f] [Xk\j% K_`j dXb\j `k \Xj`\i ]fi g\fgc\ kf XZZ\jj k_\ fgk`fej k_\p e\\[% FiY`kq =`^li\ ((%, # fe k_\ fk_\i _Xe[# fecp Yiè^j lg fe\ dfek_ f] fgk`fej Xk X k`d\# ZXljè^ g\fgc\ kf jZifcc dfek_ Yp dfek_ kf Ôe[ k_\ [Xk\ k_\p e\\[% JèZ\ FiY`kq _Xj ^fe\ k_ifl^_ k_\ kiflYc\ f] Zf[è^ Xe[ jli]XZè^ k_`j fm\icXp# n_p efk kXb\ X[mXekX^\ f] k_\ X[[\[ jgXZ\ Xe[ ^`m\ g\fgc\ dfi\ lj\]lc fgk`fej kf g`Zb ]ifd6

FIGURE 11.5 http://www.flickr.com/photos/rosenfeldmedia/2366435435 Only one month’s worth of dates shows up in the Orbitz date selector.

256 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

@e Yfk_ k_\ FiY`kq Xe[ BXpXb \oXdgc\j# k_\ [Xk\ j\c\Zk`fe fgk`fej Xi\ jli]XZ\[ XlkfdXk`ZXccp n_\e jfd\fe\ gcXZ\j _`j Zlijfi è k_\ Xggifgi`Xk\ èglk Ô\c[% ?fn\m\i# fecp BXpXb gifm`[\j Xe è[`ZXkfi k_Xk k_`j n`cc _Xgg\e Yp èZcl[è^ X jdXcc ZXc\e[Xi `Zfe n`k_è k_\ èglk Ô\c[ =`^li\ ((%+ % K_`j m`jlXc Zl\ _\cgj kf j\k \og\ZkXk`fej k_Xk X ZXc\e[Xi n`cc Y\ dX[\ XmX`cXYc\% 8e[ n_`c\ Yfk_ k_\ FiY`kq Xe[ BXpXb èglk Ô\c[j jk`cc Xccfn g\fgc\ kf \ek\i X [Xk\ n`k_flk ljè^ k_\ ZXc\e[Xi fm\icXp# k_\ BXpXb fm\icXp [f\j efk Zfm\i k_\ èglk Ô\c[ Xe[ k_\i\Yp ^\kj è g\fgc\Ëj nXp n_\e k_\p [f jf% N_\i\ X[[`k`feXc fgk`fej Xi\ Zc\Xicp lj\]lcÇ c`b\ k_\ kiXm\c [Xk\j \oXdgc\ n\ aljk cffb\[ XkÇXlkfdXk`ZXccp [`jgcXpè^ k_\ X[[`k`feXc fgk`fej è Xe fm\icXp dXp Y\ Y\e\ÔZ`Xc% @e dXep fk_\i j`klXk`fej# X ]fid [\j`ê\iËj

257 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Xkk\dgk kf Zc\m\icp jli]XZ\ X[[`k`feXc fgk`fej d`^_k Y\ d\k n`k_ Zfe]lj`fe fi XeefpXeZ\% Dfjk X[[`k`feXc fgk`fej Xi\ Y\jk c\]k Èlj\i$ XZk`mXk\[#É d\Xeè^ k_\p ^`m\ g\fgc\ Ôccè^ è k_\ ]fid k_\ fgk`fe f] n_\k_\i fi efk k_\p j\\ Xe[ lk`c`q\ X[[`k`feXc èglk Ô\c[j% @eZ`[\ekXccp# ZXc\e[Xi fm\icXpj fe kiXm\c N\Y j`k\j [`[ efk XcnXpj fg\e XlkfdXk`ZXccp c`b\ k_\p [f kf[Xp% <XZ_ j`k\ lj\[ kf _Xm\ Xe \ogc`Z`k Zfekifc ljlXccp X ZXc\e[Xi `Zfe ]fi _`[è^ Xe[ j_fnè^ k_\j\ \c\d\ekj j\\ =`^li\ ((%- % Fecp Xj g\fgc\Ëj e\\[j Xe[ Y\_Xm`fij ZXd\ kf Y\ Y\kk\i le[\ijkff[ Xe[ k\Z_efcf^p Y\ZXd\ dfi\ [\g\e[XYc\ [`[ k_\j\ fgk`fej Y\^è kf jli]XZ\ XlkfdXk`ZXccp% K_\ ZXc\e[Xi fm\icXpj n\Ëm\ j\\e jf ]Xi [feËk i\hlì\ g\fgc\Ëj le[`m`[\[ Xkk\ek`fe% 9lk n_\e X[[`k`feXc èglkj e\\[ kf Y\ Zfej`[\i\[

FIGURE 11.6 http://www.flickr.com/photos/rosenfeldmedia/2366435537 Older iterations of the Expedia date picker featured an explicit action to bring up a calendar overlay. 258 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

è `jfcXk`fe# X df[Xc fm\icXp nè[fn d`^_k Y\ i\hlì\[% @e k_`j jfclk`fe# k_\ i\jk f] k_\ ]fid ZXe# è \jj\eZ\# Y\ [`jXYc\[ jf k_Xk fecp k_\ X[[`k`feXc èglk Ô\c[j ZXe Y\ Z_Xe^\[% EXkliXccp# c\kËj `ccljkiXk\ k_`j n`k_ Xe \oXdgc\% Fe k_\ I\ebff gifÔc\ ]fid è =`^li\ ((%.# X[mXeZ\[ efk`ÔZXk`fe fgk`fej Xi\ XmX`cXYc\ kf k_\ ]i\hl\ek lj\ij n_f i\hlì\ k_\d% K_\ dXafi`kp f] g\fgc\ n_f [feËk e\\[ k_`j c\m\c f] Zfekifc Xi\ XYc\ kf j`dgcp j\c\Zk X jè^c\ nXp kf i\Z\`m\ efk`ÔZXk`fej% @e fk_\i nfi[j# k_\ X[[`k`feXc èglkj [feËk èk\i]\i\ n`k_ k_\ dfjk Zfddfe fe\j% N_\e X[[`k`feXc èglkj Xi\ XZk`mXk\[# X df[Xc [`Xcf^ nè[fn Xgg\Xij k_Xk Xccfnj g\fgc\ kf jg\Z`]p [\kX`c\[ efk`ÔZXk`fe j\kkè^j% @kËj `dgfikXek k_Xk k_\ j\c\Zk`fej dX[\ n`k_è Xe fm\icXp Xi\ m`j`Yc\ fe k_\ fi`^èXc ]fid feZ\ k_\ fm\icXp `j Zcfj\[% @e k_\ ZXj\ f] k_\ ZXc\e[Xi n`[^\k# n\ gcXZ\[ X [Xk\ èkf k_\ Xggifgi`Xk\

259 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

èglk Ă&#x201D;\c[% @e k_\ I\ebff \oXdgc\ è =`^li\ ((%.# k_\ efk`Ă&#x201D;ZXk`fe j\kkè^j g\fgc\ j\c\Zk Xi\ c`jk\[ fe k_\ ]fid n_\e k_\ df[Xc fm\icXp `j Zcfj\[%

FIGURE 11.7 top image: http://www.flickr.com/photos/rosenfeldmedia/2367271814 http://www.flickr.com/photos/rosenfeldmedia/2367271858 bottom image:

The advanced notification preferences on the Renkoo profile form are displayed in a modal dialog window.

260 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

@]# lgfe j\\è^ k_\ X[[`k`feXc èglk Ô\c[j è X df[Xc fm\icXp# g\fgc\ [feËk nXek kf dXb\ Xep X[[`k`feXc Z_f`Z\j# k_\p ZXe j`dgcp Zcfj\ k_\ nè[fn ljè^ k_\ `Zfe è k_\ lgg\i$i`^_k f] k_\ [`Xcf^# ZXeZ\c k_\ì j\c\Zk`fej ljè^ k_\ :XeZ\c cèb# fi Zc`Zb Xepn_\i\ f]] k_\ df[Xc fm\icXp kf i\klie kf k_\ ]fid% \9XpËj j\ccè^ ]fid è =`^li\ ((%/ lj\j X j`d`cXi èk\iXZk`fe% Dfi\ jXmmp j\cc\ij ZXe Z_ffj\ kf Zljkfd`q\ k_\ ]fid kf èZcl[\ fgk`fej k_\p ]i\hl\ekcp lj\ Xe[ i\dfm\ k_\ fgk`fej k_\p [feËk% 8 df[Xc [`Xcf^ nè[fn gifm`[\j k_\j\ j\cc\ij n`k_ X nXp kf g`Zb k_\ fgk`fej k_\p nXek kf j\\ fe k_\ ]fid%

FIGURE 11.8 http://www.flickr.com/photos/rosenfeldmedia/2366435721 A modal overlay in eBay’s “Sell your Item” form lets people add or remove questions on the form. 261 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Jack Moffett

Interaction Designer, Inmedius Inc. Adjunct Professor, West Virginia University

A Case Study of Explosive Ordnance Disposal @kËj efk \m\ip [Xp k_Xk pfl [\j`ê X ]fid lj\[ Xj k_\ gi\Zlijfi kf X c`]\$Xe[$[\Xk_ j`klXk`fe% N_\e ÈEldY\i f] ;\Xk_jÉ `j fe\ f] k_\ ]`\c[ cXY\cj# pfl ZXe Y\ Z\ikXè k_Xk \m\ip [\j`ê [\Z`j`fe `j Xe `dgfikXek fe\% <ogcfj`m\ Fi[eXeZ\ ;`jgfjXc <F; le`kj f] k_\ L%J% d`c`kXip jg\e[ X cfk f] \]]fik Zfcc\Zkè^ Xe[ XeXcpqè^ èZ`[\ek [XkX% 9p XeXcpqè^ YfdY Zfdgfe\ekj# èZ`[\ek cfZXk`fej# \e\dp kXZk`Zj# Xe[ d`jj`fe g\i]fidXeZ\# k_\p ZXe `dgifm\ k_\ì fne kXZk`Zj Xe[ gifZ\[li\j Xe[ Y\kk\i kiXè k_\ nXi]`^_k\ij% JlZ_ [XkX `j Zfcc\Zk\[ ljè^ k_\ <F; @eZ`[\ek I\gfik# n_`Z_ `j X dXjj`m\ Zfcc\Zk`fe f] ]fidj Zfm\iè^ Xcc jkX^\j f] X d`jj`fe% 8 k_i\Xk `j g_fe\[ èkf Xe <F; le`k# ljlXccp Yp cfZXc cXn \e]fiZ\d\ek% K_\ nXi]`^_k\i kXbè^ k_\ ZXcc dljk hl\jk`fe k_\ ZXcc\i kf XZhlì\ k_\ e\Z\jjXip è]fidXk`fe% K_\ èk\im`\n dljk Y\ k_fifl^_# Ylk dljk Xcjf Y\ Zfdgc\k\[ hl`Zbcp jf k_Xk k_\ d`jj`fe ZXe Y\ gcXee\[ Xe[ k_\ k\Xd ZXe ^\k le[\inXp% K_\ @e`k`Xc @eZ`[\ek Hl\jk`feeXì\ @@H _Xj j\Zk`fej ]fi ZfekXZk è]fidXk`fe# k_i\Xk ZcXjj`]`ZXk`fe# Xe[ è]fidXk`fe XYflk k_\ \ogcfj`m\ [\m`Z\% Fe\ gXik`ZlcXicp Zfdgc\o g`\Z\ f] è]fidXk`fe `j k_\ k_i\Xk cfZXk`fe% K_\i\ Xi\ ]fli [`]]\i\ek ]fidXkj Yp n_`Z_ k_\ cfZXk`fe Zflc[ Y\ i\gfik\[ fi \ek\i\[% =fi d`jj`fej n`k_è k_\ Le`k\[ JkXk\j# X jki\\k X[[i\jj `j k_\ dfjk c`b\cp% KXjbè^ è ZfdYXk j`klXk`fej n`cc èZcl[\ k_\ cfZXk`fe è D`c`kXip >i`[ I\]\i\eZ\

262 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Jack Moffett (Continued) Jpjk\d D>IJ ]fidXk% NXi]`^_k\ij Xi\ XZZljkfd\[ kf nfibè^ n`k_ cXk`kl[\ Xe[ cfe^`kl[\ Zffi[èXk\j è Yfk_ [\Z`dXc [\î\\j Xe[ [\î\\j&dèlk\j&j\Zfe[j% I\^Xi[c\jj f] k_\ ]fidXk è n_`Z_ `k `j i\gfik\[ Xe[ \ek\i\[# k_\ ]èXc i\gfik dljk lj\ D>IJ% Kf èZcl[\ Xcc f] k_\j\ d\k_f[j [ì\Zkcp è k_\ ]fid nflc[ X[[ X cfk f] Zfdgc\o`kp# gi\j\ekè^ dfi\ fggfikle`kp ]fi Zfe]lj`fe Xe[ dXbè^ k_\ ]fid kff cfe^ kf ]`k fe k_\ jZi\\e n`k_flk jZifccè^% Kf b\\g k_\ ]fid Xj Zc\Xi Xj gfjj`Yc\# k_\ cfZXk`fe \ekip fgk`fej n\i\ dfm\[ èkf X [`Xcf^ XZZ\jj\[ ]ifd X Ylkkfe è k_\ @@H% K_\ CfZXk`fe [`Xcf^ gifm`[\j X kXY ]fi \XZ_ f] k_\ cfZXk`fe \ekip d\k_f[j% 8ep [XkX \ek\i\[ è fe\ kXY n`cc Y\ Zfem\ik\[ fi Zfg`\[ kf k_\ fk_\ij% =fi \oXdgc\# `] k_\ nXi]`^_k\i n\i\ kf \ek\i X cfZXk`fe è cXk&cfe Zffi[èXk\j Xe[ k_\e jn`kZ_ kf http://www.flickr.com/photos/ k_\ D>IJ kXY# k_\ rosenfeldmedia/2405623743 Zffi[èXk\j nflc[ Y\ Zfem\ik\[ kf Xe D>IJ mXcl\% K_\ 8[[i\jj kXY gifm`[\j cffblg ZXgXY`c`k`\j j`d`cXi kf dXggè^ Xggc`ZXk`fej c`b\ >ff^c\ DXgj# ]ifd n_`Z_ Zffi[èXk\j ZXe Y\ [\i`m\[ ljè^ X ^\fZf[\i% 8[[i\jj

263 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Jack Moffett (Continued) è]fidXk`fe dXp Y\ \ek\i\[ è Xep kXY# Xj `k dXp Y\ [\jìXYc\ Xcfe^j`[\ D>IJ Zffi[èXk\j% N_\e k_\ \ek\i\[ cfZXk`fe [XkX `j jXm\[# k_\ [`Xcf^ Zcfj\j% K_\ D>IJ mXcl\ Xe[ Xep \ek\i\[ X[[i\jj è]fidXk`fe fi i\dXibj Xi\ [`jgcXp\[ è k_\ @@H Xj Xe le\[`kXYc\ i\X[flk% :ffi[èXk\ \ekip `j `kj\c] X j`ê`]`ZXek `jjl\% K_\ CfZXk`fe [`Xcf^ `j lj\[ k_ifl^_flk k_\ <F; @eZ`[\ek I\gfikÇXepn_\i\ k_Xk X cfZXk`fe e\\[j kf Y\ i\Zfi[\[% K_\ nXi]`^_k\i \ek\iè^ k_\ cfZXk`fe n`cc efk XcnXpj Y\ j`kkè^ Xk X [\jb# Xe[ n`cc k_\i\]fi\ Y\ ljè^ X kXYc\k n`k_ X kflZ_$jZi\\e% Kf ]XZ`c`kXk\ \Xjp \ekip ljè^ X ]è^\i fi jkpclj# ]`\c[j Xi\ XZZfdgXe`\[ Yp `Zfej k_Xk gfg lg jg\Z`]`Z b\pgX[j% =fi \oXdgc\# fe k_\ CXk&Cfe kXY# k_\ `Zfe Y\j`[\ k_\ CXk`kl[\ Xe[ Cfe^`kl[\ ]`\c[j fg\ej k_\ CXk&Cfe B\pgX[% IX[`f Ylkkfej Xccfn j\c\Zk`fe f] <Xjk fi N\jk fi Efik_ Xe[ Jflk_ % K_\ ]`\c[ è k_\ b\pgX[# Xj è k_\ [`Xcf^# `j ]fidXkk\[ ]fi \`k_\i [\Z`dXc [\î\\j# fi [\î\\j# dèlk\j# Xe[ j\Zfe[j# [\g\e[è^ fe k_\ j\c\Zk\[ ]fidXk% @k n`cc fecp XZZ\gk mXc`[ mXcl\j% 9lkkfej Xi\ cXi^\ \efl^_ kf Y\ kXi^\k\[ \Xj`cp Yp X ]è^\i% B\pYfXi[ èglk `j Xcjf XZZ\gk\[# Ylk fYj\imXk`fej f] nXi]`^_k\ij è[`ZXk\ k_Xk k_\p gi\]\i kf lj\ k_\ b\pgX[j ]fi eld\i`ZXc \ekip \m\e n_`c\ j\Xk\[ Xe[ lk`c`qè^ k_\ g_pj`ZXc b\pYfXi[% K_\ [\j`ê f] k_\ @@H [\Zi\Xj\j k_\ Xdflek f] k`d\ `k kXb\j ]fi X k\Xd kf i\Z\`m\ kXjbè^# n_`c\ Xk k_\ jXd\ k`d\ `dgifmè^ k_\ mXc`[`kp f] \ek\i\[ [XkX% B\pgX[j dXb\ `k \Xjp kf \ek\i [XkX n`k_ X ]è^\i Xe[ mXc`[Xk\ k_\ [XkX Xj `k `j \ek\i\[% K_\ lj\ f] [`Xcf^j n`k_ j`dgc`]`\[ i\X[flkj jXm\j jgXZ\ Xe[ b\\gj k_\ ]fid i\X[XYc\ n_`c\ i\kXèè^ k_\ ]c\o`Y`c`kp X]]fi[\[ Yp gifm`[è^ dlck`gc\ \ekip fgk`fej% @e k_\ ZXj\ f] k_`j ]fid# \c`dèXkè^ \iifij Xe[ jXmè^ k`d\ ZXe jXm\ c`m\j% 264 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Progressive Engagement FZZXj`feXccp# X[[`k`feXc èglkj ZXe Y\ lk`c`q\[ kf \ogfj\ X j\k f] fgk`fej è X dfi\ \e^X^è^ nXp k_Xe X kpg`ZXc j\k f] èglk ﾃ能c[j d`^_k% =fi èjkXeZ\# `] pfl e\\[ pfli Zljkfd\ij kf j\c\Zk X ZXk\^fip ]fi k_\ì \m\ek ]ifd X c`jk f] X [fq\e fi dfi\ gfk\ek`Xc fgk`fej# X Zfddfe jfclk`fe nflc[ Y\ kf gcXZ\ k_\ fgk`fej èkf X jè^c\ [ifg$[fne d\el fi g\i_Xgj j\m\iXc Zfcldej f] iX[`f Ylkkfej% @e ]XZk# k_\ gfglcXi m`[\f j`k\ PflKlY\ _Xj lj\[ Yfk_ jfclk`fej =`^li\ ((%0 n_\e Xjbè^ g\fgc\ kf j\c\Zk X ZXk\^fip ]fi k_\ì m`[\fj%

FIGURE 11.9 top image: http://www.flickr.com/photos/rosenfeldmedia/2366435751 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367271976

Two ways of selecting a category for your video on YouTube.

265 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

:fekiXjk Yfk_ f] k_\j\ jfclk`fej kf k_\ gifZ\jj f] g`Zbè^ X ZXk\^fip ]fi Xe \m\ek fe I\ebff è =`^li\ ((%('% K_\ è`k`Xc jkXk\ f] k_`j èglk `j m\ip XggifXZ_XYc\1 X jè^c\ ZXcc kf XZk`fe cXY\c\[ Èj\c\Zk X ZXk\^fip%É :c`Zbè^ fe k_`j cèb \ogfj\j X Zfcfi]lc j\k f] fgk`fej% J\c\Zkè^ fe\ f] k_\j\ kfg$c\m\c ZXk\^fi`\j \ogfj\j k_\ e\ok c\m\c f] fgk`fej% K_ifl^_ X ]\n j\\dè^cp èefZlflj Zc`Zbj# g\fgc\ _Xm\ eXm`^Xk\[ k_ifl^_ fm\i *' ZXk\^fip fgk`fej# p\k k_\ gifZ\jj j\\d\[ bè[ f] ]le%

266 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 11.10 top image: http://www.flickr.com/photos/rosenfeldmedia/2367271246 middle image: http://www.flickr.com/photos/rosenfeldmedia/2366435115 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367271374

A fun category selector on Renkoo.

267 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Fe\ f] k_\ [iXnYXZbj f] k_`j jfclk`fe# _fn\m\i# `j k_Xk Xcc *' fgk`fej Xi\ e\m\i j_fne Xk feZ\ jf g\fgc\ [feËk _Xm\ k_\ XY`c`kp kf j\\ Xcc gfjj`Yc\ Z_f`Z\j n`k_flk Zc`Zbè^ k_ifl^_ \XZ_ f] k_\ kfg$c\m\c ZXk\^fi`\jÇg\i_Xgj Xe \]ÔZ`\eZp m\ijlj \e^X^\d\ek kiX[\$f]]% 8efk_\i \]ÔZ`\eZp jkldYcè^ gfèk `j k_Xk k_\ eldY\i f] Zc`Zbj i\hlì\[ kf g`Zb X ZXk\^fip `j _`^_\i k_Xe k_\ jè^c\ Zc`Zb pflË[ e\\[ kf g`Zb ]ifd X j\k f] iX[`f Ylkkfej% Jk`cc# n_\e X le`hl\ \e^X^\d\ek jkpc\ `j dfi\ `dgfikXek k_Xe gli\ \]ÔZ`\eZp# X jfclk`fe c`b\ I\ebffËj d`^_k Y\ X ^ff[ Ôk%

268 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices 8[[`k`feXc èglkj ZXe Y\ lj\[ kf gifm`[\ X[[\[ fi X[mXeZ\[ fgk`fej kf k_\ g\fgc\ n_f e\\[ k_\d n`k_flk ^\kkè^ è k_\ nXp f] g\fgc\ n_f [feËk% Pfl j_flc[ dXg X[[`k`feXc èglkj kf gi`fi`k`q\[ Zljkfd\i e\\[j% Gi`dXip lj\ ZXj\j j_flc[ Y\ lg ]ifek Xe[ m`j`Yc\2 j\Zfe[Xip lj\ ZXj\j dXp Y\ X Zc`Zb XnXp% 8[[`k`feXc èglkj Xi\ ljlXccp dfi\ n\cZfd\ n_\e èmfb\[ Yp g\fgc\ lj\i$XZk`mXk\[ k_Xe n_\e XlkfdXk`ZXccp jli]XZ\[% <ejli\ k_Xk k_\ XZk`fej k_Xk ki`^^\i X[[`k`feXc fgk`fej Xi\ Zc\Xicp nfi[\[% @] X[[`k`feXc fgk`fej Xi\ ki`^^\i\[ XlkfdXk`ZXccp# kip kf gifm`[\ X Zcl\ `Zfe# k\ok k_Xk j\kj \og\ZkXk`fej% N`k_è X jè^c\ ]fid# kip kf dXèkXè X Zfej`jk\ek XggifXZ_ kf X[[`k`feXc èglkj%

269 Chapter 11 Additional Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices (continued) @] pfl e\\[ kf \ogfj\ X cXi^\ eldY\i f] X[[`k`feXc èglkj# Zfej`[\i ljè^ Xe fm\icXp èjk\X[ f] \ogfjè^ k_\d ècè\ kf Xmf`[ gX^\ aldgè^ Xe[ [`jfi`\ekXk`fe% <ejli\ k_Xk fm\icXpj [feËk Zfm\i k_\ èglk Ô\c[j k_\p Xi\ _\cgè^ g\fgc\ Ôcc è jf g\fgc\ ZXe jk`cc \ek\i Xe Xejn\i fe k_\ì fne% N_\e X[[`k`feXc fgk`fej e\\[ kf Y\ Zfej`[\i\[ è `jfcXk`fe# Zfej`[\i ljè^ X df[Xc fm\icXp% DXb\ jli\ k_Xk k_\i\ Xi\ Zc\Xi nXpj kf Zcfj\ fi ZXeZ\c X df[Xc fm\icXp Xe[ i\klie kf k_\ ]fid% J_fn k_\ Z_f`Z\j dX[\ è X[[`k`feXc èglk fm\icXpj kf g\fgc\ n_\e k_\p i\klie kf k_\ ]fid% N_\e pfli gi`dXip ^fXc `j kf \e^X^\ Zljkfd\ij# X[[`k`feXc èglkj ZXe Y\ X ZXgk`mXkè^ nXp kf jk\g g\fgc\ k_ifl^_ Z_f`Z\j%

270 Chapter 11 Additional Inputs

CHAPTER 12

SelectionDependent Inputs Page-Level Selection Horizontal Tabs Vertical Tabs Drop-Down List Expose Below Radio Buttons Expose Within Radio Buttons Exposed Inactive Exposed Groups Best Practices

276 279 282 285 287 290 292 295 299

271 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

_\i\Xj Õ\o`Yc\ èglkj Xccfn g\fgc\ kf Xejn\i hl\jk`fej _fn k_\p nXek# Xe[ X[[`k`feXc èglkj Xccfn g\fgc\ kf èZcl[\ jlggc\d\ekXip hl\jk`fej k_\p nXek kf Xejn\i# j\c\Zk`fe$[\g\e[\ek èglkj i\hlì\ g\fgc\ kf Xejn\i ]fccfn$lg hl\jk`fej YXj\[ fe k_\ì Xejn\i kf Xe è`k`Xc hl\jk`feÇljlXccp n`k_flk _Xmè^ kf ^f kf Xefk_\i N\Y gX^\% @] k_Xk jfle[j c`b\ X dflk_]lc# Zfej`[\i k_\ ]fccfnè^ \oXdgc\ è =`^li\ ()%(# fe k_\ =fle[ 9è% G\fgc\ _Xm\ knf è`k`Xc fgk`fej1 \`k_\i k_\p Xi\ X e\n lj\i fi X i\klieè^ lj\i% ;\g\e[è^ fe _fn k_\p Xejn\i k_\ hl\jk`fe# X j\i`\j f] ]fccfn$lg hl\jk`fej e\\[j kf Y\ Xejn\i\[% N_`Z_ èglk Ô\c[j Xi\ j_fne [\g\e[j fe k_\ è`k`Xc j\c\Zk`fe k_\p dXb\Ç _\eZ\ k_\ eXd\# j\c\Zk`fe [\g\e[\ek èglkj%

272 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 12.1 top image: http://www.flickr.com/photos/rosenfeldmedia/2366436465 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367272584

A simple selection-dependent input on Found Bin displays follow-up questions based on someone’s initial selection.

K_\ eldY\i f] èglkj k_Xk Xi\ i\hlì\[ X]k\i Xe è`k`Xc j\c\Zk`fe [\g\e[j fe k_\ hl\jk`fe Xjb\[% Fe =fle[ 9è fecp X ]\n èglk Ô\c[j Z_Xe^\% Fe k_\ \9Xp [fnecfX[ i\hl\jk ]fid è =`^li\ ()%)# cfkj f] hl\jk`fej Xi\ [\g\e[\ek fe X g\ijfeËj è`k`Xc Z_f`Z\% 8]k\i Xe \9Xp j\cc\i j\c\Zkj k_\ Jfc[ fgk`fe è k_\ C`jkè^j Xe[ I\Zfi[j [ifg$[fne c`jk# k_\ ]fid gi\j\ekj X[[`k`feXc èglk Ô\c[j ]fi 273 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 12.2 top image: http://www.flickr.com/photos/rosenfeldmedia/2367272730 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367272832

Selection-dependent inputs on eBayâ&#x20AC;&#x2122;s download request page bring up a series of follow-up questions based on an initial response.

274 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

j\c\Zkè^ X [Xk\ iXe^\% N\i\ k_\ j\cc\i kf j\c\Zk X [`]]\i\ek fgk`fe è k_\ C`jkè^j Xe[ I\Zfi[j c`jk# Zfdgc\kè^ k_\ ]fid nflc[ i\hlì\ X [`]]\i\ek j\k f] X[[`k`feXc fgk`fej% @kËj nfik_ gfèkè^ flk k_Xk# è dfjk ZXj\j# g\fgc\ ZXeefk jlYd`k X ]fid n`k_ j\c\Zk`fe$ [\g\e[\ek èglkj lek`c k_\p Ôcc è k_\ X[[`k`feXc Ô\c[j% @e fk_\i nfi[j# j\c\Zk`fe$ [\g\e[\ek èglkj èkif[lZ\ X[[`k`feXc i\hlì\d\ekj kf ]fidj% K_fl^_ Yfk_ k_\ \9Xp Xe[ =fle[ 9è ]fidj dXb\ lj\ f] j\c\Zk`fe$[\g\e[\ek èglkj# k_\p [f jf è [`]]\i\ek nXpj% =fle[ 9è lj\j X j\k f] m\ik`ZXc kXYj \e]fiZ\[ Yp iX[`f Ylkkfej kf gi\j\ek `kj è`k`Xc fgk`fej Xe[ k_\e _`^_c`^_kj k_\ [\g\e[\ek èglkj kf k_\ i`^_k f] k_\j\ Z_f`Z\j% Fe `kj :i\Xk\ ;fnecfX[ I\hl\jk =fid# \9Xp lj\j X jè^c\ [ifg$[fne d\el ]fi k_\ è`k`Xc Z_f`Z\ Xe[ k_\e Xgg\e[j [\g\e[\ek èglkj [ì\Zkcp Y\cfn k_`j è`k`Xc j\c\Zk`fe% N_`c\ j\c\Zk`fe$[\g\e[\ek èglkj dXp j\\d c`b\ X YXj`Z lj\i èk\i]XZ\ [\j`ê gifYc\d# k_\i\ Xi\ dpi`X[ jfclk`fej kf Y\ ]fle[ X[[i\jjè^ 275 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k_`j gifYc\d fecè\# è[`ZXkè^ k_\i\Ëj dfi\ Zfdgc\o`kp kf k_`j èk\iXZk`fe k_Xe fe\ d`^_k è`k`Xccp Xjjld\% @e ]XZk# \XZ_ jfclk`fe ]fi j\c\Zk`fe$[\g\e[\ek èglkj k\e[j kf _Xm\ Yfk_ Zc\Xi X[mXekX^\j Xe[ [`jX[mXekX^\j% 9lk iXk_\i k_Xe j\e[è^ pfl f]] èkf ]fid cXe[ kf ]\e[ ]fi pflij\c]# Cfe[fe$YXj\[ ljXY`c`kp Ôid <ki\ Xe[ @ iXe X j\i`\j f] jkl[`\j k\jkè^ X j\i`\j f] \`^_k [`]]\i\ek j\c\Zk`fe$[\g\e[\ek èglk jfclk`fej% 8j è fli gi`dXip Xe[ j\Zfe[Xip XZk`fej jkl[p flkcè\[ \Xic`\i è k_\ Yffb# n\ k\jk\[ k_\j\ mXi`Xk`fej fe )* g\fgc\ ljè^ \p\$ kiXZbè^ Xe[ ljXY`c`kp d\ki`Zj% GXik`Z`gXekj n\i\ gi\j\ek\[ \XZ_ f] k_\ \`^_k [\j`êj è iXe[fd fi[\i kf dè`d`q\ ]Xd`c`Xi`kp Y`Xj\j Xe[ Xjb\[ kf ÈGc\Xj\ Zfdgc\k\ k_\ ]fid ]lccp Xe[ XZZliXk\cp%É K_\ jfclk`fej n\ k\jk\[ n\i\ YXj\[ fe X c`jk @ _X[ glYc`j_\[ fecè\# jf efk \m\ip gfjj`Yc\ jfclk`fe nXj k\jk\[% Jfiip `] @ d`jj\[ pfli ]Xmfi`k\ Page-Level Selection G\i_Xgj k_\ j`dgc\jk nXp kf X[[i\jj j\c\Zk`fe$ [\g\e[\ek èglkj n`k_è X ]fid `j kf [`m`[\ 276 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k_\ gifZ\jj èkf knf Zc\Xicp [\Ôe\[ jk\gj% Fe k_\ N\Y# k_`j dfjk f]k\e kiXejcXk\j kf knf j\gXiXk\ N\Y gX^\j j\\ =`^li\ ()%* % K_\ Ôijk gX^\Çfi jk\g è k_\ gifZ\jjÇgi\j\ekj g\fgc\ n`k_ Xe è`k`Xc j\k f] fgk`fej% 8]k\i k_\p j\c\Zk fe\ f] k_\ fgk`fej# k_\ Xggifgi`Xk\ j\k

FIGURE 12.3 top image: http://www.flickr.com/photos/rosenfeldmedia/2366436649 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367272932

Page level selection-dependent inputs place follow-up questions on a separate Web page from the initial choice.

277 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

f] j\c\Zk`fe$[\g\e[\ek èglkj i\gcXZ\j k_\ì è`k`Xc j\c\Zk`fe% N_`c\ k_\ i\cXk`fej_`g Y\kn\\e k_\ì è`k`Xc j\c\Zk`fe Xe[ k_\ [\g\e[\ek èglkj `j Zc\Xi kf dfjk g\fgc\# k_\ knf$jk\g df[\c i\dfm\j mXclXYc\ Zfek\ok pfl ZXe ef cfe^\i j\\ Xe[ \Xj`cp XZZ\jj k_\ fgk`fej pfl [`[ efk Z_ffj\ feZ\ lj\ij dXb\ Xe è`k`Xc j\c\Zk`fe% K_`j jfclk`fe `j Xcjf c`b\cp kf Y\ jcfn\i kf Zfdgc\k\ k_Xe ècè\ jfclk`fej k_Xk [feËk dfm\ Y\kn\\e N\Y gX^\j% @e fli k\jkè^# gX^\$c\m\c j\c\Zk`fe g\i]fid\[ Xm\iX^\cp% @k XZ_`\m\[ Xm\iX^\ jXk`j]XZk`fe jZfi\j# X i\cXk`m\cp cfn eldY\i f] \iifij# Xe[ ]Xì\[ n\cc fe \p\$kiXZbè^ d\Xjli\j c`b\ eldY\i f] \p\ ÔoXk`fej# kfkXc c\e^k_ f] ÔoXk`fej# Xe[ Xm\iX^\ ÔoXk`fe c\e^k_% ?fn\m\i# k_`j jfclk`fe _X[ k_\ j\Zfe[ cfe^\jk Zfdgc\k`fe k`d\ f] Xcc k_\ fgk`fej n\ k\jk\[% Jf `] pfl Xi\ cffbè^ ]fi X jX]\ jfclk`fe n`k_ Xm\iX^\ g\i]fidXeZ\# Xe[ hl`Zb Zfdgc\k`fe k`d\j Xi\ efk X ZfeZ\ie# gX^\$c\m\c j\c\Zk`fe$ [\g\e[\ek èglkj d`^_k Y\ X ^ff[ dXkZ_% 278 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Horizontal Tabs Kf Xmf`[ X[[`k`feXc N\Y gX^\j n`k_è ]fidj# [\j`ê\ij _Xm\ \ogcfi\[ j\m\iXc ècè\ XggifXZ_\j kf \ogfjè^ j\c\Zk`fe$[\g\e[\ek èglkj% @e fe\ XggifXZ_# _fi`qfekXc kXYj XiiXe^\[ XZifjj k_\ kfg f] X gXe\c# Xj j_fne è =`^li\ ()%+# Xccfn g\fgc\ kf eXm`^Xk\ kf X

FIGURE 12.4 top image: http://www.flickr.com/photos/rosenfeldmedia/2366436711 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367272994

Horizontal tab selection-dependent inputs reveal follow-up questions when people click on each tab.

279 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

j\Zk`fe f] k_\ ]fid k_Xk ZfekXèj Xggifgi`Xk\ j\c\Zk`fe$[\g\e[\ek èglkj% K_\ kXYj gi\j\ek efk fecp k_\ è`k`Xc j\k f] fgk`fej# Ylk Xcjf gifm`[\ X jkife^ è[`ZXkfi f] k_\ Zlii\ek j\c\Zk`fe% N_`c\ dfjk g\fgc\ Xi\ ]Xd`c`Xi n`k_ k_\ ZfeZ\gk f] eXm`^Xk`fe kXYj fe k_\ N\Y# k_\ nXp è n_`Z_ k_\p Ă&#x201D;cc è N\Y ]fidj dXp `dgXì k_\ \]]\Zk`m\e\jj f] k_`j XggifXZ_% N_\e Zfdgc\kè^ X ]fid# dXep g\fgc\ dfm\ ]ifd kfg kf Yfkkfd Xe[# Xj X i\jlck# dXp `êfi\ _fi`qfekXc fgk`fej% K_\i\ dXp Xcjf Y\ X cXZb f] ZcXi`kp XYflk n_\k_\i _fi`qfekXc kXYj Xi\ dlklXccp \oZclj`m\% N`cc @ jlYd`k dp j\c\Zk`fej fe Xcc k_i\\ kXYj n`k_ k_\ ]fid fi fecp k_\ j\c\Zk`fej @ dX[\ fe k_\ XZk`m\ kXY6 @] n\ kXb\ fecp jkXe[Xi[ ljXY`c`kp d\ki`Zj èkf XZZflek# _fi`qfekXc kXYj g\i]fid\[ Y\jk fm\iXcc è fli k\jkè^% Efe\ f] fli gXik`Z`gXekj dX[\ Xep \iifij# k_\p n\i\ XYc\ kf Zfdgc\k\ k_\ kXjb hl`k\ hl`Zbcp# Xe[ k_\p gifm`[\[ _`^_ jXk`j]XZk`fe jZfi\j ]fi k_`j [\j`ê%

280 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

?fn\m\i# fli \p\$kiXZbè^ [XkX è[`ZXk\[ k_Xk fk_\i [\j`êj n\i\ \Xj`\i kf gifZ\jj% K_`j dXp _Xm\ Y\\e [l\ kf k_\ \okiX \]]fik èmfcm\[ è jZXeeè^ XZifjj k_\ gX^\ kf i\X[ k_\ kXYj% @e dfjk f] k_\ fk_\i [\j`êj# fli gXik`Z`gXekjË \p\j n\i\ iXi\cp i\hlì\[ kf [\m`Xk\ ]ifd k_\ c\]k f] k_\ jZi\\e kf k_\ i`^_k% ?fi`qfekXc kXYj Zc\Xicp [\m`Xk\[ ]ifd X Zc\Xi jZXe cè\ kf Zfdgc\k`fe j\\ =`^li\ ()%, %

FIGURE 12.5 http://www.flickr.com/photos/rosenfeldmedia/2367274164 A heat map of people’s eye fixations on horizontal tab selectiondependent inputs reveals how this form is parsed visually. Image provided by Etre.

281 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Fe\ `jjl\ k_Xk [`[ efk Zfd\ lg è fli k\jkè^ f] _fi`qfekXc kXYj Ylk k_Xk @ _Xm\ j\\e è fk_\i ljXY`c`kp jkl[`\j nXj Zfe]lj`fe fm\i n_\k_\i fi efk g\fgc\Ëj èglkj è \XZ_ f] k_\ kXYj n\i\ dlklXccp \oZclj`m\% G\i_Xgj k_\ jkife^ m`jlXc è[`ZXkfi f] n_`Z_ kXY nXj XZk`m\ _\cg\[ Xcc\m`Xk\ k_\j\ Xeo`\k`\j Xe[ dXb\ `k Zc\Xi\i k_Xk fecp k_\ XZk`m\ kXYËj Zfek\ekj nflc[ Y\ jlYd`kk\[% Vertical Tabs Kf Zfdg\ejXk\ ]fi k_\ gfk\ek`Xc cXZb f] m`j`Y`c`kp f] _fi`qfekXc kXYj n_\e g\fgc\ dfm\ ]ifd kfg kf Yfkkfd k_ifl^_ X ]fid# m\ik`ZXccp jkXZb\[ kXYj# Xj j\\e è =`^li\ ()%-# Xi\ èk\e[\[ kf Y\ gfj`k`fe\[ [ì\Zkcp n`k_è g\fgc\Ëj jZXe cè\% @e k\idj f] \Xj\ fe k_\ \p\# m\ik`ZXc kXYj g\i]fid\[ Y\jk è fli k\jkè^% K_`j jfclk`fe _X[ k_\ cfn\jk kfkXc c\e^k_ f] \p\ ÔoXk`fej# k_\ cfn\jk Xm\iX^\ ÔoXk`fe c\e^k_# Xe[ fe\ f] k_\ cfn\jk Xm\iX^\ eldY\i f] ÔoXk`fej%

282 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 12.6 top image: http://www.flickr.com/photos/rosenfeldmedia/2366438013 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366438077

Vertical tab selection-dependent inputs reveal follow-up questions to the right of an initial selection.

C`b\ knf fk_\i jfclk`fej n\ k\jk\[# m\ik`ZXc kXYj _`[ `ii\c\mXek ]fid Zfekifcj ]ifd g\fgc\ lek`c k_\p e\\[\[ k_\d% K_`j ]XZkfi j\\dj kf _Xm\ Y\\e Zi`k`ZXc ]fi \Xj\ fe k_\ \p\ Xe[ ]fi k_\ jg\\[ n`k_ n_`Z_ fli gXik`Z`gXekj n\i\ XYc\ kf Zfdgc\k\ k_\ ]fidj% K_\ jXd\ k_i\\ 283 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

jfclk`fej Xcjf _X[ k_\ k_i\\ cfn\jk Xm\iX^\ Zfdgc\k`fe k`d\j% 8cfe^ n`k_ knf fk_\i jfclk`fej n\ k\jk\[# m\ik`ZXc kXYj Xcjf XZ_`\m\[ e\Xi$g\i]\Zk jXk`j]XZk`fe iXkè^j% K_\j\ jZfi\j dXp i\jlck ]ifd k_\ ]XZk k_Xk k_\ k_i\\ jfclk`fej Xcc [`jgcXp iX[`f Ylkkfej Xe[ k_\ì j\c\Zk`fe$[\g\e[\ek èglkj è Zcfj\ gifo`d`kp kf fe\ Xefk_\i% K_`j \ejli\j k_Xk jfd\fe\Ëj \p\ [f\jeËk _Xm\ kf kiXm\c kff ]Xi =`^li\ ()%. feZ\ X iX[`f Ylkkfe _Xj Y\\e j\c\Zk\[# dXbè^ k_\ [\j`ê dfi\ \]ÔZ`\ek%

FIGURE 12.7 http://www.flickr.com/photos/rosenfeldmedia/2366438237 People’s eyes don’t have to travel far between initial options and additional inputs in vertical tab selection-dependent inputs. Image provided by Etre. 284 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

;\jg`k\ Xcc k_`j ^ff[ e\nj# X Zflgc\ g\fgc\ dX[\ d`jkXb\j ljè^ k_`j [\j`ê Xe[ n\i\ X c`kkc\ Zfe]lj\[ Xj kf n_\k_\i k_\ m\ik`ZXc kXYj n\i\ dlklXccp \oZclj`m\ fi efk% @ek\i\jkè^cp# g\fgc\ j\\d\[ c\jj Zfe]lj\[ Yp k_\ _fi`qfekXc kXYj# n_`Z_ k_\fi\k`ZXccp j_flc[ _Xm\ Yi\[ dfi\ Zfe]lj`fe Y\ZXlj\ k_\p Yi\Xb n`k_ [\jbkfg Xggc`ZXk`fe Zfem\ek`fej n_\i\ dfjk _fi`qfekXc kXYj Xi\ efk dlklXccp \oZclj`m\% K_\ m\ik`ZXc kXYj [\j`ê Xcjf èZcl[\[ iX[`f Ylkkfej fe \XZ_ kXY kf _\cg kf Zfddle`ZXk\ k_Xk k_\p n\i\ dlklXccp \oZclj`m\ fgk`fej% @e fk_\i ljXY`c`kp k\jkè^ @ _Xm\ j\\e# m\ik`ZXc kXYj _Xm\ flk g\i]fid\[ _fi`qfekXc kXYj ]fi k_\j\ m\ip i\Xjfej% 8e[ jèZ\ m\ik`ZXc kXYj jZfi\ Y\kk\i fe jXk`j]XZk`fe# \p\$kiXZbè^ d\ki`Zj# Xe[ k`d\ kf Zfdgc\k`fe# dp èZcèXk`fe `j kf gi\]\i k_\d kf _fi`qfekXc kXYj% Drop-Down List 9fk_ k_\ _fi`qfekXc Xe[ m\ik`ZXc kXY jfclk`fej dXèkXè X le`hl\ èk\i]XZ\ \c\d\ekÇè k_`j ZXj\# X kXYÇ]fi \XZ_ è`k`Xc fgk`fe% K_`j b\\gj Xcc k_\ è`k`Xc fgk`fej m`j`Yc\# Ylk Xcjf i\hlì\j 285 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Zfej`[\iXYc\ jZi\\e i\Xc \jkXk\ kf [f jf% N_\e k_\ eldY\i f] è`k`Xc fgk`fej îfnj# k_\j\ d\k_f[j k\e[ efk kf jZXc\ m\ip n\cc% K_\ [ifg$[fne c`jk jfclk`fe j_fne è =`^li\ ()%/ lk`c`q\j X d\el Xe[ îflgè^ Yfo kf ZfeÔe\ Xcc j\c\Zk`fe$[\g\e[\ek èglkj kf X jg\Z`ÔZ Xi\X f] k_\ ]fid% K_fl^_ k_`j d\k_f[ fYjZli\j dfjk f] k_\ è`k`Xc fgk`fejÇXj fecp fe\ fgk`fe `j m`j`Yc\ è k_\ [ifg$[fne c`jk Xk X k`d\Çljè^ X jè^c\ Zfekifc dXp Y\kk\i Zfddle`ZXk\ k_\ jZfg\ Xe[ `dgXZk f] k_\ è`k`Xc j\c\Zk`fe%

FIGURE 12.8 http://www.flickr.com/photos/rosenfeldmedia/2367274446 Drop-down list selection-dependent inputs allow people to select follow-up questions from a potentially long list of initial options without requiring a lot of screen real estate.

286 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

C`b\ m\ik`ZXc kXYj# k_\ [ifg$[fne c`jk jfclk`fe _`[ ìi\c\mXek ]fid èglkj ]ifd g\fgc\ lek`c k_\p e\\[\[ k_\d% K_`j d\Xek [ifg$[fne c`jk j\c\Zk`fe$[\g\e[\ek èglkj n\i\ \Xjp fe k_\ \p\j Xe[ Zfdgc\k\[ hl`k\ hl`Zbcp% Fe k_\ fk_\i [XkX gfèkj n\ d\Xjli\[# k_\ [ifg$[fne c`jk jfclk`fe g\i]fid\[ Xm\iX^\ n`k_ i\cXk`m\cp _`^_ jXk`j]XZk`fe jZfi\j Xe[ fecp X jè^c\ \iifi dX[\ Yp )* gXik`Z`gXekj% 8j X i\jlck# [ifg$[fne c`jk j\c\Zk`fe$ [\g\e[\ek èglkj Xi\ c`b\cp X jX]\ nXp kf ^f n_\e pfli c`jk f] è`k`Xc fgk`fej jZXc\j gXjk X eldY\i k_Xk \`k_\i _fi`qfekXc fi m\ik`ZXc kXYj ZXe jlggfik% Expose Below Radio Buttons 8efk_\i ècè\ jfclk`fe ]fi j\c\Zk`fe$ [\g\e[\ek èglkj èmfcm\j m\ik`ZXccp j\gXiXkè^ k_\ è`k`Xc fgk`fej ]ifd k_\ì i\jg\Zk`m\ X[[`k`feXc èglkj% K_`j XggifXZ_# j_fne è =`^li\ ()%0# _Xj k_\ X[mXekX^\ f] XcnXpj b\\gè^ Xcc k_\ è`k`Xc fgk`fejÇXe[ X g\ijfeËj j\c\Zk`fe Xdfe^ k_fj\ fgk`fejÇm`j`Yc\%

287 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 12.9 top image: http://www.flickr.com/photos/rosenfeldmedia/2366438293 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366438361

Exposed below selection-dependent inputs surface followup questions in a consistent location below an initial set of questions.

8 jkife^ m`jlXc è[`ZXk`fe f] k_\ [\g\e[\eZp Y\kn\\e k_\ è`k`Xc j\c\Zk`fe Xe[ `kj X[[`k`feXc èglkj ZXe _\cg Zfddle`ZXk\ k_\ì i\cXk`fej_`g dfi\ Zc\Xicp% ?fn\m\i# k_\ aldgè^ \]]\Zk k_Xk fZZlij n_\e g\fgc\ Z_Xe^\ k_\ì j\c\Zk`fej Xe[ k_\ jZi\\e lg[Xk\j kf j_fn X i\m`j\[ j\k f] X[[`k`feXc 288 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

èglkj ZXe gfk\ek`Xccp [`jfi`\ekXk\ g\fgc\ \jg\Z`Xccp n_\e k_\ j\k f] X[[`k`feXc èglkj `j cfe^% C`b\ m\ik`ZXc kXYj# k_`j jfclk`fe Xcjf XZ_`\m\[ e\Xi$g\i]\Zk jXk`j]XZk`fe iXkè^j c`b\cp jk\ddè^ ]ifd k_\ ]XZk k_Xk `k [`jgcXpj iX[`f Ylkkfej Xe[ k_\ì j\c\Zk`fe$[\g\e[\ek èglkj è Zcfj\ gifo`d`kp kf fe\ Xefk_\i% ?fn\m\i# è _è[j`^_k# k_`j jfclk`fe nXjeËk k\jk\[ Xj n\cc Xj `k d`^_k _Xm\ Y\\e% 8j gXik f] k_\ì kXjb# n\ Xjb\[ gXik`Z`gXekj kf j\c\Zk GfjkXc J\im`Z\1 k_\ cXjk iX[`f Ylkkfe è k_\ îflg% 8j X i\jlck# k_\ X[[`k`feXc èglkj Xgg\Xi\[ [ì\Zkcp Y\cfn k_\ XZk`m\ iX[`f Ylkkfe% K_`j jfclk`fe `j c`b\cp kf _Xm\ g\i]fid\[ nfij\ `] n\ _X[ Xjb\[ ]fi X [`]]\i\ek fgk`fe Y\ZXlj\ k_\ m`jlXc j\gXiXk`fe f] k_\ j\c\Zk\[ iX[`f Ylkkfe Xe[ `kj i\cXk\[ ]fid fgk`fej nflc[ c`b\cp _Xm\ ZXlj\[ dfi\ m`jlXc [`jZfd]fik ]fi g\fgc\% @e fk_\i k\jkè^ @Ëm\ fYj\im\[# k_`j _Xj Y\\e k_\ ZXj\% 8]k\i kipè^ X ]\n [`]]\i\ek fgk`fej è k_\ è`k`Xc j\k f] iX[`f Ylkkfej# g\fgc\ cfj\ j`^_k f] n_`Z_ fgk`fe `j XZk`m\ Xe[ `kj i\cXk`fej_`g 289 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

kf k_\ j\c\Zk`fe$[\g\e[\ek èglkj% K_`j g_\efd\efe Y\Zfd\j \m\e dfi\ gifYc\dXk`Z n_\e k_\ hlXek`kp f] j\c\Zk`fe$[\g\e[\ek fgk`fej `j cXi^\ Y\ZXlj\ k_\ XjjfZ`Xk`fe Y\kn\\e k_\ è`k`Xc j\c\Zk`fe Xe[ X[[`k`feXc fgk`fej Y\Zfd\j c\jj Zc\Xi% Expose Within Radio Buttons J`d`cXi kf k_\ \ogfj\ Y\cfn jfclk`fe# k_\ \ogfj\ n`k_è jfclk`fe i\m\Xcj X[[`k`feXc èglkj n`k_è X j\k f] è`k`Xc fgk`fej# Xj j_fne è =`^li\ ()%('% N_\e k_\ j\k f] X[[`k`feXc èglkj `j hl`k\ jdXccÇfe\ kf knf X[[`k`feXc èglkjÇk_`j d\k_f[ ZXe dXèkXè k_\ Zfek\ok f] X g\ijfeËj è`k`Xc j\c\Zk`fe n_`c\ èkif[lZè^ k_\ i\hlì\[ j\c\Zk`fe$[\g\e[\ek èglkj n_\i\ k_\p Xi\ dfjk i\c\mXek% 9\ZXlj\ k_`j jfclk`fe [`jgcXp\[ iX[`f Ylkkfej Xe[ k_\ì j\c\Zk`fe$[\g\e[\ek èglkj è m\ip Zcfj\ gifo`d`kp kf fe\ Xefk_\i# `k Xcjf XZ_`\m\[ e\Xi$g\i]\Zk jXk`j]XZk`fe iXkè^j% K_\ È\ogfj\ n`k_è iX[`f YlkkfejÉ d\k_f[ Xcjf _`[ ìi\c\mXek ]fid èglkj ]ifd g\fgc\ lek`c k_\p

290 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 12.10 top image: http://www.flickr.com/photos/rosenfeldmedia/2367272016 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367272050

Exposed within selection-dependent inputs surface follow-up questions directly below each initial choice.

e\\[\[ k_\d% K_`j d\Xek `k nXj \Xjp fe k_\ \p\j Xe[ Zfdgc\k\[ hl`k\ hl`Zbcp% @e ]XZk# k_`j nXj k_\ ]Xjk\jk jfclk`fe n\ k\jk\[ Xe[ _X[ k_\ cfn\jk eldY\i f] Xm\iX^\ Ă&#x201D;oXk`fej% ?fn\m\i# X Zflgc\ f] g\fgc\ dX[\ \iifij n_`c\ Zfdgc\k`e^ k_\ kXjb# Xe[ j`d`cXi ZfeZ\iej Xggcp _\i\ Xj n`k_ k_\ \ogfj\[ Y\cfn iX[`f Ylkkfe 291 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

jfclk`fe% @] k_\ eldY\i f] j\c\Zk`fe$[\g\e[\ek èglkj `j jlYjkXek`Xc# k_`j d\k_f[ Yi\Xbj [fne hl`Zbcp% K_\ ZfdYèXk`fe f] gX^\ aldgè^ Xe[ k_\ dfm\d\ek f] k_\ è`k`Xc j\k f] fgk`fejÇXj k_\ \c\d\ekj Y\kn\\e k_\d Xi\ i\m\Xc\[ Xe[ _`[[\eÇdXb\j ]fi X [`jfi`\ekXkè^ èk\iXZk`fe k_Xk ]i\hl\ekcp _Xj g\fgc\ hl\jk`feè^ n_`Z_ lj\i èk\i]XZ\ \c\d\ek ki`^^\ij n_`Z_ j\k f] fgk`fej% 8j X i\jlck# X Zc\Xi m`jlXc XjjfZ`Xk`fe Y\kn\\e è`k`Xc j\c\Zk`fe Xe[ X[[`k`feXc fgk`fej `j \m\e dfi\ `dgfikXek# jèZ\ n\ [feËk nXek g\fgc\ cfjè^ j`^_k f] k_\ì kfg$c\m\c j\c\Zk`fe% 8 jdXcc eldY\i f] j\c\Zk`fe$[\g\e[\ek èglkj Xe[ Xe`dXk\[ kiXej`k`fej n_\e g\fgc\ Z_Xe^\ k_\ì è`k`Xc j\c\Zk`fej Xcjf _\cg dXb\ k_`j d\k_f[ nfib% Exposed Inactive Kf X[[i\jj k_\ [`jfi`\ekXk`fe ZXlj\[ Yp k_\ dfm\d\ek f] è`k`Xc j\c\Zk`fe fgk`fej n_\e X g\ijfe aldgj Y\kn\\e k_\d# k_\ \ogfj\[# Ylk

292 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

èXZk`m\ jfclk`fe j_fne è =`^li\ ()%(( b\\gj Xcc X[[`k`feXc èglkj m`j`Yc\# Ylk dXb\j fecp fe\ j\k f] fgk`fej XmX`cXYc\ Xk X k`d\% K_\ fk_\i j\c\Zk`fe$[\g\e[\ek èglkj Xi\ leXmX`cXYc\ Xe[ k_lj dfjk Zfddfecp Xgg\Xi [`dd\[# fi îXp\[ flk% N_`c\ k_`j d\k_f[ [f\j b\\g Xcc X[[`k`feXc èglkj m`j`Yc\ Xe[ n`k_è k_\ Zfek\ok f] Xe

FIGURE 12.11 http://www.flickr.com/photos/rosenfeldmedia/2367272100 Exposed inactive selection-dependent inputs show all follow-up questions in an inactive state when not selected.

293 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

è`k`Xc j\c\Zk`fe# k_\ j_\\i mfcld\ f] èglkj k_Xk Xi\ m`j`Yc\ hl`Zbcp fm\in_\cdj g\fgc\% 8cjf# n_\e k_\i\ Xi\ dXep X[[`k`feXc èglkj ]fi \XZ_ è`k`Xc fgk`fe# k_\ XjjfZ`Xk`fe Y\kn\\e k_\ g\ijfeËj j\c\Zk`fe Xe[ k_\ fk_\i è`k`Xc fgk`fej ^\kj cfjk% 8[[è^ kf k_`j \]]\Zk `j k_\ ]XZk k_Xk k_\ m`j`Yc\ [`]]\i\eZ\ Y\kn\\e èXZk`m\ Xe[ XZk`m\ \c\d\ekj `j ]i\hl\ekcp kff jlYkc\ ]fi g\fgc\ kf efk`Z\% K_`j jfclk`fe nXj fe\ f] k_\ c\Xjk$c`b\[ Xe[ nfijk g\i]fidè^ n\ k\jk\[% @e ]XZk# `k _X[ k_\ cfe^\jk Zfdgc\k`fe k`d\j f] Xep fgk`fe k\jk\[% GXik`Z`gXekj n\i\ [`jgc\Xj\[ n`k_ k_\ j_\\i c\e^k_ f] k_\j\ gX^\j kf glk `k d`c[cp Xe[ n\i\ Xeefp\[ Xk _Xmè^ kf Xkk\e[ kf Xe[ jlYj\hl\ekcp [`jd`jj j\Zk`fej f] k_\ ]fid k_Xk k_\p [`[eËk e\\[ kf Ôcc è% 8ck_fl^_ k_`j [\j`ê g\i]fid\[ hl`k\ gfficp# `k nXj jlg\i`fi è \m\ip d\ki`Z n\ d\Xjli\[ kf k_\ \ogfj\[ îflgj jfclk`fe flkcè\[ e\ok% K_\ fecp [`]]\i\eZ\ Y\kn\\e k_\j\ knf jfclk`fej

294 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

nXj k_\ îXpè^ flk f] lelj\[ èglkj# jf n\ ZXe gi\kkp ZfeĂ&#x201D;[\ekcp ZfeZcl[\ k_\ îXpè^ flk f] ìi\c\mXek fgk`fej `dgifm\[ k_\ [\j`ê% F] Zflij\# jèZ\ k_\ knf \ogfj\[ fgk`fej n\i\ fli nfijk g\i]fidè^# n\ ZXe Xcjf ZfeZcl[\ k_Xk _`[è^ ]fid fgk`fej n_\e k_\p Xi\ efk i\hlì\[ `j Xe \m\e Y\kk\i jfclk`fe% Exposed Groups Kf Zfdg\ejXk\ ]fi k_\ [`jXjjfZ`Xk`fe Y\kn\\e k_\ j\k f] è`k`Xc fgk`fej è k_\ \ogfj\[ èXZk`m\ d\k_f[# k_\ \oXdgc\ è =`^li\ ()%() lj\j m`jlXc îflgè^j kf Yè[ \XZ_ j\k f] j\c\Zk`fe$ [\g\e[\ek èglkj Y\e\Xk_ Xe è`k`Xc j\c\Zk`fe% @e k_`j d\k_f[# _fn\m\i# k_\ m`jlXc n\`^_k f] k_\ dXep X[[`k`feXc èglkj hl`Zbcp i\[lZ\j k_\ m`j`Y`c`kp f] k_\ è`k`Xc j\k f] fgk`fej%

295 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 12.12 http://www.flickr.com/photos/rosenfeldmedia/2367272206 Exposed groups of selection-dependent inputs show all follow-up questions in addition to an initial set of choices.

296 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

K_`j fgk`fe _X[ k_\ cfn\jk jlZZ\jj iXk\# _`^_\jk eldY\i f] \iifij dX[\# Xe[ cfn\jk jXk`j]XZk`fe f] Xcc k_\ jfclk`fej n\ k\jk\[% Fli \p\$kiXZbè^ [XkX i\m\Xc\[ k_Xk gXik`Z`gXekj dX[\ X n_fggè^ (/ dfi\ Ă&#x201D;oXk`fej n_\e ljè^ k_\ \ogfj\[ îflgj jfclk`fe k_Xe k_\p [`[ ljè^ k_\ ècè\ \ogfjli\ jfclk`fe j\\ =`^li\ ()%(* % ;l\ kf k_\ \oZ\jj`m\ gifYc\dj ]fle[ n`k_ k_`j jfclk`fe# @ k_èb `k `j X jX]\ Y\k kf Xmf`[ `k%

297 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 12.13 http://www.flickr.com/photos/rosenfeldmedia/2367272560 Exposed groups of selection-dependent inputs resulted in a lot of eye fixations. Image provided by Etre.

298 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices N\cc# @ nXie\[ pfl k_Xk j\c\Zk`fe$[\g\e[\ek èglkj _Xm\ cfkj f] Zfej`[\iXk`fej# [`[eËk @6 Efn k_Xk n\Ëi\ k_ifl^_ k_Xk [\cl^\ f] [XkX# n_Xk _Xm\ n\ c\Xie\[6 GX^\$c\m\c j\c\Zk`fe$[\g\e[\ek èglkj Xi\ gifYXYcp pfli Y\jk Y\k n_\e k_\ eldY\i f] X[[`k`feXc fgk`fej ]fi \XZ_ è`k`Xc Z_f`Z\ `j cXi^\% K_fl^_ pfl e\\[ knf N\Y gX^\j kf Yi\Xb lg k_\ ]fid# k_\ [peXd`Z _`[è^ Xe[ j_fnè^ f] X[[`k`feXc èglkj nfeËk Zfe]lj\ g\fgc\# Xe[ k_\p nfeËk e\\[ kf hl\jk`fe n_\k_\i fi efk k_\ì Z_f`Z\j Xi\ dlklXccp \oZclj`m\% M\ik`ZXc Xe[ _fi`qfekXc kXYj XZklXccp g\i]fid hl`k\ n\cc è Xcc$Xifle[ ljXY`c`kp# jXk`j]XZk`fe# Xe[ \p\$kiXZbè^ d\ki`Zj Ylk Zfd\ n`k_ k_\ êXicp gifYc\d f] dlklXc \oZclj`m`kp% @Ëm\ ^fkk\e ZfeÕ`Zkè^ [XkX fe n_`Z_ f] k_\j\ fgk`fej i\jfcm\j k_`j `jjl\ jf k_\p Yfk_ j\\d kf Y\ jklZb n`k_ `k% @] pfl ZXe ^\k Xifle[ dlklXc \oZclj`m`kp k_ifl^_ Zc\m\i èk\iXZk`fe fi m`jlXc [\j`ê# ^ff[ g\i]fidXeZ\ `j pflij kf Y\ _X[ n`k_ k_\j\ jfclk`fej% 299 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices (Continued) N_\e pfl _Xm\ X cfe^ c`jk f] è`k`Xc fgk`fej dfi\ k_Xe + fi , \XZ_ n`k_ `kj le`hl\ j\k f] j\c\Zk`fe$[\g\e[\ek èglkj# ljè^ X [ifg$[fne c`jk Xe[ m`jlXc îflgè^ ]fi k_\ X[[`k`feXc fgk`fej `j c`b\cp X ^ff[ nXp kf ^f% @] pfl fecp _Xm\ X ]\n X[[`k`feXc èglkj ]fi \XZ_ è`k`Xc fgk`fe# \ogfj\[ Y\cfn iX[`f Ylkkfej fi \ogfj\[ n`k_è iX[`f Ylkkfej d`^_k Y\ pfli Y\jk fgk`fe% @Ëm\ j\\e Yfk_ f] k_\j\ fgk`fej ZXlj\ Zfe]lj`fe n`k_ \oZ\jj`m\ gX^\ aldgè^ Xe[ [`jXjjfZ`Xk`fe Y\kn\\e è`k`Xc Z_f`Z\j# jf ki\X[ ZXi\]lccp% 9lk `] pfl i\Xccp fecp _Xm\ (Æ* X[[`k`feXc Ô\c[j g\i è`k`Xc Z_f`Z\# @Ë[ ^f n`k_ \ogfj\[ ècè\ iX[`f Ylkkfej% Aljk dXb\ jli\ pfl lj\ Zc\Xi m`jlXc XjjfZ`Xk`fej Xe[ kiXej`k`fej# `] gfjj`Yc\% 8cc fgk`fej \ogfj\[ Xj èXZk`m\ fi Xcc fgk`fej \ogfj\[ Xi\ YXj`ZXccp efejkXik\ij Y\ZXlj\ g\fgc\ Xi\ hl`Zbcp fm\in_\cd\[ Yp kff dXep fgk`fej k_Xk [feËk dXg kf k_\ì ^fXcj% Fm\iXcc# _`[è^ ìi\c\mXek ]fid Zfekifcj ]ifd g\fgc\ lek`c k_\p e\\[ k_\d i\jlckj è ]fidj k_Xk Xi\ \Xjp fe k_\ \p\j Xe[ Zfdgc\k\[ hl`k\ hl`Zbcp% 300 Chapter 12 Selection-Dependent Inputs

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices (Continued) Fm\iXcc# [`jgcXpè^ è`k`Xc fgk`fej Xe[ k_\ì j\c\Zk`fe$[\g\e[\ek èglkj è Zcfj\ gifo`d`kp kf fe\ Xefk_\i j\\dj kf c\X[ kf _`^_ jXk`j]XZk`fe iXkè^j% @e Xcc ZXj\j# dXèkXè X Zc\Xi XjjfZ`Xk`fe Y\kn\\e k_\ è`k`Xc j\c\Zk`fe fgk`fej% ;feËk c\k g\fgc\ cfj\ j`^_k f] k_\ì è`k`Xc kfg$c\m\c Z_f`Z\% @e Xcc ZXj\j# Zc\Xicp XjjfZ`Xk\ j\c\Zk`fe$[\g\e[\ek èglkj n`k_ k_\ì ki`^^\i% 8cc k_\ \oXdgc\j flkcè\[ è k_`j j\Zk`fe [f jf n`k_ \`k_\i p\ccfn YXZbîfle[j fi îXp flkcè\j% @e Xcc ZXj\j# Xmf`[ \oZ\jj`m\ gX^\ aldgè^ k_Xk [`jXjjfZ`Xk\j j\c\Zk`fe$[\g\e[\ek èglkj ]ifd k_\ è`k`Xc j\k f] fgk`fej%

301 Chapter 12 Selection-Dependent Inputs

CHAPTER 13

Gradual Engagement Signing Up Getting Engaged Best Practices

303 306 316

302 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Ëcc aljk Zfd\ flk Xe[ jXp k_`j1 j`ê$lg ]fidj dljk [`\% @e k_\ èkif[lZk`fe kf k_`j Yffb @ [\jZi`Y\[ k_\ gifZ\jj f] jkldYcè^ lgfe fi Y\è^ i\Zfdd\e[\[ X N\Y j\im`Z\% Pfl Xii`m\ \X^\i kf [`m\ è Xe[ jkXik \e^X^è^ Xe[ n_XkËj k_\ Ôijk k_è^ k_Xk î\\kj pfl6 8 ]fid% N\ ZXe [f Y\kk\i% @e ]XZk# @ Y\c`\m\ n\ ZXe ^\k g\fgc\ \e^X^\[ n`k_ [`^`kXc j\im`Z\j è X nXp k_Xk k\ccj k_\d _fn k_\p nfib Xe[ n_p k_\p j_flc[ ZXi\ \efl^_ kf lj\ k_\d%( @ Xcjf Y\c`\m\ n\ ZXe [f k_`j n`k_flk \ogc`Z`kcp dXbè^ k_\d Ôcc flk X j`ê$lg ]fid Xj X Ôijk jk\g% Signing Up 9lk Y\]fi\ n\ ^\k èkf k_\ gfk\ek`Xc f] îX[lXc \e^X^\d\ek pfli gXk_ flk f] j`ê$ è È[lcc\ipÉ # c\kËj cffb Xk _fn k_\ gifZ\jj f] \e^X^è^ n`k_ Xe fecè\ j\im`Z\ kpg`ZXccp nfibj% JèZ\ )''. nXj X Yi\Xbflk p\Xi ]fi (

=fi dfi\ XYflk \eZfliX^è^ g\fgc\ kf kip N\Y Xggc`ZXk`fej k_ifl^_ k_\ j`ê$lg gifZ\jj# Z_\Zb flk Afj_lX Gfik\iËj Yffb1 ;\j`êè^ ]fi k_\ JfZ`Xc N\Y# E\n I`[\ij# )''/%

303 Chapter 13 Gradual Engagement

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

fecè\ m`[\f# `kËj jX]\ kf Xjjld\ X cfk f] g\fgc\ n\ek fe k_\ N\Y kf gfjk fe\ f] k_\ì m`[\fj% G\i_Xgj k_\p _\Xi[ >ff^c\ M`[\f nXj X ^ff[ gcXZ\ kf [f jf% Lgfe Xii`mè^ Xk k_\ j`k\# k_\p ]fle[ X cèb kf j_Xi\ k_\ì m`[\f Xe[ n_Xk _Xgg\e\[ e\ok6 K_\p ^fk k_\ ]fid è =`^li\ (*%(% Pfl Xi\ i\hlì\[ kf ^`m\ lj pfli \dX`c X[[i\jj# j\c\Zk X gXjjnfi[# k\cc lj pfli eXd\# pfli cfZXk`fe# m\i`]p k_`j jkiXe^\ nfi[# Xî\\ kf fli k\idj f] j\im`Z\# Xe[ ÔeXccp# pfl n`cc ^\k n_XkËj Y\_è[ k_\ ]fid%

304 Chapter 13 Gradual Engagement

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 13.1 http://www.flickr.com/photos/rosenfeldmedia/2366438491 A sign-up form greets new customers at Google Video.

305 Chapter 13 Gradual Engagement

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Getting Engaged Efn ZfekiXjk k_`j XggifXZ_ n`k_ k_Xk f] Xefk_\i fecè\ m`[\f j\im`Z\1 AldgZlk% K_\ gi`dXip ZXccj kf XZk`fe fe k_\ AldgZlk ]ifek gX^\# Xj j\\e è =`^li\ (*%)# Xi\ DXb\ X Dfm`\ Xe[ Kip X ;\df% I`^_k flk f] k_\ ^Xk\j# AldgZlk `j èk\i\jk\[ è k\ccè^ pfl _fn `kj j\im`Z\ nfibj Xe[ n_p `kËj î\Xk ]fi pfl% Jf c\kËj [`m\ è%

306 Chapter 13 Gradual Engagement

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 13.2 top left image: http://www.flickr.com/photos/rosenfeldmedia/2366438917 bottom left image: http://www.flickr.com/photos/rosenfeldmedia/2367275200 top right image: http://www.flickr.com/photos/rosenfeldmedia/2366439049 bottom right image: http://www.flickr.com/photos/rosenfeldmedia/2367275452

The process of adding a video to Jumpcut introduces you to the services the site provides, namely online video editing.

307 Chapter 13 Gradual Engagement

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

J\c\Zkè^ DXb\ X Dfm`\ Yiè^j lg X jè^c\ èglk Ô\c[ ]fi k_\ k`kc\ f] pfli dfm`\ Xe[ X ]\n fgk`fej pfl ZXe lj\ kf lgcfX[ d\[`X Ôc\j ]fi pfli dfm`\% J\c\Zkè^ LgcfX[ ]ifd k_`j c`jk Xccfnj pfl kf X[[ `dX^\j# Xl[`f# Xe[ m`[\f ]ifd pfli [\jbkfg Zfdglk\i% FeZ\ pfl [f# pfl Xi\ glk è AldgZlkËj N\Y$YXj\[ m`[\f \[`kfi% ?\i\ pfl ZXe \[`k pfli dfm`\2 X[[ jkpc\j2 Zffi[èXk\ pfli Xl[`f# m`[\f# Xe[ `dX^\j# Xe[ dfi\% Jf ]Xi# ef j`ê$lg ]fid% @kËj fecp n_\e pfl nXek kf glYc`j_ fi j_Xi\ pfli dfm`\ k_Xk AldgZlk Xjbj ]fi pfli eXd\ Xe[ \dX`c jf pfl Xe[ fk_\ij ZXe XZZ\jj k_\ dfm`\ pfl aljk dX[\% K_ifl^_ k_`j gifZ\jj# pfl c\Xie\[ n_Xk AldgZlk [f\j# Xe[ pfl [`[ `k n`k_flk _Xmè^ kf aldg k_ifl^_ X j`ê$lg ]fid% K_XkËj îX[lXc \e^X^\d\ek% C\kËj cffb Xk Xefk_\i \oXdgc\% >\e` `j X N\Y j\im`Z\ k_Xk Xccfnj Xepfe\ kf j\k lg X ]Xd`cp ki\\ Xe[ j_Xi\ `k n`k_ ]Xd`cp Xe[ ]i`\e[j% N_XkËj k_\ Ôijk k_è^ gfk\ek`Xc Zljkfd\ij e\\[ kf [f n_\e k_\p Xii`m\ Xk >\e`6 =`cc flk X i\^`jkiXk`fe ]fid6 308 Chapter 13 Gradual Engagement

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Efg\# k_\p dXb\ X ]Xd`cp ki\\% 8]k\i Xcc# k_XkËj n_XkËj >\e` `j ]fi% K_\ ]ifek gX^\ f] >\e` =`^li\ (*%* dXb\j `k Zc\Xi n_Xk k_\ j`k\ `j ]fi% Jf ^\k jkXik\[ Zi\Xkè^ X ]Xd`cp ki\\ Yp \ek\iè^ pfli eXd\ Xe[ \dX`c X[[i\jj% E\ok# pfl ZXe X[[ pfli gXi\ekj# k_\ì j`Ycè^j# fi pfli j`Ycè^jÇè ef k`d\# pfl _Xm\ X gi\kkp ^ff[ ]Xd`cp ki\\ ^fè^% N_`c\ pfl n\i\ Xk `k# >\e` j\ek pfl Xe \dX`c n`k_ pfli lj\ieXd\ Xe[ gXjjnfi[ jf pfl ZXe ^\k YXZb kf pfli ]Xd`cp ki\\ Xepk`d\ pfl nXek% FeZ\ X^Xè k_ifl^_ k_\ gifZ\jj f] îX[lXc \e^X^\d\ek# pfl c\Xie\[ n_Xk X N\Y j\im`Z\ [f\j# Xe[ pfl [`[ `k n`k_flk Xe \ogc`Z`k i\^`jkiXk`fe ]fid i\hlìè^ pfl kf ]fib fm\i X cfk f] è]fidXk`fe% @e >\e`Ëj ZXj\# k_\ XggifXZ_ kf îX[lXc \e^X^\d\ek _Xj ^`m\e k_\ j\im`Z\ Ôm\ d`cc`fe gifÔc\j è Ôm\ dfek_j% Efk kff j_XYYp% @kËj nfik_ efkè^ k_Xk Xep N\Y j\im`Z\ k_Xk XlkfdXk`ZXccp j\kj lg Xe XZZflek ]fi `kj Zljkfd\ij dXp c\Xm\ jfd\ g\fgc\ Zfe]lj\[

309 Chapter 13 Gradual Engagement

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 13.3 top image: http://www.flickr.com/ photos/rosenfeldmedia/2367275524 middle image: http:// www.flickr.com/photos/ rosenfeldmedia/2366439355 bottom image: http:// www.flickr.com/photos/ rosenfeldmedia/2366439381

Geniâ&#x20AC;&#x2122;s process of creating a family tree contains no explicit registration forms and gets people acquainted with Geniâ&#x20AC;&#x2122;s service right away.

310 Chapter 13 Gradual Engagement

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

XYflk n_\k_\i k_\p XZklXccp _Xm\ Xe XZZflek fi efk% 8]k\i Xcc# k_\p [`[ efk \ogc`Z`kcp Zi\Xk\ fe\% 8j X i\jlck# k_\j\ j\im`Z\j e\\[ kf \ejli\ k_\p _Xm\ Xe \Xjp nXp ]fi g\fgc\ kf XZZ\jj k_\ì XZZflek è]fidXk`fe `] k_\p [`[ efk j\\ fi Z_fj\ kf `êfi\ k_\ \dX`c k_\p n\i\ j\ek flkcèè^ k_\ì XZZflek è]fidXk`fe% 8efk_\i \oXdgc\ f] îX[lXc \e^X^\d\ek Zfd\j ]ifd Ki`g@k1 X N\Y j\im`Z\ k_Xk Xccfnj g\fgc\ kf Xjj\dYc\ X ki`g `kè\iXip# Zfdgc\k\ n`k_ n\Xk_\i Xe[ [i`mè^ [ì\Zk`fej# ljè^ fecp k_\ì Õ`^_k# _fk\c# Xe[ i\ekXc ZXi ZfeÔidXk`fe \dX`cj% K_\ Ôijk jk\g kf ^\kkè^ jkXik\[ `j \dX`cè^ Ki`g@k X ZfeÔidXk`fe \dX`c ]ifd lgZfdè^ fi gXjk kiXm\c% Ki`g@k n`cc j\e[ pfl YXZb X efk\ k_Xk gifm`[\j XZZ\jj kf Xe XlkfdXk`ZXccp Zi\Xk\[ g\ijfeXc kiXm\c `kè\iXip j\\ =`^li\ (*%+ %

311 Chapter 13 Gradual Engagement

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 13.4 top left image: http://www.flickr.com/photos/rosenfeldmedia/2366439499 bottom left image: http://www.flickr.com/photos/rosenfeldmedia/2367275802 top right image: http://www.flickr.com/photos/rosenfeldmedia/2367275864 bottom right image: http://www.flickr.com/photos/rosenfeldmedia/2367276000

Using TripIt starts by forwarding a travel confirmation email窶馬ot with a sign-up form.

312 Chapter 13 Gradual Engagement

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FeZ\ X^Xè# pfli Ôijk jk\g è ljè^ Ki`g@k `j efk X j`ê$lg ]fid% @ejk\X[# pfl c\Xie _fn k_\ j\im`Z\ nfibj Yp XZklXccp ljè^ `k% Ki`g@k ^\kj pfli eXd\ Xe[ \dX`c X[[i\jj ]ifd k_\ ZfeÔidXk`fe \dX`cj pfl j\e[ k_\ j\im`Z\% =ifd k_\i\# `] pfl nXek kf \[`k pfli eXd\# \dX`c# fi Zi\Xk\ X gXjjnfi[ kf XZZ\jj k_\ j`k\# pfl ZXe [f jf% :_XeZ\j Xi\ pfl n`cc [f jf efn k_Xk pfl befn _fn k_\ j\im`Z\ nfibj Xe[ _fn `k Y\e\Ôkj pfl% N_\e pflËi\ \ogcfiè^ `] îX[lXc \e^X^\d\ek d`^_k Y\ i`^_k ]fi pfli N\Y j\im`Z\# `kËj `dgfikXek kf Zfej`[\i _fn X j\i`\j f] èk\iXZk`fej ZXe \ogcXè _fn gfk\ek`Xc Zljkfd\ij ZXe lj\ pfli j\im`Z\ Xe[ n_p k_\p j_flc[ ZXi\% >iX[lXc \e^X^\d\ek `jeËk n\cc j\im\[ Yp j`dgcp [`jki`Ylkè^ \XZ_ f] pfli j`ê$lg ]fid èglk Ô\c[j fekf j\gXiXk\ N\Y gX^\j%

313 Chapter 13 Gradual Engagement

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

N_`c\ @ XggcXl[ =`[\c`kpËj dpgcXe ]fid =`^li\ (*%, ]fi `kj Xkk\dgk Xk dXbè^ ÔeXeZ`Xc gcXeeè^ dfi\ \eafpXYc\# @Ëd efk jli\ [`jki`Ylkè^ \XZ_ f] `kj èglk Ô\c[j kf j\gXiXk\ N\Y gX^\j Xe[ gi\j\ekè^ k_\d Xj jc`[\i èglkj `j k_\ Y\jk nXp kf XZ_`\m\ k_\ ^fXc f] ^\kkè^ g\fgc\ kf le[\ijkXe[ n_Xk =`[\c`kp ZXe [f ]fi k_\d%

314 Chapter 13 Gradual Engagement

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

FIGURE 13.5 top image: http:// www.flickr.com/photos/ rosenfeldmedia/2366439793 middle image: http:// www.flickr.com/photos/ rosenfeldmedia/2367276076 bottom image: http:// www.flickr.com/photos/ rosenfeldmedia/2367276188

Fidelityâ&#x20AC;&#x2122;s myplan form divides a series of input into stand-alone slider interactions.

315 Chapter 13 Gradual Engagement

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Best Practices N_\e gcXeeè^ X Zljkfd\iËj è`k`Xc \og\i`\eZ\ ]fi pfli N\Y j\im`Z\# k_èb XYflk _fn pfl ZXe Xmf`[ j`ê$lg ]fidj è ]Xmfi f] îX[lXc \e^X^\d\ek% @] pfl [f fgk ]fi X îX[lXc \e^X^\d\ek jfclk`fe# \ejli\ k_Xk `k ^`m\j gfk\ek`Xc Zljkfd\ij Xe le[\ijkXe[è^ f] _fn k_\p ZXe lj\ pfli j\im`Z\ Xe[ n_p k_\p j_flc[ ZXi\% @] pfl Z_ffj\ kf Xlkf$^\e\iXk\ XZZflekj ]fi gfk\ek`Xc Zljkfd\ij# \ejli\ k_\i\ `j X Zc\Xi nXp ]fi k_\d kf XZZ\jj k_\ì XZZflek% :_XeZ\j Xi\ k_Xk g\fgc\ n`cc \`k_\i `êfi\ fi efk j\\ XZZflek Zi\Xk`fe \dX`cj# Xe[ dXp Y\ leZ\ikXè `] k_\p _Xm\ Xe XZZflek fi efk% 8mf`[ îX[lXc \e^X^\d\ek jfclk`fej k_Xk j`dgcp [`jki`Ylk\ k_\ mXi`flj èglk Ô\c[j è X j`ê$lg ]fid XZifjj dlck`gc\ gX^\j% @kËj X ^ff[ gfjj`Y`c`kp k_Xk k_`j n`cc i\[lZ\ \]ÔZ`\eZp Xe[ efk [\c`^_k Xepfe\%

316 Chapter 13 Gradual Engagement

CHAPTER 14

Whatâ&#x20AC;&#x2122;s Next? The Disappearing Form The Changing Form Getting It Built

318 321 329

317 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

j ZilZ`Xc Zfdgfe\ekj f] \Zfdd\iZ\# fecè\ Zfddle`ZXk`fe# Xe[ N\Y Xggc`ZXk`fej# N\Y ]fidj Xi\eËk ^fè^ Xepn_\i\ aljk p\k% K_fl^_ Xj @ _fg\ pflËm\ j\\e è k_`j Yffb# k_\i\Ëj cfkj f] iffd ]fi `dgifm\d\ek è _fn n\ [\j`ê Xe[ dXeX^\ ]fidj fecè\% 8j n\ dfm\ ]finXi[# k_\i\ Xi\ \m\e dfi\ nXpj n\ Zflc[ [f Y\kk\i jk`cc% The Disappearing Form @e :_Xgk\i (*# @ nXcb\[ k_ifl^_ X eldY\i f] \oXdgc\j f] ]fidj n`k_ îX[lXc \e^X^\d\ek% 8j g\fgc\ èk\iXZk\[ n`k_ j`k\j k_Xk ]fccfn\[ k_\j\ gièZ`gc\j# Z_XeZ\j Xi\ k_\p [`[eËk \m\e i\Xc`q\ k_\p n\i\ Ôccè^ è X ]fid% @ejk\X[# k_\p ]\ck k_\p n\i\ dXbè^ X dfm`\ fi j\kkè^ lg X ]Xd`cp ki\\% >iX[lXc \e^X^\d\ekj c`b\ k_\j\ _Xm\ k_\ gfk\ek`Xc kf dXb\ ]fidj \jj\ek`Xccp [`jXgg\Xi Yp ]fZljè^ fe k_\ k_è^j g\fgc\ nXek kf XZ_`\m\ èjk\X[ f] k_\ [XkX Ô\c[j i\hlì\[ Yp X YXZb$\e[ [XkXYXj\% K_XkËj fli

318 Chapter 14 What’s Next?

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

]i`\e[ k_\ Èflkj`[\ èÉ èjk\X[ f] Èèj`[\ flkÉ nXp f] k_èbè^% 8efk_\i nXp ]fi ]fidj kf ]X[\ kfnXi[ èm`j`Y`c`kp `j k_ifl^_ [peXd`Z fi ^Xd\$c`b\ èk\iXZk`fej% 8j Xe \oXdgc\# LqXekfËj Dè[ :XemXj( jf]knXi\ =`^li\ (+%( lj\j ^Xd\$c`b\ \c`Z`kXk`fe d\k_f[j ><Dj kf dXb\ k_\ [XkX ( http://www.themindcanvas.com/

FIGURE 14.1 http://www.flickr.com/photos/rosenfeldmedia/2367276242 Game-like elicitation methods in the Mind Canvas research tool.

319 Chapter 14 What’s Next?

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Zfcc\Zk`fe gifZ\jj X dfi\ ]le Xe[ \e^X^è^ \og\i`\eZ\% G\fgc\ n_f lj\[ Dè[ :XemXj kf gXik`Z`gXk\ è dXib\k i\j\XiZ_ _Xm\ iXm\[ XYflk k_\ c\m\c f] \eafpd\ek k_\p _X[ n_\e ÈÔccè^ flk X jlim\p%É @e X[[`k`fe kf èk\iXZk`fej c`b\ k_\j\# k\Z_efcf^p jfclk`fej dXp Xcjf _\cg kf glj_ jfd\ ]fidj Y\_è[ k_\ jZ\e\j% Jpjk\dj c`b\ D`Zifjf]kËj C`m\ @;) ]fid\icp befn Xj D`Zifjf]k GXjjgfik Xe[ k_\ fg\e jfliZ\ gifa\Zk Fg\e@;* Xi\ jè^c\ j`ê$è jfclk`fej k_Xk Xccfn g\fgc\ kf lj\ dlck`gc\ N\Y j`k\j n`k_ fecp fe\ XZZflek% 8ck_fl^_ k_\j\ XggifXZ_\j _Xm\ k_\ gfk\ek`Xc kf \c`dèXk\ X cfk f] [lgc`ZXk`m\ j`ê$lg Xe[ Z_\Zbflk ]fidj fecè\# e\`k_\i _Xj Y\Zfd\ X Zc\Xi jkXe[Xi[ aljk p\k% ) http://en.wikipedia.org/wiki/Windows_Live_ID * http://www.openid.net

320 Chapter 14 What’s Next?

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

The Changing Form @e j`klXk`fej n_\i\ ]fidj Xi\eËk c`b\cp kf [`jXgg\Xi Xepk`d\ jffe# k_\p dXp nXek kf jkXik Z_Xe^è^% K_\ gièZ`gc\j @ [\jZi`Y\[ ]fi g\ijfeXc`q\[ [\]Xlckj è :_Xgk\i (' Zflc[ lck`dXk\cp Y\ lj\[ kf [\k\idè\ _fn ]fidj j_flc[ Y\ [`]]\i\ek ]fi jg\Z`ÔZ è[`m`[lXcj% Befn jfd\fe\ `j c`b\cp kf kpg\ è X cfe^ Zfdd\ek6 Gifm`[\ X cXi^\ k\ok Xi\X kf [f jf% @j X [`]]\i\ek g\ijfe c`b\cp kf Y\ \oki\d\cp k\ij\ n`k_ _`j Zfdd\ekj6 G\i_Xgj# _\ fecp i\hlì\j knf cè\j f] èglk kf i\jgfe[% 9\]fi\ Xepfe\ jkXikj Zf[è^ ]fidj k_Xk Z_Xe^\ YXj\[ fe n_fËj ljè^ k_\d# `kËj `dgfikXek kf efk\ k_Xk X[Xgk`m\ èk\i]XZ\j c`b\ k_\j\ Xi\ gife\ kf ZXlj\ Zfe]lj`fe n_\e efk [\j`ê\[ n\cc% @] pflËm\ \m\i lj\[ X D`Zifjf]k F]ÔZ\ d\el =`^li\ (+%) Xe[ nfe[\i\[ n_\i\ Xe fgk`fe pfl jXn Y\]fi\ _Xj ^fe\# pflËm\ \eZflek\i\[ k_\ e\^Xk`m\ j`[\ f] ÈX[Xgk`m\

321 Chapter 14 What’s Next?

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

`ek\i]XZ\j%É @e X elkj_\cc# n_\e X[Xgk`m\ `ek\i]XZ\j nfib n\cc+# k_\p gifm`[\ X jc`^_kcp Y\kk\i \og\i`\eZ\ ]fi X ]\n g\fgc\% N_\e k_\p [feËk nfib n\cc# k_\p ZXe gifm`[\ X cfk f] Zfe]lj`fe ]fi dXep g\fgc\%

FIGURE 14.2 http://www.flickr.com/photos/rosenfeldmedia/2367276428 Microsoft’s Office menu hides options when you don’t use them frequently.

=fi dfi\ fe X[Xgk`m\ `ek\i]XZ\j# j\\ Jk\g_\e 8e[\ijfeËj kXcb ]ifd @8 Jldd`k )''.1 http:// tinyurl.com/25akke

322 Chapter 14 What’s Next?

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Aaron Gustafson

Principal, Easy! Designs, LLC Contributing Author: Accelerated DOM Scripting with Ajax, APIs, and Libraries Member, Web Standards Project (WaSP)

Zen and the Art of HTML Forms

K_\ fecp k_è^ k_Xk Zflc[ gfjj`Ycp Y\ dfi\ gXè]lc k_Xe Ôccè^ flk X ]fid `j dXbè^ fe\# \jg\Z`Xccp è ?KDC% 9lk `k [f\jeËk _Xm\ kf Y\ k_Xk nXp% =fccfnè^ k_\j\ k_i\\ j`dgc\ jk\gj n`cc _Xm\ pfl cfmè^ n\cc# dXpY\ k_XkËj X Y`k jkife^ pfli ]fidj è ef k`d\% STEP 1: LET THE FREAK FLAGS FLY!

?KDC ]fidj Xi\ cfe^# k\[`flj# Xe[ i\g\k`k`m\ kf Zf[\# Ylk \m\e k_Xk nflc[ Y\ Y\XiXYc\ `] k_\ì Zfekifcj i\e[\i\[ Zfej`jk\ekcp XZifjj k_\ [`]]\i\ek Yifnj\ij Xe[ fg\iXkè^ jpjk\djÇn_`Z_ k_\p [feËk% =fid Zfekifcj Xi\ k_\ [\e`q\ej f] ?KDCËj @jcXe[ f] D`jÔk Kfpj1 X jkiXe^\ dò f] cfe\cp# d`jle[\ijkff[# Xe[ f[[cp glk$kf^\k_\i \c\d\ekj% Kf kilcp dXjk\i ]fid ZfejkilZk`fe fe k_\ N\Y# pflËcc e\\[ kf ^\k gXjk Xcc f] k_Xk% PflËcc e\\[ kf \dYiXZ\ k_\ \ZZ\eki`Z`k`\j f] ]fid Zfekifcj# Xe[

323 Chapter 14 What’s Next?

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Aaron Gustafson (Continued)

dXpY\ \m\e Y\ X c`kkc\ Q\e$c`b\ XYflk k_\ jkiXe^\ Z_XiXZk\i`jk`Zj k_\p \o_`Y`k% 8]k\i Xcc# `kËj efk k_\`i ]XlckÇk_\pËi\ aljk i\e[\i\[ k_Xk nXp% STEP 2: FIND THE INNER MEANING.

8k k_\ì Zfi\# ]fid Zfekifcj Xi\ aljk c`b\ fk_\i ?KDC \c\d\ekj Xe[ j_flc[ Y\ ki\Xk\[ Xj jlZ_% <XZ_ d\Xej jfd\k_è^ [`]]\i\ek# Xe[ n_\e ZfdYè\[ Zfii\Zkcp# k_\p nfib kf^\k_\i kf ^`m\ Zfek\ok Xe[ d\Xeè^ kf pfli ]fidj% @e k_\ _Xe[j f] \og\ikj# k_\p ZXe \m\e k\cc X jkfip% STEP 3: BREAK DOWN THE MARKUP.

Jf _fn [f pfl _Xie\jj k_\ lekXgg\[ gfk\ek`Xc è ]fid Zfekifcj6 N\cc# k_\ Ôijk jk\g `j kf le[\ijkXe[ n_Xk k_\p [f Xe[ [feËk [f% FeZ\ pflËm\ ^fk k_Xk [fne# `kËj Xcc XYflk Ô^liè^ flk _fn kf ZfdYè\ k_\d n`k_ fk_\i ]fid Zfekifcj Xe[ fk_\i Y`kj f] ?KDC kf gifm`[\ k_\ î\Xk\jk Xdflek f] d\Xeè^ Xe[ Zfek\ok kf lj\ij% 8e[ k_\ b\p kf jlZZ\jj è ?KDC ]fid XcZ_\dp `j Yi\Xbè^ [fne Zfdgc\o kXjbj Xe[ jkilZkli\j èkf j`dgc\i fe\j%

324 Chapter 14 What’s Next?

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Aaron Gustafson (Continued) PUTTING IT ALL TOGETHER

:fej`[\i X cfe^ ]fid Zfdgfj\[ f] dlck`gc\$ Z_f`Z\ hl\jk`fej% @] pfl Y\^è Yi\Xbè^ k_Xk [fne# pfl d`^_k i\Zfê`q\ k_\ ]fid Xj X c`jk f] hl\jk`fej% ?dd¿X c`jk1 <form ...> <ol> <li>What is your favorite fruit?</li> ... </ol> </form>

8k k_\ e\ok c\m\c [fne# pfl _Xm\ Xe è[`m`[lXc dlck`gc\$Z_f`Z\ hl\jk`fe% 8 dlck`gc\$Z_f`Z\ hl\jk`fe `j i\Xccp Zfdgfj\[ f] knf k_è^j1 X hl\jk`fe Xe[ X c`jk f] gfjj`Yc\ i\jgfej\j% Pfl d`^_k k_èb k_\ hl\jk`fe `j X g\i]\Zk lj\ ]fi k_\ C89<C \c\d\ek# Ylk k_Xk \c\d\ek j_flc[ i\Xccp Y\ lj\[ kf gifm`[\ Zfek\ok ]fi Xe è[`m`[lXc ]fid Zfekifc% @e k_`j ZXj\# X C<><E; `j dfi\ Xggifgi`Xk\ n`k_ k_\ \ekì\ Zfdgfe\ek Y\Zfdè^ X =@<C;J<K # Xj `k `j lj\[ kf gifm`[\ Zfek\ok ]fi X îflg f] Ô\c[j1 325 Chapter 14 What’s Next?

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Aaron Gustafson (Continued) ... <li> <fieldset> <legend>What is your favorite fruit?</legend> <ul> <li>strawberries</li> ... </ul> </fieldset> </li> ...

;fne Xefk_\i c\m\c# pflËcc Ôe[ k_\ gfjj`Yc\ i\jgfej\j% Pfl Xci\X[p befn k_Xk \XZ_ `j ZfekXè\[ è X c`jk `k\d# Ylk pfl Xcjf befn k_Xk \XZ_ `j Zfdgfj\[ f] knf \c\d\ekj1 X iX[`f @EGLK Xe[ jfd\ k\ok kf [\jZi`Y\ n_Xk k_Xk ]fid Zfekifc jkXe[j ]fi# X C89<C% DXibè^ `k lg `j \Xjp \efl^_1 ... <li><label><input type=“radio” name=“fruit” value=“strawberries” /> strawberries</label></li> ...

326 Chapter 14 What’s Next?

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Aaron Gustafson (Continued) BUT WHAT ABOUT DESIGN?

<hlXccp Xj `dgfikXek Xj jfc`[ dXiblg è Yl`c[è^ jlZZ\jj]lc ]fidj `j [\j`êè^ k_\d% K_`j `j k_\ Y`k k_Xk dfjk N\Y [\m\cfg\ij _Xk\ Y\ZXlj\ f] k_\ dpi`X[ f] èZfej`jk\ek ]fid Zfekifc `dgc\d\ekXk`fej kf [\Xc n`k_% 8 ]fle[Xk`fe f] i`Z_# j\dXek`Z dXiblg dXb\j ]fid [\j`ê hl`k\ \Xjp# k_fl^_% =fi èjkXeZ\# fe\ f] k_\ dfjk YXj`Z cXpflkj ]fi X ]fid `j X jkXZb\[ j\i`\j f] cXY\cj Xe[ ]fid Zfekifcj% K_`j `j \Xj`cp XZ_`\m\[ Yp j\kkè^ k_\ C89<C \c\d\ekj kf [`jgcXp YcfZb Xe[ Zi\Xkè^ X c`kkc\ \okiX jgXZ\ Y\kn\\e k_\ c`jk `k\dj è pfli ]fid1 label { display: block; } form li { margin-bottom: .5em; }

9lk c\kËj jXp pfl nXek kf Z_Xe^\ k_\ ]fid kf [`jgcXp cXY\cj Xe[ ]fid Zfekifcj j`[\$Yp$j`[\% 327 Chapter 14 What’s Next?

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Perspective: Aaron Gustafson (Continued)

K_XkËj \hlXccp \Xjp1 label { display: block; float: left; width: 40%; } form li { clear: both; margin-bottom: .5em; }

@kËj Xcc XYflk nfibè^ n`k_ k_\ dXiblg pfl _Xm\ Xe[ k_\e Xggcpè^ pfli befnc\[^\ f] :JJ cXpflk kf k_\ ]fid \c\d\ekj% Aljk Y\ jli\ kf b\\g è dè[ k_Xk ]fid Zfekifcj i\e[\i hl`k\ [`]]\i\ekcp XZifjj [`]]\i\ek Yifnj\ij Xe[ fg\iXkè^ jpjk\dj# jf [feËk jg\e[ kff dlZ_ k`d\ kipè^ kf XZ_`\m\ gò\c$ g\i]\Zk`fe% Ljè^ j`dgc\ k\Z_e`hl\j c`b\ k_\j\ _\cg pfl [\m\cfg Zfej`jk\ek# i\g\XkXYc\ dXiblg Xe[ [\j`ê gXkk\iej k_Xk n`cc dXb\ nfibè^ n`k_ ]fidj dlZ_ dfi\ jXk`j]pè^ Xe[ gc\XjXek% 328 Chapter 14 What’s Next?

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Getting It Built 8]k\i pflËm\ èk\ieXc`q\[ jfd\ f] k_\ Y\jk giXZk`Z\j è k_`j Yffb# @ _fg\ pflËcc nXek kf Yiè^ k_\d kf c`]\ fe pfli ]fidj% K_fl^_ k_\ Zf[\ Y\_è[ k_\j\ jfclk`fej `j Y\pfe[ k_\ jZfg\ f] k_`j Yffb# 8Xife >ljkX]jfeËj g\ijg\Zk`m\ è k_`j Z_Xgk\i j_flc[ ^`m\ pfl X e`Z\ flkcè\ ]fi _fn pfl ZXe XggifXZ_ k_\ [\m\cfgd\ek f] N\Y ]fidj fe pfli j`k\% @] pflË[ c`b\ kf ^\k X N\Y ]fid lg Xe[ ileeè^ hl`Zbcp# j\m\iXc fecè\ j\im`Z\j _Xm\ î\Xk kffcj kf _\cg pfl [\j`ê# Yl`c[# Xe[ _fjk dXep bè[j f] ]fidj% 8ck_fl^_ @ _Xm\eËk \mXclXk\[ k_\d Xcc# Nl]ff, Xe[ =fid 8jj\dYcp- _Xm\ jkff[ flk ]ifd k_\ gXZb ]fi d\% N_\e pfl Xi\ i\X[p kf [`m\ \m\e [\\g\i# k_\ Nfic[ N`[\ N\Y :fejfik`ld N*: Ëj =fidj Nfibè^ >iflg. `j X gcXZ\ kf c\Xie XYflk k_\ e\ok ^\e\iXk`fe f] ]fidj k\Z_efcf^p ]fi , http://wufoo.com/ - http://www.formassembly.com/ . http://www.w3.org/MarkUp/Forms/

329 Chapter 14 What’s Next?

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

k_\ N\Y% @e gXik`ZlcXi# k_\ N*:Ëj O=fidj jkXe[Xi[ j\gXiXk\j n_Xk X ]fid [f\j Xe[ _fn X ]fid cffbj èkf [`jkèZk dXiblg% ?fn\m\i pfl [\Z`[\ kf [\m\cfg pfli ]fidj# aljk i\d\dY\i kf k_èb ]ifd k_\ m`\ngfèk f] k_\ g\fgc\ n_f n`cc Y\ ljè^ k_\d k_\ flkj`[\ è g\ijg\Zk`m\ % 8]k\i Xcc# n\ [feËk nXek ]fidj kf jlZb ]fi\m\i# [f n\6

330 Chapter 14 What’s Next?

Index

331 Enter code WFDDE for 10% off any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

ÈX[Xgk`m\ `ek\i]XZ\jÉ e\^Xk`m\ j`[\ 321 ÈXjj`jk`m\ k\Z_efcf^pÉ 8K

YXZbîfle[ Zfcfi 50# 52 9Xie\j EfYc\Ëj 123 9Xj\ZXdg 209 ècè\ X[[`k`fej 252 gifî\jj è[`ZXkfij 152 j`ê$lg ]fid 153 9Xoc\p# 9fY 110 DXbè^ k_\ N\Y Nfib

XZZ\jj`Yc\ ]fidj 76 XZZflekj XlkfdXk`Z j\klg 309 j`e^c\# ]fi dlck`gc\ j`k\j 320 XZk`fej 87

Y\jk giXZk`Z\j 158 fgk`fej fe jlZZ\jj d\j$ jX^\j 211 gcXZ\d\ek 147 gi`dXip Xe[ j\Zfe[Xip 139

107

Y\jk giXZk`Z\j 29 ]fi X[[`k`feXc èglkj 269 ]fi ]fid Zfdgc\k`fe 85 ]fi cXY\cj 104 îX[lXc \e^X^\d\ek 316 ]fi _\cg 184 ècè\ mXc`[Xk`fe 230 ]fi èglk Ô\c[j 136 ]fi d\jjX^\j 212 ]fi fi^Xe`qXk`fe 56 hl\jk`fej Xe[ Xejn\ij

è gifî\jj 150 X]Ôe`kp Zcljk\iè^% J\\ Zclj$ k\iè^ X]]fi[XeZ\j 116 Xî\\è^ kf Zfe[`k`fej 155 248 Xc`ê\[ cXY\cj 87 j\c\Zk`fe$[\g\e[\ek dò\[ 102 èglkj 299 8cg\ie# D`ZX_ 128 9fè^f# j`ê$lg ]fid 203# Xck\ieXkè^ YXZbîfle[ Zfcfij 216 51 Yifnj\ij# mXi`Xk`fej è ]fid 8dXqfe%Zfd 68 i\e[\iè^ 328 Z_\Zbflk gifZ\jj 75 Yljè\jj ^fXcj 15 Xe`dXk`fe 79 C f] d\jjX^\j 208 ZXc\e[Xi fm\icXp 254 Xjk\i`jb# Xk èglk Ô\c[ 119 :XeZ\c XZk`fe 140 XlkfdXk`Z ècè\ _\cg 166 ZXg`kXc c\kk\ij 58 332 Index

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

:_Xic\j JZ_nXY# _\cg k\ok è Yifnj\i nè[fn 179 Z_\ZbYfo\j 109 :?@ :fdglk\i ?ldXe @ek\iXZk`fe Zfe]\i\eZ\ 17 Zcfj\[ ZXgk`feè^ 76 Zfcfi ]fi XZk`fej 147 YXZbîfle[ 50# 52 ]fi Zfem\pè^ è]fidX$ k`fe 78 Zfcfi$Ycè[ lj\ij 78 \iifi [`jgcXp ]fi 193 Zfddle`ZXk`fe# Zfej`jk\eZp è 77 Zfdgc\k`fe iXk\j# kfg$Xc`ê\[ cXY\cj Xe[ 92 Zfdgc\k`fe k`d\j# Y\e\Ôkj f] jcfn\i 98 :fdgfle[ èglkj 129 Zfe[`k`fej# Xî\\è^ kf 155 ZfeÔidXk`fe f] èglk 215 Zfej`jk\eZp è Zfddle`ZX$ k`fe 77 Zfek\ek# fi^Xe`qè^ 40 Zfek\ek îflg# [`]]\i\ek`Xkè^ 48

Zfek\ok ]fi ]fidj 28 :fek`el\ XZk`fe 139 ZfekiXjk# Xj m`jlXc ef`j\ 49 Zfem\ijXk`fe# ]fidj ]fi 37 Zi\[`k ZXi[ eldY\ij 235 :JJ cXpflk 328 Zljkfd\ij% J\\ Xcjf lj\ij

Ôijk$k`d\# i\^`jkiXk`fe ]fid 25 Zljkfd\i jlggfik 20

D È[flYc\ m`jlXc \dg_Xj`jÉ 192# 204 [XkX# [`]]\i\ek`Xk`e^ cXY\cj ]ifd 101 [\]Xlck mXcl\j ]fi `eglk Ô\c[j 195# 239 g\ijfeXc`q\[ 246# 321 [\cXp ]fi ifccfm\i _\cg [`jgcXp 177

;\j`êè^ ]fi k_\ JfZ`Xc N\Y Gfik\i 303 [\j`ê gXkk\iej 29 [\j`ê gièZ`gc\j 28 [`jXYc\[ lj\ij# ]fid [\j`ê ]fi 76 [`jkiXZk`fe dè`d`qè^ 68 m`jlXc \c\d\ekj Xj 52 [ifg$[fne c`jk 285# 300 [ifg$[fne d\elj 109# 114# 195

[peXd`Z _\cg jpjk\dj 166

E \9Xp [\]Xlck Z_f`Z\j ]fi j_`g$ g`e^ Zfjkj 240 i\^`jkiXk`fe ]fid i\[\j`^e 18# 19# 232

333 Index

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

j\c\Zk`fe$[\g\e[\ek `eglkj fe i\hl\jk ]fid

<F; le`kj 262 \ogfj\ Y\cfn iX[`f Ylkkfej

273

287

j\ccè^ ]fid 261 \ogfj\[ îflgj 295 J\cc Pfli @k\d ?\cg \ogfj\[ èXZk`m\ j\c\Zk`fe gXe\c 181 fgk`fe 292 j_`ggè^ j\c\Zk`fe èglkj \ogfj\ n`k_è iX[`f Ylkkfej 131

290

NXek @k Efn ]fid 199 \9Xp <ogi\jj 9 Z_\Zbflk ]fid 55# 93 èglk Ô\c[ c\e^k_ 116 gifî\jj YXi ]fi gXjjnfi[ hlXc`kp 220 \Zfdd\iZ\ 5# 15 j_fggè^ ZXik ]fidj# dXggè^ i\hl\jkj 46 \[lZXk`feXc d\jjX^\j 196 \dX`c X[[i\jj\j# Zljkfd\i i\jgfej\ kf i\hl\jk ]fi 25 \e^X^\d\ek f] lj\ij 303 Y\jk giXZk`Z\j 316 \g`c\gjp# ÕXj_\j Xe[ 79 \iifi d\jjX^\j 187# 194 Y\jk giXZk`Z\j 212 [`jgcXp 188 df[Xc [`Xcf^ nè[fn ]fi

\p\ ÔoXk`fe fe _fi`qfekXc kXY j\c\Z$ k`fe$[\g\e[\ek `eglkj 281

gi`dXip Xe[ j\Zfe[Xip XZk`fej Xe[ 144# 146# 148

\p\ dfm\d\ekj 67 \p\ kiXZbè^ 21 ]fi \ogfj\[ îflgj jfcl$ k`fe 297 G\eqf jkl[p f] cXY\c Xc`êd\ek 91# 95# 98 jZXe cè\ Xe[ 64 ]fi m\ik`ZXc kXY j\c\Zk`fe$ [\g\e[\ek èglkj 284

=XZ\Yffb# i\^`jkiXk`fe ]fid 4 =Xìdfek ?fk\cj# \iifi gX^\ 192 i\[\j`ê 190 i\Xjfej kf [`jgcXp 195 =Xe[Xe^f%Zfd 112 \iifij 187 ]\\[YXZb ]ifd ècè\ mXc`[X$ dlck`gc\ 198 k`fe 215 <ki\ 65# 276 =`[\c`kp 73 <og\[`X 246 dpgcXe ]fid 314 jdXik [\]Xlckj 247 <ogcfj`m\ Fi[eXeZ\ ;`jgfjXc =@<C;J<K \c\d\ek 325 334 Index

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Ô\c[ k\jkè^ 20 Ôijk$k`d\ j_fgg\ij# i\^`jkiX$ k`fe ]fid 25 ÕXj_\j# Xe[ \g`c\gjp 79 ]fek j`q\j 79 =fid 8jj\dYcp 329 ]fid [\j`ê Zfej`[\iXk`fej 27 `dgXZk 16 `dgfikXeZ\ 5 ]fid \c\d\ekj# j\c\Zkè^ 110 ]fidj XZZ\jj`Yc\ 76 [`jXgg\Xiè^ 318 ?KDC ZfejkilZk`fe 323

èglk 128 dè`dXc [`jkiXZk`fej 68 dlck`gc\ gX^\j ]fi Zfd$ gc\o 42 eXd\j ]fi 60 fgè`fej XYflk 2 fgk`d`qè^ 32 g\ijfeXc`qè^ [\]Xlckj

>\e` 308 >f 9XZb XZk`fe 140 >ff^c\ M`[\f 304 îX[lXc \e^X^\d\ek 303# 308# 318 î\\e# ]fi XZk`fej 147 îflgj \ogfj\[ 295 ]fi èglkj 129# 131 >ljkX]jfe# 8Xife 323

H _\cg XlkfdXk`Z `ec`e\ 166 Y\jk giXZk`Z\j 184 [peXd`Z jpjk\dj 166 \oZ\jj`m\ k\ok 162 e\\[ ]fi 238 hl\jk`fe dXib ]fi `Zfe 177

ifccfm\i ki`^^\i 176 k\ok n`k_`e `eglk Ô\c[ 170

lj\i$XZk`mXk\[ `ec`e\ 173 lj\i$XZk`mXk\[ j\Zk`fe

321

jXm\ fgk`fe ]fi gXik`Xccp Zfdgc\k\[ 72 jgXZè^ fe 67 jkilZkliXc [\j`ê 128 =fle[ 9è 272# 275

178

lj\i XnXi\e\jj f] XmX`c$ XY`c`kp 170 n_\e kf gifm`[\ 161 _\cg `Zfe# gcXZ\d\ek 174 _`[`e^ fgk`fej fe ]fidj 295 G _fi`qfekXc kXYj 279# 299 ^Xd\$c`b\ \c`Z`kXk`fe d\k_f[j mj% m\ik`ZXc kXYj 285 _fk jgfk# f] _\cg ki`^^\i 176 ><Dj 319 ^Xd\$c`b\ `ek\iXZk`fej 319 ?KDC ]fidj 323 335 Index

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

c`d`kj 228 gif^i\jj`m\ \e^X^\d\ek

È`ej`[\flkÉ [\j`^e 2# 150#

265

319

`YX_e# XZk`mXk`fe ]fid 154 `Zfej ]fi [Xk\ j\c\Zkfi 257 ^cfYXc# ]fi d\jjX^\j 197 ]fi _\cg 177 `dX^\j# [`jXYcè^ fm\i jcfn e\knfibj 76 èXZk`m\ j\c\Zk`fe fgk`fe# \ogfj\[ 292 è[\ekXk`fe# è]fidXk`fe Zfe$ m\p\[ Yp 80 è[`ZXkfij ]fi i\hlì\[ Ô\c[# gcXZ\d\ek 126 @e`k`Xc @eZ`[\ek Hl\jk`feeXì\ @@H 262 ècè\ X[[`k`fej 250 ècè\ _\cg XlkfdXk`Z 166 lj\i$XZk`mXk\[ 173 ècè\ mXc`[Xk`fe Y\jk giXZk`Z\j 230 ]\\[YXZb ]ifd 215 f] gXjjnfi[ 219 kf j\k Z_XiXZk\i Zflek c`d`kj 228 èglk% J\\ Xcjf j\c\Zk`fe$[\$ g\e[\ek èglkj Y\jk giXZk`Z\j 269 ZfeÔidè^ 215 [\]Xlckj 239 ]fi ]fid 128

jl^^\jk`fej ]fi mXc`[ 225 `eglk \iifij# ]X`cli\ kf gi\m\ek 113

èglk Ô\c[j 87 Y\jk giXZk`Z\j 136 è Zfem\ijXk`fe 38 [\]Xlck mXcl\j 195 [\k\idèè^ Xggifgi`Xk\ kpg\ 110 Õ\o`Y`c`kp 132 îflgè^ 129# 131 _\cg k\ok n`k_è 170 cXY\cj n`k_è 99 c\e^k_j 116 fgk`feXc 122 i\hlì\[ 119 KXY b\p ]fi dfmè^ Y\$ kn\\e 81 kpg\j 107

J AXii\kk# :Xifcè\ 33# 34 Afkjgfk C`m\ 201 Al`Zp Jkl[`fj 173 ècè\ _\cg jpjk\d 174 AldgZlk 306

K BXpXb ZXc\e[Xi fm\icXp 255 `ec`e\ jl^^\jk`fej 225

336 Index

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

b\pYfXi[ Xj fecp XZZ\jj 76 mj% dflj\ 79

M DXZpËj 9`cc`e^ @e]fidXk`fe ]fid 117

i\hlì\[ èglk 124 dXib\kè^ d\jjX^\j 196 fgk$è ]fi dXk\i`Xcj 155 hl\jk`fej ]fi 45 d\jjX^\j Xe`dXk\[ 208 m`jlXc Xe[ k\oklXc ]iXd\$ nfib ]fi 196 D`Zifjf]k C`m\ @; 320 F]ÔZ\ d\el 322 90 GXjjgfik 320 CXjk]d%Zfd# ècè\ mXc`[Xk`fe D`c`kXip >i`[ I\]\i\eZ\ Jpj$ 222 k\d D>IJ ]fidXk 262 cXpflk# è]fidXk`fe Zfem\p\[ Dè[ :XemXj LqXekf 319 Yp 80 Dèk# j`ê$lg ]fid 223 c\]k$Xc`ê\[ cXY\cj 51# 88# 96 df[Xc [`Xcf^ nè[fn 259# c\^\e[# ]fi jpdYfc 123 260 C<><E; \c\d\ek 325 ]fi \iifi d\jjX^\ 192 c\e^k_ f] èglk Ô\c[j 116 Df]]\kk# AXZb 262 Cèb\[@e dflj\# mj% b\pYfXi[ 79 _\cg k\ok 171# 172 Dfm`\K`Zb\kj%Zfd# [ifg$ jlZZ\jj gX^\ 211 [fne d\elj 113 cèbj# cXY\cj ]fi 78 c`jk Yfo\j 109 N c`jkj# ?KDC ]fi 325 eXd\j ]fi ]fidj 60 C`m\ @; D`Zifjf]k 320 e\knfibj# [`jXYcè^ `dX^\j CfZXk`fe [`Xcf^ 263 fm\i jcfn 76 cf^è ]fidj 24 E\njmè\ 218 C89<C \c\d\ek 325 [`jgcXp YcfZb ]fi 327 cXY\cj 87 Xc`êd\ek 87 Y\jk giXZk`Z\j 56# 104 è Zfem\ijXk`fe 38 n`k_è èglkj 99 c\]k$Xc`ê\[ 51 ]fi cèbj 78 dò\[ Xc`êd\ek 102 cXe^lX^\# Xe[ cXY\c c\e^k_

337 Index

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

EfidXe# ;feXc[# K_\ ;\$ j`^e f] <m\ip[Xp K_`e^j

95# 98

116

O Èflkj`[\èÉ [\j`ê 2# 319 F]ÔZ\ ;\gfk# i\^`jkiXk`fe ]fid 82 Fg\e@; 320 fgk$è ]fi dXib\kè^ dXk\i`$ Xcj 155 fgk`d`qè^ ]fidj 32 fgk`feXc èglk Ô\c[j 122 fgk`feXc hl\jk`fej 233 FiY`kq# ZXc\e[Xi fm\icXp 256 fm\icXpj 254

P gX^\$c\m\c j\c\Zk`fe 276# 299 gX^\ aldgè^ 254# 301 gX^\j# dlck`gc\ ]fi Zfdgc\o ]fidj 42 K_\ GXiX[fo f] :_f`Z\ JZ_nXikq 239 GXi\ek&:_`c[ èglkj 129 gXjjnfi[j Zljkfd\i i\jgfej\ kf i\hl\jk ]fi 25 ècè\ mXc`[Xk`fe 219 GXpGXc Z_\Zbflk ]fidj 65 gXpd\ek ]fid 234 G\eqf# DXkk\f# \p\ kiXZbè^ jkl[p f] cXY\c Xc`êd\ek 91#

g\ijfeXc`q\[ [\]Xlckj 246 g_fe\ eldY\ij# Õ\o`Yc\ èglk Ô\c[ ]fi 133 gcXZ\d\ek f] XZk`fej 147 Gfik\i# Afj_lX# ;\j`êè^ ]fi k_\ JfZ`Xc N\Y 303 gfj`k`fe# gifî\jj è[`ZXkfi ]fi 71 GfneZ\# jlZZ\jj d\jjX^\ 207# 208 gi`dXip XZk`fe 139 [`jXYcè^ lek`c Xejn\ij Xi\ mXc`[ 151 _`[è^ 154 i\jgfej\ kf Zc`Zbè^ 150 mXi`Xk`fej è gi\j\ekè^ 142

gif[lZk`m`kp 13 gif[lZk`m`kp kffcj# N\Y$ YXj\[ 15 gifî\jj è[`ZXkfij 70 Xe`dXk\[ 151 è 9Xj\ZXdg 152 gifYc\dj 73 gifî\jj`m\ \e^X^\d\ek 265

Q HC:# \iifi d\jjX^\ 201 hl\jk`fe dXib# ]fi _\cg `Zfe 177

hl\jk`fej Y\jk giXZk`Z\j 248 \mXclXk`e^ e\\[ ]fi 32

338 Index

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

i\dfm`e^ 232

R iX[`f Ylkkfej 108# 114 [\]Xlck j\c\Zk`fe f] 242 \ogfj\ Y\cfn 287 \ogfj\ n`k_è 290 i\[ ]fi XZk`fej 147 ]fi _\cg fi \iifij 238 I\[Ôe ]fid 71 dlck`gX^\ ]fid 42 iX[`f Ylkkfej 243 I\]]\cc# AXd\j 194 i\^`jkiXk`fe ]fid 25 I\cXk\[ èglkj 129 i\cXk`fej_`gj 35 I\ebff ZXk\^fip j\c\Zk`fe 266 èm`kXk`fe ]fid 134 gifÔc\ ]fid 259 i\g\Xk Zljkfd\ij cf^è gifYc\dj 25 i\hlì\[ èglk Ô\c[j# cfZXkfi gcXZ\d\ek 126 I\j\k XZk`fe 140 i\jgfej\ iXk\j 45 i`^_k$Xc`ê\[ cXY\cj 88# 94 ifccfm\i ki`^^\i# ]fi _\cg 176

S JXm\ XZk`fe 139 ]fi gXik`Xccp Zfdgc\k\[ ]fid 72

jZXe cè\j# ZcXi`kp è 64 JZ_nXikq# 9Xiip# K_\ GXiX[fo f] :_f`Z\ 239 jZfg\# gifî\jj è[`ZXkfi ]fi 71

j\Zfe[Xip XZk`fej 139 mXi`Xk`fej `e gi\j\ek`e^ 142

m`jlXc gifd`e\eZ\ 141 j\Zli\ kiXejXZk`fej 182 j\c\Zk`fe$[\g\e[\ek `eglkj 272

Y\jk giXZk`Z\j 299 [ifg$[fne c`jk 285 \ogfj\ Y\cfn iX[`f Ylk$ kfej 287 \ogfj\[ ^iflgj 295 \ogfj\[ `eXZk`m\ fgk`fe 292

\ogfj\ n`k_è iX[`f Ylk$ kfej 290 _fi`qfekXc kXYj 279 gX^\$c\m\c j\c\Zk`fe 276 m\ik`ZXc kXYj 282 j`ê$lg ]fidj 303 j`k\ kiXZbè^ 20 JeXgKXo 169 jfZ`Xc Xggc`ZXk`fej 15 jfZ`Xc èk\iXZk`fej 8 jgXZè^ fe ]fidj 67 Jgffc# AXi\[ 24 jkXik gX^\j 62 jkXklj# gifî\jj è[`ZXkfi ]fi 71# 72 jk`Zbp j\c\Zk`fej 246 339 Index

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

jki\\k X[[i\jj# e\\[ ]fi 34 JlYd`k XZk`fe 139 jlZZ\jj d\jjX^\j 187# 196# 205

Y\jk giXZk`Z\j 213 ]fccfn$lg XZk`fej fe 211 jl^^\jk`fej ]fi mXc`[ `eglk 225

T ÈkXY`e[\oÉ ?KDC Xkki`Ylk\

i\hlì\d\ekj 78 ljXY`c`kp k\jkè^ 18 lj\i$XZk`mXk\[ _\cg ècè\ 173 j\Zk`fe 178 lj\ieXd\# ZfeÔidXk`fe f] j\c\Zk`fe 215 lj\ij XnXi\e\jj f] _\cg 170 [`jXYc\[# [\j`ê ]fi 76 \e^X^\d\ek giXZk`Z\j

Èk\idj f] j\im`Z\É 155 KXY b\p# ]fi dfmè^ Y\kn\\e èglk Ô\c[j 81# 112 kXYj ZfdgXi`jfe 285 _fi`qfekXc 279# 299 m\ik`ZXc 282# 299 k\ok 78 k\ok Yfo\j 108# 113 k`d\flk# XZZ\jj`Y`c`kp Zfej`[$ \iXk`fej 80 k`kc\j f] ]fidj 60 f] ]iXd\j Xe[ gX^\j 78 kfg$Xc`ê\[ cXY\cj 88# 89 kiXejXZk`fej# j\Zli\ 182 Ki`g@k 311 Kiljk$\ 183 Kl]k\# <[nXi[ 53

U Èlj\i$XZk`mXk\[É fgk`fej 258 L%J% J\Zk`fe ,'/ =\[\iXc Gif$ Zli\d\ek cXnj# XZZ\jj`Y`c`kp

303

^Xd\$c`b\ èk\iXZk`fej n`k_ 319 e\\[j 15 jè^c\ XZZflek ]fi dlc$ k`gc\ j`k\j 320 LqXekfËj Dè[ :XemXj 319

V mXc`[Xk`fe# ècè\ 215 Y\jk giXZk`Z\j 230 f] gXjjnfi[ 219 kf j\k Z_XiXZk\i Zflek c`d`kj 228 M\ij`ê 183 m\ik`ZXc kXYj 282# 299 mj% _fi`qfekXc kXYj 285 m`[\f\^^# j`ê$lg ]fid 165 m`jlXc \c\d\ekj# Xj [`jkiXZk`fe 52

m`jlXc ef`j\# ZfekiXjk Xj 49 M`ql# _\cg j\Zk`fe 180 Mfo 12 i\^`jkiXk`fe ]fid [\]Xlckj

340 Index

245

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

W NXc$DXik 124 NXccXZb# G\k\i 76 N\Y Xggc`ZXk`fej 13 N\Y :fek\ek 8ZZ\jj`Y`c`kp >l`[\cè\j N:8> 77 N\Y Zfem\ek`fej jlim\p 22# 23# 46# 57 N\Y\i# Z_\Zbflk ]fid 236 N\Y j`k\j# cf^è ]fid 24 N\ccj =Xi^f 175 Nfic[ N`[\ N\Y# ]fid Zfe$ jkilZk`fe ]fi 323 Nfic[ N`[\ N\Y :fejfi$ k`ld N*: =fidj Nfibè^ >iflg 329

O=fidj jkXe[Xi[ 330 Nl]ff 170# 329 _\cg k\ok 167

X O=fidj jkXe[Xi[ 330

Y PX_ff CfZXc ]fid 228 i\^`jkiXk`fe ]fid 41# 224# 227 PflKlY\ 17 ZXk\^fip j\c\Zk`fe 265

Z q`g Zf[\ 236

341 Index

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

ACKNOWLEDGMENTS K_fl^_ Zflekc\jj N\Y [\j`ê\ij# [\m\cfg\ij# Xe[ k_\ì ]fidj èjgì\[ Xe[ èÕl\eZ\[ k_\ Zfe$ k\ek è k_`j Yffb# k_\i\ nXj X gXik`ZlcXi j\hl\eZ\ f] \m\ekj k_Xk dX[\ k_\ Yffb `kj\c] gfjj`Yc\% Jk\g fe\ nXj k_\ \9Xp GcXk]fid [\j`ê k\XdÇ AXd`\ ?ffm\i# D`ZX_ 8cg\ie# AXd\j I\]]\cc# Xe[ CXiip :fie\kkÇn_f j_fn\[ d\ k_\ gfn\i f] jlYkc\ [\j`ê Z_f`Z\j è N\Y ]fidj% K_\ì nfib Xe[ èj`^_kj Yl`ck k_\ îfle[nfib ]fi _fn Xe[ n_p @ k_èb XYflk ]fid [\j`ê% 8e[ k_i\\ f] k_\d kffb k_\ì k`d\ kf i\m`\n k_`j Yffb è `kj \Xicp jkX^\jÇk_Xebj ^lpj% Jk\g knf ZXd\ ]ifd Afj_lX Gfik\i# AXi\[ Jgffc# Xe[ :_i`jkè\ G\i]\kk` Xk Lj\i @ek\i]XZ\ <e^`$ e\\iè^ L@< n_f Y\c`\m\[ @ Zflc[ gi\j\ek X j\jj`fe XYflk ]fid [\j`ê Xk k_\ì N\Y 8gg Jldd`k è AXelXip f] )''.% K_`j nXj k_\ jgXib k_Xk c\[ d\ kf kXb\ n_Xk @ be\n XYflk N\Y ]fid [\j`ê Xe[ klie `k èkf jfd\k_è^ k_Xk Zflc[ Y\ j_Xi\[ n`k_ fk_\ij%

342 Acknowledgments

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

Jk\g k_i\\ nXj C`q ;Xeq`Zf Xe[ Cfl Ifj\e]\c[ Xk Ifj\e]\c[ D\[`X Y\c`\mè^ k_Xk n\ _X[ k_\ dXbè^j f] X Yffb fe fli _Xe[j Xe[ Yiè^è^ è DXikX AljkXb Xe[ JljXe ?fe\pn\cc kf _\cg dXb\ `k _Xgg\e k_ifl^_ kfg$efkZ_ \[`kè^ Xe[ [\j`ê% J`dfe >i`]Ôe# GXlc JZ_nXik]\^\i# ;Xe >i`]Ôe Xe[ Zfcc\X^l\j Xk <ki\ Ck[% è Cfe[fe nnn%\ki\%Zfd ifle[\[ flk k_`j ]XekXjk`Z k\Xd n`k_ fi`^èXc \p\$kiXZbè^ Xe[ ljXY`c`kp i\j\XiZ_ aljk ]fi k_`j Yffb% 8cfe^ k_\ nXp# k_\ Zfdd\ekj Xe[ hl\jk`fej ]ifd Ycf^^\ij# Zfe]\i\eZ\ Xkk\e[\\j# dX`cè^ c`jkj# ]\ccfn [\j`ê\ij# i\j\XiZ_\ij# Xe[ [\m\cfg$ \ij jk\n\[ Y`^ k_fl^_kj Xe[ X[[\[ k_\ èj`^_kj k_Xk dX[\ k_`j Yffb n_Xk `k `j kf[Xp% 8ck_fl^_ @ cXZb k_\ iffd kf c`jk \m\ipfe\# @ nflc[ c`b\ kf _`^_c`^_k k_\ nfib f] DXkk\f G\eqf# :Xifcè\ AXii\kk# 9fY 9Xoc\p# Xe[ 8Xife >ljkX]jfe è jgi\X[è^ k_\ ^ff[ ]fid [\j`ê ^fjg\c% F] Zflij\# efe\ f] k_\j\ g`\Z\j nflc[ _Xm\ Ôk èkf gcXZ\ `] `k n\i\eËk ]fi k_\ ZfekèlXc jlggfik Xe[ gXk`\eZ\ f] dp n`]\ 8dXe[X% K_Xebj ]fi c\kkè^ X N\Y ^\\b kpg\ XnXp cXk\ èkf k_\ e`^_k¿% 343 Acknowledgments

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

ABOUT THE AUTHOR @k Xcc jkXik\[ è dp ]i\j_dXe p\Xi f] Zfcc\^\% @Ë[ Y\ [iXnè^ jk`cc c`]\j è Xik ZcXjj è k_\ X]k\ieffe Xe[ Y\ _fc\[ lg è k_\ [`^`kXc Zfd$ glk\i cXY cXk\ Xk e`^_k Zf[è^ dp Zfdglk\i jZ`\eZ\ _fd\nfib% K_Xk e\\[ kf YXcXeZ\ ]fid Xe[ ]leZk`fe _Xj jkXp\[ n`k_ d\ \m\i jèZ\% @k c\[ d\ kf nfib Xk k_\ EXk`feXc :\ek\i ]fi Jlg\iZfdglkè^ 8ggc`$ ZXk`fej E:J8 # n_\i\ k_\ Ôijk gfglcXi îXg_`$ ZXc N\Y Yifnj\i# E:J8 DfjX`Z# nXj Yfie Xe[ ^Xm\ i`j\ kf N\Y jliÔe^% K_\ N\Y kffb [\j`ê Xe[ k\Z_efcf^p Xe[ gif[lZ\[ \og\i`\eZ\j% @ nXj _ffb\[ n`k_ Yfk_ c\]k Xe[ i`^_k YiXè% 8]k\i j\m\iXc p\Xij f] [\j`êè^ N\Y [\jkèXk`fej Xe[ kffcj Xk E:J8 Xe[ Y\pfe[# @ n\ek fe kf k\XZ_ ZcXjj\j fe @ek\i]XZ\ ;\j`ê Xk k_\ Le`m\i$ j`kp f] @ccèf`jË JZ_ffc f] C`YiXip Xe[ @e]fidXk`fe JZ`\eZ\j% @ Zf[`Ô\[ dp XggifXZ_ kf k\XZ_è^ è dp Ôijk Yffb# J`k\$J\\è^1 8 M`jlXc 8ggifXZ_ kf N\Y LjXY`c`kp Af_e N`c\p# )'') % N_`c\ jfd\ N\Y gle[`kj Xi^l\[ ]fi X dfi\ m`jlXc N\Y Xe[ 344 About the Author

Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0

fk_\ij jki\jj\[ gli\ ljXY`c`kp# @ X^Xè ]fZlj\[ fe k_\ e\\[ ]fi YXcXeZ\ Xe[ flkcè\[ n_p m`jlXc Zfddle`ZXk`fe Xe[ ljXY`c`kp Xi\ cfZb\[ è X jpdY`fk`Z [XeZ\% @e k_\ p\Xij k_Xk ]fccfn\[# @ jg\ek k`d\ Xj k_\ C\X[ Lj\i @ek\i]XZ\ ;\j`ê\i è \9Xp @eZ%Ëj gcXk]fid k\Xd# n_\i\ @ c\[ k_\ jkiXk\^`Z [\j`ê f] e\n Zfejld\i gif[lZkj Xe[ èk\ieXc kffcj Xe[ gifZ\jj\j% @ Y\^Xe kf glYc`j_ È=leZk`feè^ =fid#É X c\X[è^ fecè\ glYc`ZXk`fe ]fi N\Y \o$ g\i`\eZ\ [\j`ê% @ nXj X ]fle[è^ YfXi[ d\dY\i f] k_\ @ek\iXZk`fe ;\j`ê 8jjfZ`Xk`fe @o;8 # Xe[ @ jgfb\ Xk eld\iflj Zfe]\i\eZ\j Xe[ Zfd$ gXe`\j Xifle[ k_\ nfic[ XYflk N\Y [\j`ê Xe[ jkiXk\^p% ;liè^ k_Xk k`d\ Xe[ efn è dp Zlii\ek ifc\ Xj J\e`fi GièZ`gXc f] Gif[lZk @[\Xk`fe ;\$ j`ê Xk PX_ff @eZ%# @ [\j`ê\[ fi Zfeki`Ylk\[ kf jf]knXi\ lj\[ Yp _le[i\[j f] d`cc`fej f] g\fgc\% Le[\icpè^ `k Xcc `j k_Xk j`dgc\ YXcXeZ\ f] ]leZ$ k`fe Xe[ ]fid% @kËj k_Xk g_`cfjfg_p pflËcc Ôe[ le[\icpè^ \m\ip gX^\ è k_`j Yffb# Xe[ @ jk`cc Y\c`\m\ `kËj n_Xk lck`dXk\cp dXb\j k_\ N\Y lj\$ ]lc# ljXYc\# Xe[ \eafpXYc\% 345 About the Author

W E B F O R M D E S I G N by LUKE WROBLE W SK I

Forms make or break the most crucial online interactions: checkout,

ERIC MEYER Author of CSS: The Definitive Guide meyerweb.com

WEB FORM DESIGN www.rosenfeldmedia.com

Filling in the Blanks

MORE ON WEB FORM DESIGN www.rosenfeldmedia.com/books/webforms/

by LUKE WROBLE W SK I foreword by Jared Spool