Designing the Conversation [SpeechTek 2016]

1. Designing the Conversation Aaron Gustafson
 @AaronGustafson slideshare.net/AaronGustafson

2. I’m$<em>really</em>$happy$to$see$you.

3. I Powerful Phrases

4. Emphasis I’m$<em>really</em>$happy$to$see$you.

5. Strong Importance Please$fill$out$the$form$below$to$contact$us.$ <strong>All$fields$are$required.</strong>

6. I’m really happy to see you. Please fill out the form below to contact us. All fields are required.

7. Alternate Voice or Mood 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>.

8. Stylistically Offset 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>.

9. Published Works 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.

10. Abbreviations & Acronyms A$ramp$embedded$in$staircase$of$Robson$Square$in$Vancouver,$ <abbr$ariaQlabel="British$Columbia">BC</abbr>.

11. Keyboard & Code 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.

12. Generic Phrasing There$is$<span>nothing$particularly$interesting</span>$in$this$ sentence.

13. II Mindful Links

14. Connecting Content 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>.

15. Connecting Content <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>

16. Connecting Content 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>

17. Creating Context <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>

18. Creating Context <a$rel="me"$href="…">Read$my$bio</a>

19. Creating Context <a$href="…"$hreflang="es"><b$class="hidden">Lea$esta$página$en$ $$</b>Español</a>

20. Creating Context <a$href="giant.mp4"$type="video/mp4">Download$this$movie</a>

21. Connecting Tools <a$href="mailto:aaron@easyQdesigns.net">Send$me$an$email</a>$ <a$href="tel:18009346489">Call$Comcast$Customer$Service</a>

22. Triggering Actions <a$href="giant.mp4"$type="video/mp4"$download>Download$this
 $$movie</a>

23. III Effective Organization

25. Headings <h1>This$is$the$title$of$the$page</h1>$ …$ <h2>This$titles$a$section</h2>$ …$ <h3>This$titles$a$subsection</h3>$ …$ etc.

26. Moving Focus <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>

27. Moving Focus <p$tabindex="0">Please$fill$out$the$form$below$completely.$ <strong>All$fields$are$required.</strong></p>

28. Accessible
 Rich Internet Applications

29. Navigation Region <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>

30. ARIA Landmark Roles ๏banner ๏navigation ๏search ๏main ๏complementary ๏contentinfo

32. <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>

33. <main$role="main">$ $$…$ </main>

34. <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="&#x2655;">Business</a></li>$ $$$$…$ $$</ul>
 $$…$ </nav>

35. <footer$class="contentinfo"$role="contentinfo">$ $$<p$class="contentinfo_copyright">$ $$$$<small>&#169;$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>

36. HTML Landmarks ๏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

37. <div>$ $$This$is$simply$a$generic$division$of$content.$ </div>

38. Alterna-divs ๏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

39. Alterna-divs ๏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

40. IV Friendly 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?”