<?xml version="1.0" encoding="utf-8"?>

Always keep labels outside of the input

Always keep labels outside of the input Bad Practice
Always keep labels outside of the input Best Practice

Placing labels outside form fields instead of using placeholder text significantly improves form usability. Permanent, visible labels provide constant reference points for users as they complete each field.

When labels remain visible throughout the interaction, users can easily verify what information belongs in each field without having to delete their entry to see the instructions again. This creates a more efficient and less frustrating experience, particularly for complex forms or those requiring specific data formats.

Plus, external labels offer much better visibility than placeholder text, which typically appears in light gray with poor contrast. This enhanced visibility is crucial for users with low vision or those completing forms in challenging lighting conditions. Additionally, screen readers can reliably announce proper labels, whereas placeholder text often creates accessibility issues.

Improve your UX & Product skills with interactive courses that actually work