0

I am in the process of designing and interface where a internal user creates a programme of items. Each item can be grouped with other items in a "category".

enter image description here

If two or items in the same category are displayed together in the list I would like duplicate information (e.g. the category name) to be removed "Category 1"

Items not in a category should be easily identifiable that they are not part of a category (second item under "Category 2").

A category does not need to be contiguous and a category may be split up by uncategorized items and other categorized items "category 3" - It should be clear that both items with the "Category 3" heading are together.

My current concept assigns a background colour to each category - this seems to work well but I am concerned that I have a finite usable palette and it gets very busy quickly, Some other points, the category labels are unique - and user supplied, and the soloution should scale to potentially 10-20 categories over 50-60+ items.

  • Are users encouraged to categorize all items? Is there a reason that the list is broken up by larger headers? – Mike M Jun 30 '17 at 13:40
  • @Mike There is no requirement to group all items and it is expected that some items will be left without a category, The headers are to facilitate the recognition of the category for that group/item - they have meaning but to position can be changed if it would improve overall usability. – Ricky Baby Jun 30 '17 at 13:52
1

Taking a stab at it based on what is above hope it helps. Sorry for any spelling/grammar errors in advance

I would consider using something like chips from material design as part of your actual data element to represent your catagorys (https://material.io/guidelines/components/chips.html#chips-behavior)

Each category would be represented by a chip that can have a name,a colour,a icon or image

between name colour and an icon you can scale them with uniqueness a bit better and avoid relying on colour only which is worth avoiding.

Also limiting the colour coding to a small area rather than a whole the colours will be a bit less loud.

having the chip in a consistent place lets you scan for content of that category.

finally treating the chip as a clickable area can give you the affordance of changing the category on the fly.

Removing shared information

I am assuming that the information that is common within a category is consistent to some extent.

To handle removing repeating information for items of the same catagory that are close together, i would use the common information of the elements to make something like a container header. with the child options clearly display as its children. this way the information that is overlapping is called out clearly

0

Use a list or cards to let the user decide what's important to them

The first iteration you have is category centric, but there's a couple options. I don't know the other attributes that are required, but assuming there's a name:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Viewing, sorting, isolating

This way if you have 50-60 items, let the user decide how to sort. Filtering controls can have them isolate the 'uncategorized' if there's a need to see that in isolation.

You can also change the position of the column to the left so the user scans the category first.

Editing

NOTE: I think I may have misread part of your problem. If the user needs to Recategorize items or assign them, you can add inline edit, and have them quickly change this info. This is easier than dragging and dropping across 20+ categories to regroup and reassign them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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