Ruining the User Experience [SXSW 2007]

1,309 views

Published on

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 will walk you through several real-world examples, pointing out common mistakes that hinder usability, accessibility, and searchwhile teaching you ways to avoid them altogether, either programmatically or simply by altering the way you think about JavaScript-based interactivity.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,309
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ruining the User Experience [SXSW 2007]

  1. 1. Aaron Gustafson Sarah B. Nelson Ruining the User Experience Intro - Aaron first, Sarah 2nd Sarah’s Points + AP, UX Experience consulting firm in SF + design researcher and interaction designer with background in front-end development
  2. 2. Aar on
  3. 3. Aar on
  4. 4. What is good user experience? Aaron * Something as small as a glass of water can have a profound affect on the customer experience Sarah Good user experience = good customer service + Provide good customer service: a) understand your users b) design and implement products that demonstrate your understanding Understanding users means + context is which they are using your product: social, physical, cognitive, emotional, cultural + tools they use to interact your product
  5. 5. would you do this? Would you do this? The idea of treating customers rudely in a service context seems ridiculous - it’s clearly a bad idea. Yet, if we don’t pay attention to the level of service we are providing at all levels of the design and implementation process, we run the risk of doing the digital equivalent.
  6. 6. lala.com Aaron * Talk about Lala service * What happens when you come to it with JS off * How they’ve “addressed” that issue now * Ajax getting in the way o Confirming receipt o Registering a package * Use case – mobile use while out shopping
  7. 7. Javascript is a requirement
  8. 8. a “solution” predictive service - anticipating
  9. 9. 1) No Frills 2) Dress It Up 3) Make It Sing Levels of Service Aaron - transition: Guideposts for a responsible web site: Give them what they can handle So how do we address this? By establishing for ourselves some basic levels of service * Discuss concept of levels of service * Service that meets people’s needs unobtrusively (i.e. without them knowing they have been given special attention) is key * Jared Spool: “If we do our work right, it goes unnoticed.” * One example of this is what we are going to show you today – three basic levels of service * (Aaron) The example we are going to walk you through comes from a recent project…
  10. 10. Make content accessible No distractions Clean, well-ordered, semantic markup Light, fast downloads Level 1: No frills Aaron or Sarah * ensure that content is accessible first and foremost * Talk about a basic level of service * Content is the reason * Simple, straightforward, fast
  11. 11. Level 1: No Frills Aaron * Here is an example of a form we needed * simple & well-organized * Accessible (fieldsets, labels, elements with meaning) * may not be pretty, but it works anywhere
  12. 12. Level 2: Dress It Up Refined visual design Simple interactivity Some Flash Cross-browser compatible Styles for alternate media Sarah + Address visual design - layout, flow, readability, emotion + Introduce simple interactivity - feedback + Introduce emotional content old * Talk about adding some visual flair * CSS for style & layout * mention obvious need for browser testing
  13. 13. Level 2: Dress It Up Aaron Discuss the form with CSS applied •
  14. 14. Level 3: Make It Sing Responsive interface elements Predictive data delivery (Ajax) Allows for more customizable interactions Sarah + predictive, responsive interfaces, reduce errors (think kayak) + allow for more customizable interacitons - not just customized visually, but deeply customized for the use contexx
  15. 15. .optional .optional .collapsing Level 3: Make It Sing Aaron + use context - who is this for? + objective – to allow certain parts of the form to be optional Walk through the minor adjustments to the markup (classification)
  16. 16. How It Works Have Javascript? Yes No Page Hide the optional field sets Create the link to show/hide the optional field sets Aaron walk through how the page operates from a flow perspective
  17. 17. Level 3: Make It Sing Aaron Talk about the demo video as it playes
  18. 18. 18Levels of Service No Frills Dress It Up Make It Sing Sarah + three levels of service, supporting three contexts of use + coded once
  19. 19. Tools at Our Disposal DOM Methods • getElementById() • getElementsByTagName() • getAttribute()/setAttribute() • createElement()/createTextNode() • innerHTML (if absolutely necessary) .collapsing .collapsible Class Swapping .tabbed .tabbed-on .faq .faq.on Aaron talk about the tools we, as JS developers, should be using to do this stuff
  20. 20. Think Customer Service Most important tool - empathy for your user’s experience. Use your eyes, use your brains, use your own experiences to build something that not only looks beautiful or functions elegantly but delivers an excellent customer service.
  21. 21. questions? 5 minutes

×