Разработка макета формы: Отступы

Разработка макета формы: Отступы

От автора: ниже приводится краткий отрывок из нашей книги Разработка UX: Формы, написанной Джессикой Эндерс. Это полное руководство, в котором представлена разработка форм, ключевой элемент эффективного UX. Мы можем незримо общаться с пользователем задавая определенные настройки для отступов.

Удаленность

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

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

Разработка макета формы: Отступы

Метки, выровненные по правому краю, должны располагаться близко к полям. С другой стороны, между каждым блоком вопроса должно быть некоторое расстояние:

Практический курс по созданию дизайна сайтов в Photoshop

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

Узнать подробнее

Разработка макета формы: Отступы

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

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

Разработка макета формы: Отступы

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

Разработка макета формы: Отступы

Подсказки, размещенные под полем, не является слишком подходящими с точки зрения доступности.

Лучшее место для подсказки — между меткой и полем (как показано на рисунке ниже). Инструкции по форматированию — например, ДД ММ ГГГГ для даты рождения — должны размещаться выше поля:

Разработка макета формы: Отступы

Инструкции по форматированию, расположенные над полем.

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

Разработка макета формы: Отступы

Остальные подсказки расположены ниже метки.

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

Разработка макета формы: Отступы

Расстояние между метками “Yes” and “No” и соответствующими им радио-кнопками означает, что пользователь должен остановиться и подумать. Вот еще одна иллюстрация плохо расположенных меток для радио-кнопок:

Разработка макета формы: Отступы

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

Ширина текстовых полей

Если мы уже взялись за отступы, давайте заодно займемся шириной текстового поля. На данный момент все наши текстовые поля, кроме полей для даты рождения, имеют одинаковую ширину:

Разработка макета формы: Отступы

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

Разработка макета формы: Отступы

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

Пустые текстовые поля

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

фоновый цвет

текст заполнителя.

Практический курс по созданию дизайна сайтов в Photoshop

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

Узнать подробнее

Не добавляйте цвет фона

Не указывайте для полей цвет фона. Цвет фона полей делает их похожими на кнопки (так же, как кнопки без цвета фона выглядят как поля):

Разработка макета формы: Отступы

В этой форме цвет фона делает поля похожими на кнопки, и наоборот.

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

Разработка макета формы: Отступы

Вам не нужно еще как-то дополнительно показывать пользователям, где нужно вводить ответы. Просто обеспечьте, чтобы была видна граница.

Разработка макета формы: Отступы

Границы полей в этой форме настолько светлые, что их почти невозможно заметить.

Не добавляйте текст заполнителя

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

Разработка макета формы: Отступы

Эти метки формы выводятся внутри полей.

Иногда это подсказки:

Разработка макета формы: Отступы

Подсказки отображаемые внутри полей.

Иногда это просто бесполезный текст:

Разработка макета формы: Отступы

Бессмысленная информация внутри полей.

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

подумают, что на этот вопрос уже был дан ответ

оставят текст заполнителя в качестве ответа, что исказит данные

не увидят текст заполнителя перед началом ввода (особенно, если они смотрят на клавиатуру при наборе текста)

не смогут увидеть весь текст заполнителя, поскольку он ограничен видимой шириной поля

забудут, что гласила метка

забудут, что гласила подсказка

найдут текст слишком маленьким для удобного чтения

не смогут просмотреть свои ответы

будут иметь проблемы с исправлением ошибок

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

«Но это экономит пространство!» — возражают некоторые дизайнеры. Это так. Но это пространство экономится за счет удобства заполнения формы. Не делай этого. Просто разместите текст за пределами полей.

Автор: Jessica Enders

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по созданию дизайна сайтов в Photoshop

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

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Рисуй крутые сайты, получай заказы и путешествуй!

Пройди практический видео курс по веб-дизайну

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree