Freshwater Dashboard - Importance of UI/UX for R Shiny Applications

Estimated time:

time

min

In today's world, where freshwater 💧 scarcity is a pressing issue, having a comprehensive understanding of freshwater availability and access is important for making informed decisions and planning sustainable water usage. To address this need, the team at Appsilon has developed a powerful R Shiny dashboard under our <a href="https://data4good.appsilon.com/" target="_blank" rel="noopener"><b>Data4Good initiative</b></a>, using <a href="https://appsilon.github.io/rhino/" target="_blank" rel="noopener"><b>Rhino</b></a> as a backbone. This dashboard incorporates intuitive UI and UX elements to empower users and enable them to effortlessly explore freshwater data 📊.

By leveraging the <a href="https://tableau.apps.fao.org/views/AQUASTATDashboard/country_dashboard?%3Aembed=y&%3AisGuestRedirectFromVizportal=y" target="_blank" rel="noopener"><b>AQUASTAT Database</b></a> and several cutting-edge packages built in-house and by the community, such as <a href="https://www.anatomyofcode.com/imola/" target="_blank" rel="noopener"><b>imola</b></a>, <a href="https://echarts4r.john-coene.com/" target="_blank" rel="noopener"><b>echarts4r</b></a>, <a href="https://rstudio.github.io/leaflet/" target="_blank" rel="noopener"><b>leaflet</b></a>, and <a href="https://dreamrs.github.io/shinyWidgets/" target="_blank" rel="noopener"><b>shinyWidgets</b></a>, this dashboard offers a simple yet value-added design. It provides a global view of freshwater availability indicators, thereby aiding end users in making informed decisions and planning for a better future.

<h2>User Interface (UI) Design for Shiny Applications</h2>
<h3>Layout</h3>
The dashboard maintains a simple and to-the-point structure, dividing the layout into two parts:

<ul><li aria-level="1"><b>Navbar: </b>We chose to use a navbar instead of a sidebar approach to maximize horizontal space for the dashboard's body. The navbar facilitates easy identification of important elements for the user. By placing <b>static elements</b> such as the logo and title on the left, and <b>interactive elements </b>like the tab name, info button, and contact button on the right, a clear separation is created, resulting in a clean and minimalistic appearance.</li><li aria-level="1"><b>Body: </b>This is where the magic happens. Body is tab-name specific. For the sake of simplicity & relevance, the dashboard is single pager and has <b>2 charts</b> and <b>1 map</b> along with <b>filters</b> to control them. Each component (chart/map) is wrapped in a <b>card</b>, enhancing the visual separation from the background. More details on this are provided below.</li></ul>
<img class="aligncenter size-full wp-image-20941" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01a48ef34dd9b4d0fa188_freshwater-shiny-dashboard-user-interface-user-experience.webp" alt="freshwater shiny dashboard user interface user experience" width="1106" height="600" />
<h3>Info Button - About Section</h3>
The navigation bar includes an info button that serves as an "About" section for enhanced user understanding. When the user clicks the button, it triggers a comprehensive information display about the dashboard. The provided details encompass the dataset used, the technologies utilized, and the purpose of the dashboard. This feature empowers users and helps them navigate the dashboard effectively.

<img class="aligncenter size-full wp-image-20937" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01a4aa862659a10c11d75_about-section-for-Shiny-applications-or-dashboards.webp" alt="about section for Shiny applications or dashboards" width="844" height="600" />

This has been achieved with <b>shiny::showModal()</b> and <b>shiny::modalDialog()</b>, content is completely custom made using personalized div and css.
<h3>Collapsible Filters - Continent & Country</h3>
To optimize the screen space available, we implemented collapsible filters using <b>shinyWidgets::dropdown()</b>. By clicking on the ‘gear’ button, users can expand the continent and country filters, simplifying the process of selection and filtering. The collapsible design ensures a clutter-free and organized layout, keeping users focused on the relevant data and charts.

For filters, we utilized <b>shinyWidgets::pickerInput()</b>, which offers a wide range of options such as limiting the max selection, live search functionality, and the ability to set window size.

<video width="100%" height="auto" src="https://wordpress.appsilon.com/wp-content/uploads/2023/09/shiny-widgets-for-r-shiny-dashboard-ux.webm" loop="true" autoplay="true" controls="true"></video>

The <b>gear button is draggable</b>, users can position it anywhere on screen. This feature was achieved using <b>shiny::absolutePanel()</b>.

Users can select one continent at a time, and <b>by default, the top five countries based on per capita water availability indicators are pre-selected</b>. This thoughtful default selection ensures a clean and informative trend chart display. Additionally, users can manually <b>select up to eight countries</b>, providing flexibility while still maintaining a manageable visualization.
<h3>Interactive Trend Charts in Shiny</h3>
The dashboard features two trend charts that allow users to monitor the availability of renewable freshwater resources per capita and the percentage of the population with access to safe drinking water. These charts cover a span of five decades, from 1964 to 2018, providing a historical perspective on freshwater availability indicators.

<video width="100%" height="auto" src="https://wordpress.appsilon.com/wp-content/uploads/2023/09/interactive-trend-charts-in-r-shiny-and-python-for-shiny.webm" loop="true" autoplay="true" controls="true"></video>

The use of interactive elements like legend selector, tooltip & axis selectors within the charts allows users to zoom in, select specific data points, and gain deeper insights. To accomplish this, we utilized the <b>echarts4r </b>package which offers an extensive variety of functions like <b>e_line()</b>, <b>e_legend()</b>, <b>e_x_axis()</b>, <b>e_y_axis()</b>, and <b>e_tooltip()</b>. These functions make it straightforward for developers to easily create interactive charts and graphs. Parameters like <b>animationEasing </b>and <b>animationDuration </b>in<b> e_line() </b>provide a more engaging animation for trend lines. By combining these with <b>Rhino</b>’s modular architecture, we have developed results in a scalable and reusable code base.
<h3>Interactive Map in Shiny</h3>
The dashboard features a <b>leaflet</b> map that visually presents geospatial freshwater indicators (separate draggable filter provided) for each country in 2018. By clicking or hovering on individual countries, users can access detailed information about their freshwater availability and access. This interactive map facilitates a global overview while also allowing users to zoom in and explore specific regions of interest.

[video width="816" height="216" mp4="https://wordpress.appsilon.com/wp-content/uploads/2023/09/interactive-map-in-shiny.mp4" loop="true" autoplay="true"][/video]

The dashboard also offers a feature for <b>base map selection</b>. Users can choose to view <b>satellite imagery</b>, open street map (<b>OSM</b>) and <b>toner map</b> (dark and light mode). Additionally, an option to view the map in <b>full screen mode</b> is provided, allowing users to compare the complete globe based on the selected indicator. This feature enhances the user experience by providing flexibility and customization in map visualization.

<img class="aligncenter size-full wp-image-20939" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01a4b3519a56046b4dea6_basemap-selection-for-shiny-dashboards.webp" alt="basemap selection for shiny dashboards" width="961" height="600" />
<h2>Bonus - Mobile View📱</h2>
By combining the capabilities of <b>Rhino</b>, <b>echarts</b>, and <b>leaflet</b> with the <a href="https://www.anatomyofcode.com/imola/" target="_blank" rel="noopener"><b>imola</b></a> package developed by one of our staff engineers, businesses can conveniently access the Freshwater Dashboard on mobile devices, enabling quick insights even on the go. <b>Imola</b> provides a custom breakpoints mechanism, allowing applications to be compatible with different screen sizes. This supports <b>responsive design,</b> which is a key element in modern app design.

<img class="aligncenter size-full wp-image-20945" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01a4d94ab187560d70e28_mobile-view-of-r-shiny-application.webp" alt="mobile view of r shiny application" width="365" height="600" />

Furthermore, the layout of the dashboard was constructed using <b>imola</b>, further demonstrating the versatility and effectiveness of this package.
<h2>UX - Principles vs Reality 🧑🎨</h2>
By incorporating these UX concepts and implementing them effectively, this R Shiny dashboard provides an intuitive and user-friendly experience. Users, including business professionals, can seamlessly navigate through the dashboard, explore the data, and extract valuable insights.

This empowers them to make informed decisions and effectively plan for sustainable water usage. The dashboard's user-centric design ensures that users can access and utilize the data with ease, contributing to their ability to make impactful choices in addressing freshwater scarcity and promoting sustainable practices.
<h3>Minimal Cognitive Load and Information Hierarchy</h3>
The dashboard maintains a minimalist design approach, emphasizing essential information while reducing cognitive load. By showcasing only the most relevant charts, maps, and filters, users can concentrate on the key indicators without being overwhelmed by unnecessary details.

The inclusion of collapsible filters for continents and countries further enhances the clean and uncluttered interface. This design choice enables users to swiftly locate and interact with the required elements, contributing to a seamless user experience.
<h3>Discoverability and Learnability:</h3>
The dashboard prioritizes discoverability and learnability, enabling users to intuitively explore and comprehend its features. By incorporating <b>familiar UI elements</b> such as trend charts and interactive maps, the dashboard aligns with users' existing mental models and reduces the learning curve. This approach ensures that users can quickly understand and navigate the dashboard, enhancing their overall experience and facilitating effective data exploration.
<h3>Contextual Feedback and Visual Cues</h3>
To enhance usability, the dashboard provides contextual feedback and visual cues that guide users through their interactions. For example, when users select a country on the map, relevant information is displayed, providing immediate feedback on their action.

Interactive elements, such as hovering over data points or zooming into specific time periods in the trend charts, provide real-time visual cues that help users understand the available actions and their consequences.
<h3>Flexibility and Customization</h3>
The dashboard offers flexibility and customization options to accommodate diverse user preferences and needs. Filters on map and charts are draggable and can be placed anywhere allowing users to create more space for analysis.
<h3>Visual Appeal and Data Visualization Best Practices</h3>
The dashboard harnesses data visualization best practices to ensure clarity, coherence, and visual appeal. The use of the <b>echarts4r</b> package enables the creation of interactive and visually engaging charts that effectively communicate the trends and patterns in freshwater availability and access. Usage of <b>e_theme()</b> helps in maintaining consistency of style and color palette throughout the dashboard.
<h3>Consistency and Familiarity:</h3>
Consistency plays a crucial role in UX design, enabling users to navigate and interact with the dashboard effortlessly. The dashboard maintains consistency by adhering to standard UI conventions, such as the placement of navigation elements, filters, and buttons, which align with users' existing mental models.

This consistency in design patterns and interactions across different components fosters familiarity, reducing cognitive load and enhancing overall usability. By providing a consistent user experience, the dashboard promotes ease of use and ensures a seamless journey for users as they navigate through its various features.
<h3>Contextual Help and Information:</h3>
The inclusion of the info button on the navigation bar exemplifies the concept of contextual help. By providing comprehensive information about the dashboard, dataset, and technologies used, users can access relevant information without leaving the interface. This contextual help feature enhances the user's understanding of the dashboard's purpose, promotes transparency, and enables users to interpret the data effectively.

The R Shiny dashboard for tracking global freshwater availability is designed to be user-friendly and informative. It incorporates intuitive UI and UX elements, making it easy for users, including business professionals, to explore data trends, make informed decisions, and plan for a better future. The dashboard emphasizes usability, transparency, and comprehensive insights, empowering individuals to contribute to better water management practices. By fostering a positive impact on the planet and promoting a sustainable and water-secure future, this dashboard plays a crucial role in promoting responsible water usage 🙏.
<h2>Design Your Success 🗣️</h2>
Our <a href="https://data4good.appsilon.com/" target="_blank" rel="noopener">Data4Good initiative</a> is all about using data science for positive change. Join us in exploring the potential of applied data science solutions. Check out our<a href="https://demo.appsilon.com/" target="_blank" rel="noopener"> advanced data dashboards</a>, computer vision, and AI solutions. To learn more about Data4Good projects and how we can collaborate, get in touch with our <a href="https://data4good.appsilon.com/#form" target="_blank" rel="noopener">Data4Good Team</a>.