Saturday, May 16, 2009

Task flow - Analysed?

I took the following screenshot from the website of my credit card company. I was at the website trying to see if the payment I had made yesterday had been effected.

What is not quite right in the picture?

Would it not be better to tell me (the user) right away that if I use PayNet (which I always do), I cannot see my payment history through this interface? That, if I want to find out the status of my PayNet payment, I would probably need to call up customer service?
How about the following picture?

Is it not simpler, smaller, clearer? Does it not communicate upfront about what it can do and what it cannot?

Now, if only the designer who created the user interface had approached the interface as a user would have...

What is the point in telling me AFTER I have selected the dates , clicked Go, and waited for a few minutes, that I cannot view my payment history if I paid through PayNet?

Website users have a short attention span and do not read the entire page from top to bottom before they begin doing the task at hand. They quickly scan for the numbered steps, and start off following the instructions step-by-step. If the prerequisites (or, limitations) are not stated before the numbered list begins, the users can only get frustrated. Like I did.

Sunday, May 10, 2009

User scenarios, anybody?

It was while leafing though the microwave guide, trying to find something, that I realised those good souls at the techpubs department of the microwave company had probably not done a user-needs analysis.

Before we go any further, let's first profile me. Female, Indian, grew up on mother's cooking, manages a home and a career, hates eating out, is always rushed for time. A microwave, they say, is handy for such people. It even (!) cooks Indian food without using as much oil (or time). So, fine, here I was trying to cook Indian food. I was making myself some aloo-dum and wanted the steps to:
  1. Heat oil on high, throw in the seasoning, reduce heat.
  2. Wait for a minute, increase the heat, throw in the aloo cubes, stir, cover.
  3. Wait for two minutes or so, reduce the heat, let it cook.
  4. Take out cooked aloo-dum and eat with puffed rotis cooked separately.
I was looking to combine steps 2 and 3 - I wanted to keep the stuff on increased heat for a few minutes and then get the microwave to reduce the heat automatically without manual intervention.

The microwave guide had no instructions for this scenario. Which means, I had to hover over the microwave for two or so minutes, manually reduce the heat, and ...
Two minutes is a long time for anyone rushed for time. Heck, even a Hindi film song gets over in two minutes. If I have to hover around the oven for two minutes, I might as well use the good old gas burner. So, I remembered the techwriter's Law No. 1: RTFM*

I did. And found nothing. It has a nice section on Indian recipes, with nice preset buttons that you can use to cook stuff. Nice. But it still did not tell me anything about setting the cooking cycle for multiple stages. The closest it got was this:

No, I wasn't cooking chicken tangdi kebab, thank you.

All Indian cooking, if my knoweldge serves me right, goes through a cycle of increase heat -> decrease heat -> increase heat -> decrease heat. This manual, meant to accompany a product that was being sold in India for Indians, didn't tell me how to.

* RTFM stands for Read The Fucking Manual. Back

Just in case you're wondering - the brother figured it out. He looked at the manual, tossed it aside, looked closely at the buttons, tried a few press this - press that combos with still-raw food (we ate it after those several experiments of his), and figured out the combo. I'm not sure if I'll ever look at that manual again.


Friday, May 1, 2009

The engaged reader

I was at my neighbour's. Their seven-year old boy came out of the room, put on his going-out chappals, and was turning the door-lock to open the door and go out when his mother said, "Why are you going out? Should you not be studying for your English test tomorrow?" The boy replied, "There is no more space in my brain."

We live in an era of information overload, the just-google overload. And, because everyone can write (!), we also live with community-contributed growliths such as Wikipedia. Here's a picture of a Wikipedia page that is trying to tell you what Twitter is about:

Noticed the excessive linking? There's a hyperlink in almost every sentence. Most of the time, the hyperlinked words have no relation whatsoever to the task at hand (which is, explaining what Twitter is about). Here are the superfluous links:

But just because the information is there - somewhere - on the Web, it HAS to be linked. ! @ # $ % And never mind the distraction - or the possibility of the reader clicking such a link and navigating away from the page and on to a (duh!) competitor's page (like, Facebook). The reader would be walking away from the page, declaring there's no more space in the brain. But hey, wait, was it not your goal to engage the reader?

Here is a screenshot of something that resisted the urge to overlink, and succeeded in keeping the reader focussed.
Noticed the immense possibilities of linking this paragraph provides? Almost every bullet point screams "Go, Go, Go". But because there's no clickable door to leave, the reader stays on the page. Engaged.