UX Design of Shiny Apps: 7 Steps to Design Dashboards that People Love

Do you know that feeling of excitement when you open your favorite Shiny app? You have an important job to do, possibly with a tight deadline, but that Shiny dashboard has all the tools you need. They are organized, intuitive to use, and help you accomplish your goals fast and accurately. What about the opposite? Have you ever felt fed up when using an app just because there's no other option? Somehow everything feels wrong. Instead of getting actionable insights, you’re stuck trying to make sense of the interface, and completing a single task seems to take ages. These two very different scenarios actually boil down to one thing: the design of your Shiny UX. <b>If you’re in the business of developing decision-support tools that make an impact and empower your customers or data science teams, UX design can become your biggest ally</b>. Follow the 7 steps below to make sure your Shiny apps is not only user-friendly but also delivers a memorable experience the users will love. <ul><li><a href="#anchor-1" target="_blank" rel="noopener noreferrer">Start with the reason</a></li><li><a href="#anchor-2" target="_blank" rel="noopener noreferrer">Try pen and paper</a></li><li><a href="#anchor-3" target="_blank" rel="noopener noreferrer">Use ready solutions</a></li><li><a href="#anchor-4" target="_blank" rel="noopener noreferrer">Get inspired</a></li><li><a href="#anchor-5" target="_blank" rel="noopener noreferrer">Focus on data storytelling</a></li><li><a href="#anchor-6" target="_blank" rel="noopener noreferrer">Test, test, and then test some more</a></li><li><a href="#anchor-7" target="_blank" rel="noopener noreferrer">Look beyond UI</a></li></ul> <h2>Getting ready for a Shiny UX design adventure</h2> The first steps in the UX design sprint can be daunting. With so many options at your disposal, finding the right strategy for your Shiny app is no small feat. If you find yourself at a crossroad - take a moment to map the land. <h3 id="anchor-1">Step 1: Start with the reason</h3> Even if you believe your Shiny app idea is rock-solid, challenge yourself to fine-tune your vision and <b>map key user flows</b> long before you jump to development. When thinking about the right UX design for your Shiny app, start with these questions: <ul><li style="font-weight: 400;" aria-level="1">What is the main reason for building the app?</li><li style="font-weight: 400;" aria-level="1">Who are the users? </li><li style="font-weight: 400;" aria-level="1">What will the users accomplish with your app? What are their business goals?</li><li style="font-weight: 400;" aria-level="1">How have they done it so far? Are they already used to any particular tools or workflows?</li></ul> It’s important to have those answers first so that you <b>build the Shiny app around the main functionality and make sure the interface supports it</b>. Knowing who the users are will allow you to highlight the key information and hide or even skip all the rest. If you know exactly what the users need to accomplish, you will have no doubts about how to deliver the results: in a table, as a downloadable file, or in a graph. Seeing how the users accomplish that task now will give you a better understanding of the whole process or even point to a competitive advantage. Maybe the existing tools have some inefficiencies that your app can address? Or maybe some parts of the current solution can be reused to speed up user adoption and onboarding? <h3 id="anchor-2">Step 2: Try pen and paper</h3> Once you have the answers, you can move to the next step, but it’s not coding yet. It’s time for design. Even if you aren't a professional UX/UI designer, it’s still a great idea to first sketch your vision before you start app development. The reason is simple: <b>it’s much easier to redesign the wireframes than change the UI code</b>.  There are plenty of tools you can use to create wireframes and mockups (e.g. <a href="https://www.figma.com/" target="_blank" rel="noopener noreferrer">Figma</a>), but it’s really ok to start with just pen and paper. This old-school design method has many advantages: it’s quick, you don’t need to “learn the tool” and you can simply cut out the UI elements and move them around the page to see how they fit together. Don’t settle for the first design: experiment with it, ask the future users for feedback, and improve the design. <h3 id="anchor-3">Step 3: Use ready solutions</h3> You don’t need to be a front-end developer to create a compelling UI. There are plenty of tried & tested packages that will give your Shiny app a professional look. If you are building a business application, especially for the heavily Microsoft-oriented environment, you can use <a href="https://github.com/Appsilon/shiny.fluent" target="_blank" rel="noopener noreferrer">Appsilon’s shiny.fluent</a>. Looking for something less formal, but still neat and professional? Try our <a href="https://github.com/Appsilon/shiny.semantic" target="_blank" rel="noopener noreferrer">shiny semantic package</a>. <blockquote><strong>No time time to lose? This <a href="https://appsilon.com/shiny-ui-ux-with-short-live-coding-tutorial/">live coding tutorial can help you use shiny.fluent</a> to fast-track UI design.</strong></blockquote> <h3 id="anchor-4">Step 4: Get inspired</h3> If you struggle with the page layout, look for inspiration. Visit the websites you like and find easy ways to navigate to check how similar functionalities are resolved there. If you’re hungry for more use cases, you can browse <a href="https://demo.appsilon.com/" target="_blank" rel="noopener noreferrer">our Shiny demos</a>. Then you can also visit websites that you find annoying, or you just never seem to find the information you are looking for, and try to understand the underlying problem affecting user experience.  There are plenty of examples of beautiful apps on Pinterest. Just remember that <b>the interface design should support the goal of the app</b>: what works for one app, doesn’t necessarily have to be the best solution for a different one. If you need a more “formal” approach, there are some <a href="https://lawsofux.com/" target="_blank" rel="noopener noreferrer">principles in UX design</a> that a good user experience design should follow. It may be difficult at the beginning to follow all of them or even see the places in the app that break the rules, but don’t give up: try, test, and adjust. <h2>Shiny UX checkpoints to keep you on track</h2> By now, you should know your users inside out and have a clear vision of how to best address their needs. On the second stage of your UX design journey, you enter the domain of implementation and testing. <h3 id="anchor-5">Step 5: Focus on data storytelling</h3> R is great for data processing and analysis, with most Shiny apps including data visualization. Data visualization design is a broad topic, but there are a few key areas to consider to get you started. For each graph that you want to present in your Shiny app, answer those questions:  <ul><li style="font-weight: 400;" aria-level="1">What do you want to tell with the data?</li><li style="font-weight: 400;" aria-level="1">What is the context?</li><li style="font-weight: 400;" aria-level="1">Who is your audience?</li></ul> When you’re confident about your answers, you can move on to decide on the details. Choose the right type of graph, color, axis, and labels to make sure users can draw insights with minimal effort. <img class="aligncenter size-full wp-image-1792" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b020146bdc8f59ff8793c6_Case-studies-images-03.webp" alt="Sample Shiny dashboard" width="2466" height="1672" /> <p style="text-align: center;"><em>Sample Shiny dashboard. Notice how simple color coding can improve readability.</em></p> <h4>4 quick tips for data display</h4><ol><li>Graph typeIf the data is focused on changes in time - use a line graph. When the goal is to show the difference in levels for some categories - use a bar chart (and always remember to start the bar chart at 0!). </li><li>ColorsPick the colors wisely: too many colors can make your graph heavy on the eye and difficult to read. </li><li>AxesAdjust the axis to match the data: if the range is too wide, the variance in data will be difficult to spot. </li><li>LabelsWhen thinking about the labels, see if the exact value is important. If so, it’s good to have the label visible on the graph. But if the relation between the series is more important, you can hide the labels and improve the readability of the graph.</li></ol> <h3 id="anchor-6">Step 6: Test, test, and then test some more</h3> You probably know the concept of testing apps with unit tests. You may have also heard about performance testing and other types of technical tests, but did you know you can test your design as well? <a href="https://appsilon.com/user-tests-build-better-shiny-apps-with-effective-user-testing/" target="_blank" rel="noopener noreferrer">In-depth user interviews</a> are the best way to check if your Shiny app meets user expectations. They are longer sessions with the user where you ask the person to perform several tasks within the tool. This way you can see if there are any recurring problems with navigation or the general ease of use. Don’t worry if you’re short on time or resources: hallway tests are a fine alternative. Just ask your colleagues to use the app for 5-10 minutes and note their impressions. The good news is that testing the app design can come at any stage of the development process, even before it starts. You can use the wireframes or mockups and manually change the “screens” as the user “performs an action” in the app. Just remember not to leave testing for the last moment. When the app development is finished, rebuilding the UI will be costly. <h3 id="anchor-7">Step 7: Look beyond UI</h3> It’s easy to forget that user experience is not only about how the app looks, but also how it feels to interact with it. Go through the checklist below to give your Shiny app a head start: <ul><li style="font-weight: 400;" aria-level="1">Is the app design responsive? </li><li style="font-weight: 400;" aria-level="1">Does the user know what’s wrong when receiving an error message? </li><li style="font-weight: 400;" aria-level="1">Is the user well informed about the state of the app, e.g. when waiting for the calculation, is it clear when it will be finished?</li></ul> Mind you, this list is just a point of departure. The more complex the app and the user flow - the more UX touch-points to consider apart from the visual layer of the user interface. <h2>The UX design journey of your Shiny app is just about to begin...</h2> There is no one easy path to great UX. User experience design of a Shiny app is a complex process with many factors contributing to the final result. Brace yourself for a bumpy ride through layouts, formats, configurations, and color schemes. There is, however, one guiding principle that can help you stay on track. <b>If you always keep the users and their needs in mind, each design decision will come more naturally.</b> Don’t stop there: ask for feedback on each stage and implement changes accordingly. After all, you have a common destination: a lovable Shiny app. <h2>Professional Shiny UX for Enterprise Applications</h2> If you're searching for expert advice or need a PoC ASAP, reach out to Appsilon: the global leader in Shiny development. The Appsilon team has developed workflows and frameworks to rapidly deliver industry-leading R Shiny applications with enterprise designs. Our developers have created many <a href="https://shiny.tools/" target="_blank" rel="noopener noreferrer">open source Shiny packages</a>. You can find solutions to your design questions using our open-source design tools from <a href="https://github.com/Appsilon/shiny.semantic" target="_blank" rel="noopener noreferrer">shiny.semantic</a> (with 6000+ downloads) to our latest <a href="https://github.com/Appsilon/shiny.react" target="_blank" rel="noopener noreferrer">shiny.react</a> and <a href="https://github.com/Appsilon/shiny.fluent" target="_blank" rel="noopener noreferrer">shiny.fluent</a>. Be sure to star your preferred packages and stay updated with versions. <a href="https://github.com/Appsilon" target="_blank" rel="noopener noreferrer"><img class="aligncenter wp-image-7839 size-medium" src="https://wordpress.appsilon.com/wp-content/uploads/2021/08/appsilon-shiny-ux-packages-600x398.png" alt="appsilon shiny ux packages" width="600" height="398" /></a>