Designing the Conversation [Paris Web 2017]

Designing the Conversation

Aaron Gustafson @AaronGustafson

slideshare.net/AaronGustafson

I’m<em>really</em>happytoseeyou.

IPowerful Phrases

I’m<em>really</em>happytoseeyou.

Emphasis

Pleasefillouttheformbelowtocontactus.

<strong>Allfieldsarerequired.</strong>

Strong Importance

I’m really happy to see you.

Please fill out the form below to contact us. All fields are required.

It'saterriblemovieanditmade$200million.

<i>Gofigure!</i>

Sheisadmiredforherenergyand<ilang="fr">joiede

vivre</i>.

Alternate Voice or Mood

For12yearsandrunning,over100,000companieshaveadopted

the<b>Basecamp</b>wayofworking.Notjusttried,butsigned

up,said“ah-ha!”,andneverlookedback.There’snothingelse

like<b>Basecamp</b>.

Stylistically Offset

Iwrotethebook<cite>AdaptiveWebDesign</cite>.Ifyoulike

thistalk,you’llfindin-depthinformationaboutsemantics(and

awholelotmore)inthere.

Published Works

ArampembeddedinstaircaseofRobsonSquareinVancouver,

<abbraria-label="BritishColumbia">BC</abbr>.

Abbreviations & Acronyms

Press<kbd>Tab</kbd>tomovefromlinktolinkwithina

document.

The<code>kbd</code>elementisusedtoindicatekeyboardkey

names.

Keyboard & Code

Thereis<span>nothingparticularlyinteresting</span>inthis

sentence.

Generic Phrasing

IIMindful Links

Arampembeddedinstaircaseof<ahref="https://

en.wikipedia.org/wiki/Robson_Square">RobsonSquare</a>in

Vancouver,<abbraria-label="BritishColumbia">BC</abbr>.

Connecting Content

<ahref="…"><bclass="hidden">Youcan</b>finishreading<b

class="hidden"><cite>TheWebShouldJustWorkforEveryone</

cite>inlessthan10minutes</b></a>

Connecting Content

Toillustratetheconceptoflayeringstyles,perhapsit’sbest

tostartatthebeginning:withnostyleapplied. <ahref="#figure-3-3">Figure3.3</a>showsthelodgingarticle

inSafariwithonlythedefaultbrowserstylesapplied.

…

<figureid="figure-3-3">

…

</figure>

Connecting Content

<arel="bookmark"href="…"><bclass="hidden">Youcan</b>finish

reading<bclass="hidden"><cite>TheWebShouldJustWorkfor

Everyone</cite>inlessthan10minutes</b></a>

Creating Context

<ahref="…"hreflang="es"><bclass="hidden">Leaestapáginaen

</b>Español</a>

Creating Context

<ahref="giant.mp4"type="video/mp4">Downloadthismovie</a>

Creating Context

<ahref="giant.mp4"type="video/mp4"download>Downloadthismovie</a>

Triggering Actions

<ahref="mailto:[email protected]">Sendmeanemail</a>

<ahref="tel:18009346489">CallComcastCustomerService</a>

Connecting Tools

IIIEffective Organization

<h1>Thisisthetitleofthepage</h1>

…

<h2>Thistitlesasection</h2>

…

<h3>Thistitlesasubsection</h3>

…

etc.

Headings

<p>Thistwistiswhat<ahref="https://en.wikipedia.org/wiki/

John_Harsanyi">JohnHarsanyi</a>—anearlygametheorist—refers

toasthe<ahref="https://en.wikipedia.org/wiki/

Veil_of_ignorance">“VeilofIgnorance”</a>andwhatRawlsfound,

timeandtimeagain,wasthatindividualsparticipatinginthe

experimentwouldgravitatetowardcreatingthemostegalitarian

societies.</p>

Moving Focus

<ptabindex="0">Pleasefillouttheformbelowcompletely.

<strong>Allfieldsarerequired.</strong></p>

Moving Focus

AccessibleRich Internet Applications

<divid="nav"role="navigation">

<ul>

<li>

<ahref="/about/"><bclass="hidden">ABit</b>About<b

class="hidden">Me</b></a>

</li>

…

</ul>

</div>

Navigation Region

๏banner ๏navigation ๏search ๏main ๏complementary ๏contentinfo

ARIA Landmark Roles

<headerclass="banner"role="banner"id="top"><h1class="banner_logo"><ahref="/"rel="home"> 24ways<span>toimpressyourfriends</span></a></h1>

</header>

<mainrole="main">

…

</main>

<navclass="navigation"role="navigation"id="menu"><h1class="hidden">Browse24ways</h1><ulclass="navnav-topics">

<liclass="nav_item"><ahref="/topics/business/" data-icon="&#x2655;">Business</a></li>

…

</ul>…

</nav>

<footerclass="contentinfo"role="contentinfo">

<pclass="contentinfo_copyright">

<small>&#169;2005-201624waysandourauthors. <ahref="/about/#colophon">Colophon</a></small>

</p>

<pclass="contentinfo_social">

<ahref="http://feeds.feedburner.com/24ways" rel="alternate">GrabourRSSfeed</a>

<ahref="https://twitter.com/24ways"rel="me">Followus onTwitter</a>

<ahref="/newsletter">Subscribetoournewsletter</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>

Thisissimplyagenericdivisionofcontent.

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

“What’s your first name?”

“Without your first name, I won’t know how to address you.

Could you please provide it?”

“Without your first name, I won’t know how to address you.

Could you please provide it?”

“Reserve your spot”

“Reserve your spot”

What’syourfirstname?

<inputname="first_name">

<label>What’syourfirstname?</label>

<inputname="first_name">

<labelfor="first_name">What’syourfirstname?</label>

<inputid="first_name"name="first_name">

<label>

What’syourfirstname?

<inputname="first_name">

</label>

<labelfor="first_name">

What’syourfirstname?

<inputid="first_name"name="first_name">

</label>

<labelfor="first_name">What’syourfirstname?</label>

<inputid="first_name"name="first_name">

Use the rightfield type

<labelfor="first_name">What’sYourFirstName?</label>

<inputtype="text"id="first_name"name="first_name">

Free Response

<labelfor="email">What’sYourBusinessEmailAddress?</label>

<inputtype="email"id="email"name="email">

Free Response: Email

Appearance Native Validation

Text Field Maybe

Browsers ignore what they don’t

understand

Progressive Enhancement

<labelfor="url">What’sYourWebsite’sURL?</label>

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

Pleasedescribethephoto

<label>

<inputtype="radio"name="reason"value="embarrassing">

It’sembarrassing

</label>

<label>

<inputtype="radio"name="reason"value="badphoto">

It’sabadphotoofme

</label>

<label>

<inputtype="radio"name="reason"value="saddening">

Itmakesmesad

</label>

Choose One

<labelfor="reason">Pleasedescribethephoto</label>

<selectid="reason"name="reason">

<optionvalue="embarrassing">It’sembarrassing</option>

<optionvalue="badphoto">It’sabadphotoofme</option>

<optionvalue="saddening">Itmakesmesad</option>

</select>

Choose One

<labelfor="volume">HowLoudisSpinalTap?</label>

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

<labelfor="tel">What’sYourBusinessPhoneNumber?</label>

<inputtype="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=datetime-local] (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

<labelfor="name">What’sYourName?</label>

<inputid="name"name="name"requiredaria-required="true">

Keys for Auto-filling

<labelfor="ssn">What’sYourSocialSecurityNumber?</label>

<inputid="ssn"name="ssn"requiredaria-required="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>

<legendtabindex="0">Shipthebluegiftto…</legend>

<p>

<labelfor="b-street-address">Address</label>

<inputname="ba"id="b-street-address"

autocomplete="section-blueshippingstreet-address"></p>

<p>

<labelfor="b-city">City</label>

<inputname="bc"id="b-city"

autocomplete="section-blueshippingaddress-level2">

</p>

<p>

<labelfor="b-postal-code">PostalCode</label>

<inputname="bp"id="b-postal-code"

autocomplete="section-blueshippingpostal-code">

</p>

</fieldset>

For Example

[section-](optional)

[shipping|billing](optional)

[home|work|mobile|fax|pager](optional)

[autofilltokenname]

<labelfor="shipping-mobile">Isthereamobilenumberwecan

reachyouonregardingdelivery?</label>

<inputtype="tel"id="shipping-mobile"name="shipping-mobile" autocomplete="section-redshippingmobiletel">

Let users know when a field is

required

<p>Fieldsmarkedwitha*are

<strongid="required">required</strong>.</p>

…

<labelfor="first_name">What’sYourFirstName?

<brole="presentation"class="required">*</b>

</label>

<inputid="first_name"name="first_name"

required

aria-required="true"

>

Required Fields

<p><strong>Allofthefieldsarerequired.</strong></p>

…

<labelfor="first_name">What’sYourFirstName?</label>

<inputid="first_name"name="first_name"

required

aria-required="true"

>

Required Fields

<p><strong>Allofthefieldsarerequired.</strong></p>

…

<labelfor="first_name">What’sYourFirstName?</label>

<inputid="first_name"name="first_name"

required

aria-required="true"

>

Required Fields

Provide useful hints as to the

type of response you’re expecting

<labelfor="flight">Whatflightareyoulookingfor?</label>

<inputid="flight"name="flight"

pattern="DL\d{2,}"

placeholder="e.g.DL5407"

>

Suggesting a response

Validatein the browser

<labelfor="first_name">What’sYourFirstName?</label>

<inputid="first_name"name="first_name"

required

aria-required="true"

>

Indicate Required Fields

<labelfor="email">What’sYourBusinessEmailAddress?</label>

<inputtype="email"id="email"name="email">

Use Native Validation

<labelfor="flight">Whatflightareyoulookingfor?</label>

<inputid="flight"name="flight"

pattern="DL\d{2,}"

placeholder="e.g.DL5407"

>

Use Custom Validation Schema

<labelfor="email">YourEmailAddress</label>

<inputid="email"type="email"name="email"

requiredaria-required="true"

aria-invalid="true"

aria-describedby="email-error"

>

<strongid="email-error"class="validation-error-message">

Youremailaddressisrequired</strong>

Provide Inline Error Messages

<labelfor="email">YourEmailAddress</label>

<inputid="email"type="email"name="email"

requiredaria-required="true"

aria-invalid="true"

aria-describedby="email-error"

>

<strongid="email-error"class="validation-error-message">

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

Never trustthe client

Summarize server-side errors

<divrole="alert">

<p>Therewereerrorswithyourformsubmission:</p>

<ol>

<li><ahref="#message">Message</a>isarequired field</li>

<li><ahref="#name">Name</a>isarequiredfield</li>

<li><ahref="#email">Email</a>isarequiredfield</li>

</ol>

</div>

<divrole="alert">

<p>Therewereerrorswithyourformsubmission:</p>

<ol>

<li><ahref="#message">Message</a>isarequired field</li>

<li><ahref="#name">Name</a>isarequiredfield</li>

<li><ahref="#email">Email</a>isarequiredfield</li>

</ol>

</div>

<divrole="alert">

<p>Therewereerrorswithyourformsubmission:</p>

<ol>

<li><ahref="#message">Message</a>isarequiredfield</li>

<li><ahref="#name">Name</a>isarequiredfield</li>

<li><ahref="#email">Email</a>isarequiredfield</li>

</ol>

</div>

<divrole="alert">

<p>Therewereerrorswithyourformsubmission:</p>

<ol>

<li><ahref="#message">Message</a>isarequired field</li>

<li><ahref="#name">Name</a>isarequiredfield</li>

<li><ahref="#email">Email</a>isarequiredfield</li>

</ol>

</div>

<divrole="alert">

<p>Therewereerrorswithyourformsubmission:</p>

<ol>

<li><ahref="#message">Message</a>isarequired field</li>

<li><ahref="#name">Name</a>isarequiredfield</li>

<li><ahref="#email">Email</a>isarequiredfield</li>

</ol>

</div>

<labelfor="email">YourEmailAddress</label>

<inputid="email"type="email"name="email"

requiredaria-required="true"

aria-invalid="true"

aria-describedby="email-error"

>

<strongid="email-error"class="validation-error-message">

Youremailaddressisrequired</strong>

Provide Inline Error Messages

Thank you! @AaronGustafson

aaron-gustafson.com slideshare.net/AaronGustafson