Пользователи могут сомневаться: заполнять им форму или нет. Поэтому наша цель как дизайнеров – максимально упростить процесс заполнения. Автор статьи делится работающими методами, которые помогут создавать удобные и эффективные формы.

Перевод статьи Ника Бабича “Best Practices For Mobile Form Design“

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

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

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

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

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

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

Типичная форма содержит 5 компонентов:

• Поля ввода (input fields) К ним относятся текстовые поля (text fields), поля пароля (password fields), чекбоксы (checkboxes), переключатели (radio buttons), ползунки (sliders) и другие поля, предназначенные для ввода информации.
• Названия полей (field labels) Они сообщают пользователю, что означают соответствующие им поля ввода.
• Структура Она включает в себя порядок полей, внешний вид формы на странице и логические связи между разными полями.
• Кнопки действий (action buttons) Форма включает в себя хотя бы один призыв к действию, например, кнопку, запускающую отправку данных.
• Обратная связь Она сообщает пользователю результат операции. Обратная связь может быть положительной, если форма была успешно отправлена, или отрицательной, если указан неверный номер.

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

Поля ввода

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

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

Каждое поле, которое вы просите пользователя заполнить, требует от пользователя приложения усилий. Чем больше усилий требует заполнение формы, тем более вероятно, что пользователь ее не заполнит. Именно поэтому самое важное правило проектирования форм – чем короче, тем лучше. Избавляйтесь от всех ненужных полей.

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

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

Понятно выделяйте все необязательные поля

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

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

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

Делайте размер поля соизмеримым с его внутренним наполнением

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

Визуально выделяйте поле ввода

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

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

Не просите пользователей повторять имейл

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

Предусмотрите опцию «показать пароль»

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

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

Якоб Нильсен

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

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

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

Не используйте выпадающее меню

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

Используйте вспомогательный текст внутри поля (placeholder) и маскированный ввод (masked input)

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

Вспомогательный текст внутри поля

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

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

Маскированный ввод (Masked Input)

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

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

Предусмотрите соответствующую клавиатуру

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

Задайте типы ввода HTML, чтобы отображалась правильная клавиатура. Для дизайна формы важны семь типов ввода:

1. input type=”text” отображает обычную клавиатуру мобильного устройства.
2. input type=”email” отображает обычную клавиатуру и символы «@» и «.com».
3. input type=”tel” отображает клавиатуру с цифрами от 0 до 9.
4. input type=”number” отображает клавиатуру с цифрами и символами.
5. input type=”date” отображает переключатель даты мобильного устройства.
6. input type=”datetime” отображает переключатель даты и времени мобильного устройства.
7. input type=”month” отображает переключатель месяца и года мобильного устройства.

Используйте ползунок (slider), когда спрашиваете конкретный диапазон

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

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

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

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

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

Защищайте пользовательские данные

Система должна рассматривать все данные, вводимые пользователем, как бесценные.

Джеф Раскинё

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

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

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

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

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

Автозаполнение

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

Автокапитализация

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

Автозамена

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

Автозаполнение личных данных

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

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

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

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

Сервисы определения местоположения

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

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

Биометрическая авторизация

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

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

Камера

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

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

Голос

Устройства с голосовым управлением, такие как Apple HomePod, Google Home и Amazon Echo, активно захватывают рынок. Количество людей, предпочитающих голосовое управление, значительно возросло.

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

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

Названия (labels) полей

Пишите понятные и краткие названия

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

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

Располагайте название и поле ввода близко друг к другу

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

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

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

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

Выравнивайте названия по верхнему левому краю

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

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

Предложение (sentence case) или заголовок (title case) – для английского языка

Есть два основных способа использовать слова с заглавной буквы:

• Заголовок: каждое слово начинается с заглавной буквы. “This Is Title Case.”
• Предложение: только первое слово начинается с заглавной буквы. “This is sentence case.”

Использование предложения для названий имеет одно преимущество перед заголовком: его немного легче и, следовательно, быстрее читать. Хотя для коротких названий разница незначительна: “Full Name” и “Full name”. Для более длинных ярлыков лучше использовать предложения. Now You Know How Difficult It Is to Read Long Text in Title Case (Теперь вы знаете, как сложно читать длинный текст, написанный как заголовок).

Избегайте капс в названиях

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

Макет

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

Располагайте поля формы в один столбец

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

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

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

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

Составляйте понятную последовательность из вопросов

Последовательность задаваемых в форме вопросов имеет значение. Вы должны задавать вопросы логично, опираясь на опыт пользователя, а не на нужны вашего продукта. Это поможет создать чувство беседы с пользователем. Например, если вы проектируете форму оформления заказа и спрашиваете такие детали как полное имя, номер телефона и данные кредитной карты, первое поле должно быть “Полное имя”. Если поменять последовательность, начав с запроса номера телефона, это приведет к дискомфорту. В беседе в реальной жизни будет непривычно/необычно, если кто-то попросит у человека номер телефона до того, как узнает его имя.

Задавайте углубленные вопросы в конце

Когда дело доходит до разработки последовательности вопросов, которые вы хотите задать, подумайте о расстановке приоритетов. Следуйте правилу “сначала простое, потом сложное” и оставьте углубленные или личные вопросы на конец. Это облегчает пользователям процесс заполнения. Они с большей вероятностью ответят на сложные и более назойливые вопросы после того, как установят взаимопонимание. Это имеет научную основу: принцип последовательности Роберта Чалдини гласит, что когда кто-то делает небольшое действие или шаг к чему-то, он чувствует себя более вынужденным закончить.

Сгруппируйте связанные по смыслу поля

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

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

Сделайте проще длинную форму

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

Сведите к минимуму количество полей, видимых одновременно. Это создает впечатление, что форма короче, чем есть на самом деле.

Есть 2 техники, помогающие это сделать.

Поэтапное предоставление информации (progressive disclosure)

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

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

Разбивайте информацию на части (чанкинг)

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

Дизайнеры могут использовать индикатор прогресса, как в примере, или индикатор «Шаг № из #», чтобы показать, сколько всего шагов осталось и как далеко продвинулся пользователь в данный момент. Последний подход идеален для мобильных форм, потому что указание шагов не занимает много места.

Подробнее про Чанкинг: https://uxwiki.ru/2021/06/06/7-2-ux/

Кнопки действия (action buttons)

Кнопка – это интерактивный элемент, который побуждает пользователя выполнить действие.

Подпишите кнопки действия

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

Не используйте кнопки очистки и сброса

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

Используйте разные стили для основных и вторичных кнопок

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

Проектируйте так, чтобы было удобно использовать сенсорное управление

Крошечные объекты для нажатия создают ужасный пользовательский опыт, потому что они затрудняют взаимодействие пользователей с интерактивными объектами. Очень важно разработать удобные для пальцев сенсорные цели: большие поля ввода и кнопки.

На изображении ниже показано, что средняя ширина пальца взрослого человека составляет около 11 мм.

Согласно руководству Material Design, сенсорные объекты должны быть не менее 48 × 48 DP. Сенсорная мишень такого размера дает физический размер около 9 мм, независимо от размера экрана. Возможно, было бы целесообразнее использовать более крупные сенсорные объекты для обслуживания более широкого круга пользователей.

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

Расстояние между кнопками становится чрезвычайно важным, когда двойные варианты, такие как «Согласен» и «Не согласен», расположены рядом друг с другом. Руководство Material Design рекомендует разделять сенсорные объекты пространством 8 DP и больше, что обеспечит сбалансированную плотность информации и удобство использования.

Отключите кнопку после нажатия

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

Помощь и поддержка

Предусмотрите статус успешного выполнения

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

Ошибки и проверка

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

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

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

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

Например, если вы разрабатываете форму, которая позволяет людям искать бронирование в отеле, вы должны запретить пользователям выбирать даты заезда, которые уже прошли. Как показано в примере с Booking.com ниже, вы можете использовать элемент выбора даты, который позволяет пользователям выбрать только сегодняшнюю дату или дату в будущем. Такой элемент заставит пользователей выбрать подходящий диапазон дат.

Не усложняйте правила проверки данных

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

Очень часто возможно несколько вариантов ответа на вопрос. Например, когда форма просит пользователей предоставить информацию о своем штате, и пользователь отвечает, вводя аббревиатуру своего штата вместо полного имени (например, CA вместо California). Форма должна принимать оба формата, и задача разработчика – преобразовать данные в совместимый формат.

Пишите понятное сообщение об ошибке

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

• Никогда не обвиняйте пользователя.
  То, как вы преподносите сообщение об ошибке, может иметь огромное влияние на то, как пользователи его воспримут. Сообщение об ошибке типа «Вы ввели неправильный номер» возлагает всю вину на пользователя. В результате он может расстроиться и покинуть приложение. Напишите текст, который звучит нейтрально или позитивно. Нейтральное сообщение звучит так: «Этот номер неверен».

• Избегайте расплывчатых или общих сообщений об ошибках.
  Сообщения типа «Что-то пошло не так. Пожалуйста, попробуйте еще раз позже», не говорит много пользователям. Они будут интересоваться, что именно пошло не так. Всегда пытайтесь объяснить основную причину проблемы. Убедитесь, что пользователи знают, как исправить ошибки.

• Сделайте сообщения об ошибках понятными любому человеку.
  Сообщения об ошибках, такие как «Ошибка ввода пользователя: 0x100999», являются загадочными и пугающими. Пишите как человек, а не как робот. Используйте доступный язык и объясняйте, что именно пользователь или система сделали неправильно и что нужно сделать, чтобы решить проблему.

Отображайте ошибки в строке

Когда дело доходит до отображения сообщений об ошибках, дизайнеры выбирают одно из двух мест: наверху формы или в строке. Первый вариант может оказаться неподходящим. Хавьер Баргас-Авила и Гленн Оберхольцер провели исследование проверки форм и обнаружили, что отображение всех сообщений об ошибках в верхней части формы создает высокую когнитивную нагрузку на память пользователя. Пользователи должны тратить дополнительное время на сопоставление сообщений об ошибках с полями, требующими внимания.

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

Делайте немедленную проверку

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

Используйте встроенную проверку с обратной связью в реальном времени. Такая проверка мгновенно сообщает людям, соответствует ли введенная информация требованиям формы. В 2009 году Люк Вроблевски протестировал немедленную встроенную проверку и проверку после отправки и получил следующие результаты для встроенной версии:

• на 22% увеличен коэффициент успешности:
• на 22% снижено количество ошибок;
• на 31% повысился рейтинг удовлетворенности;
• на 42% уменьшилось время завершения;
• на 47% снизилось количество фиксаций глаз.

Но встроенную проверку следует применять осторожно:

Избегайте отображения встроенной проверки в фокусе.

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

Не делайте проверку после каждого набранного символа.

Такой подход не только увеличивает количество ненужных попыток проверки, но и разочаровывает пользователей, поскольку они, скорее всего, увидят сообщения об ошибке до того, как заполнят поле. В идеале сообщения встроенной проверки должны появляться примерно через 500–1000 миллисекунд после того, как пользователь перестал печатать или перешел к следующему полю. У этого правила есть несколько исключений: полезно выполнять встроенную проверку, когда пользователь впервые придумывает пароль, чтобы проверить, соответствует ли он требованиям сложности, при создании имени пользователя, чтобы проверить, доступно ли имя, и при вводе сообщения с ограниченным количеством символов.

Доступность

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

Убедитесь, что форма имеет правильный контраст

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

• Мелкий текст должен иметь контраст не менее 4,5 к 1 по сравнению с фоном.
• Крупный текст (14 кегель полужирного, 18 кегель обычного и выше) должен иметь коэффициент контрастности не менее 3 к 1 по сравнению с фоном.

Измерение цветового контраста может показаться сложным. К счастью, есть инструменты, которые упрощают этот процесс. Одним из них является Web AIM Color Contrast Checker, который помогает дизайнерам измерить уровень контрастности.

Не полагайтесь только на цвет, чтобы обозначить статус

От дальтонизма, или нарушения цветового зрения, страдает примерно 1 из 12 мужчин (8%) и 1 из 200 женщин в мире. Хотя существует множество форм дальтонизма, наиболее распространенными являются две: протаномалия, или пониженная чувствительность к красному свету, и дейтераномалия, или пониженная чувствительность к зеленому свету. При отображении ошибок проверки или сообщений об успешном выполнении не полагайтесь только на цвет, чтобы передать статус, то есть сделать поля ввода зелеными или красными недостаточно.

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

Разрешите пользователям контролировать размер шрифта

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

Тестируйте свои дизайн-решения

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

Заключение

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