Skip to content

[zz]Dashboards Design Tips


Dashboards Design Tips


Here are some tips we collected over the years about dashboard design:

Page Layout

  • Less is more – don’t put too many views in the page.
  • Rule of thumb – no more than five reports in one page.
  • Don’t use scrolling – the average user won’t scroll down the screen.
  • Position in screen – some researches made about this subject and here are the recommendations:
    • Top-Left – it’s the part of the screen that the user looks at first. Put there the most important data.
    • Center of the screen – the part the user looks after the top-left. Put there the second-most important data.
    • Top-Right, Bottom-Left – Neutral parts.
    • Bottom-Right – The user won’t pay attention to it, don’t put there important data.
  • Fixed menus in every page.
  • Small amount of navigation targets in every page. Too much navigation paths will cause confusion.
  • Concentrate on the main page – in 90% of the cases the user will stay there.
  • Add graphic components and highlight them if necessary.
  • Blue color only to links (and underline, of course).

Views Layout

  • Two digits after the decimal point – in non-integer number, put
    only two digits after the decimal point. The human mind can’t
    understand more than that.
  • Focus on the clarity of the data and not only on its beauty. For
    example, 3D pie charts are very beautiful, but flatting them will make
    them more clear to the user.
  • Measures have meaning only when compared to other data. Don’t put stand-alone measure.
  • Pay attention to graphical change between the data and not only colors. Remember that there are color-blind users.
  • Text is more clear than icons.
  • Use the San Serif and Arial fonts. They are the most readable to the user.
  • Align the text only to one side and not to the middle. It seems
    better to programmers, but users want their text aligned to the left or
    to the right.
  • Colors – don’t use too much color. The dashboard page is not a jungle. Use colors of the same family.
  • Put dark text on bright background the vise versa.

And to conclude – use CSS whenever you can. It will save you much time and effort.

No comments yet


Fill in your details below or click an icon to log in: 徽标

You are commenting using your account. Log Out /  更改 )

Google+ photo

You are commenting using your Google+ account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )


Connecting to %s

%d 博主赞过: