Good UI/UX practices

Building Dashboards with shinydashboard

Png Kee Seng

Researcher

Some principles

  1. Be clear about the purpose of the dashboard
  2. Choose appropriate visualizations
  3. Use colors effectively/intuitively
  4. Truncate large values
  5. Avoid adding too many interactive elements
  6. Design the dashboard last
  • These points apply to any dashboard in general
  • The list is by no means exhaustive
  • Suggestions, rather than universal truths
Building Dashboards with shinydashboard

1. Be clear about the purpose of the dashboard

  • Who is the dashboard for?
  • What do they need to know?
  • A better understanding of user requirements will improve user experience $^1$
  • Scenario: Construct a dashboard for Sally
  • Purpose: Report the performance of her portfolio
1 François, Mathilde, et al. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552
Building Dashboards with shinydashboard

2. Choose appropriate visualizations

  • Pertains to individual visualizations but applies to a dashboard too
  • A dashboard is made up of many visualizations
  • What information will be useful to Sally?
  • Always a trade-off between accuracy and clarity
  • "The truthful art", by Alberto Cairo $^1$

Types of charts to use, according to Alberto Cairo.

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
Building Dashboards with shinydashboard

3. Use colors effectively/intuitively

  • Conventionally, some colors convey different meanings
  • Examples
    • Red usually denotes a warning or alert
    • Green usually denotes a success message
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Inappropriate color used for a success message.

Building Dashboards with shinydashboard

3. Use colors effectively/intuitively

  • Conventionally, some colors convey different meanings
  • Examples
    • Red usually denotes a warning or alert, and users will expect it to be so
    • Green, on the other hand, usually denotes a success message
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Inappropriate color used for a success message.

Appropriate color used for a success message.

Building Dashboards with shinydashboard

4. Truncate large values

  • Numbers can be presented in a shinydashboard
  • Will have to sacrifice some precision for clarity
    • Ought to round large numbers off
round(2.324815454862,2)

[1] 2.32

Untruncated values

Truncated values

Building Dashboards with shinydashboard

5. Avoid too many interactive elements

  • Be mindful about the number of interactive elements
  • Having too many such elements may confuse some users
  • More is not always better

Too much simulation is not good.

1 Image by Freepik
Building Dashboards with shinydashboard

6. Design the dashboard last

  • Don't rush into designing the dashboard
    • This includes wireframing, aesthetic design, etc.
  • First determine the purpose
    • This helps us choose appropriate visualizations
Building Dashboards with shinydashboard

6. Design the dashboard last

  • Don't rush into designing the dashboard
    • This includes wireframing, aesthetic design, etc.
  • First determine the purpose
    • This helps us choose appropriate visualizations

"Purpose: construct a dashboard for Sally."

  • She may want to see how her portfolio is performing
  • She may also want to track the performance of individual stocks
  • Now we can decide on their placements
Building Dashboards with shinydashboard

Let's practice!

Building Dashboards with shinydashboard

Preparing Video For Download...