Проектирование более эффективных форм: структура, вкладки, ярлыки и действия
@designertytЛюди, которые используют ваше приложение или сайт, имеют определенную цель. Часто один элемент, стоящий между пользователем и его целью, - это форма . Поскольку формы по-прежнему остаются одним из наиболее важных видов взаимодействия для пользователей в Интернете и в приложениях. Фактически, формы часто считаются последним шагом на пути к достижению целей.
Формы - всего лишь средство для достижения цели. Пользователи должны иметь возможность быстро и без ошибок заполнять формы.
В этой статье вы увидите практические рекомендации, которые были разработаны с помощью юзабилити тестирования, отслеживания движения глаз и фактических жалоб, сделанных недовольными пользователями.
Компоненты форм
Типичная форма имеет следующие пять компонентов:
- Структура. Она включает в себя порядок полей, внешний вид на странице и логические соединения между несколькими полями.
- Поля ввода. Они включают текстовые поля, поля пароля, флажки, переключатели, слайдеры и любое другое поле, предназначенное для ввода пользователем.
- Метки. Они сообщают пользователям, что означают соответствующие поля ввода.
- Кнопки действий. Когда пользователь нажимает кнопку, выполняется действие (например, отправка данных).
- Обратная связь . Пользователь понимает результат ввода обратной связи. Большинство приложений или сайтов используют сообщения как форму обратной связи. Сообщения информируют пользователя о результатах, они могут быть положительными (с указанием того, что форма была отправлена успешно) или отрицательными («Номер, который вы указали неверно»).
Формы также могут иметь следующие компоненты:
- Помощь . Любая помощь, которая объясняет, как заполнить форму.
- Проверка. Автоматическая проверка, которая гарантирует, что данные пользователя действительны.
В этой статье рассматриваются многие аспекты, связанные со структурой, полями ввода, ярлыками и кнопками действий.
Структура формы
Форма - это разговор . И как любой разговор, он должен быть представлен логической связью между двумя сторонами - пользователем и вашим приложением.
Только спросите, что необходимо
Удостоверьтесь, что вы спрашиваете, только то, что вам действительно нужно. Каждое дополнительное поле, которое вы добавляете в форму, будет влиять на коэффициент конверсии. Вот почему вы всегда должны задавать вопрос, почему и как используется информация, запрашиваемая у ваших пользователей.
Все должно быть логическим
Подробности следует задавать логически с точки зрения пользователя , а не с логикой приложения или базы данных. Как правило, необычно просить чей-то адрес перед именем.
Информация о группе
Вы должны группировать связанную информацию в логических блоках. Поток от одного блока вопросов к другому лучше будет напоминать разговор. Объединение связанных полей вместе также помогает пользователям понять информацию, которую они должны заполнить. Ниже приведен пример контактной информации.
Один столбец vs нескольких столбцов
Формы никогда не должны состоять из нескольких столбцов. Одна из проблем с полями формы в нескольких столбцах заключается в том, что ваши пользователи могут интерпретировать поля непоследовательно . Если форма имеет горизонтально смежные поля, пользователь должен сканировать в Z-образцах, замедляя скорость понимания. Но если форма находится в одном столбце, путь к завершению является прямой линией вниз по странице.
Поля ввода
Поля ввода позволяют пользователям заполнить вашу форму. В зависимости от запрашиваемой информации существуют различные типы полей - текстовые поля, поля пароля, выпадающие списки, флажки, переключатели, датпикеры и другие.
Количество полей
Постарайтесь максимально минимизировать количество полей. Это делает вашу форму менее загруженной, особенно когда вы запрашиваете много, слишком много полей.
Обязательный vs Необязательный
Старайтесь избегать дополнительных полей в формах . Но если вы их используете, вы должны, по крайней мере, четко различать, какие поля ввода не могут быть оставлены пустыми.
Установка значений по умолчанию
Вам следует избегать статического значения по умолчанию, если вы не верите, что значительная часть ваших пользователей (например, 90%) выберет это значение. В частности, если это обязательное поле. Зачем? Поскольку вы, получите ошибки, потому что люди быстро просматривают формы в Интернете - не думайте, что они потратят время на анализ всех вариантов. Они просто могут пропустить.
Но умные значения по умолчанию могут сделать пользовательское заполнение формы быстрее и точнее. Например, предварительно выберите страну пользователя на основе данных геоданных. Но все же вы должны использовать их с осторожностью, потому что пользователи склонны оставлять предварительно выбранные поля такими, какие они есть.
Создайте форму для клавиатуры
Пользователи должны иметь возможность запускать и редактировать каждое поле, используя только клавиатуру. Властные пользователи, которые сильно используют клавиатуру, должны иметь возможность легко вставлять поля и делать необходимые изменения, не снимая пальцев с клавиатуры. Подробные требования к шаблону взаимодействия с клавиатурой вы найдете в W3C's Authoring Practices for Design Patterns .
Только для PC: автофокусировка для поля ввода
Автофокусировка поля дает пользователям указание и отправную точку, чтобы быстро начать заполнять форму. Вы должны предоставить четкое визуальное «уведомление» о том, что фокус переместился туда - например: изменить цвет. Регистрационная форма Amazon имеет как автофокус, так и визуальное уведомление для пользователя.
Только для мобильных устройств: совместите клавиатуру с необходимыми текстовыми вводами
Пользователи приложений оценивают приложения, которые обеспечивают соответствующую клавиатуру для ввода текста. Убедитесь, что это выполняется последовательно во всем приложении, а не только для определенных задач.
Метки
Четкий текст меток является одним из основных способов сделать пользовательские интерфейсы более доступными. Метки сообщают пользователю цель поля, сохраняют свою полезность, когда фокус помещается внутри поля и должены оставаться даже после завершения поля.
Число слов
Ярлыки не помогают текстам . Вы должны использовать краткие, короткие и описательные ярлыки (слово или два), чтобы пользователи могли быстро отсканировать вашу форму. В предыдущей версии регистрационной формы Amazon было много лишних слов, что привело к медленному завершению.
Текущая версия намного лучше и имеет короткие ярлыки.
Все шапки сложно читать
Должно ли это быть «Full N ame» или «Full n ame»? Случай с предложением немного легче (и, следовательно, быстрее) для чтения.
Выравнивание ярлыков: Left vs Right Aligned vs Top
В статье 2006 Matteo Penzo, посвященной размещению меток, следует, что формы заполняются быстрее, если метки находятся поверх полей . Они хороши, если вы хотите, чтобы пользователи просматривали форму как можно быстрее.
Однако в последующих исследованиях не было обнаружено различий между надписями над полями и выровненными по правому краю надписями.
Верхние выровненные метки. Наибольшее преимущество над выровненными ярлыками - они упрощают использование ярлыков разного размера и локализованных версий в пользовательском интерфейсе (это особенно хорошо подходит для мобильных экранов).
Выравнивание по левому краю . Самый большой недостаток выровненных по левому краю меток - это самое медленное время завершения. Вероятно, это связано с визуальным расстоянием между меткой и полем ввода. Чем короче ярлык, тем дальше от входа. Но медленные темпы завершения не всегда являются плохими , особенно если форма требует важных данных. Если вы просите о таких вещах, как «Лицензия на водительские права» или «Номер социального страхования», вы можете неявно захотеть немного снизить число пользователей и убедиться, что они правильно вписываются.
Выравнивание по правому краю. Большим преимуществом выровненных по правому краю ярлыков является сильная визуальная связь между меткой и вводом . Потому что предметы рядом друг с другом связаны друг с другом. Этот принцип размещения связанных предметов ближе друг к другу не нов; это фактически Закон близостиот гештальт-психологии. Для более коротких форм выровненные по правому краю надписи могут иметь большое время завершения. Недостаток с правой стороны метки исходит из комфортабельности. В такой форме не будет такого жесткого левого края, что делает его менее удобным для восприятия и более трудным для чтения.
Если вы хотите, чтобы пользователи быстро отсканировали форму, поместите свои метки над каждым полем. Этот макет легче сканировать, так как глаза перемещаются прямо вниз по странице. Однако, если вы хотите, чтобы ваши пользователи внимательно прочитали, поместите метки слева от полей. Этот макет читается более медленным движением вниз и вправо (Z-форма).
Встроенные ярлыки (текст заполнителя)
Текст заполнителя отлично подходит для простой формы имени пользователя и пароля.
Но это небольшая замена визуальной метки, когда есть больше информации. Да, они очень популярны, и да, они выглядят красиво. Но как только пользователь нажимает на текстовое поле, ярлык исчезает, и, таким образом, пользователь не может дважды проверить, что то, что он / она написал, действительно то, что должно было быть написано. Другое дело, что когда пользователи видят что-то, написанное внутри текстового поля, они могут предположить, что он уже был заполнен и, следовательно, может игнорировать его.
Хорошим решением для текста заполнителя является плавающая метка . Текст закладок отображается по умолчанию, но после ввода текст заполнителя исчезает, а вверху выравнивается ярлык.
Не просто полагаться на заполнители, но также и ярлык. Как только поле было заполнено, заполнитель больше не виден. Вы можете использовать плавающие метки, которые гарантируют пользователям, что они заполнили правильное поле.
Первичный и вторичный действия
Отсутствие визуального различия между первичными и вторичными действиями может легко привести к неудаче. Уменьшение визуального выделения второстепенных действий сводит к минимуму риск возникновения потенциальных ошибок и направляет людей к успешному результату.
Расположение кнопок
Для сложных форм обычно требуется кнопка «Назад». Если такая кнопка расположена прямо под полями ввода (например, на первом снимке), пользователи могут случайно нажать на нее. В качестве обратной кнопки используется вторичное действие, которое должно быть помещено вне поля зрения (вторая форма имеет правильное расположение для кнопок).
Соглашения об именах
Избегайте таких общих слов , как «Отправить» для действий, потому что они создают впечатление, что сама форма является общей. Вместо этого укажите, какие действия выполняют кнопки при нажатии, например «Создать мою бесплатную учетную запись» или «Отправить мне еженедельные предложения».
Кнопки с несколькими действиями
Избегайте нескольких кнопок действий, поскольку это может отвлекать пользователей от цели (отправки формы).
Кнопка «Сброс» - это чистое зло
Не используйте кнопку «Сброс» . Интернет был бы более счастливым местом, если бы были удалены практически все кнопки Сброс . Эта кнопка почти никогда не помогает пользователям, но часто вредит им.
Визуальный внешний вид
Убедитесь, что кнопки действий выглядят как кнопки . Сформируйте их таким образом, чтобы они поднимались (таким образом, указывает, что можно щелкнуть). Для получения дополнительной информации о кнопке вы можете прочитать статью Button UX Design
Обратная связь
Вы должны создать свою кнопку «отправить» таким образом, чтобы она четко указывала, что форма обрабатывается после действия пользователя. Это обеспечивает обратную связь с пользователем, в то же время избегая двойных сообщений.
Вывод
Пользователи могут не решаться заполнять формы, поэтому вы должны сделать этот процесс максимально простым. Незначительные изменения, такие как поля, связанные с группами, и указание информации в каждом поле, могут значительно увеличить удобство использования формы. Тесты удобства использования просто необходимы в дизайне форм.