- 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