Mobile App Login Screen
The UI benefits from a clean, minimalist design with clear labeling and a prominent login button, making it straightforward for users to complete actions. However, it could improve by providing more visual feedback for interactive elements and better spacing to enhance overall usability and accessibility.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
1
Color & Contrast1
Content Readability & Clarity2
Visual Consistency, Imagery & Media0
Navigation & Structure1
Conversion & Actions0
Tone, Friendliness & Delight2
Accessibility & Input Ergonomics1
Efficiency & Cognitive Load0
Flow & States Completeness1
Strategic DesignRecommended Fixes by Impact
0Critical
0Major
6Moderate
3Minor
Low contrast on input field labels
Moderate
Color & Contrast
The Problem
The input field labels 'E-mail' and 'Senha' use a dark gray text on a white background, resulting in low contrast likely below WCAG AA for normal text.
Why it Matters
Users with low vision or in bright environments may find these labels hard to read, making it difficult to complete the login form accurately.
How to Fix
Increase the contrast of the label text by using a darker color or bold weight to ensure it meets at least a 4.5:1 contrast ratio against the white background.
Issue Highlights
Weak visual hierarchy between input labels and toggle label
Moderate
Content Readability & Clarity
The Problem
The labels for 'E-mail' and 'Senha' inputs have similar font weight and size as 'Lembrar' next to the toggle. 'Lembrar' is bolded but close in size to input labels, which may confuse users about section grouping and importance.
Why it Matters
Poor distinction between different label types can cause users to miss or misinterpret form options, reducing clarity and ease of use.
How to Fix
Increase contrast by making input labels a lighter weight or smaller size and toggle label more distinct through spacing or weight or a slightly larger font.
Issue Highlights
Toggle alignment inconsistent with text label
Moderate
Visual Consistency, Imagery & Media
The Problem
The 'Lembrar' label and the toggle switch below it are misaligned horizontally, with the toggle positioned too far left compared to the label text.
Why it Matters
Misalignment creates visual imbalance and can make the UI look less polished and harder to scan quickly.
How to Fix
Adjust the toggle switch to be horizontally aligned with the 'Lembrar' text label so that both elements start at the same vertical axis.
Issue Highlights
Primary CTA label 'Login' lacks clarity
Moderate
Conversion & Actions
The Problem
The primary call-to-action button in the login form is labeled 'Login' which is somewhat clear, but lacks further distinction or confirmation text to reassure users. It could be clearer with action-oriented language like 'Sign In Securely' or 'Access Account'.
Why it Matters
Users might hesitate or feel uncertain about the result of pressing the login button without a stronger action cue, potentially reducing conversion.
How to Fix
Use more explicit, action-driven labels for the primary CTA that explain the next step or confirm the action clearly.
Issue Highlights
Toggle switch handle is too small for comfortable touch
Moderate
Accessibility & Input Ergonomics
The Problem
The toggle switch handle below the 'Lembrar' label appears to be approximately 30x30 pixels or smaller, which is less than the recommended minimum size of 44x44 pixels for touch targets.
Why it Matters
Small touch targets are difficult to accurately activate, especially for users with larger fingers or motor impairments, increasing the chance of input errors.
How to Fix
Increase the size of the toggle switch to at least 44x44 pixels and add sufficient padding around it to avoid missed taps.
Issue Highlights
Generic Login Screen Lacks Visual Distinction
Moderate
Strategic Design
The Problem
The login screen uses very common layout and UI elements with minimal branding or unique visual elements beyond a small logo, resulting in no memorable moment or clear brand differentiation.
Why it Matters
Users may have difficulty quickly recognizing or remembering the app experience, which can reduce emotional connection and user satisfaction.
How to Fix
Introduce stronger branding cues, unique visual style, or welcoming elements above the fold to create a visually engaging and memorable login screen.
Issue Highlights
'Lembrar' label and toggle are too close
Minor
Accessibility & Input Ergonomics
The Problem
The 'Lembrar' text label and the toggle switch handle are placed close horizontally, with only a few pixels of space between them.
Why it Matters
Closely spaced interactive elements increase the likelihood of accidental taps on the wrong control, leading to user frustration.
How to Fix
Increase horizontal spacing between the 'Lembrar' label and toggle to at least 8-10 pixels or wrap the label above the toggle to separate the touch areas.
Issue Highlights
Inconsistent text labeling for input fields
Minor
Visual Consistency, Imagery & Media
The Problem
The input field labels 'E-mail' and 'Senha' use different formatting compared to the 'Lembrar' label which is bold and colored differently.
Why it Matters
Inconsistent label styles within a form reduce perceived coherence and can confuse users about the relative importance or status of fields.
How to Fix
Apply a consistent font weight and color style for all labels to ensure uniformity throughout the login form.
Issue Highlights
Unclear 'Lembrar' toggle adds minor extra decision
Minor
Efficiency & Cognitive Load
The Problem
The 'Lembrar' (Remember) toggle lacks a descriptive label explaining what will be remembered, requiring users to guess its purpose.
Why it Matters
Users may hesitate or be confused about the effect of toggling this option, adding minor friction to login.
How to Fix
Add a short explanatory label or tooltip clarifying that the option enables the app to remember login credentials or session.
Issue Highlights