Aaron Gustafson Ruining the User 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 JS Yes No User clicks ? Any open? No Yes CSS Inside click? Yes No Close any open FAQs Slide open requested FAQ :target used Default browser behavior 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?

http://slideshare.net/AaronGustafson Aaron Gustafson Ruining the User Experience