Дизайн форм: 4 принципа, которые помогут снизить когнитивную нагрузку

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

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

Снижение когнитивной нагрузки: 4 принципа

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

Чтобы снизить когнитивную нагрузку в формах, следуйте этим 4 принципам:

1. Структура: организуйте контент логически, чтобы выстроить четкий путь к цели
2. Прозрачность: заранее сообщайте о требованиях и формируйте ожидания
3. Ясность: сделайте контент и взаимодействие понятными, не оставляйте места для двусмысленности
4. Поддержка: предоставляйте своевременные полезные рекомендации на протяжении всего процесса

(1) Структура

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

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

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

На уровне формы: Объединение связанных полей в разделы упрощает заполнение форм, поскольку:

• Позволяет пользователям сосредоточиться на одной категории за раз
• Минимизирует переключение между несвязанными темами
• Создает ощущение прогресса

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

Выстраивайте визуальную иерархию

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

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

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

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

Располагайте вопросы и варианты ответов в логическом порядке

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(2) Прозрачность

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

Сообщайте требования к заполнению формы с самого начала

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

При разработке длинной многостраничной формы заранее укажите:

• Примерное время заполнения
• Необходимые материалы или данные (идентификационные номера, документы)
• Любые сроки или ограничения по времени
• Максимальное количество попыток (если применимо)
• Сохраняется ли прогресс автоматически или заполнить форму необходимо за один раз

Помечайте обязательные поля

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

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

Отображайте четкие индикаторы прогресса

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

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

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

(3) Ясность

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

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

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

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

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

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

Выбирайте позитивные формулировки

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

Избегайте двойных вопросов

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

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

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

Предоставляйте контекст и примеры

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

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

Следуйте общепринятым паттернам

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

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

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

Длина поля ввода должна соответствовать ожидаемому наполнению

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

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

(4) Поддержка

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

Не используйте плейсхолдеры

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

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

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

Вводите оправданные ограничения

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

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

Отображайте своевременные заметные сообщения об ошибках

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

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

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

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

Заключение

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