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

Этот пост был первоначально опубликован на ComputerWeekly.


Чтобы понять, как люди реагируют на информационные панели, Tableau провела исследование с отслеживанием взглядов, чтобы знать, какие элементы дизайна привлекают зрительное внимание. Цель заключалась в том, чтобы наблюдать, как люди «наивно» смотрят на панель инструментов, которую они никогда раньше не видели. На основе этих наблюдений мы хотели определить общие закономерности и явления, которые могут использоваться в будущих разработках дашбордов.

Исследование в действии

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

Во-вторых, мы хотели посмотреть, будут ли люди проявлять склонность «читать» информационную панель, как текстовую веб-страницу. Другие формы цифровых медиа установили, что визуальное внимание имеет тенденцию следовать F-образцу, который определяется как склонность людей просматривать веб-страницы по образцу «верхний левый> нижний правый». Мы хотели посмотреть, будут ли люди создавать на наших информационных панелях тот же шаблон F-типа.

Пример F-шаблона из исследований отслеживания взгляда на веб-странице, проведенных Nielsen-Norman Group

Что мы анализировали?

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

Существует две категории AOI панели инструментов:

  • 1. Элементы приборной панели: элементы дизайна, которые, как мы ожидали, привлекут визуальное внимание, такие как линейные графики, значки, карты и т. Д.

  • 2. Сетка: все информационные панели были разделены на сетки 3×3, чтобы мы могли анализировать склонность зрителей потреблять контент в F-образце.

Результаты

Результаты исследования не были неожиданными. Многое из того, что мы обнаружили, соответствует стандартам теории дизайна визуального и пользовательского опыта (UX). Однако следует отметить несколько важных моментов:

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

Здесь виден F-образный узор с высокой визуальной концентрацией в верхнем левом углу, который уменьшается по мере продвижения вправо и вниз по странице. Эта информационная панель была создана в Dundas BI компанией Dundas Data Visualization и представлена ​​в Большой книге информационных панелей.

Мы недооценили влечение людей к «крупным числам». Крупные числа определяются как крупные цифры, которые визуально выделяются на панели инструментов. Мы вычислили «время до первой фиксации» для всех элементов панели инструментов, что позволило нам сравнить реакцию участников на каждый элемент. В целом, крупные числа опережали другие элементы на одну секунду (за 10-секундный период просмотра).

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

Существуют и другие шаблоны проектирования, относящиеся к информационным панелям, которые, кажется, вызывают определенное поведение:

  • Повторяющиеся визуализации обычно утомляют зрителей.

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

  • Элементы с высокой контрастностью, распределенные по приборной панели, могут помочь привлечь внимание.

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

  • Люди, как правило, проводят больше времени, глядя на верхнюю часть панели инструментов. Лучше всего это подтверждается измерением того, как долго люди смотрели на разные части сетки панели инструментов. Мы измерили это, вычислив показатель отслеживания взгляда, который называется «продолжительность фиксации». Этот показатель подсчитывает общее время, в течение которого все участники смотрели на определенную область.

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

Что дальше?

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

Позиция: влияет ли расположение крупного числа на визуальное внимание, которое оно получает? Если бы мы переместим крупные числа, заметим ли мы какие-либо изменения в визуальном внимании?

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

Размер: насколько важен размер? Насколько нам нужно увеличить шрифт на большом числе, чтобы он бросался в глаза?

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

Контрастность: насколько важен визуальный контраст для крупного числа? Если мы уберем сильный контраст, повлияет ли это на визуальное внимание?

Контрастное большое число на этой приборной панели было сглажено по цвету, а все остальное осталось прежним. Будут ли люди уделять меньше внимания версии с меньшей контрастностью, чем версии с высокой контрастностью? Эта информационная панель была создана в Dundas BI компанией Dundas Data Visualization и представлена ​​в Большой книге информационных панелей.

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

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

Но что произойдет, если задача подтолкнет человека посмотреть на крупное число? Например, сколько просмотров страниц получил сайт? Мы ожидаем увидеть еще большее визуальное внимание к крупным числам. Однако увидим ли мы, что все визуальное внимание исчезнет с карты? Возможно, это так, но мы пока не знаем.


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

Совет

Учитывая то, что мы уже узнали, Tableau может предложить небольшой совет о том, как создавать отличные информационные панели:

  1. Дизайн с намерением: люди будут взаимодействовать с вашей панелью управления способами, очень похожими на то, как они взаимодействуют с другими формами цифрового контента. Это делает вас не только аналитиком, но и дизайнером. Из-за этого вы должны помнить о своих пользователях, проектируя их опыт. Спросите себя, какую историю вы хотите рассказать о своих данных на основе того, что волнует пользователей? Отражает ли иерархия дизайна вашей панели эти цели? Если нет, то такие уловки, как увеличение важных вещей, поднятие их в верхнюю часть страницы и разделение визуального пространства значительно улучшат их опыт работы с вашей панелью инструментов.
  2. Подумайте о своем дизайне: относитесь к дизайну панели инструментов как к гипотезе. Предположите, что некоторые вещи работают очень хорошо, а другие, возможно, нуждаются в улучшении. Найдите способы проверить эту гипотезу. Попросите друга взглянуть на него и использовать панель управления, чтобы ответить на вопрос. Проведите «тест на прищуривание» своей приборной панели (прищурите глаза, чтобы ваше зрение стало размытым). Какие части приборной панели выделяются, когда вы прищуриваетесь? Скорее всего, ваш фокус будет отражать внимание ваших пользователей.
  3. Осознанно выбирайте способ визуализации: все информационные панели имеют форму (столбчатую, строчную, сеточную, гибридную). Ваша осведомленность об этой форме может значительно повысить вашу эффективность в создании успешных дизайнов информационных панелей. Используйте форму панели инструментов, чтобы предвидеть, на чем ваши пользователи сосредоточат свое внимание, и использовать это в своих интересах. Если вы знаете, что им нужен определенный ключевой индикатор эффективности (KPI) и вы создали столбчатую панель мониторинга, вам не следует размещать этот KPI справа или внизу панели мониторинга.

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


Ознакомьтесь с полным исследованием eye-tracking или изучите данные о времени до первой фиксации и продолжительности фиксации.