良好的 UI/UX 实践

使用 shinydashboard 构建仪表板

Png Kee Seng

Researcher

一些原则

  1. 明确仪表板的目的
  2. 选择合适的可视化
  3. 高效/直观地使用颜色
  4. 截断大数值
  5. 避免过多交互元素
  6. 最后再设计仪表板
  • 以上适用于任何仪表板
  • 清单并不详尽
  • 是建议而非定律
使用 shinydashboard 构建仪表板

1. 明确仪表板的目的

  • 仪表板面向谁？
  • 他们需要了解什么？
  • 更好地理解用户需求将改善用户体验 $^1$
  • 场景：为 Sally 构建一个仪表板
  • 目的：报告其投资组合的表现
1 François, Mathilde, 等. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552
使用 shinydashboard 构建仪表板

2. 选择合适的可视化

  • 虽针对单个可视化，但同样适用于仪表板
  • 仪表板由多个可视化组成
  • 哪些信息对 Sally 有用？
  • 准确性与清晰性总有取舍
  • Alberto Cairo 的《The Truthful Art》$^1$

Alberto Cairo 给出的图表类型建议。

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
使用 shinydashboard 构建仪表板

3. 高效/直观地使用颜色

  • 约定上，不同颜色传达不同含义
  • 例子
    • 红色通常表示警告或提醒
    • 绿色通常表示成功信息
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

把成功信息用了不合适的颜色。

使用 shinydashboard 构建仪表板

3. 高效/直观地使用颜色

  • 约定上，不同颜色传达不同含义
  • 例子
    • 红色通常表示警告或提醒，用户也会如此预期
    • 绿色则通常表示成功信息
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

把成功信息用了不合适的颜色。

把成功信息用了合适的颜色。

使用 shinydashboard 构建仪表板

4. 截断大数值

  • 可以在 shinydashboard 中展示数值
  • 为清晰起见需牺牲些许精度
    • 大数值应做四舍五入
round(2.324815454862,2)

[1] 2.32

未截断的数值

截断后的数值

使用 shinydashboard 构建仪表板

5. 避免过多交互元素

  • 留意交互元素的数量
  • 过多会让部分用户困惑
  • 多不一定更好

过多的交互并不好。

1 Image by Freepik
使用 shinydashboard 构建仪表板

6. 最后再设计仪表板

  • 不要急于设计仪表板
    • 包括线框图、美观设计等
  • 先确定目的
    • 有助于选择合适的可视化
使用 shinydashboard 构建仪表板

6. 最后再设计仪表板

  • 不要急于设计仪表板
    • 包括线框图、美观设计等
  • 先确定目的
    • 有助于选择合适的可视化

"目的：为 Sally 构建一个仪表板。"

  • 她可能想查看其投资组合的整体表现
  • 也可能想跟踪单只股票的表现
  • 现在可决定它们的布局位置
使用 shinydashboard 构建仪表板

Passons à la pratique !

使用 shinydashboard 构建仪表板

Preparing Video For Download...