5

I have a table where every 6 entries of the data are loosely related. How can I show that these sections of data are related without adding a separate column explicitly saying so?

I've tried to highlight the columns in groups of 6's but I don't think it looks as good as it potentially could.

Example:

enter image description here

Edit:

The main purpose of the grouping design is to give users a way to count out sets of 6 entries more quickly/easily than using mental math. However, the original order/grouping of the entries is completely arbitrary and based purely on what order they are imported. After the data is imported it will always be kept in that order because it will corresponds with a process that I have no control over.

Improve this question
5
  • 1
    I think your approach is good enough, you could just change the style of the table. Other option is to encapsulate the rows in a parent and show/hide the content of each one, but that would be useful only if you want the user to focus on the classification of the rows and no by its content. Commented Apr 24, 2015 at 15:36
  • +1 I like the thought in reality I believe your design works but you are exploring better ways to make users aware of this. Whats lacking currently is I dont know if that grouping is by design or if it was purposely done. Commented Apr 24, 2015 at 18:07
  • @BobSinclar edited in some intentions behind the row groupings Commented Apr 24, 2015 at 18:29
  • 1
    So that helps but why would users want to count out groups of 6? Are they placing 6 people on their hockey team , are they buying tires for a 6 wheeled car? Why do they want to grab 6 entries ? Commented Apr 24, 2015 at 18:45
  • @BobSinclar The groups of 6 correlate to 1 row of 6 items being processed by a machine. I want them to be able to recognize groups of 6 quickly/easily because it would be easier to make an edit in the computer data and then know that they have to reflect that edit at row 3 item 4 instead of item 22. If I can somehow design it to be more intuitive that using mental math then I think I will have succeeded. Commented Apr 24, 2015 at 18:56

3 Answers 3

Reset to default
8

Your current approach is heading in the right direction. When your users use this data regularly, they will already know the relationship between the groups. Switching background color is one way of creating contrast between groups. Other ways would be to use line separators and white space.

One thing you can have do to make it more obvious is by de-emphasizing things that don't matter.

e.g. There's gridlines and borders around all your cells. Are they making the data clearer to understand? Not really. The dark strokes, especially the verticals are getting in the way of scanning across rows. Consider removing those.

There's a good article on table design by Dark Horse Analytics.

Below are 3 ways of styling the table to show distinct groups from the least intrusive (line separator) to most obvious (background). Following Edward Tufte's principles, I prefer the line separator method for being compact without adding too much ink on the page.

enter image description here

Improve this answer
2
  • +1 I agree with your answer and I liked the linked article, the presentation in it could be useful to explain how less is more to no-UX people. Commented Apr 24, 2015 at 18:51
  • I think I ultimately am going to go with the third option you listed. :D Commented Apr 24, 2015 at 21:00
6

Use grouping horizontal lines and eliminate the verticals one. Horizontal lines helps to lead the eye along the line, while vertical lines become a barrier along the eye path:

enter image description here

Improve this answer
0

In order to show data is related in the same table there is a 3 step process.

  1. Put the data next to the related elements (you did)
  2. Show some classification of which data fields are related (you did)
  3. Tell the user why its related! Because it may not be obvious

See my design. You could alternate colors between the related fields and maybe when they hover over tell them why the data is loosely/slightly related to the other fields. See my example below

enter image description here

In short don't make the user think if the color grouping is just coincidental or if those fields are actually related. Give them explicit clues.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.