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

16

Я создаю форму, которая попросит посетителя firstname, middle initialи lastname. Я хочу, чтобы все эти текстовые поля были встроены, но где я должен разместить метки? Слева, сверху или под полями.

Я ищу лучший подход с точки зрения юзабилити.

— Шейн Стиллвелл
источник

Разве это не более подходит для uxexchange.com? ( uxexchange.com )

— Бобби Джек,

Вау, я не знал, что uxechange.com существует, спасибо. Судя по количеству голосов, поданных за этот вопрос, он определенно думает про веб-мастеров.

— Шейн Стиллвелл

Да, это немного «проблема». Я полагаю, что uxexchange был настроен с использованием старой модели SO. Сайтам, использующим новую модель, таким как веб-мастера, кажется, уделяется гораздо больше внимания. Так что то, что более актуально для uxexchange, становится более успешным для веб-мастеров. Я не уверен, что решение - мигрировать uxexchange?

— Бобби Джек,

10

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

Есть похожая статья Люка Вроблевского , также довольно подробная. Обе статьи достойны прочтения!

— Грант Пэйлин
источник

+1 Я собирался опубликовать те же самые ресурсы. Действительно, любой ответ на этот вопрос должен включать исследования.

— Virtuosi Media

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

— Шейн Стиллвелл

Что еще интересно в статье UXmatters, так это то, что они обнаружили, что жирные метки отвлекают посетителей и… »Жирные метки было труднее читать и воспринимать пользователям - возможно, из-за большей визуальной путаницы между жирным текстом и тяжелыми смежными границами. из полей ввода. " Хорошо знать.

— Шейн Стиллвелл

Нисколько не отрицательный, но uxmatters.com не имеет раздела «Лучшие статьи» и даже не использует инструменты Google для веб-мастеров, поэтому я могу найти их самые читаемые статьи, что не очень удобно для пользователя!

— Нил МакГиган

5

Самое главное, чтобы быть в соответствии с остальной частью вашего сайта. Как правило, большинство сайтов делают метки слева от текстовых полей. В этом случае это будет длинное описание, поэтому убедитесь, что у вас есть место, и оно течет хорошо.

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

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

— Бен Хоффман
источник

3

В любом случае, не забудьте forатрибут.

— Pierre-Alain Vigeant

4

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

Тем не менее, есть много разных способов макета страницы и доступности.

Ярлыки форм могут отображаться практически везде, где вы хотите, до тех пор, пока они появятся. Этот ресурс стоит посмотреть, http://patterntap.com/tap/collection/forms

— Kevin
источник

3

Есть два варианта, которые считаются лучшими:

метки слева от поля сбрасываются вправо, чтобы они были ближе к входу.
метки над самим полем

Еще одна важная вещь, которую нужно отметить для удобства использования, чтобы убедиться, что вы используете атрибут for метки, чтобы щелчок по метке фокусировался на поле, которое он помечает.

— GSto
источник

1

Ответ: ничего из вышеперечисленного. Используйте заполнитель текста внутри самого поля. Атрибут placeholder является встроенной частью HTML-5.

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

— Адам Л Дэвис
источник

0

Это немного касательно, но, пожалуйста, не используйте имя / фамилию / инициал. Не все имя попадает в эту аккуратную группу.

Цитирую себя на StackOverflow:

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

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

Полное имя (как обычно написано для адресации почты); Фамилия; Известен как (имя, обычно используемое в разговоре).

Например:

Полное имя: Уильям Гейтс III; Фамилия: Гейтс; Известный как: Билл

Полное имя: Сун Ли; Фамилия: Сунг; Известный как: Лиза

См. Https://stackoverflow.com/questions/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694 для получения дополнительной информации.

— Беван
источник

Я вижу ценность вашей рекомендации, но ключевым вопросом будет «кто ваша целевая аудитория?» Если 99% моей аудитории будут американцами, я бы выбрал «Имя / МИ / Фамилия». Я думаю, что многие американцы не сразу поймут, какой будет фамилия. Как сказал @RandomBen, вы должны быть последовательными, и большинство сайтов в США используют Имя / МИ / Фамилия.

— Шейн Стиллвелл