1. Методы подтверждения
2. Что требует подтверждения
3. Сообщение об ошибке
4. Семь раз отмерь
5. Вы - человек?
3. Сообщение об ошибке
При отказе в подтверждении, система должна известить о нём пользователя, отправив ему внятное и недвусмысленное сообщение (обычно, из одного-двух предложений), и разъяснив способы исправления ошибок. Поскольку это сообщение должно сразу бросаться в глаза, его принято размещать вверху формы, выше остальных полей. Там оно более заметно и для экранных считывателей.
Выводить это сообщение лучше красным шрифтом, так как этот цвет обычно служит предупредительным сигналом, а также его следует снабдить соответствующей иконкой для привлечения большего внимания. Иконка должна быть общеузнаваемой, такой как белый крест в красной окружности. Это облегчит восприятие сообщения людям со слабым зрением. Кроме того, пользователям следует указать поля, при заполнении которых допущены неточности.
При некорректном заполнении формы регистрации на Invoice Machine извещение об отказе в подтверждении не предусмотрено. Сообщение об ошибке не выводится, а поля для ввода сведений окрашиваются в бледно-розовый цвет, и плохо различимы.
Кроме сообщения об ошибке и перечисления подлежащих исправлению полей, система должна их ярко выделить. Это можно сделать одним из следующих способов (или любым их сочетанием):
- Выводя сообщения, напечатанные красным шрифтом или предупредительные флажки рядом с каждым забракованным полем
- Окрашивая фон или границы забракованных полей (в красный цвет)
- Изменяя окраску меток полей
- Выводя текст описания ошибки (в контуре) рядом с каждым таким полем
Описывайте ошибки или способ их исправления коротко и ясно. Например, если дата проставлена в неверном формате, объясните пользователям, как указывать её правильно: "Даты пишутся в формате дд-мм-гггг". Иногда стоит назначать такие подсказки начальными признаками ваших полей. То есть, пользователь прочтёт указания по заполнению соответствующего пункта непосредственно в поле ввода, а когда он/она начнёт печатать, текст подсказки оттуда исчезнет.
→ Подтверждение через отправку формы
"Классический" способ выполнения операции подтверждения - через отправку заполненной формы нажатием кнопки "отправить". Подтверждение проводится, и, при выявлении ошибок, форма возвращается пользователю вместе с соответствующим сообщением. Таким образом, процесс заполнения формы не прерывается, что, однако, может быть не всегда на пользу дела. Приступить к исправлению ошибок пользователь сможет только после попытки отправить форму и получения от сервера отказа. Этим способом обычно производится подтверждение со стороны сервера, хотя он применим и со стороны клиента.
В отправке формы регистрации на сайте Ballpark отказано. Получено сообщение об ошибке, забракованные поля перечислены вверху формы и на каждом из них дано пояснение.
→ Подтверждение в реальном времени (или мгновенное подтверждение)
В отличие от предыдущего способа, подтверждение в реальном времени происходит непосредственно при заполнении формы. Это не означает отправки запроса на подтверждение с каждым нажатием клавиши, обычно система ждёт перехода пользователя к следующему полю. Таким образом, человек сразу видит, правильно ли он вводит данные, то есть, доступно ли это имя пользователя, верен ли формат даты. Получение мгновенного подтверждения становится явным при внесении сведений в поле ввода или после перехода курсора на другое поле. Как правило, оно сопровождается текстовым сообщением, пояснением или пиктограммой.
Форма регистрации на сайте Yahoo снабжена распознавателем уникальности пароля, который проверяет его приемлемость, пока вы печатаете текст.
Мгновенное подтверждение следует применять аккуратно и продуманно, так как, не зная меры или его особенностей, вы можете обернуть его себе во вред.
Заполнение формы регистрации на TypePad не только сопровождается мгновенным подтверждением с отправкой сообщений при выявлении различных ошибок, но и отображением корректно введённых данных в особом режиме.
→ Чего следует избегать?
Разрабатывая схему подтверждения правильности заполнения форм на своём сайте, вам следует обязательно помнить о двух "подводных камнях". Во-первых, отдельная страница для сообщений об ошибках - плохой выбор. На отдельную страницу сообщений об ошибках пользователи перенаправляются со страницы, на которой они заполняли форму и допустили неточность. В этом случае им приходится возвращаться на исходную страницу через браузер для исправления ошибок. Описание ошибок при этом они вынуждены держать в памяти. Та же проблема - с размещением сообщений об ошибках во всплывающих окнах. Они не только вызывают раздражение, но, закрывая их, вы к тому же, теряете всю информацию.
Любопытная деталь из второй части исследования SM: "30 % форм снабжались только сообщением об ошибке вверху (без выделения полей ввода), в то время как у 29 % подсвечивались поля ввода вместе с появлением на той же строке соответствующих подсказок (без сообщений об ошибках вверху страницы)". Всего 25 % задействовали и сообщения об ошибках, и поля ввода.
Удивительнее всего то, что 14 % сайтов до сих пор используют всплывающие окна в кодировке javascript для отображения результатов запроса на подтверждение, а подтверждение кодами Ajax выполняется лишь на 22 % сайтов. Это наглядно демонстрирует большой разброс мнений относительно способов отображения результатов подтверждения.
Валидация Web-Форм: Практика и рекомендации
Предыдущая страница | Страница 3 из 5 | Следующая страница
Новость отредактировал Design FactoRy - 11 июля 2017, 20:06
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Подробности здесь
Опубликовал Mysterious Master Прочитано (раз): 11052 | Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com © | Источник материала / оригинал статьи Распечатать
Автор перевода — CoolWebmasters.Com © | Источник материала / оригинал статьи Распечатать