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,283 views
1,255 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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,283
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
50
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • 1 minute Intro - who we are Here’s what we are going to tell you
  • 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

    ×