As part of our <a href="https://appsilon.com/data-for-good/" target="_blank" rel="noopener">Data for Good</a> (D4G) initiative, we collaborated with the <a href="https://www.idpan.poznan.pl/?utm_medium=referral&amp;utm_source=appsilon&amp;utm_campaign=futureforests-blog" target="_blank" rel="nofollow noopener">Institute of Dendrology</a> of the Polish Academy of Sciences to build a Shiny application with an enhanced UI. This application - <strong><a href="https://futureforests.appsilon.com/" target="_blank" rel="noopener">Future Forests</a></strong> - shows how different climate scenarios will affect European forests. It provides a sobering look into the future, where our forests and other ecosystems will face drastic changes. In the next 50 years, some tree species might completely disappear from parts of the continent. Some species will migrate or face a significant decrease in suitable habitat, while others may increase. The alternate scenarios may invite alien species and irrevocably change the landscape. <a href="https://connect.appsilon.com/future-forests/" target="_blank" rel="noopener">The Shiny app lets users explore European tree </a>responses to shifting environmental conditions caused by the climate crisis. It offers three different climate change scenarios presented in the <a href="https://onlinelibrary.wiley.com/doi/abs/10.1111/gcb.13925" target="_blank" rel="nofollow noopener">research</a> – optimistic, moderate, and pessimistic. But as highlighted in a <a href="https://appsilon.com/accessible-research-with-r-shiny/" target="_blank" rel="noopener">previous article</a>, our dashboard doesn’t resemble the average Shiny app. That is because of the design choices made during development, ensuring that the research message is clearly shown to the users. TOC: <ul><li><a href="#iteration-1">Iteration 1 - Shiny prototype</a></li><li><a href="#iteration-2">Iteration 2 - Focus on the data</a></li><li><a href="#iteration-3">Iteration 3</a></li><li><a href="#iteration-3_5">Iteration 3.5</a></li><li><a href="#FFUI">Breaking down Shiny UI design with Future Forests</a></li></ul> <hr /> <h2>Visualizing scientific research findings with Shiny</h2> The purpose of the Future Forests dashboard is to translate years of complex research for the general public. This research, performed by domain experts, was shared in the traditional scientific form of peer-reviewed publications. But scientific articles are often challenging to consume, even for the academically initiated. Shiny offers researchers a chance to bridge the gap and share findings in a friendly, consumable manner. By opening the door to research and inviting the public to engage, we increase awareness and extend knowledge sharing.  Applications and dashboards are not meant to water down findings, but rather to focus and guide interpretations. With Shiny, we strive to use compelling and interactive visualizations to clearly and succinctly show what the data is telling us. When you explore the Future Forests app, what story do you discover in the data? <h2>The path to a Shiny UI</h2> Shiny proof of concepts and boilerplate-type builds are relatively easy to create. But pushing the design of any web app is not an easy task. What you see in Future Forests is the result of several iterations and thoughtful planning. <blockquote><a href="https://appsilon.com/shiny-application-layouts/" target="_blank" rel="noopener">Shiny application layouts are changing</a>. Are you up to date?</blockquote> <h3 id="iteration-1">UI Iteration 1 - Shiny prototype</h3> The base prototype showed four map tiles (one for each scenario) on the screen for a selected tree species. It had a very rudimentary UI, but it did contain a colorblind mode. This colorblind mode carried over to the final iteration. <img class="wp-image-17370 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01c267a92f47f6998f8a7_future-forests-iteration-1.webp" alt="Future Forests Shiny app first iteration with four split screen map view" width="900" height="482" /> Pros: <ul><li>A solid foundational building block for what comes next</li><li>Accessibility; contains colorblind functionality used in later iterations</li></ul> Cons: <ul><li>The amount of simultaneous maps shown makes it difficult to compare changes</li><li>Users lose focus of the data story</li></ul> <h3 id="iteration-2">UI Iteration 2 - Focus on the data</h3> This iteration was built on the previous version, but with a more robust UI and tree selector. It still contained multiple scenarios displayed, but the focus shifted away from the scenarios to the tree species. <img class="wp-image-17372 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01c272e07d803bce58c94_future-forests-iteration-2.webp" alt="Future Forests Shiny app UI iteration 2 with dark background" width="900" height="472" /> Pros: <ul><li>Scenario selection; reactive map changes per scenario or tree selected</li><li>A visually engaging way to select trees as well as information for each tree; response to scenarios, species information, etc.</li><li>Detailed information for outcomes; Retraction, Expansion, and Overlap</li></ul> Cons: <ul><li>The tree selector consumes space on the dashboard</li><li>Selecting via images doesn't add a lot of value as not all tree species are easily identified by image</li><li>The UI is too dark</li><li>The visual accessibility feature was lost as some colors don't work on a dark background</li></ul> <h3>UI Iteration 3.5 - Finding success with Shiny</h3> Iteration 3 was an early take on what would become the final design. It has a consolidated and simplified UI. Tree species are selected independently of the climate scenario and only one future scenario is visible on the screen at one time.  <h4 id="iteration-3">Iteration 3</h4> <img class="wp-image-17374 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01c29d57f969632cbe10a_future-forests-iteration-3.webp" alt="Future Forests Shiny app UI redesign iteration 3" width="900" height="490" /> It showcases the criteria selection (tree species, climate scenarios) embedded into the header, which also describes what we see on the map. We found this to be a very elegant, yet intuitive solution to save space and still maintain full control over the different parameters the users can choose from. <h4 id="iteration-3_5">Iteration 3.5</h4> <img class="aligncenter wp-image-17376" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01b69a597077171bb81be_future-forests-iteration-4.webp" alt="Future Forests UI redesign final iteration" width="900" height="422" /> Pros: <ul><li>A more inviting, less cluttered UI with a managed information hierarchy </li><li>Flippable cards enable us to share more information without overwhelming the user</li><li>Text selector reduces the need for having a string somewhere as the selector itself shares the context; saving space and decluttering the UI</li><li>The above ‘pro’ makes it possible to have more controls on the map, which opens opportunities for the UX</li><li>Visual accessibility features and translation were returned</li></ul> Cons: <ul><li>Load time is an issue given a more complex functionality in the app</li></ul> <h3>Features of the Future Forest Shiny app</h3><ul><li style="font-weight: 400;" aria-level="1"><b>Accessibility</b>: A colorblind mode for visual aid</li><li style="font-weight: 400;" aria-level="1"><b>Localization</b>: The app supports Polish and English languages</li><li style="font-weight: 400;" aria-level="1"><b>Shareability</b>: Social media share is implemented as prefilled intents (try sharing on Twitter!)</li><li style="font-weight: 400;" aria-level="1"><b>Map Layers</b>: Layers can be toggled (labels, borders, and a Polish forest layer)</li><li style="font-weight: 400;" aria-level="1"><b>Modern Selection</b>: The selectors read like a sentence, reducing the need for additional explanation</li></ul> <img class="alignnone size-full wp-image-17073" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01c2a96d382f5b9cd8398_displaying-scientific-data-in-color-blind-accessible-colors.gif" alt="displaying scientific data in color blind accessible colors after toggling viridis leaflet map input" width="550" height="852" /> <h2 id="FFUI">Breaking down Shiny UI design with Future Forests</h2> <h3>Identifying the problem(s)</h3> In previous versions of the app, what we came across was congestion. The app showed everything, all at once. And that’s stressful for the user. It doesn’t elicit the behavior we want for an engaging, learning experience.  This stress triggers two subconscious actions - run or freeze. Running is expressed in bounce rate. A user will enter the app, become frustrated, and leave. Freezing means that a user pauses with a delayed time to understand. This can be expressed in a number of ways, but most likely a combination of longer session times with aimless user behavior. Both lead to cognitive load and negative perception, and ultimately, failed adoption. <h3>Remove visual noise and sharpen focus</h3> To resolve this congestion, first, we trim. Instead of a tree-species carousel and split screens, add selectors in the control panel. Instead of 4 scenarios, display one. In doing these things, we can declutter the visuals and create focal points. Additional declutter: <ul><li style="font-weight: 400;" aria-level="1">The legend moved to the card</li><li style="font-weight: 400;" aria-level="1">Switching languages ​​and information about the application moved to the header</li><li style="font-weight: 400;" aria-level="1">All other interactive elements that were scattered on the screen are now organized into the right vertical panel on the map. Here is also the color blindness option for people with visual disabilities, as the main focus of the application is on the color ratio on the map</li><li style="font-weight: 400;" aria-level="1">"languages" and "about" moved to the top</li></ul> <blockquote>Custom UI can be challenging. Try these <a href="https://appsilon.com/professional-shiny-app-ui/" target="_blank" rel="noopener">open-source options for building professional Shiny UIs</a>.</blockquote> <h3>Priority of selection - text instead of image</h3> In order to optimize user interaction, we simplified the interaction with the selector. We moved away from image-based selections to text, based on ‘hallway’ tests of the app.  <img class="size-full wp-image-17178" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01c2baebaad0dba40fa4d_Early-UI-Version-of-Future-Forests.webp" alt="first future forest trees design received from the design team - making scientific data exploration accessible with shiny" width="600" height="400" /> Initial dashboard design received from our design team. To support this text-based approach, we included a sentence as a contextual guide in the filter panel. <h3>Cut back time to analyze by giving outputs</h3> We have found that presenting information in a processed form, like a photo with a current status displayed by default and a graph on the back, is more effective than serving raw data. This approach allows users to quickly access and understand the key points, while still providing more detailed information for those who want it. <img class="size-full wp-image-17071 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01c2c832c47d67310773c_displaying-future-forest-models-on-shiny-mobile-app.gif" alt="displaying future forest models on Shiny mobile UI" width="384" height="798" /> &nbsp; <h3>Optimizing user flow</h3> <h4>Entry point</h4> To engage a wider audience and bring important information to users, we created a landing page as the point of entry to the app. The landing page presents information in a simple and straightforward manner, using numbers and facts to explain why this is a problem worth paying attention to. This approach helps to capture the attention of users and draw them into the app, where they can learn more about the topic. <h4>Exit point</h4> To promote information dissemination and user involvement, we have included the ability to share content on social media as an exit point from the app. This allows users to easily share the information they have learned with their networks and spread awareness about the topic. By providing users with an easy way to share content and engage with others, we can help to extend the reach of the research and its impact. <h2>Future Forests and the power of Shiny UI</h2> Quickly building Proofs-of-Concept is one of Shiny’s best selling points. Its beginner-friendly and rich ecosystem of open-source R packages make it a great launching pad for completing and sharing research. And as we’ve seen with the Future Forests case study, improving design elements in subsequent iterations can transform a PoC into a powerful, educational tool. A well-designed user interface can open research to a much wider audience.  The final iterations of Future Forests are strong examples of how UI design and Shiny development can help tell the story of data in an engaging and accessible way. Shiny lets you move from static pdfs of scientific reports and posters to interactive web apps.  You’ve spent countless hours monitoring, collecting, analyzing, and interpreting; so why limit the reach of your work? Try Shiny to communicate your findings. Promote your work and engage wider audiences. Let users explore, interact, and discover new insights. Don’t limit your work - design accessible research with Shiny! Curious if R Shiny is right for you? We've shared <a href="https://appsilon.com/why-you-should-use-r-shiny-for-enterprise-application-development/">6 lessons for Shiny app development for enterprises</a> to help others in their production journey.