Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing the Conversation [SpeechTek 2016]

700 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Designing the Conversation [SpeechTek 2016]

  1. 1. Designing the Conversation Aaron Gustafson
 @AaronGustafson slideshare.net/AaronGustafson
  2. 2. I’m$<em>really</em>$happy$to$see$you.
  3. 3. IPowerful Phrases
  4. 4. I’m$<em>really</em>$happy$to$see$you. Emphasis
  5. 5. Please$fill$out$the$form$below$to$contact$us.$ <strong>All$fields$are$required.</strong> Strong Importance
  6. 6. I’m really happy to see you. Please fill out the form below to contact us. All fields are required.
  7. 7. It's$a$terrible$movie$and$it$made$$200$million.$ <i>Go$figure!</i>$ She$is$admired$for$her$energy$and$<i$lang="fr">joie$de$ vivre</i>. Alternate Voice or Mood
  8. 8. For$12$years$and$running,$over$100,000$companies$have$adopted$ the$<b>Basecamp</b>$way$of$working.$Not$just$tried,$but$signed$ up,$said$“ahQha!”,$and$never$looked$back.$There’s$nothing$else$ like$<b>Basecamp</b>. Stylistically Offset
  9. 9. I$wrote$the$book$<cite>Adaptive$Web$Design</cite>.$If$you$like$ this$talk,$you’ll$find$inQdepth$information$about$semantics$(and$ a$whole$lot$more)$in$there. Published Works
  10. 10. A$ramp$embedded$in$staircase$of$Robson$Square$in$Vancouver,$ <abbr$ariaQlabel="British$Columbia">BC</abbr>. Abbreviations & Acronyms
  11. 11. Press$<kbd>Tab</kbd>$to$move$from$link$to$link$within$a$ document.$ The$<code>kbd</code>$element$is$used$to$indicate$keyboard$key$ names. Keyboard & Code
  12. 12. There$is$<span>nothing$particularly$interesting</span>$in$this$ sentence. Generic Phrasing
  13. 13. IIMindful Links
  14. 14. A$ramp$embedded$in$staircase$of$<a$href="https:// en.wikipedia.org/wiki/Robson_Square">Robson$Square</a>$in$ Vancouver,$<abbr$ariaQlabel="British$Columbia">BC</abbr>. Connecting Content
  15. 15. <a$href="…"><b$class="hidden">You$can$</b>finish$reading<b$ class="hidden">$<cite>The$Web$Should$Just$Work$for$Everyone</ cite>$in$less$than$35$minutes</b></a> Connecting Content
  16. 16. To$illustrate$the$concept$of$layering$styles,$perhaps$it’s$best$ to$start$at$the$beginning:$with$no$style$applied.
 <a$href="#figureQ3Q3">Figure$3.3</a>$shows$the$lodging$article$ in$Safari$with$only$the$default$browser$styles$applied.$ …$ <figure$id="figureQ3Q3">$ $$…$ </figure> Connecting Content
  17. 17. <a$rel="bookmark"$href="…"><b$class="hidden">You$can$</b>finish$ reading<b$class="hidden">$<cite>The$Web$Should$Just$Work$for$ Everyone</cite>$in$less$than$35$minutes</b></a> Creating Context
  18. 18. <a$rel="me"$href="…">Read$my$bio</a> Creating Context
  19. 19. <a$href="…"$hreflang="es"><b$class="hidden">Lea$esta$página$en$ $$</b>Español</a> Creating Context
  20. 20. <a$href="giant.mp4"$type="video/mp4">Download$this$movie</a> Creating Context
  21. 21. <a$href="mailto:aaron@easyQdesigns.net">Send$me$an$email</a>$ <a$href="tel:18009346489">Call$Comcast$Customer$Service</a> Connecting Tools
  22. 22. <a$href="giant.mp4"$type="video/mp4"$download>Download$this
 $$movie</a> Triggering Actions
  23. 23. IIIEffective Organization
  24. 24. <h1>This$is$the$title$of$the$page</h1>$ …$ <h2>This$titles$a$section</h2>$ …$ <h3>This$titles$a$subsection</h3>$ …$ etc. Headings
  25. 25. <p>This$twist$is$what$<a$href="https://en.wikipedia.org/wiki/ John_Harsanyi">John$Harsanyi</a>—an$early$game$theorist—refers$ to$as$the$<a$href="https://en.wikipedia.org/wiki/ Veil_of_ignorance">“Veil$of$Ignorance”</a>$and$what$Rawls$found,$ time$and$time$again,$was$that$individuals$participating$in$the$ experiment$would$gravitate$toward$creating$the$most$egalitarian$ societies.</p> Moving Focus
  26. 26. <p$tabindex="0">Please$fill$out$the$form$below$completely.$ <strong>All$fields$are$required.</strong></p> Moving Focus
  27. 27. Accessible
 Rich Internet Applications
  28. 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
  29. 29. ๏banner ๏navigation ๏search ๏main ๏complementary ๏contentinfo ARIA Landmark Roles
  30. 30. <header$class="banner"$role="banner"$id="top">
 $$<h1$class="banner_logo"><a$href="/"$rel="home">
 $$$$24$ways$<span>to$impress$your$friends</span></a></h1>$ </header>
  31. 31. <main$role="main">$ $$…$ </main>
  32. 32. <nav$class="navigation"$role="navigation"$id="menu">
 $$<h1$class="hidden">Browse$24$ways</h1>
 $$<ul$class="nav$navQtopics">$ $$$$<li$class="nav_item"><a$href="/topics/business/"
 $$$$$$dataQicon="♕">Business</a></li>$ $$$$…$ $$</ul>
 $$…$ </nav>
  33. 33. <footer$class="contentinfo"$role="contentinfo">$ $$<p$class="contentinfo_copyright">$ $$$$<small>©$2005Q2016$24$ways$and$our$authors.
 $$$$<a$href="/about/#colophon">Colophon</a></small>$ $$</p>$ $$<p$class="contentinfo_social">$ $$$$<a$href="http://feeds.feedburner.com/24ways"
 $$$$$$rel="alternate">Grab$our$RSS$feed</a>$ $$$$<a$href="https://twitter.com/24ways"$rel="me">Follow$us
 $$$$$$on$Twitter</a>$ $$$$<a$href="/newsletter">Subscribe$to$our$newsletter</a>$ $$</p>$ </footer>
  34. 34. ๏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
  35. 35. <div>$ $$This$is$simply$a$generic$division$of$content.$ </div>
  36. 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. 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. 38. IVFriendly Forms
  39. 39. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
  40. 40. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
  41. 41. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo ◉ Other
  42. 42. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo ◉ Other it’s embarrassing
  43. 43. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
  44. 44. Talk to your users like they talk
 to one another
  45. 45. Make it clear users need to respond
  46. 46. “What’s your first name?”
  47. 47. “Without your first name, I won’t
 know how to address you.
 Could you please provide it?”
  48. 48. “Reserve your spot”
  49. 49. What’s$your$first$name?$ <input$name="first_name">
  50. 50. <label>What’s$your$first$name?</label>$ <input$name="first_name">
  51. 51. <label$for="first_name">What’s$your$first$name?</label>$ <input$id="first_name"$name="first_name">
  52. 52. <label>$ $$What’s$your$first$name?$ $$<input$name="first_name">$ </label>
  53. 53. <label$for="first_name">$ $$What’s$your$first$name?$ $$<input$id="first_name"$name="first_name">$ </label>
  54. 54. <label$for="first_name">What’s$your$first$name?</label>$ <input$id="first_name"$name="first_name">
  55. 55. Use the right
 field type
  56. 56. <label$for="first_name">What’s$Your$First$Name?</label>$ <input$type="text"$id="first_name"$name="first_name"> Free Response
  57. 57. <label$for="first_name">What’s$Your$First$Name?</label>$ <input$id="first_name"$name="first_name"> Free Response (default)
  58. 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. 59. Browsers ignore what they don’t understand
  60. 60. Progressive Enhancement
  61. 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. 62. <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
  63. 63. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad Choose One
  64. 64. Please$describe$the$photo$ <label>$ $$<input$type="radio"$name="reason"$value="embarrassing">$ $$It’s$embarrassing$ </label>$ <label>$ $$<input$type="radio"$name="reason"$value="bad$photo">$ $$It’s$a$bad$photo$of$me$ </label>$ <label>$ $$<input$type="radio"$name="reason"$value="saddening">$ $$It$makes$me$sad$ </label> Choose One
  65. 65. <label$for="reason">Please$describe$the$photo</label>$ <select$id="reason"$name="reason">$ $$<option$value="embarrassing">It’s$embarrassing</option>$ $$<option$value="bad$photo">It’s$a$bad$photo$of$me</option>$ $$<option$value="saddening">It$makes$me$sad</option>$ </select> Choose One
  66. 66. <label$for="reason">Please$describe$the$photo</label>$ <select$id="reason"$name="reason">$ $$<option>It’s$embarrassing</option>$ $$<option>It’s$a$bad$photo$of$me</option>$ $$<option>It$makes$me$sad</option>$ </select> Choose One
  67. 67. <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
  68. 68. Choose One or More
  69. 69. Gaming$Systems$(4$available)$ <label>$ $$<input$type="checkbox"$name="reserve[]"$value="DS$Lite">$ $$Nintendo$DS$Lite$ </label>$ <label>$ $$<input$type="checkbox"$name="reserve[]"$value="Wii">$ $$Nintendo$Wii$ </label>$ <label>$ $$<input$type="checkbox"$name="reserve[]"$value="Vita">$ $$PlayStation$Vita$ </label> Choose One or More
  70. 70. <label$for="gaming">Gaming$Systems$(4$available)</label>$ <select$id="gaming"$name="reserve[]"$multiple>$ $$<option$value="DS$Lite">Nintendo$DS$Lite</option>$ $$<option$value="Wii">Nintendo$Wii</option>$ $$<option$value="Vita">PlayStation$Vita</option>$ $$<option$value="360">Xbox$360</option>$ </select> Choose One or More
  71. 71. Gaming$Systems$(4$available)$ <label>$ $$<input$type="checkbox"$name="reserve[]"$value="DS$Lite">$ $$Nintendo$DS$Lite$ </label>$ <label>$ $$<input$type="checkbox"$name="reserve[]"$value="Wii">$ $$Nintendo$Wii$ </label>$ <label>$ $$<input$type="checkbox"$name="reserve[]"$value="Vita">$ $$PlayStation$Vita$ </label> Choose One or More
  72. 72. Group related fields
  73. 73. <fieldset>$ $$<legend>Please$describe$the$photo</legend>$ $$<ul>$ $$$$<li>$ $$$$$$<label>$ $$$$$$$$<input$type="radio"$name="reason"$value="embarrassing">$ $$$$$$$$It’s$embarrassing$ $$$$$$</label>$ $$$$</li>$ $$$$…$ $$</ul>$ </fieldset> Group related fields
  74. 74. <fieldset>$ $$<legend>Please$describe$the$photo</legend>$ $$<ul>$ $$$$<li>$ $$$$$$<label>$ $$$$$$$$<input$type="radio"$name="reason"$value="embarrassing">$ $$$$$$$$It’s$embarrassing$ $$$$$$</label>$ $$$$</li>$ $$$$…$ $$</ul>$ </fieldset> Group related fields
  75. 75. <fieldset>$ $$<legend$tabindex="0">Please$describe$the$photo</legend>$ $$<ul>$ $$$$<li>$ $$$$$$<label>$ $$$$$$$$<input$type="radio"$name="reason"$value="embarrassing">$ $$$$$$$$It’s$embarrassing$ $$$$$$</label>$ $$$$</li>$ $$$$…$ $$</ul>$ </fieldset> Group related fields
  76. 76. Don’t introduce unnecessary complexity
  77. 77. Phone Number:
  78. 78. <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
  79. 79. We should
 work harder
 so our users
 don’t have to
  80. 80. ๏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
  81. 81. <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
  82. 82. Help users
 avoid (and fix) errors
  83. 83. Enable common information to be auto-filled
  84. 84. <label$for="name">What’s$Your$Name?</label>$ <input$id="name"$name="name"$required$ariaQrequired="true"> Keys for Auto-filling
  85. 85. <label$for="ssn">What’s$Your$Social$Security$Number?</label>$ <input$id="ssn"$name="ssn"$required$ariaQrequired="true"$ $$$$$$$autocomplete="off"$ $$$$$$$> Don’t Store All Values
  86. 86. ๏ 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
  87. 87. ๏For Addresses: ‣ shipping ‣ billing ๏For Telephone Numbers: ‣ home ‣ work ‣ mobile ‣ fax ‣ pager ๏Universally: ‣ section-* Autofill Token Modifiers
  88. 88. <fieldset>$ $$<legend$tabindex="0">Ship$the$blue$gift$to…</legend>$ $$<p>$ $$$$<label$for="bQstreetQaddress">Address</label>$ $$$$<input$name="ba"$id="bQstreetQaddress"$ $$$$$$$$$$$autocomplete="sectionQblue$shipping$streetQaddress">
 $$</p>$ $$<p>$ $$$$<label$for="bQcity">City</label>$ $$$$<input$name="bc"$id="bQcity"$ $$$$$$$$$$$autocomplete="sectionQblue$shipping$addressQlevel2">$ $$</p>$ $$<p>$ $$$$<label$for="bQpostalQcode">Postal$Code</label>$ $$$$<input$name="bp"$id="bQpostalQcode"$ $$$$$$$$$$$autocomplete="sectionQblue$shipping$postalQcode">$ $$</p>$ </fieldset> For Example
  89. 89. [sectionQ]$(optional)$$ [shipping|billing]$(optional)$ [home|work|mobile|fax|pager]$(optional)$ [autofill$token$name]
  90. 90. <label$for="shippingQmobile">Is$there$a$mobile$number$we$can$$ $$reach$you$on$regarding$delivery?</label>$ <input$type="tel"$id="shippingQmobile"$name="shippingQmobile"
 $$$$$$$autocomplete="sectionQred$shipping$mobile$tel">
  91. 91. Let users know when a field is required
  92. 92. <p>Fields$marked$with$a$*$are$ $$<strong$id="required">required</strong>.</p>$ …$ <label$for="first_name">What’s$Your$First$Name?$ $$<b$role="presentation"$class="required">*</b>$ </label>$ <input$id="first_name"$name="first_name"$ $$$$$$$$$$required$ $$$$$$$$$$ariaQrequired="true"$ $$$$$$$$$$> Required Fields
  93. 93. <p><strong>All$of$the$fields$are$required.</strong></p>$ …$ <label$for="first_name">What’s$Your$First$Name?</label>$ <input$id="first_name"$name="first_name"$ $$$$$$$$$$required$ $$$$$$$$$$ariaQrequired="true"$ $$$$$$$$$$> Required Fields
  94. 94. <p><strong>All$of$the$fields$are$required.</strong></p>$ …$ <label$for="first_name">What’s$Your$First$Name?</label>$ <input$id="first_name"$name="first_name"$ $$$$$$$$$$required$ $$$$$$$$$$ariaQrequired="true"$ $$$$$$$$$$> Required Fields
  95. 95. Provide useful hints as to the type of response you’re expecting
  96. 96. <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
  97. 97. (The placeholder is not
 a substitute for a label.)
  98. 98. Validate
 in the browser
  99. 99. 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
  100. 100. 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
  101. 101. <label$for="first_name">What’s$Your$First$Name?</label>$ <input$id="first_name"$name="first_name"$ $$$$$$$$$$required$ $$$$$$$$$$ariaQrequired="true"$ $$$$$$$$$$> Indicate Required Fields
  102. 102. <label$for="email">What’s$Your$Business$Email$Address?</label>$ <input$type="email"$id="email"$name="email"> Use Native Validation
  103. 103. <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
  104. 104. <label$for="email">Your$Email$Address</label>$ <input$id="email"$type="email"$name="email"$ $$$$$$$$$required$ariaQrequired="true"$ $$$$$$$$$ariaQinvalid="true"$ $$$$$$$$$ariaQdescribedby="emailQerror"$ $$$$$$$$$>$ <strong$id="emailQerror"$class="validationQerrorQmessage">$ $$Your$email$address$is$required</strong> Provide Inline Error Messages
  105. 105. <label$for="email">Your$Email$Address</label>$ <input$id="email"$type="email"$name="email"$ $$$$$$$$$required$ariaQrequired="true"$ $$$$$$$$$ariaQinvalid="true"$ $$$$$$$$$ariaQdescribedby="emailQerror"$ $$$$$$$$$>$ <strong$id="emailQerror"$class="validationQerrorQmessage">$ $$Your$email$address$is$required</strong> Provide Inline Error Messages
  106. 106. Validate
 on the server
  107. 107. <input type=“hidden” name=“price” value=“399.99”>
  108. 108. <input type=“hidden” name=“price” value=“1”>
  109. 109. Never trust
 the client
  110. 110. Summarize
 server-side errors
  111. 111. <div$role="alert">$ $$<p>There$were$errors$with$your$form$submission:</p>$ $$<ol>$ $$$$<li><a$href="#message">Message</a>$is$a$required$
 $$$$$$field</li>$ $$$$<li><a$href="#name">Name</a>$is$a$required$field</li>$ $$$$<li><a$href="#email">Email</a>$is$a$required$field</li>$ $$</ol>$ </div>
  112. 112. <div$role="alert">$ $$<p>There$were$errors$with$your$form$submission:</p>$ $$<ol>$ $$$$<li><a$href="#message">Message</a>$is$a$required$
 $$$$$$field</li>$ $$$$<li><a$href="#name">Name</a>$is$a$required$field</li>$ $$$$<li><a$href="#email">Email</a>$is$a$required$field</li>$ $$</ol>$ </div>
  113. 113. <div$role="alert">$ $$<p>There$were$errors$with$your$form$submission:</p>$ $$<ol>$ $$$$<li><a$href="#message">Message</a>$is$a$required$
 $$$$$$field</li>$ $$$$<li><a$href="#name">Name</a>$is$a$required$field</li>$ $$$$<li><a$href="#email">Email</a>$is$a$required$field</li>$ $$</ol>$ </div>
  114. 114. <div$role="alert">$ $$<p>There$were$errors$with$your$form$submission:</p>$ $$<ol>$ $$$$<li><a$href="#message">Message</a>$is$a$required$
 $$$$$$field</li>$ $$$$<li><a$href="#name">Name</a>$is$a$required$field</li>$ $$$$<li><a$href="#email">Email</a>$is$a$required$field</li>$ $$</ol>$ </div>
  115. 115. <label$for="email">Your$Email$Address</label>$ <input$id="email"$type="email"$name="email"$ $$$$$$$$$required$ariaQrequired="true"$ $$$$$$$$$ariaQinvalid="true"$ $$$$$$$$$ariaQdescribedby="emailQerror"$ $$$$$$$$$>$ <strong$id="emailQerror"$class="validationQerrorQmessage">$ $$Your$email$address$is$required</strong> Provide Inline Error Messages
  116. 116. Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson

×