Ruining The User Experience (The Ajax Experience Boston 2007)

1. Aaron Gustafson Ruining the User Experience

4. What is a good user experience?

5. Would you do this?

6. lala.com

7. JavaScript is a Requirement

8. A Solution

9. Levels of Service

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

11. Level 1: No Frills

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

13. Level 2: Dress It Up

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

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

16. Page JS Create the link toshow/hide theoptional fieldsets YesNo Hide theoptional fieldsets Level 3: Make It Sing

17. Level 3: Make It Sing

18. Levels of Service

19. Example: Tab Interface

20. Page JS Split the content & make some tabs YesNo Example: Tab Interface

21. .tabbed Example: Tab Interface

22. Example: Tab Interface

23. http://code.google.com/p/easy-designs/wiki/TabInterface Example: Tab Interface

24. Example: FAQ

25. NoYes Page JS YesNo User clicks ? Any open? NoYes CSS Inside click? YesNo Close anyopen FAQs Slide open requested FAQ :target used Default browser behavior Example: FAQ

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

27. .faq dd:target Example: FAQ

28. Example: FAQ

29. Example: FAQ

30. Tools at our disposal

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

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

33. Think Customer Service

34. Questions?

35. http://slideshare.net/AaronGustafson Aaron Gustafson Ruining the User Experience

Ruining The User Experience (The Ajax Experience Boston 2007)

Technology

Transcript of Ruining The User Experience (The Ajax Experience Boston 2007)