в сообщении 1356 что указывается в поле для ввода сдо
Обязательно или нет? Как отмечать поля в формах
Привет, я Антон, UX-дизайнер в eLama — платформе для автоматизации интернет-рекламы. Мы довольно часто работаем с формами. Раньше мы выделяли обязательные поля, но увидели мнение, что этот подход не самый правильный. Мы решили разобраться, а как правильно, но быстро поняли, что единых правил нет: кто-то делает акцент на обязательных полях, кто-то, наоборот, говорит, что некоторые поля можно пропустить. Попробуем сравнить самые распространенные подходы.
Все делают по-разному
Самые распространенные способы
1. Отмечать обязательные поля звездочкой
➕ Занимает мало места.
➖ Обычно обязательных полей больше, чем необязательных, поэтому визуального шума тоже больше.
➖ Требуют расшифровки в коде для скринридера.
2. Подписывать необязательные поля
➕ Скорее всего, таких отметок будет немного, а значит, визуального шума будет меньше, чем от звездочек.
➕ Мы не давим на пользователя и не принуждаем его заполнять поля. Наоборот, мы экономим его время, показывая ему, что некоторые поля можно пропустить.
➖ Отметка может потеряться на фоне заголовка, и пользователь может ее не увидеть.
➖ Неочевидно, что поля в верхней части формы нужно заполнить обязательно. Пользователь может понять это, только когда увидит необязательные поля.
3. Вообще не отмечать поля, а показывать ошибки при отправке формы
➕ Отсутствие визуального шума. Особенно это важно в больших формах.
➖ Не всем понравится заполнять форму повторно после того, как она загорится красным.
➖ Не сразу понятно, какие поля можно пропустить, а какие нет.
4. Отмечать обязательные поля звездочкой, а необязательные —подписывать
➕ Согласно этому исследованию, такие формы самые удобные: пользователь сразу видит, какое поле пропустить можно, а какое нет.
➖ В больших формах такие отметки создают визуальный шум.
➖ Требуют расшифровки в коде для скринридера.
Важно: ставить обязательные поля выше необязательных
Если пользователь не заметит отметки, он скорее заполнит верхние поля. Если форма разбита на смысловые группы, в каждой из них обязательные поля должны быть выше, чем необязательные.
Как делаем в eLama
Мы решили использовать четвертый способ, потому что удобство пользователя важнее, и это преимущество перевешивает недостатки подхода.
Так обязательное поле не теряется даже в большой форме
Но в некоторых случаях мы используем и третий способ.
Когда не ставим отметки
1. Если поле одно
Чтобы разблокировать кнопку, можно сделать только одно: заполнить поле
2. Если можно заполнить любое поле
Кнопка разблокируется, если заполнить любое из полей
Вместо заключения
Кроме этих способов наверняка есть и другие. Важно выбрать один-два подхода, которые подходят вашему продукту.
Спасибо Сергею Токареву и Елене Отроковой за помощь в подготовке материала и редактуру.
Тестирование веб-формы
Вот все, что я придумала. Подскажите, какие еще могут быть тестовые случаи при тестировании такой веб-формы? а также хотелось бы услышать критику моих тестовых случаев.
Для новичка список очень не плох)
Через копирование-вставку ввести можно и символ табуляции
Требования нет, но можно ведь просто проверить сколько символов допускает поле ввода, или проверить есть ли ограничения по длине ввода, а также проверить отображение «бесконечно» длинного куска текста. Или такая формулировка некорректна?
Требования нет, но можно ведь просто проверить сколько символов допускает поле ввода, или проверить есть ли ограничения по длине ввода, а также проверить отображение «бесконечно» длинного куска текста. Или такая формулировка некорректна?
Некорректна.
Допустим вы экспериментально установили, что максимальная длина строки 100 символов. Это правильная реализация или нет? Может заказчик хотел 300?
Ограничение вы можете и не найти никогда, кстати) Ну за приемлемое время.
Так же вопрос как вы будете проверять бесконечность? Сколько символов надо ввести, чтобы сказать что форма принимает строку бесконечной длины?
Можно еще вспомнить про Usability: Размеры поля для текста достаточны для той информации, которую туда предполгается вводить? Надо обязательно кликать на кнопку или по Enter тоже работает? А отображаемый текст удобно воспринимать? Хорошо ли он отформатирован или приходится скроллить в вслучае длинных строк? Какого размера данный текст, удобен ли этот размер для предполагаемых пользователей?
Если минарет, значит выше всех (с)
Требования нет, но можно ведь просто проверить сколько символов допускает поле ввода, или проверить есть ли ограничения по длине ввода, а также проверить отображение «бесконечно» длинного куска текста. Или такая формулировка некорректна?
Некорректна.
Допустим вы экспериментально установили, что максимальная длина строки 100 символов. Это правильная реализация или нет? Может заказчик хотел 300?
Ограничение вы можете и не найти никогда, кстати) Ну за приемлемое время.
Так же вопрос как вы будете проверять бесконечность? Сколько символов надо ввести, чтобы сказать что форма принимает строку бесконечной длины?
Можно еще вспомнить про Usability: Размеры поля для текста достаточны для той информации, которую туда предполгается вводить? Надо обязательно кликать на кнопку или по Enter тоже работает? А отображаемый текст удобно воспринимать? Хорошо ли он отформатирован или приходится скроллить в вслучае длинных строк? Какого размера данный текст, удобен ли этот размер для предполагаемых пользователей?
А насчет ограничений по длине ввода, я бы стала действовать экспериментально.