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 [SmashingConf 2016]

584 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

Designing the Conversation [SmashingConf 2016]

  1. 1. Designing the Conversation Aaron Gustafson
 @AaronGustafson slideshare.net/AaronGustafson
  2. 2. IPowerful Phrases
  3. 3. I’m$<em>really</em>$happy$to$see$you. Emphasis
  4. 4. Please$fill$out$the$form$below$to$contact$us.$ <strong>All$fields$are$required.</strong> Strong Importance
  5. 5. I’m really happy to see you. Please fill out the form below to contact us. All fields are required.
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. A$ramp$embedded$in$staircase$of$Robson$Square$in$Vancouver,$ <abbr$ariaQlabel="British$Columbia">BC</abbr>. Abbreviations & Acronyms
  10. 10. 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
  11. 11. There$is$<span>nothing$particularly$interesting</span>$in$this$ sentence. Generic Phrasing
  12. 12. IIMindful Links
  13. 13. 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
  14. 14. <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$10$minutes</b></a> Connecting Content
  15. 15. 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
  16. 16. <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$10$minutes</b></a> Creating Context
  17. 17. <a$href="…"$hreflang="es"><b$class="hidden">Lea$esta$página$en$ $$</b>Español</a> Creating Context
  18. 18. <a$href="giant.mp4"$type="video/mp4">Download$this$movie</a> Creating Context
  19. 19. <a$href="giant.mp4"$type="video/mp4"$download>Download$this
 $$movie</a> Triggering Actions
  20. 20. <a$href="mailto:aaron@easyQdesigns.net">Send$me$an$email</a>$ <a$href="tel:18009346489">Call$Comcast$Customer$Service</a> Connecting Tools
  21. 21. IIIEffective Organization
  22. 22. <h1>This$is$the$title$of$the$page</h1>$ …$ <h2>This$titles$a$section</h2>$ …$ <h3>This$titles$a$subsection</h3>$ …$ etc. Headings
  23. 23. <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
  24. 24. <p$tabindex="0">Please$fill$out$the$form$below$completely.$ <strong>All$fields$are$required.</strong></p> Moving Focus
  25. 25. Accessible
 Rich Internet Applications
  26. 26. <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
  27. 27. ๏banner ๏navigation ๏search ๏main ๏complementary ๏contentinfo ARIA Landmark Roles
  28. 28. <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>
  29. 29. <main$role="main">$ $$…$ </main>
  30. 30. <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>
  31. 31. <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>
  32. 32. ๏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
  33. 33. <div>$ $$This$is$simply$a$generic$division$of$content.$ </div>
  34. 34. ๏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
  35. 35. ๏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
  36. 36. IVFriendly Forms
  37. 37. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
  38. 38. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
  39. 39. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo ◉ Other it’s embarrassing
  40. 40. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
  41. 41. Talk to your users like they talk
 to one another
  42. 42. Make it clear users need to respond
  43. 43. “What’s your first name?”
  44. 44. “Without your first name, I won’t
 know how to address you.
 Could you please provide it?”
  45. 45. “Reserve your spot”
  46. 46. What’s$your$first$name?$ <input$name="first_name">
  47. 47. <label>What’s$your$first$name?</label>$ <input$name="first_name">
  48. 48. <label$for="first_name">What’s$your$first$name?</label>$ <input$id="first_name"$name="first_name">
  49. 49. <label>$ $$What’s$your$first$name?$ $$<input$name="first_name">$ </label>
  50. 50. <label$for="first_name">$ $$What’s$your$first$name?$ $$<input$id="first_name"$name="first_name">$ </label>
  51. 51. <label$for="first_name">What’s$your$first$name?</label>$ <input$id="first_name"$name="first_name">
  52. 52. Use the right
 field type
  53. 53. <label$for="first_name">What’s$Your$First$Name?</label>$ <input$type="text"$id="first_name"$name="first_name"> Free Response
  54. 54. <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
  55. 55. Browsers ignore what they don’t understand
  56. 56. Progressive Enhancement
  57. 57. <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
  58. 58. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad Choose One
  59. 59. 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
  60. 60. <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
  61. 61. <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
  62. 62. Don’t introduce unnecessary complexity
  63. 63. Phone Number:
  64. 64. <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
  65. 65. We should
 work harder
 so our users
 don’t have to
  66. 66. ๏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
  67. 67. Help users
 avoid (and fix) errors
  68. 68. Enable common information to be auto-filled
  69. 69. <label$for="name">What’s$Your$Name?</label>$ <input$id="name"$name="name"$required$ariaQrequired="true"> Keys for Auto-filling
  70. 70. <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
  71. 71. ๏ 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
  72. 72. ๏For Addresses: ‣ shipping ‣ billing ๏For Telephone Numbers: ‣ home ‣ work ‣ mobile ‣ fax ‣ pager ๏Universally: ‣ section-* Autofill Token Modifiers
  73. 73. <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
  74. 74. [sectionQ]$(optional)$$ [shipping|billing]$(optional)$ [home|work|mobile|fax|pager]$(optional)$ [autofill$token$name]
  75. 75. <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">
  76. 76. Let users know when a field is required
  77. 77. <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
  78. 78. <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
  79. 79. <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
  80. 80. Provide useful hints as to the type of response you’re expecting
  81. 81. <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
  82. 82. Validate
 in the browser
  83. 83. <label$for="first_name">What’s$Your$First$Name?</label>$ <input$id="first_name"$name="first_name"$ $$$$$$$$$$required$ $$$$$$$$$$ariaQrequired="true"$ $$$$$$$$$$> Indicate Required Fields
  84. 84. <label$for="email">What’s$Your$Business$Email$Address?</label>$ <input$type="email"$id="email"$name="email"> Use Native Validation
  85. 85. <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
  86. 86. <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
  87. 87. Validate
 on the server
  88. 88. <input type=“hidden” name=“price” value=“399.99”>
  89. 89. <input type=“hidden” name=“price” value=“1”>
  90. 90. Never trust
 the client
  91. 91. Summarize
 server-side errors
  92. 92. <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>
  93. 93. <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>
  94. 94. <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>
  95. 95. <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>
  96. 96. <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>
  97. 97. <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
  98. 98. Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson

×