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