Designing the Conversation

Aaron Gustafson @AaronGustafson

slideshare.net/AaronGustafson

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$10$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$10$minutes</b></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="giant.mp4"$type="video/mp4"$download>Download$this$$movie</a>

Triggering Actions

<a$href="mailto:aaron@easyQdesigns.net">Send$me$an$email</a>$

<a$href="tel:18009346489">Call$Comcast$Customer$Service</a>

Connecting Tools

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="&#x2655;">Business</a></li>$

$$$$…$

$$</ul>$$…$

</nav>

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

๏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

<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 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="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

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="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

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

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="flight">What$flight$are$you$looking$for?</label>$

<input$id="flight"$name="flight"$

$ $ $ $pattern="DL\d{2,}"$

$ $ $ $placeholder="e.g.$DL5407"$

$ $ $ $>$

Suggesting a response

Validatein the browser

<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

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>

<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