User Interface (UI) design can make or break the <a href="https://appsilon.com/ux-design-of-shiny-apps-7-steps-to-design-dashboards-people-love/" target="_blank" rel="noopener">User Experience (UX) of your Shiny apps</a>. Learning to talk to the user in their language can help. It’s been nearly 30 years, yet Jakub Nielsen’s <a href="https://www.nngroup.com/articles/ten-usability-heuristics/" target="_blank" rel="nofollow noopener">10 usability heuristics for <strong>UI design</strong></a> still hold up as the backbone for <strong>good interfaces</strong>. Today I want to talk about principle 2 – Match between the system and the real world. The information should appear in the usual way for the user. Conditionally, this can be divided in: <ul><li><strong>Accordance to the mental model</strong></li><li><strong>The usual language</strong></li></ul> This is what helps the user readily find information and navigate an interface of any complexity. <h2>What is the mental model and how to apply it for UI Design?</h2> Let's perform a short exercise. Close your eyes and imagine how you see time moving. At the highest level of abstraction, we tend to have a high probability of indicating the past on the left, the future on the right, and the flow of time from left to right. This sinistrodextral (fancy term for reading left to right) view is often found in graphs and diagrams. <img class="wp-image-15726 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01cee824742cc351cf297_gantt-chart.webp" alt="Gantt chart showing date progression from left to right" width="558" height="381" /> Gantt chart showing date progression from left to right. By the same logic, one can define the positive as the top and bottom, respectively. This can be expressed in the Y axis as negative and positive values: <img class="size-full wp-image-15720" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01cefd57f969632cc6d89_axis-Y-as-negative-and-positive-values-user-define-interfaces-and-charts.webp" alt="Bar chart showing negative and positive values at bottom and up respectively " width="476" height="484" /> Bar chart showing negative and positive values at bottom and up, respectively. <img class="size-full wp-image-15732" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01cf0d554863d888db808_linear-chart-for-date-progression.webp" alt="Linear chart showing date progression from left to right and amount bottom to up" width="1024" height="730" /> Linear chart showing date progression from left to right and amount bottom to up. Here is a matrix for a general expression of the mental model: <img class="aligncenter wp-image-15734" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01cf3db456a59ff5ba1ae_matrix-for-general-expression-of-mental-model.webp" alt="matrix for general expression of mental model" width="400" height="417" /> Naturally, this matrix is somewhat unique to the western hemisphere, it is not universal and each culture has its own representation. It is therefore important to <strong>calibrate your presentation system according to the target user’s matrix</strong> before starting the design. <h3>Why is mental modeling important for UX design?</h3> Let me explain why mental modeling is important with a personal experience: A couple of years ago I was in Albania and needed to rent a car. I won’t name the brand to avoid making anti-advertisements, but it was a fairly modern vehicle. Being modern, one might expect similar design elements we're all accustomed to. <blockquote>Build a Shiny UI/UX with a familiar touch using Microsoft's Fluent library. Learn how with <a href="https://appsilon.com/shiny-ui-ux-with-short-live-coding-tutorial/" target="_blank" rel="noopener">Appsilon's {shiny.fluent} video tutorial</a>.</blockquote> This particular night, I was traveling on a windy, mountain road without any side lighting. I had to frequently switch from low beams to high and back again. Now, in this car, to turn on the high beams, I needed to pull a lever toward myself in order to see farther.  This minor detail with an inverted action had a tremendous effect on my safety. I had to rely on an unintuitive manual input (pulling the lever) over and over again in order to see the road ahead and push the lever back to avoid blinding oncoming cars.  But why did this happen? Let’s look at it. How do you show far to near? More likely than not, you'll do so with a hand gesture out and toward yourself, respectively. This view is basic and subconsciously processed. So in order to control the levers in this non-intuitive way, I had to tap into additional mental resources that were already being used to navigate unfamiliar terrain.  If we’re talking about a user interface, then such examples are rare where the result depends on the speed of the reaction.  As a rule, not matching the emotion matrix will increase the user interaction time with the system at best, and at worst, the user will leave. Let's look at typical user interface examples next.  <h3>Bad UI design: fighting logic in mental models</h3> <img class="wp-image-15724 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01cf30473cffa87836ba1_bad-UI-design-and-logic.webp" alt="bad ui design and logic of shiny dashboard" width="500" height="337" /> In this modal window, the target button is on the left, and the "cancel" is on the right. This order goes against the typical perception of procedures (for a western audience).  Think about how you sign documents or read a paper book: the target action, whatever it could be, put your signature or turn the page will always be on the bottom right corner as a logical end. This view is based on a study by the 1950s psychologists Paul Fitts and Charles Seeger, which reveals the essence of Stimulus-response compatibility. I recommend diving deeper into the concept here: <a href="https://www.nngroup.com/articles/natural-mappings/" target="_blank" rel="nofollow noopener">Natural matching and stimulus-response compatibility in user interface design</a>. <h3>Good UI design: flowing with logic in mental models</h3> A horizontal progress bar helps users assess where they are in current time and most importantly helps to estimate how much time is left before completing the task. By the way, some modern landings use horizontal direction instead of vertical for good storytelling or structure rethinking (e.g., <a href="https://www.kwokyinmak.com/" target="_blank" rel="nofollow noopener">Kwokyinmak</a>, <a href="https://canals-amsterdam.nl/" target="_blank" rel="nofollow noopener">Canals-amsterdam</a>, <a href="https://apchronicles.audemarspiguet.com/en/edutainment/royal-oak-a-journey-through-time" target="_blank" rel="nofollow noopener">Royal Oak</a>). <img class="size-full wp-image-15730" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01cf5508cc5c23320737b_horizontal-progress-bar-in-shiny-app.webp" alt="horizontal progress bar example" width="675" height="190" /> A common example of a horizontal progress bar. <h2>User language</h2> Terminology and voice of tone must be relevant to the user's expectation and level of experience. Otherwise, the user won’t understand what you are trying to say.  <h3>Why is it important</h3> The designer and developer are not equal to the user. I mean this in the sense that our expectations and knowledge of the system are wholly different. A common problem in the UI design process is the assumption that the end user knows the application as well as the designer/developer. This is never the case. <blockquote>Want beautiful, custom styling and layouts? <a href="https://appsilon.com/professional-shiny-app-ui/" target="_blank" rel="noopener">Try {imola} and {shiny.fluent} for professional Shiny app UI</a>.</blockquote> This problem stems from a higher level of familiarity with the workflow, UI, and hidden features underneath the hood. You might know the system in and out, but your knowledge doesn’t translate to your user - unless you’re a telepath.  We often find this mistake in error messaging: <h4>Bad error messaging</h4> <img class="wp-image-15722 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01cf63b68120d131b8a80_bad-message-error-UI-design.webp" alt="bad error message design" width="500" height="369" /> What we see here is unfriendly and meaningless for users. For developers, this might cut straight to the point and be insightful, but for the average user - it is not. Regarding the topic of error prevention, this message doesn't contain acceptable reasons and ways to resolve it from the user's perspective. <h4>Good error messaging</h4> <img class="wp-image-15728 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01cf83b68120d131b8b54_good-message-error-UI-design.webp" alt="good error messaging design" width="500" height="368" /> Here we see clear reasoning and friendly language for the user. And it provides ways to fix it. To sum up, keep in mind that your user doesn't have much time to figure out what’s going on and they don't share your experience. They want a quick solution to resolve the issue. When in doubt, explain it in the simplest way possible to address the lowest level user (i.e. explain it like I’m 5). This is a good time to address any shortcomings in your own understanding of the issue. <h2>Key takeaways for better User Interface Design</h2> Ignoring the emotion matrix will not have a critical effect in terms of creating apps, but may complicate their use and increase the cognitive resistance ratio. Conversely, understanding the user's mental model and application knowledge will give you the ability to make a solution that speaks to users in a native language and encourages adoption. <blockquote>Should you be using R for enterprise applications? Here are <a href="https://appsilon.com/why-you-should-use-r-shiny-for-enterprise-application-development/" target="_blank" rel="noopener">6 lessons for building Shiny apps</a>.</blockquote> Moreover, aligning with the user’s mental model gives you a credit of trust. It opens up the user’s ability to perform something complex when asked of them. They will recognize it as anticipation, not as an obligation. Do you know your user's mental model? Need help translating your data story to end users? <a href="https://appsilon.com/#contact">Reach out to the Shiny experts</a> and we'll show you how to improve your dashboards and applications.