Designing the Conversation [Paris Web 2017]
Post on 22-Jan-2018
486 Views
Preview:
Transcript
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:aaron@easy-designs.net">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="♕">Business</a></li>
…
</ul>…
</nav>
<footerclass="contentinfo"role="contentinfo">
<pclass="contentinfo_copyright">
<small>©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
top related