4

I have a little problem, responsive design and tables with only 3-4 columns, so the tables can't be 100% of the width, because that would result in way too much white space between the columns and pretty bad readability. So we've centered and gave them a max-width.

Now here's what I'm not sure about, what's more readable/easier to orient/navigate in

1) this

enter image description here

2) or this

enter image description here

4

The first one.

Compare the eye movement between the 2 of them. This is just based on my opinion. Hope it's useful to you. =)

enter image description here enter image description here

  • Well this means that those headings should be aligned with the table, but what about the background and borders, stretched or not? – fxck Jul 30 '13 at 9:05
  • 1
    Hi Foxx, the non-stretched are much preferred as it make the screen not as cluttered and more neat. Keep it simple and minimal. Cheers. – SimonTeo Jul 30 '13 at 9:08
0

Maybe I'm a bit different, but second option looks more consistent to me. Anyway, there is another problem. Why do you have such a big difference in the font size?

enter image description here

Table is barely readable. Try to fix this problem and you'll probably get the answer to your initial question.

And yes, second is better, because it looks and feels solid. The first one is a bit broken and looks like a funnel.

enter image description here

Update

I would say: fix alignment/font and you'll get better result.

enter image description here

  • Thanks for your insight, font size difference aside, you prefer the second one including the title on the left? Or the mix of the two(bg strechted, title aligned), would be better? – fxck Jul 30 '13 at 9:19
  • Regarding font size: if you have extra space, why can't you use bigger font in order to enhance readability? – Renat Gilmanov Jul 30 '13 at 9:21
  • That would be question for the designers, we actually had a bigger font size(16px) and it felt way too big so we decreased it to 13, but yeah, maybe something between would be better. – fxck Jul 30 '13 at 9:23
  • 1
    Ok, I see. Answering your first question: I've described my general impression. Titles will require some attention (I will update the answer in several sec.) – Renat Gilmanov Jul 30 '13 at 9:35
  • Because that is a title, and titles are bigger. – stommestack Jul 31 '13 at 20:51
0

Pay attention to the interaction on tablets. Full width folding bars (Grafika, Analyze) could be accessible with left thumb, see red areas of gesture interaction. So if you suppose your users will have intensive interaction, this solution could be good.
enter image description here

Otherwise I'd choose first option, based on my visual perception.

  • true but given the resolution on tables, headings(grafika, analyza) would on tablets align with the table anyway – fxck Jul 30 '13 at 12:21

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.