When JavaScript and Ajax go bad, your users aren't the only ones who lose out... Every descision we make in the process of building our websites, applications, and interfaces contributes to the overall experience a user has. Sometimes, in our rush to ride the latest wave in interaction design, we miss the mark and end up doing more harm than good.

1. Aaron Gustafson Ruining the User Experience

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. nicely designed visual hierarchy maybe a bit of Flash adequate browser testing basic styles for alternate media Level 2: Dress It Up

13. Level 2: Dress It Up

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

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

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

17. Level 3: Make It Sing

18. Levels of Service

19. Example: Tab Interface

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

21. .tabbed Example: Tab Interface

22. Example: Tab Interface

23. Example: FAQ

24. 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

25. dl.faq dd#id dt>a 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. http://slideshare.net/AaronGustafson Aaron Gustafson Ruining the User Experience