Post on 13-Jul-2015
Aaron Gustafson
Ruining theUser Experience
What is a good user experience?
Would you do this?
lala.com
JavaScript is a Requirement
A “Solution”
Levels of Service
Level 1: No Frills
Just the content
Clean, semantic markup
Light, fast-downloading pages
No distractions
Level 1: No Frills
nicely designed
visual hierarchy
maybe a bit of Flash
adequate browser testing
basic styles for alternate media
Level 2: Dress It Up
Level 2: Dress It Up
Responsive interface elements
Predictive data delivery (Ajax)
Allows for more customizable interactions
Level 3: Make It Sing
.optional
.optional
.collapsing
Level 3: Make It Sing
Page
JS
Create the link to show/hide the
optional fieldsets
Yes No
Hide the optional fieldsets
Level 3: Make It Sing
Level 3: Make It Sing
Levels of Service
Example: Tab Interface
Page
JS
Split the content& make some tabs
Yes No
Example: Tab Interface
.tabbed
Example: Tab Interface
Example: Tab Interface
Example: FAQ
No Yes
Page
JSYes No
User clicks ?
Anyopen?
No Yes
CSSInsideclick?
Yes No
Close any open FAQs
Slide openrequested FAQ :target used
Defaultbrowserbehavior
Example: FAQ
dl.faq
dd#id
dt>a
Example: FAQ
dl.faq
.faq dd:target
Example: FAQ
Example: FAQ
Tools at our disposal
DOM Methods
getElementById()
getElementsByTagName()
getAttribute()/setAttribute()
createElement()/createTextNode()
innerHTML (if absolutely necessary)
Class Swapping
.tabbed .tabbed-on
.collapsing .collapsible
.faq .faq.on
Think Customer Service
Questions?
Aaron Gustafson
Ruining theUser Experience