Designing the Conversation [Paris Web 2017]
•
1 gostou•1,212 visualizações
This document discusses designing accessible and user-friendly forms on the web. It recommends using labels to associate each form control with its label, marking required fields clearly, using the appropriate input type like email for email fields, and enabling autofill so users can easily fill out forms with information they've provided before. It also suggests considering progressive enhancement and ensuring forms work without JavaScript. The goal is to design forms that are intuitive for users to complete without unnecessary obstacles.
Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a Designing the Conversation [Paris Web 2017]
Semelhante a Designing the Conversation [Paris Web 2017] (20)
Mais de Aaron Gustafson
Mais de Aaron Gustafson (20)
Último
Último (20)
Designing the Conversation [Paris Web 2017]
- 6. I’m really happy to see you. Please fill out the form below to contact us. All fields are required.
- 13. IIMindful Links
- 28. <div id="nav" role="navigation"> <ul> <li> <a href="/about/"><b class="hidden">A Bit </b>About<b class="hidden"> Me</b></a> </li> … </ul> </div> Navigation Region
- 35. ๏banner - first header element not inside a sectioning element ๏navigation - nav ๏search ๏main - main ๏complementary - aside ๏contentinfo - first footer element not inside a sectioning element HTML Landmarks
- 37. ๏p - a paragraph ๏ol - a list of items whose order matters ๏ul - an list of items whose order doesn’t matter ๏li - an item in a list ๏dl - a list of terms and their associated definitions ๏dt - terms to be defined within a definition list ๏dd - descriptions of terms in a definition list ๏figure - referenced content (images, tables, etc.) ๏figcaption - caption for a figure Alterna-divs
- 38. ๏article - a piece of content that can stand on its own ๏section - a section of a document or article ๏header - preamble content for a document, article, or section ๏footer - supplementary information for a document, article, or section ๏main - the primary content of a document ๏nav - navigational content ๏aside - complementary content Alterna-divs
- 39. IVFriendly Forms
- 41. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
- 42. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
- 43. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo ◉ Other it’s embarrassing
- 44. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
- 45. Talk to your users like they talk to one another
- 46. Make it clear users need to respond
- 47. “What’s your first name?”
- 48. “What’s your first name?”
- 49. “Without your first name, I won’t know how to address you. Could you please provide it?”
- 50. “Without your first name, I won’t know how to address you. Could you please provide it?”
- 55. <label for="first_name">What’s your first name?</label> <input id="first_name" name="first_name">
- 57. <label for="first_name"> What’s your first name? <input id="first_name" name="first_name"> </label>
- 58. <label for="first_name">What’s your first name?</label> <input id="first_name" name="first_name">
- 59. Use the right field type
- 61. <label for="email">What’s Your Business Email Address?</label> <input type="email" id="email" name="email"> Free Response: Email Appearance Native Validation Text Field Maybe
- 62. Browsers ignore what they don’t understand
- 64. <label for="url">What’s Your Website’s URL?</label> <input type="url" id="url" name="url"> Free Response: URL Appearance Native Validation Text Field Maybe
- 65. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad Choose One
- 68. <label for="volume">How Loud is Spinal Tap?</label> <input type="range" id="volume" name="volume" min="0" max="11" step="1" > Choose One: Number Appearance Native Validation Slider (Maybe) Maybe
- 70. Phone Number:
- 71. <label for="tel">What’s Your Business Phone Number?</label> <input type="tel" id="tel" name="business_phone"> Free Response: Telephone Appearance Native Validation Text Field No
- 72. We should work harder so our users don’t have to
- 73. ๏input[type=date] ๏input[type=datetime] (global) ๏input[type=datetime-local] (local) ๏input[type=month] (year & month) ๏input[type=week] (year & week) ๏input[type=time] (year & week) Structured Data: Dates & Times
- 74. Help users avoid (and fix) errors
- 75. Enable common information to be auto-filled
- 78. ๏ name ๏ honorific-prefix ๏ given-name ๏ additional-name ๏ family-name ๏ honorific-suffix ๏ nickname ๏ username ๏ new-password ๏ current-password ๏ organization-title ๏ organization ๏ street-address ๏ address-line1 ๏ address-line2 ๏ address-line3 ๏ address-level4 ๏ address-level3 ๏ address-level2 ๏ address-level1 ๏ country ๏ country-name ๏ postal-code ๏ cc-name ๏ cc-given-name ๏ cc-additional-name ๏ cc-family-name ๏ cc-number ๏ cc-exp ๏ cc-exp-month ๏ cc-exp-year ๏ cc-csc ๏ cc-type ๏ transaction-currency ๏ transaction-amount ๏ language ๏ bday ๏ bday-day ๏ bday-month ๏ bday-year ๏ sex ๏ url ๏ photo ๏ tel ๏ tel-country-code ๏ tel-national ๏ tel-area-code ๏ tel-local ๏ tel-local-prefix ๏ tel-local-suffix ๏ tel-extension ๏ email ๏ impp Autofill Tokens
- 79. ๏For Addresses: ‣ shipping ‣ billing ๏For Telephone Numbers: ‣ home ‣ work ‣ mobile ‣ fax ‣ pager ๏Universally: ‣ section-* Autofill Token Modifiers
- 83. Let users know when a field is required
- 87. Provide useful hints as to the type of response you’re expecting
- 88. <label for="flight">What flight are you looking for?</label> <input id="flight" name="flight" pattern="DLd{2,}" placeholder="e.g. DL5407" > Suggesting a response
- 92. <label for="flight">What flight are you looking for?</label> <input id="flight" name="flight" pattern="DLd{2,}" placeholder="e.g. DL5407" > Use Custom Validation Schema
- 98. <input type=“hidden” name=“price” value=“399.99”>
- 99. <input type=“hidden” name=“price” value=“1”>