Привет, Хабр! Представляю вашему вниманию перевод статьи " 10 советов по созданию идеальных форм ".
Формы действуют как портал между пользователем и системой и часто являются ядром страницы.
Авторизация, регистрация, обновление статуса, ввод платежной информации или адреса доставки контролируются формами.
Для интернет-магазинов важную роль играют грамотно продуманные формы.
По моему собственному опыту, хороший дизайн удваивает онлайн-продажи.
Поскольку формы выполняют важные функции для пользовательского интерфейса, существуют правила их проектирования.
1. Начните с ввода данных
Начните с самого простого элемента — текстового поля.Это наиболее распространенный компонент многих форм, поэтому, если вы все сделаете правильно, вы уже на полпути.
Форма состоит из трех основных элементов: текстового поля, заголовка и сообщения об ошибке.
Какой бы дизайн вы ни выбрали для их создания, убедитесь, что пользователь знает, какая информация требуется и, в случае возникновения ошибки, как от нее избавиться.
Заголовки должны быть вверху
Тренды рождаются и умирают. Сейчас модно размещать заполнитель в качестве заголовка.Его использование, хотя и не является неправильным, все же вызывает некоторые проблемы UX (примечание: «пользовательский опыт»).
Дело в том, что когда поле заполнено, пользователь не видит заголовок.
Заголовки всегда должны быть видны.
Поэтому их размещают сверху.
Почему вверху, а не слева от поля ввода данных? Когда заголовок находится слева от текстового поля, элементы на экране телефона будут перемещаться относительно друг друга.
Сначала подумайте, как все будет выглядеть на экране вашего телефона.
Помогите пользователю, предоставив пример в заполнителе.
Еще одним аргументом в пользу размещения заголовков над полем ввода данных является то, что пользователь читает информацию по вертикальной строке, поскольку исследования показывают, что это быстрее, чем перемещение глаза из левого столбца вправо.
2. Сообщение об ошибке и предупреждения.
Стандартное текстовое поле требует сообщений об ошибках.
Вот 3 совета по их проектированию:
Ошибка возникает как на клиенте, так и на сервере.
На стороне клиента проблемы выявляются, когда обязательное поле не заполнено или указан неправильный адрес электронной почты:
- Сервер проверяет, существует ли данное электронное письмо;
- Пользователь уведомляется об ошибке на стороне клиента перед отправкой формы.
Ошибки необходимы для того, чтобы пользователь не предоставил неверную информацию.
Уточните сообщения об ошибках
Предоставьте информацию о том, какое поле содержит ошибку.В целях безопасности некоторые разработчики не указывают ошибку в почте или пароле при авторизации, и это абсолютно нормально.
Но когда пользователь подписывается на рассылку новостей или вводит свой адрес при совершении покупки, сообщите ему, какое поле неверно и почему.
Каждый раз, когда вы создаете текстовое поле, проверяйте, как будет выглядеть ошибка до и после нажатия кнопки «отправить».
Используйте предупреждения
Сообщите пользователю, если поле требует определенных критериев, например, если пароль должен содержать определенное количество символов или сочетать цифры и буквы.Укажите, насколько надежный пароль, зарегистрирована ли почта на сайте, не занят ли логин.
3. Используйте одинаковые формы
Визуально форма выглядит более лаконично, если использовать их комбинации.Подумайте, как пользователь будет использовать форму со своего телефона.
Если все поля текстовые, пользователю придется постоянно открывать клавиатуру.
Для разнообразия предложите пользователю переключиться с текстового поля на раскрывающийся список или переключатель и обратно.
Подумайте, как пользователь держит телефон и как исключить неудобства, вызванные совмещением одинаковых полей ввода данных.
4. Радиокнопки, раскрывающиеся списки и флажки.
Иногда возникает путаница при выборе радиокнопки, раскрывающегося списка и флажка.
Радиокнопка отлично подходит для предоставления небольшого количества возможных ответов.
Заранее выберите возможный ответ или пропустите это поле.
Радиокнопка — лучшее решение, когда вы можете выбрать только один вариант. Если требуется больше элементов, более подходящим вариантом будет раскрывающийся список (на практике более 5-6 ответов).
Вы также можете выбрать элемент по умолчанию или установить заполнитель «Выбрать элемент».
Флажок — лучший выбор, когда вам нужно заполнить только одно поле (например, условия) или существует более одного варианта ответа.
Если вы хотите выбрать, какие рекламные электронные письма отправлять пользователю, флажок позволит вам сделать более одного выбора.
Использование флажка вместо переключателя не должно ограничивать ваши решения по дизайну пользовательского интерфейса.
Как дизайнер, вы имеете большую свободу в выборе того, как элементы пользовательского интерфейса (UI) будут отображаться на экране.
Даже если вы захотите как-то изменить чекбоксы, чтобы сделать их более интересными, это не должно повлиять на пользовательский опыт. Вместо написания текста рядом с маленькими кружками вы можете создавать картинки или значки для выбора.
5. По возможности удаляйте необязательные поля.
Если цель бизнеса — продать продукт, то ваша цель как дизайнера — устранить как можно больше трений между пользователем и системой.
Удаление ненужных полей позволит пользователю прикладывать меньше усилий.
При оформлении заказа важно знать различные виды форм оплаты и доставки.
Если отдел продаж хочет узнать предпочтения клиентов, вы можете сделать это при подтверждении электронной почты.
Всегда ищите способы использовать как можно меньше видимых полей.
Если вы хотите оптимизировать свой интернет-магазин, минимизируйте количество полей для адреса доставки и оформления заказа.
Если вы разрабатываете интерфейс для бронирования авиабилетов, покажите пользователю наименьшее количество полей, необходимых для просмотра доступных рейсов.
Тогда можно предложить больше условий: количество мешков и т.д. 
6. Используйте автозаполнение для больших форм
В зависимости от названия улицы заполнение адресной строки может занять много времени, особенно с телефона.Правильно написать адрес может быть еще сложнее.
Рассмотрите возможность использования GoogleMapsAPI для автоматического заполнения названий улиц.
Это означает, что пользователю необходимо ввести всего несколько символов и выбрать нужную улицу из предоставленного списка.
Вы также можете автоматически ввести почтовый индекс на основе названия улицы, но мы обсудим это позже.
7. Используйте условную логику
Используйте логику, чтобы ввести некоторую информацию для пользователя, чтобы облегчить ему жизнь.
- Если известна страна пользователя, дизайн может содержать дополнительные поля («штат», если вы находитесь в США, «округ», если вы находитесь в Ирландии и т.д.)
- Используйте почтовый индекс, чтобы ввести название города, штата или провинции.
- Если вы рассчитываете страну пользователя по IP-адресу, можно ли вставить код страны в поле телефона?
Есть вероятность, что вы в чем-то ошибетесь.
Например, вы используете GoogleMapsAPI, чтобы найти улицу в Германии.
Зная название улицы, вы можете получить код города.
Однако некоторые улицы в Германии достаточно велики, чтобы охватить разные коды, поэтому в случае приграничных улиц информация может быть неточной.
Всегда предоставляйте пользователю возможность вводить данные, когда это необходимо.
Использование условной логики для всех стран мира было бы слишком большой работой, поэтому вам нужно осознавать ценность своих усилий.
Посмотрите на страны, откуда чаще всего поступают заказы, и начните оптимизировать для них в первую очередь.
Если это приведет к увеличению доходов, сделайте то же самое для других стран.
8. Правильно используйте заполнитель
Ранее мы обсуждали, что заполнитель используется не всегда, поскольку он исчезает при вводе информации.Но мы не рассмотрели другие способы его использования, которые могут помочь пользователю.
Плейсхолдер — отличная возможность показать пользователю, как вводить информацию.
Хорошим примером является ввод номера телефона.
Нужно ли пользователю вводить код страны? Или код города? Если требуется номер телефона или номер карты в определенном формате, сообщите об этом пользователю, предоставив пример заполнения заполнителя.
Это отличный способ исключить ошибки, просто указав, какая информация необходима: код страны и т. д. 
9. Сообщите о следующих шагах
Если после заполнения последует другая форма ввода, сообщите об этом пользователю.Вместо «Далее» или «Оплатить» можно написать «Проверить заказ» или «Оплата через PayPal».
Добавьте сообщения, указывающие следующие действия после нажатия кнопки.
Будет ли заказ выполнен или пользователь успеет все проверить? Будет ли он продолжать платить? Всегда ищите способы обеспечить комфорт пользователю, особенно если это связано с его банковским счетом.
Меня раздражает каждый раз, когда я покупаю на Amazon, потому что не получаю всю информацию, включая стоимость доставки, до последнего шага.
Будьте честны со своим пользователем.
Установите доверие, предоставляя необходимую информацию на каждом этапе процесса и четко объясняя, чего ожидать по мере продвижения.
10. Продолжайте искать способы оптимизации
После того как вы запустили новую яркую форму, продолжайте ее анализировать.Если вы обнаружите, что многие пользователи покидают ваш сайт, выясните, почему.
Проведите опрос, чтобы выяснить, почему пользователи испытывают дискомфорт, а затем постарайтесь устранить этот дискомфорт. Для дизайнера работа никогда не бывает «полностью законченной».
Заключение
Иногда дизайн форм не так уж и интересен, но если он сделан хорошо, он может изменить пользовательский опыт сайта или приложения.Проектируйте формы более тщательно, чтобы пользователю было проще.
Четко излагайте последующие инструкции, предоставляйте подсказки с предупреждениями и заполнителями, а также предлагайте автозаполнение, чтобы пользователи не вводили слишком много текста.
Теги: #Разработка сайтов #UX #Юзабилити #веб-дизайн #ui
-
Персидский Язык
19 Oct, 24 -
Salestep.ru — Антикризисный Стартап
19 Oct, 24 -
Openoffice.org Теперь В Ростелекоме
19 Oct, 24 -
Узелки
19 Oct, 24 -
Как Создавать Сайты, Готовые К Локализации
19 Oct, 24
