Category and tagging organization

Question

Background

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.

Problem

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.

Questions

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?

Answer 1

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.

Answer 2

Distinguish the categories with icons. For example: