Learn

/

Forms

Forms

4 patterns

Input labels, error messages, touch targets, and field organization that reduce user friction. You'll hit this when users abandon a form because they cannot tell what went wrong or where to tap.

Avoid

Sign in

Email address

Password

Sign in


Prefer

Sign in

Email address

you@example.com

Password

••••••••

Sign in

Why avoid

Placeholder text disappears as soon as the user starts typing, removing the only indication of what the field is for. Users who tab back to correct a mistake cannot remember what the field asked for. This is a well-documented usability problem with placeholder-only labels.

Why prefer

Visible labels above each input remain on screen while the user types, providing persistent context. Users can always see what each field is for, even after entering data. This also helps with error correction because the field purpose is never hidden.

Nielsen Norman Group: Placeholders in form fields
Avoid

Password

abc123

Invalid input.


Prefer

Password

abc123

Password must be at least 8 characters and include a number.

Why avoid

Generic error messages like "Invalid input" or "Please fix errors" leave the user guessing. They do not know which field has the problem or what they need to change. Vague feedback increases frustration and abandonment, especially on longer forms.

Why prefer

Specific, inline error messages tell the user exactly what is wrong and how to fix it. Placing the error next to the relevant field reduces the time spent searching for the problem. Clear guidance like "Password must be at least 8 characters" is actionable and helpful.

Nielsen Norman Group: Error message guidelines
Avoid

Notification preferences

Email notifications

SMS alerts

Weekly digest


Prefer

Notification preferences

Email notifications

Product updates and announcements

SMS alerts

Order status and delivery updates

Weekly digest

Summary of your account activity

Why avoid

Tiny touch targets force users to tap precisely, which is difficult on mobile devices where fingers are imprecise. Users end up tapping the wrong element or needing multiple attempts to hit the right one. This is one of the most common mobile usability failures.

Why prefer

Touch targets of at least 44x44 pixels (Apple's guideline) or 48x48 pixels (Google's guideline) ensure that users can tap buttons and inputs comfortably on mobile devices. Adequate spacing between targets prevents accidental taps on neighboring elements.

WCAG 2.1: Understanding target size
Avoid

Checkout

Full name

Email address

Phone number

Street address

City

Zip code

Country


Prefer

Checkout

Personal Info

Full name

Sarah Chen

Email address

sarah@example.com

Phone number

+1 (555) 000-0000


Shipping Address

Street address

123 Main St

City

San Francisco

Zip code

94102

Country

United States

Why avoid

A long, undivided wall of fields feels overwhelming and makes users less likely to complete the form. Without grouping, users cannot estimate how much work remains, and related fields (like city and zip code) do not feel connected. Chunking reduces perceived complexity.

Why prefer

Grouping related fields into logical sections (personal info, address, payment) with clear headings breaks a long form into manageable chunks. Users can process one group at a time, and the structure communicates progress through the form.

Nielsen Norman Group: Web form design guidelines