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
http://code.google.com/p/easy-designs/wiki/TabInterface 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
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 Ajax Experience Boston 2007)

2,301

Published on

This session will walk you through several real-world examples, pointing out common mistakes that hinder usability, accessibility, and search while teaching you ways to avoid them altogether, either programmatically or simply by altering the way you think about JavaScript-based interactivity.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,301
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
0
Likes
3
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 Ajax Experience Boston 2007)

    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. http://code.google.com/p/easy-designs/wiki/TabInterface Example: Tab Interface
    22. 24. Example: FAQ
    23. 25. 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
    24. 26. dl.faq dd#id dt>a Example: FAQ dl.faq
    25. 27. .faq dd:target Example: FAQ
    26. 28. Example: FAQ
    27. 29. Example: FAQ
    28. 30. Tools at our disposal
    29. 31. DOM Methods getElementById() getElementsByTagName() getAttribute() / setAttribute() createElement() / createTextNode() innerHTML (if absolutely necessary)
    30. 32. Class Swapping .tabbed .tabbed-on .collapsing .collapsible .faq .faq.on
    31. 33. Think Customer Service
    32. 34. Questions?
    33. 35. http://slideshare.net/AaronGustafson Aaron Gustafson Ruining the User Experience
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×