You decided you want to build a <a href="https://explore.appsilon.com/shiny-demo-gallery" target="_blank" rel="noopener">Shiny</a> dashboard to bring your data to a specific set of users. In your mind, this dashboard will be a crucial tool to help them solve their problems. However, you are afraid that it might be left unused. How can you build a Shiny dashboard that your intended users will adopt and that will help them approach problems in a data-centric way?

Below are some best practices on how you can build effective and user-centric Shiny dashboards.
Table of Contents:
<ol><li><a href="#1">Know your Users</a></li><li><a href="#2">Minimize Conceptual Debt</a></li><li><a href="#3">Allow for Exploration</a></li><li><a href="#4">Provide an Interactive Experience</a></li><li><a href="#5">Keep a Consistent and Coherent Design</a></li><li><a href="#6">Guide Visually</a></li><li><a href="#7">Fit to the Screen</a></li><li><a href="#8">Reduce Text Blocks</a></li><li><a href="#9">Perform User Tests</a></li></ol>

<hr />

<h2 id="1">Know Your Users</h2>
A dashboard needs to serve a purpose. It must cater to the needs of its users. One way to <a href="https://appsilon.com/reasons-why-shiny-user-adoption-fails/" target="_blank" rel="noopener">ensure a dashboard will fail</a> is to make it unusable for its intended users.

Before you build a dashboard, know your users.

Answer these questions first: Who are the intended users? What problems do they want to solve? How do they intend to solve it with data? Knowing these will ensure that the dashboard you want to build will have users. It will also emphasize the business value the dashboard will provide. Knowing how the users plan to attack the problem will also give a hint on how to design and what to showcase in the dashboard.

&nbsp;

However, knowing more about your intended users might reveal that a dashboard is not the best tool for the problem. This is good, because you have saved time and resources from building an ineffective tool. By knowing your users, you either build a dashboard that will serve them, or build a more effective tool. 

Knowing your users will also clarify some of the technical details for the dashboard: How many users should the dashboard support? How many concurrent users should it handle? What browsers should be supported? What kind of devices and screen sizes should the dashboard fit? 

This is the essential first step and everything in this list must emanate from knowing your users.
<h2 id="2">Minimize Conceptual Debt</h2>
Users will use your dashboard if it is intuitive for them to use it. To build an intuitive dashboard, keep the conceptual debt as low as possible.

<a href="https://medium.com/all-things-product-management/conceptual-debt-is-worse-than-technical-debt-5b65a910fd46" target="_blank" rel="noopener">Conceptual debt</a> is the difference between how users think the app works versus how the app actually works. Dashboards with high conceptual debts can cause a lot of confusion to users because what they expect is not what they get. In short, a dashboard with a high conceptual debt is not an intuitive tool.

For example, say you have an interface where users can specify inputs and a button that users must click to apply these inputs. If users change the inputs and report that nothing is happening, then they expect that changing the inputs should be enough to trigger a change or an update. This should prompt you that the button can be removed, it may be redundant, or it can be made more apparent to the users that they must click it to apply their inputs.

A high conceptual debt can make the dashboard unusable. However, users may also adapt their mental model on how the dashboard works. As a developer, you will now have a problem of continuing support for the confusing feature. This is bad news for new users because they will have to hurdle the initial confusion of using the dashboard.

Knowing your users will help you minimize the conceptual debt of your dashboard. Ask them what they expect from the dashboard. Study the tools they are currently using and find out what familiar concepts you can adapt to your dashboard. Empathize with your users. Build a dashboard that will adapt to their mental model rather than a dashboard that will force them to change the way they think.

This may sound like a lot of work, and you are not yet building a dashboard yet. However, an intuitive dashboard has a lot of benefits. Users will use your dashboard more because they know how to use it. New users will also learn faster because the dashboard just makes sense for them. As a developer, you can focus on adding more intuitive features in the future instead of supporting or fixing a confusing functionality.
<h2 id="3">Allow for Exploration</h2>
The dashboard you will build should not limit the user perspectives but to expand it. The data limits them on what they can conclude, but the dashboard should allow users to consume and digest the data into an insight they could not have made without it. Your dashboard should encourage exploration.

Data can be presented either as <a href="https://susielu.com/data-viz/storytelling-in-dashboards" target="_blank" rel="noopener">explanatory or exploratory</a>. For explanatory, the creator has full control over what the data will tell: the conclusion is static. For exploratory, the user has full control of what the data will tell: the conclusion is dynamic.

Knowing your users again becomes crucial in building an app that supports exploration. Different users have different ways to interact with the data. Who are the users? What do they want to see? How do they want to tell their stories? An executive may only want to see quarterly and annual KPIs. The head of sales may want to view monthly data. Managers may only want to view metrics specific to their team. Someone from human resources may want to access the performance breakdown of every employee. 

The users should have the ability to ask why, and with a few clicks on the dashboard, get closer to the answer.
<h2 id="4">Provide an Interactive Experience</h2>
Users will engage and will explore more when they know they can interact with your dashboard.

A dashboard with an interactive user experience encourages more exploration, more conclusions, more possible problems that can be solved.

If the dashboard only shows static data visualizations, this will limit the users on how they can tell a story from the data. A data visualization that allows a user to remove or highlight certain categories is more engaging than a static one. A user can learn more by changing which column in a table the data should be sorted, or by filtering out specific values from the table.

R offers a lot of packages to create interactive plots (e.g. <a href="https://plotly.com/r/" target="_blank" rel="noopener">plotly</a> and <a href="https://echarts4r.john-coene.com/" target="_blank" rel="noopener">echarts4r</a>) and tables (e.g. <a href="https://rstudio.github.io/DT/" target="_blank" rel="noopener">DT</a> and <a href="https://glin.github.io/reactable/index.html" target="_blank" rel="noopener">reactable</a>). <a href="https://shiny.rstudio.com/articles/reactivity-overview.html" target="_blank" rel="noopener">Reactivity</a> in Shiny offers a lot of possibilities in making your dashboard interactive.
<h2 id="5">Keep a Consistent and Coherent Design</h2>
A good-looking dashboard is more likely to be used than the same dashboard that is painful to look at. 

Beauty is relative, but you already know your users right? A dashboard should look as familiar and as attractive as possible to your intended users. As a default, you may want to stick with the company colors and fonts. However, if you have the freedom to use a different set of colors and fonts, do so while still keeping in mind your users’ preferences.

Shiny provides a lot of ways to design your dashboard. You can choose from one of Appsilon’s OpenSource packages to create a consistent and coherent design. For a fresh, modern, and highly interactive look try <a href="https://appsilon.github.io/shiny.semantic/" target="_blank" rel="noopener">shiny.semantic</a> and <a href="https://appsilon.github.io/semantic.dashboard/articles/intro.html" target="_blank" rel="noopener">semantic.dashboard</a>. For users who are already familiar with and prefer the Microsoft UI,  try <a href="https://appsilon.github.io/shiny.fluent/" target="_blank" rel="noopener">shiny.fluent</a>. For a beautiful and professional look, try <a href="https://appsilon.github.io/shiny.blueprint/index.html" target="_blank" rel="noopener">shiny.blueprint</a>. Templates are just the beginning. A Shiny dashboard’s appearance can be customized more through CSS.
<h2 id="6">Guide Visually</h2>
An intuitive dashboard should not only be easy to use, but it should also be easy to understand. Your users should know how to interact with your dashboard, but do they know how to “read” through the dashboard?

You can use <a href="https://www.verywellmind.com/gestalt-laws-of-perceptual-organization-2795835" target="_blank" rel="noopener">principles to group elements</a> and <a href="https://www.interaction-design.org/literature/article/preattentive-visual-properties-and-how-to-use-them-in-information-visualization" target="_blank" rel="noopener">techniques to highlight</a> the important parts of your dashboard. If two data visualizations support each other, then maybe they should be side-by-side. A supporting table and insight may be smaller beside the main and bigger data visualization. If you have multiple sections, make it clear to the user in which section they are. Add a space between sections, use a different background color for each section, or put section headings. Emphasize a department’s trendline by making it red and the others gray.

Since you already know your users, you may already know the direction they read, e.g. from left to right, downwards versus up and down from the right. Whichever it may be, it is a good idea to put what is the most important to the users in the first area they will tend to look at.  The direction they read should also be the direction the story progresses. If you want to showcase annual values in a bar chart, then break it down to a monthly trendline, and finally a table of weekly values, make sure that the users will look at these elements in the same order.
<h2 id="7">Fit to the Screen</h2>
Users will find the dashboard easier to read if everything they need to see fits in their screen. 

As much as possible, avoid forcing users to scroll through the dashboard. Fit everything within the screen without showing too much information or too many stories at the same time. If there are multiple stories, separate these into sections. Fit each section within the screen. 

Different devices and screen sizes can make the layout a bit challenging and maybe fitting all united elements in one screen is just not possible. Consider using tabs. Hide supporting elements in tabs to emphasize the most important subject and encourage exploration at the same time. Maybe one page is just not enough. With Shiny and <a href="https://appsilon.github.io/shiny.router/" target="_blank" rel="noopener">shiny.router</a>, you can provide different URLs to your dashboard views.
<h2 id="8">Reduce Text Blocks</h2>
If you have to explain in detail what you are showing, then you must improve the way you are showcasing the data, not adding blocks of explanatory text.

Dashboards should optimize the use of space. Data visualizations are the most common way to showcase and summarize insights. Data tables can provide support and add more details. Text can also clarify some insights about the data. However, too much text is not good for your dashboard. They occupy too much space and visually provide very little information.

Still, text can help users understand data visualizations better. Keep the text as minimal as possible. Keep titles and subtitles short but informative. If a long explanation or detail is unavoidable, hide it behind an information icon as a tooltip.

Since your visualizations are interactive and encourage exploration, add tooltips at strategic elements of your charts. This keeps the text and extra information hidden but easily accessible when needed. Tooltips, when used properly and accordingly, can clarify or provide more information about the purpose of every element in your dashboard.
<h2 id="9">Perform User Tests</h2>
User tests help verify not only your assumptions, but also the assumptions of your users. It brings your dashboard to a truly effective tool for its users.

Dashboards should serve its purpose to its intended audience. Most of the time, it is difficult to create the perfect, not to mention the effective, dashboard the first time. You may have tried to know your users, but it is always good to check if the dashboard is indeed what the users need.

You may have thought that a data visualization is easy to understand, but users may find it confusing and dull. Users might have wanted only one visualization, but they may realize that converting it to two visualizations will showcase the data and insights better.

Feedback from users are important, but feedback from fellow developers are also crucial and may even highlight important improvements that are not apparent to the main users. A fresh perspective, an eye that has not seen the dashboard and does not know how it works, can reveal if the dashboard is really effective.

Create an initial version of your dashboard. Seek feedback from the users and fellow developers. Incorporate their feedback into the next version of your dashboard. Keep repeating this process until the dashboard fully satisfies the needs of the intended users. This process is well suited for dashboards built with Shiny because you can create and keep improving your dashboard at speed. Maintaining and building a high-quality and enterprise grade Shiny dashboard at this rate without a structure can be difficult, so consider the <a href="https://appsilon.github.io/rhino/" target="_blank" rel="noopener">Rhino framework</a> when building your dashboards.
<h2 id="10">Conclusion</h2>
Dashboards are a great solution to bring data to the users’ fingertips. However, no matter how well designed the dashboard is for you, if your users say otherwise, then you can expect either low or no adoption at all. 

When it comes to building dashboards, always put the users first. Know what they need. Understand their mental process on how they want to consume the data. A dashboard will only be effective if its users know how to use it. A dashboard will have a long life if users enjoy using it.
<h3>References for Shiny Dashboard Best Practices</h3><ul><li style="font-weight: 400;" aria-level="1"><a href="https://appsilon.com/reasons-why-shiny-user-adoption-fails/" target="_blank" rel="noopener">https://appsilon.com/reasons-why-shiny-user-adoption-fails/</a></li><li aria-level="1"><a href="https://appsilon.com/user-tests-build-better-shiny-apps-with-effective-user-testing/" target="_blank" rel="noopener">https://appsilon.com/user-tests-build-better-shiny-apps-with-effective-user-testing/</a></li><li style="font-weight: 400;" aria-level="1"><a href="https://susielu.com/data-viz/storytelling-in-dashboards" target="_blank" rel="noopener">https://susielu.com/data-viz/storytelling-in-dashboards</a></li><li style="font-weight: 400;" aria-level="1"><a href="https://www.domo.com/domopalooza/resources/the-joy-of-stories-how-to-turn-your-data-into-happy-little-masterpieces#/" target="_blank" rel="noopener">https://www.domo.com/domopalooza/resources/the-joy-of-stories-how-to-turn-your-data-into-happy-little-masterpieces#/</a> (First 22.5mins of the video only)</li><li style="font-weight: 400;" aria-level="1"><a href="https://medium.com/all-things-product-management/conceptual-debt-is-worse-than-technical-debt-5b65a910fd46" target="_blank" rel="noopener">https://medium.com/all-things-product-management/conceptual-debt-is-worse-than-technical-debt-5b65a910fd46</a></li><li style="font-weight: 400;" aria-level="1"><a href="https://www.verywellmind.com/gestalt-laws-of-perceptual-organization-2795835" target="_blank" rel="noopener">https://www.verywellmind.com/gestalt-laws-of-perceptual-organization-2795835</a></li><li style="font-weight: 400;" aria-level="1"><a href="https://www.interaction-design.org/literature/article/preattentive-visual-properties-and-how-to-use-them-in-information-visualization">https://www.interaction-design.org/literature/article/preattentive-visual-properties-and-how-to-use-them-in-information-visualization</a></li></ul>