1

In my project I basically have an arbitrary number of items with some properties that are organized in groups. The user can select items in a group to perform certain actions on them. He can also delete items or move them to a different group.

I have experimented with different layouts:

My first approach was to use a List with groups in it like in this picture (I got this picture as an example from http://www.codeproject.com/Articles/7050/ListView-Grouping-XP-Style ):

enter image description here

While this basically worked it presented problems (especially implementation wise, but this doesn't matter here) if each group contains a lot of files. I had to present a group browser along side of it to jump to a specific group, because it was very painful to search the group in the long list. Hence I didn't like this design.


The next idea I had was a Tabbed design, with one Tab for each group: enter image description here

This works as well but may present difficulties if

  1. There are too many groups
  2. The groups names become too long

The third idea I have and right now like the best is to show a Single Table with a combobox at the top to select the group: enter image description here

Selecting a group: enter image description here

This makes the groups clearly laid out and simple to select, hides the irrelevant items and should not have problems with long group names.

Now I wonder if there is a better way to show groups of data that is convenient to use or a standard way of doing things that the user is more familiar with?

  • 1
    If every item is exactly in one group, a collapable treeview should work too. – CoDEmanX Aug 12 '14 at 0:05
2

Grouping items might not be the solution here. Instead allow the user to filter and show only the group he/she wants. Your third idea could be fine but I would add the possibility to search for a group.

If browsing and grouping is the way to go, I think that the way the iPhone handles large lists with grouped items is a good one to consider. The category name stays on top until another category scrolls over and replaces it, and an a-z index allows to jump quickly to different locations in the list. I used your first example to illustrate this (hope it's clear enough).

enter image description here

  • Thank you for your answer. The groups I have don't work well with sorting (you couldn't know that from my question). They represent some stuff in a certain syntax and I am contemplating even using images instead of text to show them. Otherwise your approach would be good and I will think about adding a search function as well. – Jens Aug 12 '14 at 15:00

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.