The Features of Highly Effective Forms [An Event Apart Nashville 2016]

THE FEATURES OF H I G H LY E F F E C T I V E

FORMSAaron Gustafson @AaronGustafson slideshare.net/AaronGustafson

IConsider the conversation

Make every field fight for its place in

your forms.

Number of Fields1 2 3 4 5 6 7 8 9 10

http://is.gd/field_count_conversion

MICHAEL AAGAARD, UNBOUNCE

I finally convinced the client to let me remove three form fields. I wanted to

remove more, but I could only get away with removing three. But that’s still one

third of the form fields – a lot less friction.

The result? 14% drop in conversion.

http://is.gd/fewer_fields_fewer_conversions

Prepare for pushback.

IIChoose yourwords carefully

How does this photo make you feel?

� Embarrassing � Upsetting � Saddening � Bad Photo � Other

How does this photo make you feel?

� Embarrassing � Upsetting � Saddening � Bad Photo ◉ Other it’s embarrassing

Please describe the photo

� It’s embarrassing � It’s a bad photo of me � It makes me sad

Talk to your users like they talk

to one another.

Ask higher value questions.

Make it clear users need to respond

“What’s your first name?”

“Without your first name, I won’tknow how to address you.

Could you please provide it?”

“Reserve your spot”

IIIMake goodmarkup choices

Label every field

What’s your first name? <input name=“first_name”>

<label>What’s your first name?</label> <input name=“first_name”>

<label for=“first_name”>What’s your first name?</label> <input id=“first_name” name=“first_name”>

<label> What’s your first name? <input name=“first_name”> </label>

<label for=“first_name”> What’s your first name? <input id=“first_name” name=“first_name”> </label>

<label for=“first_name”>What’s your first name?</label> <input id=“first_name” name=“first_name”>

Use real buttons

Sign In

Sign In

Sign In

Sign In

Sign InSign In

Sign In

Appearance Seen As Focusable Activates Submits Forms

Button Button Yes Yes Yes

Sign In

Sign In

Inline Text Link Yes Kinda No

JS dependency

JS dependency<

ARIA dependency

<CSS dependency<

Sign InSign In

Block Text Generic No No No

JS dependency

JS dependency<

ARIA dependency

<CSS dependency< HTML dependency<

Everyone hasCSS & JavaScript,

why should Ibe concerned?

POTENTIAL BLOCKERS TO CSS

• Browser doesn’t support CSS • CSS is disabled for performance • User has altered CSS (via a user style sheet) for

accessibility or some other personal preference • A networking issue caused the CSS to be unavailable • Selector is too advanced for the browser • Rules are in a media query and the browser doesn’t

support them

POTENTIAL BLOCKERS TO JS

• Browser doesn’t support JavaScript • JavaScript is disabled • A networking issue caused the JavaScript to be

unavailable • A firewall blocked requests for JavaScript • A browser plugin blocked the JavaScript download or

execution

POTENTIAL BLOCKERS TO JS

• 3rd party JavaScript error caused JavaScript execution to stop

• A bug in the code caused the JavaScript to stop executing

• The browser failed a feature detection test and exited the script early

POTENTIAL BLOCKERS TO ARIA

• The browser does not support ARIA • The assistive technology does not support ARIA

Sign In

Use the rightfield type

THE FEATURES OF HIGHLY EFFECTIVE FORMS

<label for=“first_name”>What’s Your First Name?</label> <input type=“text” id=“first_name” name=“first_name”>

Free Response

<label for=“first_name”>What’s Your First Name?</label> <input id=“first_name” name=“first_name”>

Free Response (is the default)

<label for=“email”>What’s Your Business Email Address?</label> <input type=“email” id=“email” name=“email”>

Free Response: Email

Appearance Native Validation Custom Keyboard

Text Field Maybe Maybe

Free Response: Email

Browsers ignore what they don’t

understand

Progressive Enhancement

<label for=“url”>What’s Your Website’s URL?</label> <input type=“url” id=“url” name=“url”>

Free Response: URL

<label for=“url”>What’s Your Website’s URL?</label> <input type=“url” id=“url” name=“url”>

Free Response: URL

<label for=“time_at_job”>How Many Years Have You Been in Your Current Position?</label> <input type=“number” id=“time_at_job” name=“time_at_job”>

Free Response: Number

Text Field+ Maybe Maybe

<label for=“time_at_job”>How Many Years Have You Been in Your Current Position?</label> <input type=“number” id=“time_at_job” name=“time_at_job”>

Free Response: Number

Text Field+ Maybe Maybe

Choose One

Please describe the photo

� It’s embarrassing � It’s a bad photo of me � It makes me sad

Please describe the photo <label> <input type=“radio” name=“reason” value=“embarrassing”> It’s embarrassing </label> <label> <input type=“radio” name=“reason” value=“bad photo”> It’s a bad photo of me </label> <label> <input type=“radio” name=“reason” value=“saddening”> It makes me sad </label>

Choose One

<label for=“reason”>Please describe the photo</label> <select id=“reason” name=“reason”> <option value=“embarrassing”>It’s embarrassing</option> <option value=“bad photo”>It’s a bad photo of me</option> <option value=“saddening”>It makes me sad</option> </select>

Choose One

<label for=“reason”>Please describe the photo</label> <select id=“reason” name=“reason”> <option>It’s embarrassing</option> <option>It’s a bad photo of me</option> <option>It makes me sad</option> </select>

Choose One

Radio controls can outperform select

dropdowns byas much as 15%

http://is.gd/radio_vs_dropdown

<label for=“volume">How Loud is Spinal Tap?</label> <input type=“range" id=“volume" name=“volume” min=“0” max=“11” step=“1” >

Choose One: Number

Slider (Maybe) Maybe No

<label for=“volume">How Loud is Spinal Tap?</label> <input type=“range" id=“volume" name=“volume” min=“0” max=“11” step=“1” >

Choose One: Number

Slider Maybe No

Choose One or More

Gaming Systems (4 available) <label> <input type=“checkbox” name=“reserve[]” value=“DS Lite”> Nintendo DS Lite </label> <label> <input type=“checkbox” name=“reserve[]” value=“Wii”> Nintendo Wii </label> <label> <input type=“checkbox” name=“reserve[]” value=“Vita”> PlayStation Vita </label>

Choose One or More

<label for=“gaming”>Gaming Systems (4 available)</label> <select id=“gaming” name=“reserve[]” multiple> <option value=“DS Lite”>Nintendo DS Lite</option> <option value=“Wii”>Nintendo Wii</option> <option value=“Vita”>PlayStation Vita</option> <option value=“360”>Xbox 360</option> </select>

Choose One or More

<label for=“gaming”>Gaming Systems (4 available)</label> <select id=“gaming” name=“reserve[]” multiple> <option value=“DS Lite”>Nintendo DS Lite</option> <option value=“Wii”>Nintendo Wii</option> <option value=“Vita”>PlayStation Vita</option> <option value=“360”>Xbox 360</option> </select>

Choose One or More

Gaming Systems (4 available) <label> <input type=“checkbox” name=“reserve[]” value=“DS Lite”> Nintendo DS Lite </label> <label> <input type=“checkbox” name=“reserve[]” value=“Wii”> Nintendo Wii </label> <label> <input type=“checkbox” name=“reserve[]” value=“Vita”> PlayStation Vita </label>

Choose One or More

Group related fields.

<fieldset> <legend>Please describe the photo</legend> <ul> <li> <label> <input type=“radio” name=“reason” value=“embarrassing”> It’s embarrassing </label> </li> … </ul> </fieldset>

Group related fields

<fieldset> <legend>Please describe the photo</legend> <ul> <li> <label> <input type=“radio” name=“reason” value=“embarrassing”> It’s embarrassing </label> </li> … </ul> </fieldset>

<fieldset> <legend tabindex=“0”>Please describe the photo</legend> <ul> <li> <label> <input type=“radio” name=“reason” value=“embarrassing”> It’s embarrassing </label> </li> … </ul> </fieldset>

Don’t introduce unnecessary complexity.

Phone Number:

<label for=“tel”>What’s Your Business Phone Number?</label> <input type=“tel” id=“tel” name=“business_phone”>

Free Response: Telephone

Text Field No Maybe

<label for=“tel”>What’s Your Business Phone Number?</label> <input type=“tel” id=“tel” name=“business_phone”>

Free Response: Telephone

Text Field No Maybe

We should work harder so our users

don’t have to.

Structured Data: Dates & Times๏input[type=date]

๏ input[type=datetime] (global)

๏ input[type=datetime-local] (local)

๏ input[type=month] (year & month)

๏ input[type=week] (year & week)

๏ input[type=time]

<label for=“flight”>What flight are you looking for?</label> <input id="flight" name=“flight” pattern=“DL\d{2,}” placeholder=“e.g. DL5407” >

Structured Data: Custom

IVLay out fieldswith purpose

Field & Label Layouts

Checkboxes & Radio Controls

<fieldset class=“grouped radios”> … <label> <input type=“radio” name=“reason” value=“embarrassing”> It’s embarrassing </label> … </fieldset>

� Embarrassing

.confirmation label,

.radios label,

.checkboxes label { margin: -1em 0; padding: 1em 0; }

� Embarrassing

.radios label,

� Embarrassing

.radios label,

� Embarrassing

.radios label,

� Embarrassing

Don’t fall into the custom control trap.

VHelps users avoid (and fix) errors

Let users know when a field is required.

<p>Fields marked with a * are <strong id=“required">required</strong>.</p>

<label for=“first_name”>What’s Your First Name? <b role=“presentation” class=“required”>*</b> </label> <input id="first_name" name=“first_name" required aria-required=“true" >

Required Fields

<p><strong>All of the fields are required.</strong></p>

<label for=“first_name”>What’s Your First Name?</label> <input id="first_name" name=“first_name" required aria-required=“true" >

Required Fields

<p><strong>All of the fields are required.</strong></p>

Required Fields

Provide useful hints as to the type of response you’re

expecting.

<label for=“pattern”>Enter three numbers followed by two letters</label> <input id="pattern" name=“pattern” pattern=“\d{3}[a-zA-Z]{2}” placeholder=“e.g. 123ab” >

Suggesting a response

(The placeholder is nota substitute for a label.)

Validatein the browser.

LUKE WROBLEWSKI

Our participants were faster, more successful, less error-prone, and more

satisfied when they used the forms with inline validation.

http://is.gd/inline_form_validation

LUKE WROBLEWSKI

22% increase in success rates 22% decrease in errors made

31% increase in satisfaction rating 42% decrease in completion times

47% decrease in the number of eye fixations

http://is.gd/inline_form_validation

Indicate Required Fields

Use Native Validation

<label for=“flight”>What flight are you looking for?</label> <input id="flight" name=“flight” pattern=“DL\d{2,}” placeholder=“e.g. DL5407” >

Use Custom Validation Schema

<label for=“email”>Your Email Address</label> <input id="email" type="email" name=“email" required aria-required=“true” aria-invalid=“true” aria-describedby=“email-error" > <strong id="email-error" class=“validation-error-message"> Your email address is required</strong>

Provide Inline Error Messages

Validateon the server.

Never trustthe client.

Summarizeserver-side errors.

<div role=“alert”> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>

<label for=“email”>Your Email Address</label> <input id="email" type="email" name=“email" required aria-required=“true” aria-invalid=“true” aria-describedby=“email-error" > <strong id="email-error" class=“validation-error-message"> Your email address is required</strong>

Provide Inline Error Messages

Provide Visual Feedback of Errors

li.validation-error { color: #922026; } li.validation-error input, li.validation-error select, li.validation-error textarea { border-color: #922026; }

.validation-error label::before { content: “x "; font-family: Verdana, sans-serif; speak: none; /* The future! */ }

The Features of Highly Effective Forms๏Consider the conversation ๏Choose your words carefully ๏Make good markup choices ๏Lay out fields with purpose ๏Help users avoid (and fix) errors

Further Reading๏ “Web Form Design” by Luke Wroblewski (Rosenfeld Media) ๏ “An Extensive Guide To Web Form Usability” by Justin Mifsud

https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/ ๏ “Optimizing forms for greater conversions” by Maya Nix

http://blog.usabilla.com/optimizing-forms-greater-conversions/ ๏ “The Definitive Guide to Form Label Positioning” by Jessica Enders

http://www.sitepoint.com/definitive-guide-form-label-positioning/

Thank you!

@AaronGustafson aaron-gustafson.com

slideshare.net/AaronGustafson

The Features of Highly Effective Forms [An Event Apart Nashville 2016]

Internet

Transcript of The Features of Highly Effective Forms [An Event Apart Nashville 2016]

CSI: Nashville

An Event Apart Nashville: CSS Grid Layout

Hill Commons at Nashville West€¦ · Nashville - TN - 37204 . 615-833-8716 Greg Coleman. 615-250-6370 gcoleman@southeastventure.com. Hill Commons at Nashville West. Nashville -

Nashville Brochure

The Historic Germantown Neighborhood, Nashville, TN · Nashville Civic Design Center The Historic Germantown Neighborhood, Nashville, TN Gary Gaston Associate Design Director Nashville

Doc nashville

O Fortuna! Nashville Ballet and Nashville Symphony Chorus ... · O Fortuna! Nashville Ballet and Nashville Symphony Chorus, photo by Marianne Leach . MISSOURI ARTS COUNCIL OCTOBER

Nashville Freight Model - University of Tennesseeweb.utk.edu/~tnmug08/misc/Nashville Freight Model.pdf · Nashville Freight Model Max Baker, Nashville MPO ... alternative testing

Celebrate Nashville

Nashville 3 - Peak 10 Nashville Data Centers

Nashville Retaill_3Q11

SOUTHERN WOMEN'S SHOW ts NASHVILLE CONVENTION CENTER NASHVILLE

Nashville Youth Jazz Ensemble - The Nashville Youth Jazz ...

NASHVILLE Parking Map GLOW Nashville First Tennessee Park ... · NASHVILLE Parking Map GLOW Nashville First Tennessee Park GLOW front entrance Official GLOW Parking Other available

Nashville Retaill_2Q11

Submitted by the Nashville Area Chamber of Commerce …€¦ · to examine Metro Schools’ use of data for improving student outcomes. Apart from the challenges associated with the

HVSR MEASUREMENTS IN COMPLEX SEDIMENTARY … · SAGEEP 2018 Nashville, Tennessee USA HVSR MEASUREMENTS IN COMPLEX SEDIMENTARY ENVIRONMENT AND HIGHLY STRUCTURED RESONATOR TOPOGRAPHY

NASHVILLE SYMPHONY ANNUAL REPORT 2014/15 · NASHVILLE SYMPHONY . ANNUAL REPORT 2014/15. 2. NASHVILLE SYMPHONY. O. n behalf of the entire Nashville Symphony — musicians, chorus,

NASHVILLE REGIONAL PROFILE - Amazon S3 · NASHVILLE REGIONAL PROFILE Published by the Nashville Area Chamber of Commerce NASHVILLE: Strategically located in the heart of the Tennessee

The Fairgrounds Nashville, Nashville Flea Market License ...Nashville Flea Market License Agreement and Rules Revised: August 23, 2019 and Effective September 1, 2019 Nashville Flea