Designing the Conversation [SmashingConf 2016]
•
1 j'aime•1,373 vues
This document provides guidance on designing accessible and user-friendly forms. It discusses best practices such as: - Using labels to associate each form control with its corresponding field - Specifying the type of input that is most appropriate for the data being collected - Allowing values to be auto-filled to reduce errors and ease the user experience - Clearly indicating which fields are required to submit the form - Providing helpful validation and error messages when invalid data is entered The document explores various HTML form elements and attributes that can be leveraged to improve accessibility and usability of forms on the web. Special consideration is given to supporting auto-fill functionality and native validation handling across browsers.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (18)
Similaire à Designing the Conversation [SmashingConf 2016]
Similaire à Designing the Conversation [SmashingConf 2016] (20)
Plus de Aaron Gustafson
Plus de Aaron Gustafson (20)
Dernier
Dernier (20)
Designing the Conversation [SmashingConf 2016]
- 5. I’m really happy to see you. Please fill out the form below to contact us. All fields are required.
- 12. IIMindful Links
- 17. <a$href="…"$hreflang="es"><b$class="hidden">Lea$esta$página$en$ $$</b>Español</a> Creating Context
- 27. <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
- 34. ๏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
- 36. ๏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
- 37. ๏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
- 38. 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. “Without your first name, I won’t know how to address you. Could you please provide it?”
- 52. <label$for="first_name">What’s$your$first$name?</label>$ <input$id="first_name"$name="first_name">
- 55. <label$for="first_name">What’s$your$first$name?</label>$ <input$id="first_name"$name="first_name">
- 56. Use the right field type
- 58. <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
- 59. Browsers ignore what they don’t understand
- 61. <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
- 62. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad Choose One
- 65. <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
- 67. Phone Number:
- 68. <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
- 69. We should work harder so our users don’t have to
- 70. ๏input[type=date]$ ๏input[type=datetime] (global) ๏input[type=datetimeQlocal] (local) ๏input[type=month] (year & month) ๏input[type=week] (year & week) ๏input[type=time] (year & week) Structured Data: Dates & Times
- 71. Help users avoid (and fix) errors
- 72. Enable common information to be auto-filled
- 75. ๏ 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
- 76. ๏For Addresses: ‣ shipping ‣ billing ๏For Telephone Numbers: ‣ home ‣ work ‣ mobile ‣ fax ‣ pager ๏Universally: ‣ section-* Autofill Token Modifiers
- 80. Let users know when a field is required
- 84. Provide useful hints as to the type of response you’re expecting
- 85. <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
- 89. <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
- 93. <input type=“hidden” name=“price” value=“399.99”>
- 94. <input type=“hidden” name=“price” value=“1”>