Шаблоны проектирования веб-приложений

или

<button type="submit">Coxpaнить изменения</button>

Будьте внимательны при отключении первостепенного действия

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

Рис. 2.34. На сайте Campfire кнопка Sign me up… (Зарегистрировать меня) отключена до тех пор, пока все поля не будут заполнены

После первого щелчка отключайте управляющую кнопку

Выполнение одного и того же действия несколько раз (при повторном нажатии управляющей кнопки) может привести к нежелательным последствиям. Например, неоднократное нажатие на управляющую кнопку может привести к тому, что заказ будет размещен несколько раз. В таких случаях отключайте управляющую кнопку или скрывайте ее и заменяйте такой надписью, как «Обработка…» или «Пожалуйста, подождите…». Так пользователи удостоверятся, что их действие подтверждено и веб-приложение ждет ответа (рис. 2.35).

Рис. 2.35. На сайте компании Advanta кнопка Continue (Продолжить) заменяется текстом Please Wait… (Пожалуйста, подождите), чтобы пользователи знали, что они успешно выполнили действие и приложение ждет ответа

Уберите кнопки сброса

Кнопка «Сброс» возвращает форму к ее исходному состоянию. Если пользователи начинают заполнять форму с чистого листа, то, щелкнув по кнопке «Сброс», они удалят все введенные данные, а если они вносили изменения в уже заполненную ранее форму, то, щелкнув по кнопке «Сброс», они отменят все свои изменения. Отменить эту операцию невозможно. По этой причине не стоит использовать кнопку «Сброс» (Nielsen, 2000).

Связанные шаблоны проектирования

Чтобы форма была отправлена, обычно ее необходимо каким-либо образом подтвердить. Если форме было отказано в подтверждении, пользователи должны быть проинформированы о причинах отказа. Обычно это можно осуществить с помощью шаблона ERROR MESSAGES.

ERROR MESSAGES (СООБЩЕНИЯ ОБ ОШИБКАХ)

Проблема

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

• Отсутствующие данные. Когда пользователь не заполняет одно или несколько обязательных полей.

• Неверный формат. Когда пользователь вводит данные в неверном формате – например, неверный тип данных (цифры вместо букв), неверное количество символов (либо больше, либо меньше, чем необходимо), неверный формат даты, неверно записаны дробные числа и т. д.

• Недействительная информация. Когда предоставленная информация неверна – например, неверное имя пользователя и пароль, при указании временного промежутка дата «до» стоит перед датой «с» и т. д.

Решение

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

Рис. 2.36. Adobe Buzzword демонстрирует сообщение об ошибке над полями ввода данных

1. Пользователи могут перечитывать сообщение во время исправления ошибки.

2. Пользователям не приходится повторно вводить верные данные.

Зачем

Когда хорошо продумана система исправления ошибок, пользователи могут быстро все исправить и при этом не будут отвлекаться от своего основного задания (или цели).

Как

Самое главное – пользователь должен узнать об ошибке немедленно. Привлеките его внимание к ошибке, выделив ярким цветом либо фон, либо цвет сообщения. Помимо выделения цветом попробуйте добавить предупреждающую иконку (или любую другую соответствующую иконку), чтобы привлечь внимание пользователя к сообщению об ошибке и/или тому элементу формы, в котором эта ошибка произошла (рис. 2.37).

Рис. 2.37. В регистрационной форме на сайте банка Washington Mutual четко обозначается, когда происходит ошибка, и для привлечения внимания пользователей к ошибке используется предупреждающая иконка

Предоставьте пользователю инструкции по устранению ошибки

Это можно сделать в простой форме – попросить пользователей выполнить какой-либо определенное простое действие (например, «Повторно введите имя пользователя и пароль. Затем нажмите на кнопку “Войти”») или предложить способ исправления ошибки (например, «При вводе имени пользователя учитывается регистр клавиатуры. Проверьте, не нажата ли клавиша Caps Lock»).

Сообщения об ошибке должны отображаться на одной странице с формой

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

Сохраняйте информацию, введенную пользователем

Важно, чтобы введенные пользователем данные не были потеряны при появлении сообщения об ошибке. Пользователей раздражает необходимость вводить одну и ту же информацию несколько раз, и это может привести к тому, что они откажутся от заполнения формы (рис. 2.38).

Рис. 2.38. В сервисе SugarSync во время появления сообщения об ошибке информация, введенная пользователем, сохраняется. Допускается удалить пароль, поскольку он в любом случае не виден пользователю

Укажите на «проблемные» зоны

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

Рис. 2.39. В сервисе Highrise сообщение об ошибке отображается на той же самой странице и четко указывает, что необходимо сделать, чтобы ее исправить

Связанные шаблоны проектирования

Хотя сообщения об ошибках являются важной частью проектирования формы, необходимо сделать все возможное, чтобы ошибки предотвратить. Для этого можно четко указать обязательные поля (REQUIRED FIELD INDICATORS), предоставить необходимые инструкции по форматированию и типу данных (INPUT HINTS/PROMPTS), с помощью настроек по умолчанию свести к минимуму количество вводимых пользователем данных (SMART DEFAULTS), а также позволить пользователям вводить данные в свободном формате (FORGIVING FORMAT).

Глава 3

Аутентификация пользователя

Введение

Когда веб-приложение предполагает взаимно однозначное взаимодействие с пользователем и сохранение персональных данных о пользователе, возникает необходимость, чтобы пользователи создавали учетную запись (REGISTRATION) и выбирали уникальные учетные данные для доступа к веб-приложению. При регистрации пользователи в некоторых случаях должны ввести набор буквенно-цифровых символов с искаженного изображения, чтобы предотвратить рассылку спама, а также подтвердить, что они являются людьми, а не компьютерными программами (CAPTCHA, Completely Automated Public Turing test to tell Computers and Humans Apart, – Полностью автоматизированный публичный тест Тьюринга для различения компьютеров и людей).

Когда созданы уникальные учетные данные, пользователи могут идентифицироваться (LOG IN) и получить доступ к своей личной информации. После входа в систему и выполнения необходимых заданий пользователям во многих случаях необходимо выйти из приложения таким образом, чтобы неавторизованные пользователи не могли получить доступ и изменить информацию из их учетной записи (LOG OUT). Во многих приложениях предусмотрен автоматический выход из системы, если пользователь какое-то время неактивен (AUTOMATIC LOGOUT).

Поскольку часто приложением пользуются лишь время от времени, пользователи забывают свои учетные данные, и им необходим способ их восстановить. В зависимости от того, какой уровень безопасности предусматривается приложением, пользователям может понадобиться предоставить какую-либо личную информацию. Например, указать адрес электронной почты, на который зарегистрирована эта учетная запись, или ответить на один или несколько контрольных вопросов, составленных во время регистрации (FORGOT USERNAME/PASSWORD).

REGISTRATION (РЕГИСТРАЦИЯ)

Проблема

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

Решение