1 / 21

Ruining the User Experience [SXSW 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 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.

AaronGustafson
Télécharger la présentation

Ruining the User Experience [SXSW 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 Aaron Gustafson Sarah B. Nelson 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. Aar on

  3. Aar on

  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. 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. 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. Javascript is a requirement

  8. a “solution” predictive service - anticipating

  9. Levels of Service 1) No Frills 2) Dress It Up 3) Make It Sing 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. Level 1: No frills Make content accessible No distractions Clean, well-ordered, semantic markup Light, fast downloads 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. 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. 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. Level 2: Dress It Up Aaron Discuss the form with CSS applied •

  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. .collapsing .optional .optional 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. Have Javascript? No Yes Hide the optional field sets Page Create the link to show/hide the optional field sets How It Works Aaron walk through how the page operates from a flow perspective

  17. Level 3: Make It Sing Aaron Talk about the demo video as it playes

  18. No Frills Dress It Up Make It Sing Levels of Service 18 Sarah + three levels of service, supporting three contexts of use + coded once

  19. Tools at Our Disposal DOM Methods •getElementById() •getElementsByTagName() •getAttribute()/setAttribute() •createElement()/createTextNode() •innerHTML (if absolutely necessary) Class Swapping .collapsing .collapsible .tabbed .tabbed-on .faq .faq.on Aaron talk about the tools we, as JS developers, should be using to do this stuff

  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. questions? 5 minutes

More Related