2

My colleague is proposing the following layout for the session summary footer on screen:

enter image description here

But for me it doesn't feel right to centre-align these headers. I don't think I'm seeing such layout anywhere nowadays, and it just like falls apart. But without design/UX education I can't formally explain why it's bad.

Is it bad? If yes, how to explain that?

My proposal is to left/centre-align titles at least, or like this (so that important information is in the first line and details like number of pages on the second):

enter image description here

EDIT: I'm asking mainly about visual/aesthetic issues with centred titles, maybe even not just in this particular situation. Apart from that, there are a number of other complications that we're taking into account and that I didn't mention because I wasn't asking for help to redesign the layout in general.

  • In your proposal you have included page count only once. What is the context? Can you move the number of pages on hover and have a single line only? – Harshal Aug 10 '15 at 6:30
  • @merqri Yeah, total will have price only, no count, but there may be more columns, namely copy, scan, fax, and then total. It's displayed on a touch screen device, so there's no on hover. – pronvit Aug 10 '15 at 8:46
1

The first attempts to create a table but A, there's not much data to display, and B, the leftmost column isn't actually table data but should be the table title, and displayed differently.

The second design looks nicer because everything's all on the same line. This means it reads more like a sentence; no vertical eye movement needed. As a bonus it saves you a bit of space.

If you're on mobile, you could run out of column space quickly. If you just have the 4 figures (copy, scan, fax, total) you should be fine though. Potentially change "session summary" to just "summary" if everything turns out to be too cramped. Or even change it entirely and have it say "X pages" instead, which actually adds a bit of data at the cost of contextual awareness.

At any rate, customers will prefer your price over that of your coworker. ;)

  • Thank you. It's not a mobile device, but yes, we're taking into account width limitations, see my Edit. – pronvit Aug 10 '15 at 14:34
1

I think your colleague is right when it comes to have the header and the dynamic content in two separated lines. And while it doesn't look good, and it's a bit confusing, center aligned is not wrong by itself

See, your headers are exactly that, headers. And they also represent a clear indication of different events. Then, the dynamic content is exactly that, dynamic, and shouldn't be in the same line, because they're very different things.

However, you have this: session summary (which is a top level title, let's say H1), and then sub-sections of this main top level title, so the problem you're having is a design one. To solve this, I'd suggest one of the following:

  • move Session Summary to top since it's a top level title
  • make Session Summary centered as in your first image, but with a very different style. For this, either the variable content or the top title could have a different background
  • combine both options (see image below)

enter image description here

you'll also notice I've removed the 1 page part in the total, since your users will probably be more interested in money than copies, but you could always get it back. And of course, Total has a different treatment, because as an user, I always want to know the more important information (eg, how much I'm spending) at first glimpse

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.