Новости

Спроектировать хороший интерфейс приложения не так просто. Все заказчики хотят, чтобы пользовательский опыт (user experience) был гладким, чтобы пользователь быстро и безболезненно получал то, что ему нужно, на любом устройстве и пользуясь любым каналом взаимодействия.

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

Паттерны

Так как в этой книге речь идет об интерактивных интерфейсах, большинство паттернов описывают способы взаимодействия с данными: перемещение по данным, сортировку, выделение, вставку и изменение элементов, поиск конкретных значений или наборов значений. Лишь некоторые из них используются для статической графики: дизайнерам инфографики давно известны паттерны Multi-Y Graph (График с несколькими осями Y) и Small Multiples (Набор мини-диаграмм1), но эти паттерны также прекрасно работают в мире цифровых интерфейсов.

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

• Datatips (Всплывающие данные).
• Data Spotlight (Подсветка данных).
• Dynamic Queries (Динамические запросы).
• Data Brushing (Окрашивание данных).

Оставшиеся паттерны представляют способы конструирования сложных представлений многомерных данных — данных с множеством атрибутов или переменных. Они стимулируют пользователей задавать вопросы и сравнивать элементы данных по различным параметрам.

• Multi-Y Graph (График с несколькими осями Y).
• Small Multiples (Набор мини-диаграмм).

Datatips (Всплывающие данные)

Что это
Данные появляются, когда вы касаетесь пальцем или наводите указатель мыши на интересующий вас объект в интерактивной таблице данных или когда вы щелкаете на значке.
Работа паттерна Datatips (Всплывающие данные) показана на примере диаграммы исследовательского центра Пью (рис. 9.11).

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

Зачем
Поиск нужных значений — частая задача при работе с графикой, содержащей большой объем данных. Пользователям необходимо видеть как общее представление, так и конкретные значения, которые в нем не отражаются. Во всплывающих подсказках можно выводить небольшие фрагменты контекстно-зависимых данных и располагать их именно там, куда обращено внимание пользователя, — около указателя мыши. Если информация хорошо организована, то пользователи быстро найдут то, что им нужно, а вам не придется выводить на общий план сразу все детали.

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

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

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

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

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

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

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

Примеры
В приложении CrimeMapping (рис. 9.12) на карту нанесены значки, указывающие на вид совершённого преступления. Пользователь может увеличивать и уменьшать масштаб карты, а также фильтровать виды преступлений, щелкнув на кнопке What (Что) на панели слева.
В приложении CrimeMapping используются паттерны Datatips (Всплывающие данные) и Data Spotlight (Подсветка данных). Подсветкой выделяются точки на карте, где произошли кражи, а во всплывающей подсказке выводятся подробные сведения о конкретном случае кражи. Обратите внимание на ссылку в поле всплывающих данных, по которой доступны исходные данные о преступлении.

Карты Google Maps содержат столько географических данных, что о них стоит упомянуть отдельно. Карта может переключаться между режимом упрощенного просмотра и видом со спутника и включать слои трафика, маршрутов и маркеров мест (рис. 9.13).

Мобильное приложение Transit (рис. 9.14) показывает маршрут на карте с упрощенными значками и всплывающими подсказками. Цвета, символы и информация меняются в зависимости от того, какой вид транспорта выбран.