Ruining The User Experience (The Ajax Experience West 2007)
 

Ruining The User Experience (The Ajax Experience West 2007)

on

  • 3,129 views

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

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 walks you through several real-world examples, pointing out common mistakes that hinder usability, accessibility, and search while teaching you ways to avoid them altogether, either programmatically or simply by altering the way you think about JavaScript-based interactivity.

In this session, you will learn:

• How to meet your users' needs and expectations in a progressively-enhanced way;
• Common mistakes in interaction design;
• Progressive enhancement as a concept;
• How to deliver a layered interface;
• Progressive enhancement with CSS;
• Progressive enhancement with JavaScript.

Statistics

Views

Total Views
3,129
Views on SlideShare
3,124
Embed Views
5

Actions

Likes
4
Downloads
69
Comments
0

2 Embeds 5

http://aaron-gustafson.com 4
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Ruining The User Experience (The Ajax Experience West 2007) Ruining The User Experience (The Ajax Experience West 2007) Presentation Transcript

  • Ruining the User Experience Aaron Gustafson
  • 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
  • Level 2: Dress It Up nicely designed visual hierarchy maybe a bit of Flash adequate browser testing basic styles for alternate media
  • Level 2: Dress It Up
  • Level 3: Make It Sing Responsive interface elements Predictive data delivery (Ajax) Allows for more customizable interactions
  • Level 3: Make It Sing .collapsing .optional .optional
  • Level 3: Make It Sing Create the link to show/hide the optional fieldsets Page Hide the optional fieldsets JS Yes No
  • Level 3: Make It Sing
  • Levels of Service
  • Example: Tab Interface
  • Example: Tab Interface Split the content & make some tabs Page JS Yes No
  • Example: Tab Interface .tabbed
  • Example: Tab Interface
  • Example: FAQ
  • Slide open :target used requested FAQ Default Close any browser open FAQs behavior Page Yes No Inside User clicks ? CSS click? No Yes No Yes JS Any open? Yes No Example: FAQ
  • dl.faq dt>a dd#id 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?
  • Ruining the User Experience Aaron Gustafson