2

What is the best alignment of the main container in a dashboard if just a little content is displayed?

Let's say the dashboard has a classic structure - header, footer, sidebar, and the main container on the right side. This container usually has some text and a table (with a small with) or one-two graphics. What is the best approach for this:

  • left aligned elements;
  • right-aligned elements;
  • justified content (full-width tables)?

In my opinion, left-aligned content is the best solution because with centered content none of the familiar patterns (F-pattern, Z-pattern) can be applied. What do you think?

Update - example:

enter image description here enter image description here enter image description here

1
  • An screenshot or a sketch would help a lot. The question is also too generic: what do you mean, for instance, by “little content”? How many lines? What is the average length of the lines?... Aug 5, 2018 at 19:51

3 Answers 3

3

There is the 'classic' structure of typical business dashboards as you have described, and the patterns that are common for screen scanning can be applied. However, I think the scanning pattern is also influenced by how you structure and present the content on the screen, so it is a catch-22 in some ways depending on if you are creating a new design or modifying an existing one.

I think to provide a more complete answer you will need to fill some gaps, but in general my advice on dashboard design would be to consider some of the following points:

  • Blank, half-empty and full states: how will it look when the user sees it for the first time? What about when data is filling up, and also when the dashboard is completely full?
  • Purpose: for dashboards designed for decision-making (i.e. Business Intelligence) you need to avoid cluttering and highlight key information, so this could definitely affect your design and layout compared to a typical reporting or status tracking dashboard.
  • Widgets or visualization: depending on the number and type of 'widgets' used, there might be different alignment or layout strategies that are more appropriate than others.
  • Viewpoint: depending on the actual size of the screen and devices that you are designing for, knowing that on most desktop setups in the office have dual monitors and the scanning pattern would be compared to single monitors.

There are probably other factors too but I haven't really experienced or look into it yet.

UPDATE (based on the screenshots provided)

You'd have to test this of course, but just thinking about the basic principles of good design (simple and clear) you would be creating additional lines of alignment and causing the user to move their gaze across the screen more with a centre aligned layout compared to a full screen one according to your design

enter image description here

Now I would necessarily say that citing the principles of design would be enough evidence to support your claims, but a quick test with some people and see how much quicker it is to locate and find contents on the page would probably do the trick.

2
  • Thank you for the tips, @michael-lai! Your answer is useful, but it doesn't answer my question. I added some wireframes, I'm sorry if I wasn't very clear. I'd appreciate if you could take a look. I have a client that thinks small tables or boxes in the right side should be center aligned and I don't agree, but I don't have enough arguments against. Aug 6, 2018 at 4:22
  • @MadalinaTaina I have updated the answer based on the screen shot provided
    – Michael Lai
    Aug 6, 2018 at 22:24
1

When I looked at your images I asked myself which image I liked the most, and ended up picking the second one:

enter image description here

This design popped out more to me because of things like the space around the info-box in the center of the screen giving the element more prevalence over the other elements on screen. So that I know what I need to be looking at right when I come onto this screen.

Left aligning the bodies of text also makes them less distracting since, users will be concentrating more on the title and info-box which are center aligned.

This feels like an interesting take on the Rule of Odds.

Image 1 and 3 didn't appeal as much to me, mainly because they don't set the informational hierarchy. Something that image 2 did well.

6
  • 1
    +1 The issue with the lorem ipsum text is that we can't really evaluate how important the above and below text is, and naturally the table stands out more. But your other points are quite valid and helps to provide a balanced view to the discussion :)
    – Michael Lai
    Aug 7, 2018 at 21:54
  • 1
    @MichaelLai That is true, but shouldn't a designer be making sure that certain elements are more visible/important to the user, since, on average around 20% of text is read by user. I feel like even if it's lorem ipsum, some white space and better type wouldn't hurt. Aug 7, 2018 at 22:07
  • Sure, I think a designer generally is tasked to make certain elements more visible. And I agree that white space and better type helps, but the question is about the best alignment of the main container in the context where little content is displayed (and in a dashboard setting), so it is hard to tell what should be prioritized from the question. Hence I listed some factors and provided a response based on what I think would be the most easy design to scan.
    – Michael Lai
    Aug 7, 2018 at 22:10
  • 1
    I like the use and reference of composition principles in art/photography in your response though :)
    – Michael Lai
    Aug 7, 2018 at 22:11
  • your last two comments pretty just showed what's going on here. And I fell for it, hook, line and sinker. Take my upvote I say, take it. Aug 7, 2018 at 22:16
1

I am trying to approach this ‘bottom-up’. Instead of trying to find a layout that ‘looks good’, I will first consider some requirements on the content blocks.

The blocks of content in the main container should have something of a minimum and maximum width. For text, the lines should not be too short or too long, and tables should not be too narrow, or have overly broad columns with lots of whitespace.

So in actual answer to you question: don’t use the entire width for text (as in the screenshots), but fit all content in a column so that the text is easily readable.

Your second example seems to be the best one, but use a narrower text column. And if you justify the text, it will help to create an actual ‘column’. Tables do not have to follow its margins, but use the space they need to be clear. Even if that is wider than the text.

2
  • +1 I like your approach to the question, and since there has been some screenshots provided, perhaps you would like to update your answer as well?
    – Michael Lai
    Aug 6, 2018 at 22:25
  • @MichaelLai Thank you. The screenshots were already there, but I failed to address them. I have improved my answer.
    – user109724
    Aug 7, 2018 at 12:05

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.