I'm working on a recipes-saving application and trying to figure out which method of presenting recipes is better.

Each recipe that is displayed on the page has a name, but not necessarily a photo. I want a layout that is good for a) discoverability of new/exciting recipes and b) finding a specific recipe.

I'm between going with

  1. A pinterest style layout. This is my 1st choice at the moment, because it allows for recipes that don't have photos to just be smaller and then have no need for a placeholder image. The cons are that I'm not sure if the pinterest style layout will make it too confusing to find a recipe.

  2. A Grid style layout. This is my 2nd choice, only because the grid requires each recipe to have an image, so there could potentially be a lot of placeholder images on ones screen. This is probably more organized than the Pinterest style though, so thats good.

  3. A list style layout. I'm not so sure about this one. While this layout would probably be best for finding a specific recipe, the discoverability of new recipes is not very good.

enter image description here

  • I think 1+2 are good options if you expect most of the recipes to have pictures. If not they're just a wall of placeholder images - not very nice and in this case a list might be better. May 25 '13 at 19:11
  • Perhaps you want to narrow down your question. If you just ask "What is best" you might get a variety of opinions.
    – Dvir Adler
    May 26 '13 at 8:38
  • @Dvir Adler, thanks for the input. I really am trying to find a method that is "best" for a) discoverability of new recipes, and b) easy to find a specific recipe. Thanks!
    – Muhambi
    May 26 '13 at 16:52
  • Quick suggestion for the lack of photos problem: create a category or tag system, and design a nice cartoony placeholder image for each category (with a different color for each). That way, the overview will still offer instant information if none of the recipes have photos.
    – Peter
    May 27 '13 at 10:31

It sounds like it's time for you to conduct some user research so that you can determine what method is best for search and for discovery.

If you haven't yet talked to your target audience yet, you should do some quick interviews to learn more about what they do when they're looking for recipes and saving them for future use. These can be quick five-minute conversations in cafes (I've literally sat in a cafe with a pile of $5 gift cards for that cafe and put up a little tent card that said "I'll buy you a coffee if you take 5 minutes and chat with me about [topic]"), it doesn't have to be very in-depth.

You'll need to create a prototype (what fidelity you should use depends on how far along in your design you are; since you're asking this, I'm guessing that you're not too far along, and so it should be pretty easy to put together a low-fidelity prototype) and a task list that works with your prototype. Remember that your task list should use your users' language, which is why I added the reminder to talk to your potential audience first to make sure that you understand how they think about looking for, saving, and browsing recipes. If this is your first time doing user research, I recommend choosing one of your two use cases here and focusing on it. You'll learn a lot from conducting this research yourself, and as you learn more, you can iterate on both your design and your research to create the best possible user experience for your users.

  • +1 for proposing doing user research. Plus, I would recommend analysing some cooking web sites. Some of them exist since the beginning of the Internet, so I supose they ended up finding some useful patterns to display recipes.
    – Pep López
    May 27 '13 at 11:23
  • @nadyne, Thanks for the great input. I'll definitely plan on doing this!
    – Muhambi
    May 28 '13 at 0:21

Solution 1 is the flexible choice but can quickly become overwhelming.

I like the suggestions @Peter made and I might extend them slightly. I would have a popover with similar recipes when the clicks on 'More Like this' and show a counter of how many people liked this recipe.

The fact is we could provide many ideas but only your target audience can offer you the insight you need to make this decision. I would create a quick html mockup and test with a small group maybe even let them re-organize the elements on the page as they would like to see them.

  • thanks for the great input! I really like the popover idea
    – Muhambi
    May 28 '13 at 0:24
  • You're welcome. I'm glad I could help.
    – techmsi
    May 28 '13 at 0:48

I agree that 1 or 2 would be appropriate, but for your objectives, I'd consider more than the layout. How about:

  • 'More like this' - once someone has found a recipe they like, show them similar recipies
  • User ratings - getting users to rate recipes based on factors including quality and novelty would help users and build engagement
  • User tweaks - what would users do differently having made the recipe?

As Nadyne says, test, test test!

  • your last bullet point is great. Definitely going to keep that in mind! Thanks for the input!
    – Muhambi
    May 28 '13 at 0:25

Well, a recipe catalog should have PICTURES because that's the first thing user will consider before tapping or clicking on a particular recipe. In my opinion Pinterest/Google+ layout would be good but since most of the recipes tend to have longer names , it would create a lot of chaos . I would suggest providing users to switch between the (1) and (3) Layout . Like the what eBay did with its recent iPhone update.

  • Are you sure that users will decide to click on a recipe mainly because of its picture? If it is a web site where users can send recipes, it is possible to find great cooks that are terrible photographers. Maybe some research would help to understand how users behave in these kind of web sites. What do they take into account? Reputation of the cook? Votes of the community? Availability of the ingredients?
    – Pep López
    May 27 '13 at 11:35
  • I haven't done any user testing but since I have seen my Mom go through Recipes websites, she skims through quickly and most of the time judge the recipe by pictures. The only time I have noticed her reading the title is after searching for something specific .
    – Nash Vail
    May 27 '13 at 12:18
  • @nashmaniac, I like the suggestion, thanks for the input!
    – Muhambi
    May 28 '13 at 0:26

If we're going off assumptions instead of real user data, #1 is the winner but perhaps with a few modifications.

As @Peter said making #1 more visual with a tagging system and some form of default method is preferred. Think, are users really going to click on something without a picture? I wouldn't. Even if the title said "Nando's peri-peri chicken exact recipe" which, for me, is extremely convincing. It needs a photo.

Take a look at some great tagging systems here: http://www.awwwards.com/ and I also used Jamie Oliver's newly redesigned site recently if you haven't seen it: http://jamieoliver.com/

Remember that recipes are visual. Taking a look at recipe books you'll notice that the ingredients and method comprises about 1/3 of the overall recipe, users are more attracted to visual stimuli than written.

Not the answer you're looking for? Browse other questions tagged or ask your own question.