The No Good, Terrible, Very Bad Web Form — HighEdWeb 2014
•
2 likes•932 views
FormAssembly's presentation at HighEdWeb 2014! #heweb14 Web form design can suck, but it doesn't have to! In this session, we explore the true horrors of bad form design. We discuss the many things you shouldn't do with online forms, and what best practices you should follow. You'll be better equipped to fit your forms into your content strategy, increase engagement, and compel your audience to take action.
Recommended
Recommended
More Related Content
Similar to The No Good, Terrible, Very Bad Web Form — HighEdWeb 2014
Similar to The No Good, Terrible, Very Bad Web Form — HighEdWeb 2014 (20)
Recently uploaded
Recently uploaded (20)
The No Good, Terrible, Very Bad Web Form — HighEdWeb 2014
- 1. The No Good, Terrible, Very Bad Web Form CEDRIC SAVARESE FormAssembly Founder, CEO @FormAssembly #heweb14 #badforms
- 4. 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.
- 6. Home Phone Number * ERROR: This field is required.
- 7. Social Security Number * 555-55-1234 ERROR: SSN is invalid.
- 11. Two weeks later, Alex gets an email.
- 12. ! Calvert University Student Data Exposure Calvert University <systems@calvert.edu> to alexws 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
- 15. Bad Design 1 Bad Practices 2 Bad Processes
- 16. Bad practices irritate your respondents and lower your response rate. Confusing Frustrating Chaotic Unfriendly
- 17. #1 Input Validation • Don’t be too strict • Display hints • Auto-format when possible • Report errors early
- 18. #2 Slicing Fields • Generally too rigid • Requires concatenation • Can help when format is well-defined
- 19. #3 Copying Conventions Paper ≠ Screen
- 20. #3 Copying Conventions ! 3 ! 2 ! 4 ! 1
- 21. #3 Copying Conventions For addresses, ask country first
- 22. #3 Copying Conventions • 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
- 23. #4 Auto-Complete Home Address: 5704 Cranberry Lane Line 2:
- 24. #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
- 25. #5 Auto-Advancing • 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
- 26. #6 Hints and Labels • Always have a label • Do not use the “placeholder” attribute alone
- 27. #7 Non-Standard Components • May not be compatible or compliant enough • May not be supported going forward • Use HTML5 features with polyfills when needed
- 28. #8 Dark Patterns • Preserve user choices at all times • Use clear labels and calls to action • No opt-in by default
- 29. Bad processes block workflow and increase liability. Inconsistent Time-consuming Divisive Dangerous
- 30. Processes Bottlenecks • Empower stakeholders to drive change • Make changes easy • Integrate your forms (no paper or double-entry!)
- 31. Processes Security • 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)
- 32. Processes Compliance • 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
- 33. Stop by our booth!
- 34. Thank You ! Questions? ! @FormAssembly contact@formassembly.com Share your takeaways! #heweb14 #badforms
Editor's Notes
- So, Alexander has grown up, and is now ready to go to college. Now, he’s a teenager, always with his phone, and in between things, and applying is the last thing on his mind… but he has to do it, so on his way home, he opens the online application on his phone. Of course, it’s not going to work: it’s too long, and it’s not meant to be filled out on a phone. So Alexander has to go and get his laptop, with this feeling that it’s going to be a very bad, no good, terrible web form. And for the sake of this presentation, we’re going to make it a terrible web form.
- Alexander starts the online application, and he runs into problem after problem. So, what are the most common design issues with web forms? - no input validation / unforgiving format issues - not standards compliant / not responsive / not mobile-friendly - asking for too much information / irrelevant information - unclear call to action. Okay, so he’s typing in data… he’s fast, and he’s on page 2. Oh wait! Slow down.
- Oh… why is this required? Who has a home phone number anymore?
- Okay, so the social security number must be entered without dashes. Not sure why, just keep going.
- Okay, good to go to page 2. Now be careful with that cancel button. You don’t want to lose everything.
- Alexander is savvy, he can normally whiz his way through a form… but he keeps pressing the tab key, and the tab order is all wrong and it keeps jumping in a weird pattern. Plus, whenever he runs into a checkbox, hitting the label doesn’t do anything, so he has to aim for the little box. At this point, he doesn’t really feel like working on the application anymore. Mom is calling him to dinner, and he’s not sure what will happen if he leaves the browser like this. Will it timeout? There’s no save button anywhere.
- Done! It’s been long and painful and he’s not quite sure if he really checked the box for that scholarship he needs… but it’s done. The no good, terrible, very bad web form is behind him.
- …Or maybe not.
- Oh no… data breach… including student names, addresses, dates of birth, and social security numbers. This, by the way, is a real email… and the issues Alexander faced so far are also very common.
- But that’s okay, I suppose. Alexander got in… and, well, he forgot a supplemental form so he didn’t get his scholarship, but he’s in this work-study program… so that helps. Now, for some reason, he still has to deal with this no good, terrible, very bad web form. He’s printing applications and he has to type them into another database. It’s ridiculous.
- And there are those people arguing behind him about making changes to the form, and it’s taking forever.
- So, let’s leave our poor Alexander, and go back for a bit to all those issues. And, by the way, this isn’t made up. This is the kind of experience people run into all the time. It applies to all kinds of forms as well. So, what is bad design, exactly? It’s twofold: bad practices and bad processes. I studied in France, a long time ago, and I’ve no recollection of the application process… so maybe it wasn’t that bad. But I’ve worked here in the US, in Indiana, on an online application for a small college, so I’m a bit familiar with the process part of bad form design.
- Bad practices result in poor usability and make for a terrible user experience. So let’s go over some of those bad practices and see what we can improve.
- Date: Maybe. Gregorian is de-facto international standard, so the format is well known. (Hebrew calendar is official in Israel, however most Israeli don’t know their birthdate in that calendar.) - can help avoid Month / Day order confusion - can be slower to fill out
- An example of a convention is The Paper Mentality… Where form creators get stuck in a paper mindset, and the conventions of paper carry over to online forms. Here we have a paper form. We’ve all had to deal with paper forms. And paper forms are designed to maximize space so you use less paper. It’s economical. All the fields stretch to fill the page.
- Snail Mail is an extension of the Paper Mentality. The mailing address convention is very common… where Country is listed at the very end. And when forms are intended for U.S. residents, usually it’s not an issue. But if a web form’s audience includes people who live in other countries, then… It can be frustrating when the flow isn’t linear, from the top to the bottom. Respondents may need to back-track and jump around to fill in a form.
- Here’s an example solution — the Country field comes first.
- Line 2: Ah-ah… This is the Paper Mentality, right? On an envelope, you often need two lines to write the street address, and in turn, databases are designed to store 2 fields, so forms have 2 fields as well… but maybe you don’t need that anymore. Why not make it a single-field, multi-line? Well, maybe… but (1), people are used to 2 lines. It’s not going to confuse or delay them too much. (2) Also, what about the auto-complete feature in the browser? It turns those fields yellow and can auto-complete them for you. It would be silly to miss half the address because you thought you were clever.
- HTML5 is evolving. You can make it easier with the autocomplete attribute.
- Always have a label. Feels like a space saver, but it’s easy for people to forget what the label was and enter the wrong information.
- Should you use the new shiny component that turns your input in a combo box that looks really neat and is so much easier to use? … Probably not. Does it work with older browsers? Does it work with older devices? Does it work on all devices? Does it work on different locales, languages? Is it W3C standards / 508c compliant? Will it still be working next year, or the year after?
- Bad processes are back-end. They face whoever builds and owns the web form — and whoever collects and manages the data. Stakeholders, IT, developers, administrators, creatives — that’s you! Bad processes make it hard to get the work done (on time!) and maintain standards across your department or your campus. Bad processes pit stakeholders against IT, because there’s miscommunication and different expectations. And, worst of all, bad processes can mean security threats.