Ruining The User Experience (The Ajax Experience West 2007)
-
Upload
aaron-gustafson -
Category
Technology
-
view
1.501 -
download
2
Transcript of Ruining The User Experience (The Ajax Experience West 2007)
![Page 1: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/1.jpg)
Aaron Gustafson
Ruining theUser Experience
![Page 2: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/2.jpg)
![Page 3: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/3.jpg)
![Page 4: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/4.jpg)
What is a good user experience?
![Page 5: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/5.jpg)
Would you do this?
![Page 6: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/6.jpg)
lala.com
![Page 7: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/7.jpg)
JavaScript is a Requirement
![Page 8: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/8.jpg)
A “Solution”
![Page 9: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/9.jpg)
Levels of Service
![Page 10: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/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 Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/11.jpg)
Level 1: No Frills
![Page 12: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/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 Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/13.jpg)
Level 2: Dress It Up
![Page 14: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/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 Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/15.jpg)
.optional
.optional
.collapsing
Level 3: Make It Sing
![Page 16: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/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 Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/17.jpg)
Level 3: Make It Sing
![Page 18: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/18.jpg)
Levels of Service
![Page 19: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/19.jpg)
Example: Tab Interface
![Page 20: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/20.jpg)
Page
JS
Split the content& make some tabs
Yes No
Example: Tab Interface
![Page 21: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/21.jpg)
.tabbed
Example: Tab Interface
![Page 22: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/22.jpg)
Example: Tab Interface
![Page 23: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/23.jpg)
Example: FAQ
![Page 24: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/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 Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/25.jpg)
dl.faq
dd#id
dt>a
Example: FAQ
dl.faq
![Page 26: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/26.jpg)
.faq dd:target
Example: FAQ
![Page 27: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/27.jpg)
Example: FAQ
![Page 28: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/28.jpg)
Tools at our disposal
![Page 29: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/29.jpg)
DOM Methods
getElementById()
getElementsByTagName()
getAttribute()/setAttribute()
createElement()/createTextNode()
innerHTML (if absolutely necessary)
![Page 30: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/30.jpg)
Class Swapping
.tabbed .tabbed-on
.collapsing .collapsible
.faq .faq.on
![Page 31: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/31.jpg)
Think Customer Service
![Page 32: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/32.jpg)
Questions?
![Page 33: Ruining The User Experience (The Ajax Experience West 2007)](https://reader030.fdocuments.net/reader030/viewer/2022032615/55a33b741a28ab157d8b458d/html5/thumbnails/33.jpg)
Aaron Gustafson
Ruining theUser Experience