Designing the Conversation [SpeechTek 2016]
•
1 like•1,410 views
Users are gradually becoming more accustomed to and reliant on voice-based interactions, so enabling users to complete critical tasks without a visual user interface is crucial for the long-term success of websites. This session shows how designing such a “headless” user interface is equivalent to designing the conversation you want to have with your users. Learn how to ensure that the technological decisions you make with respect to HTML, CSS, and JavaScript respect and support that conversation.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (18)
Similar to Designing the Conversation [SpeechTek 2016]
Similar to Designing the Conversation [SpeechTek 2016] (17)
More from Aaron Gustafson
More from Aaron Gustafson (20)
Recently uploaded
Recently uploaded (20)
Designing the Conversation [SpeechTek 2016]
- 6. I’m really happy to see you. Please fill out the form below to contact us. All fields are required.
- 13. IIMindful Links
- 19. <a$href="…"$hreflang="es"><b$class="hidden">Lea$esta$página$en$ $$</b>Español</a> Creating Context
- 29. <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
- 36. ๏banner - first header element not inside an article or section ๏navigation - nav ๏search ๏main - main ๏complementary - aside ๏contentinfo - first footer element not inside an article or section HTML Landmarks
- 38. ๏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
- 39. ๏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
- 40. IVFriendly Forms
- 43. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
- 44. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
- 45. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo ◉ Other
- 46. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo ◉ Other it’s embarrassing
- 47. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
- 48. Talk to your users like they talk to one another
- 49. Make it clear users need to respond
- 50. “What’s your first name?”
- 51. “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">
- 58. <label$for="first_name">What’s$your$first$name?</label>$ <input$id="first_name"$name="first_name">
- 59. Use the right field type
- 62. <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
- 63. Browsers ignore what they don’t understand
- 65. <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
- 66. <label$for="time_at_job">How$Many$Years$Have$You$Been $$in$Your$Current$Position?</label>$ <input$type="number"$id="time_at_job"$name="time_at_job"> Free Response: Number Appearance Native Validation Text Field+ Maybe
- 67. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad Choose One
- 71. <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
- 72. Choose One or More
- 81. Phone Number:
- 82. <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
- 83. We should work harder so our users don’t have to
- 84. ๏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
- 85. <label$for="flight">What$flight$are$you$looking$for?</label>$ <input$id="flight"$name="flight"$ $ $ $ $pattern="DLd{2,}"$ $ $ $ $placeholder="e.g.$DL5407"$ $ $ $ $> Structured Data: Custom
- 86. Help users avoid (and fix) errors
- 87. Enable common information to be auto-filled
- 90. ๏ 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
- 91. ๏For Addresses: ‣ shipping ‣ billing ๏For Telephone Numbers: ‣ home ‣ work ‣ mobile ‣ fax ‣ pager ๏Universally: ‣ section-* Autofill Token Modifiers
- 95. Let users know when a field is required
- 99. Provide useful hints as to the type of response you’re expecting
- 100. <label$for="pattern">Enter$three$numbers$followed$by $$$two$letters</label>$ <input$id="pattern"$name="pattern"$ $ $ $ $pattern="d{3}[aQzAQZ]{2}"$ $ $ $ $placeholder="e.g.$123ab"$ $ $ $ $>$ Suggesting a response
- 101. (The placeholder is not a substitute for a label.)
- 103. LUKE WROBLEWSKI Our participants were faster, more successful, less error-prone, and more satisfied when they used the forms with inline validation. http://is.gd/inline_form_validation
- 104. LUKE WROBLEWSKI 22% increase in success rates 22% decrease in errors made 31% increase in satisfaction rating 42% decrease in completion times http://is.gd/inline_form_validation
- 107. <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
- 113. <input type=“hidden” name=“price” value=“399.99”>
- 114. <input type=“hidden” name=“price” value=“1”>