1. 1. Ruining the User Experience Aaron Gustafson
2. 2. What is a good user experience?
3. 3. Would you do this?
4. 4. lala.com
5. 5. JavaScript is a Requirement
6. 6. A Solution
7. 7. Levels of Service
8. 8. Level 1: No FrillsJust the content Clean, semantic markup Light, fast-downloading pages No distractions
9. 9. Level 1: No Frills
10. 10. Level 2: Dress It Up nicely designed visual hierarchy maybe a bit of Flash adequate browser testing basic styles for alternate media
11. 11. Level 2: Dress It Up
12. 12. Level 3: Make It SingResponsive interface elements Predictive data delivery (Ajax) Allows for more customizable interactions
13. 13. Level 3: Make It Sing .collapsing .optional .optional
14. 14. Level 3: Make It Sing Create the link toshow/hide the optional fieldsets Page Hide the optional fieldsets JSYesNo
15. 15. Level 3: Make It Sing
16. 16. Levels of Service
17. 17. Example: Tab Interface
18. 18. Example: Tab Interface Split the content& make some tabsPage JS YesNo
19. 19. Example: Tab Interface .tabbed
20. 20. Example: Tab Interface
21. 21. Example: FAQ
22. 22. Slide open :target usedrequested FAQ DefaultClose anybrowseropen FAQsbehaviorPage YesNo Inside User clicks ?CSSclick? No YesNo YesJS Anyopen?YesNo Example: FAQ
23. 23. dl.faqdt>a dd#idExample: FAQ dl.faq
24. 24. .faq dd:target Example: FAQ
25. 25. Example: FAQ
26. 26. Tools at our disposal
27. 27. DOM MethodsgetElementById()getElementsByTagName()getAttribute()/setAttribute()createElement()/createTextNode()innerHTML (if absolutely necessary)
28. 28. Class Swapping.tabbed.tabbed-on.collapsing.collapsible.faq .faq.on
29. 29. Think Customer Service
30. 30. Questions?
31. 31. Ruining the User Experience Aaron Gustafson