Mobile Data Usage Monitor
The UI effectively uses color coding and icons to clearly distinguish data usage by different apps, providing an at-a-glance understanding for users. However, it could improve by enhancing text readability and reducing visual clutter for easier navigation and comprehension.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast3
Content Readability & Clarity2
Visual Consistency, Imagery & Media1
Navigation & Structure1
Conversion & Actions2
Tone, Friendliness & Delight2
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
1Critical
4Major
15Moderate
3Minor
Missing confirmation for destructive remove action
Critical
Destructive Action Without Safeguard (Confirm/Undo)
The Problem
The red circular minus buttons clearly indicate destructive 'remove' actions but there is no visible confirmation or undo option to prevent accidental removal.
Why it Matters
Users may accidentally remove items and lose tracking or configuration without a way to undo or confirm, leading to frustration and potential data loss.
How to Fix
Add a confirmation dialog or an undo option triggered immediately after the removal to safeguard from accidental destructive actions.
Issue Highlights
Small colored dots below data usage categories
Major
Accessibility & Input Ergonomics
The Problem
The small colored dots beneath the usage categories appear very small, likely less than 24x24 dp, making them difficult to tap accurately on a touchscreen.
Why it Matters
Users may have difficulty selecting or identifying these dots as interactive elements due to their small size, leading to frustration or input errors.
How to Fix
Increase the size of the colored dots to adhere to recommended touch target sizes (at least 48x48 dp) and ensure enough spacing around them.
Issue Highlights
No clear primary call-to-action on main screen
Major
Conversion & Actions
The Problem
The main UI screen has no clearly emphasized primary call-to-action button or clear next step other than toggle and minor icons; labels have unclear meaning for new users.
Why it Matters
Without a clear, prominent primary CTA, users may be confused about what action to take next, reducing conversion and engagement.
How to Fix
Add a clearly labeled primary action button with distinct styling and clearer language guiding the next key user action.
Issue Highlights
Lack of Trust Signal for Proxy Toggle
Major
Tone, Friendliness & Delight
The Problem
The main proxy toggle at the top right corner does not provide any trust signal, confirmation, or reassurance about the security and privacy impact of enabling the proxy feature.
Why it Matters
Users enabling a proxy might be concerned about privacy, security, and data handling. Without clear trust signals or explanations, users may hesitate or feel uncertain.
How to Fix
Add a short explanation or icon near the toggle that reassures users about privacy and security, or offer a tooltip or info link outlining what enabling the proxy entails and its benefits.
Issue Highlights
No completion or success feedback on enabling proxy
Major
Flow & States Completeness
The Problem
The proxy toggle switch is turned on, but there is no success message or confirmation that proxy functionality is active, nor any prompt on what to do next or expect.
Why it Matters
Users may not be confident that enabling the proxy has taken effect, potentially causing confusion or repeated actions.
How to Fix
Show a clear success or active state confirmation message or screen after enabling proxy, with guidance on next possible actions.
Issue Highlights
Ambiguous toggle switch purpose
Moderate
Content Readability & Clarity
The Problem
The toggle switch at the top right is visually clear but lacks a label describing what it controls or its state beyond a very small text '代理已开启' which may not be immediately linked to the switch.
Why it Matters
Users might be unsure what enabling or disabling the switch does, reducing clarity and increasing potential errors in interaction.
How to Fix
Add a clear label or descriptive text adjacent or within the toggle switch control explaining its function explicitly.
Issue Highlights
Light gray text below heading is low contrast
Moderate
Color & Contrast
The Problem
The smaller text below the main heading '首页' is a light gray color on a white background, likely failing WCAG AA contrast ratios for normal text.
Why it Matters
Users with visual impairments or in bright lighting conditions may have difficulty reading the low contrast text.
How to Fix
Increase the contrast by darkening the text color, for example using a darker gray or near black.
Issue Highlights
Equal text weight for mixed information
Moderate
Content Readability & Clarity
The Problem
Within each app data block, the labels like '总计', '未限制', and numeric values are visually similar in font weight and size, which reduces the visual hierarchy between category labels and actual data.
Why it Matters
Users may struggle to quickly differentiate labels from data, potentially leading to slower comprehension or misinterpretation of data values.
How to Fix
Use different font weights, sizes, or colors to distinguish labels from numeric data clearly.
Issue Highlights
Uneven horizontal alignment of icons and text under the usage bar
Moderate
Visual Consistency, Imagery & Media
The Problem
The colored dots and their corresponding labels below the usage bar chart are not perfectly aligned vertically in a grid pattern, causing visual imbalance.
Why it Matters
Misalignment can cause cognitive load as users try to associate labels with respective dots, reducing clarity.
How to Fix
Adjust the vertical alignment of all colored dots and text labels so they form a consistent grid below the usage bar.
Issue Highlights
Page lacks clear location indicator or breadcrumb
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The screen title '首页' is present, but there is no broader navigation context or breadcrumb to inform the user of their exact position within the app or system hierarchy.
Why it Matters
Users may become disoriented regarding where they are in the app, increasing cognitive load and making navigation less intuitive.
How to Fix
Add a breadcrumb trail or additional location indicators to clarify the user's current navigation level and how it connects to other parts of the app.
Issue Highlights
Overloaded Color Legend with Small Labels
Moderate
Efficiency & Cognitive Load
The Problem
The color legend showing usage by different apps is densely packed with many small truncated labels, making it difficult to quickly identify which colors correspond to which apps.
Why it Matters
Users may struggle to associate colors to apps without clear labels, increasing cognitive effort and reducing the clarity of the data visualization.
How to Fix
Simplify the legend by reducing the number of displayed items or allow users to tap colors to see app names in a popup, ensuring label text is fully visible or easily readable.
Issue Highlights
No visible call to action to add new apps to proxy or manage usage
Moderate
Flow & States Completeness
The Problem
The screen shows detailed current data usage and proxy status for apps but lacks an obvious button or guidance for the user to add more apps or adjust proxy settings beyond the toggle and minus buttons.
Why it Matters
Users may be confused about how to proceed if they want to control or modify proxy settings for additional apps, which reduces the effectiveness of the app’s main functionality.
How to Fix
Add a clear, labeled button or instruction that allows users to add more apps to the proxy list or manage their proxy settings directly from this screen.
Issue Highlights
Unclear toggle purpose due to label placement
Moderate
Strategic Design
The Problem
The toggle switch at the top right has no clear label immediately adjacent to it, making it unclear what the toggle controls at a glance.
Why it Matters
Users may be uncertain about what enabling or disabling the toggle will do, increasing cognitive load and risk of misuse.
How to Fix
Place a clear descriptive label or text near the toggle to explicitly state its function, for example 'Proxy Enabled'.
Issue Highlights
Purple status text has insufficient contrast
Moderate
Color & Contrast
The Problem
The purple text label '已代理' next to app names like 哔哩哔哩 (Bilibili) and Google Play 商店 is a medium-light purple on a white background, likely failing WCAG AA for normal text.
Why it Matters
This may cause users to miss or misread important status information.
How to Fix
Darken the purple text or use a bolder font weight to improve contrast against the white background.
Issue Highlights
Small text in data usage legend
Moderate
Content Readability & Clarity
The Problem
The app names below the data usage color blocks (e.g., 'Google Pla...', 'Google 服务框架', etc.) use a small font size which may reduce readability on smaller devices.
Why it Matters
Small and possibly truncated text can cause users difficulty in quickly scanning which app corresponds to which color, reducing effective comprehension of data usage.
How to Fix
Increase font size slightly and ensure full app names are visible or provide hover/pop-up tooltips.
Issue Highlights
Unclear time reference for data usage totals
Moderate
Ambiguous Date/Time/Timezone
The Problem
The heading '今日的总使用量为：36.01 MB' states data usage for 'today' but this lacks any timezone or cut-off time reference, which means users could be unsure of the exact time period covered.
Why it Matters
Ambiguous time framing could confuse users about when the data usage tally resets or how recent the data is.
How to Fix
Add a clear indication of the exact time range or timezone for 'today', such as 'Today (local time)' or specify the reset time.
Issue Highlights
Close placement of colored dots under usage categories
Moderate
Accessibility & Input Ergonomics
The Problem
The colored dots are closely spaced, with minimal gaps between them, increasing the risk of accidental taps on adjacent items.
Why it Matters
Tightly packed interactive elements reduce tap accuracy and may lead to erroneous selections, decreasing user satisfaction.
How to Fix
Add more horizontal spacing between the colored dots to prevent overlap of touch areas.
Issue Highlights
Red Minus Buttons Suggest Destructive Action Without Confirmation
Moderate
Tone, Friendliness & Delight
The Problem
The red circular minus buttons next to the apps imply a potentially destructive or permanent action, but no supporting copy or confirmation prompt is visible to reassure users or provide recovery options.
Why it Matters
Users may hesitate or feel anxious about accidentally removing apps or data usage blocks since the red color conventionally signals critical or irreversible actions without clear recovery guidance.
How to Fix
Provide an explanatory tooltip, confirmation dialog, or clearer labels indicating the consequence of pressing the red minus button to reassure users and reduce fear of loss.
Issue Highlights
Multiple Control Toggles with Unclear Purpose
Moderate
Efficiency & Cognitive Load
The Problem
There is a toggle switch at the top presumably to enable or disable the proxy, but the function of adjacent controls is not clear from the screen, forcing users to decide without sufficient context.
Why it Matters
Users may be confused about the impact of toggling controls, leading to hesitation or incorrect use, which can increase cognitive load and reduce task efficiency.
How to Fix
Add clear labels or tooltips to explain the toggle and adjacent controls to reduce guesswork and decision complexity.
Issue Highlights
Detailed Data Usage Breakdown for Each App
Moderate
Efficiency & Cognitive Load
The Problem
Each app's data usage is broken down into several small metrics (downloading/uploading over WiFi and cellular), potentially requiring multiple micro-decisions or interpretations for users.
Why it Matters
This detailed breakdown can overwhelm users who only want a simple overview, increasing time spent and cognitive load to understand their data usage.
How to Fix
Offer a summarized usage metric on the main screen with an option to tap into detailed breakdowns, reducing on-screen micro-steps and decluttering the UI.
Issue Highlights
Off-center toggle switch relative to heading text
Minor
Visual Consistency, Imagery & Media
The Problem
The large toggle switch at top right is visually misaligned vertically relative to the page heading text on the left.
Why it Matters
Slight misalignment disrupts the perceived balance and professionalism of the header area.
How to Fix
Adjust vertical positioning of toggle switch to align baseline or center line with heading text.
Issue Highlights
Bottom navigation items have small spacing and similar icon styles
Minor
Navigation & Structure
The Problem
The bottom navigation bar contains three closely spaced icons with small text labels that may cause accidental taps or confusion, especially on smaller devices.
Why it Matters
Users might tap the wrong navigation item, leading to slower or frustrating user experience.
How to Fix
Increase spacing between bottom navigation items and differentiate icons and labels more clearly to enhance tap accuracy.
Issue Highlights
Data usage chart lacks clear legend alignment
Minor
Strategic Design
The Problem
The colored bars representing app data usage are accompanied by colored dots and partial text that is truncated, likely making it difficult to identify which segment corresponds to which app.
Why it Matters
Users may struggle to quickly interpret data breakdown and understand which apps are using data the most.
How to Fix
Ensure full app names or clear labels with legible fonts accompany each color dot in the legend, possibly allowing horizontal scrolling or wrapping.
Issue Highlights