ruining the user experience (the ajax experience boston 2007)
TRANSCRIPT
- 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 toshow/hide theoptional fieldsets YesNo Hide theoptional 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 YesNo Example: Tab Interface
- 21. .tabbed Example: Tab Interface
- 22. Example: Tab Interface
- 23. http://code.google.com/p/easy-designs/wiki/TabInterface Example: Tab Interface
- 24. Example: FAQ
- 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
- 26. dl.faq dd#id dt>a Example: FAQ dl.faq
- 27. .faq dd:target Example: FAQ
- 28. Example: FAQ
- 29. Example: FAQ
- 30. Tools at our disposal
- 31. DOM Methods getElementById() getElementsByTagName() getAttribute() / setAttribute() createElement() / createTextNode() innerHTML(if absolutely necessary)
- 32. Class Swapping .tabbed .tabbed-on .collapsing .collapsible .faq .faq.on
- 33. Think Customer Service
- 34. Questions?
- 35. http://slideshare.net/AaronGustafson Aaron Gustafson Ruining the User Experience