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

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

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

Используйте шаблон BLANK SLATE, чтобы не показывать пользователям пустые страницы и чтобы пользователь знал, что ему делать, когда вошел в приложение в первый раз. Также благодаря этому шаблону пользователю проще работать с приложением, прежде всего это относится к тем приложениям, которые опираются на данные, введенные пользователями.

DASHBOARD (ИНФОРМАЦИОННАЯ ПАНЕЛЬ)

Проблема

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

Решение

Предложите пользователям просматривать всю информацию и показатели, которые они хотят отследить, на одной странице в виде «информационной панели». Кроме того, позвольте пользователям с помощью информационной панели докопаться до детализированного контента (рис. 4.6).

(а)

(б)

Рис. 4.6. На политической информационной панели портала Yahoo! которая посвящена выборам 2008, представлена наглядная информация о текущем статусе каждого кандидата (a). Кроме того, пользователи могут щелкать по кандидатам и получать подробную информацию о них, включая предварительное количество собранных голосов, привлеченные денежные средства и т. д. (б)

Зачем

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

Информационная панель, если она должным образом спроектирована, «представлена в таком виде, который позволяет пользователям осуществлять контроль над тем, что происходит в данную минуту» (Few, 2006).

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

Как

Информационные панели обычно выполняют три важных для пользователей функции.

1. Они отслеживают и контролируют важные показатели.

2. Они производят анализ для определения тенденций и особых ситуаций.

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

Рис. 4.7. Способы представления данных

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

Рис. 4.8. Информационная панель сервиса Google Analytics задействует ряд способов представления данных, передающих показатели производительности интернет-сайта. Один из применяемых способов – это график тренда, показывающий «Обзор посетителей» (Visitors Overview), также используются числа и спарклайны для представления «Пользования сайтом» (Site Usage) и таблица для отображения «Обзора контента» (Content Overview)

Способы обозначения особых ситуаций должны соответствовать заданиям пользователей

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

Рис. 4.9. Способы визуализации информационной панели

Показывайте информацию в контексте

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

• Растет показатель или падает.

• Наблюдается тенденция увеличения или снижения (и является ли она желательной или нет).

• Не вышел ли показатель за границы спектра допустимых значений.

• Достиг ли показатель желаемого уровня и т. д.

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

Рис. 4.10. Сервис Chart Chooser от Juice Analytics помогает определить подходящий тип диаграммы в зависимости от того, что пользователь хочет отразить с помощью этой диаграммы, например, сравнение, распределение, структуру, тенденцию, соотношение или табличные данные. Кроме того, пользователь может скачивать соответствующие шаблоны Excel и PowerPoint. (Источник: www.juiceanalytics.com/chartchooser/.)

Отображайте всю необходимую информацию на одном экране

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

Предоставьте пользователям возможность настроить информационную панель в соответствии со своими предпочтениями

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

Предоставьте пользователям доступ к подробной информации

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

Рис. 4.11. На информационной панели сервиса Mint пользователи могут посмотреть свои активы, задолженности, предупреждения и финансовую смету. Пользователи могут щелкать по определенным участкам для получения более подробной информации – например, пользователь может щелкнуть по ссылке «American Express Green Card» и посмотреть список транзакций на сумму $29 (в примере)

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

Пользователи могут захотеть скачать данные информационной панели на свой компьютер для проведения дальнейшего их анализа и/или обмена ими с другими. Для этого можно разрешить такие действия, как скачивание подробного отчета в формате PDF, Excel или XML, или отправка электронного письма другим пользователям (рис. 4.12; см. шаблон LIST UTILITY FUNCTIONS в главе 7).

Рис. 4.12. Информационная панель сервиса Google Analytics позволяет пользователям экспортировать данные в форматах PDF и XML, а также пользователи могут отправлять информационную панель другим пользователям по электронной почте

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

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