Retire the Horse and Buggy: Opening a New Era for Voice Interaction Design SpeechTek 2007
Designing the Conversation [SpeechTek 2016]
-
Upload
aaron-gustafson -
Category
Technology
-
view
323 -
download
0
Transcript of Designing the Conversation [SpeechTek 2016]
Designing the Conversation
Aaron Gustafson @AaronGustafson
slideshare.net/AaronGustafson
I’m$<em>really</em>$happy$to$see$you.
IPowerful Phrases
I’m$<em>really</em>$happy$to$see$you.
Emphasis
Please$fill$out$the$form$below$to$contact$us.$
<strong>All$fields$are$required.</strong>
Strong Importance
I’m really happy to see you.
Please fill out the form below to contact us. All fields are required.
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
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
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
A$ramp$embedded$in$staircase$of$Robson$Square$in$Vancouver,$
<abbr$ariaQlabel="British$Columbia">BC</abbr>.
Abbreviations & Acronyms
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
There$is$<span>nothing$particularly$interesting</span>$in$this$
sentence.
Generic Phrasing
IIMindful Links
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
<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
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
<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
<a$rel="me"$href="…">Read$my$bio</a>
Creating Context
<a$href="…"$hreflang="es"><b$class="hidden">Lea$esta$página$en$
$$</b>Español</a>
Creating Context
<a$href="giant.mp4"$type="video/mp4">Download$this$movie</a>
Creating Context
<a$href="mailto:[email protected]">Send$me$an$email</a>$
<a$href="tel:18009346489">Call$Comcast$Customer$Service</a>
Connecting Tools
<a$href="giant.mp4"$type="video/mp4"$download>Download$this$$movie</a>
Triggering Actions
IIIEffective Organization
<h1>This$is$the$title$of$the$page</h1>$
…$
<h2>This$titles$a$section</h2>$
…$
<h3>This$titles$a$subsection</h3>$
…$
etc.
Headings
<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
<p$tabindex="0">Please$fill$out$the$form$below$completely.$
<strong>All$fields$are$required.</strong></p>
Moving Focus
AccessibleRich Internet Applications
<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
๏banner ๏navigation ๏search ๏main ๏complementary ๏contentinfo
ARIA Landmark Roles
<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>
<main$role="main">$
$$…$
</main>
<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>
<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>
๏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
<div>$
$$This$is$simply$a$generic$division$of$content.$
</div>
๏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
๏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
IVFriendly Forms
How does this photo make you feel?
� Embarrassing � Upsetting � Saddening � Bad Photo � Other
How does this photo make you feel?
� Embarrassing � Upsetting � Saddening � Bad Photo � Other
How does this photo make you feel?
� Embarrassing � Upsetting � Saddening � Bad Photo ◉ Other
How does this photo make you feel?
� Embarrassing � Upsetting � Saddening � Bad Photo ◉ Other it’s embarrassing
Please describe the photo
� It’s embarrassing � It’s a bad photo of me � It makes me sad
Talk to your users like they talk
to one another
Make it clear users need to respond
“What’s your first name?”
“Without your first name, I won’t know how to address you.
Could you please provide it?”
“Reserve your spot”
What’s$your$first$name?$
<input$name="first_name">
<label>What’s$your$first$name?</label>$
<input$name="first_name">
<label$for="first_name">What’s$your$first$name?</label>$
<input$id="first_name"$name="first_name">
<label>$
$$What’s$your$first$name?$
$$<input$name="first_name">$
</label>
<label$for="first_name">$
$$What’s$your$first$name?$
$$<input$id="first_name"$name="first_name">$
</label>
<label$for="first_name">What’s$your$first$name?</label>$
<input$id="first_name"$name="first_name">
Use the rightfield type
<label$for="first_name">What’s$Your$First$Name?</label>$
<input$type="text"$id="first_name"$name="first_name">
Free Response
<label$for="first_name">What’s$Your$First$Name?</label>$
<input$id="first_name"$name="first_name">
Free Response (default)
<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
Browsers ignore what they don’t
understand
Progressive Enhancement
<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
<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
Please describe the photo
� It’s embarrassing � It’s a bad photo of me � It makes me sad
Choose One
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
<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
<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
<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
Choose One or More
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
<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
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
Group related fields
<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
<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
<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
Don’t introduce unnecessary complexity
Phone Number:
<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
We should work harderso our users don’t have to
๏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
<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
Help users avoid (and fix)
errors
Enable common information to be
auto-filled
<label$for="name">What’s$Your$Name?</label>$
<input$id="name"$name="name"$required$ariaQrequired="true">
Keys for Auto-filling
<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
๏ 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
๏For Addresses: ‣ shipping ‣ billing
๏For Telephone Numbers: ‣ home ‣ work ‣ mobile ‣ fax ‣ pager
๏Universally: ‣ section-*
Autofill Token Modifiers
<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
[sectionQ]$(optional)$$
[shipping|billing]$(optional)$
[home|work|mobile|fax|pager]$(optional)$
[autofill$token$name]
<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">
Let users know when a field is
required
<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
<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
<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
Provide useful hints as to the
type of response you’re expecting
<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
(The placeholder is not a substitute for a label.)
Validatein the browser
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
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
<label$for="first_name">What’s$Your$First$Name?</label>$
<input$id="first_name"$name="first_name"$
$$$$$$$$$$required$
$$$$$$$$$$ariaQrequired="true"$
$$$$$$$$$$>
Indicate Required Fields
<label$for="email">What’s$Your$Business$Email$Address?</label>$
<input$type="email"$id="email"$name="email">
Use Native Validation
<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
<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
<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
Validateon the server
<input type=“hidden” name=“price” value=“399.99”>
<input type=“hidden” name=“price” value=“1”>
Never trustthe client
Summarize server-side errors
<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>
<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>
<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>
<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>
<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
Thank you! @AaronGustafson
aaron-gustafson.com slideshare.net/AaronGustafson