1 / 33

Ruining The User Experience (The Ajax Experience West 2007)

With the exploding popularity of DOM Scripting, Ajax and JavaScript in general, it's important to know what to do -- and what not to do -- when dealing with these technologies. This session walks 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.<br><br>In this session, you will learn:<br><br>• How to meet your users' needs and expectations in a progressively-enhanced way;<br>• Common mistakes in interaction design;<br>• Progressive enhancement as a concept;<br>• How to deliver a layered interface;<br>• Progressive enhancement with CSS;<br>• Progressive enhancement with JavaScript.

AaronGustafson
Download Presentation

Ruining The User Experience (The Ajax Experience West 2007)

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