Формы для сайта: юзабилити форм

Содержание

Покажите напоминание о виде вводимых данных

<input type=”email” id=”email” name=”email” required>

Это поле является обязательным для заполнения и вводимая информация будет проверяться на соответствие адресу электронной почты. Давайте улучшим UX:


  1. Сообщим пользователю о требуемом формате, когда фокус находится в поле ввода
  2. Напомним ему, если введенные данные не будут валидными

Но еще… не показывайте никаких подсказок, если поле пустое. И не считайте его неверно заполненным. Это может создать ощущение назойливости и будет только раздражать. Для того, чтобы соблюсти эту рекомендацию, мы должны будем узнать, пустое поле или нет.

(Вы можете) сделать label похожим на placeholder

Во-первых: всегда используйте настоящий элемент <label for=”correct_input”>. Игнорирование одного этого правила из соображений UX портит очень много форм. Плейсхолдер — всего лишь подсказка того, как должна выглядеть валидная информация в поле ввода, типа “введи Москва в поле под названием Город”.

Я бы сказал, что если форма короткая и с понятным паттерном поведения (вход или регистрация), то вы можете сделать названия полей в виде плейсхолдеров, но используйте для этого реальные элементы label.

Создадим форму…

<form action=”#0" method=”post”>   <div>     <input type=”text” id=”first_name” name=”first_name”>     <label for=”first_name”>First Name</label>   </div> <! — … — -> </form>

Используем <div> для позиционирования и размещения названия поля непосредственно поверх самого поля.

SCSSform {  max-width: 450px;  // позиционируем  > div {    position: relative;   // Похоже на плейсхолдер    > label {      opacity: 0.3;      position: absolute;      top: 0;      left: 10px;    }  }}

Вам не нужно хитро изворачиваться и беспокоиться об установке курсора в поле ввода, все уже сделано семантикой. Если пользователь нажимает на название поля — активируется поле ввода. Если нажимает на само поле — курсор устанавливается в поле ввода. Оба варианта верны.

Фишка в том, чтобы поставить поле ввода первым (семантически допустимо). Таким образом вы сможете скрывать label при фокусе:

SCSSform { /* … */  > div {    > input,    > input,    > input {      &:focus {        & + label {          opacity: 0;        }      }    }  }}

Проверка чекбокса

В завершении проверяется чекбокс «terms». Мы хотим, чтобы пользователь был согласен с условиями соглашения, поэтому нужно быть уверенным, что он отметил свое согласие:

Так как мы устанавливаем переменную valid в значение false в любом из перечисленных выше случаев, если хотя бы одно нарушение произойдет, то данные формы не будут отправлены на сервер. Если пользователь незаполнил более одного поля, то он увидит окно сообщения для каждого незаполненного поля.

Теперь Вы знаете как писать проверочный скрипт для нескольких полей ввода в форме, включая текстовое поле ввода, радиокнопки, выпадающие списки и чекбоксы.

Отображение этапов заполнения формы

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

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

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

Это поля, которые ваши клиенты будут заполнять в форме. Любое поле может быть обязательным. Это означает, что клиент не может отправить форму, если вы не заполните все поля, которые вы отметили как обязательные. Обязательное поле: каждая форма содержит как минимум одно обязательное поле, которое должны заполнять ваши клиенты; это имя или имя.

Многие продавцы реализуют это посредством визуальной диаграммы, описывающей прогресс в заполнении формы заказа или оплаты. Не забудьте дать название каждому этапу:

Четко укажите, зачем вам нужна запрашиваемая информация

Персональные данные – ценнейший актив в интернете. Когда появляется возможность узнать больше о собственных клиентах, сложно удержаться от потока вопросов.

Регистрация для лиц в возрасте до 13 лет невозможна. Подтвердите свой адрес электронной почты, введя его снова. Введенный вами почтовый код недействителен. Месяц, который вы выбрали, не может превышать 30 дней. Пожалуйста, подтвердите свой пароль, введя его снова. Введите действительный адрес электронной почты, чтобы мы могли связаться с вами относительно вашего членства.

Это значение невозможно. Фамилия не может быть длиннее 35 символов. Требуется фамилия Пожалуйста, выберите секретный вопрос. Укажите год рождения. Альтернатива В качестве альтернативы у меня есть один: введите свой адрес электронной почты. Почтовый код не должен превышать 5 цифр. Выберите основной отдел. Требуется, чтобы вы ввели свой предполагаемый год окончания. Укажите год окончания обучения. Введенный вами последний год недействителен. Требуется вопрос безопасности. Для выполнения определенных действий, перечисленных в этой статье, необходимы разрешения администратора.

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

Не забудьте сообщить, для чего вам нужны вводимые данные, если только ответ не очевиден. Хороший пример – номер телефона клиента. Никто не хочет, чтобы его начали бомбить телефонными звонками и смс. Примеры от Lamoda и Wildberries наглядно демонстрируют, как объяснить клиенту, зачем вам нужна дата рождения.

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

Lamoda

Wildberries

Располагайте метки полей справа или сверху

Заставлять пользователей бегать глазами туда-сюда от метки поля к полю – огромная ошибка в любом дизайне, которая вызывает «когнитивную нагрузку». Согласитесь, есть разница между последовательным заполнением формы и мыслями о том, что «эту сложную форму лучше заполнить попозже». В большинстве случаев «попозже» так и не наступает.

Поля ввода данных о кредитке должны располагаться так, как на самой карте

Выбранный месяц рождения не может превышать 29 дней в течение високосного года. Если вы хотите получать электронные письма от нас, введите другой адрес. Введите его сейчас или выберите другое название работы. Укажите академическую степень. Идентификатор пользователя не может быть длиннее 50 символов. Введите название работы. Введите пароль. Ввод регистрационного номера является обязательным. Год рождения должен включать 4 номера. Теперь вы готовы зарегистрироваться! Нажмите «Отправить». Действительные символы.

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

Расположение по правой стороне – следующий по предпочтению вариант. Аккуратное левое поле может быть предпочтительнее с точки зрения эстетики, но такой способ расположения меток – самый неудобный для пользователя.

Выберите сферу обучения. Требуется подтверждение адреса электронной почты. Этот год не может совпадать с вашим днем ​​рождения. Месяц рождения, который вы выбрали, не может превышать 28 дней вне високосных лет. Проверьте свою личную информацию. Перед отправкой убедитесь, что все данные заполнены и действительны. Для успешной регистрации требуется вся информация. Пожалуйста, укажите желаемую медицинскую специализацию. Введите свой заголовок. Пароли не совпадают. Единый учебный номер — это 15-значный номер, который каждый врач получает от своего государственного медицинского совета.

1.Используйте необязательные поля вместо обязательных


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

Секрет заключается в так называемом «добровольном раскрытии информации»: по умолчанию люди запрограммированы на то, чтобы рассказать больше информации, чем от них требуется. Но если помечать поля как обязательные для заполнения (со знаком *), то это желание быстро улетучится. Практика показала: эффективнее помечать поля, не обязательные для заполнения, что подталкивает клиента последовательно заполнить почти всю форму, не выискивая обязательные поля.

Если для метки не указан текст, текст заголовка также используется в качестве метки. Описание появляется, когда пользователь перемещает мышь над полем при вводе — например. Например, при создании сообщения, контакта или компонента, который поддерживает настраиваемые поля. Описание не переводится на многоязычный веб-сайт. Описание не видно в интерфейсе. Обязательно. Это обязательное поле? В этом случае поле должно быть заполнено до отправки сообщения, контакта или формы компонента, который использует Мои поля. В качестве опции можно выбрать «да» или «нет». По умолчанию Здесь вы можете ввести значение по умолчанию для поля. Этот текст не переводится для многоязыковых установок. Примечание. В некоторых полях значение должно вводиться как стандартное, в других — значение индекса. Статус Здесь вы можете установить значение для публикации. Является ли значение опубликованным, скрытым, архивированным или корзиночным? Опубликовано: поле отображается при редактировании сообщения или контакта и отображается. Это также видно на опубликованном веб-сайте. Неопубликованные: это поле не отображается пользователям при редактировании сообщений или контактов. Архивировано: поле больше не отображается при редактировании сообщения или контакта. Он будет открыт в полевом менеджере, если статус установлен в «Архивировать». Корзина: поле было удалено, но все еще находится в базе данных. Навсегда и полностью удаляется, он будет удален поверх кнопки «Корзина» в «Менеджер полей».

  • Этот текст не переводится на многоязычный сайт.
  • Описание Описание поля, которое появляется в подсказке над полем ввода.

В вкладке «Опции» можно использовать следующие параметры.

Кнопки редактора

Кнопки, находящиеся на панели кнопок редактора, частично дублируют меню редактора. Однако часть кнопок уникальна.

Кнопка Наименование Назначение
Отменить (Ctrl+Z) Аналогично меню «Правка → Отменить»
Повторить (Ctrl+Y) Аналогично меню «Правка → Повторить»
Это основной режим при котором производится редактирование элементов формы. Если этот элемент выключен (кнопка  по каким-то причинам «отжата»), то войти в редактирование любого из элементов нельзя.
Новая форма создается без украшений с типами шрифтов  по умолчанию. При нажатии на эту кнопку форму можно изменить. После нажатия в правой части экрана откроется окно настройки внешнего вида формы. При этом можно:
  • выбрать шаблон формы из более чем 25 готовых шаблонов
  • откорректировать все элементы формы, нажав кнопку «Изменить«:
    • Рисунок заголовка формы и фон страницы (каждый отдельно)
      • выбрать рисунок
      • удалить рисунок
      • изменить рисунок
      • выбрать выравнивание рисунка
      • по левому краю
      • по центру
      • по правому краю
    • Для следующих атрибутов всех элементов:
      • Название
      • Описание
      • Вопрос
      • Пояснение
      • Настройки
      выбрать тип, размер и цвет шрифта
    • Изменить цвет фона формы и цвет границы формы
Все эти изменения видны на web-странице формы, а также в режиме редактирования при нажатой кнопке «Сменить тему».
Аналогично меню «»
Аналогично меню «»

Работа с полями HTML формы

1. Для начала нужно загрузить страницу в WebBrowser.

private void button1_Click(object sender, EventArgs e)
{
wb.Navigate(URL адрес);
}

2. Затем нужно дождаться полной загрузки страницы. Для этого подписываемся на событие DocumentCompleted.

private void wb_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
}

Поле ввода, расположенное на странице, представляет собой HTML элемент, состоящий из одиночного тега input. Тип поля, а также некоторые другие параметры элемента, задаются с помощью атрибутов. Например: HTML атрибут value &#8212; хранит значение поля, name &#8212; содержит имя элемента и так далее.

Как получить значение поля input?

1. Находим на странице html элемент, который содержит тег input.

2. С помощью метода GetAttribute получаем значение атрибута value.

private void wb_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
if (wb.Document != null)
{
//получаем содержимое тега Body
HtmlElement body = wb.Document.Body;
//получаем все теги input
HtmlElementCollection inputs;
inputs = body.GetElementsByTagName("input");
if (inputs.Count > 1)
{
//получаем значение атрибута value поля input
txtName.Text = inputs.GetAttribute("value");
txtLastName.Text = inputs.GetAttribute("value");
}
}
}

результат

Как заполнить поле input?

Если же вам нужно заполнить поле input HTML формы, то тогда вместо метода GetAttribute воспользуйтесь методом SetAttribute, например:

inputs.SetAttribute("value", txtName.Text);
inputs.SetAttribute("value", txtLastName.Text);

результат

Динамическое заполнение полей

В предыдущем примере заполнение полей HTML формы производилось с помощью заранее заданных значений, но так же заполнить поля можно и динамически.

Например, я хочу, чтобы при вводе данных в текстовое поле (textBox) автоматически изменялось значение соответствующего поля на странице.

1. Создадим переменную inputs типа HtmlElementCollection.

public partial class Form1 : Form
{
HtmlElementCollection inputs;
public Form1()
{
InitializeComponent();
}

2. Загружаем html страницу в элемент управления WebBrowser.

private void button1_Click(object sender, EventArgs e)
{
wb.Navigate(URL);
}

3. Получаем коллекцию всех полей формы.

private void wb_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
if (wb.Document != null)
{
HtmlElement body = wb.Document.Body;
inputs = body.GetElementsByTagName("input");
}
}

4. Подписываемся на событие TextChanged, элемента управления textBox, и в обработчике данного события изменяем содержимое поля.

private void txtName_TextChanged(object sender, EventArgs e)
{
if (inputs != null && inputs.Count > 0)
{
inputs.SetAttribute("value", txtName.Text);
}
}

результат

  • Как выполнить чтение xml файла с выводом данных в DataGridView?
  • Как программно добавить запись в жж (livejournal) ?
  • Как получить сумму элементов массива в языке c#

5 последних уроков рубрики «Разное»

  • Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

  • Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

    Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

  • Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

  • Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Input type radio — переключатель

Тип radio представляет собой переключатель (также используется название радио кнопка).

Для создания переключателя используют несколько тегов input type=»radio», имеющих одинаковые значения атрибута name. Таким образом создается группа, где каждый тег <input> соответствует одному положению переключателя. Одновременно выбранным может быть только один из элементов группы.

При отправке формы на сервер, данные передаются только у выбранного (отмеченного) тега радио-кнопки.

Для удобства использования, рядом с радио-кнопками обычно размещают подпись <label>.


Положение 1Положение 2Положение 3

HTML код переключателя из input type=»radio»:

Можно ли отмечать необязательные поля?

Хотя это и не обязательно, отметка опциональных полей снижает когнитивную нагрузку пользователя: при отсутствии этого обозначения пользователь должен осмотреть поля и сделать вывод, какие именно из них являются необязательными, если часть из них помечена как обязательные. Если слово «необязательно/опционально» находится рядом с названием поля, эта задача становится немного легче.

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

Приложение Sephoraдля iOS пометило как обязательные, так и необязательные поля.

Форма

Первая часть формы — тэг form

Форма имеет имя contact_form. С его помощью мы получим доступ к форме из JavaScript функции проверки.

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

Также тэг form содержит onsubmit атрибут для вызова JavaScript функции проверки validate_form (), когда нажимается кнопка «Отправить данные». Функция возвращает логическое значение, для которого true означает «проверка прошла успешно», а false — «данные задержаны». Таким образом мы можем предотвратить отправку данных формы, если пользователь не заполнил ее правильно.

Остальной код формы добавляет поле ввода contact_name и кнопку «Отправить данные»:

Не заставляйте пользователей запоминать очередной логин

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

Формы полностью настраиваются. Затем нажмите «Создать форму», чтобы начать. Здесь вы можете настроить поля, которые вы хотите, чтобы ваши клиенты заполнили форму. Вы можете пометить определенные поля как обязательные, которые сделают невозможным отправку формы, если в поле не указаны символы.

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

Пример HTML формы обратной связи

HTML код формы обратной связи

Рассмотрим подробно код формы.

Родительским элементом является тег <form>. Атрибут class определяет название CSS класса для стилизации формы, name — имя формы; method=»POST» означает, что данные введенные пользователем будут переданы в теле HTTP запроса.

Существует 2 метода передачи данных формы на сервер: GET и POST. Используя метод GET, данные будут переданы в виде пар «имя-значение» в URL адресе обработчика. В случае использования метода POST данные передаются скрыто. Их можно увидеть только с помощью специальных инструментов, открыв HTTP запрос. Подробное описание методов GET и POST и о том, когда нужно использовать каждый из методов читайте в статье: Методы GET и POST: использование и отличия.

Атрибут action содержит URL обработчика формы — по этому адресу будет отправлена форма после наступления события submit (submit — событие отправки формы).

Каждый элемент cодержит атрибут name. При отправке формы, значения введенные пользователем будут переданы в переменных с именами указанными в этом атрибуте. Атрибут type определяет тип элемента <input>. Атрибут required делает элемент обязательными для заполнения. Форма не будет отправлена, пока пользователь не заполнит все обязательные элементы.

Стилевое оформление формы

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

Код CSS для базового оформления HTML формы обратной связи из примера выше:

Создание формы в HTML

Для того чтобы создать простую HTML форму, нужно поместить в код страницы тег <form> и разместить внутри него элементы формы.

Тег <form> является корневым элементом HTML формы. Все элементы формы должны находиться внутри тега <form>, либо быть связанными с формой при помощи атрибута form, содержащего идентификатор формы (значение атрибута id тега <form>).

Элементы формы (другое название — поля) формируются с помощью тегов группы form. Основные типы элементов описаны ниже на этой странице. Подробное описание всех типов полей форм находится на страницах тегов соответствующих элементов.

Как насчет форм авторизации?

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


Форма входа USPS (слева) имеет пометки в двух обязательных полях. Kayak (справа) не отметил их. Любой из этих дизайнов допустим для форм авторизации в системе.

Однако опасно не отмечать обязательные поля в форме регистрации. Формы регистрации сильно различаются на разных сайтах — разные компании требуют разные типы информации при создании учетной записи. Если ваша регистрационная форма похожа на форму входа в систему, то можно безопасно пропустить необходимую информацию. Но если оно включает в себя больше полей, чем имя пользователя и пароль, отметьте все обязательные поля (включая поля имени пользователя и пароля).

В регистрационной форме Sephora (декстопный вариант) отмечены обязательные поля (включая адрес электронной почты и пароль). (К сожалению, сайт нарушил другие правила юзабилити — в частности, он разместил названия полей внутри и автоматически устанавил флажок «Подписаться».)

Проверяем заполнено поле или нет

Мы хотим провернуть фокус с :valid и :invalid, но мы не хотим опережать события и считать поле невалидным до того, как оно было заполнено.

Есть ли CSS-селектор для проверки пустоты поля? Вообще-то нет! Вы можете подумать на :empty, но ошибетесь. Этот псевдокласс предназначен для проверки ситуаций когда элемент <p></p> не содержит в себе ничего. Поля ввода и так пусты по умолчанию.

Трюк в том, чтобы проверить поле на видимость атрибута placeholder:

CSSinput:not(:placeholder-shown) { }

Мы не использовали плейсхолдер в нашем примере, но это правило сработает, если мы зададим значение из одного пробела:

<input placeholder=” “>

:placeholder-shown супер полезен для нас! Это в целом секретный селектор, позволяющий проверить, есть ли в поле значение или нет.

IE и Firefox пока его, что немного осложняет задачу. Обычно спасителем является новая функция @supports, но…

CSS/* Это не сработает */@supports (input:placeholder-shown) {  input:not(:placeholder-shown) {  }}

Вы не можете использовать @supports для селекторов, только для свойства/значения (например @supports (display: flex)).

Проверить плейсхолдер при помощи JavaScript довольно легко:

JavaScriptvar i = document.createElement(‘input’);if (‘placeholder’ in i) { }

Но это не кажется самым простым способом имитации :placeholder-shown. Поэтому…возможно, просто стоит подождать поддержки всеми браузерами.

Представим, что поддержка уже повсеместная и посмотрим, как это будет выглядеть…

SCSSform {  > div {    > input,    > input,    > input {      // Когда поле ввода…      // 1. НЕ пустое      // 2. НЕ в фокусе      // 3. НЕ валидно      &:invalid:not(:focus):not(:placeholder-shown) {        // Покажем напоминание        background: pink;        & + label {          opacity: 0;        }      }    // Когда в невалидное поле устанавливается фокус (и оно по прежнему не пустое)    &:invalid:focus:not(:placeholder-shown) {      // Покажем более настойчивое напоминание       & ~ .requirements {        max-height: 200px;        padding: 0 30px 20px 50px;      }    }  }  // <input> ~  // <label> ~   // <div class=”requirements”>  .requirements {    padding: 0 30px 0 50px;    color: #999;    max-height: 0;    transition: 0.28s;    overflow: hidden;    color: red;    font-style: italic;  } }}

Как пометить обязательные поля?

Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».

Приложение iOS Wallet использует в качестве автоматического заполнения слово «Required/Обязательно» для указания обязательных полей. (В целом, особенно для более длинных форм, лучше иметь слово «Обязательно» вне поля, а не внутри него, чтобы упростить идентификацию полей, которые все еще необходимо заполнить.)

Маркировка «звездочка» стала очень популярной в web, и пользователи знакомы с ее значением. Ее главное преимущество в том, что она не занимает много места и выглядит иначе, чем текст названия поля, поэтому используйте ее.

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

Оба этих сайта использовали звездочку для пометки обязательных полей: UPS (слева) отметил обязательные поля звездочкой в конце названия, а USPS (справа) отметил ее в начале и красным цветом. Отображение его в начале другим цветом облегчает идентификацию обязательных полей, которые могут оказаться полезными, когда форма длиннее. (Однако мы не рекомендуем использовать такой маленький размер шрифта, какой используется для звездочки USPS.)

Должна ли звездочка быть красной? Необязательно, но красный цвет стал ожидаемым требуемым цветом маркера в web, что само по себе является причиной для того, чтобы придерживаться этого выбора (согласно Jakob’s Law). В любом случае, есть некоторая ценность использования разных цветов для звездочки и для текстового названия поля: это позволяет пользователям быстро отделить их и сфокусироваться на названии поля, пытаясь осмыслить, что означает это поле. В то время как красный предпочтителен, мы настоятельно рекомендуем избегать бледно-серых или низко контрастных цветов для звездочки. В некоторых случаях приглушенные цвета могут иметь эстетические преимущества, но в реальности низко контрастные символы создадут проблемы доступности для слабовидящих или пожилых пользователей и замедляют визуальную обработку формы для всех.

Всплывающие подсказки помогут избежать хаоса в форме

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

Нажмите «Отправить», чтобы завершить процесс регистрации. Неверный формат. Введенный вами адрес электронной почты уже зарегистрирован. Если это ваш адрес электронной почты, пожалуйста, следуйте этим ссылкам: или. Почтовый индекс должен быть не менее 5 цифр. Введенное вами имя пользователя уже зарегистрировано. Если это ваше имя пользователя, перейдите по этой ссылке. Введенное расширение неверно. Ваши адреса электронной почты не совпадают. Имя не может быть длиннее 35 символов. Вступление в региональную консульскую службу Медицины является обязательным.

Маркетинговый код не может превышать 128 символов. Мы регулярно проводим специальные акции. В некоторых случаях письмо или письмо содержат код приглашения или специального действия, состоящий из нескольких букв и цифр. Если вы хотите воспользоваться этим, сообщите нам о специальном коде действий, который вы получили. Год рождения должен быть введен как номер. Требуется месяц рождения. Выберите другую область обучения. Выберите университет. Вы ввели неполный или недействительный адрес электронной почты.

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


С этим читают