Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Do No Harm: Making Better Forms for People

462 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

Do No Harm: Making Better Forms for People

  1. 1. Do No Harm making better forms for people Rebecca Blakiston & Ann Shivers-McNair October 10, 2018
  2. 2. Introductions So nice to meet you.
  3. 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. 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. 5. What we’ll discuss today ★ Setting the stage ★ Big picture considerations ★ Small but mighty considerations
  6. 6. Setting the stage Forms are kind of a big deal.
  7. 7. Forms are a necessary evil. Aaron Gustafson
  8. 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. 9. Know your users ★ Why are they filling out the form? ★ What is the context? ★ How are they feeling?
  10. 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. 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. 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. 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. 14. Big picture considerations
  15. 15. The world needs more people who understand what makes one form easier to fill out than another. Jessica Enders, Designing UX: Forms
  16. 16. #1: Simplicity Avoid the complicated and unnecessary.
  17. 17. Make every field fight for its place on your form. Aaron Gustafson
  18. 18. Can’t get much easier than this.
  19. 19. You shouldn’t need instructions for how to fill out a form.
  20. 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. 21. I’m overwhelmed by these options. Why are you making it so much work for me to register for this workshop?
  22. 22. Unnecessary question.
  23. 23. Every field is required, even “additional comments.”
  24. 24. #2: Inclusivity Create forms for everyone.
  25. 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. 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. 27. It’s about giving people enough room within our interfaces to be themselves. Eric Meyer & Sara Wachter-Boettcher Design for Real Life
  28. 28. Checkboxes allow multiple selections. Write-in responses include everyone.
  29. 29. This ethnicity question allows you to select multiple options as well as add your own.
  30. 30. This also allows you to select from options, and/or write something custom.
  31. 31. But I don’t want to add a protein…
  32. 32. Continuing track faculty weren’t considered in survey design.
  33. 33. Use plain, friendly language ★ Avoid jargon ★ Avoid legalese ★ Write like you talk
  34. 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. 35. Direct, simple, and conversational.
  36. 36. The one-sentence intro is simple and welcoming.
  37. 37. This isn’t.
  38. 38. It’s not yelling at me, but it’s still too long.
  39. 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. 40. #3: Readability Use logical sequencing and follow conventions.
  41. 41. We should work hard so our users don’t have to. Aaron Gustafson
  42. 42. Use tools for creating structure ★ Sections and headings ★ Pagination or progress indicators ★ Use consistent language and terminology across sections and questions
  43. 43. Clearly labelled sections help with skimming and let you know what to expect.
  44. 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. 45. Easy on the eyes.
  46. 46. Right justification is hard to read, especially in longer sentences.
  47. 47. Field labels are distant from fields, making it hard to see the association. Not enough spacing between field labels to distinguish them.
  48. 48. Small but mighty considerations
  49. 49. Form names
  50. 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. 51. A precise action verb in the link to the form makes it clear what you are doing.
  52. 52. A precise action verb in the form name makes it clear what you are doing.
  53. 53. Required vs. optional fields
  54. 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. 55. Makes it clear this is optional and easy to skip.
  56. 56. Makes it clear that all fields are required, and gives users peace of mind they can change their answers later.
  57. 57. Inconsistency in how required fields are indicated.
  58. 58. Name fields
  59. 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. 60. Ann’s last name is not acceptable, apparently...
  61. 61. … not even for billing purposes.
  62. 62. Gender fields
  63. 63. Make gender fields inclusive ★ Avoid binary gender selectors ★ Allow write-in responses ★ Make it optional if possible
  64. 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. 65. Includes a broad “Another gender identity” option as well as an option to not disclose.
  66. 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. 67. Selectors
  68. 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. 69. Doesn’t provide an “other” option and it’s a required field.
  70. 70. This should not be a dropdown.
  71. 71. What if my answer is 7...
  72. 72. Isn’t weekly occasionally? What does occasionally mean? What if I’ve visited it several times but not nearly every month?
  73. 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. 74. This combines two questions into one.
  75. 75. This also combines two questions into one.
  76. 76. Contextual help
  77. 77. Provide useful hints as to the type of response you’re expecting. Aaron Gustafson
  78. 78. field label placeholder text help text
  79. 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. 80. For students unfamiliar with work study, there is help text and a link to learn more.
  81. 81. Placeholder text makes it clear the type of response they’re looking for.
  82. 82. More handy placeholder text with an example.
  83. 83. Feedback messages
  84. 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. 85. Don’t green checkboxes mean I already meet the criteria?
  86. 86. Immediately tells me my email address is invalid Makes it clear what the error is
  87. 87. Create informative confirmation messages ★ Make it clear what the user just did ★ Make it clear what to expect next
  88. 88. Makes it clear what happens next. And you get two relevant calls to action as possible next steps.
  89. 89. Confirmation makes it clear what happened and what to expect next.
  90. 90. I have no idea what decrementing quotas means.
  91. 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. 92. Questions? Let’s discuss.