Заміна текстових плейсхолдерам. Покращуємо юзабіліті форм шляхом усунення проблем з плейсхолдерами

41

Від автора: текстові плейсхолдеры можна додати майже до будь-якого поля HTML форми як атрибута, і дизайнери і розробники, не розуміючи суті, не соромляться це робити. Спокуса додати текстові підказки в складні форми дуже велике, або, наприклад, прибрати лейбли полів, щоб поліпшити зовнішній вигляд. Однак, перекладаючи завдання лейблів на текстові плейсхолдеры, ми стикаємося з безліччю проблем юзабіліті. Ця стаття ілюструє поширені погані практики і заміни для них.

Плейсхолдер як заміна лейблу

Замена текстовым плейсхолдерам

У спробі скоротити довжину форми або знизити візуальний шум дизайнери використовують плейсхолдеры як лейблів полів форми. Ця практика навантажує нашу короткочасну пам’ять. Лейбл зникає відразу, як тільки користувач клацнув і/або почав вводити текст. Щоб побачити підказку, необхідно стерти текст.

Краще вставити лейбл відразу над полем. Порожнє поле, природно, очікує введення будь-яких даних. Користувачі дивляться на незаповнені поля, щоб зрозуміти, що робити далі.

Плейсхолдер як приклад

Замена текстовым плейсхолдерам

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

Плейсхолдер як текстова підказка

Замена текстовым плейсхолдерам

Текстові плейсхолдеры часто використовують в якості підказок щодо того, що потрібно ввести в це поле. Це також погана практика з тих же причин, описаним раніше. Навіть ще більш сумнівна через обсягів тексту. Дизайнери і розробники, не розуміють призначення плейсхолдеров, часто пишуть у них довгі повідомлення. Цій практиці є багато хороших замін, як, наприклад, 3 практики, проілюстровані вище.

Плейсхолдер як другий лейбл

Замена текстовым плейсхолдерам

Так і хочеться використовувати плейсхолдеры для вторинних лейблів, як показано вище. Проте якщо використовувати звичайні лейбли для цих цілей, підвищується юзабіліті форми.

У форм виникає менше проблем з юзабіліті, коли плейсхолдеры не використовуються зовсім, або замінюються на запропоновані вище альтернативи. Але якщо вам обов’язково потрібно…

Правильні способи застосування плейсхолдеров:

Плейсхолдеры повинні бути світліше введеного тексту

Замена текстовым плейсхолдерам

Користувачі заповнюють прогалини. Порожні поля так і просяться, щоб їх заповнили. Плейсхолдер може збентежити користувача, може здатися, що поле вже заповнено. Особливо відноситься до тих випадків, коли плейсхолдерам задані яскраві кольори, тому що користувачі помилилися при введенні даних.

Плейсхолдеры повинні бути видні на всіх екранах

Замена текстовым плейсхолдерам

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

Плейсхолдеры не повинні зникати при кліці по полю

Замена текстовым плейсхолдерам

Зникаючі плейсхолдеры навантажують короткочасну пам’ять користувача, тому що підказка пропадає, як тільки поле отримує фокус.

Загалом, юзабіліті форм зазвичай вище, коли плейсхолдеры не використовуються.

Більш докладно прочитати про поширені проблеми з плейсхолдерами ви можете в чудовій статті по плейсхолдерам Кеті Шервін з Norman Group.

Стаття входить в серію з вивчення UI шаблонів і компонентів. Я планую писати статті в тиждень. Ці статті і дизайн є частиною більш масштабної ініціативи по створенню бібліотеки шаблонів інтерфейсів, зосередженої на перетині юзабіліті і візуальної краси. Зацікавлені можуть підписатися на мої оновлення.