I am creating a UI similar to a marketing calendar. But it has hundreds of rows, each row showing a bar that represents how long the process took. So the table header represents time (weekly, monthly, quarterly). As you can infer, monthly and quarterly view will grow exponentially.

Image attached for reference. UI similar to Marketing calendar

What would be best way to represent such information. The aim is to show summary in a visual way (rather than textual) and allow user to dig deeper if he prefers to.

Edit (1):

I am adding more details since my question seems too vague. In the image lets look at the y axis. There are 100's of tasks that was done by someone. Now these tasks belong to a certain sub department which in turn belong to a certain department. The problem is there are a lot of rows to scroll through to get the overview of the information.

How many tasks were finished under a certain time?

If I take a cards based approach I can show the gist of this interactive table but if I want more information I need to come back to the tabular view.

My question is what is the trade-off between usability and readability? How to condense the information in this rows of data such that there is a balance between usability and readability?

  • What is the problem with the UI in the picture attached, sit? Feb 13, 2018 at 10:08

3 Answers 3


The question you seem to be asking is how do I get an overview of a huge list of items with visual encoding

It might be a zoomed out view would provide that overview.You pick up interesting patterns from a very zoomed out image. A lens on the zoomed out image can be moved about on the zoomed out image. You can use a paired window to provide zoomed in detail. I have seen this used in a number of systems to great effect. Have a look at the Xerox PARC CHI paper on magic lens from the early nineties (https://www.youtube.com/watch?v=BwIAcczLUUA). It is a really good exploration of this. Pad++ was also a lovely exploration of the value of zooming interfaces. https://www.youtube.com/watch?v=BlIRYTuSv0Q


A zoomed out image of a table with a small window which provides focus for a second window showing a zoomed in section

  • This answer is great. I'm going through similar approach. Let me check for more answers.
    – AshTyson
    Feb 16, 2018 at 10:55
  • Glad you liked it - do give me an upvote ;-) Love to know where you go with this. Visualisation is my thing. Feb 19, 2018 at 13:07

Unfortunately it is impossible to use the same structure to achieve what you are aiming to achieve. As an alternative, you can restructure data. Instead of presenting actions per individual, you can present actions and duration, and in addition to that call a separate display element (like a modal) to show more data for that action.

I will be a gannt chart (example #1) with additional data table (just like yours) presented when a certain task is clicked.

Example #1:

enter image description here

  • Although this is the typical structure I thought at first, it gave a few restrictions for my scenario. Thank you for your time.
    – AshTyson
    Feb 16, 2018 at 10:56

The best way depends on the context of your users needs and what kind of data they need to find quickly.

It could be through grouping rows (teams or departments), or adding a search bar which acts as a filter to quickly find the data.

But like i said, it depends on the context. If you can give more detail in your question you will get more detail in your answers.

  • Added more description
    – AshTyson
    Feb 13, 2018 at 10:45

Your Answer

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

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