От автора: ниже приводится краткий отрывок из нашей книги Разработка UX: Формы, написанной Джессикой Эндерс. Это полное руководство, в котором представлена разработка форм, ключевой элемент эффективного UX. Мы можем незримо общаться с пользователем задавая определенные настройки для отступов.
Удаленность
Люди воспринимают расположенные рядом вещи, как связанные. И наоборот, вещи, которые не связаны между собой, обычно располагаются через определенный отступ между ними.
Эти принципы следует использовать при расположении различных элементов блока вопроса формы: меток, подсказок и самого поля для ввода ответа, — они должны располагаться близко друг к другу. На данный момент наша форма уже довольно неплоха, но давайте просто переместим метки немного вправо, чтобы они были ближе к полям:
Метки, выровненные по правому краю, должны располагаться близко к полям. С другой стороны, между каждым блоком вопроса должно быть некоторое расстояние:
Вопросы должны располагаться достаточно далеко друг от друга, чтобы было понятно, где заканчивается один вопрос и начинается следующий.
Помните, что фокус зрения пользователя захватывает около девяти символов? Ну, это означает, что подсказки для полей вопросов, которые находятся справа от поля, часто не будут попадать в поле зрения пользователя:
Это означает, что многие пользователи даже не увидят подсказки в этой форме. Мы могли бы переместить подсказки ниже поля, но это означает, что пользователи могут увидеть их уже когда ответят на вопрос. Это также не слишком приемлемо.
Подсказки, размещенные под полем, не является слишком подходящими с точки зрения доступности.
Лучшее место для подсказки — между меткой и полем (как показано на рисунке ниже). Инструкции по форматированию — например, ДД ММ ГГГГ для даты рождения — должны размещаться выше поля:
Инструкции по форматированию, расположенные над полем.
Другие подсказки должны размещаться ниже метки. Например для вопросов относительно количества сотрудников, маркетинговый блок и т.д.
Остальные подсказки расположены ниже метки.
Наконец, когда мы используем чек-боксы и переключатели, мы должны обеспечить, чтобы метки располагалась рядом с правой кнопкой или полем. Если они слишком далеко, все становится запутанным, особенно если вы не затеняете область блока:
Расстояние между метками “Yes” and “No” и соответствующими им радио-кнопками означает, что пользователь должен остановиться и подумать. Вот еще одна иллюстрация плохо расположенных меток для радио-кнопок:
Вполне вероятно, что многие пользователи поставят оценку, которую не собирались ставить, так как расстояние между кнопками маленькое и сбивает их с толку.
Ширина текстовых полей
Если мы уже взялись за отступы, давайте заодно займемся шириной текстового поля. На данный момент все наши текстовые поля, кроме полей для даты рождения, имеют одинаковую ширину:
Однако ширина текстового поля дает пользователю понять, какая информация от него ожидается. Опыт взаимодействия пользователя будет лучше, если мы сделаем размеры пропорциональными ожидаемой информации (как мы уже делали с датой рождения):
Обратите внимание, что речь здесь идет о визуальной ширине, а не о допустимом количестве символов. Поле адреса электронной почты может иметь такую визуальную ширину, как показано на рисунке, но в него можно вводить до 256 символов.
Пустые текстовые поля
Другим важным аспектом отступов и размеров текстовых полей является пространство, которое для них отводится. Данное пустое пространство — это то, что дает пользователю понять, что он должен что-то здесь ввести. Слишком много форм имеют текстовые поля, которые не являются полностью пустыми. Их заполняют две вещи:
фоновый цвет
текст заполнителя.
Не добавляйте цвет фона
Не указывайте для полей цвет фона. Цвет фона полей делает их похожими на кнопки (так же, как кнопки без цвета фона выглядят как поля):
В этой форме цвет фона делает поля похожими на кнопки, и наоборот.
Простой границы с четырех сторон достаточно, чтобы показать пользователям, где им вводить данные, будет достаточно:
Вам не нужно еще как-то дополнительно показывать пользователям, где нужно вводить ответы. Просто обеспечьте, чтобы была видна граница.
Границы полей в этой форме настолько светлые, что их почти невозможно заметить.
Не добавляйте текст заполнителя
Даже еще хуже работает внутри поля заполнитель. Ответ должен быть единственным, что может размещаться внутри поля. К сожалению, текст заполнителя используется разработчиками слишком часто. Иногда он используется для меток полей.
Эти метки формы выводятся внутри полей.
Иногда это подсказки:
Подсказки отображаемые внутри полей.
Иногда это просто бесполезный текст:
Бессмысленная информация внутри полей.
Я повторюсь — очень важно не делать этого. Никогда не добавляйте текст внутри поля. Это значительно ухудшает опыт заполнения формы, так как многие пользователи:
подумают, что на этот вопрос уже был дан ответ
оставят текст заполнителя в качестве ответа, что исказит данные
не увидят текст заполнителя перед началом ввода (особенно, если они смотрят на клавиатуру при наборе текста)
не смогут увидеть весь текст заполнителя, поскольку он ограничен видимой шириной поля
забудут, что гласила метка
забудут, что гласила подсказка
найдут текст слишком маленьким для удобного чтения
не смогут просмотреть свои ответы
будут иметь проблемы с исправлением ошибок
Кроме того, текст внутри полей часто недоступен, а атрибут placeholder точно не поддерживается во всех браузерах. (Когда-то было необходимо указывать текст-заполнитель из соображений доступности, поскольку экранные дикторы не всегда анонсировали поле формы. Теперь экранные дикторы последовательно используют элемент label для указания цели поля.)
«Но это экономит пространство!» — возражают некоторые дизайнеры. Это так. Но это пространство экономится за счет удобства заполнения формы. Не делай этого. Просто разместите текст за пределами полей.
Автор: Jessica Enders
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
