Author: Joyce Zhou
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 the user's screen.
Let's consider creating a Kepion Dashboard as creating a website. Most websites have a fixed width, with white space filling in both sides if the browser is wider than the 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 first principle:
- Principle 1: Set the fixed width to the smallest screen size.
Our default dashboard page size is 1280 x 640, which will fit a 14-inch laptop screen in most cases. This means we have avoided the horizontal scroll-bar. Then next step is to avoid the horizontal bar within the form using our second principle:
- Principle 2: Narrow form-width to fit the dashboard.
We understand forms can grow very wide, but here are some tips to help narrow them down:
- Adjust column width
- Wrap text to give more height
- Adjust the form zoom ratio
- Move dimensions from row to filter
Which leads us to our third principle:
- Principle 3: Put one form in one page.
Scoping pages down like this tends to optimize the user experience. If you're also following the first two principles, at this point you should have only a single, vertical scroll-bar on the page.
That being said, sometimes it is better or necessary to put multiple forms within one page. In those cases, follow the fourth principle:
- Principle 4: The page should grow longer, not wider.
Lay out the forms vertically, and try to give all the forms full height so you will not need another vertical scroll-bar inside the form. In that case you will get a page very similar to the web-page shown in the beginning of the article. On a small screen it will look like the one shown below.
Another option for small screens is to avoid the page's vertical scroll-bar, and instead use the vertical scroll-bar within each form. This option is a good choice when smaller screens are more widely used in the client site, or when we have dynamic forms which start small, but have the potential to grow big. Below is the worst case page that a user would get.
Lastly, we need to also consider the purpose and usage of each Dashboard, respectively. Users may tend to use planning dashboards in the office where they have larger screens, while they may be accessing reporting Dashboards more often from their laptops. Remember, there's never a one-size-fits-all option when it comes to design, but hopefully these tips can help provide a good place to start.