Как не оттолкнуть пользователя и спроектировать в вашем приложении удобную форму для ввода данных? Дизайнеры SimbirSoft поделились советами по созданию UX-форм. Продолжаем серию статей о дизайне, в основе которой наша практика разработки интерфейсов и прототипов сервисов для финансовой, страховой, медицинской и других отраслей.
Качественный дизайн на 88% увеличивает вовлеченность клиентов продукта, а каждый вложенный в UX доллар, по оценкам The American Genius, способен принести стократную прибыль.
Лайфхак 1: Сократите, насколько возможно
Лучше не делать форму слишком длинной и отказаться от необязательных фрагментов. Если они все-таки важны вам, оставьте не больше двух и выделите их визуально.
Лайфхак 2: Проектируйте форму в одну колонку
Пользователи быстрее "сканируют" данные и меньше отвлекаются, заполняя форму из одной колонки, а не из двух и более.
Отойти от этого принципа можно в том случае, когда ожидаемо, что поля будут идти друг за другом по горизонтали. При этом для удобства заполнения желательно сгруппировать поля: например, имя и фамилия, улица и дом.
Лайфхак 3: Объединяйте в смысловые группы
Группируя поля по смыслу, подберите к разделам заголовки и добавьте пространство между ними. Разделение на блоки поможет пользователю сосредоточиться и быстрее завершить заполнение. Если информации много, то лучше разделить вашу форму на шаги: один экран — один шаг.
Лайфхак 4: Формулируйте подсказки понятно
Объясните пользователю, какие данные вы ожидаете получить от него. Помните, что «номер паспорта» не означает «серия и номер паспорта», а «адрес» может иметь разную степень детализации.
Лайфхак 5: Откажитесь от опасных действий
При случайном сбросе данных у пользователя зачастую нет мотивации для того, чтобы заполнять всё заново (если речь не идёт о заполнении визы и прочих важных документов, например, на Госуслугах). Постарайтесь не выводить на экран те или иные «опасные» действия. Если все же необходимо оставить кнопку «Отмена», сделайте ее менее акцентной и добавьте уведомление для пользователя о том, к каким действиям приведет нажатие.
Лайфхак 6: Укажите, в чем ошибки
Если при вводе была допущена ошибка, подсветите только те поля, которые требуют изменений. Подскажите пользователю, что же он сделал не так и как ему это исправить.
При этом лучше не располагать описание ошибки под вспомогательным текстом, который высвечивается при первичном вводе, а заменить одно на другое.
Лайфхак 7: Не уводите пользователя
По возможности не вставляйте ссылки или кнопки, которые ведут на другие страницы. Используйте их только в крайних случаях, так как после перехода пользователь может не вернуться к заполнению.
Так, в формах для электронных обращений зачастую дают ссылки на законодательные нормы, чтобы пользователи ознакомились со всеми требованиями перед отправкой письма и специалисты получали меньше некорректных обращений.
Лайфхак 8: Не используйте placeholder без необходимости
Placeholder — это вспомогательный текст внутри поля, который скрывается во время ввода информации. Чаще всего он ухудшает юзабилити формы, так как усложняет процесс проверки данных.
Самый неудачный вариант — плейсхолдеры для названия поля. Респондент может отвлечься, и тогда ему придется нажимать на соседние области, чтобы вспомнить, какая информация от него требовалась.
Лайфхак 9: Не просите повторить пароль
Мало кому нравится вводить пароль повторно, тем более что всегда можно ошибиться. Вместо этого лучше добавить возможность скрыть либо показать пароль, чтобы проверить данные и вместе с тем сохранить время пользователя.
Лайфхак 10: Проверьте, нужны ли вам выпадающие списки
Если доступные опции спрятаны в выпадающем списке, то пользователю придется заполнять форму как минимум в два клика. Используйте такой вариант только тогда, когда для выбора предлагаете более 3 пунктов.
Лайфхак 11: Осторожно используйте селекторы для дат и количества
Селекторы — это любые элементы интерфейса, предназначенные для выбора из множества вариантов.
Ввести дату вручную проще, чем найти ее в календаре — пикере. Предположим, пользователь родился в июне, и ему предлагают заполнить дату рождения двумя способами. Для того чтобы написать «06», потребуется 2 клика, а для того чтобы добраться до этого месяца в календаре — 5.
Использовать пикер можно в следующих случаях:
когда нужно выбрать тот или иной период (например, при бронировании отеля);
- когда нужно выбрать дату из нескольких вариантов (например, при записи на прием в клинике).
Для указания количества (товаров, пассажиров и так далее) лучше использовать «-\+» с возможностью ввода вручную.
Лайфхак 12: Используйте поля разного размера
Размер полей лучше подстраивать под ожидаемое содержимое. Это позволит более эффективно использовать пространство на экране, к тому же, будет проще определить, сколько символов должно быть в поле.
Лайфхак 13: Оставляйте кнопки активными
Кнопку в конце формы лучше не скрывать и не делать ее неактивной, так как это может запутать пользователя. Пусть она будет всегда в активном состоянии. Если пользователь ввел не все данные, просто подсветите необходимые к заполнению поля.
Лайфхак 14: Ограничьтесь основными кнопками
Чем больше действий находится в форме, тем больше времени потребуется пользователю для принятия решения. Кроме того, если заполнение происходит с компьютера, после ввода последнего поля многие нажимают «Enter» для подтверждения. При наличии дополнительных кнопок пользователь не будет уверен, какое именно действие он активирует. Лучше избегать такого сценария.
Вроде казалось бы мелочи, которые не сразу бросаются в глаза, но ведь "мелочи создают совершенство". За наглядность отдельное "спасибо"!
Спасибо, рады, что материал был вам полезен)
С 14 пунктом не могу согласиться.
Иногда человек заранее понимает, что не помнит пароль и что ему делать, когда есть только log in?
Конечно, мое несогласие больше относится к примеру
Сначала только кнопка лог ин и ничего лишнего. Чтоб не отвлекало. Дальше сценарий может развиваться двумя путями - удачный и нет. В первом случае вход в систему выполняется и все шито-крыто. Если же пароль оказался неверным, то тогда уже дается возможность попытаться снова и появляется кнопка сброса пароля (и иногда бесячая рекапча).
А ели это регистрация, а не вход в систему, то пароль невозможно забыть, тк он еще только создается, первичный вход же.
Да. Ты прав за два сценария. Но я говорю о третьем, где человек помнит свой log, но не помнит пароль.
В таком случае человек хочет пойти по пути быстрого восстановления, а не вбивать в пассворд рандомную сущность и нажимать при этом лог ин, чтобы появилась желаемая кнопка восстановления.
Не факт, что он еще поймет для себя такой сценарий восстановления.
И как же вообще может смутить «забыли пароль» при входе в систему с очевидной кнопкой «войти»?
выгодно ли сейчас идти в дизайны интерфейсов?
я оч люблю всю эту штуку, но боюсь конкуренции нейросетей
и возможную смерть профессии через 5 лет
есть такое?
и что посоветуете чтоб вкатиться с граф диза - в ui/ux
До этого ещё далеко. Индивидуальные хотелки ИИ ещё не скоро сможет исполнять. Автоматизация пока не на том уровне, чтобы решить любые задачи. Но все же в дизайне относительно низкий потолок по зп — это 250-300к на этапе Арт-директора с седыми волосами на пятой точке, далее только создавать свою команду и не бояться рисков (а конкуренция высокая). Но если хочется больше денег и актуальности с большим запасом — то у программистов потолок намного выше, но и порог вхождения, соответственно.
4ый пункт, так и не понял по картинке
Иногда пользователю бывает нужна подсказка, как указать адрес – кратко (страна, город) или подробно, вплоть до почтового индекса
Хотя автоматизация охватывает многие профессии, мы считаем, что в ближайшие годы нейросети точно не заменят дизайнеров в IT, но сделают их работу проще. Что касается обучения, для графического дизайнера UI/UX – это логичный шаг.
Понять основы, как правило, можно с помощью различных курсов (не обязательно дорогих). После этого в освоении необходимых навыков и инструментов главную роль будет играть практика, поэтому мы рекомендуем как можно больше практиковаться, в идеале под руководством опытного ментора. Больше советов для начинающих UI/UX-дизайнеров можно найти в наших соцсетях, например, здесь: https://vk.com/wall-45285702_5401
Дизайнер учится всегда, и со своей стороны мы желаем вам успехов в изучении профессии)
.
12 и 13 формой не совсем согласен 🤔
Не согласна с датой, ввести ее можно разными способами, как минимум словами или цифрами, и если нет выбора в календаре, то тогда должны быть хотя бы маска, чтобы подсказать пользователю в каком формате должна быть дата.
А куда спрятать вторичные кнопки, если они путают пользователей? Если их скрыть в отдельное меню, то пользователь может их и не найти, а они могут быть нужны ему
Добрый день. Для ответа на этот вопрос важно знать контекст. В общем случае, как правило, можно убрать лишнее или найти для кнопки подходящее место таким образом, чтобы процесс был понятен пользователю и он не мог совершить случайных нажатий.
Спасибо, интересная статья.
10 и 13 пункты - отлично подмечено. Это мелочи могут повлиять на конверсию.
С уважением, Сергей.
Спасибо)
С описанием 8 и 10 пунктов я бы поспорил, насчёт 11 очень жизненно, и почему-то очень популярная ошибка, как и нелогичный диапозон дат.
В 4 пункте с картинкой накосячили) Одну и ту же поставили
Добрый день. В лайфхаке №4 отличаются пояснения к полям ввода. В правом поле требуется ввести адрес (без уточнений), в левом – улицу и номер дома.