Глава 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).
PORTAL (ПОРТАЛ)
Информация и функционал, к которым пользователь хочет получить доступ, распределены по нескольким интернет-сайтам и вебприложениям. Например, сотруднику корпорации может понадобиться доступ к большому количеству информации, чтобы выполнить такие задачи, как внесение себя в список на получение бонусов, управление личной информацией, составление отчетов о времени и расходах, проведение анализа продуктивности и т. д. Для выполнения каждой из этих задач сотрудник должен работать с отдельным приложением.
Создайте центральное приложение, которое будет объединять контент и возможности из нескольких различных источников и будет выступать не только в качестве единого интерфейса, но также и в качестве единой панели загрузки или точки доступа к этим приложениям (рис. 4.13). Кроме того, разрешите пользователям выбирать контент и настраивать способы его представления, и, если этого требует безопасность, ограничьте доступ к определенному контенту и функционалу, в зависимости от его типа и права доступа к нему.
Рис. 4.13. Интернет-портал iGoogle предоставляет пользователям доступ к различному контенту и функциям из нескольких разных источников
Порталы объединяют несколько разрозненных приложений и предоставляют пользователям общий интерфейс, с помощью которого они могут просматривать контент и работать с приложениями, к каждому из которых, в противном случае, им пришлось бы получать отдельный доступ. Также порталы усовершенствуют процесс взаимодействия пользователя с системой, обеспечивая единообразный стиль оформления и навигацию (а также технологию единого входа, SSO) при получении доступа к ряду приложений (см. шаблон LOG IN в главе 3). Во многих компаниях единая точка загрузки способствует развитию более тесного сотрудничества между пользователями и облегчает коллективный доступ к информации, пользователями в данном случае могут быть сотрудники, клиенты и партнеры. Кроме того, порталы спроектированы таким образом, что как компании, так и пользователи (сотрудники или клиенты) получают преимущество самообслуживания, которое первым помогает сократить затраты, а для последних повышает удобство работы.
Порталы в пределах своего окна разбивают отдельные куски контента и/или функции на зоны, которые часто называются соединительными модулями портала, или портлетами. Портлеты функционируют как более маленькие окна на интернет-странице; они часто поддерживают такие функции, как свернуть, развернуть, закрыть и т. д. (рис. 4.14).
Рис. 4.14. На портале Excite пользователи могут редактировать, сворачивать и разворачивать портлеты
Если порталы поддерживают несколько функциональных зон, они обычно структурируют их следующим образом: каждое приложение и связанный с ним контент объединяются в отдельную группу, а затем представляются как отдельные страницы, между которыми пользователи могут перемещаться (рис. 4.15).
Рис. 4.15. Портал My Sun Connection разделен на несколько страниц: Home (Домашняя страница), My Products (Мои продукты), Support (Поддержка), Communities (Сообщества), My Account (Мой аккаунт) и Developers (Разработчики)
Поддерживайте адаптацию контента к потребностям и типам пользователей
Порталы обычно предоставляют пользователю доступ к большому объему контента, лишь малая часть которого действительно интересна пользователю. Например, системному администратору из отдела информационных технологий будут интересны совершенно иные виды контента и приложений внутрикорпоративного (интрасетевого) портала, нежели специалисту по набору сотрудников из отдела персонала. Точно также во многих экстрасетевых порталах конечных пользователей (клиентов) может интересовать совершенно иной контент, нежели партнеров и дилеров. Поэтому порталы должны поддерживать персонализацию и кастомизацию контента, сообразно потребностям и типам пользователей (см. шаблоны PERSONALIZATION и CUSTOMIZATION далее в этой главе). Что касается публичных порталов (таких как iGoogle, My Yahoo! и My MSN), там пользователям часто предлагается заданная по умолчанию страница портала, к которой они могут по необходимости добавлять страницы (рис. 4.16).
Рис. 4.16. На портал My Yahoo! пользователи могут добавлять свои собственные страницы, нажав на кнопку Add Page (Добавить страницу). В данном примере пользователь создал страницу Finance (Финансы)
Соблюдайте единообразие оформления
Хотя порталы позволяют пользователям получать доступ к различным приложениям, они должны стремиться к тому, чтобы обеспечить согласованность и единообразие процесса взаимодействия пользователя с системой. В какой-то степени в этом может помочь соблюдение единого стиля оформления по всему порталу.
Автоматически авторизуйте пользователя при входе в приложения
Портал должен быть единообразным не только по стилю оформления, но также и по характеру взаимодействия с пользователем. Когда пользователь авторизовался на портале под своим именем, если нет необходимости в дополнительных мерах безопасности, предоставьте ему возможность органичного доступа к различным приложениям, без необходимости авторизоваться отдельно в каждом из них; т. е. портал должен поддерживать технологию единого входа (SSO) (рис. 4.17; см. шаблон LOG IN в главе 3).
Рис. 4.17. На портале iGoogle пользователи могут просматривать информацию из приложений Google Finance Portfolios, Google Calendar и Gmail, поскольку для входа в каждое из них нужны одни и те же реквизиты
Хотя применение технологии единого входа целесообразно для корпоративных порталов, во многие интернет-порталы могут быть включены другие приложения на основе веб-сервисов, для работы с которыми пользователям нужно авторизоваться отдельно. Например, портал iGoogle позволяет пользователям просматривать напоминания сервисов Jott (www.jott.com) на своем портлете, для этого пользователям необходимо авторизоваться отдельно. В таких случаях предлагайте пользователям возможность «запомнить меня», чтобы им не приходилось авторизоваться каждый раз при входе в портал.
Предоставьте пользователям возможность менять оформление портала в соответствии со своими предпочтениями
В отличие от многих веб-приложений, порталы разработаны для того, чтобы пользователь работал с ними регулярно и часто. Чтобы это взаимодействие было максимально эффективным и чтобы у пользователей возникало чувство, что это их личное рабочее пространство, предоставьте им возможность менять (кастомизировать) стиль оформления и расположение контента (см. шаблон CUSTOMIZATION далее в этой главе).
Хотя порталы обеспечивают единообразие стиля оформления, обычно пользователи могут «освежить» портал, поменяв его внешний вид. У пользователей также может быть возможность кастомизировать контент и макет страницы (см. CUSTOMIZATION). Поскольку порталы спроектированы таким образом, чтобы объединять контент из различных источников, некоторые виды контента могут также представать в виде DASHBOARD, помогающей пользователям увидеть текущий статус (или состояние) определенных ключевых показателей.
PERSONALIZATION (ПЕРСОНАЛИЗАЦИЯ)
В веб-приложениях с широким выбором контента (например, большое количество товаров в приложениях для электронной коммерции) пользователю может быть сложно найти релевантный или представляющий интерес контент или элемент. Кроме того, поскольку пользователям может быть сложно успевать за скоростью добавления новых элементов (и не все эти элементы могут показаться им интересными), не рекомендуется отображать каждый новый элемент – это и нежелательно, и невозможно.
Адаптируйте приложение под пользователя, показывая ему информацию, персонализированную на основе его профиля, схем взаимодействия и/или указанных (или выявленных) предпочтений и интересов (Anand and Mobasher, 2005; Koch and Rossi, 2002) (рис. 4.18).
Рис. 4.18. Веб-приложение для онлайн-видеопроката Netflix советует пользователям фильмы, основываясь на том, какие фильмы пользователь брал в прокат ранее и какую оценку дал просмотренным фильмам. Netflix также принимает в расчет возраст и пол пользователя
Персонализация все чаще применяется для того, чтобы помочь пользователям разобраться в практически неограниченном объеме информации. Вместо того чтобы предоставлять «всю» информацию, пользователям предлагается только та информация, которая отвечает их индивидуальным потребностям и интересам (Anand and Mobasher, 2005; Koch and Rossi, 2002; Rossi et al., 2001). Таким образом, персонализация дает два преимущества: во-первых, она уменьшает «загромождение», устраняя элементы, которые пользователю могут быть неинтересны, а во-вторых, она указывает пользователю на новые элементы, которые самостоятельно он мог бы не заметить или не найти. Более того, поскольку персонализированный (или рекомендованный) список элементов составлен на основе интересов и действий пользователя, пользователям придется меньше волноваться по поводу того, стоит ли покупать что-либо из этого списка или стоит ли задействовать эти элементы в других операциях.
Персонализация может проходить на двух уровнях.
1. На основе известных сведений о пользователе, таких как демографические данные или обозначенные интересы (эксплицитная персонализация).
2. На основе интересов пользователя, выявленных из его предыдущих опытов взаимодействия с приложением и совершенных операций (имплицитная персонализация).
Эксплицитная персонализация
На самом примитивном уровне приложение может быть персонализировано просто с помощью добавления имени пользователя в приветствие (рис. 4.19).
Рис. 4.19. Приложение Morningstar приветствует пользователей сообщением «Добро пожаловать [имя]»
Другой распространенный вариант эксплицитной персонализации – это сохранение информации из профиля и учетной записи пользователя (например, информации о доставке и адресе выставления счета) и опережающего внесения этой информации в необходимые поля, чтобы пользователю было удобнее пользоваться приложением – например, при оформлении покупки в приложении для электронной коммерции (рис. 4.20).
Рис. 4.20. Когда пользователь совершил покупку на сайте Amazon, в следующий раз при оформлении заказа для персонализации будут использоваться те данные об адресе доставки и адресе выставления счета, которые он указал в предыдущий раз
Еще один вариант персонализации – это показывать незарегистрированным и неавторизованным пользователям одну версию приложения, а авторизованным – другую (рис. 4.21).
(а)
(б)
Рис. 4.21. Сервис Blockbuster предлагает различные версии домашней страницы: одна для новых пользователей (a), а другая для постоянных авторизованных пользователей (б)
Этот подход к персонализации основывается на том уровне доступа, которым обладает пользователь: то, какой контекст и навигационная структура будут представлены пользователю, зависит от того, каким правом доступа к приложению он обладает. Например, только у пользователей с административными правами есть доступ к управляющим функциям (рис. 4.22).
(а)
(б)
Рис. 4.22. Приложение Rally Software отображает различные виды вкладок для пользователей с правом доступа к подписке (a) и без этого доступа (б)
Имплицитная персонализация
Персонализация, основанная на предполагаемых предпочтениях и потребностях пользователя (имплицитная персонализация), обычно представлена в виде рекомендаций, учитывающих предыдущий опыт взаимодействия пользователя с системой. Такой вид персонализации часто встречается в приложениях для электронной коммерции, в которых пользователям рекомендуют товары, основываясь на их предыдущих покупках или ранее просмотренных товарах. При такой персонализации часто применяется социальный фильтр, когда рекомендации основываются на сходстве поведения и интересов пользователей приложения, принадлежащих к той или иной социальной группе (Goldberg et al., 1992) (рис. 4.23). Также этот вид персонализации встречается в социальных приложениях, когда пользователям предлагается добавить кого-либо в «друзья», на основании наличия общих друзей в этой социальной сети (см. главу 9).
(а)
(б)
(в)
Рис. 4.23. Приложение Amazon предлагает несколько видов рекомендаций, в зависимости от предыдущих покупок пользователя (a), недавно просмотренных товаров (б) и соответствующих товаров, приобретенных другими людьми со схожими интересами (в)
Предоставьте пользователям возможность настроить личные предпочтения
Хотя имплицитная персонализация предоставляет определенные преимущества, часто она не оправдывает ожиданий, поскольку не все, что пользователи делают в приложении, они делают для себя самих. Например, некоторые покупки в приложениях для электронной коммерции могут оказаться подарками или могут быть совершены по просьбе друзей или членов семьи. Чтобы рекомендации были более точными, предоставьте пользователям либо указать свои предпочтения (рис. 4.24), либо настроить свои предпочтения, обозначив, включать ли тот или иной элемент в рекомендованный список в следующий раз (рис. 4.25).
(а)
(б)
(в)
Рис. 4.24. Приложение Netflix предоставляет пользователям возможность самостоятельно обозначить свои интересы, предлагая им указать при регистрации год своего рождения и пол (a), оценить жанры кино (б) и указать фильмы в разделе Movies You’ll Love (Фильмы, которые вам бы понравились) (в)
Рис. 4.25. Приложение Amazon позволяет пользователям указать, были ли их предыдущие покупки подарками и/или их не нужно использовать в качестве основы для составления рекомендаций. Пользователи также могут указывать товары, которые у них уже есть, чтобы их не добавляли в список «Рекомендованные вам товары» («Recommended for You»)
Поскольку невозможно с точностью предугадать потребности пользователей, персонализация несовершенна. По этой причине попробуйте применить шаблон CUSTOMIZATION, чтобы у пользователей была возможность адаптировать контент и интерфейс к своим потребностям. Кроме того, иногда при персонализации можно учитывать местонахождения пользователя – например, пользователям можно показывать страницы, специально адаптированные для той страны, из которой они выходят в Интернет. Поэтому попробуйте применить шаблон GLOBAL GATEWAY, о котором говорится в главе 10.
CUSTOMIZATION (КАСТОМИЗАЦИЯ)
Из всего контента, предлагаемого веб-приложением, пользователям может быть интересна только очень небольшая подгруппа. Однако принимая во внимание различие потребностей и предпочтений всех пользователей, довольно сложно эффективно подбирать и выделять контент. Кроме того, пользователи могут захотеть адаптировать приложение к стандартам своей компании или к индивидуальным предпочтениям. Хотя персонализация предлагает определенный выход из этой ситуации, пользователи знают, чего они хотят, и могут четко обозначить свои потребности.
Предоставьте пользователям такие возможности кастомизации, как добавление или удаление контента, выбор макета страниц, настройка оформления (цветовые решения, шрифты и т. д.), и, по необходимости, добавление или импортирование своего собственного контента (рис. 4.26).
Рис. 4.26. Портал Yahoo! позволяет пользователю настраивать контент, макет и цвета на своей странице My Yahoo!
Позволив пользователям кастомизировать приложение, чтобы оно отвечало их информационным потребностям и предпочтениям по цвету, разметке и компонентам, вы предоставите им необходимую свободу. Кроме того, так вы уменьшите нагрузку на проектировщиков, которые смогут переложить необходимость принятия некоторых решений на плечи пользователей. Например, проектировщики смогут сосредоточить свое внимание только на одном варианте графического интерфейса приложения и не беспокоиться о том, чтобы разработать такой дизайн приложения, который бы отвечал потребностям каждого пользователя. С помощью функций кастомизации пользователи могут менять оформление страницы, если им больше нравится другое цветовое решение, шрифты, темы и т. д. Однако это не должно стать поводом избегать сложных проектных решений. Даже когда предложена возможность кастомизации, многие пользователи не будут ничего менять (Mackay, 1991). Кроме того, если приложение предлагает слишком много вариантов кастомизации, это может усложнить интерфейс, и пользователям будет труднее его менять.
Предложите пользователям варианты кастомизации контента, оформления и уровней приложения.
Кастомизация контента
Кастомизация контента может понадобиться, когда пользователи заинтересованы только в очень небольшой подгруппе контента приложения. Предоставьте пользователям возможность выбора контента, отвечающего их потребностям и интересам. Кроме того, по возможности, классифицируйте контент, чтобы пользователям было проще сузить круг поиска и быстро отобрать необходимый контент (рис. 4.27).
Рис. 4.27. Когда пользователи проходят по ссылке «Добавить гаджеты» в приложении iGoogle, они видят разбитый на категории список «Гаджетов», которые они могут добавить на свою страницу. Когда пользователь выбирает гаджет, iGoogle рекомендует, какие гаджеты пользователю могут также понравиться, опираясь на его предыдущий выбор. Таким образом, iGoogle помогает пользователям находить нужный им контент
Еще один способ помочь пользователям отобрать контент – это предоставить подробные описания и оценки пользователей (см. шаблон RATINGS в главе 9).
Применение персонализации как части кастомизации также является способом помочь пользователям найти нужный им контент. Например, когда пользователь добавляет модуль контента в приложении iGoogle (эти модули называются «гаджетами»), ему также предлагается пройти по ссылке «Вам также могут понравиться…», чтобы просмотреть похожий контент. Также iGoogle помогает пользователям, предоставляя им возможность, добавлять контент автоматически, опираясь на название вкладки, которую они добавляют на свою страницу (рис. 4.28).
Рис. 4.28. Приложение iGoogle предлагает пользователю опцию I’m feeling lucky. Automatically add stuff based on the tab name (Мне повезет. Автоматически добавлять материалы, исходя из названия вкладки), когда он добавляет новую вкладку на свою страницу iGoogle
Кастомизация оформления
Под кастомизацией оформления имеется в виду изменение «внешнего вида» приложения, т. е. макета страницы, цветов и тем (рис. 4.29).
Рис. 4.29. Приложение My MSN предлагает пользователям несколько вариантов изменения оформления: различные цветовые решения, темы и особые поводы, такие как День Святого Валентина, 8 Марта, Новый год и т. д.
Однако большинство пользователей не дизайнеры. Если предложить им большой выбор оттенков цвета, их выбор может оказаться неудачным и приложением будет сложно пользоваться. Поэтому попробуйте предложить им выбрать из готовых вариантов цветовых решений. Однако это не значит, что кастомизация должна быть ограничена заранее заданным набором вариантов. Предоставьте пользователям возможность также самостоятельно выбрать цвета (рис. 4.30).
Рис. 4.30. Сервис Basecamp предлагает пользователям выбрать из готовых вариантов цветовых решений; также он предлагает опцию custom (настройка), которой можно воспользоваться для того, чтобы самостоятельно выбрать отдельные цвета
Кастомизация приложения
Для корпоративных веб-приложений может оказаться, что невозможно учесть потребности различных пользователей и при этом не снизить простоту и удобство использования приложения. В таких приложениях предоставьте пользователям возможность кастомизации на отдельных уровнях приложения, например, возможность создания индивидуальных отчетов или даже настраиваемых полей. Пользователи таким образом смогут адаптировать приложение к своему текущему виду деятельности (рис. 4.31). Важно помнить, что подобная кастомизация может применяться нечасто, поэтому предоставьте пользователям необходимую помощь, например, пошаговое руководство и мастера настройки (см. шаблон WIZARDS в главе 5).
(а)
(б)
Рис. 4.31. Сервис SalesForce предлагает пользователям несколько вариантов кастомизации, включая возможность настраивать элементы пользовательского интерфейса (a). При кастомизации элементов пользовательского интерфейса пользователи могут указать даже типы полей, такие как валюта, дата/время, электронная почта, перечень (т. е. раскрывающийся список), текст и т. д. (б). Сервис SalesForce применяет мастера настроек для помощи пользователям на каждом этапе кастомизации
Сведите к минимуму выбор вариантов кастомизации во время регистрации
Если пользователь еще не взаимодействовал с веб-приложением, он не может знать, понадобится ли ему кастомизировать его, и если да, то каким образом. По этой причине максимально ограничьте выбор вариантов кастомизации во время процесса регистрации.
Кастомизация не должна быть обязательной
Как уже упоминалось, вряд ли пользователи будут часто менять настройки интерфейса, а многие пользователи вообще не будут пользоваться кастомизацией (Маккей, 1991).
По этой причине важно, чтобы веб-приложение было удобным и эффективным и без кастомизации.
Поскольку порталы (PORTALS) обычно должны поддерживать большие объемы контента, они обычно позволяют пользователям кастомизировать контент и оформление. Обычно для кастомизации пользователю приходится прилагать усилия.
По этой причине, если возможно выявить потребности пользователей и персонализировать контент – например, опираясь на указанную ими информацию, – попробуйте дополнить кастомизацию персонализацией (PERSONALIZATION).
BLANK SLATE (ЧИСТЫЙ ЛИСТ)
При начале работы со многими приложениями в них отсутствует какая-либо информация, поскольку они опираются на то, что пользователи будут предоставлять данные самостоятельно (например, приложения для отслеживания дефектов, онлайновые календари, списки дел и пр.). Хотя страница приложения постепенно наполнится, новые пользователи, которые только вошли в приложение (или получили доступ к новым возможностям приложения), увидят пустую страницу – «чистый лист». Они могут растеряться, что им делать дальше, и у них может возникнуть ощущение, что приложение не работает должным образом, если они увидят страницу без контента.
На чистой странице ответьте на вопросы, которые могут появиться у новых пользователей, например, вопросы о том, как начать работу, что делать дальше и как будет выглядеть страница после заполнения данными (37signals, 2006). Для этого можно предложить пользователям обучающие руководства и пояснительные тексты и/или показать снимок экрана с типичной страницей, наполненной контентом (рис. 4.32).
Рис. 4.32. Сервис выписки счетов Blinksale предоставляет краткую инструкцию по пользованию информационной панелью и показывает пример информационной панели, демонстрирующий пользователям, как она должна выглядеть после внесения данных
Любое руководство, которое можно предложить пользователям во время их первого взаимодействия с веб-приложением, помогает им сориентироваться в приложении и быстро начать работу. Кроме того, столкнувшись с пустой страницей, пользователи могут понять, что им тяжело определить диапазон и круг возможностей веб-приложения, что ограничит степень их взаимодействия с приложением.
Чистая страница должна выполнять несколько функций: формировать адекватные ожидания, стимулировать деятельность, знакомить пользователя с тем, как будет в конечном итоге выглядеть страница, и производить позитивное первое впечатление от приложения (Hoekman, 2008; 37signals, 2006).
Важный элемент проектирования эффективной чистой страницы – это отображение одного или нескольких действий, с помощью которых можно убрать чистый лист и познакомить пользователей с приложением (рис. 4.33).
Рис. 4.33. На чистой странице приложения Box.net пользователям предлагается несколько способов начала работы (например, создать новую папку, создать новую общую папку). Также пользователям предлагается опция Watch video demo (Посмотреть демонстрационный ролик)
Эти действия могут сопровождаться сообщениями, объясняющими пользователям, почему они не видят никакого контента. Например, сервис Basecamp показывает такие сообщения, как «Создать первую панель для записей по данному проекту», под словом «первая» подразумевается, что пользователи еще не создали ни одной панели для записей (рис. 4.34).
Рис. 4.34. Сервис Basecamp показывает сообщение Create the first writeboard for this project (Создать первую панель для записей по данному проекту), чтобы обозначить, что пользователь еще не создал ни одной панели для записей. Также пользователи могут увидеть, что собой представляют панели для записей, и посмотреть демонстрационный ролик (который длится приблизительно 2 минуты), чтобы получить о них больше информации
Предоставьте пользователям соответствующие обучающие материалы и деморолики
С помощью обучающих пособий и демонстрационных материалов объясните пользователям, какие этапы нужно пройти, чтобы начать работу с веб-приложением или новым функционалом (см. рис. 4.34). Эти руководства должны быть целенаправленными и короткими, чтобы пользователи быстро могли начать работу с приложением.
Покажите пользователям примеры снимков экрана
Пользователи должны знать, чего им ожидать. Для этого покажите им пример снимка экрана страницы, наполненной контентом. Обозначьте, что в примере указаны ненастоящие данные, отметив пример водяным знаком, таким как «Образец данных» или «Пример», или сделайте снимок экрана тусклым, чтобы он сливался с фоном (рис. 4.35).
Рис. 4.35. Сервис Blinksale показывает пример в виде тусклого снимка экрана с отметкой Example (Пример)
Помогайте пользователям с первоначальными настройками
Если пользователи должны выполнить определенные задания, прежде чем начать работать с веб-приложением, предоставьте им возможность воспользоваться подсказками на начальном этапе настройки. Например, в приложении для работы с финансами пользователям может быть предложено создать счет (рис. 4.36).
Рис. 4.36. Сервис Mint предлагает пользователям помощь в первоначальной настройке учетной записи. Пользователи видят страницу без контента, на которой тусклым цветом обозначены примеры данных, чтобы пользователи получили общее представление о том, как в конечном итоге будет выглядеть их учетная запись
Шаблон BLANK SLATE обеспечивает необходимое руководство для новых пользователей приложения, чтобы они быстро могли включиться в работу. Необходимость помогать пользователям не исчезает, когда они наладили взаимодействие с приложением и внесли необходимые данные. Необходимо продолжать помогать пользователям в течение всего процесса их взаимодействия с приложением, применяя для этого шаблоны CONTEXTUAL HELP, FREQUENTLY ASKED QUESTIONS и APPLICATION HELP, о которых будет рассказано в главе 14, и шаблон INPUT HINTS/PROMPTS, описанный в главе 2.