A review of Foodily’s recipe search

This past week I discovered a new recipe search engine called Foodily. Both the interaction and the visual design are superb, and Foodily makes use of several novel patterns that I thought would be worth pointing out.

With and Without

For starters, instead of using a single search box, Foodily have two. The first is for entering the ingredients that you do want in a recipe, while the second is for excluding ingredients that you do not want. I don’t remember having encountered this before, but it seems to work quite well in this case and doesn’t really require any additional effort from the user (pressing enter while in the first search box will still submit the query).

Where this seems slightly inconsistent to me is if I initially enter “apples” in the first box, and “oranges” in the second. When I’m then brought to the search results page, Foodily strangely chooses to combine these terms into the first search box, reading “apples without oranges.” To me this seems unnecessarily inconsistent; I would keep “oranges” in the second box instead of switching things around.

Breadcrumbs and suggested searches

Foodily also provides the staples of breadcrumbs and suggested searches. There are two aspects worth pointing out here, however. The first is that Foodily have managed to fit both of these features onto the same line, which helps conserve valuable vertical space, especially important since this website is optimised for tablet devices. (The breadcrumbs did break on me when I applied more than three filters, but this is nothing that Foodily can’t rectify easily enough).

The second very interesting technique at play here is that Foodily have synchronised the breadcrumbs with the contents of the search box. This enables the user to iteratively refine their query by adding or subtracting words from the searchbox (whereas in most search interfaces typing something new in the searchbox clears all the previously-applied filters).

Filtering on ingredients and sources

The last convention that I’ll draw attention to are the plus and minus icons that are shown by each ingredient, as well as beside the original source of the recipe (i.e. Williams-Sonoma). The plus icon clearly indicates to the user “show me only recipes from Williams-Sonoma,” while the minus icon indicates “don’t show me any recipes using butternut squash.” So far so good.

What I dislike is the popover that appears when either the plus or minus icons are hovered. While it gives the user more power, it is also adds confusion. The problem is amplified by the fact that the order of the menu options is inverted between the plus and minus icons, causing the user to have to very carefully study each phrase to figure out which filter they’re applying. I would get rid of this popover.

So, on balance I think Foodily is an elegant, usable recipe search site that I plan to use myself. It just has a couple of small nagging issues that the team will hopefully work to improve.

Foodily’s response

“Here at Foodily, we throw around the word love a lot. It’s in the origin of our name after all (Food, I Love You), but as company’s design lead, I wish I could be more original than to say I reaaalllly love this review. You’ve touched on many of the design decisions that we’ve labored over and re-visited many times over the last year. For example there we many nay-sayers for the double inputs on the homepage. But as you’ve noted they do more than just provide an extra control. Together they state what we do differently from a conventional search engine and they do so without requiring much effort from users. We’ve worked hard to eliminate everything that is not completely valuable to users (my personal motto is “a pixel is a terrible thing to waste”) and with feedback like this we can get even better. It’s been a long road to our launch. Thank you so much for making sweating the details seem so worthwhile. Cheers from San Francisco.” - Foodily