Why it is Okay to Scroll

Why you should consider including the feature of ‘scrolling’ in your next web application, especially dashboards.

Saves Loading Time

When you open a dashboard, it takes considerable amount of time to load up the landing page — only the landing page (first tab). And, every time you want to open a new tab, it again loads the data for that particular tab. This happens for every new tab that you want to open.

But, when you increase the height of the page— it might take you additional time to load the first page, but you save plenty of time trying to load each and every new page.

Reduces additional Decision making

Every time a person wants to open a new tab, he needs to process the information in his mind — if he wants to open the new tab or not. Which implies that the designer wants the user to make a decision every single time he/she wants to open the tab.

Instead, if the page was scroll-able, he doesn’t have to think twice before scrolling. It saves that time for the user to decide if he wants to take the decision of opening a new tab. And when the user scrolls, he automatically sees the information instead of having to make the decision to see it. So, this way the information is automatically subjected to him — which could be beneficial.

Avoids Redundant information

When we introduce tabs and hidden panels to avoid scrolling, we sometimes tend to repeat the information. We feel the need for the users to see some important key metrics in every single tab to understand the rest of the information better.

Repeating the information makes the dashboard heavier than it needs to be and at the same time increases the data load time. So, by having all the key metrics and information on one page with the feature of scrolling, we are reducing this additional space and load time.

Increase in tabs/pages = Increase in anxiousness

When the user sees the number of tabs at the start of a application, it unintentionally overwhelms him/her. The more the number of pages, the more information he realizes needs to be comprehended, the more anxious he gets. Also, the information in each every tab being hidden increases the anxiety of the user.

But, when the user scrolls, he doesn’t have time to get anxious or think about how much information is there for him to process.

Users are used to Scrolling

Dashboard is nothing but a web application. And, most web applications are made scroll-able. So, users are used to scrolling! This is the precise reason why Macbook removed the scroll bar because it is obvious to the user that they can scroll a webpage.

So, having a scroll-able dashboard will not come as a shock to the user, because most web applications are scroll-able.

Responsive Design

When you are designing a tab layout or a panel layout, you have to take into consideration designing for different platforms. If there are multiple tabs, you need to find a way to wrap it as the screen gets smaller. The design for various screen sizes needs to be different. This becomes very tedious as many different layouts need to be designed. Also, the script becomes more complex which in turn increases the dashboard load time.

But, with a scroll-able dashboard, the design can be kept uniform for all sizes because the height of the web page is infinite across all platforms. This wonderful aspect helps the designer to just have one uniform design and reduces the script — which in-turn means less load time.

Touch Sensory Appeal

Scrolling has a bigger sensory appeal than tapping in different areas of the screen repeatedly — because it is easier. It is related to a certain user interaction touch element where it is easier to keep swiping down or scrolling on your mouse. Where as, shifting your gaze every single time and clicking on the tabs reduces the pleasantness of the user interaction.

Eliminates Design Choices

When you’re designing tabs or panels, you start thinking about how they should look and feel. Now, this takes considerable amount of decisions to be made such as:

• Where should the tabs or panels be placed
• What should the animation be — when they are about to be clicked, and when clicked
• What should the colors be
• How should the panels feel when clicked
• Should the tabs or panels have a border and if so, what color and how thick
• What should the titles be
• What should the font, size and color of the text be
• How do I center align this text, both height and width wise!! — always a problem across different screen sizes

Occupies real estate

The space that can be used for useful information such as Key metrics, charts, filters., etc will have to be used for tabs or hidden panels. And, the layout needs to be adjusted accordingly every time a hidden panel pops out. So, much extra script — yet again!

Some trade-offs

• By eliminating pages, the load time increases for that one page because, the amount of data increases
• If the page is too long, it can get confusing and time consuming when the user is trying to search for a particular information
• There will be no footers available immediately which might make the designer to place the breadcrumbs or other such things else where
• The header is likely to disappear as we keep scrolling
• Exporting or printing the dashboard as a powerpoint slide might give the users an awkward design
• Some traditional dashboard users might get confused and annoyed with the new design

Overcoming the trade-offs

• A chart or key metric title can be placed at regular intervals to guide the user to spot a particular thing
• If we have multiple panels below, the panel headers can be slightly placed onto the landing page to make it obvious to the user that there are additional panels available if they scroll down. Also, hovering over the panel can make the panel pop-up to make it a little more inviting for the user.

• The header and footer can be made static-on-scroll — so, it is available when they scroll up or down
• The dashboard can be exported or printed as a PDF

When should you not include scrolling

• When the application is being used to represent a snapshot of what you want the users to see
• To minimize the loading time as soon as you open the application
• When you want to segregate the content for the users — by using tabs
• If the application doesn’t have to be responsive across multiple platforms
• When there is not much content to be displayed

I hope this article inspires you to create your next dashboard or web application with the feature of scrolling.

If so, please recommend it.

If you have any questions or additional comments to add to this article, please leave them in the comments below.

Also, do follow me on Medium or my YouTube Channel to get a design related article or video every week. Thank you.