With the exploding popularity of DOM Scripting, Ajax and JavaScript in general, it's important to know what to do -- and what not to do -- when dealing with these technologies. This session walks you through several real-world examples, pointing out common mistakes that hinder usability, accessibility, and search while teaching you ways to avoid them altogether, either programmatically or simply by altering the way you think about JavaScript-based interactivity. In this session, you will learn: • How to meet your users' needs and expectations in a progressively-enhanced way; • Common mistakes in interaction design; • Progressive enhancement as a concept; • How to deliver a layered interface; • Progressive enhancement with CSS; • Progressive enhancement with JavaScript.

1. Ruining the
User Experience
Aaron Gustafson

4. What is a good user experience?

5. Would you do this?

6. lala.com

7. JavaScript is a Requirement

8. A “Solution”

9. Levels of Service

10. Level 1: No Frills
Just the content
Clean, semantic markup
Light, fast-downloading pages
No distractions

11. Level 1: No Frills

12. Level 2: Dress It Up
nicely designed
visual hierarchy
maybe a bit of Flash
adequate browser testing
basic styles for alternate media

13. Level 2: Dress It Up

14. Level 3: Make It Sing
Responsive interface elements
Predictive data delivery (Ajax)
Allows for more customizable interactions

15. Level 3: Make It Sing
.collapsing
.optional
.optional

16. Level 3: Make It Sing
Create the link to
show/hide the
optional fieldsets
Page
Hide the
optional fieldsets
JS
Yes No

17. Level 3: Make It Sing

18. Levels of Service

19. Example: Tab Interface

20. Example: Tab Interface
Split the content
& make some tabs
Page
JS
Yes No

21. Example: Tab Interface
.tabbed

22. Example: Tab Interface

23. Example: FAQ

24. Slide open
:target used
requested FAQ
Default
Close any
browser
open FAQs
behavior
Page
Yes No
Inside User clicks ?
CSS
click?
No Yes
No Yes
JS
Any
open?
Yes No
Example: FAQ

25. dl.faq
dt>a
dd#id
Example: FAQ
dl.faq

26. .faq dd:target
Example: FAQ

27. Example: FAQ

28. Tools at our disposal

29. DOM Methods
getElementById()
getElementsByTagName()
getAttribute()/setAttribute()
createElement()/createTextNode()
innerHTML (if absolutely necessary)

30. Class Swapping
.tabbed .tabbed-on
.collapsing .collapsible
.faq .faq.on

31. Think Customer Service

32. Questions?

33. Ruining the
User Experience
Aaron Gustafson