Signup page for a SaaS website

1. 44×44px touch targets All interactive elements fields, buttons, and the password visibility toggle meet the 44px minimum tap target. This supports users with motor impairments and reduces accidental taps on touchscreens.

2. Colour + icon validation feedback Errors use a red border paired with icon and an inline suggestion. Met password criteria turn green with a checkmark. Colour is never the sole indicator, keeping the form accessible for colour blind users (WCAG 1.4.1).

3. Google sign-in as the primary path Google sign-in is positioned first because it's the path most users will take. Removing the credential step eliminates the most common reason people leave a signup flow before completing it.

4. Whitespace as structure Proximity drives perception. Related elements are grouped through consistent spacing, and a divider draws a hard boundary between the two sign-up paths reducing visual noise and decision fatigue.

5. Labels above fields, not inside them Using persistent labels above each input rather than placeholder-only text means the field context never disappears when a user starts typing. Placeholders alone fail users with cognitive impairments and screen readers (WCAG 3.3.2).

6. Real-time password validation The criteria checklist updates as the user types before they submit. This shifts feedback from punishing (post-submit errors) to guiding (in-progress confirmation), which directly reduces form abandonment and re-entry frustration.