14 лайфхаков для дизайна UX-форм

Как не оттолкнуть пользователя и спроектировать в вашем приложении удобную форму для ввода данных? Дизайнеры SimbirSoft поделились советами по созданию UX-форм. Продолжаем серию статей о дизайне, в основе которой наша практика разработки интерфейсов и прототипов сервисов для финансовой, страховой, медицинской и других отраслей.

Лучше не делать форму слишком длинной и отказаться от необязательных фрагментов. Если они все-таки важны вам, оставьте не больше двух и выделите их визуально.

Пользователи быстрее "сканируют" данные и меньше отвлекаются, заполняя форму из одной колонки, а не из двух и более.

Отойти от этого принципа можно в том случае, когда ожидаемо, что поля будут идти друг за другом по горизонтали. При этом для удобства заполнения желательно сгруппировать поля: например, имя и фамилия, улица и дом.

Группируя поля по смыслу, подберите к разделам заголовки и добавьте пространство между ними. Разделение на блоки поможет пользователю сосредоточиться и быстрее завершить заполнение. Если информации много, то лучше разделить вашу форму на шаги: один экран — один шаг.

Объясните пользователю, какие данные вы ожидаете получить от него. Помните, что «номер паспорта» не означает «серия и номер паспорта», а «адрес» может иметь разную степень детализации.

При случайном сбросе данных у пользователя зачастую нет мотивации для того, чтобы заполнять всё заново (если речь не идёт о заполнении визы и прочих важных документов, например, на Госуслугах). Постарайтесь не выводить на экран те или иные «опасные» действия. Если все же необходимо оставить кнопку «Отмена», сделайте ее менее акцентной и добавьте уведомление для пользователя о том, к каким действиям приведет нажатие.

Если при вводе была допущена ошибка, подсветите только те поля, которые требуют изменений. Подскажите пользователю, что же он сделал не так и как ему это исправить.

При этом лучше не располагать описание ошибки под вспомогательным текстом, который высвечивается при первичном вводе, а заменить одно на другое.

По возможности не вставляйте ссылки или кнопки, которые ведут на другие страницы. Используйте их только в крайних случаях, так как после перехода пользователь может не вернуться к заполнению.

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

Placeholder — это вспомогательный текст внутри поля, который скрывается во время ввода информации. Чаще всего он ухудшает юзабилити формы, так как усложняет процесс проверки данных.

Самый неудачный вариант — плейсхолдеры для названия поля. Респондент может отвлечься, и тогда ему придется нажимать на соседние области, чтобы вспомнить, какая информация от него требовалась.

Мало кому нравится вводить пароль повторно, тем более что всегда можно ошибиться. Вместо этого лучше добавить возможность скрыть либо показать пароль, чтобы проверить данные и вместе с тем сохранить время пользователя.

Если доступные опции спрятаны в выпадающем списке, то пользователю придется заполнять форму как минимум в два клика. Используйте такой вариант только тогда, когда для выбора предлагаете более 3 пунктов.

Селекторы — это любые элементы интерфейса, предназначенные для выбора из множества вариантов.

Ввести дату вручную проще, чем найти ее в календаре — пикере. Предположим, пользователь родился в июне, и ему предлагают заполнить дату рождения двумя способами. Для того чтобы написать «06», потребуется 2 клика, а для того чтобы добраться до этого месяца в календаре — 5.

Использовать пикер можно в следующих случаях:

Для указания количества (товаров, пассажиров и так далее) лучше использовать «-\+» с возможностью ввода вручную.

Размер полей лучше подстраивать под ожидаемое содержимое. Это позволит более эффективно использовать пространство на экране, к тому же, будет проще определить, сколько символов должно быть в поле.

Кнопку в конце формы лучше не скрывать и не делать ее неактивной, так как это может запутать пользователя. Пусть она будет всегда в активном состоянии. Если пользователь ввел не все данные, просто подсветите необходимые к заполнению поля.

Чем больше действий находится в форме, тем больше времени потребуется пользователю для принятия решения. Кроме того, если заполнение происходит с компьютера, после ввода последнего поля многие нажимают «Enter» для подтверждения. При наличии дополнительных кнопок пользователь не будет уверен, какое именно действие он активирует. Лучше избегать такого сценария.