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

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

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

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

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

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

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

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

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

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

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

Поля ввода 

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

МИНИМИЗИРУЙТЕ ОБЩЕЕ КОЛИЧЕСТВО ПОЛЕЙ

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

Институт Бэймарда проанализировал формы оформления заказа и обнаружил, что слишком длинный или слишком сложный процесс оформления заказа является одной из основных причин отказа от оформления заказа. Исследование показало, что средний чек содержит почти 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% быстрее.

 

ИСПОЛЬЗУЙТЕ ВСТРОЕННЫЕ ФУНКЦИИ МОБИЛЬНОГО УСТРОЙСТВА ДЛЯ УПРОЩЕНИЯ ВВОДА ДАННЫХ

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

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

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

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

 

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

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

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

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

 

Камера

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

 

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

Голос

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

 

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

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

 

Метки Полей

ПИШИТЕ ЧЕТКИЕ И ЛАКОНИЧНЫЕ МЕТКИ

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

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

ПОМЕСТИТЕ МЕТКУ И ВВОДИМЫЕ ДАННЫЕ БЛИЗКО ДРУГ К ДРУГУ

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

 

НЕ ИСПОЛЬЗУЙТЕ ИСЧЕЗАЮЩИЙ ТЕКСТ-ЗАПОЛНИТЕЛЬ В КАЧЕСТВЕ МЕТОК

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

 

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

 

ВЫРАВНИВАНИЕ МЕТОК ПО ВЕРХНЕМУ КРАЮ

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

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

РЕГИСТР ПРЕДЛОЖЕНИЯ ПРОТИВ РЕГИСТРА ЗАГОЛОВКА

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

• Заголовок: каждое слово писать с заглавной буквы. «Это регистр заголовка».
• Регистр предложения: Пишите с заглавной буквы первое слово. "Это регистр предложения".

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

ИЗБЕГАЙТЕ ИСПОЛЬЗОВАНИЯ ЗАГЛАВНЫХ БУКВ ДЛЯ МЕТОК

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

 

Макет

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

ИСПОЛЬЗУЙТЕ МАКЕТ С ОДНИМ СТОЛБЦОМ

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

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

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

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

 

СОЗДАЙТЕ ПОТОК С ВАШИМИ ВОПРОСАМИ

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

ОТЛОЖИТЕ ПОДРОБНЫЕ ВОПРОСЫ НА КОНЕЦ

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

ГРУППИРОВАТЬ СВЯЗАННЫЕ ПОЛЯ ВМЕСТЕ

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

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

 

СДЕЛАЙТЕ ДЛИННУЮ ФОРМУ ПРОЩЕ

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

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

Есть два метода, чтобы сделать это.

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

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

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

 

Разделение

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

 

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

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

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

СДЕЛАЙТЕ КНОПКИ ДЕЙСТВИЙ ОПИСАТЕЛЬНЫМИ

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

 

НЕ ИСПОЛЬЗУЙТЕ КНОПКИ «ОЧИСТИТЬ» ИЛИ «СБРОСИТЬ»

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

ИСПОЛЬЗУЙТЕ РАЗНЫЕ СТИЛИ ДЛЯ ОСНОВНЫХ И ДОПОЛНИТЕЛЬНЫХ КНОПОК

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

 

СОЗДАВАЙТЕ СЕНСОРНЫЕ МИШЕНИ, УДОБНЫЕ ДЛЯ ПАЛЬЦЕВ

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

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

 

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

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

ОТКЛЮЧИТЬ КНОПКИ ПОСЛЕ НАЖАТИЯ

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

 

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

УКАЖИТЕ УСПЕШНОЕ СОСТОЯНИЕ

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

 

ОШИБКИ И ПРОВЕРКА

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

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

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

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

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

 

Не делайте правила проверки данных слишком строгими

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

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

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

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

• Никогда не обвиняйте пользователя.
  То, как вы преподносите сообщение об ошибке, может оказать огромное влияние на то, как его воспринимают пользователи. Сообщение об ошибке типа «Вы ввели неправильный номер» возлагает всю вину на пользователя; в результате пользователь может разочароваться и отказаться от приложения. Напишите текст, который звучит нейтрально или позитивно. Нейтральное сообщение звучит так: «Это число неверно».
• Избегайте расплывчатых или общих сообщений об ошибках.
  Сообщения типа «Что-то пошло не так. Пожалуйста, повторите попытку позже» не говорите пользователям многого. Пользователи будут задаваться вопросом, что именно пошло не так. Всегда старайтесь объяснить основную причину проблемы. Убедитесь, что пользователи знают, как исправлять ошибки.
• Сделайте сообщения об ошибках понятными для человека.
  Сообщения об ошибках, такие как «Ошибка пользовательского ввода: 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, цвет не должен использоваться в качестве единственного визуального средства передачи информации, указания действия, вызова реакции или выделения визуального элемента. Дизайнеры должны использовать цвет, чтобы подчеркнуть или дополнить то, что уже видно. Поддерживайте людей с дальтонизмом, предоставляя им дополнительные визуальные подсказки, которые помогут им понять пользовательский интерфейс.

 

РАЗРЕШИТЕ ПОЛЬЗОВАТЕЛЯМ КОНТРОЛИРОВАТЬ РАЗМЕР ШРИФТА

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

 

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

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

Заключение

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

Автор:  Ник Бабич — разработчик, технический энтузиаст и любитель UX. Последние 10 лет он проработал в индустрии программного обеспечения, уделяя особое внимание разработке. Среди своих многочисленных интересов он считает рекламу, психологию и кино.