Лучшие практики для дизайна мобильных форм

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

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

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

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

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

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

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

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

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

Поля ввода

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

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

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

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

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

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

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

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

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

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

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

Фокус области предложения

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

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

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

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

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

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

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

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

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

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

Избегайте выпадающих меню

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

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

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

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

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

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

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

Маскированный ввод

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автозамена

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

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

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

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

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

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

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

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

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

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

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

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

Камера

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

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

Голос

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

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

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

Метки полей

Пишите четкие и лаконичные этикетки

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

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

Поместите метку и ввод близко друг к другу

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

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

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

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

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

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

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

Дело приговор против. Название дела

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

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

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

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

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

Макет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для этого есть две техники.

Прогрессивное раскрытие

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

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

Чанкинг

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

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

Кнопки действий

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

Сделайте кнопки действий описательными

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

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

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

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

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

Создавайте сенсорные мишени, удобные для пальцев

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

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

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

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

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

Действия с формами обычно требуют некоторого времени для обработки. Например, после отправки может потребоваться расчет данных. 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 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.

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

Используйте динамическую проверку

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

Используйте встроенную проверку с обратной связью в реальном времени. Эта проверка мгновенно сообщает людям, совместима ли введенная ими информация с требованиями формы. В 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, цвет не должен использоваться в качестве единственного визуального средства передачи информации, указания на действие, подсказки к ответу или выделения визуального элемента. Дизайнеры должны использовать цвет, чтобы выделить или дополнить то, что уже видно. Поддержите людей с дальтонизмом, предоставив дополнительные визуальные подсказки, которые помогут им понять пользовательский интерфейс.

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

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

Проверьте свои дизайнерские решения

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

Заключение

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

Эта статья является частью серии UX-дизайна, спонсируемой Adobe. Adobe XD создан для быстрого и плавного процесса проектирования UX, поскольку он позволяет быстрее переходить от идеи к прототипу. Дизайн, прототип и публикация — все в одном приложении. Вы можете ознакомиться с другими вдохновляющими проектами, созданными с помощью Adobe XD, на Behance, а также подписаться на информационный бюллетень Adobe Experience Design, чтобы быть в курсе последних тенденций и идей для дизайна UX/UI.