Sales Reporting Dashboard
The interface effectively integrates filter controls with a line chart and detailed data table, facilitating a comprehensive view of sales metrics. However, it could improve usability by enhancing visual hierarchy, reducing clutter, and making interactive elements and data more visually distinguishable and accessible.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast2
Content Readability & Clarity5
Visual Consistency, Imagery & Media2
Navigation & Structure1
Conversion & Actions1
Tone, Friendliness & Delight4
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness3
Strategic DesignRecommended Fixes by Impact
0Critical
8Major
16Moderate
4Minor
Table columns and rows misalignment especially in nested rows
Major
Visual Consistency, Imagery & Media
The Problem
The hierarchical rows (e.g. Shopper and Booker/Exchanger) have indentation that causes some column content to be misaligned, making it harder to follow the data across the table horizontally.
Why it Matters
Misalignment reduces readability, increases mistake risk, and makes it difficult for users to compare data points accurately.
How to Fix
Improve indentation styling ensuring nested rows keep column text aligned vertically with parent rows or use horizontal grid lines with clear cell boundaries.
Issue Highlights
Primary navigation hidden behind hamburger menu
Major
Navigation & Structure
The Problem
The main navigation is collapsed into a hamburger menu on the left with no visible labels or options, requiring extra user action to access primary navigation.
Why it Matters
Users may not immediately find the main navigation, causing confusion and delay in accessing key sections of the application.
How to Fix
Consider expanding the primary navigation or adding visible labels to improve immediate discoverability.
Issue Highlights
No Clear Primary Action Button Visible
Major
Conversion & Actions
The Problem
The dashboard or report interface does not show any visible primary call-to-action button such as 'Apply Filters', 'Update Report', or 'Export Data' that indicates how to proceed after making selections in filters.
Why it Matters
Users may be uncertain how to execute or confirm their filter selections to update the report view, leading to confusion or abandoned tasks.
How to Fix
Add a prominently styled, clearly labeled primary action button like 'Apply Filters' near the filter controls to guide users in updating the report contents.
Issue Highlights
Multiple dropdown filters increase interaction steps
Major
Efficiency & Cognitive Load
The Problem
The UI presents at least five dropdown filters (Buying Channel, Commercial Classification, Metric for Line Chart, Metric for Table, Row for Table) that require multiple selections, increasing the number of steps to generate the report.
Why it Matters
Users must perform multiple selections across several dropdowns, increasing the effort and time to filter the report, potentially causing frustration or abandonment.
How to Fix
Consolidate filter options where possible or provide smart defaults and presets to reduce the number of user interactions.
Issue Highlights
No Clear Call to Action to Proceed After Filtering
Major
Flow & States Completeness
The Problem
The UI shows multiple filter dropdowns and metric selections but lacks any explicitly highlighted button or link to apply filters or move forward with the selected parameters.
Why it Matters
Users may be uncertain how to update the report view after changing filters, which can cause confusion and prevent progress.
How to Fix
Add a clearly visible and labeled action button such as 'Apply Filters' or 'Update Report' near the filter controls to indicate how to proceed.
Issue Highlights
Inconsistent Behavior for Metric Selection Dropdowns
Major
Strategic Design
The Problem
The line chart metric selector and the table metric selector both allow multiple selections but do not clearly indicate if multiple metrics affect both visualizations or just one. This ambiguous interaction pattern can confuse users about what data is shown where.
Why it Matters
Users might expect these selectors to be coordinated or independent, and confusion can lead to incorrect report interpretations.
How to Fix
Clarify the relationship between metric selectors with labels or tooltips, or redesign so one selector clearly controls both visualizations or each only controls its respective output.
Issue Highlights
No visible active state or breadcrumb to indicate current location
Major
Orientation Missing (Environment/Role/Location)
The Problem
The interface lacks any visible highlight, breadcrumb, or indication of the current report or section the user is viewing.
Why it Matters
Users can become disoriented about where they are within the app, reducing confidence and ease of navigation.
How to Fix
Add an active state highlight or breadcrumb trail to provide clear context of current location in the app.
Issue Highlights
Date Filter Usability Issue: Custom Date Selection is Minimal and Ambiguous
Major
Strategic Design
The Problem
The date filter section uses a segmented control with 'Standard' and 'Custom' but the 'Custom' mode shows only a single selected date without clear interface to pick a range or multiple dates, which is counterintuitive for custom date filters.
Why it Matters
Users expecting to select custom periods might be unable to do so or unaware how to change the selection, limiting report customization.
How to Fix
Implement a clearer custom date range picker with visible start and end dates and calendar icons. Provide instructions or placeholders to clarify usage.
Issue Highlights
Date format ambiguity in Selected Period
Moderate
Ambiguous Date/Time/Timezone
The Problem
The date '05/05/2019' is shown in day/month/year format without clarification of format or timezone, which may confuse users from different locales about the actual date intended.
Why it Matters
Ambiguous dates can lead to misinterpretation of report periods and errors in decision-making based on incorrect assumptions about the date.
How to Fix
Include explicit date format (e.g., DD/MM/YYYY) or use an unambiguous format like '5 May 2019'. Add timezone context if dates are time-sensitive.
Issue Highlights
Low Contrast for Grey Table Text on White Background
Moderate
Color & Contrast
The Problem
The grey text used in the table cells (e.g., 'B2C RLD', 'Retail', 'e-Retail') appears to be low contrast against the white background, likely below WCAG AA minimum contrast ratios for normal text.
Why it Matters
Low contrast text can strain users' eyes and make it difficult for users with low vision or color vision deficiencies to read the data clearly.
How to Fix
Increase the text contrast by using a darker grey or black text color for table cells, ensuring a contrast ratio of at least 4.5:1 for normal text as per WCAG AA guidelines.
Issue Highlights
Grey Text in Legend Has Insufficient Contrast
Moderate
Color & Contrast
The Problem
The grey text in the chart legend (e.g., 'Gross Sales Last Year') is low contrast against the white background, likely below WCAG AA for normal text.
Why it Matters
Users with low vision or color deficiencies may struggle to read legend labels, making it difficult to understand the chart data.
How to Fix
Use a darker grey or black color for legend text to improve contrast and readability.
Issue Highlights
Poor distinction between section headers and controls
Moderate
Content Readability & Clarity
The Problem
The text for section headers like 'Report Filters' and 'Date Filters' is not visually distinct enough from the dropdown labels and options, resulting in a flat hierarchy that makes it harder to quickly scan and differentiate sections.
Why it Matters
Users may struggle to quickly understand the grouping of filters and controls, reducing ease of use and efficiency.
How to Fix
Increase font weight, size, or color contrast for section headers compared to form labels and controls to establish a clearer visual hierarchy.
Issue Highlights
Line chart legend labels misaligned with chart lines
Moderate
Visual Consistency, Imagery & Media
The Problem
The legend labels 'Gross Sales' and 'Gross Sales Last Year' are positioned above the chart lines but do not align vertically with the line start points, causing confusion.
Why it Matters
Misalignment between legend labels and chart lines can confuse users trying to understand which line represents which data series quickly.
How to Fix
Align the legend labels vertically with their corresponding line start points or place the legend in a clear and consistent location relative to the lines.
Issue Highlights
Unlabeled tree expand/collapse icons in table
Moderate
Visual Consistency, Imagery & Media
The Problem
The tree expand/collapse toggles next to date and category rows in the table are icons with no labels or tooltips visible, which may confuse users about their purpose.
Why it Matters
Without labels or tooltips, users might not understand how to interact with the table to expand or collapse data groups.
How to Fix
Add clear labels, alt text, or tooltips to the expand/collapse icons to clarify their function.
Issue Highlights
Small tap targets on dropdown arrow icons
Moderate
Accessibility & Input Ergonomics
The Problem
The dropdown arrow icons next to 'Buying Channel', 'Commercial Classification', 'Select Metric For Line Chart', 'Select Metric For Table', and 'Select Row For Table' appear small, likely under the recommended 44x44 CSS pixels for touch targets.
Why it Matters
Small touch targets are harder to tap accurately, especially on mobile or touchscreen devices, increasing the likelihood of user input errors and frustration.
How to Fix
Increase the size of these dropdown arrow icons or expand their clickable area while keeping the icons visually smaller.
Issue Highlights
Low Contrast for Placeholder Text in Dropdowns
Moderate
Color & Contrast
The Problem
Placeholder text inside dropdown menus such as 'Multiple selections' is shown in light grey, which has low contrast against the white background, likely below WCAG AA standards.
Why it Matters
Low contrast placeholder text may be hard to read, hindering users' ability to understand or interact with the filters effectively.
How to Fix
Use a darker grey or black color for placeholder text within dropdowns to meet minimum contrast ratios for readability.
Issue Highlights
Multiple filters and selection options crowded in small space
Moderate
Navigation & Structure
The Problem
The left panel contains numerous dropdown selectors tightly grouped with small spacing which can cause misclicks or difficulty in navigation.
Why it Matters
Users may find it hard to select the correct filter or setting easily, leading to frustration and inefficiency.
How to Fix
Increase spacing between dropdowns and group related filters more distinctly for easier scanning and interaction.
Issue Highlights
Small target size of tab toggle buttons 'Standard' and 'Custom'
Moderate
Accessibility & Input Ergonomics
The Problem
The toggle buttons labeled 'Standard' and 'Custom' appear visually small, likely below the recommended minimum tap target size.
Why it Matters
Small toggle buttons can cause difficulty for users to select accurately, leading to frustration or errors.
How to Fix
Increase the size or padding of these toggle buttons to meet minimum touch target standards.
Issue Highlights
Dropdown select inputs lacking clear visible labels nearby
Moderate
Accessibility & Input Ergonomics
The Problem
Some dropdown inputs such as those for selecting metrics and rows for the table have placeholder text but lack distinct visible labels. This could confuse users about the purpose of each input.
Why it Matters
Without visible labels, users may have difficulty understanding what each dropdown controls or selects.
How to Fix
Add visible labels adjacent to each dropdown instead of relying solely on placeholder text.
Issue Highlights
Redundant Date Filter Template Selection
Moderate
Efficiency & Cognitive Load
The Problem
The Template selection for date filters (Standard vs. Custom) requires a separate decision before selecting or viewing the period, which may confuse users and adds an extra step.
Why it Matters
Forcing users to switch between template types before selecting a date period creates an unnecessary decision point, increasing interaction complexity.
How to Fix
Combine Template and Period selection into a single, clearer control or auto-select the most common template to streamline date filtering.
Issue Highlights
Lack of Visual Hierarchy in Filters Section
Moderate
Strategic Design
The Problem
The filters on the left and top (Buying Channel, Commercial Classification, Select Metric) have similar visual weight and low contrast between sections, making it hard to quickly differentiate filter groupings or understand the main action.
Why it Matters
Users may confuse or overlook key filters, slowing their ability to customize reports efficiently.
How to Fix
Use stronger visual grouping distinctions such as background shading, borders or spacing, and emphasize primary filters with bolder text or icons to create clear separation.
Issue Highlights
Missing Confirmation or Warning for Negative Discount Value
Moderate
Tone, Friendliness & Delight
The Problem
The table includes a negative discount value (-2,672) with no visible confirmation or explanatory message, which might confuse users or cause mistrust about data accuracy.
Why it Matters
Users may be unsure whether a negative discount is an error or intentional, reducing their confidence in the data and decisions based on it.
How to Fix
Add an explanatory tooltip or warning message near negative discount values to clarify their meaning and encourage user trust.
Issue Highlights
No Progression or Export Option After Report View
Moderate
Flow & States Completeness
The Problem
Once the report displays data, there is no visible option to export data, save the report, or navigate to related actions.
Why it Matters
Users may reach this report and have no clear next step to use or share the information, reducing the actionable value of the report.
How to Fix
Provide obvious options such as 'Export CSV', 'Download PDF', 'Save Report', or navigation to next relevant screens.
Issue Highlights
Toggle buttons 'Standard' and 'Custom' too close
Moderate
Accessibility & Input Ergonomics
The Problem
The 'Standard' and 'Custom' toggle buttons are closely positioned horizontally with minimal spacing, which may increase the risk of accidental taps on the wrong button.
Why it Matters
Close placement of clickable elements can cause selection errors, especially on small touchscreens or for users with limited motor precision.
How to Fix
Add more horizontal spacing or padding between the 'Standard' and 'Custom' toggle buttons to reduce accidental taps.
Issue Highlights
Confusing emphasis on ‘Template :’ label
Minor
Content Readability & Clarity
The Problem
The label 'Template :' uses a dark background with white text, resembling a button or selectable tab, which is inconsistent with other form labels and may confuse users whether it is a label, clickable control, or active state.
Why it Matters
This may slow user comprehension as the role of this label is ambiguous compared to adjacent controls.
How to Fix
Use consistent styling for labels and controls, and differentiate active buttons/tabs clearly from labels.
Issue Highlights
Line chart missing Y-axis units clarity
Minor
Visual Consistency, Imagery & Media
The Problem
The Y-axis has currency symbols ('£') but lacks a clear axis label describing the metric (like Total Sales or similar).
Why it Matters
Without a clear Y-axis label, users may be unsure what the values represent even though the currency symbol hints at monetary data.
How to Fix
Add a descriptive Y-axis label to clarify the metric displayed, e.g., 'Gross Sales (£)'.
Issue Highlights
Inconsistent button style for date filter template options
Minor
Visual Consistency, Imagery & Media
The Problem
The date filter template options 'Standard' and 'Custom' have different background colors and border usage that do not appear consistent or clearly indicate selected vs unselected states.
Why it Matters
Inconsistent button styles might confuse users about which option is currently active or clickable.
How to Fix
Use consistent styling for all template option buttons with a clear visual distinction for the selected state.
Issue Highlights
Legend for line chart metrics displayed separately
Minor
Efficiency & Cognitive Load
The Problem
The color-coded legend for 'Gross Sales' and 'Gross Sales Last Year' is separated from the chart lines, requiring users to remember which color corresponds to which metric.
Why it Matters
Users must recall the color-meaning relationship when interpreting the chart, increasing cognitive load and potential confusion.
How to Fix
Place legends closer to respective lines or enable hover tooltips directly on the chart for clarity.
Issue Highlights