Presentation by Rebecca Blakiston and Ann Shivers-McNair at edUi in Charlottesville, VA, October 2018.
In higher education, forms are everywhere. Students use them to register for classes, staff use them to get technical help, and faculty use them to request classroom spaces and technology. But too often, we don’t give these forms the care and nurturing they deserve. In this session, attendees will learn how to empathize with users in order to design and write forms that are better for the people who have to use them. Attendees will learn how to ensure their forms are inclusive, approachable, and human-centered. We will cover a range of considerations from format, plain language, and structure to details like confirmation messages, button placement, and field labels. By the end of this session, attendees will be able to create forms that have users saying, “that’s nice!” and not, “this sucks!”
3. Hello, I’m Rebecca
User experience librarian @ University of Arizona
Editor-in-chief @ Weave: Journal of Library UX
UX researcher, project manager, wrangler
Content, usability, and inclusivity advocate
@blakistonr
4. Hello, I’m Ann
Assistant Professor and Director of Professional
& Technical Writing @ University of Arizona
Associate Director @ Sites of Translation User
Experience Research Center
UX researcher and teacher
Inclusive, participatory design advocate
@shiversmcnair
5. What we’ll
discuss today
★ Setting the stage
★ Big picture considerations
★ Small but mighty
considerations
8. Higher ed
loves forms
★ Job and funding applications
★ Surveys, feedback forms
★ Hiring, travel, timesheets
★ Class registration
★ Tuition payments
★ Textbook requests
★ Donation forms
★ Directories and profiles
★ Library material requests
★ Performance reviews
★ Tenure and promotion
★ Human subjects research
★ Event RSVPs
★ Other?
9. Know your
users
★ Why are they filling out the
form?
★ What is the context?
★ How are they feeling?
10. When we make things for people
at their worst, they’ll work that
much better when people are at
their best.
Eric Meyer &
Sara Wachter Boettcher
Design for Real Life
11. How we want users to feel
Smart... “This is easy.”
Happy... “Well that’s nice.”
Safe... “My stuff will be saved.”
Welcome… “I can see myself in this form.”
12. What bugs
you about
forms?
Go to PollEv.com/rebeccab909
Or text RebeccaB909 to 22333
___________________
Use hyphens between words.
Submit as many responses as
you like.
13. What kind of
forms are you
responsible
for?
Go to PollEv.com/rebeccab909
Or text RebeccaB909 to 22333
___________________
Use hyphens between words.
Submit as many responses as
you like.
20. Carolyn
Jarrett’s
question
protocol
★ Who within your
organization uses the
answer to the question?
★ What do they use them for?
★ Is the answer required or
optional?
○ If required, what
happens if a user enters
any old thing?
Forms That Work: Designing Web
Forms for Usability
21. I’m overwhelmed by these
options. Why are you making it
so much work for me to register
for this workshop?
25. Design for
access
★ Be sure that a form is the
right solution
★ Choose your medium
carefully
★ Make the form responsive
and device agnostic
★ Optimize for and test with
screen readers (e.g., label
attributes)
26. Design for
inclusion
★ Use inclusive terminology
★ Design for all possible
genders, ethnicities,
abilities
★ More strategies for
inclusion:
https://open.buffer.com/inc
lusive-language-tech/
27. It’s about giving people enough
room within our interfaces to be
themselves.
Eric Meyer & Sara Wachter-Boettcher
Design for Real Life
34. Thinking about how a form can be
organized as a conversation
instead of an interrogation can go
a long way toward making new
customers feel welcome.
Luke Wroblewski
Web Form Design: Filling in the Blanks
39. The submit button has a
strong, conversational,
personal voice.
It’s risky to use idioms that
might be misunderstood.
No field labels or label
attributes.
41. We should work hard so our users
don’t have to.
Aaron Gustafson
42. Use tools for
creating
structure
★ Sections and headings
★ Pagination or progress
indicators
★ Use consistent language
and terminology across
sections and questions
44. Make forms
easy to read
or skim
★ Place field labels above field
★ Left justify, rag right
★ Allow for lots of white space
★ Be succinct
★ Use sentence case
50. Create clear
form names
★ Start with an active verb
(e.g. “Apply,” “Request”)
★ Use an active verb in the
link to the form, too
★ Avoid too many nouns in a
row
51. A precise action verb in
the link to the form
makes it clear what you
are doing.
52. A precise action verb in the
form name makes it clear
what you are doing.
54. Make it
obvious
which fields
are optional
★ Most fields should be
required. Limit optional
fields to 1-2 per form
★ Indicate which fields are
optional by saying optional
★ Be consistent in how
required and optional are
indicated
★ Asterisks are a common
convention to mean
“required”
59. Make name
fields
inclusive
★ Don’t limit length
★ Don’t force first letter
capitalization
★ Don’t prevent capitalization
of a second name
★ Allow hyphens in last
names
64. The more rigid we are about what
we accept, the more people we
leave out.
Eric Meyer & Sara Wachter-Boettcher
Design for Real Life
65. Includes a broad “Another
gender identity” option as
well as an option to not
disclose.
66. Non-binary and includes
options to self-identify or
not say. Tells you why
they’re asking and who
will see it.
If you try to list
everything, you may still
make someone feel left out
if their identity isn’t in the
list.
68. Give clear
options with
selectors
★ Pick a thoughtful default
that’s either the most
common answer or the first
in a logical sequence
★ Put the most common
options at the top, and for
longer lists, use
alphabetical sequencing
★ Use the right selector for
the information you are
soliciting
73. Ask one
question at a
time
★ Don’t combine multiple
questions into one
★ Isolate the pieces of
information you are asking
for
★ Use logic to order questions
that follow from previous
information
79. Use
contextual
help
effectively
★ A label describes the field
★ Placeholder text is a
suggestion for the type of
thing you expect. It is not a
substitute for a label or help
text above the field
★ Help text provides an
explanation or further
information
84. Provide the
right error
message at
the right time
★ Make it clear when there are
errors
★ Make it clear what any
errors are
★ Don’t stress users out with
error messages before it’s
necessary
RBIn higher education, forms are everywhere. Students use them to register for classes, staff use them to get technical help, and faculty use them to request classroom spaces and technology. But too often, we don’t give these forms the care and nurturing they deserve. In this session, attendees will learn how to empathize with users in order to design and write forms that are better for the people who have to use them. Attendees will learn how to ensure their forms are inclusive, approachable, and human-centered. We will cover a range of considerations from format, plain language, and structure to details like confirmation messages, button placement, and field labels. By the end of this session, attendees will be able to create forms that have users saying, “that’s nice!” and not, “this sucks!”
What You'll Learn
How to write useful field labels, error messages, and confirmation messages
How to simplify form content, including only what is absolutely necessary
RB
RB
ASM
RB
ASM
ASM
ASM
Tip them to start thinking about more options because we’ll ask you about this in a few minutes
ASM
Including stress cases:
Financial aid forms
Medical forms
Re-entering the university
Withdrawing from the university
ASM
ASM
This is easy
Well that’s nice (edUi example)
Safe! My stuff will be saved.
I can represent/see myself in this form
Sign into polleverywhere, p0lling. Go to full screen.
Sign into polleverywhere, p0lling. Go to full screen.
This is a travel request form. Employees have to fill this out anytime they are traveling anywhere. In this case, I was going two hours north to visit another university and talk about some collaborative projects.
What do you notice? What’s wrong:
Every field was required, but the only thing I could fill out was the date - there is no conference, no website.
ASM
8 minutes for this section
What could be even better: point out the multi-ethnic options (overwhelming the user/combining questions)
This form is yelling at me.
This isn’t mean, but it’s still unnecessary
RB
ASM
In this section, we’re putting principles into practice by focusing on specific aspects of form design...
ASM
...starting with form names
RB
Using asterisk for “required” in the “Your Name” field, but using the description “Required” in the “Your Email” field.
ASM
RB
ASM
Better to first ask with radio buttons:
Entire day
Part of day
Cannot attend
If “Part of day,” then ask about session attendance.
Better to first ask with radio buttons:
No funding
Funding
If “Funding,” then ask about type of funding.
RB
These are the three mechanisms for providing contextual help (hints)