I have a dashboard screen with one of the panels as below;

enter image description here

So as you can see there are different fields and corresponding values. Now I need to design/update the same panel to consider the following possibilities;

Each of the fields can have 2 sets of values (like Val 1 and Val 1a, Val 2 and Val 2a, similarly for the bigger field) It is not necessary that the other set of values exist (i.e. Val 1a, Val 2a, etc) What is the best way to design considering the above?

One of the things which came to my mind is to show the default Val 1, Val 2, etc and have an icon next to each of these fields, on click of which I'll show the values, may be as popover or something.

Please suggest some good ideas.

I am using Bootstrap if that has some ready templates.

  • Please describe what you are looking for. You say you need to "design/update" the panel, but that tells me nothing about what you are trying to achieve. The example values you give also convey no real information because they are dummy values. So you are asking for "some good ideas" for a design you haven't specified. – tohster Feb 14 '15 at 3:26

Tables in Bootstrap are not pretty. Bootstrap provides a table class, but in my experience it breaks on phones, allowing the table to leave the right side of the screen. I find it best to build your table using Bootstrap's CSS framework, utilizing the row + col structure; in your case, one row and three col-md-4's. Your "Bigger field" would be in its own row. If you go with what's called a vertical minimalist table style, you'll easily be able to stack your columns on smaller screens.

Tablets and desktops:

3 col table

And on a phone:

3 col table on phone

  • Hey Brent, first off, welcome to UX.SE. Thanks for for putting in great visuals. :) I'm wondering though if you can elaborate more on your thoughts. Why is showing the additional values in a mini-table like you've shown a good solution as oppose to other ones, like tooltip etc? It'll make it easier for people to judge the quality of your answer. – nightning Feb 13 '15 at 21:10
  • Hi Nightning, I'm just coming back to this three years after the fact. Better late than never? testndtv described the need for field1, 2, and 3 to grow with more values. Tooltips can be a good way to pack content away, but unless there's an expressed need to do something like that, I much prefer exposing content and keeping it on-screen. Hiding content is always considered after showing content has been attempted, in my opinion. – Brent Enarson Jan 5 '18 at 0:43

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.