1. 1. Aaron Gustafson Ruining the User Experience
2. 4. What is a good user experience?
3. 5. Would you do this?
4. 6. lala.com
5. 7. JavaScript is a Requirement
6. 8. A Solution
7. 9. Levels of Service
8. 10. Level 1: No Frills Just the content Clean, semantic markup Light, fast-downloading pages No distractions
9. 11. Level 1: No Frills
10. 12. nicely designed visual hierarchy maybe a bit of Flash adequate browser testing basic styles for alternate media Level 2: Dress It Up
11. 13. Level 2: Dress It Up
12. 14. Responsive interface elements Predictive data delivery (Ajax) Allows for more customizable interactions Level 3: Make It Sing
13. 15. .optional .optional .collapsing Level 3: Make It Sing
14. 16. Page JS Create the link toshow/hide theoptional fieldsets YesNo Hide theoptional fieldsets Level 3: Make It Sing
15. 17. Level 3: Make It Sing
16. 18. Levels of Service
17. 19. Example: Tab Interface
18. 20. Page JS Split the content & make some tabs YesNo Example: Tab Interface
19. 21. .tabbed Example: Tab Interface
20. 22. Example: Tab Interface
21. 23. http://code.google.com/p/easy-designs/wiki/TabInterface Example: Tab Interface
22. 24. Example: FAQ
23. 25. NoYes Page JS YesNo User clicks ? Any open? NoYes CSS Inside click? YesNo Close anyopen FAQs Slide open requested FAQ :target used Default browser behavior Example: FAQ
24. 26. dl.faq dd#id dt>a Example: FAQ dl.faq
25. 27. .faq dd:target Example: FAQ
26. 28. Example: FAQ
27. 29. Example: FAQ
28. 30. Tools at our disposal
29. 31. DOM Methods getElementById() getElementsByTagName() getAttribute() / setAttribute() createElement() / createTextNode() innerHTML(if absolutely necessary)
30. 32. Class Swapping .tabbed .tabbed-on .collapsing .collapsible .faq .faq.on
31. 33. Think Customer Service
32. 34. Questions?
33. 35. http://slideshare.net/AaronGustafson Aaron Gustafson Ruining the User Experience