Подтверждайте идентификацию
   Пользователи должны получить четкое подтверждение того, что они успешно идентифицированы. Для этого можно отображать сообщение, такое как «Добро пожаловать, имя пользователя», или просто отображать имя пользователя (обычно в верхнем правом углу страницы; рис. 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).

FORGOT USERNAME/PASSWORD (ЗАБЫТЫ ИМЯ ПОЛЬЗОВАТЕЛЯ/ПАРОЛЬ)

Проблема
   Пользователь часто забывают данные для входа в систему (логин и/или пароль), без которых не могут войти в приложение.
Решение
   Предоставьте пользователям возможность вспомнить или восстановить забытые данные для входа (рис. 3.34).
   Рис. 3.34. Сервис Gmail предлагает ссылку I cannot access my account (Я не могу получить доступ к аккаунту)
 
Зачем
   Пользователи часто забывают свой логин и/или пароль, особенно когда они пытаются войти в приложение, которое редко используют. По этой причине важно, чтобы у пользователей был способ запомнить эти данные или восстановить их. Поскольку часто пользователи понимают, что забыли свои реквизиты для входа только тогда, когда их просят войти в систему под своим именем, ссылка восстановления должна располагаться рядом со ссылкой входа в систему. В тех ситуациях, когда учетная запись не содержит частной или конфиденциальной информации, допускается по электронной почте прислать пользователю ссылку для смены пароля. Однако когда дело касается конфиденциальной информации, необходимо предпринять дополнительные шаги для подтверждения идентичности пользователя, прежде чем предоставить ему доступ к реквизитам для входа в систему.
Как
   Рядом со входом в систему разместите ссылку «Забыли свой ID (или пароль)» (рис. 3.35); если в качестве логина используется электронный адрес пользователя, достаточно ссылки «Забыли пароль».
   Рис. 3.35. Сайт корпорации Capital One. Под кнопкой Log In (Вход) расположены ссылки Forgot your user ID (Забыли свой ID) и Forgot your password (Забыли свой пароль)
 
   Отправляйте пароль на электронный адрес, указанный при регистрации
   Если веб-приложение не хранит личную информацию пользователя, которую можно использовать в мошеннических целях (например, информацию о состоянии здоровья или о финансовом состоянии), попросите пользователя указать логин или электронный адрес, указанный им при регистрации. Если эти данные верны, можно отправить пользователю пароль по электронной почте. Для того чтобы повысить уровень безопасности, можно отправить не текущий пароль, а временный, который пользователь сможет поменять, как только войдет в систему. В качестве альтернативного варианта пользователю можно отправить ссылку для смены пароля (рис. 3.36).
   (а)
 
   (б)
 
   Рис. 3.36. Сайт Agile Commons после подтверждения электронного адреса отправляет на него ссылку для смены пароля (a). Пройдя по ссылке, пользователь попадает на страницу смены пароля (б)
 
   Подтвердите идентичность пользователя с помощью контрольных вопросов
   Если в веб-приложении хранится конфиденциальная информация, то для подтверждения идентичности пользователя, утверждающего, что он забыл свои реквизиты для входа, могут понадобиться дополнительные меры безопасности. К дополнительным контрольным вопросам могут относиться вопросы, ответы на которые может знать только владелец учетной записи, например, номер паспорта, номер счета и т. д. (рис. 3.37). Для идентификации пользователю также может потребоваться ответить на один или несколько контрольных вопросов, указанных во время регистрации.
   Рис. 3.37. На сайте компании Advanta, занимающейся выпуском кредитных карт, прежде чем сменить ID пользователя и его пароль, пользователю задают несколько вопросов для идентификации
 
Связанные шаблоны проектирования
   Когда пользователю предлагают войти в систему, он может понять, что забыл свой логин и/или пароль. По этой причине рядом с полями, запрашивающими регистрационные данные (LOG IN), необходимо поместить ссылку для их восстановления.

Глава 4
Главная страница приложения

Введение

   Важно, чтобы проектировщик принял правильное решение по поводу того, что пользователи увидят, или на какую страницу будут перенаправлены после входа в приложение под своими логинами.
   В веб-приложениях, которые не требуют, чтобы пользователь для получения доступа к приложению входил в систему под своим именем (например, приложения для электронной коммерции), пользователи либо остаются на той же странице, либо перенаправляются на следующую по порядку страницу. Например, если пользователь решил авторизоваться на странице описания товара, он остается на этой же самой странице. Однако если он авторизовался во время оформления покупки, он перенаправляется на следующую по порядку страницу – страницу информации об адресе доставки.
   Что же касается приложений, для работы с которыми пользователь должен авторизоваться, то они, в зависимости от того, к какому типу относятся, могут отображать следующее (перечислены шаблоны):
   • INBOX, где пользователь может найти список элементов для просмотра или обработки.
   • CONTROL PANEL – панель управления, которая выступает в качестве страницы запуска функций приложения.
   • DASHBOARD – информационная панель для беглого осмотра самых важных показателей эффективности.
   • PORTAL, где собирается информация из нескольких источников. Портал выступает в качестве страницы загрузки информации и приложений, которые доступны для пользователя. В страницы шаблона PORTAL часто встроены некоторые составляющие шаблонов CONTROL PANEL и DASHBOARD, позволяющие пользователю быстро получить доступ к функционалу и контенту одного или нескольких приложений.
   Главные страницы приложений обычно персонализированы на основе профилей, интересов и информационных потребностей пользователей, это необходимо для предоставления наиболее релевантного контента и фильтрации информации, которая не очень релевантна. Однако PERSONALIZATION на основе бизнес-правил или какого-либо социального фильтра может неточно предугадывать то, какая информация может понадобиться пользователю. Поэтому приложения часто предоставляют пользователям функции шаблона CUSTOMIZATION (настройки по заказу), чтобы они могли адаптировать приложение к своим предпочтениям и восполнить слабые места персонализации. Кастомизация не ограничивается информационными потребностями и необходимостью выполнить ту или иную задачу; часто она подразумевает выбор цвета, логотипа, темы оформления, шрифта и макета страницы.
   При проектировании веб-приложений часто не продумывают, что увидят новые пользователи (BLANK SLATE). Этот аспект особенно важен в тех приложениях, в которые пользователи должны внести определенные данные.

INBOX (ВХОДЯЩИЕ)

Проблема
   Важно, чтобы пользователи знали, над чем они должны работать, и о том, что произошло со времени их последнего входа в приложение.
Решение
   Покажите пользователям список элементов, над которыми они могут работать или которые они должны просмотреть. Например, в почтовых приложениях показывайте пользователям список писем; в приложениях для отслеживания дефектов показывайте пользователям список дефектов; и т. д. (рис. 4.1).
   Рис. 4.1. Инструмент NetResults Tracker показывает разработчикам, когда они входят в систему, список ошибок и улучшений
 
Зачем
   Приложения для работы с данными одного типа (например, с электронными письмами, дефектами, файлами, счетами, обращениями в службу поддержки и т. д.) выигрывают от того, что показывают пользователям, вошедшим в систему, с какими элементами они могут работать. Это не означает, что приложение не позволяет пользователям работать с другими типами элементов или не предоставляет возможность быстрого доступа к другим возможностям приложения – просто они для этого приложения второстепенны. Например, почтовые приложения позволяют пользователям управлять списком контактов, хотя это и не является их основной задачей. По этой причине, когда пользователи входят в систему, им сначала показывается список писем как старых, так и новых. Понятие входящие здесь уместно, поскольку обычно это элементы, на которые пользователь должен обратить внимание, когда он вошел в приложение.
Как
   Покажите пользователям список данных, работа с которыми является основной задачей приложения – электронные письма, дефекты, файлы, счета, списки дел и т. д., – выделяя те элементы, на которые пользователь должен в данный момент обратить внимание или о которых ему нужно напомнить, например, новые письма, новые файлы, новые дефекты и т. д. (рис. 4.2).
   Рис. 4.2. Пользователь видит свои входящие письма, как только входит в свою учетную запись в приложении Gmail. Новые входящие письма выделены полужирным шрифтом
 
   Предоставьте пользователям возможность установить напоминания
   Если приложение используется нечасто и пользователи предпочитают, чтобы им напоминали об изменениях состояния одного или нескольких элементов (например, о сроке платежа или новой задаче), предоставьте им возможность устанавливать напоминания (рис. 4.3).
   Рис. 4.3. Сервис Remember The Milk предоставляет пользователям возможность устанавливать напоминания на каждый день, а также отображает, сколько минут осталось до того момента, когда задание должно быть выполнено. Пользователи могут получать напоминания по электронной почте, интернет-пейджеру и СМС на мобильный телефон
 
Связанные шаблоны проектирования
   Шаблон INBOX обычно задействует списки. Это могут быть как списки TABULAR LIST, так и IMAGE LIST/GRID. Кроме того, как и другие списки, эти часто нужно сортировать (SORTING) и фильтровать (FILTERING), чтобы пользователям было проще найти релевантную информацию (см. главу 7, в которой подробно рассказывается о списках).

CONTROL PANEL (ПАНЕЛЬ УПРАВЛЕНИЯ)

Проблема
   Когда пользователь вошел в систему, ему может потребоваться получить доступ к различным функциям приложения, чтобы выполнить ряд заданий. Однако нельзя с точностью предугадать, какая именно функция может ему понадобиться.
Решение
   Покажите пользователям страницу, на которой представлены все доступные функции приложения, любой из которых он сможет быстро воспользоваться (рис. 4.4).
   Рис. 4.4. Хостинговая компания 1&1 предоставляет пользователям возможность доступа с панели управления ко всем функциям работы с их учетными записями. Поскольку функций достаточно много, они разделены на две группы: Administration (Администрирование) и Account (Учетная запись)
 
Зачем
   Во многих веб-приложениях пользователям необходима некая панель запуска функций приложения (т. е. мини-приложений), которые достаточно обособлены друг от друга. Хотя пользователям нужен доступ ко всем функциям, они не хотят перемещаться от одной функции к другой. Но при этом им нужно место, куда они будут возвращаться, если запутаются в приложении (наподобие «домашней страницы» веб-сайта).
Как
   Создайте «загрузочную» страницу, с которой пользователи смогут получать доступ ко всем возможностям приложения или к миниприложениям. Панели управления обладают звездообразной (hub-and-spoke) структурой пользовательского интерфейса (Baxley, 2003; Tidwell, 2008), когда одна центральная страница предоставляет пользователям доступ к автономным мини-приложениям. Таким образом, пользователи могут зайти в мини-приложение, выполнить свою задачу и вернуться на центральную страницу для выполнения другой задачи с помощью другого мини-приложения.
   Панели управления обладают несколькими сходствами с домашними страницами информационных порталов:
   • они формируют представление о возможностях приложения и предоставляют быстрый доступ к его основному функционалу;
   • они определяют общий макет проектирования страниц приложения: их оформление, расположение, поисковые возможности и т. д.;
   • они информируют пользователей о новых возможностях и функциях.
   Панели управления используются также на страницах обзора учетной записи, где в одном месте собраны все доступные пользователю функции по управлению учетной записью. Например, в приложениях для электронной коммерции страницы обзора учетной записи предоставляют пользователям доступ к информации о заказах, адресах доставки, информации о платежах и т. д. (рис. 4.5).
   Рис. 4.5. В приложении Dell на странице My Account (Моя учетная запись) располагается краткая сводка информации об учетной записи. Эта страница выступает в качестве загрузочной страницы, предоставляющей доступ к информации пользователя, такой как сохраненные товары, купоны на скидку, корзина, статус заказа и т. д.
 
   Выделяйте элементы, на которые нужно обратить внимание
   Как и INBOX, шаблон CONTROL PANEL используется для информирования пользователей и привлечения их внимания к изменениям в функционале и контенте приложения. Как только пользователь зашел на страницу с панелью управления, необходимо направить его к тем элементам, которым он должен уделить внимание. Поскольку может оказаться, что пользователь этого не ожидает, используйте выделяющиеся уведомления и оповещения. Хороший пример уведомления – это сообщение о запланированном простое приложения, хотя это сообщение должно размещаться также и на странице входа. Если элементы служат только для информирования (т. е. оповещения) и не требуют от пользователей каких-либо действий, предоставьте пользователям возможность их проигнорировать.