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

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

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

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

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

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

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

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

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

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

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

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

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

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

Недостатки:

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

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

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

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

Недостатки:

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

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

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

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

Недостатки:

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

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

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

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

Недостатки:

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

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

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

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

Недостатки:

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

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

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

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

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

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

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

Вопрос к назначению формы Как ответ влияет на положение метки
Будет ли форма заполняться на устройствах с малыми экранами? Лучший выбор для малых экранов - метки над полями
Будет ли форма использоваться на устройствах с сенсорным управлением? Избегайте использования меток в заполнителях и всплывающих блоках
Метки в основном короткие? Метки по бокам от поля лучше показывают себя с малой длиной текста
Вопросы в метках длинные (например, “Когда бы вы хотели начать новый период?” Для длинных вопросов метки можно размещать как над полями, так и в стороне, но текст должен быть выровнен по левой стороне
Будет ли переводиться форма? Метки над полями - наиболее гибкий вариант для переводов
Какие типы полей будут использоваться на форме? Если на форме есть поля, отличные от текстовых, нельзя размещать метки внутри полей. Метки в виде всплывающих блоков тоже плохой вариант.
Какое время можно потратить на разработку? Метки над полями требуют наименьшего времени на разработку, примерно как и метки сбоку от полей
Какого уровня навыками обладает разработчик? Метки внутри полей или в виде всплывающих блоков можно внедрять только при наличии разработчиков высокого уровня, у которых на это есть время

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

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

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

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

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

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

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/definitive-guide-form-label-positioning/
Перевел: Станислав Протасевич
Урок создан: 31 Мая 2014
Просмотров: 10139
Правила перепечатки


5 последних уроков рубрики "HTML и DHTML"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 4 Июня 2014 13:37
    dimaloll
    Где дэмо???
    • 12 Июня 2014 01:50
      cyberdelia
      Простите, а какое демо вам нужно? Все проиллюстрировано на изображениях, здесь описан принцип, плюсы и минусы распространенных подходов, а реализация остается на откуп разработчиков и дизайнеров.
^ Наверх ^