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!”

1. Do No Harm
making better forms for people
Rebecca Blakiston & Ann Shivers-McNair
October 10, 2018

2. Introductions
So nice to meet you.

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

6. Setting the stage
Forms are kind of a big deal.

7. Forms are a necessary evil.
Aaron Gustafson

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.

14. Big picture
considerations

15. The world needs more people who
understand what makes one form
easier to fill out than another.
Jessica Enders, Designing UX: Forms

16. #1: Simplicity
Avoid the complicated and unnecessary.

17. Make every field fight for its place
on your form.
Aaron Gustafson

18. Can’t get much easier
than this.

19. You shouldn’t need
instructions for how to
fill out a form.

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?

22. Unnecessary
question.

23. Every field is required,
even “additional
comments.”

24. #2: Inclusivity
Create forms for everyone.

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

28. Checkboxes allow
multiple selections.
Write-in responses
include everyone.

29. This ethnicity question
allows you to select
multiple options as
well as add your own.

30. This also allows you to
select from options,
and/or write something
custom.

31. But I don’t want to add a
protein…

32. Continuing track faculty
weren’t considered in
survey design.

33. Use plain,
friendly
language
★ Avoid jargon
★ Avoid legalese
★ Write like you talk

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

35. Direct, simple, and
conversational.

36. The one-sentence intro is
simple and welcoming.

37. This isn’t.

38. It’s not yelling at
me, but it’s still too
long.

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.

40. #3: Readability
Use logical sequencing and follow conventions.

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

43. Clearly labelled sections
help with skimming and
let you know what to
expect.

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

45. Easy on the eyes.

46. Right justification is hard to
read, especially in longer
sentences.

47. Field labels are distant from
fields, making it hard to see the
association.
Not enough spacing between field
labels to distinguish them.

48. Small but mighty
considerations

49. Form names

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.

53. Required vs. optional fields

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”

55. Makes it clear this is
optional and easy to
skip.

56. Makes it clear that all fields are
required, and gives users peace
of mind they can change their
answers later.

57. Inconsistency in how
required fields are
indicated.

58. Name fields

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

60. Ann’s last name is not
acceptable, apparently...

61. … not even for billing
purposes.

62. Gender fields

63. Make gender
fields
inclusive
★ Avoid binary gender
selectors
★ Allow write-in responses
★ Make it optional if possible

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.

67. Selectors

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

69. Doesn’t provide an
“other” option and it’s a
required field.

70. This should not be a
dropdown.

71. What if my answer is 7...

72. Isn’t weekly occasionally?
What does occasionally mean?
What if I’ve visited it several
times but not nearly every
month?

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

74. This combines two
questions into one.

75. This also combines two
questions into one.

76. Contextual help

77. Provide useful hints as to the type
of response you’re expecting.
Aaron Gustafson

78. field label placeholder
text
help text

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

80. For students unfamiliar
with work study, there is
help text and a link to
learn more.

81. Placeholder text makes it
clear the type of response
they’re looking for.

82. More handy placeholder
text with an example.

83. Feedback messages

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

85. Don’t green
checkboxes mean I
already meet the
criteria?

86. Immediately tells me
my email address is
invalid
Makes it clear what the
error is

87. Create
informative
confirmation
messages
★ Make it clear what the user
just did
★ Make it clear what to expect
next

88. Makes it clear what happens next.
And you get two relevant calls to
action as possible next steps.

89. Confirmation makes it clear
what happened and what to
expect next.

90. I have no idea what
decrementing quotas
means.

91. Slow down, step away from our
shortcuts, and consider things
with real people in mind.
Eric Meyer & Sara Wachter-Boettcher
Design for Real Life

92. Questions?
Let’s discuss.