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

Improve this question
5
  • Couldn't you reduce the width of the column? And you could centralize the text-align.
    – Varun Nair
    Commented May 24, 2016 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
    Commented May 24, 2016 at 10:38
  • Center align the dates? That will reduce the feeling of a lot of waste of space
    – Varun Nair
    Commented May 24, 2016 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
    Commented May 24, 2016 at 23:08
  • Added the screenshot.
    – jitendragarg
    Commented May 25, 2016 at 3:23

1 Answer 1

Reset to default
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

Improve this answer
3
  • 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
    Commented May 25, 2016 at 3:25
  • @jitendragarg try out all options and do let me know what worked for you :)
    – Dipak
    Commented May 25, 2016 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
    Commented May 30, 2016 at 4:55

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.