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

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

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

4. Семь раз отмерь

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

Подсказки

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

На сайте WishListr все поля сопровождаются подсказками с правой стороны.

Флажок справки (всплывающие меню)

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

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

Живые подсказки

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

Форма регистрации на сайте Digg снабжена живыми подсказками в виде отдельных блоков, разъясняющими заполнение активных в данный момент полей.

Применение трафаретов и переформатирование данных, вводимых пользователем

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

- meioMask
- iMask
- TypeCast
- jQuery Masked input plugin
Валидация Web-Форм: Практика и рекомендации

Учебная страничка Typecast демонстрирует разнообразие способов применения трафаретов.

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

- например, при вводе пользователем URL-адреса без приставки "http://", система могла бы просто добавлять этот элемент к началу URL;
- при указании пользователем даты в формате дд-мм-гггг вместо установленного формата гггг-мм-дд, система может изменить порядок следования символов в записи для приведения её в норму;
- при пропуске пользователем наклонной черты в номере кредитной карты, система может вставлять эти символы между цифрами номера там, где это требуется.
Валидация Web-Форм: Практика и рекомендации

Разновидность трафарета для ввода URL-адреса на сайте Tumblr.

Здесь приведены лишь несколько примеров использования этого приёма. Однако, автоформатирование нужно применять аккуратно, в противном случае оно может создавать вашим пользователям проблемы. Кроме того, вводимая информация не всегда однозначна. Например, если человек написал "www.coolwebmasters", не указав расширение, система не может строить догадки, не расширение ли это ".com", она лучше выдаст отказ в подтверждении.

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

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

Как показало наше исследование, 67 % сайтов используют текстовые подсказки, 10 % из них - живые подсказки. Странно, но всего 26 % этих надписей расположены справа от полей ввода, в остальных же случаях их размещают выше, ниже соответствующих полей и даже слева от них.

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

Ключевые тэги: отправные формы
Опубликовал Mysterious Master   Прочитано (раз): 11054   |   Оставлено комментариев: 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    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031