Полное руководство по размещению меток для элементов формы

Когда дело доходит до дизайна и разработки форм, одной из самых популярных тем является размещение меток.

Есть много различных способов размещения, но многие статьи затрагивают только некоторые достоинства и недостатки этих способов.

Как объединить вместе разнообразную информацию по этому вопросу, чтобы принять правильное решение, особенно если вы торопитесь?

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

Если у вас нет времени на прочтение, то вам нужно знать как минимум это:

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

Способы размещения меток на форме

Основными способами размещения меток на форме для письма справа налево являются:

1. Метка над полем формы
2. Метка слева от поля, с выравниванием по левому краю
3. Метка слева от поля, с выравниванием по правому краю
4. Метка внутри поля
5. Метка в виде всплывающего блока

Одни из них хуже, другие - лучше. Вот полный список достоинств и недостатков каждого из них.

1. Метка над полем формы

Преимущества:

• На малых экранах, при фокусировке на поле, метка остается видна (несмотря на масштаб)
• Пользователь может видеть метку и поле одним взглядом
• Длина метки может быть больше длины поля
• Возможно использование различных длин текста метки при переводе на другие языки
• Форма выходит уже, чем при размещении меток по боковой стороне поля
• Длинные метки с переносом строки легче читать, так как они выровнены по левому краю, и глазе легче определить позицию для возврата к началу строки
• Метки находятся в непосредственной близости к соответствующим полям, так что легко определить, к какому полю какая метка относится
• Метка видна даже тогда, когда соответствующее поле уже заполнено какими-то данными, так что пользователю нет необходимости запоминать, какое поле за что отвечает
• В любое время пользователь может соотнести свои ответы с метками
• Просты во внедрении
• Разметка не требует использования заполнителей в качестве проксирующего атрибута для текста метки, что помогает поддерживать доступность
• Пользователям легко определить, куда нужно вводить информацию
• Работает независимо от типа поля (текстовое поле, переключатели, флажки, выпадающие списки)
• Работает с сенсорными интерфейсами

Недостатки:

• Форма в два раза длиннее, по сравнению с вариантами размещения меток сбоку от полей
• Метки труднее пробегать глазами, так как между ними вклиниваются поля

2. Метка слева от поля, с выравниванием по левому краю

Преимущества:

• Форма получается короче, по сравнению с вариантом с метками над полями
• Длина текста метки может быть больше длины поля
• Метки легче пробегать глазами, так как они располагаются друг под другом
• Метка видна даже тогда, когда соответствующее поле уже заполнено какими-то данными, так что пользователю нет необходимости запоминать, какое поле за что отвечает
• В любое время пользователь может соотнести свои ответы с метками
• Просты во внедрении
• Разметка не требует использования заполнителей в качестве проксирующего атрибута для текста метки, что помогает поддерживать доступность
• Пользователям легко определить, куда нужно вводить информацию
• Работает независимо от типа поля (текстовое поле, переключатели, флажки, выпадающие списки)
• Работает с сенсорными интерфейсами

Недостатки:

• На малых экранах при фокусировке на поле, метки могут не попадать в область просмотра (из-за масштаба)
• Скорее всего пользователи не будут видеть одновременно и метку, и поле одним взглядом
• При переводе на другие языки текст метки может уже не вмещаться в отведенное для него пространство
• Форма становится шире, чем аналогичный вариант с метками над полями
• Метки могут быть далеко от соответствующих полей, так что может быть трудно определить, к какому полю относится данная метка (чередование цветов может помочь уменьшить проблему)

3. Метки слева от поля, с выравниванием по правому краю

Преимущества:

• Пользователь может удержать и метку, и поле в своем поле зрения
• Форма получается короче, по сравнению с вариантом с метками над полями
• Длина текста метки может быть больше длины поля
• Метки легче пробегать глазами, так как они располагаются друг под другом
• Метки находятся в непосредственной близости к соответствующим полям, так что легко определить, к какому полю какая метка относится
• Метка видна даже тогда, когда соответствующее поле уже заполнено какими-то данными, так что пользователю нет необходимости запоминать, какое поле за что отвечает
• В любое время пользователь может соотнести свои ответы с метками
• Просты в реализации
• Разметка не требует использования заполнителей в качестве проксирующего атрибута для текста метки, что помогает поддерживать доступность
• Пользователям легко определить, куда нужно вводить информацию
• Работает независимо от типа поля (текстовое поле, переключатели, флажки, выпадающие списки)
• Работает с сенсорными интерфейсами

Недостатки:

• На малых экранах при фокусировке на поле, метки могут не попадать в область просмотра (из-за масштаба)
• При переводе на другие языки текст метки может уже не вмещаться в отведенное для него пространство
• Форма становится шире, чем аналогичный вариант с метками над полями
• Длинные метки с переносом текста труднее читать, так как левая граница текста получается рваной, и глазу труднее определить начало строки

4. Метка внутри поля

Преимущества:

• На малых экранах, при фокусировке на поле, метка остается видна (несмотря на масштаб)
• Пользователь может удержать и метку, и поле в своем поле зрения
• Форма получается компактнее по сравнению с метками над и около полей
• Метки находятся в непосредственной близости к соответствующим полям, так что легко определить, к какому полю какая метка относится
• Работает с сенсорными интерфейсами

Недостатки:

• Длина текста метки должна быть меньше ширины поля
• При переводе на другие языки текст метки может уже не вмещаться в отведенное для него пространство
• Метки труднее пробегать глазами, так как они размещаются внутри полей
• Метки с длинным текстом и переносами недопустимы
• Так как текст метки пропадает, как только пользователь вводит данные в поле, ему необходимо запоминать, какое поле и за что отвечает, что ведет к задержкам в заполнении формы
• Так как текст метки пропадает при заполнении поля, пользователь не может впоследствии соотнести метки с данными в полях
• Если метка не убирается из поля при его заполнении, то пользователю остается меньше места для обзора введенных данных, и в этом случае нет никакой экономии места
• Трудно правильно внедрить на всех системах
• В разметке необходимо использование дополнительного атрибута для заполнителя в качестве замены метки, что снижает доступность
• Так как поля выглядят так, как будто-бы они уже заполнены, пользователям труднее определить, в какие поля им еще нужно ввести данные, а это приводит к увеличению количества ошибок
• Не работает с типами полей, отличных от текстовых (и, возможно, выпадающих списков)

5. Метка во всплывающем блоке

Преимущества:

• Позволяет использовать разные длины текста меток при их переводе на другие языки
• Форма получается компактнее по сравнению с вариантами размещения меток над и около полей
• Метки визуально ассоциированы с соответствующими полями, так что проще определить, к какому полю какая метка относится
• Пользователям проще определить, куда нужно вводить данные

Недостатки:

• Нетипичный дизайн, больше шансов запутать и обескуражить пользователя
• Ломает диалоговый шаблон, который лежит в основе успешного заполнения формы: задайте вопрос, прежде чем получить на него ответ
• На малых экранах при фокусировке на поле метки могут не попадать в область видимости
• Метка и поле вряд ли могут одновременно попасть в поле зрения пользователя
• При переводе формы на другой язык, текст меток может не помещаться в отведенное для них место
• Метки невозможно пробежать глазами, пока они скрыты
• Если метка пропадет во время ввода пользователем данных, пользователю нужно запоминать, какая была метка
• Если метка пропадет во время ввода пользователем данных, пользователю будет трудно сравнить свой ответ с соответствующей меткой
• Тяжелее внедрять
• Снижает доступность
• Не работает с типами полей, отличных от текстовых, и, возможно, выпадающих списков
• Не очень хорошо работают с сенсорными интерфейсами

Решаем, какое размещение использовать

Даже если вы не прочли списки достоинств/недостатков, то и так видно, что недостатков больше, чем преимуществ для следующих вариантов:

• метка внутри поля
• метка как всплывающее сообщение

Так что в большинстве случаев это будет плохой выбор. Взамен воспользуйтесь одним из следующих вариантов:

• метка над полем
• метка слева от поля, выровненная по левому краю
• метка слева от поля, выровненная по правому краю

Чтобы отдать предпочтение одному из этих вариантов, задайте себе следующие вопросы:

Последовательность

В рамках формы

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

Вразрез с другими формами

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

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

Заключение

Размещение меток полей формы - горячо обсуждаемая тема, где люди торопятся объявить один подход абсолютным победителем. Реальность же изобилует нюансами. Но это не означает, что выбор способа размещения меток должен быть труден.