View
1.143
Download
1
Category
Preview:
DESCRIPTION
When JavaScript and Ajax go bad, your users aren't the only ones who lose out... Every descision we make in the process of building our websites, applications, and interfaces contributes to the overall experience a user has. Sometimes, in our rush to ride the latest wave in interaction design, we miss the mark and end up doing more harm than good.
Citation preview
Aaron Gustafson
Ruining theUser Experience
What is a good user experience?
Would you do this?
lala.com
JavaScript is a Requirement
A “Solution”
Levels of Service
Level 1: No Frills
Just the content
Clean, semantic markup
Light, fast-downloading pages
No distractions
Level 1: No Frills
nicely designed
visual hierarchy
maybe a bit of Flash
adequate browser testing
basic styles for alternate media
Level 2: Dress It Up
Level 2: Dress It Up
Responsive interface elements
Predictive data delivery (Ajax)
Allows for more customizable interactions
Level 3: Make It Sing
.optional
.optional
.collapsing
Level 3: Make It Sing
Page
JS
Create the link to show/hide the
optional fieldsets
Yes No
Hide the optional fieldsets
Level 3: Make It Sing
Level 3: Make It Sing
Levels of Service
Example: Tab Interface
Page
JS
Split the content& make some tabs
Yes No
Example: Tab Interface
.tabbed
Example: Tab Interface
Example: Tab Interface
Example: FAQ
No Yes
Page
JSYes No
User clicks ?
Anyopen?
No Yes
CSSInsideclick?
Yes No
Close any open FAQs
Slide openrequested FAQ :target used
Defaultbrowserbehavior
Example: FAQ
dl.faq
dd#id
dt>a
Example: FAQ
dl.faq
.faq dd:target
Example: FAQ
Example: FAQ
Tools at our disposal
DOM Methods
getElementById()
getElementsByTagName()
getAttribute()/setAttribute()
createElement()/createTextNode()
innerHTML (if absolutely necessary)
Class Swapping
.tabbed .tabbed-on
.collapsing .collapsible
.faq .faq.on
Think Customer Service
Questions?
Aaron Gustafson
Ruining theUser Experiencehttp://slideshare.net/AaronGustafson
Recommended