AJAX abuse hurts your users – and you

Sorry for the long absence, dear readers.  Life got in the way of my proselytizing.

However, I’m back and I’ve got a piece of solid wisdom for you:  AJAX is new and fun and exciting, and it makes things much more interactive and powerful.  But it’s also highly non-standard and therefore often unusable.  Just because you CAN do a thing, doesn’t mean you should.

Yeah, I know, sit back down and put your pitchforks away.  I’m not saying “don’t AJAX in your interaction designs”.  I’m just saying you have to THINK about it.  Think carefully, and look at things from your users’ points of view.

On the web, you get everyone from grandma to my 13 year old to Bill Gates clicking around.  I sincerely hope that you know the full range of users your site gets, and that you’re designing for the lowest common denominator (LCD).

Standards are crucial for LCD design.  On a Mac, the positive (moving on) action button goes on the right.  It’s always on the right.  Users can know to click the rightmost action to progress, without ever reading what the button says.  (And they do, trust me)  On a PC, it’s the opposite – positive action button always on the left.

The key is, ALWAYS.  People like to form habits, and they don’t like to think.  They like things to be consistent and comforting, especially if it’s new.  Humans want something to feel familiar, or they’ll resist adopting it.

So then we come to web standards.   Checkboxes are for when you can select multiple options.  Radio buttons are exclusive.  Cancel is your escape hatch.  Links are underlined.  These are the things that even grandma relies on, to help her as she wanders through our labyrinthine web apps and content portals.

The problem is, these standards are often clunky and inefficient.  Enter information in a form and click a button to apply it to your page.  Wait.  Lather, rinse, repeat.  Yes, it’s tedious, and our users are always hollering at us to save them time.

Enter rich internet design patterns.  Regardless of the technology behind them, real or faked or kluged, these design patterns make our web browsing experience a million times more lively, responsive and dynamic.  Suddenly our users can drag and drop.  They can enter info and then hit the enter key to submit it.  They can update displays in real time with sliders and spinners.  OOOOH, shiny.

Except they don’t.  How many of the top websites out there use drag and drop?  Guess why?  Although it’s getting better, very few users on the web know they can drag and drop.  No standard has yet emerged to indicate what is draggable, and where the drop targets are.  The idea of submitting a form field with the enter key is just barely starting to get traction in the savvy crowd, so it’ll be years before my technophobic mother is comfortable with it.

So you have sites whose functionality is powerful, but whose usability is abysmal.  Take Remember The Milk, for example.  Don’t throw tomatoes; I know this site is a darling of efficiency buffs.  And sure, it’s efficient.  Once you’ve figured it out, you can zip through task creation and management like a whirling dervish.

But when it comes to metrics of ease of use and learnability, Remember The Milk scores ridiculously low.  Why?  Because they’ve plunged headfirst into AJAX design patterns without looking back.

The primary function for Remember the Milk is the adding and managing of tasks.  You want to add them, and then later you want to mark them as done.  This is your golden path.

To add a task, you click a small link in the upper right hand corner.  Then, you are given an editable text field, but that’s to the left and below where you clicked so you might miss it.  You type in the text field, but there’s no way to assign any details to the task – and there’s no button to save it.  You hit enter, and your task appears in the list – and then a second later it moves to the bottom of the list.  This is, needless to say, confusing.

When you mouse over any task, you see the details in a right hand pane.  This is great!  Except, you can’t get to them.   If you click on a task the right hand pane will “stick” – sort of.  Nothing tells you that the right hand pane is sticking on that task, and as you mouse over stuff on the way to it, it changes – so you have no way of knowing that when you get there, what you want to edit will be there.

To edit a task, you click a little icon to the right of what you want to edit.  Each item has a different icon.  Let’s try the golden path item: the date.  The icon you click is a calendar.  Great!  You click it, and you’re presented with an editable text field, which has a calendar to its right.  Well, everywhere else on the web, clicking on a calendar to the right of a text field brings up a little widget where you can click a date.  So you click that calendar icon, and poof! The text field goes away.  Turns out, that’s how you submit your changes.

I’ll leave off my criticism there.  RTM is a great app, and I do use it.  And I recommend it to people who are willing to take the time to learn it.  However, it drives home the moral of this post:

Just because you can do a thing, doesn’t mean you should.  Stick to standards and be sparing with your bells and whistles.

There are exceptions to this rule.  I’ve seen some rich internet apps which use all the bells and whistles but also let users do things the standard way.  I’ve also seen apps that give their users little pointers as they go along, using more RIA widgets that fly out and point to things.

Certainly, you can “flex” all those new muscles the internet is building us.  But for goodness’ sake, don’t beat your users over the head with them!  If you design a fancy AJAX interaction, make sure the standard “legacy” interaction is there too.  If you’ve got drag and drop, also allow clicking to fill that spot.  If you have a widget that changes stuff somewhere on a page, make that change apparent by using bright colors, animations, or callouts.  Treat your users as if they’re not psychic, and they’ll thank you.

Go gently into that rich internet, my chidren.  Go gently.

Today’s Glossary Term:
crowdsourcing – This is one of those buzzwords you’re hearing all over the place.  It’s a fantastically useful concept for designers and UE professionals, from two angles.   Its definition is literal – getting ideas, concepts, or even work from the masses.  Employ crowdsourcing within your own company to get interface ideas, or without to fill in gaps in your creative needs.  Or, join a crowdsourcing community and offer your services within the crowd – it’s a great way to drum up business.

Today’s Interesting Link:
http://failblog.org/2008/10/15/optional-fail/ – We all love UI humor, and this one is a classic example of what happens when we’re not paying attention to what we build.

Today’s Usability Quote:
“Fail often to succeed sooner.” – Tim Brown, CEO of IDEO

Today’s Music To Design To:
This is an oldie but a goodie – the Hackers Soundtrack.  Let’s leave off the complete unreality of the movie, it was relatively fun and the eye candy was good.  However, the soundtrack is a fantastic blend of mid-90’s alternative and electronic music, with some stuff that’s strongly relevant and even slightly edgy for today.
Buy the CD