Dashboard Size

By - Jun 26, 2015

When designing a dashboard, the first yet very difficult thing to decide is the dashboard size. Too many scroll bars within one page can be annoying. Therefore our target is to minimize the scroll bars on users screen.

We consider creating a Kepion dashboard as creating a website. Most websites have a fixed width, with white space filling both sides if the browser size is wider than the fixed width, as shown below.

When the browser size is narrower than the fixed width, users will normally see a horizontal scroll bar. Therefore we have our Principle 1: Set the fixed width to the smallest screen size. Our default dashboard page size is 1280 * 640, which will fit a 14-inch laptop in most cases. Now we have avoided the page horizontal scroll bar. Then next step is to avoid horizontal bar within the form using Principle 2: Narrow form width to fit the dashboard. We understand form can grow really wide, but try to narrow down the width by:

  1. Adjusting column width;
  2. Wrapping texts by giving more heights;
  3. Adjusting form zoom ratio;
  4. Moving dimension from row to filter if there are too many dimensions on the row header.

We prefer (Principle 3) putting one form within one page to optimize the user experience. If also following Principle 1 and 2, we will have at most one vertical scroll bar on the page.

To provide contexts, sometimes it is better to put multiple forms within one page. In this case, follow the Principle 4: page should grow longer, not wider. Layout the forms vertically, and try to give all the form full height so you will not need vertical scroll bar in form. In this case you will get a page very similar to the webpage showed in the beginning of the article in big screen. In small screen it will look like the one shown below.

Another option is to stick with a small screen to avoid page vertical scroll bar, but display the vertical scroll bar within each form. We choose this option when smaller screen is most widely used in the client site, or when we have dynamic forms which starts small but has the potential to grow big. Below is a worst case page that user will get.

Also we need to consider the purpose and usage of dashboard respectively. Users may tend to use planning dashboards in the office where they have big screens while accessing reporting dashboards mostly from their laptops. If this is the case, we can set different dimensions for these dashboards.