Лучшие практики для мобильного дизайна форм — Smashing Magazine

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

        

(Эта статья любезно спонсируется Adobe.) Формы являются основой всех мобильных взаимодействий; он стоит между человеком и тем, что они ищут. Каждый день мы используем формы для основных онлайн-мероприятий. Вспомните последний раз, когда вы купили билет, забронировали номер в гостинице или совершили покупку в Интернете — скорее всего, эти взаимодействия содержали шаг с заполнением формы.

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

Что делает для эффективной формы

Основной целью каждой формы является завершение. Два фактора оказывают значительное влияние на коэффициент завершения:

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

Компоненты форм

Типичная форма имеет следующие пять компонентов:

• Поля ввода
  Сюда входят текстовые поля, поля пароля, флажки, переключатели, слайдеры и любые другие поля, предназначенные для ввода пользователем.
• Этикетки на местах
  Они сообщают пользователям, что означают соответствующие поля ввода.
• Структура
  Сюда входит порядок полей, внешний вид формы на странице и логические связи между различными полями.
• Кнопки действий
  Форма будет иметь хотя бы один призыв к действию (кнопка, которая запускает передачу данных).
• Обратная связь
  Обратная связь уведомляет пользователя о результате операции. Обратная связь может быть положительной (например, указывая, что форма была успешно отправлена) или отрицательная (говоря что-то вроде: «Номер, который вы указали неверно»).

В этой статье рассматриваются многие аспекты, связанные со структурой, полями ввода, ярлыками, кнопками действий и проверкой. Большинство пунктов, упомянутых в этой статье, имеют визуальное представление и не являются примерами; все такие примеры были созданы с использованием Adobe XD.

Поля ввода

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

Минимизировать общее количество полей

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

Институт Баймарда проанализировал формы выписки и обнаружил, что слишком длинный или слишком сложный процесс проверки является одной из главных причин отказа от выписки. Исследование показало, что средний чек содержит почти 15 полей формы. Большинство онлайн-сервисов могут уменьшить количество полей, отображаемых по умолчанию на 20-60%.

Многие дизайнеры знакомы с правилом «меньше больше»; тем не менее, они задают дополнительные вопросы, пытаясь собрать больше данных о своих пользователях. Возможно, возникнет соблазн собрать больше данных о ваших пользователях во время первоначальной регистрации, но сопротивляться этому соблазну. Подумайте об этом так: С каждым дополнительным полем, которое вы добавляете в свою форму, вы увеличиваете вероятность потери потенциального пользователя. Получается ли информация, полученная вами на поле, для потери новых пользователей? Помните, что, пока вы собрали контактную информацию пользователя, вы всегда можете следить за запросом на получение дополнительных данных.

Четко различать все необязательные поля

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

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

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

Размер полей Соответственно

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

Предложение полевого фокуса

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

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

Не просите пользователей повторить свой адрес электронной почты

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

Предоставить вариант «Показать пароль»

Дублирование поля ввода пароля является еще одной распространенной ошибкой среди разработчиков продуктов. Дизайнеры придерживаются этого подхода, потому что считают, что это предотвратит ошибки пользователя. На самом деле второе поле для пароля не только увеличивает стоимость взаимодействия, но также не гарантирует, что пользователи будут действовать без ошибок. Поскольку пользователи не видят, что они ввели в поле, они могут совершить ту же ошибку дважды (в обоих полях) и столкнутся с проблемой при попытке входа в систему с использованием пароля. Как резюмировал Якоб Нильсен:

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

Вместо дублирования поля пароля укажите параметр, который позволяет пользователям просматривать пароль, который они выбрали для создания. У вас есть значок или флажок, который отключает пароль при нажатии. Предварительный просмотр пароля может быть возможностью для пользователей проверить свои данные перед отправкой.

Не разрезать поля данных

Не разрезайте поля при запросе полного имени, номера телефона или даты рождения. Нарезанные поля заставляют пользователя делать дополнительные краны для перехода к следующему полю. Для полей, которые требуют некоторого форматирования (например, номера телефонов или даты рождения), также лучше иметь одно поле в сочетании с четкими правилами форматирования в качестве его заполнителя.

Избегайте раскрывающихся меню

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

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

Использование заполнителей и вложенных масок

Форматирование неопределенности является одной из наиболее значительных проблем дизайна формы. Эта проблема имеет прямую связь с отказом формы — когда пользователи не уверены в формате, в котором они должны предоставлять данные, они могут быстро отказаться от формы. Есть несколько вещей, которые вы можете сделать, чтобы сделать формат понятным.

Текст заполнителя

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

Очень важно, чтобы ваша форма имела четкое визуальное различие между текстом-заполнителем и фактическим значением, введенным пользователем. Другими словами, текст заполнителя не должен выглядеть как заданное значение. Без четкого визуального различия пользователи могут подумать, что поля с заполнителями уже имеют значения.

Masked Input

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

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

Предоставить подходящую клавиатуру

Мобильные пользователи ценят приложения и веб-сайты, которые предоставляют подходящую клавиатуру для этой области. Эта функция не позволяет выполнять дополнительные действия. Например, когда пользователям нужно вводить номер кредитной карты, ваше приложение должно отображать только dialpad. Очень важно последовательно применять клавиатуру во всем приложении (все формы в вашем приложении должны иметь эту функцию).

Установите типы ввода HTML, чтобы отобразить правильную клавиатуру. Семь типов ввода имеют отношение к дизайну формы:

• Тип ввода = «текст» отображает обычную клавиатуру мобильного устройства.
• Тип ввода = «email» отображает обычную клавиатуру и «@» и «.com».
• Тип ввода = "tel" отображает цифровую клавиатуру от 0 до 9.
• Тип ввода = «номер» отображает клавиатуру с цифрами и символами.
• input type = "date" отображает селектор даты мобильного устройства.
• Тип ввода = "datetime" отображает селектор даты и времени мобильного устройства.
• Тип ввода = «месяц» отображает селектор месяца и года мобильного устройства.

Используйте ползунок при задании определенного диапазона

Многие формы просят пользователей предоставить ряд значений (например, диапазон цен, диапазон расстояний и т. Д.). Вместо использования двух отдельных полей «от» и «до» для этой цели используйте ползунок, позволяющий пользователям указывать диапазон с помощью большого пальца.

Четко объясните, почему вы запрашиваете конфиденциальную информацию

Люди все больше беспокоятся о конфиденциальности и информационной безопасности. Когда пользователи видят запрос на информацию, которую они считают конфиденциальной, они могут подумать: «Хм, зачем это нужно?» Если ваша форма запрашивает у пользователей конфиденциальную информацию, не забудьте объяснить, зачем вам это нужно. Вы можете сделать это, добавив текст поддержки ниже соответствующих полей. Как правило, текст объяснения не должен превышать 100 символов.

Будьте осторожны со статическими значениями по умолчанию

В отличие от умных значений по умолчанию, которые рассчитываются системой на основе информации, которую система имеет о пользователях, статические значения по умолчанию являются заданными значениями в формах, одинаковых для всех пользователей. Избегайте статических значений по умолчанию, если вы не верите, что значительная часть ваших пользователей (скажем, 95%) будет выбирать эти значения — особенно для обязательных полей. Зачем? Поскольку вы, вероятно, будете вводить ошибки — люди быстро просматривают формы, и они не будут тратить дополнительное время на разбор всех вопросов; вместо этого они просто пропустят поле, считая, что оно уже имеет значение.

Защита данных пользователя

Джеф Раскин однажды сказал: «Система должна рассматривать все входные данные как священные». Это абсолютно верно для форм. Это здорово, когда вы начинаете заполнять веб-форму, а затем случайно обновляете страницу, но данные остаются в полях. Такие инструменты, как Garlic.js, помогают сохранять значения формы локально до тех пор, пока форма не будет отправлена. Таким образом, пользователи не потеряют драгоценные данные, если они случайно закроют вкладку или браузер.

Автоматизация действий

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

Вот несколько вещей, которые вы можете сделать для достижения этой цели:

Автодополнение

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

Autocapitalize

Автокапитализация автоматически делает первую букву столицей. Эта функция отлично подходит для таких полей, как имена и уличные адреса, но избегайте их для полей пароля.

автокоррекции

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

Автозаполнение персональных данных

Ввод адреса часто является самой громоздкой частью любой онлайн-формы регистрации. Сделать эту задачу проще, используя функцию браузера, чтобы заполнить поле на основе ранее введенных значений. Согласно исследованиям Google, автозаполнение помогает людям заполнять формы на 30% быстрее.

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

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

Ниже приведены несколько советов о том, как использовать датчики и устройства.

Местоположение Услуги

Можно предварительно выбрать страну пользователя на основе данных геолокации. Но иногда заполнение полного адреса может быть проблематичным из-за ошибок. API-интерфейс Google может помочь решить эту проблему. Он использует как геолокацию, так и предварительное заполнение адресов для предоставления точных предложений, основанных на точном расположении пользователя.

Используя службы определения местоположения, также можно обеспечить интеллектуальные значения по умолчанию. Например, для формы «Найти рейс» можно предварительно заполнить поле «От» ближайшим аэропортом к пользователю на основе геолокации пользователя.

Биометрическое разрешение

Самая большая проблема с использованием текстового пароля сегодня заключается в том, что большинство людей забывают пароли. 82% людей не могут запомнить свои пароли, а от 5 до 10% сеансов требуют, чтобы пользователи сбросили пароль. Восстановление пароля — большое дело в электронной коммерции. 75% пользователей не завершили покупку, если им пришлось попытаться восстановить свой пароль при проверке.

Будущее паролей — это не пароли. Даже сегодня мобильные разработчики могут воспользоваться биометрическими технологиями. Пользователям не нужно вводить пароль; они должны иметь возможность использовать биометрические считыватели для аутентификации — подписание с использованием отпечатка пальца или сканирования лица.

Камера

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

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

Голос

Устройства с голосовым управлением, такие как Apple HomePod, Google Home и Amazon Echo, активно вторгаются на рынок. Значительно выросло число людей, которые предпочитают использовать голос для общих операций. Согласно ComScore, 50% всех поисковых запросов будут голосовыми запросами к 2020 году.

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

При разработке формы вы можете предоставить голосовую запись в качестве альтернативного метода ввода данных.

Полевые метки

Напишите четкие и яркие ярлыки

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

Избегайте использования полных предложений для объяснения. Метка не является текстовой. Напишите краткие и четкие ярлыки (слово или два), чтобы пользователи могли быстро отсканировать вашу форму.

Поместите ярлык и ввод вместе друг с другом

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

Не использовать Исчезающий текст заполнителя в качестве ярлыков

В то время как встроенные ярлыки хорошо смотрятся и сохраняют ценный экран, эти преимущества намного перевешиваются значительными недостатками удобства использования, наиболее критичным из которых является потеря контекста. Когда пользователи начинают вводить текст в поле, текст заполнителя исчезает и заставляет людей вспоминать эту информацию. Хотя это может и не быть проблемой для простых двухпольных форм, это может быть большой проблемой для форм, у которых много полей (скажем, от 7 до 10). Пользователям было бы сложно вспомнить все метки полей после ввода данных. Неудивительно, что тестирование пользователей постоянно показывает, что заполнители полей формы часто вредят удобству использования, а не помогают.

Существует простое решение проблемы исчезновения заполнителей: плавающей (или адаптивной) метки. После того, как пользователь нажимает на поле с меткой-заполнителем, метка не исчезает, она перемещается вверху поля и предоставляет место для ввода пользователем своих данных.

Топовые этикетки

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

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

Приговор по делу Vs. Заголовок дела

Существует два основных способа использования слов:

• Титульный случай: используйте каждое слово. «Это дело с титулом».
• Случай с предложением: загладить первое слово. «Это предложение».

Использование фразы предложения для ярлыков имеет одно преимущество над титульным правом: немного легче (и, таким образом, быстрее) читать. Хотя разница в коротких ярлыках незначительна (нет большой разницы между «Полное имя» и «Полное имя»), для более длинных ярлыков вариант предложения лучше. Теперь вы знаете, как трудно читать длинный текст в заголовке.

Избегайте использования крышек для этикеток

Текст «все-колпачки» — текст со всеми буквами, заглавными — в порядке, в которых нет существенного чтения (например, аббревиатуры и логотипы), но избегайте всех шапок в противном случае. Как упоминалось Майлсом Тинкером в его работе «Разборчивость печати» всенаправленная печать резко замедляет скорость сканирования и чтения по сравнению с типом нижнего регистра.

Макет

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

Используйте макет одного столбца

Исследование, проведенное Институтом CXL, показало, что формы с одним столбцом быстрее завершаются, чем многоколонные формы. В этом исследовании участники теста смогли заполнить одноколоночную форму в среднем на 15,4 секунды быстрее, чем многоколоночная форма.

Несколько столбцов нарушают вертикальный импульс пользователя; с несколькими колоннами, глаза начинают зигзагообразно. Это значительно увеличивает количество фиксаций глаз и, как результат, время завершения. Более того, формы с несколькими столбцами могут вызывать ненужные вопросы пользователю, например: «С чего начать?» И «Являются ли вопросы в правой колонке одинаковыми по важности для вопросов слева?»

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

Есть некоторые исключения из этого правила. В одной строке можно разместить короткие и логически связанные поля (например, для кода города и области).

Создайте поток со своими вопросами

То, как вы задаете вопросы, также имеет значение. Вопросы следует задавать логически с точки зрения пользователя, а не по логике приложения или базы данных, поскольку это поможет создать ощущение разговора с пользователем. Например, если вы оформляете форму выписки и запрашиваете данные, такие как полное имя, номер телефона и кредитную карту, первый вопрос должен быть указан для полного имени. Изменение порядка (например, начиная с номера телефона вместо имени) приводит к дискомфорту. В реальных разговорах было бы необычно просить чей-то номер телефона, прежде чем спрашивать их имя.

Отложить глубинные вопросы до конца

When it comes to designing a flow for questions you want to ask, think about prioritization. Follow the rule “easy before difficult” and place in-depth or personal questions last. This eases users into the process; they will be more likely to answer complex and more intrusive questions once they’ve established a rapport. This has a scientific basis: Robert Cialdini’s principle of consistency stipulates that when someone takes a small action or step towards something, they feel more compelled to finish.

Group Related Fields Together

One of the principles of Gestalt psychology, the principle of proximity, states that related elements should be near each other. This principle can be applied to the order of questions in a form. The more related questions are, the closer they should be to each other.

Designers can group related fields into sections. If your form has more than six questions, group related questions into logical sections. Don’t forget to provide a good amount of white space between sections to distinguish them visually.

Make A Long Form Look Simpler

How do you design a form that asks users a lot of questions? Of course, you could put all of the questions on one screen. But this hinder your completion rate. If users don’t have enough motivation to complete a form, the form’s complexity could scare them away. The first impression plays a vital role. Generally, the longer or more complicated a form seems, the less likely users will be to start filling in the blanks.

Minimize the number of fields visible at one time. This creates the perception that the form is shorter than it really is.

There are two techniques to do this.

Progressive Disclosure

Progressive disclosure is all about giving users the right thing at the right time. The goal is to find the right stuff to put on the small screen at the right time:

• Initially, show users only a few of the most important options.
• Reveal parts of your form as the user interacts with it.

Chunking

Chunking entails breaking a long form into steps. It’s possible to increase the completion rate by splitting a form into a few steps. Chunking can also help users process, understand and remember information. When designing multi-step forms, always inform users of their progress with a completeness meter.

Designers can use either a progress tracker (as shown in the example above) or a “Step # out of #” indicator both to tell how many steps there are total and to show how far along the user is at the moment. The latter approach could be great for mobile forms because step indication doesn’t take up much space.

Action Buttons

A button is an interactive element that direct users to take an action.

Make Action Buttons Descriptive

A button’s label should explain what the button does; users should be able to understand what happens after a tap just by looking at the button. Avoid generic labels such as “Submit” and “Send”, using instead labels that describe the action.

Don’t Use Clear Or Reset Buttons

Clear or reset buttons allow users to erase their data in a form. These buttons almost never help users and often hurt them. The risk of deleting all of the information a user has entered outweighs the small benefit of having to start again. If a user fills in a form and accidentally hits the wrong button, there’s a good chance they won’t start over.

Use Different Styles For Primary And Secondary Buttons

Avoid secondary actions if possible. But if your form has two calls to action (for example, an e-commerce form that has “Apply discount” and “Submit order”) buttons, ensure a clear visual distinction between the primary and secondary actions. Visually prioritize the primary action by adding more visual weight to the button. This will prevent users from tapping on the wrong button.

Design Finger-Friendly Touch Targets

Tiny touch targets create a horrible user experience because they make it challenging for users to interact with interactive objects. It’s vital to design finger-friendly touch targets: bigger input fields and buttons.

The image below shows that the width of the average adult finger is about 11 mm.

According to material design guidelines, touch targets should be at least 48 × 48 DP. A touch target of this size results in a physical size of about 9 mm, regardless of screen size. It might be appropriate to use larger touch targets to accommodate a wider spectrum of users.

Not only is target size important, but sufficient space between touch targets matters, too. The main reason to maintain a safe distance between touch targets is to prevent users from touching the wrong button and invoking the wrong action. The distance between buttons becomes extremely important when binary choices such as “Agree” and “Disagree” are located right next to each other. Material design guidelines recommend separating touch targets with 8 DP of space or more, which will create balanced information density and usability.

Disable Buttons After Tap

Forms actions commonly require some time to be processed. For example, data calculation might be required after a submission. It’s essential not only to provide feedback when an action is in progress, but also to disable the submit button to prevent users from accidentally tapping the button again. This is especially important for e-commerce websites and apps. By disabling the button, you not only prevent duplicate submissions, which can happen by accident, but you also provide a valuable acknowledgment to users (users will know that the system has received their submission).

Assistance And Support

Provide Success State

Upon successful completion of a form, it’s critical to notify users about that. It’s possible to provide this information in the context of an existing form (for example, showing a green checkmark above the refreshed form) or to direct users to a new page that communicates that their submission has been successful.

Errors And Validation

Users will make mistakes. It’s inevitable. It’s essential to design a user interface that supports users in those moments of failures.

While the topic of errors and validation deserves its own article, it’s still worth mentioning a few things that should be done to improve the user experience of mobile forms.

Use Input Constraints for Each Field

Prevention is better than a cure. If you’re a seasoned designer, you should be familiar with the most common cases that can lead to an error state (error-prone conditions). For example, it’s usually hard to correctly fill out a form on the first attempt, or to properly sync data when the mobile device has a poor network connection. Take these cases into account to minimize the possibility of errors. In other words, it’s better to prevent users from making errors in the first place by utilizing constraints and offering suggestions.

For instance, if you design a form that allows people to search for a hotel reservation, you should prevent users from selecting check-in dates that are in the past. As shown in the Booking.com example below, you can simply use a date selector that allows users only to choose today’s date or a date in the future. Such a selector would force users to pick a date range that fits.

Don’t Make Data Validation Rules Too Strict

While there might be cases where it’s essential to use strict validation rules, in most cases, strict validation is a sign of lazy programming. Showing errors on the screen when the user provides data in a slightly different format than expected creates unnecessary friction. And this would have a negative impact on conversions.

It’s very common for a few variations of an answer to a question to be possible; for example, when a form asks users to provide information about their state, and a user responds by typing their state’s abbreviation instead of the full name (for example, CA instead of California). The form should accept both formats, and it’s the developer job to convert the data into a consistent format.

Clear Error Message

When you write error messages, focus on minimizing the frustration users feel when they face a problem in interacting with a form. Here are a few rules on writing effective error messages:

• Never blame the user.
  The way you deliver an error message can have a tremendous impact on how users perceive it. An error message like, “You’ve entered a wrong number” puts all of the blame on the user; as a result, the user might get frustrated and abandon the app. Write copy that sounds neutral or positive. A neutral message sounds like, “That number is incorrect.”
• Avoid vague or general error messages.
  Messages like “Something went wrong. Please, try again later” don’t say much to users. Users will wonder what exactly went wrong. Always try to explain the root cause of a problem. Make sure users know how to fix errors.
• Make error messages human-readable.
  Error messages like “User input error: 0x100999” are cryptic and scary. Write like a human, not like a robot. Use human language, and explain what exactly the user or system did wrong, and what exactly the user should do to fix the problem.

Display Errors Inline

When it comes to displaying error messages, designers opt for one of two locations: at the top of the form or inline. The first option can make for a bad experience. Javier Bargas-Avila and Glenn Oberholzer conducted research on online form validation and discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. Users need to spend extra time matching error messages with the fields that require attention.

It’s much better to position error messages inline. First, this placement corresponds with the user’s natural top-to-bottom reading flow. Secondly, the errors will appear in the context of the user’s input.

Use Dynamic Validation

The time at which you choose to display an error message is vital. Seeing an error message only after pressing the submit button might frustrate users. Don’t wait until users finish the form; provide feedback as data is being entered.

Use inline validation with real-time feedback. This validation instantly tells people whether the information they’ve typed is compatible with the form’s requirements. In 2009, Luke Wroblewski tested inline validation against post-submission validation and found the following results for the inline version:

• 22% increase in success rate,
• 22% decrease in errors made,
• 31% increase in satisfaction rating,
• 42% decrease in completion times,
• 47% decrease in the number of eye fixations.

But inline validation should be implemented carefully:

• Avoid showing inline validation on focus.
  In this case, as soon as the user taps a field, they see an error message. The error appears even when the field is completely empty. When an error message is shown on focus, it might look like the form is yelling at the user before they’ve even started filling it out.
• Don’t validate after each character typed.
  This approach not only increases the number of unnecessary validation attempts, but it also frustrates users (because users will likely see error messages before they have completed the field). Ideally, inline validation messages should appear around 500 to 1000 milliseconds after the user has stopped typing or after they’ve moved to the next field. This rule has a few exceptions: It’s helpful to validate inline as the user is typing when creating a password (to check whether the password meets complexity requirements), when creating a user name (to check whether a name is available) and when typing a message with a character limit.

Accessibility

Users of all abilities should be able to access and enjoy digital products. Designers should strive to incorporate accessibility needs as much as they can when building a product. Here are a few things you can do to make your forms more accessible.

Ensure The Form Has Proper Contrast

Your users will likely interact with your form outdoors. Ensure that it is easy to use both in sun glare and in low-light environments. Check the contrast ratio of fields and labels in your form. The W3C recommends the following contrast ratios for body text:

• Small text should have a contrast ratio of at least 4.5:1 against its background.
• Large text (at 14-point bold, 18-point regular and up) should have a contrast ratio of at least 3:1 against its background.

Measuring color contrast can seem overwhelming. Fortunately, some tools make the process simple. One of them is Web AIM Color Contrast Checker, which helps designers to measure contrast levels.

Do Not Rely On Color Alone To Communicate Status

Color blindness (or color vision deficiency) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. While there are many types of color blindness, the most common two are protanomaly, or reduced sensitivity to red light, and deuteranomaly, or reduced sensitivity to green light. When displaying validation errors or success messages, don’t rely on color alone to communicate the status (i.e. by making input fields green or red). As the W3C guidelines state, color shouldn’t be used as the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element. Designers should use color to highlight or complement what is already visible. Support colorblind people by providing additional visual cues that help them understand the user interface.

Allow Users To Control Font Size

Allow users to increase font size to improve readability. Mobile devices and browsers include features to enable users to adjust the font size system-wide. Also, make sure that your form has allotted enough space for large font sizes.

Test Your Design Decisions

All points mentioned above can be considered as industry best practices. But just because something is called a “best practice” doesn’t mean it is always the optimal solution for your form. Apps and websites largely depend on the context in which they are used. Thus, it’s always essential to test your design decisions; make sure that the process of filling out a form is smooth, that the flow is not disrupted and that users can solve any problems they face along the way. Conduct usability testing sessions on a regular basis, collect all valuable data about user interactions, and learn from it.

Conclusion

Users can be hesitant to fill out forms. So, our goal as designers is to make the process of filling out a form as easy as possible. When designing a form, strive to create fast and frictionless interactions. Sometimes a minor change — such as properly writing an error message — can significantly increase the form’s usability.

his article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.