A slightly expanded version of <a href="/AaronGustafson/ruining-the-user-experience-sxsw-07/">the presentation I did at SXSW earlier in the month</a>. This session covers interaction design through the lens of progressive enhancement. Topics include web standards, CSS, and 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