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