(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)
Работая над своими дизайнами, вы обязательно столкнетесь с необходимостью запрашивать информацию у пользователя. Поэтому сегодня мы вихрем пронесемся по теме:
Формы
Формы — это та область дизайна, на которую вы потратите много времени, и все ради юзабилити. Формы вечно вызывают у пользователей недопонимания, ошибки, потерю интереса к происходящему, а еще формы — это одна из самых ценных частей вашего дизайна.
А если они не являются для вас одной из самых ценных частей дизайна, то зачем же вы их используете? Вы же слышали меня: они вызывают недопонимания, ошибки и потерю заинтересованности.
Одна длинная страница или несколько коротких?
Один из самых распространенных вопросов, возникающих у UX-дизайнеров и прочих маркетинговых ребят — “Какой длины должна быть форма?”
Как правило, чем короче форма, тем лучше. Но не бойтесь разбивать ее на несколько страниц, когда в этом есть смысл, или когда вы хотите пошагово сохранять данные, на случай, если пользователь покинет страницу где-то в середине процесса заполнения.
Главное, чтобы форма ощущалась простой в использовании. Размещайте близкие по смыслу вопросы друг за другом. Убирайте вопросы, которые вам особо не нужны. И разбивайте форму на столько страниц, на сколько кужно. Ни больше, ни меньше.
Типы ввода
Цель формы — это ввод — т.е. информация от пользователя. И получить ее вы можете несколькими способами. Не важно, используете ли вы обычный текстовый ввод или супер-индивидульный слайдер, — вы должны выбирать тот тип ввода, который дает вам максимально качественные ответы.
- здесь есть список стандартных типов ввода
- а вот список новых модных типов ввода на HTML5
- а это список разных пород коз
Пример: Допустим, вам нужно, чтобы пользователь выбрал его любимую породу коз. Выбрать опцию из списка можно, например, при помощи чекбоксов (флажков, галочек) или радиокнопок (переключателей). Однако, с помощью чекбоксов можно выбрать более одной опции, а вот радиокнопка позволяет сделать только один выбор.
Если вам важно, чтобы ответ был полным, выбирайте чекбоксы. Если вы хотите, чтобы пользователь был избирательнее, вам больше подойдут радиокнопки.
Метки и инструкции
О том, как писать метки и инструкции, мы поговорим завтра. А сейчас давайте поговорим о назначении меток.
Когда вы добавляете к полям ввода метки с подсказками — а как еще узнать, что там писать? — пусть они будут краткими, вразумительными и предельно ясными. По большому счету, это должно решить 99% проблем с метками.
Иногда, когда вопрос неоднозначный или сложный, инструкции просто необходимы. В таких случаях, объяснение не помешает. Если инструкция умещается в несколько слов, разметите ее рядом с меткой и полем ввода. Если объяснение длиннее, разместите его сбоку от формы (а не внутри), чтобы не прерывать тех пользователей, которые и так понимают, что нужно делать.
Очень рекомендую книгу Люка В. — Web Form Design
Предотвращаем и разбираемся с ошибками
Когда дело касается форм, ошибки встречаются. Наша работа — предотвратить большую их часть, а с оставшимися разобраться как можно элегантнее.
Можно предотвратить ошибки, сделав поля ввода “умнее”. К примеру, если текстовое поле предназначено для номера телефона, убедитесь что оно может умно трансформироваться в “(000) 000–0000” или “000 000 0000” или “0000000000” или “000.000.0000”. (Поговорите об этом с вашими разработчиками).
Подсказывая пользователю, какую информацию вы ожидаете в данном поле, вы уменьшаете количество ошибок. Ваша подсказка может как находиться в самом поле ввода, так и быть частью инструкций к вопросу.
Когда пользователь пропускает вопрос или ошибается, вы должны его предупредить, чтобы он мог исправиться. Если вы можете проверить правильность введенной информации, отображайте рядом с полем галочку или крестик (в зависимости от того, правильно или неправильно введены данные). Это называется исправлением ошибок inline (т.е. прямо по ходу работы).
При помощи этого inline-метода обычно проверяется надежность введенного пароля (“слабый”/“надежный”).
Не нужно использовать inline-метод исправления ошибок, если вы не можете проверить правильность введенных данных, как, например, в случае с именем человека.
Когда пользователь нажимает “Далее” или “Готово”, вы можете проверить форму на предмет ошибок или пропущенных вопросов. Если что-то не в порядке, очень доходчиво — при помощи визуальных приемов — сообщите пользователю, что он пропустил и где ошибся.
Профессиональный совет: позаботьтесь о том, чтобы пользователь сразу видел ошибку, находясь внизу формы. Если ему придется скролить вверх, чтобы понять, что случилось, он просто-напросто уйдет.
Скорость и ошибки
Это уже достаточно продвинутый уровень информации, но это очень полезно:
Вы задаете пользователям общие вопросы, типа “Имя” и “Адрес”, или более специфические, скажем: “Какая твоя любимая картина из бархата?” Если ваши вопросы общие, располагайте метки над полями ввода и выравнивайте все по левой стороне — так пользователи как можно быстрее справятся с заполнением. При такой организации все находится на оси взаимодействия.
В случае нестандартных или сложных вопросов, используйте форму с метками слева от поля ввода (или в том же ряду); это немного замедлит пользователя, но приведет к меньшему количеству ошибок.
Как правило, кнопку “Готово” следует размещать слева, на оси взаимодействия формы.
Но если заполнение формы может привести к каким-то критическим или разрушительным последствиям, то расположите кнопку справа. В этом случае, люди на секунду “притормозят” в поисках кнопки, вместо того, чтобы нажать ее автоматически.
Фуф! Вот это длинный урок! Хорошо поработали!
Завтра мы научимся писать метки, инструкции и кол-ту-экшны (призывы к действию):
И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле