Looking to present tagged recipes (edit: that users have tagged themselves on their own recipes) in a way that makes them easy to find. All tags are automatically categorized; recipes may have multiple tags. The user interface is limited to 745px.


Tags intermingle when sorted alphabetically. For example: African, American, Bread, Cake, Cambodian, Canadian, Chocolate, Cupcake, Danish, Diet, Dutch, etc.

Design 1 - Grouped by Category-Accordion Tags

Group the tags by their categories and display them using accordion panels. The user can see the categories because each tag is labelled as such (separated with a hyphen).


download bmml source – Wireframes created with Balsamiq Mockups

The concept is good (many recipes per page), but there is redundancy and an awkward hyphen aesthetic.

Design 2 - Split Categories, Accordion Tags

Separate the categories (perhaps with adjustable dividers).


download bmml source

Uses more page real-estate, but it is clean.

Design 3 - Tabbed Interface, Accordion Tags

Separate the categories across tabs.


download bmml source

This adds an additional click and hides most of the recipes from view.

Design 4 - Tag Cloud

This is a possibility, but I do not know how it could show the tags and the respective list of recipes on the same screen.

Design 5 - User's Choice

Implement them all and let the user decide.


What other layouts present categorized tags as to be: simple, maximize the number of items presented, minimize the number of interactions to view items, and use page real-estate efficiently?

  • The key data is missing from the question: whether there's any taxonomy to tags or whether they're free-form.
    – dnbrv
    Commented Jul 8, 2012 at 22:31

2 Answers 2


From my analysis of categories and tags, tags often have related tags. These dependencies can not be modelled in a tree, since if you try and divide the tags to levels, you will see that tags often related to more than one tag from a higher level.

In other words, tags should have many to many relationship with other tags, possibly with a type of relationship stored (e.g. Chineese food is a specific type of Asian food, Bread can be a category of many types of ethnic foods).

What you could do is present the users with a list of tags that match their filters and when a tag is selected, offer related tags as additional or alternative tags.

--> Let the user search for tags according to partial names and descriptions, don't attempt to show the users 100s of existing tags.

Another approach is to give each tag a type, e.g. Italian and South American are types of ethnic food. Beef and Chicken are types of ingredients. Then you can let you users check the relevant options for each type (along with a choices like must contain all, must contain at least on, must not contain or better yet, boolean expressions e.g. +chicken -nuts +(tomato OR onion) +(mexican OR indian).

A tag cloud is an excellent experience for finding common tags. If a user want to see a large variety of entries or tags that will almost certainly have new entries, then the larger tags will usually suitable.

P.S. When a user enters a recepie, you can automatically apply the ingrediant tags.

  • First of all, I did give feedback for the given layouts (I will edit to emphasize this). Second of all, databases shouldn't be modelled before the inital requirements (including user experience) are complete. UX is not post-coding user interface design. UX is a part of the definition of the requirements. Also, the database can always be expanded (you only need one more table). Commented Jun 29, 2012 at 21:18

Distinguish the categories with icons. For example:

  • 1
    Such a design doesn't help the problem.
    – dnbrv
    Commented Jul 8, 2012 at 18:10
  • @dnbrv - Why not? Commented Jul 8, 2012 at 22:23
  • 1
    Because icons are ambiguous & don't help the sorting problem you have.
    – dnbrv
    Commented Jul 8, 2012 at 22:28
  • @dnbrv - The icons can be generic (e.g., use a square for cuisine), which eliminates ambiguity. Don't know what you mean by "sorting problem" -- it is evident looking at the list that the items are sorted? Commented Jul 8, 2012 at 22:37
  • 1
    Are they sorted in the lines not columns? Because columns imply vertical sort.
    – dnbrv
    Commented Jul 8, 2012 at 23:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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