От автора: ниже приводится краткий отрывок из нашей книги Разработка UX: Формы, написанной Джессикой Эндерс. Это полное руководство, в котором представлена разработка форм, ключевой элемент эффективного UX. Сегодня мы поговорим про выравнивание формы.
Вы с подругой отправляетесь на ужин в ресторане. Оба вы, каждый со своей стороны, выезжаете на скоростную магистраль с двумя полосами. Для обоих из вас расстояние до ресторана является одинаковым. По пути следования все встречающиеся вам машины, которые имеют меньшую скорость, движутся по правилам — они придерживаются правой полосы, чтобы более быстрые автомобили могли обогнать их по левой. По пути следования вашей подруги автомобили хаотично движутся в обеих полосах, и она вынуждена маневрировать между ними. Кто из вас первым попадет в ресторан?
Вертикальный путь к заполнению
Прямой, беспрепятственный маршрут является самым быстрым для передвижения на автомобиле, а также для заполнения формы. Итак, ваш следующий шаг — вертикально выровнять все поля формы, а также основную кнопку формы (называемую основной кнопкой действия):
Теперь вы создали прямой, беспрепятственный вертикальный путь к заполнению формы. Мало того, что вы обеспечили, чтобы форму можно было заполнить быстрее, теперь она выглядит еще и более аккуратной и простой. (В ближайшее время мы подробнее рассмотрим некоторые поля формы и их метки.)
Не размещайте поля рядом друг с другом
Поскольку вертикальный путь к заполнению делает форму более длинной, у вас может возникнуть соблазн разместить некоторые поля рядом друг с другом:
В этой форме поля для ввода секретного кода и почтового индекса были размещены рядом с другими полями. Это плохая идея по следующим причинам:
Таким образом, прерывается поступательный поток заполнения формы (это тот же сломавшийся автомобиль в вашей быстрой полосе).
Пользователи часто упускают из виду поля расположенные справа, потому что они выпадают из их фокуса зрения (в него попадают всего лишь девять символов).
Это делает более сложным отображение формы на больших и малых экранах. (Подробнее об этом ниже.)
Кроме того, как мы писали в главе 3, для пользователей важен логический или смысловой объем формы, а не ее фактическая длина в сантиметрах. Вертикальный путь к заполнению позволяет заполнять форму не только объективно быстрее, но и субъективно пользователю кажется, что форма это делается быстрее.
Выравнивание полей
Тем не менее, иногда вы можете сэкономить пространство. Давайте рассмотрим, как размещаются поля в приведенном ниже маркетинговом блоке:
Каждый раз, когда поля являются небольшими, мы можем разместить их горизонтально. (Для этой цели мы определяем три «маленьких» варианта ответов, все с короткими метками.) Такая форма будет по-прежнему работать на сенсорных и небольших экранах. Маркетинговый блок предполагает только такие варианты ответов:
Фактически, дата рождения это также несколько полей, в которых могут вводиться очень коротки ответы. Возможно, вы даже не обращали на это внимание, и для вас естественно что все они размещаются в одной строке:
Но помните: вы можете размещать поля рядом друг с другом, только если они небольшие. В противном случае может случиться так, что макет будет нарушен. Например, блок, относящийся к профилям в социальных сетях содержит много разнообразных полей. Если мы попытаемся разместить их все в одну строку рядом друг с другом, это приведет к тому, что часть элементов не будет помещаться в окне просмотра и будет выходить за его пределы. Что приведет к тому, что на экране появится эта ужасная полоса горизонтальной прокрутки:
Если мы поместим длинный набор полей горизонтально, то скорее всего, это приведет к добавлению полосы прокрутки на больших экранах.
Если наши поля являются большими, то весьма вероятно, что на экране мобильного устройства также будет отображаться горизонтальная полоса прокрутки. Исходя из того, что мы не можем создать собственный виджет, лучше всего оставить эти поля вертикальным списком:
Большие наборы вариантов ответов или чек-боксов следует размещать по вертикали.
Такое размещение также прекрасно подходит для мобильных устройств.
Размещение меток
Как вы могли заметить по приведенным выше изображениям, у нас есть одна проблема с отображением формы на мобильных устройствах. На маленьких экранах, когда поле выделено фокусом ввода, его метка становиться не видна, как на приведенном ниже рисунке:
Первоначально метки поля, размещенные слева, видны. Но когда пользователь начинает заполнять форму, они скрываются. Мы могли бы избежать этого, всегда размещая метки над полями. Но это создает новую проблему: форма становится визуально намного длиннее. Вот как это будет выглядеть на большом экране:
Форма выглядит длиннее, если метки располагаются над полями.
Чтобы решить эту проблему, нам нужно сделать форму адаптивной. На больших экранах метки будут размещаться слева от полей; на малых экранах, метки будут размещаться над ними. Таким образом, мы обеспечим эффективное использование пространства на больших экранах, при этом форма также будет нормально отображаться на меньших экранах.
На мобильных устройствах метки расположены над полями, чтобы они были видны при заполнении поля. А вот как форма будет выглядеть на большом экране:
Вот реальный пример адаптивной формы — сначала версия для больших экранов, а ниже приведено отображение формы на малых экранах:
На больших экранах метки расположены слева от полей, поэтому форма выглядит красивой и короткой.
На меньших экранах метки размещены над полями, поэтому они всегда видны.
Как насчет подтверждения реальными исследованиями?
Одна из самых популярных статей на сайте UXMatters, цитируемая в книгах и статьях Люка Вроблевски — это исследование визуального восприятия Маттео Пензо. Это исследование часто используется в качестве доказательства того, что метки никогда не должны размещаться слева от полей, но всегда над ними.
Проблема заключается в том, что вы никогда не должны основывать решения проектирования на одном исследовании, особенно с неизвестной методологией и очень незначительными различиями в результатах! Вместо этого вам нужно взвесить все плюсы и минусы, основываясь на теоретических выкладках и практических экспериментах по изучению поведения пользователей. Когда вы сделаете так, то поймете, что для больших экранов преимущества размещения меток слева от полей перевешивают недостатки. Пользователю достаточно незначительно перевести взгляд, чтобы увидеть метку, в то же время сама форма становится значительно короче.
Избегайте разрывов
В дополнение к тому, что уже было сказано, есть еще две возможности увеличить удобство использования вашей формы, когда у вас метки размещаются слева от полей. Эти способы важны для предотвращения возникновения «разрывов» между метками и полями формы:
Для многих полей в приведенной выше форме метка находится далеко от соответствующих полей. Эти пробелы могут затруднить для пользователя сопоставление меток с полями. Если метки в основном короткие, вы можете сместить их вправо, чтобы они находились рядом с полями:
Метки смещены вправо. Если большинство меток являются длинными, их будет сложно прочитать, когда они будут смещены вправо. В этом случае выровняйте их по левому краю (как обычный текст), но добавьте для формы чередующиеся цветные полосы:
Чередующиеся цветные полосы в качестве фона меток, выровненных по левому краю. Чередующиеся цветные полосы — это легкое затемнение тона фона для определенных вопросов. Это помогает глазу связать метку с полем (о чем свидетельствует исследование, которое я провела некоторое время назад, а также последующие практические наблюдения).
Выравнивание кнопок
Одноэтапные формы. Если у вас есть только одна основная кнопка действия, выравнивайте ее одинаково с полями. Это то, что сделано в форме, приведенной на рисунке ниже:
Левый край основной кнопки действия выравнивается одинаково с левым краем полей.
Многоэтапные формы
Если заполнение формы осуществляется в несколько этапов, вам необходимо предоставить кнопки для перехода от одного этапа к другому. Один из вариантов — поместить кнопку «Next» на уровне с полями, также, как было описано для одноэтапных форм:
«Next» — это основное действие, поэтому оно вертикально выровнено одинаково с полями. Другой вариант — разместить кнопку «Next» справа, а кнопку «Back» — слева (для англоязычных пользователей).
Англоязычные пользователи обычно воспринимают перемещение направо, как перемещение вперед, а перемещение влево — как назад, так что мы можем выровнять кнопки таким образом.
Оба подхода зарекомендовали себя, как рабочие, но это может зависеть от контекста. Если вы не уверены, что именно подойдет для вашей формы, проведите несколько тестов юзабилити на целевой аудитории.
(Вы также можете поместить многоэтапные формы в аккордеон, но аккордеоны имеют ряд проблем с юзабилити, поэтому их лучше не использовать.)
Кнопки на мобильных устройствах
Для небольших экранов вы можете сделать кнопки адаптивными, чтобы они:
группировались в стек, причем кнопка основного действия размещалась выше
растягивались на всю ширину экрана, за исключением небольшого пространства с обеих сторон (так, чтобы они отображались четко).
Сделав кнопки адаптивными, мы можем обеспечить, чтобы они хорошо работали на мобильных устройствах. К настоящему времени наша форма выглядит очень хорошо и удобна для обработки на различных размерах экранов. Но мы можем внести дополнительные улучшения, которые рассмотрим далее.
Автор: Jessica Enders
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
