The User Experience on Recipe Sites is Broken

I have beef with recipe sites (pun intended). Here’s why. As a human who eats food, I like to find a tasty dinner recipe to feast on from time to time. I usually turn to the good ol’ interwebs for my recipes. Sadly, I’ve noticed a reoccurring usability issue with recipe sites which, quite frankly, drives me nuts (lol, food puns).

The Problem

There are two blocks of content common to recipe sites. As you scroll down the screen, you’ll usually first encounter a full list of ingredients needed to make the recipe. This list also includes the amount of each ingredient that you need.

As you scroll down further, you will find the instructions for how to make the recipe. This is where the disconnect usually occurs. Let’s walk through an example using a recipe I found from shugarysweets.com.

Okay, the instructions tell me to add tomatoes, mustard, pickles, beef broth, milk, red pepper, salt and pepper. Wow, that’s a lot of ingredients. How many tomatoes again?

Scroll up to ingredients list.

Ah, one can of tomatoes. Okay, I’ve added that. But wait, what else am I adding?

*Pull phone out of pocket. Unlock phone. Scroll down to instructions.

Me: Okay. Mustard, pickles, beef broth. Let’s remember those three.

Scroll up to ingredients list.

Okay, 2 teaspoons yellow mustard. 4 pickles. A cup and a half of beef broth.

Adds 2 teaspoons of yellow mustard. Add pickles

Shit, how much beef broth?

Wipe mustard off finger. Unlock phone.

Right, a cup and a half…Okay, now what else goes in the bowl?

…

I’ll spare you the rest of the gory details. To summarize, I’m constantly scrolling up and down because I can’t remember how much of each ingredient to use.

This interaction pattern violates an established usability heuristic: minimize the user’s memory load. In short, this rule of thumb suggests we should avoid requiring users to remember information at all costs. We should instead make that information accessible when and where they need it.

Now, you may be saying, “So you have to remember a few things. Big deal.” But noodle on this (Boom! Food pun number three). Many people, including myself, are terrible multi taskers. The simple prospect of simultaneously stirring two pots makes my brain start hyperventilating. So adding more cognitive stress to cooking can result in small disasters, like burning the food or setting the kitchen ablaze. True story — I somehow managed to light a sauce pan on fire once. Okay, twice.

You also might be wondering why I don’t measure all of the ingredients ahead of time, according to the ingredients list. In fact, a trained chef would advocate the practice of “mise en place” — preparing and measuring all items before starting the instructions. While this approach is a general best practice for cooking, it sometimes isn’t practical. What if the recipe includes a perishable item that you don’t use until you’re an hour into cooking? What if you have limited counter space, so you can’t lay out all of the ingredients? Not to mention, expecting novice cooks to know this best practice, without explicitly telling them about it, is unrealistic.

A Simple Solution

My proposed solution is simple: include the measurements in line with the instructions.

Again, the instructions here would supplement the ingredients list further up the screen. Here’s why I think this solution works well:

1. It works well on both large and small screen sizes.
2. It is not overly intrusive for more experienced cooks.
3. It supplements the ingredients list, rather than replaces it. The ingredients list is still needed, because it helps you track which ingredients you have and don’t have. It’s essential when you are shopping for the ingredients.
4. The measurements’ different font weight makes the instructions easy to scan.

There are a few morals of the story here.

Lesson 1

After researching and using several recipe sites, it’s clear that this issue is common. The likely explanation is that early recipe sites never identified the issue. From there, as people created new recipe sites, they looked to existing site layouts as a model. So, now the first lesson. Even if every competitor in your industry does something one way, we as designers still need to think critically about whether that approach works.

Lesson 2

You have probably heard this a million times, but you need to usability test your products. Many issues are very difficult to spot unless you actually watch a human use your application. And don’t fall into the trap of assuming market leaders have usability tested their products , so it’s okay to copy them without testing. You don’t know that. And even if you did, your audience is likely unique. They have a unique set of needs and constraints that could render the “popular” solution worthless.

Conclusion

What do you think? What recipe related problems have you encountered? How else could we fix this issue? Speak your mind in the comments!

	Side note: I know toes are appetizing, but shugarysweets.com also might want to source their ads a bit better.
	Another side note: Cheeseburger soup is delicious.

*featured image “Kitchen Trouble” by Kenny Louie, Creative Commons License, no changes were made to image