Design Summary
The UI frame presents account analytics data in a dark mode theme. While the overall layout is clean and the interactive elements are generally clear, there are significant issues with data interpretation, particularly in the graphs. The use of multiple Y-axes without clear labeling and the reliance on color alone to convey meaning in both charts severely impact usability and accessibility.
Design Frame
Run Your Own Audit in Figma
Install Yo for FigmaBlue and red bar segments in 'Follows over time' graph
In the 'Follows over time' graph, the blue and red segments of the bars are used to represent different data points without any accompanying legend or text explanation. This makes the graph inaccessible and incomprehensible for color-blind users and confusing for all users.
💡 Recommendation:
Add a clear legend to the 'Follows over time' graph to explain the meaning of the blue and red bar segments, and consider using patterns or textures in addition to color for better accessibility.
First bar chart (Replies and Impressions graph)
The first bar chart, showing 'Replies' and 'Impressions', uses two Y-axes with different scales (0-40 on the left and 0-100K on the right) without clear labels indicating which axis corresponds to which data series. This makes it difficult to accurately interpret the data.
💡 Recommendation:
Clearly label each Y-axis to indicate which data series it represents, or consider combining the data onto a single, normalized axis if appropriate, or separate the graphs.
Second bar chart (Follows over time graph)
The second bar chart, 'Follows over time', uses blue and red segments within its bars without any accompanying legend or text explanation to clarify what each color represents (e.g., new follows vs. unfollows).
💡 Recommendation:
Add a clear legend to the 'Follows over time' graph to explain the meaning of the blue and red bar segments.
Colored lines next to 'Replies' and 'Impressions' dropdowns
In the first bar chart, the association between the blue and green bars and the 'Replies' and 'Impressions' metrics is primarily indicated by small colored lines next to the dropdowns. This relies heavily on color perception and could be problematic for color-blind users.
💡 Recommendation:
Provide alternative indicators for data series in the graph beyond just color, such as patterns, distinct icons, or explicit text labels, to improve accessibility for color-blind users.
Y-axis labels on both graphs
The numerical labels on the Y-axes of both graphs (e.g., '0', '10', '20', '30', '40' and '0', '25K', '50K', '75K', '100K') are quite small, which might make them difficult to read for some users, especially on smaller screens or for those with visual impairments.
💡 Recommendation:
Increase the font size of the Y-axis numerical labels to improve readability.
Calendar icon next to '7D' button
The calendar icon positioned next to the '7D' button is not interactive itself, but its placement might suggest it's a clickable element to open a date picker. This could lead to minor confusion about its functionality.
💡 Recommendation:
Either make the calendar icon interactive to open a date picker, or remove it if it serves no functional purpose to avoid misleading users.