ruining the user experience (the rich web experience '07)
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.TRANSCRIPT
![Page 1: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/1.jpg)
Aaron Gustafson
Ruining theUser Experience
![Page 2: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/2.jpg)
![Page 3: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/3.jpg)
![Page 4: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/4.jpg)
What is a good user experience?
![Page 5: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/5.jpg)
Would you do this?
![Page 6: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/6.jpg)
lala.com
![Page 7: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/7.jpg)
JavaScript is a Requirement
![Page 8: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/8.jpg)
A “Solution”
![Page 9: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/9.jpg)
Levels of Service
![Page 10: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/10.jpg)
Level 1: No Frills
Just the content
Clean, semantic markup
Light, fast-downloading pages
No distractions
![Page 11: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/11.jpg)
Level 1: No Frills
![Page 12: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/12.jpg)
nicely designed
visual hierarchy
maybe a bit of Flash
adequate browser testing
basic styles for alternate media
Level 2: Dress It Up
![Page 13: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/13.jpg)
Level 2: Dress It Up
![Page 14: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/14.jpg)
Responsive interface elements
Predictive data delivery (Ajax)
Allows for more customizable interactions
Level 3: Make It Sing
![Page 15: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/15.jpg)
.optional
.optional
.collapsing
Level 3: Make It Sing
![Page 16: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/16.jpg)
Page
JS
Create the link to show/hide the
optional fieldsets
Yes No
Hide the optional fieldsets
Level 3: Make It Sing
![Page 17: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/17.jpg)
Level 3: Make It Sing
![Page 18: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/18.jpg)
Levels of Service
![Page 19: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/19.jpg)
Example: Tab Interface
![Page 20: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/20.jpg)
Page
JS
Split the content& make some tabs
Yes No
Example: Tab Interface
![Page 21: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/21.jpg)
.tabbed
Example: Tab Interface
![Page 22: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/22.jpg)
Example: Tab Interface
![Page 23: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/23.jpg)
Example: FAQ
![Page 24: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/24.jpg)
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
![Page 25: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/25.jpg)
dl.faq
dd#id
dt>a
Example: FAQ
dl.faq
![Page 26: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/26.jpg)
.faq dd:target
Example: FAQ
![Page 27: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/27.jpg)
Example: FAQ
![Page 28: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/28.jpg)
Tools at our disposal
![Page 29: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/29.jpg)
DOM Methods
getElementById()
getElementsByTagName()
getAttribute()/setAttribute()
createElement()/createTextNode()
innerHTML (if absolutely necessary)
![Page 30: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/30.jpg)
Class Swapping
.tabbed .tabbed-on
.collapsing .collapsible
.faq .faq.on
![Page 31: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/31.jpg)
Think Customer Service
![Page 32: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/32.jpg)
Questions?
![Page 33: Ruining The User Experience (The Rich Web Experience '07)](https://reader033.vdocument.in/reader033/viewer/2022052908/5594c2e51a28ab803d8b45ff/html5/thumbnails/33.jpg)
Aaron Gustafson
Ruining theUser Experiencehttp://slideshare.net/AaronGustafson