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

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).