Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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).

mockup

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).

mockup

download bmml source

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

Design 3 - Tabbed Interface, Accordion Tags

Separate the categories across tabs.

mockup

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?

share|improve this question
    
The key data is missing from the question: whether there's any taxonomy to tags or whether they're free-form. –  dnbrv Jul 8 '12 at 22:31
add comment

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.

share|improve this answer
    
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). –  Danny Varod Jun 29 '12 at 21:18
add comment
up vote 0 down vote accepted

Distinguish the categories with icons. For example:

share|improve this answer
    
Such a design doesn't help the problem. –  dnbrv Jul 8 '12 at 18:10
    
@dnbrv - Why not? –  Dave Jarvis Jul 8 '12 at 22:23
    
Because icons are ambiguous & don't help the sorting problem you have. –  dnbrv Jul 8 '12 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? –  Dave Jarvis Jul 8 '12 at 22:37
    
Are they sorted in the lines not columns? Because columns imply vertical sort. –  dnbrv Jul 8 '12 at 23:00
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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