Placeholder: що це і яка альтернатива

Placeholder (плейсхолдер) — це текст-підказка всередині порожнього поля. Його видно, поки людина нічого не ввела, і він зникає в момент введення. Це не підпис поля: підпис має лишатися на екрані.

У вебформі placeholder стоїть майже біля кожного поля. Ним часто підміняють підпис, приклад або довгу довідку. Нижче — чотири такі підміни і те, куди перенести текст, щоб підказка не зникала.

Підпис і приклад лишаються на екрані. Текст усередині поля — лише коротка підказка.

Чим не варто заміняти підпис поля

Placeholder як мітка

Пояснення стоїть над полем, а не всередині нього.

Щоб форма виглядала коротшою, підпис ставлять усередину поля. Поки поле порожнє, це читається. Варто поставити курсор або набрати першу літеру — текст зникає. Щоб згадати, про що питали, уже введене доводиться стирати.

Підпис лишіть над полем. Порожнє поле без підпису після кліку не підказує, що писати далі.

Placeholder як приклад

Приклад введення стоїть під полем, а не в placeholder.

Приклад показує, в якому вигляді чекають відповідь: телефон, дату, номер замовлення. Якщо цей зразок лежить у placeholder, він зникає тієї секунди, коли людина починає друкувати. Зразок краще поставити під полем: його видно і до введення, і під час.

Placeholder як підказка

Довгу довідку не вміщують у placeholder.

Іноді в поле кладуть ціле речення: формат, обмеження, навіщо це питання. Воно не вміщується в один рядок і зникає під час введення. Коротку підказку можна лишити в полі. Довгий текст — під полем або у спливаючій підказці біля підпису.

Placeholder як заголовок поля

Заголовок поля — це label, не placeholder.

Окреме ім’я поля всередині порожнього рядка виглядає акуратно, але після кліку ім’я зникає. Для імені поля потрібен label. Він лишається на місці, коли в рядку вже є текст.

Якщо placeholder усе ж потрібен

Форма частіше зручніша без тексту всередині полів. Якщо підказка в полі все-таки потрібна, у неї три обмеження.

Placeholder має бути тихішим за введений текст

Світліший колір відрізняє підказку від уже введеного тексту.

Порожнє поле людина заповнює сама. Якщо підказка того самого кольору, що й відповідь, здається, що поле вже заповнене, і його пропускають.

Placeholder має бути видним на будь-якому екрані

Надто світлий текст губиться на частині екранів.

Сірий «для краси» на яскравому моніторі ще читається, на іншому екрані зливається з тлом. Підказка має відрізнятися від відповіді і при цьому лишатися розбірливою.

Placeholder не повинен зникати від одного кліку

Текст усередині поля лишається, поки не набрано першу літеру.

Якщо підказка зникає від встановлення курсора, людина втрачає її ще до введення. Вона має зникнути лише коли в полі з’явився власний текст.

Джерело: uxdesign.cc