Grouping items by category

Question

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

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.

Answer 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

Answer 2

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:

^{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.

Answer 3

If you were to take the Law of Uniform connectedness into account, then having similarly themed items grouped together would be the way to go with cathegorizing your content. Have a look here: https://lawsofux.com/law-of-uniform-connectedness.html

That being said, removing cathegory name is not a good idea. As it's not necessarily explicit what the overall theme of those grouped items is. And usability-wise, it would be much better to be explicit rather than implicit. It saves times on overloading user's cognitive ability.

But in the end, you know best if this all applies to you.

Cheers