4

I have to create the UI for a new dashboard. Most of the sections follow "single column, multiple records" policy. E.g. one section lists all the dates where attendance data is missing. So, it has only one column called "Date" which can have as many records as possible.

Currently I am using a grid with just one column, which wastes a lot of space on screen.

current design

I am trying to figure out what is the more sensible approach here to design the second table. Should I try creating n number of labels instead?

Edit:

Page design

Page has about 15 such sections. Two sections require only one column. The grid control is an existing one which do not support orientation feature. I tried reducing the size of the grid controls, and placing two next to each other, which seemed like a right idea. Other than that, I tried placing n number of labels too, both of which seem like a good enough idea.

There is no requirement of interaction other than clicking on the link in first column in some tables.

Edit: This is how the design looks with two tables in one row. New design

  • Couldn't you reduce the width of the column? And you could centralize the text-align. – Varun Nair May 24 '16 at 10:36
  • I can do that. But it still leaves the space on right side. There is nothing to show on right side. The page also have other tables with 5-10 columns. So, you can understand, this table uses only 10% width of the page. – jitendragarg May 24 '16 at 10:38
  • Center align the dates? That will reduce the feeling of a lot of waste of space – Varun Nair May 24 '16 at 10:39
  • What does the rest of the dashboard look like? Providing some additional context into the larger design will help identify the right layout solution for your particular case. It's generally pretty hard to solve for an isolated element without understanding the impact on the page as a whole. – dekaliber May 24 '16 at 23:08
  • Added the screenshot. – jitendragarg May 25 '16 at 3:23
1

When the content is as small as showing dates, then show it in horizontal columns and keep the Header as row; the information will still be consumed in the same manner as vertical, but it saves a lot of space and looks a lot neat.

enter image description here

  • I sadly have no option to enable horizontal orientation here. I will try to see if there is a better approach that can work without too much rework. Otherwise, I will go for your idea. I hope you don't mind if I don't select your answer just yet. – jitendragarg May 25 '16 at 3:25
  • @jitendragarg try out all options and do let me know what worked for you :) – DPS May 25 '16 at 3:35
  • Hey, sorry for the delayed response. I was out of office for a while, so couldn't try. Anyway, I realized, this was the easiest way and it was still readable. In one case, I had two columns, so I used the empty space there to display other information. – jitendragarg May 30 '16 at 4:55

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.