1. Aaron Gustafson Sarah B. Nelson Ruining the User Experience
Intro - Aaron first, Sarah 2nd Sarahs 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 - its clearly a bad idea. Yet, if we dont 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 theyve addressed
that issue now * Ajax getting in the way o Conrming receipt o
Registering a package * Use case mobile use while out shopping 7.
Javascript is a requirement 8. a solution predictive service -
anticipating 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 peoples 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.
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 rst 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 (eldsets, 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, ow, readability, emotion + Introduce simple interactivity
- feedback + Introduce emotional content old * Talk about adding
some visual air * 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. .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 (classication) 16.
How It Works Have Javascript? Yes No Page Hide the optional eld
sets Create the link to show/hide the optional eld sets Aaron walk
through how the page operates from a ow perspective 17. Level 3:
Make It Sing Aaron Talk about the demo video as it playes 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. 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. Think Customer
Service Most important tool - empathy for your users 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
