1 / 33

Ruining the User Experience (AjaxWorld '07)

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.

AaronGustafson
Download Presentation

Ruining the User Experience (AjaxWorld '07)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ruining the User Experience Ruining the User Experience Aaron Gustafson

  2. What is a good user experience? What is a good user experience?

  3. Would you do this? Would you do this?

  4. lala.com lala.com

  5. JavaScript is a Requirement JavaScript is a Requirement

  6. A “Solution” A “Solution”

  7. Levels of Service Levels of Service

  8. Level 1: No Frills Level 1: No Frills Just the content Clean, semantic markup Light, fast-downloading pages No distractions

  9. Level 1: No Frills Level 1: No Frills

  10. Level 2: Dress It Up Level 2: Dress It Up nicely designed visual hierarchy maybe a bit of Flash adequate browser testing basic styles for alternate media

  11. Level 2: Dress It Up Level 2: Dress It Up

  12. Level 3: Make It Sing Level 3: Make It Sing Responsive interface elements Predictive data delivery (Ajax) Allows for more customizable interactions

  13. Level 3: Make It Sing Level 3: Make It Sing .collapsing .optional .optional

  14. Level 3: Make It Sing Level 3: Make It Sing Create the link to show/hide the optional fieldsets Page Hide the optional fieldsets JS Yes No

  15. Level 3: Make It Sing Level 3: Make It Sing

  16. Levels of Service Levels of Service

  17. Example: Tab Interface Example: Tab Interface

  18. Example: Tab Interface Example: Tab Interface Split the content & make some tabs Page JS Yes No

  19. Example: Tab Interface Example: Tab Interface .tabbed

  20. Example: Tab Interface Example: Tab Interface

  21. Example: FAQ Example: FAQ

  22. Slide open requested FAQ :target used Default browser behavior Close any open FAQs Page Yes No Inside click? User clicks ? CSS No Yes No Yes JS Any open? Yes No Example: FAQ Example: FAQ

  23. dl.faq dt>a dd#id Example: FAQ Example: FAQ dl.faq

  24. .faq dd:target Example: FAQ Example: FAQ

  25. Example: FAQ Example: FAQ

  26. Tools at our disposal Tools at our disposal

  27. DOM Methods DOM Methods getElementById() getElementsByTagName() getAttribute()/setAttribute() createElement()/createTextNode() innerHTML (if absolutely necessary)

  28. Class Swapping Class Swapping .tabbed .tabbed-on .collapsing .collapsible .faq .faq.on

  29. Think Customer Service Think Customer Service

  30. Questions? Questions?

  31. Ruining the User Experience Ruining the User Experience Aaron Gustafson

More Related