—»     —»   Валидация Web-Форм: Практика и рекомендации
  Раздел: Формы   Комментариев: 2  

Валидация Web-Форм: Практика и рекомендации

1. Методы подтверждения
2. Что требует подтверждения
3. Сообщение об ошибке
4. Семь раз отмерь
5. Вы - человек?

3. Сообщение об ошибке

При отказе в подтверждении, система должна известить о нём пользователя, отправив ему внятное и недвусмысленное сообщение (обычно, из одного-двух предложений), и разъяснив способы исправления ошибок. Поскольку это сообщение должно сразу бросаться в глаза, его принято размещать вверху формы, выше остальных полей. Там оно более заметно и для экранных считывателей.

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

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

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

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

Описывайте ошибки или способ их исправления коротко и ясно. Например, если дата проставлена в неверном формате, объясните пользователям, как указывать её правильно: "Даты пишутся в формате дд-мм-гггг". Иногда стоит назначать такие подсказки начальными признаками ваших полей. То есть, пользователь прочтёт указания по заполнению соответствующего пункта непосредственно в поле ввода, а когда он/она начнёт печатать, текст подсказки оттуда исчезнет.

Подтверждение через отправку формы

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

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

Подтверждение в реальном времени (или мгновенное подтверждение)

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

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

Мгновенное подтверждение следует применять аккуратно и продуманно, так как, не зная меры или его особенностей, вы можете обернуть его себе во вред.
Валидация Web-Форм: Практика и рекомендации

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

Чего следует избегать?

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

Любопытная деталь из второй части исследования SM: "30 % форм снабжались только сообщением об ошибке вверху (без выделения полей ввода), в то время как у 29 % подсвечивались поля ввода вместе с появлением на той же строке соответствующих подсказок (без сообщений об ошибках вверху страницы)". Всего 25 % задействовали и сообщения об ошибках, и поля ввода.

Удивительнее всего то, что 14 % сайтов до сих пор используют всплывающие окна в кодировке javascript для отображения результатов запроса на подтверждение, а подтверждение кодами Ajax выполняется лишь на 22 % сайтов. Это наглядно демонстрирует большой разброс мнений относительно способов отображения результатов подтверждения.

Новость отредактировал Design FactoRy - 11 июля 2017, 20:06
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: отправные формы
Опубликовал Mysterious Master   Прочитано (раз): 11052   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 14 февраля 2010 @ 23:17
Написал: Espando — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Есть ещё один кликабельный вид капчи.
Вот ссылка на урок по её созданию:
http://ruseller.com/lessons.php?rub=28&id=442
fellow
Комментарий #2: 14 февраля 2010 @ 23:26
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1492   |   Комментариев: 177
ICQ: --- не указано ---
Espando, хмм ... интересная реализация ... впервые вижу.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июнь 2022    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930