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 [Paris Web 2017]

718 views

Published on

Over time, your users will become more accustomed to and interacting with their computers on the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.

So how do you design a "headless" UI? That's easy: You design the conversation.

Conversation is at the root of every interaction we have, be it with another human being, a game, or with a website. This session will discuss how to design and implement a web application that will allow you to create a web page that will allow you to create HTML documents.

Published in: Technology
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Designing the Conversation [Paris Web 2017]

  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 “ah-ha!”, 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 in-depth 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 aria-label="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 aria-label="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 10 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="#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
  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 10 minutes</b></a> Creating Context
  18. 18. <a href="…" hreflang="es"><b class="hidden">Lea esta página en </b>Español</a> Creating Context
  19. 19. <a href="giant.mp4" type="video/mp4">Download this movie</a> Creating Context
  20. 20. <a href="giant.mp4" type="video/mp4" download>Download this
 movie</a> Triggering Actions
  21. 21. <a href="mailto:aaron@easy-designs.net">Send me an email</a> <a href="tel:18009346489">Call Comcast Customer Service</a> Connecting Tools
  22. 22. IIIEffective Organization
  23. 23. <h1>This is the title of the page</h1> … <h2>This titles a section</h2> … <h3>This titles a subsection</h3> … etc. Headings
  24. 24. <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
  25. 25. <p tabindex="0">Please fill out the form below completely. <strong>All fields are required.</strong></p> Moving Focus
  26. 26. Accessible
 Rich Internet Applications
  27. 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
  28. 28. ๏banner ๏navigation ๏search ๏main ๏complementary ๏contentinfo ARIA Landmark Roles
  29. 29. <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>
  30. 30. <main role="main"> … </main>
  31. 31. <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>
  32. 32. <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>
  33. 33. ๏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
  34. 34. <div> This is simply a generic division of content. </div>
  35. 35. ๏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
  36. 36. ๏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
  37. 37. IVFriendly Forms
  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
  40. 40. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo ◉ Other it’s embarrassing
  41. 41. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
  42. 42. Talk to your users like they talk
 to one another
  43. 43. Make it clear users need to respond
  44. 44. “What’s your first name?”
  45. 45. “What’s your first name?”
  46. 46. “Without your first name, I won’t
 know how to address you.
 Could you please provide it?”
  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. “Reserve your spot”
  50. 50. What’s your first name? <input name="first_name">
  51. 51. <label>What’s your first name?</label> <input name="first_name">
  52. 52. <label for="first_name">What’s your first name?</label> <input id="first_name" name="first_name">
  53. 53. <label> What’s your first name? <input name="first_name"> </label>
  54. 54. <label for="first_name"> What’s your first name? <input id="first_name" name="first_name"> </label>
  55. 55. <label for="first_name">What’s your first name?</label> <input id="first_name" name="first_name">
  56. 56. Use the right
 field type
  57. 57. <label for="first_name">What’s Your First Name?</label> <input type="text" id="first_name" name="first_name"> Free Response
  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. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad Choose One
  63. 63. 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
  64. 64. <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
  65. 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
  66. 66. Don’t introduce unnecessary complexity
  67. 67. Phone Number:
  68. 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. 69. We should
 work harder
 so our users
 don’t have to
  70. 70. ๏input[type=date] ๏input[type=datetime] (global) ๏input[type=datetime-local] (local) ๏input[type=month] (year & month) ๏input[type=week] (year & week) ๏input[type=time] (year & week) Structured Data: Dates & Times
  71. 71. Help users
 avoid (and fix) errors
  72. 72. Enable common information to be auto-filled
  73. 73. <label for="name">What’s Your Name?</label> <input id="name" name="name" required aria-required="true"> Keys for Auto-filling
  74. 74. <label for="ssn">What’s Your Social Security Number?</label> <input id="ssn" name="ssn" required aria-required="true" autocomplete="off" > Don’t Store All Values
  75. 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. 76. ๏For Addresses: ‣ shipping ‣ billing ๏For Telephone Numbers: ‣ home ‣ work ‣ mobile ‣ fax ‣ pager ๏Universally: ‣ section-* Autofill Token Modifiers
  77. 77. <fieldset> <legend tabindex="0">Ship the blue gift to…</legend> <p> <label for="b-street-address">Address</label> <input name="ba" id="b-street-address" autocomplete="section-blue shipping street-address">
 </p> <p> <label for="b-city">City</label> <input name="bc" id="b-city" autocomplete="section-blue shipping address-level2"> </p> <p> <label for="b-postal-code">Postal Code</label> <input name="bp" id="b-postal-code" autocomplete="section-blue shipping postal-code"> </p> </fieldset> For Example
  78. 78. [section-] (optional) [shipping|billing] (optional) [home|work|mobile|fax|pager] (optional) [autofill token name]
  79. 79. <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="section-red shipping mobile tel">
  80. 80. Let users know when a field is required
  81. 81. <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
  82. 82. <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
  83. 83. <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
  84. 84. Provide useful hints as to the type of response you’re expecting
  85. 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
  86. 86. Validate
 in the browser
  87. 87. <label for="first_name">What’s Your First Name?</label> <input id="first_name" name="first_name" required aria-required="true" > Indicate Required Fields
  88. 88. <label for="email">What’s Your Business Email Address?</label> <input type="email" id="email" name="email"> Use Native Validation
  89. 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
  90. 90. <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> Provide Inline Error Messages
  91. 91. <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> Provide Inline Error Messages
  92. 92. Validate
 on the server
  93. 93. <input type=“hidden” name=“price” value=“399.99”>
  94. 94. <input type=“hidden” name=“price” value=“1”>
  95. 95. Never trust
 the client
  96. 96. Never trust
 the client
  97. 97. Summarize
 server-side errors
  98. 98. <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>
  99. 99. <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>
  100. 100. <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>
  101. 101. <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>
  102. 102. <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>
  103. 103. <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> Provide Inline Error Messages
  104. 104. Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson

×