Удобство использования полей ввода с заполнителями

Question

У меня простой вопрос относительно удобства использования.

Какой предпочтительный способ иметь заполнители (пустые тексты) при вводе текста:

A) Держите их видимыми, пока пользователь не сфокусирует поле.

B) Отображать их, пока пользователь не наберет первый символ.

Большинство веб-сайтов используют опцию A, возможно, потому, что это проще сделать (просто прослушайте событие фокуса и очистите предыдущий заполнитель текста и сбросьте цвет текста на черный).

Однако я видел вариант B, также используемый в нескольких случайных местах. На мой взгляд, плюсы:

A

• Простота реализации
• Очистить для пользователя

B

• Если вы перемещаетесь по форме с помощью клавиши табуляции, пользователи обычно нажимают клавишу табуляции перед чтением следующего поля, и в этом случае пустой текст уже пропал, и пользователю будет труднее узнать, что печатать. Им понадобится Shift-Tab, чтобы вернуть пустой текст, затем прочитать его и перейти к нему.

Еще один вопрос: если использовалась опция B, должен ли пустой текст возвращаться после того, как пользователь удаляет текст (и все еще имеет фокус)?

Answer 1

я бы, конечно, сделал поля ввода типа twitter страница входа.

это как ваш путь B и очень приятная анимация.

Answer 2

В духе юзабилити и доступности у вас должен быть <label>, который всегда присутствует.На мой взгляд, текст-заполнитель наиболее эффективен, когда используется в качестве помощника или для указания форматирования и т. Д.

Например, у вас может быть форма входа, запрашивающая имя пользователя и пароль, где имя пользователя является адресом электронной почты.Тогда местозаполнителем может быть образец адреса электронной почты, который очищается в фокусе (но метка 'username' все еще видна).

Пример (с использованием атрибута заполнителя HTML5):

<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="myemail@email.com" />