Rachel Kochany

Using my phone in the kitchen to try new recipes is a hassle.

Recipes’ ingredients and steps are almost always written linearly. The implication is that you should follow along linearly as well. Collect and measure out ingredients first, then use them up by executing the recipe instructions. While televised cooking shows might use this methodology one would be hard pressed to find a busy home cook that does.

The act of collecting and measuring as a chef goes means a frustrating experience scrolling between the recipes ingredients and directions. It isn't intuitive and losing the current step in the directions is a common issue. Plus, the more a cook touches their expensive phone the more likely it will get dirty in the kitchen chaos.

The following is an exploration trying to solve this issue with one of the most common recipe apps, Allrecipes, through 4 possible UI solutions.

#1 Embedded

 Embeds the relevant ingredients in the directions for each step.

Improvements

• Easily access the ingredients information while traversing the directions

• Never lose one’s spot in the directions because scrolling between the ingredients and directions is obsolete

• Clearly see how much of each ingredient is used in each step of the directions

Problems

• The recipe length gets longer and therefore there is more scrolling (touching of the phone) required to get to the end

#2 Split-screen

Splits the display so the ingredients and directions are presented simultaneously. As one is scrolled through, the other would scroll with it so that the ‘in focus’ ingredient or direction is always paired on screen with the accompanying ingredient or direction. If the ingredients were used up before the end of the directions this functionality would simply close. 

Improvements

• Easily access the ingredients information while traversing the directions

• Never lose one’s spot in the directions because scrolling between the ingredients and directions is obsolete

• Clearly see which ingredients are used in each step of the directions

Problems

• Simultaneous scrolling is not graceful and looks broken

• No other apps/UI function like this

• This design could be extremely problematic when a phone uses OS level split-screen functionality

#3 Tabs

Keeps a UI element present for accessing the ingredients even while the user is traversing the directions.

Improvements:

• Easily access the ingredients information while traversing the directions

Problems

• the ingredients and directions are not present at the same time so it does require switching back and forth to connect which ingredients are used at which steps

• The animation to reveal and close the ingredients is quite aggressive, almost gratuitous

• Shifting UI is confusing and not ideal

#4 Embedded Swipe

 Tap or swipe on a step to reveal the ingredients used in the directions.

Improvements

• Easily access the ingredients information while traversing the directions

• Never lose one’s spot in the directions because scrolling between the ingredients and directions is obsolete

• Clearly see how much of each ingredient is used in each step of the directions

Problems

• The ingredients obscure the directions which could mean unnecessary back and forth to connect how each ingredient should be measured and then used

The Best Solution