web standards

What a Technophobe Can Teach Us

Posted on by krys

“If it was easy, how would it work?”

I recently finished a usability study on the golden path of my employer’s website.   Our primary demographic is mothers, aged 25-45, who shop online.  Mostly, I test within this demo, though I like to include people from outside the target with every round of testing.

This time, I had the pleasure of testing with the mother of one of our founders.  She’s older, midwestern, and completely computer illiterate.  When I say completely, I’m not exaggerating.

And she was invaluable.

It’s important to test within your demographic.  You want to make sure that the people who are most likely to use your app or website CAN do so.  However, you should make sure to test AT LEAST your golden path on someone who’s completely unfamiliar with computers and the internet.

Why?  Because it will uncover all your assumptions.  For example, have you assumed that people know what the cancel button will do?  Have you assumed that people know how to enter their name in a form?  Have you assumed that people know how to choose a file from their computer?

You may not have to design your site to cater to a user who is that extremely novice – however, you had better THINK about the person.  It’s fine to make assumptions and draw lines, but it’s crucial that you know you’re doing it, and that you understand why.  After all, ubiquity is the holy grail of any brand – and if your app is ever going to be widely adopted you will eventually have to serve the technophobes.

Even standards (which I evangelize at every opportunity) aren’t enough if you’re designing for the whole planet.

It’s worth noting that your testing techniques may need to change for the computer-wary.  I recommend sticking to in-person methods, because if they’re illiterate already, figuring out a remote method is just going to make them uncomfortable.  Give extra reassurance, because they’ve probably never done anything like this before and they’re going to feel like a fish out of water.  And be willing to skip testing advanced features – just walk through the basics.  Advanced features are for advanced users, don’t whomp your novices with them.

One thing you’ll notice when testing with internet newbies:  when you ask them what they expect, or what they’d like, or how they’d like something to work they’ll draw a blank.  They have no experience from which to draw expectations.  Instead, I ask the question “If it was easy, how would it work?” and I get them to dream.

Test with technophobes.  They will teach you more than you can imagine, even if they aren’t the people you design for.

Today’s Glossary Term:
focus group – A method of gathering user feedback.  Gather 6-8 users in a room together, for an hour.  Have a list of questions for the users.  This method is great for learning how people talk about your product, how they feel about it, and how they interact with each other in regards to your product.  Focus groups are great for testing ideas and concepts, and not great for testing specific single interactions or detailed workflows.  Focus groups are a great way to gauge the social impact of your product idea, too!

Today’s Interesting Link:
http://www.smashingmagazine.com/2008/08/17/10-futuristic-user-interfaces/ – this is a fantastic mental playground, and it gets the imagination going.  Where do you think user interfaces are going this year?  The next five years?  The next fifty?  How about five hundred years from now?

Today’s Usability Quote:
“If we knew what we were doing, it would not be called research.” – Albert Einstein

Today’s Music To Design To:
You have to be careful when you’re listening to BT, or you’ll find you’ve designed something awesome and forgotten to eat, sleep or exercise for three days. It’s that kind of music; energetic, inspirational, and melodic enough to lull you into a creative coma. I highly recommend the album ESCM, which is available on CD.
Buy the CD or
Buy some of his MP3s

AJAX abuse hurts your users – and you

Posted on by krys

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