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 [Beyond Tellerrand 2019]

92 views

Published on

Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Designing the Conversation [Beyond Tellerrand 2019]

  1. 1. Designing the Conversation Aaron Gustafson
 @AaronGustafson slideshare.net/AaronGustafson
  2. 2. @AaronGustafsonDesigning the Conversation
  3. 3. @AaronGustafsonDesigning the Conversation
  4. 4. @AaronGustafsonDesigning the Conversation
  5. 5. @AaronGustafsonDesigning the Conversation I’m <em>really</em> happy to see you.
  6. 6. @AaronGustafsonDesigning the Conversation
  7. 7. @AaronGustafsonDesigning the Conversation
  8. 8. @AaronGustafsonDesigning the Conversation IPowerful Phrases
  9. 9. @AaronGustafsonDesigning the Conversation I’m <em>really</em> happy to see you. Emphasis
  10. 10. @AaronGustafsonDesigning the Conversation Please fill out the form below to contact us. <strong>All fields are required.</strong> Strong Importance
  11. 11. @AaronGustafsonDesigning the Conversation I’m really happy to see you. Please fill out the form below to contact us. All fields are required.
  12. 12. @AaronGustafsonDesigning the Conversation 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
  13. 13. @AaronGustafsonDesigning the Conversation 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 “ah-ha!”, and never looked back. There’s nothing else like <b>Basecamp</b>. Stylistically Offset
  14. 14. @AaronGustafsonDesigning the Conversation A ramp embedded in staircase of Robson Square in Vancouver, <abbr aria-label="British Columbia">BC</abbr>. Abbreviations & Acronyms
  15. 15. @AaronGustafsonDesigning the Conversation There is <span>nothing particularly interesting</span> in this sentence. Generic Phrasing
  16. 16. @AaronGustafsonDesigning the Conversation IIMindful Links
  17. 17. @AaronGustafsonDesigning the Conversation A ramp embedded in staircase of <a href="https:// en.wikipedia.org/wiki/Robson_Square">Robson Square</a> in Vancouver, <abbr aria-label="British Columbia">BC</abbr>. Connecting Content
  18. 18. @AaronGustafsonDesigning the Conversation To illustrate the concept of layering styles, perhaps it’s best to start at the beginning: with no style applied.
 <a href="#figure-3-3">Figure 3.3</a> shows the lodging article in Safari with only the default browser styles applied. … <figure id="figure-3-3"> … </figure> Connecting Content
  19. 19. @AaronGustafsonDesigning the Conversation <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
  20. 20. @AaronGustafsonDesigning the Conversation <a rel="me" href="…">Read my bio</a> Creating Context
  21. 21. @AaronGustafsonDesigning the Conversation <a href="…" hreflang="es"><b class="hidden">Lea esta página en </b>Español</a> Creating Context
  22. 22. @AaronGustafsonDesigning the Conversation <a href="giant.mp4" type="video/mp4">Download this movie</a> Creating Context
  23. 23. @AaronGustafsonDesigning the Conversation <a href="giant.mp4" type="video/mp4" download>Download this
 movie</a> Triggering Actions
  24. 24. @AaronGustafsonDesigning the Conversation <a href="mailto:aaron@easy-designs.net">Send me an email</a> <a href="tel:18009346489">Call Comcast Customer Service</a> Connecting Tools
  25. 25. @AaronGustafsonDesigning the Conversation IIIEffective Organization
  26. 26. @AaronGustafsonDesigning the Conversation
  27. 27. @AaronGustafsonDesigning the Conversation
  28. 28. @AaronGustafsonDesigning the Conversation
  29. 29. @AaronGustafsonDesigning the Conversation
  30. 30. @AaronGustafsonDesigning the Conversation <h1>This is the title of the page</h1> … <h2>This titles a section</h2> … <h3>This titles a subsection</h3> … etc. Headings
  31. 31. @AaronGustafsonDesigning the Conversation
  32. 32. @AaronGustafsonDesigning the Conversation <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
  33. 33. @AaronGustafsonDesigning the Conversation <p tabindex="0">Please fill out the form below completely. <strong>All fields are required.</strong></p> Moving Focus
  34. 34. @AaronGustafsonDesigning the Conversation
  35. 35. @AaronGustafsonDesigning the Conversation Accessible
 Rich Internet Applications
  36. 36. @AaronGustafsonDesigning the Conversation <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
  37. 37. @AaronGustafsonDesigning the Conversation ๏banner ๏navigation ๏search ๏main ๏complementary ๏contentinfo ARIA Landmark Roles
  38. 38. @AaronGustafsonDesigning the Conversation
  39. 39. @AaronGustafsonDesigning the Conversation
  40. 40. @AaronGustafsonDesigning the Conversation <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>
  41. 41. @AaronGustafsonDesigning the Conversation <main role="main"> … </main>
  42. 42. @AaronGustafsonDesigning the Conversation <nav class="navigation" role="navigation" id="menu">
 <h1 class="hidden">Browse 24 ways</h1>
 <ul class="nav nav-topics"> <li class="nav_item"><a href="/topics/business/"
 data-icon="♕">Business</a></li> … </ul>
 … </nav>
  43. 43. @AaronGustafsonDesigning the Conversation <footer class="contentinfo" role="contentinfo"> <p class="contentinfo_copyright"> <small>© 2005-2016 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>
  44. 44. @AaronGustafsonDesigning the Conversation
  45. 45. @AaronGustafsonDesigning the Conversation
  46. 46. @AaronGustafsonDesigning the Conversation
  47. 47. @AaronGustafsonDesigning the Conversation ๏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
  48. 48. @AaronGustafsonDesigning the Conversation
  49. 49. @AaronGustafsonDesigning the Conversation <div> This is simply a generic division of content. </div>
  50. 50. @AaronGustafsonDesigning the Conversation ๏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 items and their associated descriptions ๏dt - terms to be described within a dl ๏dd - description data within in a dl ๏figure - referenced content (images, tables, etc.) ๏figcaption - caption for a figure Alterna-divs
  51. 51. @AaronGustafsonDesigning the Conversation ๏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
  52. 52. @AaronGustafsonDesigning the Conversation
  53. 53. @AaronGustafsonDesigning the Conversation IVFriendly Forms
  54. 54. @AaronGustafsonDesigning the Conversation Make it clear users need to respond
  55. 55. @AaronGustafsonDesigning the Conversation “What’s your first name?”
  56. 56. @AaronGustafsonDesigning the Conversation “What’s your first name?”
  57. 57. @AaronGustafsonDesigning the Conversation
  58. 58. @AaronGustafsonDesigning the Conversation “Without your first name, I won’t
 know how to address you.
 Could you please provide it?”
  59. 59. @AaronGustafsonDesigning the Conversation “Without your first name, I won’t
 know how to address you.
 Could you please provide it?”
  60. 60. @AaronGustafsonDesigning the Conversation
  61. 61. @AaronGustafsonDesigning the Conversation “Reserve your spot”
  62. 62. @AaronGustafsonDesigning the Conversation “Reserve your spot”
  63. 63. @AaronGustafsonDesigning the Conversation
  64. 64. @AaronGustafsonDesigning the Conversation What’s your first name? <input name="first_name">
  65. 65. @AaronGustafsonDesigning the Conversation <label>What’s your first name?</label> <input name="first_name">
  66. 66. @AaronGustafsonDesigning the Conversation <label for="first_name">What’s your first name?</label> <input id="first_name" name="first_name">
  67. 67. @AaronGustafsonDesigning the Conversation <label> What’s your first name? <input name="first_name"> </label>
  68. 68. @AaronGustafsonDesigning the Conversation <label for="first_name"> What’s your first name? <input id="first_name" name="first_name"> </label>
  69. 69. @AaronGustafsonDesigning the Conversation <label for="first_name">What’s your first name?</label> <input id="first_name" name="first_name">
  70. 70. @AaronGustafsonDesigning the Conversation Use the right
 field type
  71. 71. @AaronGustafsonDesigning the Conversation <label for="first_name">What’s Your First Name?</label> <input type="text" id="first_name" name="first_name"> Free Response
  72. 72. @AaronGustafsonDesigning the Conversation <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
  73. 73. @AaronGustafsonDesigning the Conversation Browsers ignore what they don’t understand
  74. 74. @AaronGustafsonDesigning the Conversation Progressive Enhancement
  75. 75. @AaronGustafsonDesigning the Conversation <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
  76. 76. @AaronGustafsonDesigning the Conversation <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
  77. 77. @AaronGustafsonDesigning the Conversation <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
  78. 78. @AaronGustafsonDesigning the Conversation
  79. 79. @AaronGustafsonDesigning the Conversation Don’t introduce unnecessary complexity
  80. 80. @AaronGustafsonDesigning the Conversation Phone Number:
  81. 81. @AaronGustafsonDesigning the Conversation Phone Number:
  82. 82. @AaronGustafsonDesigning the Conversation Phone Number:
  83. 83. @AaronGustafsonDesigning the Conversation <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
  84. 84. @AaronGustafsonDesigning the Conversation We should
 work harder
 so our users
 don’t have to
  85. 85. @AaronGustafsonDesigning the Conversation Help users
 avoid errors
  86. 86. @AaronGustafsonDesigning the Conversation Enable common information to be auto-filled
  87. 87. @AaronGustafsonDesigning the Conversation <label for="name">What’s Your Name?</label> <input id="name" name="name" required aria-required="true"> Keys for Auto-filling
  88. 88. @AaronGustafsonDesigning the Conversation <label for="passport">What’s Your Passport Number?</label> <input id="passport" name="passport"
 required aria-required="true" autocomplete="off" > Don’t Store All Values
  89. 89. @AaronGustafsonDesigning the Conversation ๏ 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
  90. 90. @AaronGustafsonDesigning the Conversation
  91. 91. @AaronGustafsonDesigning the Conversation <label for="shipping-mobile">Is there a mobile number we can reach you on regarding delivery?</label> <input type="tel" id="shipping-mobile" name="shipping-mobile"
 autocomplete="shipping mobile tel">
  92. 92. @AaronGustafsonDesigning the Conversation
  93. 93. @AaronGustafsonDesigning the Conversation Let users know when a field is required
  94. 94. @AaronGustafsonDesigning the Conversation <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 aria-required="true" > Required Fields
  95. 95. @AaronGustafsonDesigning the Conversation <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 aria-required="true" > Required Fields
  96. 96. @AaronGustafsonDesigning the Conversation <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 aria-required="true" > Required Fields
  97. 97. @AaronGustafsonDesigning the Conversation Provide useful hints as to the type of response you’re expecting
  98. 98. @AaronGustafsonDesigning the Conversation <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
  99. 99. @AaronGustafsonDesigning the Conversation Validate
 in the browser
  100. 100. @AaronGustafsonDesigning the Conversation <label for="first_name">What’s Your First Name?</label> <input id="first_name" name="first_name" required aria-required="true" > Browser Validated
  101. 101. @AaronGustafsonDesigning the Conversation <label for="email">What’s Your Business Email Address?</label> <input type="email" id="email" name="email"> Browser Validated
  102. 102. @AaronGustafsonDesigning the Conversation <label for="flight">What flight are you looking for?</label> <input id="flight" name="flight" pattern="DLd{2,}" placeholder="e.g. DL5407" > Browser Validated
  103. 103. @AaronGustafsonDesigning the Conversation
  104. 104. @AaronGustafsonDesigning the Conversation <label for="email">Your Email Address</label> <input id="email" type="email" name="email" required aria-required="true" aria-invalid="true" aria-describedby="email-error" > <strong id="email-error" class="validation-error-message"> Your email address is required</strong> Inline Errors
  105. 105. @AaronGustafsonDesigning the Conversation <label for="email">Your Email Address</label> <input id="email" type="email" name="email" required aria-required="true" aria-invalid="true" aria-describedby="email-error" > <strong id="email-error" class="validation-error-message"> Your email address is required</strong> Inline Errors
  106. 106. @AaronGustafsonDesigning the Conversation <label for="email">Your Email Address</label> <input id="email" type="email" name="email" required aria-required="true" aria-invalid="true" aria-errormessage="email-error" > <strong id="email-error" class="validation-error-message"> Your email address is required</strong> Inline Errors
  107. 107. @AaronGustafsonDesigning the Conversation Validate
 on the server
  108. 108. @AaronGustafsonDesigning the Conversation
  109. 109. @AaronGustafsonDesigning the Conversation <input type=“hidden” name=“price” value=“399.99”>
  110. 110. @AaronGustafsonDesigning the Conversation <input type=“hidden” name=“price” value=“1”>
  111. 111. @AaronGustafsonDesigning the Conversation Never trust
 the client
  112. 112. @AaronGustafsonDesigning the Conversation Never trust
 the client
  113. 113. @AaronGustafsonDesigning the Conversation Summarize
 server-side errors
  114. 114. @AaronGustafsonDesigning the Conversation
  115. 115. @AaronGustafsonDesigning the Conversation <div tabindex="0" aria-labelledby="errors"> <p id="errors">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>
  116. 116. @AaronGustafsonDesigning the Conversation <div tabindex="0" aria-labelledby="errors"> <p id="errors">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>
  117. 117. @AaronGustafsonDesigning the Conversation <div tabindex="0" aria-labelledby="errors"> <p id="errors">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>
  118. 118. @AaronGustafsonDesigning the Conversation <div tabindex="0" aria-labelledby="errors"> <p id="errors">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>
  119. 119. @AaronGustafsonDesigning the Conversation <div tabindex="0" aria-labelledby="errors"> <p id="errors">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>
  120. 120. @AaronGustafsonDesigning the Conversation <label for="email">Your Email Address</label> <input id="email" type="email" name="email" required aria-required="true" aria-invalid="true" aria-describedby="email-error" > <strong id="email-error" class="validation-error-message"> Your email address is required</strong> Inline Errors
  121. 121. @AaronGustafsonDesigning the Conversation
  122. 122. @AaronGustafsonDesigning the Conversation
  123. 123. Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson

×