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