Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. UI/UX >
  4. Глава 5. Путеводитель по человеко-компьютерному взаимодействию: бифокальное отображение данных

Глава 5. Путеводитель по человеко-компьютерному взаимодействию: бифокальное отображение данных

Бифокальное отображение (Bifocal Display) — это метод визуализации информации, позволяющий рассматривать большое пространство данных как единое целое, и одновременно с этим видеть некую его часть во всех подробностях. Деталь рассматривается в контексте просмотра, не прерываемого границами, а не как существующая в отдельном окне (см. рис. 1).

Бифокальное отображение карты

Рисунок 1. Бифокальное отображение карты, показывающее ее центральную область во всех подробностях при сохранении контекста целостной сетевой структуры. Важно отметить непрерывность линий между зоной фокусировки внимания и контекстными областями, несмотря на разницу в коэффициентах увеличения.

Замечание первопроходца в отрасли HCI (Human Computer Interaction) Уильяма Фарранда (William Farrand) о том, что «эффективная трансформация данных должна каким-то образом поддерживать глобальную осведомленность, обеспечивая при этом детализацию» (1973 г.), отражает многолетнюю обеспокоенность разработчиков UI тем противоречием, что одновременно существуют потребность пользователя в осознании контекста информационного пространства и проблема показа «слишком большого количества данных на слишком маленьком экране». Хотя в области географической науки статические решения этой задачи уже существовали, технология интерактивно контролируемой трансформации, удовлетворяющая требованиям Фарранда и кроме того обеспечивающая неразрывность информационного пространства, была изобретена в 1980 году Робертом Спенсом из Имперского колледжа Лондона (Imperial College London) и Марком Апперли (Mark Apperley) из университета Вайкато (University of Waikato), что находится в Новой Зеландии.

Ученые дали своей разработке название «Bifocal Display», где Bifocal означает «двухфокусный», а Display — «показ» (в техническом аспекте — собственно дисплей). С тех пор этот метод был многократно реализован на практике, получил высокую оценку и повсеместное распространение. На сегодняшний день существует множество применений концепции бифокального отображения: например, широко известная «растяжимая» панель иконок приложений операционной системы Mac OS.

пример реализации бифокальной концепции

Рисунок 2: пример реализации бифокальной концепции, близко знакомый пользователям продукции Apple — док-панель Macintosh OSX, выпущенная в 2001 году.

Метод бифокального отображения: пояснения и примеры

Концепцию бифокального показа информации можно проиллюстрировать с помощью физической аналогии, показанной на рисунках 3, 4 и 5.

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

информационное пространство

Рисунок 3: информационное пространство, содержащее документы, электронную почту и т. д.

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

пространство, «обернутое» вокруг двух вертикальных стоек

Рисунок 4: это же пространство, «обернутое» вокруг двух вертикальных стоек.

внешний вид информационного пространства при взгляде с соответствующего направления

Рисунок 5: внешний вид информационного пространства при взгляде с соответствующего направления

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

На рисунках 3, 4 и 5 подчеркивается, что «растяжение» или «искажение» информационного пространства занимает центральное место в концепции бифокального отображения. Непрерывность информационного пространства между областями фокусировки и контекста является важной особенностью данного метода и особенно ценна в контексте представления информации в виде карты (см. ниже).

Сразу после своего изобретения в 1980 году концепция бифокального отображения была продемонстрирована в пресс-релизе, основанном на первом в истории прогностическом видео, показывающем использование этого метода в условиях футуристического офиса. Новая технология была представлена экспертам в области автоматизации делопроизводства в 1981 году, а детали ее потенциальной реализации обсуждались в 1982 году, примерно в то же время, когда увидела свет официальная журнальная статья под авторством Спенса и Апперли, описывающая метод бифокального отображения данных.

Ниже перечислен ряд существенных особенностей концепции Bifocal Display.

1. Непрерывность

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

Если растяжение, показанное на рисунках 5, 6 и 7, можно назвать X-искажением (однонаправленным по горизонтали), то растяжение в обоих направлениях (XY-искажение) может быть выгодным, например, для отображения календарей (рис. 6) и карт метро (рис. 1): в обоих этих случаях непрерывность информационного пространства является очевидным преимуществом.

Комбинированные X- и Y-искажения обеспечивают удобство использования программного календаря

Рисунок 6: Комбинированные X- и Y-искажения обеспечивают удобство использования программного календаря.

В работе выдающегося географа и картографа Уолдо Тоблера (Waldo Tobler) «Непрерывная трансформация, полезная для определения границ областей» (A continuous transformation useful for districting, 1973 г.) было убедительно показано, что термин «растяжение резиновой поверхности» непротиворечиво объясняет как географическое/топологическое искажение, так и аспекты неразрывного представления областей фокусировки и контента. Возможно, что позднейшая свобода трактовок этих понятий привела к использованию термина «показ изображения с точки зрения рыбьего глаза» (Fish-eye Display) в качестве синонима «бифокального отображения». Обратите внимание, что существует разработанная Марком Апперли система классификации, которая учитывает взаимосвязи и различия между концепциями бифокального отображения и «рыбьего глаза».

2. Подавление детализации

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

Концепция «степени интереса» (Degree of Interest), которой позже — в 1986 г. — выдающийся американский исследователь в области НCI Джордж Фурнас (George Furnas) придаст официальный научный статус, может, например, способствовать подавлению текста и возможному внедрению альтернативных визуальных сигналов, таких как форма и цвет, которые служат облегчению распознавания элементов, находящихся в области контекста. Принимая во внимание, что бифокальная концепция в первую очередь трактуется как метод отображения данных, вполне очевидно, что эффективность презентаций может быть усилена их соответствующими изменениями, неявно использующими концепцию «степени интереса» в отношении областей фокусирования внимания и контекста.

3. Взаимодействие: прокрутка и панорамирование

Третья особенность бифокальной концепции касается осуществляемого вручную взаимодействия с дисплеем для обеспечения прокрутки или панорамирования. В прогностическом видеоролике Апперли и Спенса (1980 г.) зритель/потенциальный пользователь мог увидеть прокрутку прикосновением и немедленную визуальную обратную связь, обеспечивающую легкое позиционирование желаемого элемента в области фокусировки (см. рис. 7).

прямое взаимодействие с бифокальным дисплеем позволяет «перетаскивать» определенный элемент в область фокусировки

Рисунок 7: прямое взаимодействие с бифокальным дисплеем позволяет «перетаскивать» определенный элемент в область фокусировки.

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

В более поздних работах Апперли и Спенса с коллегами были сделаны обобщения методологии бифокального отображения. В 1991 году была описана трехмерная реализация концепции «Bifocal Display», названная «Стена в перспективе» (The Perspective Wall).

способ презентации «Стена в перспективе» (The Perspective Wall)

Рисунок 8: способ презентации «Стена в перспективе» (The Perspective Wall), известный с 1991 года, имеет много общего с бифокальным представлением данных.

В «Проводнике по соседству» Апперли и Спенс применили концепцию бифокального отображения к задаче поиска конкретного дома в многокоординатном представлении.

«Проводник по соседству» (The Neighbourhood Explorer), представленный Апперли и Спенсом в 1991 году

Рисунок 9: «Проводник по соседству» (The Neighbourhood Explorer), представленный Апперли и Спенсом в 1991 году. Недвижимость, расположенная дальше от объекта, представляющего интерес, на каждой оси отображается в виде иконок с минимальной детализацией.

Очень эффективное применение бифокальной концепции для интеракции с иерархически структурированными данными было описано Джоном Лампингом (John Lamping) и Рамана Рао (Ramana Rao), которые использовали гиперболическое преобразование для обеспечения теоретической возможности целиком отобразить древовидную структуру данных на дисплее (рисунок 10).

эскиз, иллюстрирующий гиперболическое представление древовидной структуры

Рисунок 10: эскиз, иллюстрирующий гиперболическое представление древовидной структуры. Чем дальше узел от корневого узла, тем ближе он к его вышестоящему узлу, а область, занимаемая им, уменьшается.

В том же 1994 году Рао и Стюарт Кард (Rao and Card 1994) описали «Табличную линзу» (Table Lens), также использующую концепцию растяжения (рисунок 11).

скриншот приложения Table Lens, применяющего концепцию растяжения в обоих измерениях — X и Y — для обеспечения фокусировки и контекста отображаемых данных

Рисунок 11: скриншот приложения Table Lens, применяющего концепцию растяжения в обоих измерениях — X и Y — для обеспечения фокусировки и контекста отображаемых данных.

Коммерческая разработка канадцев IDELIX Software Inc., реализующая концепцию Bifocal Display, позволила компании на практике продемонстрировать преимущества бифокального отображения. В одном из приложений карта транспортных коммуникаций городской агломерации Большой Бостон могла быть изучена на ограниченной площади экрана карманного компьютера (рис. 12), что обеспечивалось за счет соответствующего ручного управления панорамированием и «плавающим» уровнем растяжки изображения; автоматическая настройка степени интереса применялась для наилучшего использования доступной области дисплея.

«искаженная» карта на дисплее карманного компьютера, показывающая транспортные коммуникации как неразрывные, несмотря на увеличение области фокусировки

Рисунок 12: «искаженная» карта на дисплее карманного компьютера, показывающая транспортные коммуникации как неразрывные, несмотря на увеличение области фокусировки.

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

«искаженная» карта, выведенная на настольный дисплей

Рисунок 13: «искаженная» карта, выведенная на настольный дисплей.

пользователь «растягивает» участок карты для просмотра деталей

Рисунок 14: пользователь «растягивает» участок карты для просмотра деталей.

Значение концепции Bifocal Display для взаимодействия пользователя с приложением-календарем продемонстрировали Бен Бедерсон (Ben Bederson) и его коллеги-разработчики (см. рис. 15).

реализация концепции Bifocal Display в календаре, установленном на карманном компьютере

Рисунок 15: реализация концепции Bifocal Display в календаре, установленном на карманном компьютере.

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

трехмерный медицинский снимок аневризмы головного мозга без бифокальных искажений

Рисунок 16: так выглядит трехмерный медицинский снимок аневризмы головного мозга без бифокальных искажений.

бифокальное искажение, примененное к предыдущему снимку

Рисунок 17: бифокальное искажение, примененное к предыдущему снимку.

Будущее бифокальной концепции

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

Высоких вам конверсий!

По материалам: interaction-design.org

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2024 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Центр рекламных бюджетов". ИНН:5902052888, КПП:590201001, ОГРН: 1195958009730, Пермь, ул. Окулова, д. 75 к. 8 офис 501Б

ООО «Центр рекламных бюджетов» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний