Ruining The User Experience (The Rich Web Experience '07)
 

Ruining The User Experience (The Rich Web Experience '07)

on

  • 2,200 views

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

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.

Statistics

Views

Total Views
2,200
Views on SlideShare
2,188
Embed Views
12

Actions

Likes
4
Downloads
47
Comments
0

7 Embeds 12

http://www.slideshare.net 4
http://static.slidesharecdn.com 2
http://aaron-gustafson.com 2
http://mail.easy-reader.net 1
http://zephyr.easy-clients.net 1
http://www.easy-designs.net 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 1 minute Intro - who we are Here’s what we are going to tell you

Ruining The User Experience (The Rich Web Experience '07) Ruining The User Experience (The Rich Web Experience '07) Presentation Transcript

  • Aaron Gustafson Ruining the User 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 JS Yes No User clicks ? Any open? No Yes CSS Inside click? Yes No Close any open FAQs Slide open requested FAQ :target used Default browser behavior 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?
  • http://slideshare.net/AaronGustafson Aaron Gustafson Ruining the User Experience