Now I see why people hire UX professionals

Yesterday, I spent the afternoon running a second round of usability testing to verify the changes I’ve made over the past few weeks result in an improved perception of the site.  Overall, I just have to say wow!  The results were an improvement by leaps and bounds, and pretty much all the major issues were addressed.  I think I’m finally to the point where I can put this site out into the world and be confident that the average Internet user won’t run away screaming.

This is not to say there were no problems with the second round of testing, because there were.  However, the problems I encountered were minor and very easy to remedy.

People Need Buttons

This simple UI fact still just blows my mind.  If you provide a text box and nothing to click on after the user enters something, you’ve basically screwed yourself usability wise.  People simply don’t press Enter when they’re done typing.  It’s good practice to allow them to press enter if they wish, but you absolutely positively need a button next to any text box, no exceptions.  Ever.

The simple act of putting a “Go” button next to the keyword search improved the experience by leaps and bounds.  Absolutely no one had any problems understanding the design.  Absolutely no one confused the Meal icons for submit buttons.

There was one screw-up that still bit me though.  Which leads me to my next piece of advice.

Buttons Next to Text Boxes Can and Will Be Confused With Dropdowns

As mentioned in my previous post, I ditched the ingredient auto-complete mechanism for a simple text box that will parse whatever you type in.  In case you don’t remember, here’s what the new UI looks like now:

Notice "+" icons next to both ingredient text boxes

The intended design was for users to click on the text box, type something in, then either press Enter or click on the “+” icon to the right of the text box.  Wow, did this backfire big time.

9 out of 10 users clicked on the “+” icon first, expecting to see some sort of dropdown or popup to allow them to select an ingredient from a list.  The problem with this was clicking on the “+” icon with a blank input did absolutely nothing.  That’s right; zilch, no-op, no error message… nothing.  Even more disheartening was the fact that 4 out of 10 users never figured it out, and thus were unable to ever use the feature.

The solution?

Very simple, I hope.  Now, when you click on the “+” icon and there’s no text input, I set the focus to the text box itself, which of course automatically shows a helpful tooltip on what to enter.  This one line of code – input.focus(); – will hopefully remedy this problem.

Seriously, Quit Trying to be Fancy with Non-Standard UI

I also mentioned in my previous post that I ditched the fancy checkmark graphics and went with standard HTML input controls.  I was also blown away by the dramatic change of perception that change resulted in as well.  9 out of 10 users immediately used the check boxes to mark off several recipes, rather than going into the recipe viewer to add a recipe to a menu.  Most didn’t even pause to think twice about this feature, they simply saw the check boxes they’re used to on the web and knew they could select multiple recipes to add to a menu.  This is fantastic!

The one user who failed to use the check boxes I had some other problems with.  I felt she rushed through the script, and flat out skipped several of the tasks.  I don’t believe she provided feedback that exemplified the average Internet user.

Confusion on De-Queue

The simple re-wording of the “remove from Queue” popup also made a huge difference.  10 out of 10 users understood immediately that the rating was indeed optional.  Most simply ignored it and clicked Ok, and a few made comments that indicated they understood they could optionally rate the recipe.  However, there was one user who was confused that the recipe rating was pre-filled in with 5 stars rather than blank.  I’ve only seen this happen occasionally though (perhaps on certain browsers), so I’m pretty sure it’s a bug rather than a usability issue.

More Options

Like the last test, most people were still lost on how to narrow down recipes to those under 30 minutes, failing to find the “More Options” button.  Again, their first instinct was to use the sorting options to manually find these recipes.  Since I simplified sorting, I believe the experience was much better, however I’m still giving this area some thought.

With a usability test, users are instructed on tasks to perform.  If I tell them to “narrow down recipes to those that can be made in 30 minutes or less,” they immediately know such a task is possible and just have to figure out how to do it.  A normal user would simply not know if such a feature existed, and would thus not be confused with what they don’t know how to do.  I’ve said before I prefer simplicity over powerful features, and have purposely only exposed the filtering abilities that the majority of surveyed users said they would use.  Other features are out of the way as not to clutter the interface with features only 5% of users might ever bother with.  Thus, drawing more attention to the “More Options” button is not something I’m convinced is a necessity.  If people find it, great!  It will be like a treasure chest of new features, buried to await discovery by my most loyal users.  On the other hand, maybe making the button brighter and more noticeable might be the way to go still.  We’ll see.

People Still Don’t Get “What Can I Make?”

Though people understand that they can enter a few ingredients in, they really don’t seem to understand what the results mean.  When I told users to enter “12 eggs, a dozen bananas, and asparagus” to see what they could make, several made comments like “How in the world could you make anything with that?” – obviously assuming I would find a single recipe that utilized such randomness.  Others thought that KitchenPC would somehow generate an original recipe on the fly (Icon Chef Watson??) that perhaps infused asparagus purée into banana bread or some such.  Wouldn’t that be interesting.

A good chunk of users, once seeing the results, understood the relationship between the input and said results, most providing praise of the feature’s usefulness.  Others flat out still didn’t get it, wondering why only five recipes in my database used any of those ingredients.  Attempting to explain that this set of five most efficiently uses the ingredients and amounts specified is a challenge, since it’s most likely the most original feature of KitchenPC and users have a hard time identifying with something they’ve never seen before.

I think the only real way to articulate the purpose of the meal planner is to create a popup video that demos the feature and really shows off what the results mean.  This will for sure be a weekend project before the site is launched.  I’m hoping once I can educate users on the purpose of this feature, it’ll really click with them and keep them coming back for more.  Maybe it will start a new Internet trend and other sites will try to copy it!

Next Steps

I also found a few minor bugs while watching the usability tests, but nothing too concerning.  Hopefully, these issues will be addressed this weekend.

The next task will be starting to assemble pre-made meal plans.  Since this is a huge task, I’m hoping to call upon the powers of the Internet to recruit some help.  I’ll be reaching out to bloggers, friends, nutritionists, personal trainers, and other experts to see if I can find some people to put together these plans.  In return, they’ll be able to link to their site or product which will hopefully provide some incentive for their work.

If you know of anyone who might be willing to help out, please let me know as well!  I’m hoping to get at least 10 pre-made meal plans (at least one in each category) for launch, and hopefully more as time goes on.

While that work is being done, my next technical task is to finish up the web crawler and parser.  I need to be able to import tens of thousands of recipes from other recipe websites automatically, hopefully this time providing near perfect accuracy.  The recipes on the site right now are simply not good enough and contain too many errors.  These recipes need to go!  I also need to work on the categorization code that will classify each recipe and tag it correctly, which is probably a topic for another post.

So much work!