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

Возвращайте пользователей обратно к тому шагу, на котором их прервали

По завершении регистрации возвращайте пользователей на ту страницу, на которой они находились, когда решили зарегистрироваться, или на ту, где запрашивается регистрация. Например, в приложениях для электронной коммерции, если пользователям предлагается зарегистрироваться во время процесса оформления заказа, верните их на страницу, на которой они смогут увидеть, зарегистрировались они или нет: например, на страницу с информацией о доставке.

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

Во многих веб-приложениях регистрация – это первая форма, с которой сталкиваются пользователи. Чтобы взаимодействие пользователя с приложением было успешным, важно придерживаться шаблонов, описанных в главе 2 – CLEAR BENEFITS, SHORT FORMS, REQUIRED FIELD INDICATORS и ERROR MESSAGES. Когда пользователи видят регистрационную форму, важно, чтобы у них была возможность войти в систему (LOG IN), поскольку они могли зарегистрироваться ранее. Кроме того, поскольку процесс регистрации нередко сопровождается тестом CAPTCHA, придерживайтесь рекомендаций из следующего шаблона.

CAPTCHA (ПОЛНОСТЬЮ АВТОМАТИЗИРОВАННЫЙ ПУБЛИЧНЫЙ ТЕСТ)

Проблема

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

Решение

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

Рис. 3.13. Тест CAPTCHA на странице регистрации Yahoo!

Распознавание искаженного изображения выступает в качестве подтверждения того, что пользователь – это человек, а не машина, поскольку автоматически распознать искаженное изображение компьютерной программе довольно сложно. Этот метод называется тест CAPTCHA (от англ. Completely Automated Public Turing test to tell Computers and Humans Apart – Полностью автоматизированный публичный тест Тьюринга для различения компьютеров и людей (von Ahn, Blum, and Langford, 2004)[6 - Многие изображения CAPTCHA в Интернете используют сервис CAPTCHA, предоставляемый американским Университетом Карнеги-Меллон в рамках проекта reCAPTCHA, задачей которого является оцифровка книг путем отправки пользователям в качестве теста CAPTCHA оцифрованных слов, с распознаванием которых не справились системы оптического распознавания текста. Чтобы узнать о проекте подробнее, зайдите на страницу www.recaptcha.net (http://www.recaptcha.net/).].

Зачем

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

Как

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

Рис. 3.14. Примеры изображений CAPTCHA

Относительно недавно некоторые сайты стали использовать в тесте CAPTCHA простые математические задачи, такие как 2+4 или 4x2, которые пользователи должны решить (рис. 3.15).

Рис. 3.15. Два примера использования математических задач в качестве теста CAPTCHA

Позволяйте пользователям менять изображение CAPTCHA

Некоторые изображения CAPTCHA могут показаться пользователям слишком искаженными, чтобы можно было распознать определенные символы (например, цифру 1 можно перепутать со строчной буквой l, а цифру 9 – со строчной g). По этой причине у пользователей должна быть возможность изменить изображение CAPTCHA, щелкнув мышью по ссылке «обновить» или «изменить» (рис. 3.16).

Рис. 3.16. Сервис Nabble предоставляет пользователям возможность изменить изображение CAPTCHA

Предлагайте возможность пройти звуковой тест CAPTCHA

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

Рис. 3.17. На сервисе Gmail пользователям предлагается и визуальный, и звуковой тест CAPTCHA

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

Тесты CAPTCHA часто применяются во время регистрации, поскольку большинство приложений пытаются избежать регистрации, произведенной программами-пауками (REGISTRATION). Также этот тест часто применяется в форумах и блогах, где пользователи могут оставлять комментарии или участвовать в жизни сообщества (см шаблон GROUPS/SPECIAL INTEREST COMMUNITY в главе 9).

LOG IN (ВХОД В СИСТЕМУ)

Проблема

Пользователям необходимо идентифицироваться для того, чтобы они могли получить доступ к информации в своей учетной записи и/или увидеть адаптированную или персонализированную версию веб-приложения. Например, пользователям нужно проверить свою почту (Hotmail, Yahoo! Mail), зайти в свою учетную запись в приложении для электронной коммерции (Amazon, Dell) и посмотреть статус заказа или увидеть адаптированную версию информационного портала (My Yahoo! iGoogle).

Решение

Попросите пользователей идентифицироваться с помощью своих уникальных идентификаторов (например, имя пользователя или электронный адрес) и пароля, который они либо сами выбрали при регистрации, либо получили от системного администратора. Для получения доступа к веб-приложению также могут применяться системы унифицированной идентификации, такие как OpenID или Windows CardSpace (рис. 3.18). Кроме того, чтобы упростить доступ к приложению, попробуйте предложить пользователям, чтобы приложение запомнило их регистрационную информацию.

(а)

(б)

Рис. 3.18. Сервис Basecamp позволяет пользователям войти в систему с помощью того имени пользователя и пароля, которые они выбрали во время регистрации (a), или с помощью OpenID (б). Пользователи также могут согласиться, чтобы приложение запомнило их данные для входа

Зачем

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

Как

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

Пароль должен выводиться на экран в зашифрованном виде

Для поля ввода пароля применяйте HTML-тег <input type="password" />. В этом случае веб-браузер будет выводить пароль на экран в виде звездочек или точек. Однако поскольку пользователь не может увидеть, что он ввел, в случае ошибки идентификации удаляйте введенные пользователем символы из поля для пароля. Кроме того, в том случае, если регистр имеет значение, просите пользователя проверить, не нажата ли клавиша Caps Lock.

В случае необходимости предлагайте безопасную идентификацию

Предоставляя пользователям доступ к личной информации, которая конфиденциальна по своей природе, обезопасьте процесс идентификации с помощью передачи информации по протоколу SSL (от англ. Secure Sockets Layer – уровень защищенных сокетов). Также сообщите пользователям, что они входят в систему с помощью безопасного протокола (рис. 3.19). Так пользователи будут больше доверять веб-приложению.

Рис. 3.19. На сайте Amazon пользователям сообщается, что они входят в систему через защищенный сервер

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

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

Рис. 3.20. Сайт Target предлагает пользователям возможность зарегистрироваться на странице идентификации (т. е. входа)

Предоставьте пользователям возможность восстановить забытые регистрационные данные

Пользователи часто забывают свои реквизиты для входа в систему, особенно в тех случаях, когда они редко пользуются приложением. Помогите пользователям восстановить забытые регистрационные данные, предоставив им возможность воспользоваться опцией «Забыли пароль?» и/или «Забыли имя пользователя или пароль?» (рис. 3.21); см. шаблон FORGOT USERNAME/PASSWORD далее в этой главе.

Рис. 3.21. На сайте Yahoo! под кнопкой «Войти» («Sign in») расположена ссылка «Забыли имя пользователя или пароль?» («Forget your ID or password?»), а новым пользователям предлагается зарегистрироваться, пройдя по ссылке «Регистрация»(«Sign up»)

Для повышения уровня безопасности продумайте двухступенчатую систему идентификации