[Веб-дизайн, Интерфейсы] Обязательно или нет? Как отмечать поля в формах
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Привет, я Антон, UX-дизайнер в eLama — платформе для автоматизации интернет-рекламы. Мы довольно часто работаем с формами. Раньше мы выделяли обязательные поля, но увидели мнение, что этот подход не самый правильный. Мы решили разобраться, а как правильно, но быстро поняли, что единых правил нет: кто-то делает акцент на обязательных полях, кто-то, наоборот, говорит, что некоторые поля можно пропустить. Попробуем сравнить самые распространенные подходы.
Все делают по-разномуСамые распространенные способы1. Отмечать обязательные поля звездочкой
➕ Занимает мало места.➖ Обычно обязательных полей больше, чем необязательных, поэтому визуального шума тоже больше.➖ Требуют расшифровки в коде для скринридера.2. Подписывать необязательные поля
➕ Скорее всего, таких отметок будет немного, а значит, визуального шума будет меньше, чем от звездочек.➕ Мы не давим на пользователя и не принуждаем его заполнять поля. Наоборот, мы экономим его время, показывая ему, что некоторые поля можно пропустить.➖ Отметка может потеряться на фоне заголовка, и пользователь может ее не увидеть.➖ Неочевидно, что поля в верхней части формы нужно заполнить обязательно. Пользователь может понять это, только когда увидит необязательные поля.3. Вообще не отмечать поля, а показывать ошибки при отправке формы
➕ Отсутствие визуального шума. Особенно это важно в больших формах.➖ Не всем понравится заполнять форму повторно после того, как она загорится красным.➖ Не сразу понятно, какие поля можно пропустить, а какие нет.4. Отмечать обязательные поля звездочкой, а необязательные —подписывать
➕ Согласно этому исследованию, такие формы самые удобные: пользователь сразу видит, какое поле пропустить можно, а какое нет.➖ В больших формах такие отметки создают визуальный шум.➖ Требуют расшифровки в коде для скринридера.Важно: ставить обязательные поля выше необязательныхЕсли пользователь не заметит отметки, он скорее заполнит верхние поля. Если форма разбита на смысловые группы, в каждой из них обязательные поля должны быть выше, чем необязательные.Как делаем в eLamaМы решили использовать четвертый способ, потому что удобство пользователя важнее, и это преимущество перевешивает недостатки подхода.
Так обязательное поле не теряется даже в большой формеНо в некоторых случаях мы используем и третий способ.Когда не ставим отметки1. Если поле одно
Чтобы разблокировать кнопку, можно сделать только одно: заполнить поле2. Если можно заполнить любое поле
Кнопка разблокируется, если заполнить любое из полей Вместо заключенияКроме этих способов наверняка есть и другие. Важно выбрать один-два подхода, которые подходят вашему продукту. Спасибо Сергею Токареву и Елене Отроковой за помощь в подготовке материала и редактуру.
===========
Источник:
habr.com
===========
Похожие новости:
- [Интерфейсы, Дизайн мобильных приложений, Дизайн] Нужно ли дизайнеру интерфейсов понимать вёрстку?
- [Веб-дизайн, Разработка веб-сайтов, CSS, HTML] Боль фронтов, или что нам нужно от дизайнеров
- [Анализ и проектирование систем, Интерфейсы, Дизайн мобильных приложений, Аналитика мобильных приложений, Дизайн] Connected! Самое главное о дизайне VPN-приложения
- [Анализ и проектирование систем, Интерфейсы, Дизайн] Микромодульный подход к дизайну продукта
- [Работа с иконками, Интерфейсы, Дизайн, История IT] Забытые корни популярных иконок
- [Интерфейсы, Промышленное программирование, Управление разработкой, Микросервисы] Энтерпрайз, который выжил. Доклад в Яндексе
- [Интерфейсы, Service Desk, Звук] Как мы сделали Медицинский голосовой помощник
- [Веб-дизайн, Разработка веб-сайтов, PHP, 1С-Битрикс] Фреймворки против Битрикс
- [Интерфейсы] Совершенно новый тип дисплея для смартфонов. Изображение можно почувствовать руками. И почему я этому рад
- [Интерфейсы, Графический дизайн, Дизайн, Транспорт] Пилот F-35 пожаловался, что тачскрины вызывают ошибки, физические тумблеры были надёжнее
Теги для поиска: #_vebdizajn (Веб-дизайн), #_interfejsy (Интерфейсы), #_oboznachenie_polej (обозначение полей), #_formy_vvoda (формы ввода), #_objazatelnye_polja (обязательные поля), #_vebdizajn (
Веб-дизайн
), #_interfejsy (
Интерфейсы
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 22:08
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Привет, я Антон, UX-дизайнер в eLama — платформе для автоматизации интернет-рекламы. Мы довольно часто работаем с формами. Раньше мы выделяли обязательные поля, но увидели мнение, что этот подход не самый правильный. Мы решили разобраться, а как правильно, но быстро поняли, что единых правил нет: кто-то делает акцент на обязательных полях, кто-то, наоборот, говорит, что некоторые поля можно пропустить. Попробуем сравнить самые распространенные подходы.  Все делают по-разномуСамые распространенные способы1. Отмечать обязательные поля звездочкой  ➕ Занимает мало места.➖ Обычно обязательных полей больше, чем необязательных, поэтому визуального шума тоже больше.➖ Требуют расшифровки в коде для скринридера.2. Подписывать необязательные поля  ➕ Скорее всего, таких отметок будет немного, а значит, визуального шума будет меньше, чем от звездочек.➕ Мы не давим на пользователя и не принуждаем его заполнять поля. Наоборот, мы экономим его время, показывая ему, что некоторые поля можно пропустить.➖ Отметка может потеряться на фоне заголовка, и пользователь может ее не увидеть.➖ Неочевидно, что поля в верхней части формы нужно заполнить обязательно. Пользователь может понять это, только когда увидит необязательные поля.3. Вообще не отмечать поля, а показывать ошибки при отправке формы  ➕ Отсутствие визуального шума. Особенно это важно в больших формах.➖ Не всем понравится заполнять форму повторно после того, как она загорится красным.➖ Не сразу понятно, какие поля можно пропустить, а какие нет.4. Отмечать обязательные поля звездочкой, а необязательные —подписывать  ➕ Согласно этому исследованию, такие формы самые удобные: пользователь сразу видит, какое поле пропустить можно, а какое нет.➖ В больших формах такие отметки создают визуальный шум.➖ Требуют расшифровки в коде для скринридера.Важно: ставить обязательные поля выше необязательныхЕсли пользователь не заметит отметки, он скорее заполнит верхние поля. Если форма разбита на смысловые группы, в каждой из них обязательные поля должны быть выше, чем необязательные.Как делаем в eLamaМы решили использовать четвертый способ, потому что удобство пользователя важнее, и это преимущество перевешивает недостатки подхода.  Так обязательное поле не теряется даже в большой формеНо в некоторых случаях мы используем и третий способ.Когда не ставим отметки1. Если поле одно  Чтобы разблокировать кнопку, можно сделать только одно: заполнить поле2. Если можно заполнить любое поле  Кнопка разблокируется, если заполнить любое из полей Вместо заключенияКроме этих способов наверняка есть и другие. Важно выбрать один-два подхода, которые подходят вашему продукту. Спасибо Сергею Токареву и Елене Отроковой за помощь в подготовке материала и редактуру. =========== Источник: habr.com =========== Похожие новости:
Веб-дизайн ), #_interfejsy ( Интерфейсы ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 22:08
Часовой пояс: UTC + 5