Embed Size (px)
Citation preview
UX of Form Design:How to Design an effective form
I am Julie GrundySr. UX Designer at Bronto in Durham, NC
I love to talk about research, usability, and traveling
You can find me at @julie_away
Hey y’all!
Why do we care about forms?
“
“Webforms are often the last and most important mile in a long journey”
- Luke Wroblewski, Web Form Design: Filling in the Blanks
Follow usability guidelines● Are faster to complete● Almost twice as likely to submit without
errors
The challenge is that forms are annoying
“
Lasting consequences
What makes an effective form?
?
◉ Reduce cognitive load ◉ Help prevent errors◉ Make it human
Guiding Principles
● Top-Align● Put close to
fields● Avoid all caps
Reduce Cognitive Load
Labels
Reduce Cognitive Load
Sequential Buttons● Put the
primary action on the right, the secondary on the left.
● Don’t use “Reset”!
Reduce Cognitive Load
One column● For readability● Including
checkboxes and radios
Reduce Cognitive Load
Show All Options if Under 5-6 ChoicesOr use contextual search if there are more than 26
Reduce Cognitive Load
Match field length to estimated text size
Reduce Cognitive Load
Group Related Information
● Apply content strategy techniques to your form
● Helps with longer forms
Reduce Cognitive Load
Use Pre-Fills when you can
Useful with addresses or emails
Reduce Cognitive Load
Show Progress
Reduce Cognitive Load
Add attributes for usability
Prevent Errors
Use Input Masks to help users format numbers
^ From Mike Madaio, The New Rules of Form Design
Prevent Errors
Prevent Errors
Field Validation● Specify errors
in line ● Validate per
field
Prevent Errors
Leave select list blank● Static values
are easy to skip● Smart defaults
can increase completion time and accuracy.
Prevent Errors
Show basic help textUnderneath input box
Prevent Errors
Differentiate Button StylesDifferent styles from primary and secondary
Make it Human
Make it Human
Clear and simple language and CTAsLabels and buttons should clearly explain what to do and be written for the user
Make it Human
Limit typingDon’t make people type than then need to.
Make it Human
Make it accessible● All users have
equal access to information and functionality
● Better for everyone
Make it Human
Value users time● Ask only if
you need to● Make each
question as engaging as you can
Make it Human
Consider the Context● Empathize● Picture the user
when creating the fields.
● Situations matter
Make it Human
Clear Call to Action
● Remind people why they are filling out your form
Shorter the better, right?
Not necessarily. More important to have engaging, contextual fields.
Common questions
Optional vs Required?
● Don’t over require● Mark optional fields,
not required ones
Common questions
Image from https://www.formulate.com.au/blog/required-versus-optional-fields-new-standard
What went wrong?
Example time
Material Design
● Google design trend● Breaks the top-align
label rule
Conversational User Interfaces (CUI)● Not the future of
form design, but the future of chat apps
● Successful in collecting data
Voice
● Compelling way for input/output of content
● Usability heuristics still hold true
Final thoughts
Remember the guiding principles:
● Reduce cognitive load ● Help prevent errors● Make it human
Special thanks to
● SlidesCarnival for the presentation template● Luke Wroblewski, Kathryn Whitenton, Andrew
Coyle, Mike Madaio, Katie Sherwin, Nick Babich
● All of you beautiful people for being here!
