Designing the Conversation [SpeechTek 2016]

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

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

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

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:aaron@easyQdesigns.net">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

<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

Accessible 
Rich 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

How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
Other

Embarrassing
Upsetting
Saddening
Bad Photo
◉ Other

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?”

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$type="text"$id="first_name"$name="first_name">
Free Response

<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

<label$for="url">What’s$Your$Website’s$URL?</label>$
<input$type="url"$id="url"$name="url">
Free Response: URL
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
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
Slider (Maybe) Maybe

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

<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 ﬁelds

<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 ﬁelds

Don’t introduce
unnecessary
complexity

<label$for="tel">What’s$Your$Business$Phone$Number?</label>$
<input$type="tel"$id="tel"$name="business_phone">
Free Response: Telephone
Text Field No

We should 
work harder 
so 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="DLd{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-ﬁlling

<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
Autoﬁll Tokens

๏For Addresses:
‣ shipping
‣ billing
๏For Telephone Numbers:
‣ home
‣ work
‣ mobile
‣ fax
‣ pager
๏Universally:
‣ section-*
Autoﬁll Token Modiﬁers

<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

<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>$
…$
$$$$$$$$$$required$
$$$$$$$$$$>
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.)

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

$$$$$$$$$$required$
$$$$$$$$$$>
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="DLd{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

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>

Thank you!
@AaronGustafson
aaron-gustafson.com
slideshare.net/AaronGustafson

Designing the Conversation [SpeechTek 2016]

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

Similar to Designing the Conversation [SpeechTek 2016]

Similar to Designing the Conversation [SpeechTek 2016] (17)

More from Aaron Gustafson

More from Aaron Gustafson (20)

Recently uploaded

Recently uploaded (20)

Designing the Conversation [SpeechTek 2016]