Select a Category

Select a Category

Summary

Present categories in columns rather than trees.

Illustration

Categories in columns

Context

You have already organized items in categories. Now you are looking for a way to present them, make browsing and selecting them an easy task.

Problems

Presenting items in categories has often been solved by using a tree view approach. Its main benefit is that it requires only few space. It can also span various sub categories. Tree views however come with the cost of ambiguous navigation metaphors, small click targets and a generally complex overview.

While space issues are only one attribute to consider, browsing and selecting entries should be considered more important.

Examples

Kuroo Category Selection

Quicksilver Categories

OSX Font Categories

Solution

Organize categories in columns. Top category entries go into the first column. Subcategories are displayed in the second column and so on.

If needed you may add an "All" entry to the top of the main category level which displays all available entries of all subcategories.

The column selector approach also provides the possibility to easily add user defined entries like a "Favourite" category. These categories can then be populated with entries from other categories by drag-and-drop.

Rationale

Entries in column selectors offer better click targets and follow just one distinct browsing metaphor. Keyboard navigation follows one metaphor where triggering the "left" and "right" keys means changing the category level. "Up" and "down" map to selecting entries on the same category level.

Code Snippets

Show Code Example

Related Patterns

Pattern.RelatedPattern? Pattern.AlsoRelatedPattern?

Literature

Categories: Settings