The No Good, Terrible, Very Bad Web Form

CEDRIC SAVARESE FormAssembly Founder, CEO

@FormAssembly #heweb14 #badforms

I wanted to take a look at the application form on my phone. There was a ton of stuff in a tiny font. !I could tell it was going to be a no good, terrible, very bad web form.

Home Phone Number *ERROR: This field is required.

Social Security Number * 555-55-1234

ERROR: SSN is invalid.

NEXT PAGE CANCEL

Two weeks later, Alex gets an email.

Dear Alexander: !On October 9, 2014, Calvert University discovered that a server containing some of your personal data was not adequately protected and was potentially at risk to disclosure. We take data security very seriously and we apologize for this matter. !The data includes student names, addresses, dates of birth, and social security numbers. No financial information, account usernames, or passwords were involved in this issue. !The university immediately secured the data upon discovering the possibility of unauthorized access. There is no evidence that your data has been downloaded or used by unauthorized individuals. A comprehensive review of the server logs indicate that there is low probability that any data was

Calvert University <systems@calvert.edu> to alexws

Calvert University Student Data Exposure

!

Bad Processes

Bad Design

Bad Practices1

2

Confusing

Frustrating

Chaotic

Unfriendly

Bad practices irritate your respondents

and lower your response rate.

#1 Input Validation

• Don’t be too strict

• Display hints

• Auto-format when possible

• Report errors early

• Generally too rigid

• Requires concatenation

• Can help when format is well-defined

#2 Slicing Fields

#3 Copying Conventions

Paper ≠ Screen

!

1

!

2

!

3

!

4

#3 Copying Conventions

#3 Copying Conventions

For addresses, ask country first

• Don’t follow conventions blindly

• Use top-down layout

• Align labels above fields for maximum readability

• Break down the form into easy steps

• Use branching logic to skip questions as needed

#3 Copying Conventions

Home Address: 5704 Cranberry Lane

Line 2:

#4 Auto-Complete

#4 Auto-Complete• Browsers can autofill common fields, like

name and address

• HTML standard is evolving. “Autocomplete” attribute can support more than on/off

!

• Using common labels also helps

• Faster entry – in theory

• In practice, most people don’t expect it, and end up fighting it

• Good if used often and user can learn to expect it

#5 Auto-Advancing

• Always have a label • Do not use the “placeholder” attribute alone

#6 Hints and Labels

#7 Non-Standard Components• May not be compatible or

compliant enough

• May not be supported going forward

• Use HTML5 features with polyfills when needed

• Preserve user choices at all times

• Use clear labels and calls to action

• No opt-in by default

#8 Dark Patterns

Inconsistent

Time-consuming

Divisive

Dangerous

Bad processes block workflow and increase liability.

• Empower stakeholders to drive change

• Make changes easy

• Integrate your forms (no paper or double-entry!)

BottlenecksProcesses

• Avoid ad-hoc development

• Avoid rogue form creators

• Centralize form creation and data collection

• Make sure your developers are familiar with data-sanitization, XSS, CSRF, OWASP Top 10

• Use (good) SSL (Heartbleed / POODLE attacks)

SecurityProcesses

• Know your compliance requirements: FERPA, HIPAA, 508c, PCI, and state laws

• Don’t collect data that you don’t need

• Don’t store data longer than you have to

• Control who accesses the data

ComplianceProcesses

Stop by our booth!

Thank You !

Questions? !

@FormAssembly contact@formassembly.com

Share your takeaways! #heweb14 #badforms