4

I need to help users interact with a (potentially very long) assignment list of healthcare procedures. The list is tabular data that users want to sort in various ways.

Since this is healthcare a patient may have multiple procedures at the same time. Therefore we've discovered that users frequently need some sort of grouping or linking of the data rows to "work on" related items. One catch is that rows often must be sorted by an attribute like due date, physician, etc.

Finally, users may take individual items off the work list (eg begin a process) without taking the entire group. We currently have tabs for "unassigned", "assigned to me" and "complete". The plan was to decrease the size of the list by segmenting it that way. Groups would potentially have children in each tab.

On the plus side, this is only available on desktop browsers so I get plenty of screen real estate and no mobile issues.

enter image description here In this example elements, 2,8,9 (blue dot) could be grouped or linked as they're the same patient & procedure date.

As I'm building out a prototype, I'd take advice on any of the following:

  • What are the best practices for visually grouping tabular data? Background color? Icons?
  • How do I handle sorting by child attributes that may break the grouping?
  • When viewing an item detail, is it advisable to allow users quick access to other "related" items?
  • Suggestions on how I deal with groups that cross status tabs (see above)?
  • Are there examples of this that anyone could point to? I'm struggling to search for the problem.
Improve this question
3
  • I added a picture of the problem. I'll add a few of the grouping solutions I've been considering this evening
    – Bryce Howitson
    Oct 23, 2018 at 22:14
  • question: 'What are the best practices for visually grouping tabular data?' --- Is this across rows, or across related columns?
    – Mike M
    Oct 23, 2018 at 22:38
  • @Mike M That's kind of the problem. Its rows that get grouped but a sort on columns like status would break the groups.
    – Bryce Howitson
    Oct 24, 2018 at 1:17

3 Answers 3

Reset to default
3

You can have 'soft' grouping with colored elements, such as icons, or 'hard' groups as separated tables. Or both, like in this example.

table rows grouping

Alternative color tag groups:

alternative color tag groups

Improve this answer
2

You can take a few pointers from Monday App (See screenshots below)

Monday App screenshot

Note the background color to communicate status, and also the change in color to highlight certain columns of importance (or even row headers, if that's even a thing).

One thing that would be nice is a multi-column filter. That is, if a user clicks on the Patient tab (so as to sort it ascending for example), and then the date tab, then the table should be sorted first by patient names and then by date of procedure.

This will give you a lot of flexibility, allowing your users as well to make their own filters to fit their needs. You can even have a method of saving some filters so that users don't have to redo the same filter every single time. From a programmer's point of view, this is also good because it makes it very flexible for us as well. As soon as the multi-column sorting is implemented we can easily create custom and predefined filters without having to create the code for each filter. Yay, modularity!

An obviously good example of this in action is Gmail's filters.

Gmail's Create Filter functionality

Improve this answer
2
  • The multi-column sort is a good idea. In this case, the users tend to opt for search over heavy filtering since the items only need to be touched for a short amount of time. Eg: "Show me everything for patient Jane Doe". The other nice thing about search is that it provides a "poor mans" grouping when searching by name". I've thought about color grouping but that feels like it requires an interaction before the groups are obvious. Maybe I'm over thinking it.
    – Bryce Howitson
    Oct 24, 2018 at 15:39
  • The colour grouping is mainly for to make the information more digestable. Grouping is one way the mind lessens down on how much has to be processed (e.g. you know the statuses in green are done without even reading the status). So the colour grouping is mainly for the person's own sanity really. But any ways, glad to be of some assistance.
    – Kitanga Nday
    Oct 25, 2018 at 0:02
2

Here are a couple things I've considered. Posting here to avoid muddying the question.

Visual Grouping: enter image description here Pros

  • It's obviously a group of like items

Cons

  • It will break if the columns are sorted

  • Looks "highlighted/selected" instead of grouped

  • Get's visually complicated really fast

Accordion enter image description here Pros

  • Works for groups of "1" or more

  • Can be collapsed so it's less visually complicated

  • Lets us be opinionated about grouping (ie all grouped items are assigned to the same person

Cons

  • Still breaks on sorting columns

  • Could make already lengthy lists even longer

Hover enter image description here

Pros

  • Works with sorting

  • Doesn't add height to the list

  • Minimal code changes to the table

  • Would sort together initially based on name

Cons

  • It's hidden behind an interaction (not visible at start)

  • Linked items could be far apart in the list (including off the screen)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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