Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Aaron Gustafson Ruining the User Experience
 
 
What is a good user experience?
Would you do this?
lala.com
JavaScript is a Requirement
A “Solution”
Levels of Service
Level 1: No Frills Just the content Clean, semantic markup Light, fast-downloading pages No distractions
Level 1: No Frills
nicely designed visual hierarchy maybe a bit of Flash adequate browser testing basic styles for alternate media Level 2: D...
Level 2: Dress It Up
Responsive interface elements Predictive data delivery (Ajax) Allows for more customizable interactions Level 3: Make It S...
.optional .optional .collapsing Level 3: Make It Sing
Page JS Create the link to  show/hide the  optional fieldsets Yes  No Hide the  optional fieldsets Level 3: Make It Sing
Level 3: Make It Sing
Levels of Service
Example: Tab Interface
Page JS Split the content & make some tabs Yes  No Example: Tab Interface
.tabbed Example: Tab Interface
Example: Tab Interface
Example: FAQ
No  Yes Page JS Yes  No User clicks ? Any open? No  Yes CSS Inside click? Yes  No Close any  open FAQs Slide open requeste...
dl.faq dd#id dt>a Example: FAQ dl.faq
.faq dd:target Example: FAQ
Example: FAQ
Tools at our disposal
DOM Methods getElementById() getElementsByTagName() getAttribute() / setAttribute() createElement() / createTextNode() inn...
Class Swapping .tabbed .tabbed-on .collapsing .collapsible .faq .faq.on
Think Customer Service
Questions?
http://slideshare.net/AaronGustafson Aaron Gustafson Ruining the User Experience
Upcoming SlideShare
Loading in …5
×

Ruining The User Experience (The Rich Web Experience '07)

1,416 views

Published on

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.

Published in: Technology
  • Be the first to comment

Ruining The User Experience (The Rich Web Experience '07)

  1. 1. Aaron Gustafson Ruining the User Experience
  2. 4. What is a good user experience?
  3. 5. Would you do this?
  4. 6. lala.com
  5. 7. JavaScript is a Requirement
  6. 8. A “Solution”
  7. 9. Levels of Service
  8. 10. Level 1: No Frills Just the content Clean, semantic markup Light, fast-downloading pages No distractions
  9. 11. Level 1: No Frills
  10. 12. nicely designed visual hierarchy maybe a bit of Flash adequate browser testing basic styles for alternate media Level 2: Dress It Up
  11. 13. Level 2: Dress It Up
  12. 14. Responsive interface elements Predictive data delivery (Ajax) Allows for more customizable interactions Level 3: Make It Sing
  13. 15. .optional .optional .collapsing Level 3: Make It Sing
  14. 16. Page JS Create the link to show/hide the optional fieldsets Yes No Hide the optional fieldsets Level 3: Make It Sing
  15. 17. Level 3: Make It Sing
  16. 18. Levels of Service
  17. 19. Example: Tab Interface
  18. 20. Page JS Split the content & make some tabs Yes No Example: Tab Interface
  19. 21. .tabbed Example: Tab Interface
  20. 22. Example: Tab Interface
  21. 23. Example: FAQ
  22. 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
  23. 25. dl.faq dd#id dt>a Example: FAQ dl.faq
  24. 26. .faq dd:target Example: FAQ
  25. 27. Example: FAQ
  26. 28. Tools at our disposal
  27. 29. DOM Methods getElementById() getElementsByTagName() getAttribute() / setAttribute() createElement() / createTextNode() innerHTML (if absolutely necessary)
  28. 30. Class Swapping .tabbed .tabbed-on .collapsing .collapsible .faq .faq.on
  29. 31. Think Customer Service
  30. 32. Questions?
  31. 33. http://slideshare.net/AaronGustafson Aaron Gustafson Ruining the User Experience

×