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

HIERARCHICAL LIST (ИЕРАРХИЧЕСКИЙ СПИСОК)

Проблема

Элементы в списке соотносятся друг с другом иерархически так, что каждый элемент может иметь один или несколько подпунктов с типом отношений «родитель—ребенок» (например, «категория—подкатегория»).

Решение

Покажите список элементов в виде «дерева», где будет четко прослеживаться связь между родительским и детским(-и) элементом(-ами) (рис. 7.18). Элементы списка на родительском уровне (т. е. узел группы или элемент—родитель) могут содержать другие группы (например, родители) и/или отдельные элементы (например, узел списка или элемент—ребенок) и могут быть развернуты для просмотра их содержания или свернуты.

Рис. 7.18. Сервис Digg показывает комментарии в форме ветки комментариев. Когда пользователь щелкает мышью по n Replies (Ответы), они отображаются с отступом и имеют древовидную структуру

Зачем

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

Как

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

Рис. 7.19. В Rally отображен список Release Task Status (Статус выполнения задачи) в иерархическом порядке, где подзадачи показаны ниже задач родителей и выделены с помощью отступов. То же можно увидеть и в столбце State (Состояние)

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

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

(а)

(б)

Рис. 7.20. В Sun сравнение конфигурации сервера показано с помощью выделения информации о параметрах сервера на обобщающем уровне более жирным и крупным шрифтом (а). В TechRepublic, напротив, отношения «ребенок– родитель» между элементами показаны с помощью отступов в комментариях (б)

В соответствующих случаях возможно использование не иерархического режима просмотра списка

Для иерархических списков организацией по умолчанию (методом сортировки) является древовидная структура, которая показывает отношения «родитель—ребенок».

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

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

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

(а)

(б)

Рис. 7.21. Ресурс Nabble предоставляет пользователям возможность перехода от ветки комментариев (а) к просмотру в хронологическом порядке (б), при выборе другого значения в раскрывающемся списке View (Просмотр)

Будьте осторожны, позволяя пользователям удалять родительские элементы

Удаление элемента на родительском уровне приведет к удалению всех дочерних элементов, в том числе и других родительских элементов в его рамках.

Таким образом, предоставляя пользователям возможность удаления, необходимо сообщить им о последствиях этой операции. Если в результате удаления может быть неумышленно допущена существенная потеря данных, следует ограничить возможности удаления элементов пользователями только «пустыми» родительскими элементами. Кроме того, при необходимости, сделать так, чтобы удалить родительский элемент можно было только из мастера создания элементов (рис. 7.22).

Рис. 7.22. Удалить комментарий в Nabble может только его владелец. Пункт Delete post permanently (Удалить комментарий окончательно) недоступен другим пользователям

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

При сортировке необходимо представить иерархические списки (HIERARCHICAL LISTS) в виде не иерархических, т. е. либо как простые списки (SIMPLE LISTS), либо как табличные (TABULAR LISTS). Кроме того, пользователям может потребоваться отсортировать иерархические списки (SORTING, см. главу 6).

EVENT LIST (СПИСОК СОБЫТИЙ)

Проблема

Элементы, предназначенные для просмотра пользователями, содержат дату и время – как, например, расписания или перечни планируемых мероприятий. Хотя пользователям может потребоваться просмотреть уже прошедшие события, основной акцент делается на предстоящих и будущих мероприятиях.

Решение

Для отображения элементов используйте формат календаря. Кроме того, не забывайте также показывать элементы в виде списка и давать пользователям возможность переключаться между ними (рис. 7.23).

(а)

(б)

Рис. 7.23. Когда пользователи нажимают на Calendar (Календарь) на веб-сайте университета Клемсон, по умолчанию отображаются ежемесячные события пользователей (а) и они могут перейти к еженедельному или ежедневному режиму отображения (б). При любом отображении пользователи могут перейти на другой месяц или день с помощью панели управления календаря или кнопок Previous (Предыдущая) и Next (Следующая) средств управления разметки страниц

Зачем

Пользователи обычно знают, как пользоваться календарем, благодаря знакомству с настольными приложениями, такими как Outlook, Entourage, ICAL и др. Более того, использование просмотра в режиме календаря позволяет пользователям легко увидеть запланированные события и помогает им в планировании, так как они могут ясно увидеть, на какое время запланированы дела и какое время свободно.

Как

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

(а)

(б)

Рис. 7.24. По умолчанию Google Calendar показывает пользователям просмотр по неделям (а), но позволяет им изменить его на странице Settings (Настройки) (б)

При использовании средств управления календаря для навигации, выделите дни с одним или несколькими запланированными мероприятиями для предотвращения излишней навигации (рис. 7.25).

Рис. 7.25. В Yahoo! Calendar даты, содержащие записи, выделены полужирным шрифтом

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

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

(а)

(б)

Рис. 7.26. Ресурс Pepsi Center показывает запланированные спортивные мероприятия как в режиме просмотра календаря (а), так и списком (б)

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

(а)

(б)

Рис. 7.27. Agile University показывает календарь курса с помощью списков (а), но позволяет пользователям просмотреть их по месяцам, а также по регионам (б)

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

Если общее число событий слишком велико, чтобы быть представленным в виде календаря, позвольте пользователям просматривать записи календаря (рис. 7.28).

Рис. 7.28. SanDiego.org позволяет пользователям вести поиск по диапазону дат, типу события и ключевым словам

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

При отображении событий в формате списка, а не в формате календаря в зависимости от количества атрибутов, которые необходимо показать пользователям, можно использовать шаблоны SIMPLE LIST или TABULAR LIST. Более того, при показе результатов поиска событий примените шаблон SEARCH RESULTS (см. главу 6).

TIMELINES (ВРЕМЕННЫЕ ШКАЛЫ)

Проблема

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

Решение

Показать историческую информацию в виде временной шкалы (рис. 7.29).

Рис. 7.29. National Geographic использует временные шкалы, чтобы помочь пользователям сориентироваться в контенте, посвященном путешествиям в космос. Проект также содержит шаблон CAROUSEL (см. главу 8), что позволяет пользователям перемещаться по шкале

Зачем

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

Как

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

Рис. 7.30. Данный пример из проекта «Сравнение временных шкал» MIT показывает динозавров в рамках геологической шкалы. Пользователи могут соединить временные шкалы, перетащив их по горизонтали и получить доступ к информации, не отображающейся в данном режиме просмотра

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

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

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

Рис. 7.32. На данной временной шкале «Rise of Life» (Эволюция жизни) ресурса National Geographic пользователи могут щелкнуть по событию на временной шкале, чтобы просмотреть сведения в нижней части панели

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

Большие временные шкалы (TIMELINES), которые не вписываются в рамки доступного пространства экрана, часто содержат шаблон OVERVIEW-PLUS-DETAIL (см. главу 8), чтобы позволить пользователям увеличивать и уменьшать изображения для просмотра деталей.

IMAGE LIST/GRID (СПИСОК/СЕТКА ИЗОБРАЖЕНИЙ)

Проблема

Элементы, представленные пользователям, визуальны по своей природе, и отображение их с использованием только текстового описания может затруднить пользователям процесс поиска и узнавания желаемых элементов. Кроме того, пользователи могут узнать изображение, но название элемента может им быть незнакомо.

Решение

Покажите пользователям элементы в виде сеток изображений или списков изображений, а не в форме текстового списка. Однако изображения необходимо дополнить текстовым описанием (рис. 7.33).

Рис. 7.33. Ресурс Last.fm представляет лучшие видеоролики в виде сетки изображений и добавляет краткое текстовое сообщение о видео

Зачем

Картинка стоит тысячи слов.

Пословица

Люди способны узнавать и вспоминать изображения лучше, чем слова (Paivio et al., 1968). Поэтому при показе мультимедийного контента, такого как фотографии, фильмы, музыка и т. д., пользователям проще просмотреть и найти нужный элемент в том случае, когда все элементы представлены в виде изображений, а не просто в текстовом списке.

Преимущество изображений над текстовой информацией – обычно называемое «эффект превосходства рисунка» (Lidwell et al., 2003) – особенно наглядно проявляется в ситуациях, когда пользователи могли случайно видеть изображение ранее или знают, как выглядит «прототип» искомого изображения. Например, если пользователи ищут фото, художника, альбом или видео, которое они видели раньше или если они помнят один или несколько элементов, они смогут быстрее найти его с помощью изображений, а не текста. А поскольку память на изображения и на текст вместе взятые, как правило, лучше, чем на текст или изображения по отдельности, следует дополнить изображения текстовым описанием (Childers and Houston, 1984; Paivio et al., 1968).

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

Как

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

Рис. 7.34. Fotolia предлагает пользователям несколько вариантов фильтрации списка изображений, в том числе по категориям, по ориентации изображения, по типу файла и т. д.

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

Рис. 7.35. Ресурс Yahoo! TV использует карусель для собственных списков изображений

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

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

Рис. 7.36. Сервис iStockphoto предоставляет пользователю возможность предварительного просмотра изображения (или видео) при наведении мыши

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

Рис. 7.37. Данный пример из Vertigo SlideShow показывает галерею миниатюр для навигации по картинкам. Он также обеспечивает их предварительный просмотр, когда пользователи наводят указатель мыши на миниатюру

Изучите возможности использования списка изображений в качестве альтернативы другим спискам

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

Рис. 7.38. Сервис SearchMe показывает результаты поиска в первую очередь в виде серии миниатюр веб-страниц, которые пользователи могут пролистывать в поисках нужной. Кроме того, если они ранее попадали на полезные (или не достаточно полезные) страницы, то им визуально легче распознать страницы, увидев изображение, а не только название

Рис. 7.39. Поисковая система Viewzi распределяет результаты по нескольким категориям и использует различные типы списков изображений для различных групп результатов поиска; здесь представлены интернет-магазины

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

В отличие от списков, особенно табличных, которые могут быть достаточно компактными, списки/сетки изображений (IMAGE LISTS/ GRIDS), как правило, требуют больше пространства. Когда пространство на сайте ограничено, воспользуйтесь шаблоном CAROUSEL для размещения большего числа элементов (см. главу 8).

MAPS (КАРТЫ)

Проблема

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

Решение

Покажите элементы на карте региона или в интересующем пространстве (рис. 7.40).

(а)

(б)

Рис. 7.40. Ресурс Roost показывает расположение дома на карте (а), а авиакомпания United Airlines позволяет пользователям выбрать себе место, предоставляя схему расположения сидений (б)

Зачем

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

Как

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

Рис. 7.41. Сервис Google Maps показывает местоположение с помощью просмотра карты, фото со спутника, ландшафта и улиц

Отображайте детальную информацию по требованию

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

Всплывающие подсказки, как правило, используются, когда детали небольшие по объему, носят исключительно информативный характер и не требуют от пользователей совершать действия с предоставленной информацией, в то время как раскрывающиеся окна используются, когда пользователи могут совершать действия, такие, как нахождение ориентиров (рис. 7.42). Другая альтернатива – демонстрация раскрывающихся окон пользователям-новичкам с задержкой в несколько секунд, так как они могут не знать, какие действия можно производить с маркерами карты (например, Microsoft Live Maps).

Рис. 7.42. Ресурс Zillow предоставляет подробные сведения о месте по щелчку, так что пользователи могут предпринять дальнейшие действия для просмотра информации о доме и подобных домах в этом районе

Предоставьте пользователям контекст для больших карт при помощи обзоров

При панорамировании и масштабировании больших карт важно, чтобы пользователи не терялись и были в состоянии поддерживать чувство местонахождения. Обзоры в рамках карты помогают обеспечить такой контекст (рис. 7.43). Большинство обзоров карт поддерживают панорамирование, позволяя пользователям перемещаться в пределах окна «регион» в окне обзора, таким образом, воздействуя на просматриваемую карту.

Рис. 7.43. Сервис Yahoo! Maps предоставляет обзор карты в правом верхнем углу. В окне обзора не только предоставляет контекст для пользователей, но также предоставляется возможность перемещать в нем прямоугольник карты

Некоторые обзоры карт также поддерживают масштабирование. Однако использование обзоров для панорамирования и масштабирования, как правило, не так эффективно, как панорамирование и масштабирование на основной карте (Hornbæk et al., 2002) (см. шаблон VERVIEW-PLUS-DETAIL в главе 8).

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

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

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

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

Рис. 7.44. Для данного плана поездки от Yahoo! Travel используется рунический алфавит символов дифференцирования мест для посещения, ресторанов, гостиниц и т. д.

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

Рис. 7.45. На данном отображении карты в Google Maps показаны фотографии мест в окрестностях Сан-Франциско

Дополните карты просмотром элементов в виде списка или таблицы

Хотя карта полезна для отображения информации о местоположении, само место может обладать другими атрибутами, которые лучше представить в формате списка. Более того, если пользователи заинтересованы в сравнении признаков элементов помимо их местонахождения, табличные списки более полезны, например, при сравнении цен на дома, показанные на карте. Сделайте подобное сравнение возможным, предложив пользователям элементы в виде списка в дополнение к карте (рис. 7.46, см. шаблон TABULAR LISTS в начале этой главы). Для данных с небольшим числом атрибутов может быть полезно отображение списка и карты рядом, чтобы облегчить пользователям выбор места из списка и поиск его на карте или выбор места на карте и поиск его в списке со всеми его атрибутами (рис. 7.47).

(а)

(б)

Рис. 7.46. По умолчанию Zillow показывает результаты поиска пользователей в виде карты (а). Однако позволяет пользователям щелкнуть по ссылке See homes in a list (Просмотреть дома списком), чтобы сменить режим просмотра на список (б)

Рис. 7.47. Ресурс Cisco показывает пользователю список и карту рядом при отображении результатов поиска партнера

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

Карты также полезны для отображения информации о статусе на панели управления. Например, ShipCompliant для Six88 использует карту США, чтобы показать виноделам информацию о согласовании поставок (рис. 7.48).

Рис. 7.48. ShipCompliant для Six88 использует карту США, чтобы показать виноделам информацию о согласовании поставок. При наведении курсора мыши на штат пользователи также смогут увидеть записи о согласовании поставок на месте и удаленно

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

Карты также могут быть использованы для показа в режиме реального времени информации о местонахождении объектов в пути (например, грузовые автомобили, поезда, самолеты и т. д.). Местоположение объектов, оборудованных однажды устройствами с системой глобального позиционирования (GPS), может быть наложено на карту для отображения его местонахождения в данный момент.

Это полезно для отслеживания положения флота или выявления местонахождения поезда в данный момент (рис. 7.49).

Рис. 7.49. Данная карта движения поездов показывает их местонахождение, основываясь на швейцарском расписании поездов. И хотя здесь не указывается фактическое местоположение поезда по GPS, сайт утверждает, что данные о поездах являются точными

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

Большие карты, как правило, не вписываются в доступное пространство экрана, и чтобы позволить пользователям поддерживать их контекст, часто используют шаблон OVERVIEW-PLUS-DETAIL. Кроме того, для панорамирования в картах используется ПЕРЕТАСКИВАНИЕ (DRAG-AND-DROP). Более подробная информация представлена в главе 8.