Ruining The User Experience (The Rich Web Experience '07)
•Als ODP, PDF herunterladen•
4 gefällt mir•549 views
When JavaScript and Ajax go bad, your users aren't the only ones who lose out... Every descision we make in the process of building our websites, applications, and interfaces contributes to the overall experience a user has. Sometimes, in our rush to ride the latest wave in interaction design, we miss the mark and end up doing more harm than good.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Ruining The User Experience (The Rich Web Experience '07)
Ähnlich wie Ruining The User Experience (The Rich Web Experience '07) (20)
Mehr von Aaron Gustafson
Mehr von Aaron Gustafson (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Ruining The User Experience (The Rich Web Experience '07)
- 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”
- 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 to show/hide the optional fieldsets Yes No Hide the optional fieldsets Level 3: Make It Sing
- 17. Level 3: Make It Sing
- 20. Page JS Split the content & make some tabs Yes No Example: Tab Interface
- 21. .tabbed Example: Tab Interface
- 23. Example: FAQ
- 24. No Yes Page JS Yes No User clicks ? Any open? No Yes CSS Inside click? Yes No Close any open FAQs Slide open requested FAQ :target used Default browser behavior Example: FAQ
- 25. dl.faq dd#id dt>a Example: FAQ dl.faq
- 26. .faq dd:target Example: FAQ
- 27. Example: FAQ
- 28. Tools at our disposal
- 29. DOM Methods getElementById() getElementsByTagName() getAttribute() / setAttribute() createElement() / createTextNode() innerHTML (if absolutely necessary)
- 30. Class Swapping .tabbed .tabbed-on .collapsing .collapsible .faq .faq.on
- 32. Questions?
- 33. http://slideshare.net/AaronGustafson Aaron Gustafson Ruining the User Experience
Hinweis der Redaktion
- 1 minute Intro - who we are Here’s what we are going to tell you