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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

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

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

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