Mobile App Login Screen
The interface benefits from a clean, minimalistic design with clear visual hierarchy and sufficient spacing that enhances readability. However, the lack of visible labels on input fields until interaction and limited language localization options could hinder usability and accessibility for diverse users.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast1
Content Readability & Clarity2
Visual Consistency, Imagery & Media0
Navigation & Structure1
Conversion & Actions0
Tone, Friendliness & Delight2
Accessibility & Input Ergonomics0
Efficiency & Cognitive Load2
Flow & States Completeness1
Strategic DesignRecommended Fixes by Impact
1Critical
2Major
8Moderate
1Minor
No error or success feedback displayed for login actions
Critical
Flow & States Completeness
The Problem
The screen does not show any error message placeholders or success state indicators that inform users about failed login attempts or successful actions.
Why it Matters
Users will not receive confirmation or feedback on their login attempts, creating confusion and preventing correction of mistakes.
How to Fix
Implement visible feedback elements for login errors (e.g. invalid credentials) and successful login confirmations.
Issue Highlights
No visible labels for email and password fields
Major
Accessibility & Input Ergonomics
The Problem
The text inputs for E-mail and Senha have placeholder text but do not have visible persistent labels, which may disappear when user starts typing.
Why it Matters
Without persistent labels, users can lose context of what information is required, decreasing usability and accessibility, especially for screen reader users.
How to Fix
Implement visible labels outside or above the input fields that remain visible when fields are focused or contain text.
Issue Highlights
No sign-up or account creation option
Major
Flow & States Completeness
The Problem
The login screen lacks any visible call-to-action or link for new users to create an account or sign up.
Why it Matters
New users who do not already have an account have no clear guidance on how to start using the service, potentially decreasing user acquisition.
How to Fix
Include a visible 'Sign Up' or 'Create Account' link or button to attract and guide new users.
Issue Highlights
Low contrast for 'E-mail' and 'Senha' field labels
Moderate
Color & Contrast
The Problem
The text labels 'E-mail' and 'Senha' appear in a dark gray color on a white background, which likely does not meet WCAG AA minimum contrast ratio of 4.5:1 for normal text.
Why it Matters
Users with moderately low vision or in bright environments may have difficulty reading these field labels, impacting form completion.
How to Fix
Increase the contrast by using a darker color for the labels, such as black or a very dark gray with a contrast ratio above 4.5:1.
Issue Highlights
Low contrast for 'Lembrar' toggle label
Moderate
Color & Contrast
The Problem
The label 'Lembrar' is in a dark blue color on a white background, but the contrast appears borderline and possibly below WCAG AA 4.5:1 ratio for normal text.
Why it Matters
Users with some vision impairments may find it difficult to read this toggle label clearly.
How to Fix
Use a darker blue color for the label text to ensure at least 4.5:1 contrast ratio against the white background.
Issue Highlights
Weak visual hierarchy between login title and form labels
Moderate
Content Readability & Clarity
The Problem
The 'Login' title and the form labels ('E-mail', 'Senha') have similar font weights and sizes, making it difficult to distinguish the section heading from the input labels.
Why it Matters
Users may struggle to quickly understand the structure of the page and the relationship between the title and the form inputs.
How to Fix
Increase the font size and/or weight of the 'Login' title, or add visual separation such as spacing or different color to establish clear hierarchy.
Issue Highlights
Toggle switch misaligned with 'Lembrar' label
Moderate
Visual Consistency, Imagery & Media
The Problem
The toggle switch below the 'Lembrar' label is noticeably shifted left compared to the left edge of the label text, causing misalignment.
Why it Matters
Misalignment reduces visual harmony and can distract users, making the interface feel less polished and potentially harder to scan quickly.
How to Fix
Adjust the toggle switch horizontal position to align left edges with the 'Lembrar' label and other form text inputs for consistent vertical alignment.
Issue Highlights
No clear navigation or environment context on login screen
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The screen displays a 'Login' header and input fields without any additional navigation or role-related context. There is no visible navigation or indication of where the user is in the app besides the login form.
Why it Matters
Users may feel disoriented or unsure about the app flow initially, reducing confidence and increasing potential abandonment.
How to Fix
Add top-level navigation or breadcrumbs if applicable, or provide subtle cues about the app environment or next steps after login.
Issue Highlights
Toggle switch touch target is too small
Moderate
Accessibility & Input Ergonomics
The Problem
The toggle switch next to 'Lembrar' is visually smaller than recommended tap target size, estimated below 40x40 pixels.
Why it Matters
Smaller tap targets are harder to activate accurately, especially for users with motor impairments or on smaller mobile screens.
How to Fix
Increase the size of the toggle switch to at least 44x44 pixels and ensure adequate padding around it.
Issue Highlights
Login screen lacks a memorable or distinctive visual focus
Moderate
Strategic Design
The Problem
The login screen uses a basic and common layout with a standard form and a logo with no unique visual treatment or engaging elements to create a memorable user experience.
Why it Matters
Users might find the login screen generic and uninspiring, which can reduce engagement and recall, ultimately affecting overall user satisfaction.
How to Fix
Enhance the visual hierarchy with unique branding, engaging imagery, or clear, inviting calls to action that differentiate the login screen from typical designs.
Issue Highlights
Primary CTA label 'Login' is generic and lacks clarity
Moderate
Conversion & Actions
The Problem
The primary button uses the label 'Login' which is generic and does not clearly indicate the action or next step after clicking. It could be made more descriptive to improve clarity.
Why it Matters
Users may hesitate or be uncertain about what exactly the button will do, potentially reducing conversion and increasing friction.
How to Fix
Use a more descriptive and action-driven label like 'Sign In to Account' or 'Access Account' to clarify the purpose of the button.
Issue Highlights
Login button with different corner radius from form box
Minor
Visual Consistency, Imagery & Media
The Problem
The login button and the main form container both have rounded corners but the corner radius appears inconsistent, with the button having a more pronounced rounding than the form box.
Why it Matters
Inconsistencies in corner radius between related UI components impact visual cohesion and can make the interface feel less thoughtfully designed.
How to Fix
Use consistent corner radius values for the button and form container to create a unified look.
Issue Highlights