Ruining the User Experience (AjaxWorld '07)

1. Ruining the User Experience Aaron Gustafson

2. What is a good user experience?

3. Would you do this?

4. lala.com

5. JavaScript is a Requirement

6. A Solution

7. Levels of Service

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

9. Level 1: No Frills

10. 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

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

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

14. Level 3: Make It Sing Create the link toshow/hide the optional fieldsets Page Hide the optional fieldsets JSYesNo

15. Level 3: Make It Sing

16. Levels of Service

17. Example: Tab Interface

18. Example: Tab Interface Split the content& make some tabsPage JS YesNo

19. Example: Tab Interface .tabbed

20. Example: Tab Interface

21. Example: FAQ

22. Slide open :target usedrequested FAQ DefaultClose anybrowseropen FAQsbehaviorPage YesNo Inside User clicks ?CSSclick? No YesNo YesJS Anyopen?YesNo Example: FAQ

23. dl.faqdt>a dd#idExample: FAQ dl.faq

24. .faq dd:target Example: FAQ

25. Example: FAQ

26. Tools at our disposal

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

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

29. Think Customer Service

30. Questions?

31. Ruining the User Experience Aaron Gustafson

Ruining the User Experience (AjaxWorld '07)

Technology