Паван Вора
Шаблоны проектирования веб-приложений
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»)
Для повышения уровня безопасности продумайте двухступенчатую систему идентификации
Из соображений безопасности во многих приложениях, связанных с финансами, идентификация пользователя проходит в два этапа. Первый шаг очень напоминает уже описанный процесс входа в систему – т. е. пользователям предлагается ввести имя или ID пользователя и пароль.
Второй шаг заключается в том, что пользователи должны ответить на контрольный вопрос. Ответ должен соответствовать тому, который пользователь указал во время регистрации, тогда идентификация считается успешно пройденной и пользователь получает доступ к своей учетной записи (рис. 3.22).
(а)
(б)
Рис. 3.22. На сайте компании Advanta пользователей после входа в систему просят подтвердить свою идентичность (a), задавая им один из контрольных вопросов, которые они создали во время регистрации (б). Им также предоставляется возможность зарегистрировать компьютер, с которого они заходят на сайт, и в будущем избежать дополнительного этапа идентификации
Хотя многие финансовые компании требуют, чтобы пользователь ответил на случайным образом выбранный контрольный вопрос, пользователей может раздражать необходимость отвечать на контрольные вопросы во время каждого входа в систему. Чтобы свести к минимуму все неудобства, предоставьте пользователям возможность пропустить дополнительный шаг идентификации, зарегистрировав компьютер, с которого они обычно пользуются приложением.
Единый вход (единая идентификация)
Многие веб-приложения, особенно межкорпоративные (экстрасеть) и корпоративные (интрасеть), позволяют пользователям получать доступ к одному или нескольким связанным между собой приложениям. Такие дополнительные приложения должны поддерживать технологию единого входа (ее часто называют SSO), так чтобы пользователи могли входить в систему, используя те же регистрационные данные, которые они используют для идентификации в других приложениях. Пользователи должны беспрепятственно перемещаться между приложениями, и у них должно создаваться впечатление, как будто они пользуются одним и тем же приложением. Например, если пользователь вошел в свою учетную запись в Google Mail, он не должен снова проходить идентификацию для того, чтобы получить доступ к дополнительным приложениям, таким как Google Calendar и Google Documents.
Попробуйте предоставить пользователям возможность пользоваться системами «универсальной идентификации»
Как упоминалось ранее, предоставьте пользователям возможность пользоваться системами «универсальной идентификации», такими как OpenID и Windows CardSpace (рис. 3.23). Такие системы позволяют пользователям создать уникальный цифровой идентификатор и использовать его для идентификации в любом приложении, которое поддерживает эти системы. Это напоминает технологию единого входа, с тем лишь исключением, что регистрационные данные пользователя находятся в распоряжении провайдера идентификации, который, в отличие от провайдера самого веб-приложения, является посредником.
(а)
(б)
Рис. 3.23. На сайте IconBuffet пользователи могут пройти как стандартную идентификацию (a), так и с помощью системы OpenID (б)
Сохраняйте данные для входа в систему
Как и регистрация, процесс идентификации часто отвлекает пользователей от выполнения их основных задач и целей. Чтобы свести к минимуму это неудобство, предоставьте пользователям возможность согласиться, чтобы приложение сохранило их данные для входа на их компьютерах. В зависимости от уровня безопасности и политики конфиденциальности, подобную опцию можно реализовать одним и двух способов.
1. Запомнить и имя пользователя, и пароль (рис. 3.24). Так полностью устраняется необходимость проходить идентификацию, если пользователь входит в систему с того же самого компьютера. Поскольку файлы cookies, необходимые для того, чтобы запомнить регистрационные данные, хранятся на компьютере, с которого пользователь выходит в систему, пользователю не нужно проходить идентификацию, если он использует тот же компьютер, до тех пор, пока файлы cookie не истекут или не будут удалены. Из соображений безопасности можно задать такие настройки, что срок действия функции «запомнить меня» будет истекать через определенный промежуток времени, например, две недели или 30 дней.
Рис. 3.24. Gmail предлагает пользователям возможность запомнить их регистрационные данные
2. Запомнить только имя пользователя (рис. 3.25). В этом случае пользователю все же придется вводить пароль при входе в систему, однако не нужно вводить имя пользователя. Приложения для электронной коммерции (например, Amazon) обычно применяют именно этот подход, и пользователям для совершения покупки нужно ввести пароль.
Рис. 3.25. На сайте компании Dominos пользователю предлагается сохранить на своем компьютере свое имя пользователя
Когда крайне необходимо обеспечить безопасность пользовательской информации, как в случае с приложениями, занимающимися финансами (например, Fidelity, CitiCards), допускается пожертвовать удобством пользователей ради того, чтобы предотвратить несанкционированный доступ к учетной записи. В этом случае можно не предлагать воспользоваться опцией «запомнить меня».
Подтверждайте идентификацию
Пользователи должны получить четкое подтверждение того, что они успешно идентифицированы. Для этого можно отображать сообщение, такое как «Добро пожаловать, имя пользователя», или просто отображать имя пользователя (обычно в верхнем правом углу страницы; рис. 3.26). Это особенно важно в тех случаях, когда пользователи выразили согласие, чтобы приложение запомнило их на данном компьютере.
Рис. 3.26. Gmail отображает электронный адрес пользователя и ссылку Sign out (Выйти) в верхнем правом углу страницы, чтобы обозначить, что пользователь успешно вошел в систему
Блокирование учетной записи
Когда крайне важна безопасность (например, в случае с приложениями, связанными с финансами), весьма разумно в качестве меры предосторожности блокировать учетную запись пользователя после определенного числа неудачных попыток идентификации. Сразу после первой неудачной попытки пользователям нужно сообщить о том, что их учетная запись может быть заблокирована (рис. 3.27). Если учетная запись заблокирована, пользователю нужно сообщить или номер телефона, по которому он должен позвонить, или что он должен предпринять для разблокирования своей учетной записи.
Рис. 3.27. На сайте банка Washington Mutual указывается, что учетная запись будет блокирована после четырех неудачных попыток войти в систему
Связанные шаблоны проектирования
Когда пользователей просят пройти идентификацию, часто оказывается, что они забыли свои регистрационные данные (FORGOT USERNAME/PASSWORD). Кроме того, если пользователь еще не создал учетную запись, ему нужно предложить это сделать (REGISTRATION).
Шаблон LOG IN почти всегда сопровождается шаблоном LOG OUT, чтобы пользователи могли сознательно завершить сессию работы с приложением.
LOG OUT (ВЫХОД ИЗ СИСТЕМЫ)
Проблема
После входа в систему и выполнения необходимых задач пользователь может захотеть завершить сессию работы с веб-приложением. Это может произойти по ряду причин, чтобы:
• предотвратить несанкционированный доступ к его личной информации;
• выйти из одной учетной записи и зайти под другим именем;
• обозначить, что он выполнил все свои задачи и ему больше не нужен доступ к приложению.
Решение
Предоставьте пользователям возможность завершить сессию путем выхода из системы (рис. 3.28).
Рис. 3.28. Сервис CitiCards предлагает ссылку Log Out (Выход), чтобы пользователи могли завершить сессию
Зачем
Если есть вероятность несанкционированного доступа к информации пользователя, необходимо предлагать пользователям выйти из приложения. Возможность выхода из системы особенно важна для веб-приложений, поскольку они установлены не на каком-либо определенном компьютере, а доступны из любой точки, где есть соединение с Интернетом и установлен веб-браузер. С одной стороны, благодаря этому у пользователей есть возможность получать доступ к своей информации отовсюду (например, из библиотеки, с рабочего компьютера, интернет-кафе и т. д.), но с другой стороны, подобная свобода доступа предоставляет массу возможностей для мошенничества и обмана. По этой причине у пользователей должна быть возможность осознанно завершить сессию.
Как
Предоставьте пользователям возможность завершить сеанс. Обычно ссылка «выйти из системы» располагается в верхнем правом углу страницы или рядом с именем пользователя. В некоторых веб-приложениях, где реквизиты для входа сохраняются от посещения к посещению (в первую очередь это относится к приложениям для электронной коммерции), пользователям не предлагается выйти из системы. Вместо этого они могут войти в приложение под другим именем, воспользовавшись для этого такой ссылкой, как «Вы не имя пользователя?». В таких приложениях пользователя приветствуют фразой: «Добро пожаловать, имя пользователя », чтобы обозначить, что пользователь идентифицирован (рис. 3.29). Если вы не предлагаете пользователям возможность выхода из системы, убедитесь, что для совершения каких-либо операций с деньгами (например, оплата покупки) или внесения изменений в учетные данные (например, смена пароля) пользователям необходимо войти в систему под своим именем.
Рис. 3.29. На сайте Buy.com пользователь может пойти по ссылке Not имя пользователя? Click here (Вы не имя пользователя ? Щелкните здесь), чтобы выйти из одной учетной записи и зайти под другим именем
Последовательно используйте метки
Хотя это не сильно влияет на простоту и удобство использования приложения, стоит обратить внимание на согласованность меток. Чаще всего завершающее пользовательский сеанс действие маркируется как «выход», «выйти», «завершение работы», «завершить работу». Поскольку метка маркирует действие, логичнее всего использовать метки «выйти» и «завершить работу».
Хотя эффективность такого подхода научно не подтверждена, обычно метка завершения работы последовательно дополняет метку начала работы: основная часть потребительских приложений использует метку «Выйти» (дополняющую метку «Войти»), а во многих бизнес и технических приложениях используются метки «Завершить работу» и «Начать работу».
Подтверждайте выход из системы
Информируйте пользователей о том, что они вышли из системы. Подтверждение может быть представлено в виде:
• Специальной страницы «Вы вышли из системы», на которой пользователи могут выбрать, куда им перейти дальше.
• Страницы входа, на которой будет отображаться соответствующее сообщение о том, что пользователь вышел из системы.
• Версии страницы для неавторизованных пользователей (это типично для информационных порталов, таких как Yahoo! MSN, iGoogle и т. д.).
• Сочетания этих вариантов – например, специальная страница, автоматически перенаправляющая пользователя на другую страницу через определенный промежуток времени (рис. 3.30).
(а)
(б)
Рис. 3.30. Специальная страница портала Yahoo! на которой пользователю сообщается, что он вышел из системы (a). Спустя короткий промежуток времени, пользователи перенаправляются на версию страницы для неавторизованных посетителей (б)
Выбор варианта зависит от того, каковы исходные условия входа в учетную запись. Если пользователь должен авторизоваться для того, чтобы получить доступ к приложению, то, когда пользователь завершает сеанс работы, возвращайте его на страницу входа, отображающую сообщение о том, что сеанс завершен. Обычно в этом случае от пользователя не требуется подтверждение, за исключением тех случаев, когда он может потерять данные. Также пользователь сможет авторизоваться снова, если он завершил сеанс случайно. В ином случае, если пользователи перед авторизацией находятся на странице для неавторизованных посетителей, после завершения работы с приложением верните их на эту же страницу.
Связанные шаблоны проектирования
Шаблон LOG OUT дополняет шаблон LOG IN, поскольку если для доступа к приложению пользователь должен войти в систему, обычно ему также предоставляется возможность выйти из системы.
AUTOMATIC LOGOUT (АВТОМАТИЧЕСКИЙ ВЫХОД)
Проблема
Если после авторизации пользователь не взаимодействует с приложением дольше, чем ожидается, это может означать, что либо он отвлекся на что-то, либо прекратил работу с приложением, но забыл из него выйти. Если оставить учетную запись в таком состоянии, возникает опасность несанкционированного доступа к конфиденциальной информации пользователя.
Решение
Если пользователь неактивен определенный промежуток времени (например, 15–45 минут), завершайте его сеанс работы выходом из системы (рис. 3.31).
Рис. 3.31. На сайте банка Washington Mutual пользовательская сессия автоматически прекращается, если пользователь неактивен 15 минут. Также пользователю предлагается ссылка для повторной авторизации, чтобы ему проще было начать новую сессию
Зачем
Автоматический выход из системы не только помогает уменьшить вероятность несанкционированного доступа к учетной записи, но также уменьшает нагрузку на интернет-сервер, который обрабатывает информацию о пользовательской сессии.
Автоматический выход из системы особенно важен, если браузер пользователя позволяет просматривать страницы с использованием вкладок. Многие пользователи открывают несколько вкладок и заходят в несколько веб-приложений, при этом часто забывая выходить из системы.
Как
В приложениях, где очень важна безопасность и/или конфиденциальность информации, автоматически завершайте пользовательскую сессию, если пользователь определенное время неактивен (т. е. установите лимит времени сеанса). Обычно лимит времени сеанса составляет от 15 до 45 минут, в зависимости от степени конфиденциальности информации, которая может оказаться незащищенной. Когда лимит времени сеанса заканчивается, предупредите об этом пользователей и предоставьте им возможность оставаться в системе. Такое подтверждение особенно необходимо в тех ситуациях, когда пользователю нужно какое-то время, чтобы выполнить задание (например, в случае с многошаговыми задачами, такими как оформление покупки) и возможная потеря данных может оказаться очень неприятной для пользователя (рис. 3.32).
Рис. 3.32. На сайте Bellco, когда лимит времени сеанса заканчивается, пользователи получают предупреждение, а также возможность продолжить текущую сессию. Также пользователи информируются о том, как можно изменить время ожидания
Когда превышается лимит времени сеанса, довольно часто происходит следующее:
• Пользователи направляются на страницу входа и получают сообщение, что их сессия истекла (или прервана), и они должны заново войти в систему и начать новую сессию. Этот подход уместен, когда на экране отображается конфиденциальная информация.
• Пользователи остаются на той же странице, при этом появляется всплывающее окно с сообщением о том, что сессия была прервана, а также с информацией о том, были ли сохранены данные пользователя (хотя бы как «черновик»). Этот подход не рекомендуется, если на экране (за всплывающим окном) отображается личная и/или конфиденциальная информация.
В некоторых приложениях сессия может завершаться, когда пользователь закрывает окно браузера, в котором открыто приложение.
Сохраняйте информацию пользователя
При автоматическом завершении сеанса старайтесь сохранять введенную информацию. Пользователям может действовать на нервы, если при прерывании сессии исчезают все данные, в то время как они собирались завершить начатое, но по какой-либо причине на время отвлеклись. Например, в сервисе Gmail незавершенные письма пользователя сохраняются как «черновики».
Предоставьте пользователям возможность менять лимит времени сеанса
Пользователю может понадобиться, чтобы лимит времени сеанса определенного веб-приложения был длиннее или короче, чем задано по умолчанию. Это характерно для тех приложений, которыми пользователь может пользоваться весь день, например, электронная почта, офисные приложения (для обработки текстов, электронных таблиц) и приложения для мониторинга статуса (например, отслеживание инвестиций). Если для таких приложений установлены лимиты времени сеансов, предоставьте пользователям возможность их изменить (рис. 3.33).
Рис. 3.33. В приложении Rally Community Edition пользователи могут устанавливать продолжительность времени сеанса вплоть до четырех часов. По умолчанию лимит времени сеанса составляет один час
Связанные шаблоны проектирования
AUTOMATIC LOGOUT – это аварийная мера на тот случай, когда пользователь забывает выйти из системы, и это угрожает конфиденциальности его личной информации. Возможно, пользователям неизвестно, как выйти из системы, поскольку соответствующая опция скрыта или расположена не там, где ее ожидает увидеть пользователь (LOG OUT).