Web Form Design: Filling in the Blanks

W E B F O R M D E S I G N Filling in the Blanks

b y L U K E W R OBL E W S K I foreword by Jared Spool

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

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 ChairmanCooper

“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.”

ERIC MEYERAuthor of CSS: The Definitive Guidemeyerweb.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 AUDirector, User ExperienceGoogle

www.rosenfeldmedia.com

MORE ON WEB FORM DESIGNwww.rosenfeldmedia.com/books/webforms/

WE

B FO

RM

DE

SIGN

by LUK

E WR

OB

LEWSK

I

WEB FORM DESIGNFILLING IN THE BLANKS

by: Luke Wroblewski

Rosenfeld MediaBrooklyn, New York

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

http://rosenfeldmedia.com

TABLE OF CONTENTS

How to Use This Book xWho Should Read This Book? xi

What’s in the Book? xii

What Comes with the Book? xv

Frequently Asked Questions xviiiForeword xxiii

Form StructureCHAPTER 1 The Design of Forms 1Form Design Matters 5

The Impact of Form Design 16

Design Considerations 27

CHAPTER 2 Form Organization 31What to Include 32

Have a Conversation 37

Organizing Content 40

Group Distinctions 48

Best Practices 56

iiTable of Contents

CHAPTER 3 Path to Completion 59Name That Form 60

Start Pages 62

Clear Scan Lines 64

Minimal Distractions 68

Progress Indicators 70

Tabbing 81

Best Practices 85

Form ElementsCHAPTER 4Labels 86Label Alignment 87

Top-Aligned Labels 89

Right-Aligned Labels 94

Left-Aligned Labels 96

Labels Within Inputs 99

Mixed Alignments 102

Best Practices 104

CHAPTER 5 Input Fields 106Types of Input Fields 107

Field Lengths 116

Required Fields 119

iiiTable of Contents

TABLE OF CONTENTS

Input Groups 131

Flexible Inputs 132

Best Practices 136

CHAPTER 6 Actions 138Primary and Secondary Actions 139

Placement 147

Actions in Progress 150

Agree and Submit 155

Best Practices 158

CHAPTER 7 Help Text 160When to Help 161

Automatic Inline Help 166

User-Activated Inline Help 173

User-Activated Section Help 178

Secure Transactions 182

Best Practices 184

CHAPTER 8 Errors and Success 186Errors 187

Success 205

No Dead Ends 211

Best Practices 212

ivTable of Contents

TABLE OF CONTENTS

Form InteractionCHAPTER 9 Inline Validation 214Confirmation 215

Suggestions 225

Limits 228

Best Practices 230

CHAPTER 10 Unnecessary Inputs 231Removing Questions 232

Smart Defaults 239

Personalized Defaults 246

Best Practices 248

CHAPTER 11 Additional Inputs 249Inline Additions 250

Overlays 254

Progressive Engagement 265

Best Practices 269

vTable of Contents

TABLE OF CONTENTS

CHAPTER 12 Selection-Dependent Inputs 271Page-Level Selection 276

Horizontal Tabs 279

Vertical Tabs 282

Drop-Down List 285

Expose Below Radio Buttons 287

Expose Within Radio Buttons 290

Exposed Inactive 292

Exposed Groups 295

Best Practices 299

CHAPTER 13 Gradual Engagement 302Signing Up 303

Getting Engaged 306

Best Practices 316

CHAPTER 14 What’s Next? 317The Disappearing Form 318

The Changing Form 321

Getting It Built 329

viTable of Contents

TABLE OF CONTENTS

Index 331Acknowledgments 342About the Author 344

viiTable of Contents

TABLE OF CONTENTS

HOW TO USE THIS BOOK

xHow to Use this Book

Who Should Read this Book?


xiHow to Use this Book

What’s in the Book?


xiiHow to Use this Book


xiiiHow to Use this Book

Chapter 1: Design of Forms Chapter 2: Form Organization Chapter 3: Path to Completion

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


xivHow to Use this Book

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

What Comes with the Book? ( http://

www.rosenfeldmedia.com/books/webforms)


xvHow to Use this Book

http://www.rosenfeldmedia.com/books/webforms

http://www.rosenfeldmedia.com/books/webforms

( http://feeds.rosenfeldmedia.com/webforms/)

(http://www.flickr.com/photos/rosenfeldmedia).


xviHow to Use this Book

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

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

http://feeds.rosenfeldmedia.com/webforms/

http://feeds.rosenfeldmedia.com/webforms/


xviiHow to Use this Book

Why does Web form design matter?

See page 5

How should I organize my Web form—within one Web page or across several?

FREQUENTLY ASKED QUESTIONS

xviiiFrequently Asked Questions

See page 40.

If my form spans several Web pages, do I tell people what page they’re on?

See page 70.


xixFrequently Asked Questions

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

See page 87.

How are smart defaults used in Web forms?

See page 239.


xxFrequently Asked Questions

When should I include help text on my forms?

See page 164.

How should I indicate required input fields?

See page 119.


xxiFrequently Asked Questions

What’s the di!erence between a primary and secondary action?

See page 139.


xxiiFrequently Asked Questions

FOREWORD

xxiiiForeword

FOREWORD

xxivForeword

FOREWORD

xxvForeword

FOREWORD

xxviForeword

CHAPTER 1

The Design of Forms

Form Design Matters 5

The Impact of Form Design 16

Design Considerations 27

1 Enter code WFDDE for 10% o! 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

2Chapter 1

The Design of Forms

http://www.lukew.com/!/entry.

asp?532


3Chapter 1

The Design of Forms


4Chapter 1

The Design of Forms

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

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



5Chapter 1

The Design of Forms

Form Design Matters

Ecommerce


6Chapter 1

The Design of Forms

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

http://www.flickr.com/photos/radiofree/150535853

http://www.flickr.com/photos/radiofree/150535853/


7Chapter 1

The Design of Forms

FIGURE 1.2When you’re shopping in a local store, checkout usually comes with a smile.


8Chapter 1

The Design of Forms

Social Interactions


9Chapter 1

The Design of Forms

FIGURE 1.3top 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.










10Chapter 1

The Design of Forms

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




11Chapter 1

The Design of Forms


12Chapter 1

The Design of Forms

FIGURE 1.5top 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’ll need to fill out this new account form, which isn’t fun at all.










13Chapter 1

The Design of Forms

Productivity


14Chapter 1

The Design of Forms

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

California voter registration o"ine and online—it’s all just a form.






15Chapter 1

The Design of Forms


16Chapter 1

The Design of Forms

The Impact of Form Design


17Chapter 1

The Design of Forms

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

http://portal.acm.org/citation.cfm?id=986078&dl=portal&dl=AC

M




18Chapter 1

The Design of Forms

19Chapter 1

The Design of Forms


FIGURE 1.8 http://www.flickr.com/photos/rosenfeldmedia/2367264212In 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-o! and best practice analysis.




20Chapter 1

The Design of Forms


21Chapter 1

The Design of Forms

FIGURE 1.9 http://www.flickr.com/photos/rosenfeldmedia/2366440213Eye-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.




22Chapter 1

The Design of Forms

FIG

UR

E 1

.10

ht

tp://

ww

w.fl

ickr

.com

/pho

tos/

rose

nfel

dmed

ia/2

3664

2337

7A

Web

con

vent

ions

sur

vey

of o

nlin

e ch

ecko

ut fo

rms

that

illu

min

ates

so

me

inte

rest

ing

patt

erns

we’

ll lo

ok a

t in

a la

ter

chap

ter.

Web

Fo

rm D

esi

gn

: Fill

ing

in

th

e B

lan

ks

by L

uke

Wro

ble

wsk

i R

ose

nfe

ld M

ed

ia, 2

00

8; v

ers

ion

1.0

23C

hap

ter

1T

he D

esi

gn

of

Fo

rms




24Chapter 1

The Design of Forms

Perspective: Jared SpoolFounding Principal, User Interface Engineering

Changing a Button Increased Annual Revenues for a Web Site by $300 Million


25Chapter 1

The Design of Forms

Perspective: Jared Spool (Continued)


26Chapter 1

The Design of Forms

Perspective: Jared Spool (Continued)


27Chapter 1

The Design of Forms

Design Considerations


28Chapter 1

The Design of Forms

Design Principles


29Chapter 1

The Design of Forms

Design Patterns


30Chapter 1

The Design of Forms

Form Organization

What to Include 32

Have a Conversation 37

Organizing Content 40

Group Distinctions 48

Best Practices 56

CHAPTER 2





32Chapter 2

Form Organization

What to Include


33Chapter 2

Form Organization


34Chapter 2

Form Organization

WHAT TO THINK ABOUT BEFORE YOU START

USERS REALLY DO CARE ABOUT WHAT THEY’RE ASKED AND WHY

Perspective: Caroline JarrettUsability consultant, E!ortmark Ltd. Co-author: Forms That Work (Morgan Kaufmann, in press) Co-author: User Interface Design and Evaluation (Morgan Kaufmann, 2005)

People Before Pixels


35Chapter 2

Form Organization

START BY THINKING ABOUT PEOPLE AND RELATIONSHIPS

KEEP, CUT, POSTPONE, OR EXPLAIN: FOUR STRATEGIES FOR BETTER QUESTIONS

Perspective: Caroline Jarrett (Continued)


36Chapter 2

Form Organization

YOUR VIEW, MY VIEW: BALANCING USER AND BUSINESS NEEDS

Perspective: Caroline Jarrett (Continued)


37Chapter 2

Form Organization

Have a Conversation


38Chapter 2

Form Organization

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


















39Chapter 2

Form Organization


40Chapter 2

Form Organization

Organizing Content


41Chapter 2

Form Organization

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




42Chapter 2

Form Organization


43Chapter 2

Form Organization

FIGURE 2.3 http://www.flickr.com/photos/rosenfeldmedia/2366424765Redfin 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.




44Chapter 2

Form Organization


45Chapter 2

Form Organization

46Chapter 2

Form Organization


FIG

UR

E 2

.4

http

://w

ww

.flic

kr.c

om/p

hoto

s/ro

senf

eldm

edia

/236

7260

748

In t

his

Web

con

vent

ions

sur

vey,

the

que

stio

ns a

sked

by

15

ecom

mer

ce c

heck

out

form

s ar

e or

gani

zed

by t

he W

eb p

age

on

whi

ch t

hey

appe

ar: p

age

1, pa

ge 2

, and

so

on.

Web

Fo

rm D

esi

gn

: Fill

ing

in

th

e B

lan

ks

by L

uke

Wro

ble

wsk

i R

ose

nfe

ld M

ed

ia, 2

00

8; v

ers

ion

1.0

47C

hap

ter

2F

orm

Org

an

izati

on




48Chapter 2

Form Organization

Group Distinctions


49Chapter 2

Form Organization


50Chapter 2

Form Organization

FIGURE 2.5 http://www.flickr.com/photos/rosenfeldmedia/2367260810Many 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/2366425019A subtle background color change or thin rule is often all you need to e!ectively group related content in a form.






51Chapter 2

Form Organization

http://tinyurl.

com/fefbx


52Chapter 2

Form Organization

FIGURE 2.7 http://www.flickr.com/photos/rosenfeldmedia/2366424971Although 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.




53Chapter 2

Form Organization

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




54Chapter 2

Form Organization


55Chapter 2

Form Organization

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




56Chapter 2

Form Organization

Best Practices


57Chapter 2

Form Organization

Best Practices (continued)


58Chapter 2

Form Organization


CHAPTER 3

Path to Completion

Name That Form 60

Start Pages 62

Clear Scan Lines 64

Minimal Distractions 68

Progress Indicators 70

Tabbing 81

Best Practices 85





60Chapter 3

Path to Completion

Name That Form


61Chapter 3

Path to Completion


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?






62Chapter 3

Path to Completion

Start Pages


63Chapter 3

Path to Completion

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




64Chapter 3

Path to Completion

Clear Scan Lines


65Chapter 3

Path to Completion

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




66Chapter 3

Path to Completion

FIGURE 3.4Although 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.










67Chapter 3

Path to Completion

FIGURE 3.5 http://www.flickr.com/photos/rosenfeldmedia/2366425847A well-paced flow between questions requires adequate spacing between questions.




68Chapter 3

Path to Completion

Minimal Distractions


69Chapter 3

Path to Completion


While Amazon.com may merchandise its categories and specials through its Web site, once you are in checkout, there are no frills.






70Chapter 3

Path to Completion

Progress Indicators


71Chapter 3

Path to Completion

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




72Chapter 3

Path to Completion


73Chapter 3

Path to Completion


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.






74Chapter 3

Path to Completion

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




75Chapter 3

Path to Completion

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




76Chapter 3

Path to Completion

Perspective: Peter WallackAccessibility Program Director, Oracle

Designing Accessible Forms


77Chapter 3

Path to Completion

Perspective: Peter Wallack (Continued)


78Chapter 3

Path to Completion

!

!

!

!



79Chapter 3

Path to Completion



80Chapter 3

Path to Completion



81Chapter 3

Path to Completion

Tabbing


82Chapter 3

Path to Completion

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




83Chapter 3

Path to Completion


84Chapter 3

Path to Completion


85Chapter 3

Path to Completion

Best Practices

CHAPTER 4

Labels

Label Alignment 87

Top-Aligned Labels 89

Right-Aligned Labels 94

Left-Aligned Labels 96

Labels Within Inputs 99

Mixed Alignments 102

Best Practices 104





87Chapter 4

Labels

Label Alignment


88Chapter 4

Labels

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




89Chapter 4

Labels

Top-Aligned Labels

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




90Chapter 4

Labels

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




91Chapter 4

Labels

http://tinyurl.com/fefbx


92Chapter 4

Labels

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




93Chapter 4

Labels

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




94Chapter 4

Labels

Right-Aligned Labels

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




95Chapter 4

Labels

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




96Chapter 4

Labels

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

Left-Aligned Labels




97Chapter 4

Labels

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




98Chapter 4

Labels

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




99Chapter 4

Labels

Labels Within Inputs

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




100Chapter 4

Labels

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




101Chapter 4

Labels


102Chapter 4

Labels

Mixed Alignments

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




103Chapter 4

Labels


104Chapter 4

Labels

Best Practices


105Chapter 4

Labels


CHAPTER 5

Input Fields

Types of Input Fields 107

Field Lengths 116

Required Fields 119

Input Groups 131

Flexible Inputs 132

Best Practices 136





107Chapter 5

Input Fields

Types of Input Fields


108Chapter 5

Input Fields

TABLE 5.1: TYPES OF INPUT FIELDS

INPUT FIELD

DESCRIPTION

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




109Chapter 5

Input Fields


110Chapter 5

Input Fields

Perspective: Bob BaxleyAuthor: Making the Web Work: Designing E!ective Web Applications

Selecting Form Elements


111Chapter 5

Input Fields

Perspective: Bob Baxley (Continued)


112Chapter 5

Input Fields





113Chapter 5

Input Fields





114Chapter 5

Input Fields





115Chapter 5

Input Fields



116Chapter 5

Input Fields

Field Lengths


117Chapter 5

Input Fields

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




118Chapter 5

Input Fields

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




119Chapter 5

Input Fields

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

Required Fields




120Chapter 5

Input Fields

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




121Chapter 5

Input Fields

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

rosenfeldmedia/2367266066

Indicating optional or required fields next to input field labels.





122Chapter 5

Input Fields


123Chapter 5

Input Fields


124Chapter 5

Input Fields

FIGURE 5.7 http://www.flickr.com/photos/rosenfeldmedia/2367266224On Macy’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/2366430295On 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.






125Chapter 5

Input Fields

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

FIGURE 5.10 http://www.flickr.com/photos/rosenfeldmedia/2367265092When 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.






126Chapter 5

Input Fields


127Chapter 5

Input Fields

FIGURES 5.11 & 5.12Figure 5.11: http://www.flickr.com/photos/rosenfeldmedia/2366429475 Figure 5.12: 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’s much harder to get a sense of which questions must be answered.





128Chapter 5

Input Fields

THE CORE OF A FORM IS AN INPUT

Perspective: Micah AlpernDirector of Social Search, Yahoo! Inc.

The Structural Design of Forms





129Chapter 5

Input Fields

GROUPING INPUTS

Perspective: Micah Alpern (Continued)





130Chapter 5

Input Fields

STRUCTURAL DESIGN

Perspective: Micah Alpern (Continued)






131Chapter 5

Input Fields

Input Groups

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




132Chapter 5

Input Fields

Flexible Inputs


133Chapter 5

Input Fields

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




134Chapter 5

Input Fields

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




135Chapter 5

Input Fields


136Chapter 5

Input Fields

Best Practices


137Chapter 5

Input Fields


CHAPTER 6

Actions

Primary and Secondary Actions 139

Placement 147

Actions in Progress 150

Agree and Submit 155

Best Practices 158





139Chapter 6

Actions

Primary and Secondary Actions

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




140Chapter 6

Actions


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.






141Chapter 6

Actions


142Chapter 6

Actions

http://www.lukew.com/resources/articles/

PSactions.asp

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




143Chapter 6

Actions

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




144Chapter 6

Actions

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




145Chapter 6

Actions


146Chapter 6

Actions

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

FIGURE 6.7 http://www.flickr.com/photos/rosenfeldmedia/2366431201Color 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.






147Chapter 6

Actions

Placement


148Chapter 6

Actions

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




149Chapter 6

Actions

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




150Chapter 6

Actions

Actions in Progress

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




151Chapter 6

Actions


152Chapter 6

Actions

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.






153Chapter 6

Actions

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




154Chapter 6

Actions

FIGURE 6.13left image: http://www.flickr.com/photos/rosenfeldmedia/2366430675 right image: http://www.flickr.com/photos/rosenfeldmedia/2367266804

The ibahn activation form doesn’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).






155Chapter 6

Actions

Agree and Submit


156Chapter 6

Actions

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




157Chapter 6

Actions

FIGURES 6.15 & 6.16top 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.



http://www.flickr.com/photos/rosenfeldmedia/2366430793%20



158Chapter 6

Actions

Best Practices


159Chapter 6

Actions


CHAPTER 7

Help Text

When to Help 161

Automatic Inline Help 166

User-Activated Inline Help 173

User-Activated Section Help 178

Secure Transactions 182

Best Practices 184





161Chapter 7Help Text

When to Help



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





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





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





Automatic Inline Help



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





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





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





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





User-Activated Inline Help




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.







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





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





User-Activated Section Help

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





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






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







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





Secure Transactions




Various ways of verifying a secure transaction.







Best Practices

CHAPTER 8

Errors and Success

Errors 187

Success 205

No Dead Ends 211

Best Practices 212





187Chapter 8

Errors and Success

Errors


188Chapter 8

Errors and Success


189Chapter 8

Errors and Success

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




190Chapter 8

Errors and Success

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




191Chapter 8

Errors and Success


192Chapter 8

Errors and Success

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




193Chapter 8

Errors and Success


194Chapter 8

Errors and Success

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

HOW MANY TYPES OF MESSAGES?

Perspective: James Re!ellDirector, Search User Experience, Yahoo! Inc.

Fun with Messages




195Chapter 8

Errors and Success

ERROR MESSAGES

Perspective: James Re!ell (Continued)


196Chapter 8

Errors and Success

SUCCESS MESSAGES

ANY OTHER KIND OF MESSAGES

HOW TO BUILD GREAT MESSAGES



197Chapter 8

Errors and Success



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










198Chapter 8

Errors and Success

WHEN TO BREAK THE RULES







199Chapter 8

Errors and Success

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




200Chapter 8

Errors and Success


201Chapter 8

Errors and Success

FIGURE 8.6 http://www.flickr.com/photos/rosenfeldmedia/2367269674On 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.




202Chapter 8

Errors and Success

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




203Chapter 8

Errors and Success

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




204Chapter 8

Errors and Success

FIGURE 8.9 http://www.flickr.com/photos/rosenfeldmedia/2366433591On 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.




205Chapter 8

Errors and Success

Success


206Chapter 8

Errors and Success


207Chapter 8

Errors and Success

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




208Chapter 8

Errors and Success


209Chapter 8

Errors and Success


210Chapter 8

Errors and Success

FIGURE 8.11top 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.










211Chapter 8

Errors and Success

No Dead Ends

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




212Chapter 8

Errors and Success

Best Practices


213Chapter 8

Errors and Success


CHAPTER 9

Inline Validation

Confirmation 215

Suggestions 225

Limits 228

Best Practices 230





215Chapter 9

Inline Validation

Confirmation


216Chapter 9

Inline Validation


217Chapter 9

Inline Validation


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






218Chapter 9

Inline Validation

FIGURE 9.2top 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.








219Chapter 9

Inline Validation


220Chapter 9

Inline Validation


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








221Chapter 9

Inline Validation


222Chapter 9

Inline Validation


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






223Chapter 9

Inline Validation


224Chapter 9

Inline Validation


Mint’s registration form interrupts people when they are answering questions with immediate error messages.

FIGURE 9.6 http://www.flickr.com/photos/rosenfeldmedia/2366434095Yahoo!’s registration form only validates an answer once someone has indicated he or she is done by moving to the next input field.








225Chapter 9

Inline Validation

Suggestions


226Chapter 9

Inline Validation


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






227Chapter 9

Inline Validation

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




228Chapter 9

Inline Validation

Limits


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






229Chapter 9

Inline Validation


230Chapter 9

Inline Validation

Best Practices

CHAPTER 10

Unnecessary Inputs

Removing Questions 232

Smart Defaults 239

Personalized Defaults 246

Best Practices 248





232Chapter 10

Unnecessary Inputs

Removing Questions


233Chapter 10

Unnecessary Inputs

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




234Chapter 10

Unnecessary Inputs

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




235Chapter 10

Unnecessary Inputs

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




236Chapter 10

Unnecessary Inputs


237Chapter 10

Unnecessary Inputs


Weber’s checkout form tries to eliminate questions, but potentially ends up complicating the form more.






238Chapter 10

Unnecessary Inputs


239Chapter 10

Unnecessary Inputs

Smart Defaults


240Chapter 10

Unnecessary Inputs


241Chapter 10

Unnecessary Inputs

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

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






242Chapter 10

Unnecessary Inputs


243Chapter 10

Unnecessary Inputs

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




244Chapter 10

Unnecessary Inputs


What’s the right default state for gender?






245Chapter 10

Unnecessary Inputs


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






246Chapter 10

Unnecessary Inputs

Personalized Defaults


247Chapter 10

Unnecessary Inputs

FIGURE 10.10left image: http://www.flickr.com/photos/rosenfeldmedia/2367270636 right image: http://www.flickr.com/photos/rosenfeldmedia/2366434375

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






248Chapter 10

Unnecessary Inputs

Best Practices

CHAPTER 11

Additional Inputs

Inline Additions 250

Overlays 254

Progressive Engagement 265

Best Practices 269





250Chapter 11

Additional Inputs

Inline Additions


251Chapter 11

Additional Inputs

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




252Chapter 11

Additional Inputs


253Chapter 11

Additional Inputs

FIGURES 11.2 & 11.3Figure 11.2 http://www.flickr.com/photos/rosenfeldmedia/2367271520 Figure 11.3 http://www.flickr.com/photos/rosenfeldmedia/2366435381

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






254Chapter 11

Additional Inputs

Overlays


255Chapter 11

Additional Inputs

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




256Chapter 11

Additional Inputs

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




257Chapter 11

Additional Inputs


258Chapter 11

Additional Inputs

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




259Chapter 11

Additional Inputs


260Chapter 11

Additional Inputs


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






261Chapter 11

Additional Inputs

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




262Chapter 11

Additional Inputs

Perspective: Jack Mo!ettInteraction Designer, Inmedius Inc. Adjunct Professor, West Virginia University

A Case Study of Explosive Ordnance Disposal


263Chapter 11

Additional Inputs

Perspective: Jack Mo!ett (Continued)






264Chapter 11

Additional Inputs

Perspective: Jack Mo!ett (Continued)


265Chapter 11

Additional Inputs

Progressive Engagement


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






266Chapter 11

Additional Inputs


267Chapter 11

Additional Inputs


A fun category selector on Renkoo.








268Chapter 11

Additional Inputs


269Chapter 11

Additional Inputs

Best Practices


270Chapter 11

Additional Inputs


CHAPTER 12

Selection- Dependent Inputs

Page-Level Selection 276

Horizontal Tabs 279

Vertical Tabs 282

Drop-Down List 285

Expose Below Radio Buttons 287

Expose Within Radio Buttons 290

Exposed Inactive 292

Exposed Groups 295

Best Practices 299





272Chapter 12

Selection-Dependent Inputs


273Chapter 12



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






274Chapter 12



Selection-dependent inputs on eBay’s download request page bring up a series of follow-up questions based on an initial response.






275Chapter 12



276Chapter 12


Page-Level Selection


277Chapter 12



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






278Chapter 12



279Chapter 12


Horizontal Tabs


Horizontal tab selection-dependent inputs reveal follow-up questions when people click on each tab.






280Chapter 12



281Chapter 12


FIGURE 12.5 http://www.flickr.com/photos/rosenfeldmedia/2367274164A heat map of people’s eye fixations on horizontal tab selection-dependent inputs reveals how this form is parsed visually. Image provided by Etre.




282Chapter 12


Vertical Tabs


283Chapter 12



Vertical tab selection-dependent inputs reveal follow-up questions to the right of an initial selection.






284Chapter 12


FIGURE 12.7 http://www.flickr.com/photos/rosenfeldmedia/2366438237People’s eyes don’t have to travel far between initial options and additional inputs in vertical tab selection-dependent inputs. Image provided by Etre.




285Chapter 12


Drop-Down List


286Chapter 12


FIGURE 12.8 http://www.flickr.com/photos/rosenfeldmedia/2367274446Drop-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.




287Chapter 12


Expose Below Radio Buttons


288Chapter 12



Exposed below selection-dependent inputs surface follow-up questions in a consistent location below an initial set of questions.






289Chapter 12



290Chapter 12


Expose Within Radio Buttons


291Chapter 12



Exposed within selection-dependent inputs surface follow-up questions directly below each initial choice.






292Chapter 12


Exposed Inactive


293Chapter 12


FIGURE 12.11 http://www.flickr.com/photos/rosenfeldmedia/2367272100Exposed inactive selection-dependent inputs show all follow-up questions in an inactive state when not selected.




294Chapter 12



295Chapter 12


Exposed Groups


296Chapter 12


FIGURE 12.12 http://www.flickr.com/photos/rosenfeldmedia/2367272206Exposed groups of selection-dependent inputs show all follow-up questions in addition to an initial set of choices.




297Chapter 12



298Chapter 12


FIGURE 12.13 http://www.flickr.com/photos/rosenfeldmedia/2367272560Exposed groups of selection-dependent inputs resulted in a lot of eye fixations. Image provided by Etre.




299Chapter 12


Best Practices


300Chapter 12


Best Practices (Continued)


301Chapter 12


Best Practices (Continued)

CHAPTER 13

Gradual Engagement

Signing Up 303

Getting Engaged 306

Best Practices 316





303Chapter 13

Gradual Engagement

Signing Up


304Chapter 13

Gradual Engagement


305Chapter 13

Gradual Engagement

FIGURE 13.1 http://www.flickr.com/photos/rosenfeldmedia/2366438491A sign-up form greets new customers at Google Video.




306Chapter 13

Gradual Engagement

Getting Engaged


307Chapter 13

Gradual Engagement

FIGURE 13.2top 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.










308Chapter 13

Gradual Engagement


309Chapter 13

Gradual Engagement


310Chapter 13

Gradual Engagement


Geni’s process of creating a family tree contains no explicit registration forms and gets people acquainted with Geni’s service right away.













311Chapter 13

Gradual Engagement


312Chapter 13

Gradual Engagement

FIGURE 13.4top 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—not with a sign-up form.










313Chapter 13

Gradual Engagement


314Chapter 13

Gradual Engagement


315Chapter 13

Gradual Engagement


Fidelity’s myplan form divides a series of input into stand-alone slider interactions.














316Chapter 13

Gradual Engagement

Best Practices

CHAPTER 14

What’s Next?

The Disappearing Form 318

The Changing Form 321

Getting It Built 329





318Chapter 14

What’s Next?

The Disappearing Form


319Chapter 14

What’s Next?

http://www.themindcanvas.com/

FIGURE 14.1 http://www.flickr.com/photos/rosenfeldmedia/2367276242Game-like elicitation methods in the Mind Canvas research tool.




320Chapter 14

What’s Next?

http://en.wikipedia.org/wiki/Windows_Live_ID

http://www.openid.net


321Chapter 14

What’s Next?

The Changing Form


322Chapter 14

What’s Next?

http://

tinyurl.com/25akke

FIGURE 14.2 http://www.flickr.com/photos/rosenfeldmedia/2367276428Microsoft’s O#ce menu hides options when you don’t use them frequently.



323Chapter 14

What’s Next?

STEP 1: LET THE FREAK FLAGS FLY!

Perspective: Aaron GustafsonPrincipal, 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



324Chapter 14

What’s Next?

STEP 2: FIND THE INNER MEANING.

STEP 3: BREAK DOWN THE MARKUP.

Perspective: Aaron Gustafson (Continued)


325Chapter 14

What’s Next?

PUTTING IT ALL TOGETHER

<form ...>

<ol>

<li>What is your favorite fruit?</li>

...

</ol>

</form>



326Chapter 14

What’s Next?

...

<li>

<fieldset>

<legend>What is your favorite fruit?</legend>

<ul>

<li>strawberries</li>

...

</ul>

</fieldset>

</li>

...

...

<li><label><input type=“radio” name=“fruit”

value=“strawberries” /> strawberries</label></li>

...



327Chapter 14

What’s Next?

BUT WHAT ABOUT DESIGN?

label {

display: block;

}

form li {

margin-bottom: .5em;

}



328Chapter 14

What’s Next?

label {

display: block;

float: left;

width: 40%;

}

form li {

clear: both;

margin-bottom: .5em;

}



329Chapter 14

What’s Next?

Getting It Built

http://wufoo.com/

http://www.formassembly.com/

http://www.w3.org/MarkUp/Forms/


330Chapter 14

What’s Next?

Index





332Index

A

321

7676

309

32087

158

211147

139150

116155

87102

128

5168

7579

208119166

B50 52123

209252

152153

110

10729

26985

104316

184230

136212

56

248

299203

216

32815

C254

14058


333Index

179109

1776

14750 52

7878

193

77

92

98129

155215

7740

4828

1394937

235328

2520

D

192 204

101

195 239246 321

177

30329

28

76

6852

285 300109 114

195166

E

240

18 19 232


334Index

273261

181

131199

955 93

116

2205 15

46196

25303

31679

187 194212

188

192195

187198

65 276246

247

262

287295

292

290

281

144 146148

6721

297

91 95 9864

284

F4

190112

21573

314325


335Index

20

2579

79329

2716

5110

76318

323128

68

4260

232

321

7267

128272 275

G

319319

308140

304303

308 318147

295129 131

323

H

166184

166162

238

177176

170173

178

170161174

295279 299

285176

323


336Index

I2 150

319154

257197

177

76

292

80

126

262250

166173

230215

219

228

269215

239128

228

265225

11387

13638

195

110132129 131

17099

116122119

81107

J33 34

201173

174306

K

255225


337Index

7679

L325

32787

8756 104

3899

5178

102

90

222

8051 88 96123325116

171 172211

78109

325320

26324

M

117124

196155

45

208

196

320322

320

262319

223259

260192

26279

113

N60

76218


338Index

116

O2 319

82320

15532

122233

256254

P276 299

254 301

42

239129

25219

65234

91

95 98246

133147

303

71

207 208139

151154

150

14213

1570

151152

73265

Q201

177

24832


339Index

232

R108 114

242287290

147238

7142

243194

25129

35

266134

259

25

126140

4588 94

176

S139

72

64

239

71139

142141

182

272299

285

287295

292

290279

276282

30320

169158

6724

62

71 72246


340Index

34139

187 196205

213211

225

T

84155

81 112

285279 299

282 29978

108 113

80

6078

88 89182

311183

53

U258

7818

173178

215

17076

303

31915

320319

V215230

219

228183

282 299285165

5249

18012

245


341Index

W124

7613

7722

23 46 57236

24175

323

329330

170 329167

X330

Y

22841

224 22717

265

Z236

ACKNOWLEDGMENTS

342Acknowledgments


343Acknowledgments



ABOUT THE AUTHOR

344About the Author


345About the Author

W E B F O R M D E S I G N Filling in the Blanks

b y L U K E W R OBL E W S K I foreword by Jared Spool

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

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 ChairmanCooper

“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.”

ERIC MEYERAuthor of CSS: The Definitive Guidemeyerweb.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 AUDirector, User ExperienceGoogle

www.rosenfeldmedia.com

MORE ON WEB FORM DESIGNwww.rosenfeldmedia.com/books/webforms/

WE

B FO

RM

DE

SIGN

by LUK

E WR

OB

LEWSK

I

Web Form Design: Filling in the Blanks

Documents

Transcript of Web Form Design: Filling in the Blanks