UX в онлайн-формах: основы повышения юзабилити форм | Урок 22

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

← Предыдущий урок

(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)

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

Формы

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

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

Одна длинная страница или несколько коротких?

Один из самых распространенных вопросов, возникающих у UX-дизайнеров и прочих маркетинговых ребят — “Какой длины должна быть форма?”

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

Главное, чтобы форма ощущалась простой в использовании. Размещайте близкие по смыслу вопросы друг за другом. Убирайте вопросы, которые вам особо не нужны. И разбивайте форму на столько страниц, на сколько кужно. Ни больше, ни меньше.

Типы ввода

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

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

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

Метки и инструкции

О том, как писать метки и инструкции, мы поговорим завтра. А сейчас давайте поговорим о назначении меток.

Когда вы добавляете к полям ввода метки с подсказками — а как еще узнать, что там писать? — пусть они будут краткими, вразумительными и предельно ясными. По большому счету, это должно решить 99% проблем с метками.

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

Очень рекомендую книгу Люка В. — Web Form Design

Предотвращаем и разбираемся с ошибками

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

Можно предотвратить ошибки, сделав поля ввода “умнее”. К примеру, если текстовое поле предназначено для номера телефона, убедитесь что оно может умно трансформироваться в “(000) 000–0000” или “000 000 0000” или “0000000000” или “000.000.0000”. (Поговорите об этом с вашими разработчиками).

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

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

При помощи этого inline-метода обычно проверяется надежность введенного пароля (“слабый”/“надежный”).

Не нужно использовать inline-метод исправления ошибок, если вы не можете проверить правильность введенных данных, как, например, в случае с именем человека.

Когда пользователь нажимает “Далее” или “Готово”, вы можете проверить форму на предмет ошибок или пропущенных вопросов. Если что-то не в порядке, очень доходчиво — при помощи визуальных приемов — сообщите пользователю, что он пропустил и где ошибся.

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

Скорость и ошибки

Это уже достаточно продвинутый уровень информации, но это очень полезно:

Вы задаете пользователям общие вопросы, типа “Имя” и “Адрес”, или более специфические, скажем: “Какая твоя любимая картина из бархата?” Если ваши вопросы общие, располагайте метки над полями ввода и выравнивайте все по левой стороне — так пользователи как можно быстрее справятся с заполнением. При такой организации все находится на оси взаимодействия.

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

Как правило, кнопку “Готово” следует размещать слева, на оси взаимодействия формы.

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

Фуф! Вот это длинный урок! Хорошо поработали!

Завтра мы научимся писать метки, инструкции и кол-ту-экшны (призывы к действию):

UX Копирайтинг →

И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле

Курс «Основы UX»

Посты в категории UX-дизайн

Руководство по дизайну таблиц — 20 нюансов по представлению датасетов в интерфейсах

Анастасия Свеженцева

15 июня 2020

Посты в категории UX-дизайн

Руководство по созданию бодреньких прототипов с GIF-анимацией в Figma

Анастасия Свеженцева

15 июня 2020

Посты в категории UX-дизайн

Как я прокачала навыки продуктового дизайна (ux/ui), работая в техподдержке: с чего лучше начать обучение UX-дизайну

Ольга Жолудова

11 марта 2020