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