При заполнении форм обратной связи пользователи, как правило, вводят свои данные или делают выбор из предложенных вариантов. Для этих целей нужно всего лишь предоставить поле для ввода информации.
Есть много UI элементов, которые позволяют облегчить пользователям выбор из предложенных вариантов.
Будучи дизайнером вам следует подумать, какой элемент лучше всего применить в форме обратной связи и как его оптимально спроектировать. Распространенной ошибкой является использование таких элементов управления формы, как радиобаттоны и выпадающие списки. Они являются неудобными и повышают когнитивную нагрузку на пользователя в процессе выбора нужного варианта.
Доступность для нажатия и дополнительная информация
К элементам управления трудно прикоснуться, потому что они недостаточно большого размера. Если для выбора нужного варианта пользователи используют палец, то для более точного прикосновения цели должны быть крупными. Небольшие размеры вариантов для выбора допустимы в десктопных версиях, но в мобильной версии это может стать проблемой.
К тому же радиобаттоны и выпадающие списки не предусматривают добавления описания. В результате пользователи не получают полной информации, чтобы сделать правильный выбор. Им приходится тратить больше времени на обдумывание каждого варианта, прежде чем они начнут действовать. Если они не смогут понять, в чем заключается разница между вариантами, они либо сделают собственное предположение, либо откажутся от заполнения формы.
Сочетание низкой доступности для нажатия и отсутствие дополнительной информации об услугах является причиной медленного заполнения пользователями формы ввода. Чтобы ускорить это процесс, следует снизить когнитивную нагрузку путем изменения дизайна элементов управления.
Выбор среди карточек товара/услуги
Если вы превратите переключатели в карточки товара/услуги, это положительно скажется на юзабилити. Они позволяют предоставить больше информации о каждом варианте. К названию товара/услуги вы сможете добавить в карточку текстовое описание. Когда у пользователей есть дополнительная информация, они смогут быстрее отличать варианты друг от друга, что значительно упростит для них выбор того, что им действительно нужно.
Например, при записи в парикмахерскую трудно понять, что именно включает каждый тип стрижки и сколько времени она займет. В большинстве дизайнов будут показаны только ее название и цена. Но в карточке товара/услуги вы сможете предоставить дополнительную информацию, что, в свою очередь, позволит снизить когнитивную нагрузку на пользователя.
Дополнительная информация экономит время на обдумывание того, какой вариант является более подходящим для клиента. К тому же карточки товаров/услуг являются настолько крупными по размеру, что пользователям не составит труда выбрать нужный вариант.
Чипы в качестве вариантов выбора
Иногда названия параметра и описания недостаточно, чтобы помочь пользователям сделать выбор. Отдельные чипы являются еще одной опцией предоставления клиентам необходимой информации.
Предположим, что пользователь выбирает стилиста. Он хочет попасть к мастеру, который стриг его прошлый раз, но не помнит его имя. Размещение аватара с фотографией каждого стилиста в чипах решает проблему.
Пользователь узнает мастера по фото на аватаре и сделает правильный выбор. Без изображения он не был бы уверен в своем выборе, и ему пришлось бы строить предположения. Длительные размышления увеличивают когнитивную нагрузку и замедляют принятие решения.
Календарь
Дизайнеры довольно часто используют выпадающие списки для ввода даты и времени. Однако выбор займет у пользователей много времени, потому что им придется прокручивать список меню.
Гораздо эффективнее отображать параметры даты в календаре, чтобы люди могли наглядно увидеть полную картину без прокрутки. Кроме того, календари привычны для пользователей, и им будет проще проанализировать данные и принять решение.
Используйте календари при выборе даты из множества вариантов. Так пользователи смогут сразу увидеть, какие даты доступны, а какие нет, и одним касанием сделать выбор.
Как правило, дизайнеры показывают варианты времени для записи в виде списка, который пользователям нужно прокрутить. Но лучше отобразить доступное время для записи в виде чипов. Чтобы сделать выбор еще более удобным, время следует сгруппировать по категориям, «Утро» и «День». В результате пользователям не придется сканировать каждый элемент в списке, а только ту группу, которая им нужна.
Постепенное раскрытие информации
На последнем экране должны отображаться все выбранные пользователем опции. Не следует одновременно отображать все невыбранные параметры, потому что в таком случае интерфейс будет выглядеть перегруженным. Вместо этого используйте постепенное раскрытие категорий для выбора, одну за другой.
Другими словами, необходимо показать параметр «Выберите стилиста» только после того, как пользователь выбрал тип стрижки. А опции «Выберите дату и время» только после того, как они определились со мастером. Это позволит человеку выбирать данные, не отвлекаясь на лишнюю информацию.
Если пользователям нужно изменить свой выбор, они могут отменить выбор текущей опции, чтобы снова открыть предыдущие параметры. Повторное отображение дополнительных параметров может увеличить количество информации на экране, но это не проблема. Важнее не перегружать клиентов при первоначальном заполнении формы, чтобы они не бросили ее заполнять.
Оптимальный выбор вариантов
В классических элементах управления формы обратной связи (радиобаттоны и выпадающие списки) нет того, что нужно для обеспечения оптимального выбора вариантов. Крайне важно изменить их дизайн, сделать их доступными для нажатия и более информативными. Так пользователи смогут быстрее выбирать нужные им параметры. Следуйте рекомендациям, указанным в этой статье, и тогда заполнение формы обратной связи не составит труда для пользователей.
.webp)
