Принципы заполнения форм
1. Всегда спрашивайте как можно меньше.
Слева: много ненужных вопросов. Справа: лишь необходимые .
За один конкретный этап запрашивайте наиболее релевантную информацию. Например, если вам на этапе регистрации от пользователя достаточно его электронной почты и имени, а номер телефона пользователя понадобится позже, то нет никакого смысла сразу спрашивать все вместе! Принцип «Меньше — это больше» здесь отлично работает.
Таким образом, вы можете уменьшить количество вопросов, что в результате:
- Сократить время заполнения анкеты.
- Кардинально уменьшит когнитивную нагрузку на пользователя, за счет уменьшения количества объектов на экране.
2. Предварительно заполните и автоматически определите как можно больше полей.
Форма оформления заказа. Fluix. Слева: все поля должны быть заполнены вручную. Справа: некоторые поля предварительно заполнены.
Всегда помогайте своему респонденту. Если вы уже обладаете некой информацией о нем, предварительно заполните часть полей или даже не показывайте их вообще.
- В большинстве случаев вы можете легко определить страну пользователя и город по IP или геолокации.
- Если пользователь перешел к оформлению заказа из вашей рассылки или маркетинговой кампании, вы точно знаете его электронную почту. Следовательно, предварительно заполните поле «Электронная почта».
Говоря о форме оформления заказа для нашего Fluix, 5 из 15 (1/3!) полей могут быть предварительно заполнены с самого начала. Это связано с тем, что текущая форма предназначена для регистрации подписки после окончания пробного периода. Следовательно, мы уже обладаем некоторыми данными о респонденте, полученными при регистрации пробной учетной записи.
Но нужно учитывать, что мы работаем на рынке B2B, где респондентом, который управляет продуктом, и тем, кто платит за него, могут быть разные люди. Поэтому я должен оставить эти предварительно заполненные поля доступными для редактирования. Подробнее об этом в главе 3 (перевод статьи в процессе подготовки – прим. ред).
Кроме того, нужно не забывать о приватности и безопасности пользователей. Многие предварительно заполненные поля сначала могут показаться странными и создать впечатление шпионажа.
3. Используйте автофокусировку.
Оформление заказа в Apple Store. Слева: респондент должен найти и активировать первое поле вручную. Справа: первое поле активируется автоматически, что является “якорем” для фокуса.
Автоматически активируйте первое (или любое необходимое) поле в форме. Таким образом, вы даете подсказку респонденту, где он должен начать и в результате значительно ускоряете весь процесс.
Кроме того, вы избавляете респондента от лишнего клика и кучи нежелательных сомнений.
4. Используйте одноколоночную структуру.
Оформления заказа Fluix. Слева: глаза двигаются зигзагом. Справа: глаза двигаются естественным образом – сверху вниз.
Когда мы используем одноколоночную структуру, глаза пользователя двигаются в естественном направлении — сверху вниз по одной линии. В варианте, где используется несколько колонок, глаза начинают двигаться зигзагом. Это значительно увеличивает время заполнения и количество фокусировок глаз. Плохое решение как для вас, как и для респондента.
Более того, этот подход не вызывает ненужных вопросов: «С чего мне начать? Какое поле заполнять первым? Какое следующее: внизу или справа? Вопросы в левом столбце одинаково важны, как и вопросы в правом? Или они не зависят друг от друга? Почему они разделены?»…
Исключением здесь может быть только информация, которую мы привыкли видеть и воспринимать однострочной.
Фамилия, имя, отчество: Себастьян ван Дерлот.
Дата и время: 16:30, 21 февраля 2017 г.
Город и штат: Сан-Франциско, Калифорния
5. Разделяйте поля на смысловые группы
Слева: поля не сегментированы, что создает ощущение массивности. Справа: то же количество полей, но они разделены на 3 секции, что создает ощущение постепенного заполнения формы.
Если в вашей форме много вопросов, попробуйте разделить их на семантические группы, добавив дополнительные пробелы или названия разделов между ними. Такой подход дает респонденту ощущение постепенного заполнения формы и исключает такие мысли, как «Слишком много вопросов! Оставлю это дело на завтра … ».
Абзацы выполняют ту же роль. Вместо сплошного куска текста вы читаете его частями. Такой же подход используется и для номера банковской карты.
6. Используйте ограничители для ввода данных для каждого поля.
Чтобы значительно уменьшить количество отказов, ошибок, неправильных данных и т.п. нужно всегда использовать ограничения на данные, которые респондент может ввести в поле:
- минимальная и максимальная длина (количество символов);
- формат;
- числовые, буквенные, буквенно-цифровые, любые виды символов;
- зависимости между полями и т. д.
Например, может ли номер карточки состоять из букв или любых других специальных символов? Конечно, нет. Номер карты всегда состоит только из цифр, поэтому нет необходимости разрешать ввод любых других символов. Также помните о мобильных девайсах… Ведь если не ограничить поле «Номер Карты» на ввод только цифр, респонденту придется каждый раз переключаться между алфавитной и цифровой клавиатурами. Конечно, это правило относится и ко многим другим полям.
Подробный обзор ограничений для каждого поля (страна, почтовый индекс, штат, адрес, имя, номер телефона, номер карты, дата истечения срока и т.д. можно найти в третьей главе этой статьи.
7. Используйте визуальные ограничения.
Используйте визуальные ограничения, чтобы не вызвать ложное подсознательное желание напечатать больше, чем нужно. Например, если в поле «Штат» должно быть введено только два символа, не нужно делать его таким же длинным, как, к примеру, «Адрес».
Кроме того, различная ширина полей служит хорошим «якорем» для глаз. Так взгляд сможет перемещаться быстрее от поля к полю, чем в столбце с полями одинаковой ширины.
8. Изъясняйтесь четко в сообщениях об ошибках.
Неважно, какой способ валидации вы используете, всегда применяйте контекстные ошибки. Они должны применяться четко в месте, где пользователь совершил ошибку. Но не где-то там, на других страницах. «Естественное соответствие» (natural mapping) здесь ваш лучший друг.
Что более важно, всегда пытайтесь объяснить конкретную причину проблемы. Избегайте распространенных сообщений типа «Что-то пошло не так. Повторите попытку позже» или «Ошибка 999». Пользователь никогда не поймет такие сообщения. Вместо этого используйте нормальный человеческий язык. Объясните, что именно пользователь или система сделали неправильно. Что именно должно быть исправлено или заполнено. Второй вариант лучше.
9. Валидируйте введенные данные сразу после заполнения конкретного поля.
Лучший способ сообщить респонденту об ошибке, которую он совершил, — выделить поле и показать сообщение об ошибке в строке сразу после ответа на вопрос. Вы могли заметить, что многие онлайн-сервисы нынче используют различные типы проверки (или вовсе никакой).
Кто-то показывает ошибки после того, как форма уже полностью заполнена и нажата кнопка «Продолжить». Это называется контрольная версия.
Кто-то использует контекстную проверку и показывает ошибку непосредственно при заполнении поля или даже раньше.
Эти варианты создают негативный опыт использования для респондента. Но худший из них — второй, потому что:
- После ввода каждого символа пользователь получает сообщение об ошибке, которое может вызвать изначально ложное восприятие ситуации;
- Сообщение об ошибке появляется даже, когда поле пусто, что не верно.
Вот некоторые преимущества внедрения контекстной валидации введенных данных в реальном времени сразу после ответа на вопрос в соответствии с исследованием Люка Вроблевски (которое было проведено 8 лет назад!):
- на 22% увеличился показатель успешного заполнения формы;
- снижение уровня ошибок на 22%;
- на 31% увеличился показатель «удовлетворенности» респондентов от заполения формы;
- уменьшение времени заполнения на 42%;
- уменьшение количества фиксаций внимания глаз на 47%.
10. Используйте названия полей отдельно от самого поля. При необходимости, в сочетании с подсказками.
Основное правило заключается в том, чтобы не скрыть названия полей во время заполнения . Так респондент не потеряет контекст. Поэтому наименования лучше размещать вне поля. Если места достаточно, ставьте их слева.
Если вы проектируете интерфейс для мобильных устройств и ограничены размером экрана, можете разместить название над полем. Да, это сделает форму довольно длинной. Но помните, что всегда лучше сделать ее длиннее, чем шире. Благодаря вертикальному скроллу такое решение требует меньших когнитивных усилий от респондента.
Или ставьте название внутри поля. Но когда оно активировано или заполнено, сдвигайте лейбл в верхний левый угол, как показано ниже. Такое решение сейчас набирает популярности, потому что отлично подходит для мобильных устройств. В Shopify, например, тоже используют этот подход.
Также вы можете помочь респонденту, используя внутри полей текстовые подсказки. Можно продемонстрировать, как должен выглядеть ответ по формату, структуре и т.д.
С другой стороны, лучше использовать маски вместо подсказок. Например:
Это будет работать и как ограничитель, и как естественное соответствие (natural mapping). Так пользователь с первого взгляда будет понимать, что надо набрать.
Но в таком случае нужно позаботиться о четком визуальном разграничении между подсказкой и значением, введенным респондентом. В противном случае, интерфейс может быть неправильно интерпретирован: респондент может предположить, что поля уже заполнены.
В форме для Fluix как подсказку в поле я решил использовать префикс «например» (ориг. “e.g.” – прим. ред.). Например, для поля «Полное имя» я использую “e.g. John Smith”. А для четкого визуального отличия, я использую следующие 3 стиля для разных состояний данных в поле:
- по умолчанию, пустое поле: font-weight: 400; цвет: # 465777
- активное, пустое поле: font-weight: 400; цвет: # aeb0b8
- введенные данные, заполненное поле: font-weight: 600; цвет: # 071d49
11. Отмечайте необязательные поля вместо обязательных к заполнению.
Честно говоря, по этому вопросу много споров. Baymard Institute заявляет, что вы должны отметить как обязательные, так и необязательные поля. Но я больше склонен к версии Nielsen Norman Group. Их советы исходят из самого первого канона — всегда спрашивайте как можно меньше. Таким образом, количество необязательных полей в вашей форме должно быть как можно ближе к нулю. И лучшее решение здесь — пометка полей, которые в меньшинстве. Например, если 9 полей из 10 являются обязательными, то имеет смысл отметить одно единственное необязательное поле.
В случае с формой для Fluix у нас нет дополнительных полей. Мы запрашиваем только ту информации, которая нам действительно нужна, без дополнительных вопросов. Поэтому я не использую пометки вообще. Но конкретно этот случай довольно спорный, потому что клиент может быть не уверен, что все поля являются обязательными. Я планирую проверить это решение, когда форма будет полностью запущена.
12. Не уводите респондента из процесса оформления заказа.
Старайтесь избегать ссылок на другие ресурсы на странице оформления. Вам необходимо сконцентрировать внимание респондента на ответах и не прерывать процесс, перенаправляя его на другие страницы. В противном случае он просто где-то «потеряется» и забудет изначальную задачу. Используйте дополнительные ссылки только в крайних случаях: когда, например, необходимо указать официальный источник информации. Если вы используете какой-то сторонний сервис, например, SalesForce или FastSpring, лучше предоставить ссылку на их официальный сайт, чтобы пользователь мог ознакомиться с принципами их работы.
13. Активируйте кнопку перехода к следующему шагу только по факту заполнения формы.
Активируйте кнопку подтверждения или перехода на следующий шаг только, когда пользователь ответил на все обязательные поля и не допустил ошибок. Естественно, такую штуку следует применять только вместе с контекстной валидацией введенных данных (как описано в пункте #9). Это позволит респонденту сфокусироваться на ответах и не пропустить что-то важное.
Более того, анимированная активация кнопки подтверждения сработает, как дополнительный визуальный якорь для глаз. Внимание пользователя автоматически сместится на кнопку, когда это потребуется. Это то, что нам нужно. Но чтобы такой подход работал правильно, различие между неактивным и активным состояниями кнопки должно быть явным и визуально понятным.
Для Fluix я использую серый цвет + непрозрачность 0.5 для неактивного состояния и синий цвет без непрозрачности для активной кнопки. .
14. Помните о локальных различиях.
Если ваш продукт предназначен только, например, для американского рынка, можете забыть о локальной дифференциации. В противном случае, вы должны… нет, вы обязаны учитывать это. Наименования полей , подсказки, маски и т. д. могут отличаться для разных стран или регионов.
- разные форматы телефонных номеров → разные маски;
- почтовый индекс для США — это ZIP-code, а для Европы — Postal Code
- штаты нужны только для США.
15. Всегда объясняйте, что и зачем, если запрашиваете специфические данные.
Всегда помните, что запрашиваемая вами информация действительно конфиденциальна и чувствительна для пользователя. Это данные о его жизни, семье, финансах и т. д. И чтобы избежать ненужных сомнений и вопросов, вы должны объяснить, для чего именно вы запрашиваете такую информацию, как личный номер телефона, день рождения, вес, имя супруга и т. д.
Угадайте, что за форма регистрации, показана выше?
Да, это Facebook. Они спрашивают вашу дату рождения при регистрации и объясняют, зачем им эта информация.
16. Поддерживайте людей, не различающих цвета
Используя цвета с низким уровнем контрастности между передним и задним фоном, вы снижаете разборчивость элементов интерфейса (legibility). Это особенно острая проблема, для людей дальтоников. Особенно на старых типах дисплеев с TFT-матрицей, которые более популярны из-за низкой стоимости. Многие дизайнеры и сервисы забывают об этих людях. А они составляют примерно 4,5% (2,7 миллиона человек) всего населения только в Великобритании!
Этот или вот этот инструмент поможет вам измерить уровень контрастности выбранных цветов. Так вы поймете, прошли ваши цвета тесты W3C или нет.
В Fluix я использую 3 визуальных состояния, которые легко различаются на большинстве видов дисплеев и подходят для людей с разными типами нарушений зрения.
Чтобы протестировать ваш дизайн в режиме реального времени в Photoshop, попробуйте вот эти actions от Bjango. Для Sketch пользователей, используйте плагин Stark (прим. автора). Конечно, они не сверхточные, но определенно дадут вам представление о том, как люди, не различающие цвета, видят этот мир. Они очень легкие в использовании.
