Mobile App Login Screen

The interface uses a clean, consistent pink color scheme that creates a welcoming and professional look, with clear input fields and distinct call-to-action buttons. However, the contrast on some text elements, such as the placeholder and secondary tabs, could be improved for better readability and accessibility.
Analyzed design
Fixes by Category
  • 4
    Color & Contrast
  • 2
    Content Readability & Clarity
  • 2
    Visual Consistency, Imagery & Media
  • 0
    Navigation & Structure
  • 1
    Conversion & Actions
  • 0
    Tone, Friendliness & Delight
  • 1
    Accessibility & Input Ergonomics
  • 1
    Efficiency & Cognitive Load
  • 2
    Flow & States Completeness
  • 1
    Strategic Design
    • Recommended Fixes by Impact
    1Critical
    1Major
    6Moderate
    6Minor

    No Loading or Error State Shown for Login Attempt

    Critical
    Flow & States Completeness
    The Problem
    Upon tapping the pink 'Ingresar' button to log in, the screen does not show any indication of loading, success, or error state currently.
    Why it Matters
    Without feedback, users might repeatedly tap the button or think the app is unresponsive, leading to frustration or abandonment.
    How to Fix
    Add visible loading indicators and error handling messages or success confirmations after tapping 'Ingresar'.
    Issue Highlights
    Finding region

    No Activation or Action Available for 'Crear cuenta' Tab

    Major
    Flow & States Completeness
    The Problem
    The 'Crear cuenta' (Create account) tab is visible but inactive (grayed out) with no clear indication on how to enable or access it or proceed from this screen to create an account.
    Why it Matters
    Users wanting to create a new account may be stuck with the inability to switch tabs or start registration, causing frustration or abandonment.
    How to Fix
    Ensure the 'Crear cuenta' tab is interactive and leads to a sign-up form or state. Provide cues or a button to switch or enable user registration flow.
    Issue Highlights
    Finding region

    Inconsistent style between 'Ingresar' tabs and primary button

    Moderate
    Visual Consistency, Imagery & Media
    The Problem
    The top tab button 'Ingresar' is styled with a white background and pink text, while the large primary 'Ingresar' button below is solid pink with white text, creating inconsistent visual weight and style within similar action elements.
    Why it Matters
    Users may be confused about which 'Ingresar' button to use or perceive a lack of polish due to inconsistent styling of similar elements.
    How to Fix
    Use consistent styling for similar primary actions, either both as tabs or both as solid buttons with matching colors and fonts.
    Issue Highlights
    Finding region

    Low contrast for 'Acceso profesional' text

    Moderate
    Color & Contrast
    The Problem
    The gray text 'Acceso profesional' on a light pink background appears to have low contrast, likely below WCAG AA standards for normal text.
    Why it Matters
    Users with moderately low vision or in bright environments may struggle to read this important descriptive text.
    How to Fix
    Increase the contrast by darkening the text color or lightening the background behind it to meet WCAG AA contrast ratio of at least 4.5:1.
    Issue Highlights
    Finding region

    Low contrast for placeholder email text

    Moderate
    Color & Contrast
    The Problem
    The placeholder text '[REDACTED]' in the email input uses a medium gray color on a white background, likely below WCAG AA contrast standards for normal text.
    Why it Matters
    Users with mild visual impairments or in poorly lit conditions may have trouble reading the placeholder text, affecting form fill usability.
    How to Fix
    Use a darker shade of gray to improve contrast to meet at least 4.5:1 ratio or ensure placeholder text is distinguishable.
    Issue Highlights
    Finding region

    Low contrast for 'O CONTINUÁ CON' separator text

    Moderate
    Color & Contrast
    The Problem
    The uppercase text 'O CONTINUÁ CON' in gray on pink background appears low contrast, likely below WCAG AA for normal text.
    Why it Matters
    Users with low vision may overlook this separator, reducing clarity in navigation and interaction options.
    How to Fix
    Darken the text color or lighten the background behind it to meet the minimum 4.5:1 contrast ratio.
    Issue Highlights
    Finding region

    Weak visual hierarchy between app subtitle and action tabs

    Moderate
    Content Readability & Clarity
    The Problem
    The subtitle 'Acceso profesional' and the tabs 'Ingresar' and 'Crear cuenta' have similar font weight and spacing, making it difficult to distinguish their functional difference.
    Why it Matters
    Users might be confused about what 'Acceso profesional' represents versus the selectable tabs, potentially slowing down initial comprehension of options.
    How to Fix
    Increase the contrast or font weight of the subtitle or add more spacing between it and the tabs. Consider using different font sizes or styles to establish clearer hierarchy.
    Issue Highlights
    Finding region

    Tab buttons too close horizontally

    Moderate
    Accessibility & Input Ergonomics
    The Problem
    The 'Ingresar' and 'Crear cuenta' tab buttons are placed side by side with minimal horizontal spacing, increasing the risk of accidental taps on the wrong tab.
    Why it Matters
    Closely spaced tap targets can lead to user frustration and increased error rates by causing unintentional selection of the wrong option.
    How to Fix
    Increase horizontal spacing or padding between the tab buttons to ensure sufficient distance for accurate tapping.
    Issue Highlights
    Finding region

    Small font size for 'Facebook se activará más adelante.' note

    Minor
    Content Readability & Clarity
    The Problem
    The footer note 'Facebook se activará más adelante.' appears in very small and low contrast text making it hard to read.
    Why it Matters
    Important context about Facebook activation might be missed by users with less than perfect vision or on smaller screens.
    How to Fix
    Increase the font size and/or contrast of this footer note to improve readability.
    Issue Highlights
    Finding region

    Left icon misaligned in 'Correo electrónico' input

    Minor
    Visual Consistency, Imagery & Media
    The Problem
    The envelope icon in the 'Correo electrónico' input field is slightly off-center vertically compared to the input text, causing a subtle misalignment.
    Why it Matters
    Misalignment can reduce the perceived quality and polish of the UI, potentially affecting user trust.
    How to Fix
    Vertically center the icon with the input text for visual harmony.
    Issue Highlights
    Finding region

    Low contrast for inactive tab 'Crear cuenta'

    Minor
    Color & Contrast
    The Problem
    The 'Crear cuenta' tab is shown in light gray on a very light pink background, resulting in low contrast likely below WCAG AA standards for interactive elements.
    Why it Matters
    This makes it harder for users to quickly identify and distinguish the inactive tab, reducing discoverability and usability.
    How to Fix
    Use a darker gray or stronger color shade for the inactive tab text to meet at least 3:1 contrast ratio for UI components.
    Issue Highlights
    Finding region

    Weak contrast on inactive 'Crear cuenta' tab

    Minor
    Strategic Design
    The Problem
    The 'Crear cuenta' tab uses a very light grey text on a light pink background, which reduces readability and discoverability of the option to switch to account creation.
    Why it Matters
    Users may miss the option to create an account, potentially limiting new user acquisition and frustrating users who want to sign up.
    How to Fix
    Increase the contrast of the inactive tab label by using a darker text color or different background shade for better visibility.
    Issue Highlights
    Finding region

    Tab Label 'Crear cuenta' Lacks Clear Action

    Minor
    Conversion & Actions
    The Problem
    The toggle tab labeled 'Crear cuenta' does not function or visually appear as a clear call-to-action, making it unclear whether it is a button or a tab, and lacks clarity on whether it initiates account creation or simply switches to a registration form.
    Why it Matters
    Users may not understand how to begin registration or might get confused between logging in and signing up, which can increase friction.
    How to Fix
    Make 'Crear cuenta' visually distinct as either a clickable button or tab with a clear label that explains its purpose like 'Sign Up' or 'Register'.
    Issue Highlights
    Finding region

    Multiple network and battery icons add visual clutter

    Minor
    Efficiency & Cognitive Load
    The Problem
    The top status bar shows multiple network connections (4G, 5G) and duplicated signal status icons which does not affect app functionality but adds visual noise.
    Why it Matters
    While peripheral, extra icons can distract users and reduce visual clarity on a focused login screen.
    How to Fix
    Consider simplifying or hiding redundant status icons when inside the app's login screen to reduce distractions.
    Issue Highlights
    Finding region