Ruining the
User Experience




Aaron Gustafson
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

       ...
Level 1: No Frills
Level 2: Dress It Up

         nicely designed

         visual hierarchy

         maybe a bit of Flash

         adequat...
Level 2: Dress It Up
Level 3: Make It Sing


       Responsive interface elements

       Predictive data delivery (Ajax)

       Allows for mo...
Level 3: Make It Sing
.collapsing




  .optional




  .optional
Level 3: Make It Sing


Create the link to
 show/hide the
optional fieldsets

                       Page


    Hide the
o...
Level 3: Make It Sing
Levels of Service
Example: Tab Interface
Example: Tab Interface


  Split the content
 & make some tabs

                        Page




                         ...
Example: Tab Interface
.tabbed
Example: Tab Interface
Example: FAQ
Slide open
                                                              :target used
                         requested F...
dl.faq


 dt>a

 dd#id




         Example: FAQ
dl.faq
.faq dd:target




Example: FAQ
Example: FAQ
Tools at our disposal
DOM Methods

getElementById()

getElementsByTagName()

getAttribute()/setAttribute()

createElement()/createTextNode()

in...
Class Swapping

.tabbed          .tabbed-on

.collapsing      .collapsible

.faq             .faq.on
Think Customer Service
Questions?
Ruining the
User Experience




Aaron Gustafson
Ruining the User Experience (AjaxWorld '07)
Ruining the User Experience (AjaxWorld '07)
Upcoming SlideShare
Loading in …5
×

Ruining the User Experience (AjaxWorld '07)

2,134 views
2,094 views

Published on

A slightly expanded version of <a href="/AaronGustafson/ruining-the-user-experience-sxsw-07/">the presentation I did at SXSW earlier in the month</a>. This session covers interaction design through the lens of progressive enhancement. Topics include web standards, CSS, and JavaScript.

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

No Downloads
Views
Total views
2,134
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
252
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Ruining the User Experience (AjaxWorld '07)

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

×