Формы являются неотъемлемой частью пользовательского интерфейса, независимо от того, работаете ли вы над мобильными приложениями или веб-инструментами. Они являются лучшим источником пользовательских взаимодействий. Пользователь предоставляет свою информацию и вводит ее через формы, а система интерпретирует эту информацию для выполнения пользовательских запросов.
Существуют определенные элементы, которые позволяют использовать форму, включая элементы управления вводом, проверку введенной информации, обработку ошибок и пользовательский фидбек.
Существует два важных элемента управления – Radio Buttons и Drop-Down menu. Оба они могут использоваться взаимозаменяемо, когда от пользователя требуется ввод данных.
Однако, если мы изучим юзабилити этих элементов управления, становится очевидным, что в некоторых сценариях следует использовать или Radio Buttons, или Drop-Down menu, чтобы облегчить пользователю выбор вводимых данных.
Ниже приведено несколько правил, основанных на этом исследовании юзабилити, которые помогут вам решить какой из этих элементов управления использовать при разработке формы.
Используйте Radio Buttons
Правило #1: Когда вы хотите выделить варианты
Могут быть несколько случаев, когда вы хотите выделить варианты:
- Нет четкого стандартного или рекомендуемого варианта.
- Вы хотите, чтобы пользователь прочитал все варианты.
- Варианты незнакомы пользователю, и вероятность того, что он сможет их предсказать не велика или вообще отсутствует.
Когда варианты необходимо выделить
Например, использование раскрывающегося списка не кажется хорошим вариантом по умолчанию, потому что не дает информации о других вариантах.
Правило #2: Когда у вас меньше 5 вариантов
Когда у вас мало вариантов разместите их рядом, чтобы:
- Пользователь быстро и легко просмотрел все варианты.
- Получить быстрый ответ вместо открытия раскрывающегося меню и выбора из нескольких вариантов.
Мало вариантов
Лучше использовать Radio Buttons, когда пользователю надо выбирать из 2-4 вариантов, как показано в примере.
Правило #3: Когда нужно, чтобы сравнение вариантов было понятным
Сравниваемые варианты хорошо размещать бок о бок, потому что:
- Пользователь может сразу увидеть их и легко сравнить.
- Для сравнения и выбора вариантов из раскрывающегося списка требуется время.
- Пользователь должен открыть меню и сравнивать варианты каждый раз, когда он хочет просмотреть выбранный параметр.
Требуется сравнение вариантов
Хорошим примером выше является выбор плана подписки, где пользователь должен принять серьезное решение.
Правило #4: Когда наглядность и быстрый ответ в приоритете
Наглядность и быстрый просмотр вариантов более понятны для пользователя:
- Для длинных форм становится проще и быстрее просматривать варианты и отмечать нужные.
- Нажатие на раскрывающееся меню каждый раз, чтобы выбрать что-то, занимает много времени.
Длинные формы - Survey Monkey Questionnaire
Из приведенного примера видно, что длинные формы обеспечивают хороший пользовательский опыт, когда все выбираемые варианты видны пользователю.
Используйте Drop-Down menu
Правило #5: Когда вариант по умолчанию является рекомендуемым
Просмотр только рекомендованного варианта облегчает пользователю выбор, потому что:
- Отображение всех вариантов отвлекает внимание пользователя.
- Пользователю не рекомендуется изменять параметр по умолчанию.
Вариант рекомендуемый по умолчанию
В примере нет необходимости отображать все варианты, так как малая вероятность, что пользователю будет нужно изменить этот параметр по умолчанию.
Правило #6: Когда доступно большое количество знакомых вариантов
Большое количество знакомых вариантов рекомендуется отображать в раскрывающемся списке, потому что:
- Пользователь может легко предсказать их.
- Нет необходимости, чтобы он видел варианты рядом.
Много близких вариантов
Правило #7: Когда у вас больше 7 вариантов
Большое количество вариантов лучше не отображать рядом, потому что:
- Интерфейс становится загроможденным. Пользователь может запутаться, глядя на варианты, расположенные рядом.
- Требуется время для сканирования большого списка вариантов переключателей.
Больше 7 вариантов
Кроме того, для длинного раскрывающегося списка рекомендуется использовать текстовое поле, в котором пользователь может ввести название варианта, а список отображает только параметры фильтрации. Это делает выбор проще и быстрее.
Введите вариант для фильтрации списка
Вывод
Для улучшения пользовательского опыта форм очень важно предоставить пользователю правильные элементы управления. Поскольку формы могут быть очень длинными с большим количеством вариантов, то дополнительные клики для заполнения информации становятся для пользователя утомительными. Данный набор правил поможет вам при разработке форм выбрать между двумя элементами управления: переключателями и раскрывающимися меню.
Спасибо за прочтение. Другие статьи по теме вы можете прочитать на uxdworld.com
Подписывайтесь на автора: Medium | Linkedin | Twitter
Перевод статьи Saadia Minhas
Топ коментарі (0)