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

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/ (http://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 предоставляет пользователям доступ к различному контенту и функциям из нескольких разных источников

Зачем