What is the best alignment of the main container in a dashboard?

Question

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:

Answer 1

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

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.

Answer 2

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

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.

Answer 3

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.