Professional Login Screen
The interface features a clean and visually appealing design with a clear focus on user input fields and a strong call-to-action button. However, the text contrast in some areas and multilingual support could be improved for better accessibility and user comprehension.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
4
Color & Contrast2
Content Readability & Clarity2
Visual Consistency, Imagery & Media0
Navigation & Structure1
Conversion & Actions1
Tone, Friendliness & Delight1
Accessibility & Input Ergonomics1
Efficiency & Cognitive Load0
Flow & States Completeness1
Strategic DesignRecommended Fixes by Impact
0Critical
0Major
9Moderate
4Minor
Different styles for 'Ingresar' buttons
Moderate
Visual Consistency, Imagery & Media
The Problem
'Ingresar' button at the top is a segmented control tab with a white background and pink text, while the main 'Ingresar' button is a solid pink with white text. These two buttons have the same label but different styles.
Why it Matters
Users may be confused if these buttons have different importance or functions due to their inconsistent styling.
How to Fix
Use consistent styles for buttons with the same labels or clearly differentiate their functions by naming or style.
Issue Highlights
Low contrast for 'Crear cuenta' tab text
Moderate
Color & Contrast
The Problem
The 'Crear cuenta' tab text is light gray on a light pink background, resulting in low contrast that likely fails WCAG AA standards.
Why it Matters
Low contrast text is difficult to read for users with visual impairments or in bright environments, reducing accessibility.
How to Fix
Increase the contrast by darkening the tab text color or using a darker background behind the text.
Issue Highlights
Low contrast for '¿Olvidaste tu contraseña?' link
Moderate
Color & Contrast
The Problem
The '¿Olvidaste tu contraseña?' text is pink on a pale pink background, likely failing WCAG AA contrast requirements.
Why it Matters
Insufficient contrast reduces readability, especially for users with low vision or color blindness.
How to Fix
Use a darker color for the link text or a darker background behind it to increase contrast.
Issue Highlights
Login button label lacks clarity for first-time users
Moderate
Conversion & Actions
The Problem
The primary CTA button 'Ingresar' is clear for returning users but may confuse new users about alternative actions like signing up, especially since 'Crear cuenta' is less prominent.
Why it Matters
First-time users might be uncertain whether 'Ingresar' allows sign in only, risking frustration or bounce if they don’t see how to create an account quickly.
How to Fix
Make 'Crear cuenta' visually more prominent or change the button label dynamically to clarify the action based on the selected tab (e.g., 'Sign In' or 'Register').
Issue Highlights
Tabs 'Ingresar' and 'Crear cuenta' too close horizontally
Moderate
Accessibility & Input Ergonomics
The Problem
The 'Ingresar' and 'Crear cuenta' tabs are adjacent with minimal spacing, making it easy to tap the wrong tab accidentally.
Why it Matters
Users may accidentally tap the wrong tab due to insufficient spacing, leading to frustration or errors.
How to Fix
Increase horizontal spacing or padding between the two tabs to reduce accidental taps.
Issue Highlights
Duplicate login action buttons confuse user
Moderate
Efficiency & Cognitive Load
The Problem
There are two 'Ingresar' buttons visible — one as a tab selector and another as a primary action button, causing a redundant choice for the user.
Why it Matters
Users might hesitate or be confused about which 'Ingresar' button to use, increasing cognitive effort and slowing sign-in.
How to Fix
Remove the tab-style 'Ingresar' selection or combine it visually/functionally with the main action button to eliminate duplicate action points.
Issue Highlights
Low contrast for placeholder text 'tu@correo.com' in email input
Moderate
Color & Contrast
The Problem
The placeholder text '[REDACTED]' is a medium gray on white background, appearing low contrast and likely below WCAG AA standards.
Why it Matters
Low contrast placeholder text can be difficult to read, especially for users with vision difficulties.
How to Fix
Use a darker gray or black color for placeholder text to improve readability.
Issue Highlights
Weak hierarchy between login tabs 'Ingresar' and 'Crear cuenta'
Moderate
Content Readability & Clarity
The Problem
Both tabs 'Ingresar' and 'Crear cuenta' have similar font sizes and weight, but only the active tab uses bold color with no strong visual difference in size or weight that clearly sets hierarchy.
Why it Matters
Users may find it harder to quickly identify the active tab and differentiate between options, causing slight confusion in navigation.
How to Fix
Increase the font weight or size difference or use a stronger visual cue like underline or bold on the active tab to establish clear hierarchy.
Issue Highlights
Clickable label 'Crear cuenta' is disabled or visually de-emphasized
Moderate
Strategic Design
The Problem
The 'Crear cuenta' tab option appears visually disabled or very faint compared to 'Ingresar', suggesting it might not be tappable, which is unusual for a sign-in/sign-up toggle.
Why it Matters
Users looking to create an account may miss this navigation option or think sign-up is unavailable, reducing onboarding opportunities.
How to Fix
Make the 'Crear cuenta' tab clearly interactive and visually balanced with 'Ingresar' so users recognize the toggle pattern.
Issue Highlights
Small text in 'Facebook se activará más adelante.'
Minor
Content Readability & Clarity
The Problem
The text 'Facebook se activará más adelante.' appears smaller than other body text and may be hard to read on smaller screens.
Why it Matters
Smaller text can be difficult for users with reduced vision or on small devices to read, reducing overall accessibility.
How to Fix
Increase the font size of this text to at least match other body text or the recommended minimum for accessibility.
Issue Highlights
Low contrast for 'Facebook se activará más adelante.' text
Minor
Color & Contrast
The Problem
The small gray text 'Facebook se activará más adelante.' at the bottom uses very low contrast on the light pink background.
Why it Matters
Low contrast text is hard to read for users with vision difficulties or in bright conditions.
How to Fix
Use a darker gray or black color for this text to improve contrast.
Issue Highlights
Text below 'Continuar con Google' button not aligned
Minor
Visual Consistency, Imagery & Media
The Problem
The label ‘Facebook se activará más adelante.’ is not centered or aligned with the button above it which is centered horizontally on the screen.
Why it Matters
Off-center text below a centered button looks unbalanced and reduces visual harmony.
How to Fix
Center align the text with the button horizontally to improve visual balance.
Issue Highlights
Use of bright pink may reduce perceived professionalism for login
Minor
Tone, Friendliness & Delight
The Problem
The dominant bright pink color throughout the login screen may be perceived as playful or casual rather than professional, which could conflict with the 'Acceso profesional' text.
Why it Matters
A mismatch between visual tone and stated professional context can undermine user trust or reduce perceived seriousness of the app.
How to Fix
Moderate the bright pink intensity by introducing more neutral or muted tones to balance professionalism with brand identity.
Issue Highlights