Sep 072011

Yesterday I wanted to make some BBQ sauce. I remembered I had a recipe from Cook’s Illustrated that I wanted to try, so I spent 30 minutes looking for the right magazine. No luck. I then went online, where I *think* I found the recipe, but ALAS, it was behind a login wall. No worries, they say they have a 14 day free trial. I enter my email address.

Surprise! There is another step. I could go on about how much I dislike pretty much everything about this form, but I’ll let that one slide for now.

Am I done yet? Nope! Now it wants a credit card. Sorry, but my wallet is 2 stories down and I’m just fed up.*

Guiding people through a multistep task is tricky. How do you give them enough information about where they are in a process without scaring them away? Amazon does a solid job of guiding you through the purchase process with these little graphics. At any time you can see where you’ve been and where you’re going.

The iphone, due to it’s constrained size, often needs the wizard-style process to complete tasks. Instagram is an excellent example.

Foodspotting is fantastic as well, though it deviates from Instragram in it’s first screen. When you hit ‘spot’ you are immediately presented with 3 options.

Instagram assumes you want to snap a photo, and then deviate if you want to pick a photo from a library. There are 3 steps for both applications if you “pick a photo from a library”, but Instagram has only 2 steps if you use the camera. That’s a 33% saving! If you always want to chose a photo from a library in Instagram, you are no worse off. An improvement for them both would be to remember what you did the last time you use the app and automatically guide you into that path.

In thinking about these things, I came up with some guidelines for myself:

  • Remove noise (axe any non-essential fields, defer or hide optional fields until they’re required in some other process).
  • Point out the path you want them to walk, and give an alternate route if necessary.
  • Try not to present them with a fork with equally weighted options.**
  • Show them how far the have to go.

With these in mind, I looked at the administration panel for the SnappyTV facebook application. To set up the app, the user simply has to pick a channel, pick a show and then submit, in that specific order. I initially started simply with a long list of shows with radio buttons, but it was way too much information to present. Adding a search field on top would only make it worse – the user would expect a vast array of shows available, when we only support around 30. Turning the information into a hierarchy seemed the best way to go. Using the wizard approach, I initially decided to hide the successive steps until they completed the current step.

This prevented them from trying to click the show before a channel was selected. However, the page seemed bare and unhelpful and the user didn’t know how many steps there were.

A horizontal progress bar like that of Amazon’s was overkill for dropdown selections. I also didn’t like the cognitive work of matching a horizontal step list with the vertically placed steps.

So instead of hiding them, I show the step count with a little helpful text. Generally, I don’t like disabled links/buttons because if you can’t do anything with it, it usually is better off hidden. In this case though, greying out the steps helped the user see all the steps at once. It’s like being able to read a recipe before cooking the dish.

 Posted by at 3:16 pm

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>