UX обзор: Разработка правильных форм ввода информации

(Image: uipixels)

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

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

В конце статьи вы также найдете новые способы проектирования форм взаимодействия.

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

Типичная форма сбора информации содержит в себе следующие пять компонентов:

  1. Структура. Этот компонент включает в себя порядок полей, внешний вид формы на странице и логические связи между несколькими полями.
  2. Поле ввода. Этот компонент включает в себя текстовые поля, поля пароля, флажки, радиокнопки, ползунки и любые другие поля, предназначенные для того, чтобы пользователь что-то вводил.
  3. Строки меток. Этими строками обычно поясняют пользователю что означает поле ввода.
  4. Кнопки действий. Когда пользователь нажимает на эту кнопку, выполняется определенное действие (например, отправка формы).
  5. Обратная связь. Пользователю необходимо дать понять, что действие завершилось через фидбек. Большинство приложений и сайтов используют обычный текст как форму обратной связи. Сообщение уведомляет пользователя о результате. Он может быть положительным (значит форма успешно отправлена) или отрицательным (если в чем то была допущена ошибка).

Формы также могут содержать следующие компоненты:

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

Структура формы

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

Прошу только то, что требуется

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

Логическая последовательность формы

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

Группируйте связанную информацию

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

Всегда группируйте поля. (Image: Nielsen Norman Group)

Один столбец vs. Несколько столбцов

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

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

Поля ввода

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

Количество полей

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

Обязательное vs. Необязательное

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

Рассылка в форме подписки MailChimp

Значения «По умолчанию»

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

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

Грамотно определенная страна в форме оформления заказа

Маски ввода информации

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

(Image: Josh Morony)

Desktop-Only: Подружите форму с клавиатурой

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

Даже простой выбор даты должен придерживаться рекомендациям консорциума W3C. (Image: Salesforce)

Desktop-Only: Автофокус на поле ввода

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

Mobile-Only: Адаптивная клавиатура по запросу

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

(Image: Google)

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

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

Метки

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

Количество слов

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

Заглавные буквы в начале предложения vs. Заглавные Буквы в Начале Слова

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

  • В начале слова: капитализация каждого слова, кроме предлогов и частиц — «Это Заглавные Буквы».
  • В начале предложения: капитализация первого слова в предложении — «Это заглавные буквы».

Второй вариант используется для меток и имеет одно преимущество над первым: его немного проще читать. Если разница для коротких надписей незначительна, то для длинных она уже существенна. Теперь Вы Знаете Насколько Трудно Читать Длинный Текст в Заглавных Буквах.

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

Избегайте КАПСА

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

Слова, написанные заглавными буквами сложнее читать

Выравнивание метки: Слева vs. Справа vs. Сверху

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

Выравнивание по левому краю, по правому и сверху. (Image: UX Matters)

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

(Image: CSS-Tricks)

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

(Image: CSS-Tricks)

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

(Image: CSS-Tricks)

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

Встроенные подсказки

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

(Image: snapwi)

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

Встроенные подсказки в полях

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

(Image: MDS)

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

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

Нажатие на такую кнопку вызывает какие-то действия, например, отправка формы.

Первичные действия vs. Вторичные действия

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

Различие при одинаковом визуальном весе. (Image: Luke Wroblewski)

Расположение кнопки

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

Правило наименования

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

Кнопки с несколькими действиями

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

Кнопка «Сброс» — настоящее зло

Не используйте кнопку «Сброс» (Reset). Эта кнопка почти никогда не помогает пользователям и часто вызывает нестерпимую боль. Интернет будет счастлив, если нигде не будет кнопки «Сброс».

Внешний вид

Убедитесь, что кнопки выглядят как кнопки: сделайте индикатор нажатия, если можно.

Тень под кнопкой указывает, что ее можно нажать. (Image: Vadim Gromov)

Микровзаимодействия

Спроектируйте кнопку «Отправить» таким образом, чтобы она ясно показывала, что форма обрабатывается после действий пользователя. Это обеспечивает обратную связь с пользователем и предотвращает двойное нажатие.

(Image: Michaël Villar)

Проверка

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

Встроенная проверка

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

(Image: Stack Exchange)

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

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

Формы Google указывают, что адрес электронной почты, который вы вводите, недействителен, прежде чем вы закончите печатать. (Image: Medium)

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

Проверка в магазине Apple производится после ввода данных. (Image: Medium)

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

Награждать рано, наказывать поздно.
  • Если пользователь вводит данные в поле, которое было в допустимом состоянии (то есть, введенные данные были действительны), то проверка производится после ввода данных.
  • Если пользователь вводит данные в поле, которое было в недопустимом состоянии (то есть, ранее введенные данные были недействительны), то проверка производится во время ввода данных.
Гибридный подход: награждать рано, наказывать поздно. (Image: Medium)

Защита данных

Джеф Раскин однажды сказал:

Система должна рассматривать все данные, вводимые пользователем в качестве священных.

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

Разговорный интерфейс: Новые способы проектирования форм

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

Интерфейс с естественным языком

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

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

Разговорная форма

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

В заключение

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

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

Перевод статьи Nick Babich для Adobe Creative Cloud Design

Show your support

Clapping shows how much you appreciated Alex Pavljenko’s story.