Micro-interaction design in Figma - Dashboard Guide

Dashboard Mode - Micro-interaction design

Dashboard Goal

Understand how micro-interactions improve user engagement and feedback in a BI dashboard.

Sample Data: User Actions and Feedback

Action	Count	Success Rate (%)	Average Response Time (s)
Filter Applied	120	98	0.5
Drilldown Click	75	95	0.7
Export Data	30	100	1.2
Refresh Dashboard	50	99	0.8
Tooltip Hover	200	100	0.3

Dashboard Components

• KPI Card: Total Actions
  Formula: Sum of Count column = 120+75+30+50+200 = 475
• KPI Card: Average Success Rate
  Formula: Average of Success Rate = (98+95+100+99+100)/5 = 98.4%
• KPI Card: Average Response Time
  Formula: Weighted average by Count = (120*0.5 + 75*0.7 + 30*1.2 + 50*0.8 + 200*0.3)/475 ≈ 0.58 seconds
• Bar Chart: Actions Count
  Shows Count per Action category
• Line Chart: Success Rate Over Actions
  Shows Success Rate % per Action
• Tooltip Interaction
  Hover on bars shows detailed data: Count, Success Rate, Response Time

Dashboard Layout

+----------------------+-----------------------+
|  KPI: Total Actions  |  KPI: Avg Success Rate |
+----------------------+-----------------------+
|  KPI: Avg Resp Time  |                       |
+----------------------+-----------------------+
|                                              |
|          Bar Chart: Actions Count             |
|                                              |
+----------------------------------------------+
|                                              |
|      Line Chart: Success Rate Over Actions    |
|                                              |
+----------------------------------------------+

Interactivity

Hovering over bars in the Actions Count chart triggers tooltips showing detailed metrics for that action.

Clicking on an action bar filters the Line Chart and KPI cards to show data only for that action.

Refreshing the dashboard updates all KPIs and charts with the latest data.

Self Check

If you click on the "Filter Applied" bar in the Actions Count chart, which components update?

• The Line Chart updates to show Success Rate only for "Filter Applied".
• KPI Cards update to show metrics only for "Filter Applied".
• Tooltip shows detailed data for "Filter Applied" when hovering.

Key Result

Dashboard shows user action counts, success rates, and response times with interactive micro-interactions for detailed feedback.