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).
Uses more page real-estate, but it is clean.
Design 3 - Tabbed Interface, Accordion Tags
Separate the categories across tabs.
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?