7

I have a list of events inside a table. the table's rows have zebra stripes that distinguish them from one another. the problem is that the text looks like a big unscannable block, it looks something like this: enter image description here

since each cell has different type of content, I was looking for a way to tell them apart, one idea was more zebra stripes which looks overwhelming, like a table inside a table: enter image description here

or only on mouse hover on the cell, but that could be confusing since it resembles a button or clickable area: enter image description here

any suggestions?

  • Seems like you need more columns, I'll draft that up into an answer later on when I have more time, unless someone beats me to it – Darren H Apr 30 '17 at 14:21
  • Actually, since I just reread and see you mention they blocks will have different types of content, the extra columns idea won't work. I have some other thoughts, though, which I will share soon in an answer – Darren H Apr 30 '17 at 14:23
  • 2
    A table is clearly not the design pattern to use here. Think out of the box... or use one ;-) – jazZRo Apr 30 '17 at 20:52
  • Can you share some real world format so that I can think about re-designing the UI? – Mr. Alien May 1 '17 at 5:08
3

Here are a few suggestions from me:

  • Use the Zebra strips for each row, and they should appear the same in each section.
  • Remove the steps # column - use the same as divider between the Zebra Strips.
  • Align the content appropriately with readable line-height along with proper left alignment with gutters.

Here's a sample:

enter image description here

1

When tables are good

Tables are the go to solution when you have

  • A list of things (rows)
  • That should be easily sortable
  • That share like attributes (columns) that are
    • Relatively short
    • Of unknown importance
    • Might be configured by the users
    • Which users will be doing deep analysis on

In other words, a bunch of stuff that would work well in a spreadsheet.

Tables aren't the only answer

The data you show here (assuming it's a representative example) is a poor fit for tabular presentation. The "use a grid for everything" approach was a bad habit common in enterprise software up until very recently. The effort required to undo this mistake is daunting for many product teams, but your example is a good case study in why it must happen.

Understand your users' needs

Ask yourself what the users are trying to accomplish when they come to this view. What are they trying to do or understand? There's a lot of information represented there and I can't even venture a guess based on what I see.

Visually explain the data

Find the hierarchy of data that matters to your users and design a solution to communicate that. Right now, the most important thing is the "Step #" — after that it's all just noise.

Generally speaking, tables allow very little room to create visual hierarchies. When you have a pretty good idea of what the data is and what pieces of it are most important, there are two good, common solutions:

  • Designed lists
  • Cards

Here are a couple of examples:

This designed list has highly structured data that is important for scanning and freeform data that is important for further investigation. It's table-like, but without the unnecessary constraints.

Timeline-style log list

The now ubiquitous card UI gives structure to even more disparate data sets. This is helpful when you need to give structure to a set of items that share an important theme but differ greatly in specifics or contain a lot of busy sub elements. The card unifies the parent item and gives is space from it's equally complex neighbors.

Google Now card UI

0

Apply more of a consistent hierarchy for your content inside of a cell. Look at the example below.

Be consistent in your font size and color.

Check out this article.

One of the most important techniques for effectively communicating (or “honoring”) content is the use of typographic hierarchy. Typographic hierarchy is a system for organizing type that establishes an order of importance within the data, allowing the reader to easily find what they are looking for and navigate the content.

Source: Understanding Typographic Hierarchy

The left is how it is now. To the right are my suggestions. What is the most important information of your cell? Make sure it stands out. I'd make a difference between actual data (black, large), data labels (blue, small) and instructive text (grey, small).

enter image description here

I think the zebra idea is good to have. Keep them like the first example.

0

Considering that zebra striping is basically just an emphasized border, how about just adding borders to the cell level? enter image description here

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.