Назад в библиотеку

Совмещение технологий анализа внешнего вида
интернет страниц и законов композиции

Автор: Д.М. Мазур, А.Ю. Харитонов
Источник: Материалы IV Всеукраинской научно-технической конференции студентов, аспирантов и молодых ученых "Информационные управляющие системы и компьютерный мониторинг" (ИУС КМ 2013). – Донецк, ДонНТУ – 2013

Аннотация

Выполнен анализ технологий исследования юзабилити интернет страниц eye-tracking и mouse-tracking. Предложенный в статье метод использует некоторые инструменты анализа юзабилити данных технологий. Выявлена зависимость между вниманием пользователей и композиционными правилами построения.

Анализ литературы

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

Постановка проблемы

Существует множество различных методов, позволяющих качественно анализировать внешний вид интернет страницы и навигацию по ней с целью повышения юзабилити. Одним из таких методов является eye-tracking – технология, которая с помощью специального оборудования позволяет отслеживать траекторию движения глаз пользователя с учетом последовательности этого движения. В научной статье «Выявление проблем веб-юзабилити из данных Eye-Tracking исследований» [1] предложен подход к исследованию отношений между характеристиками eye-tracking и проблемами веб-юзабилити. Выводом из данного исследования является тот факт, что проблемы юзабилити связаны не с одной характеристикой eye-tracking, а с определенным рядом характеристик. Этот ряд характеристик появляется из различных стратегий «выживания», которые разрабатывают пользователи при столкновении с проблемой.

Технология mouse-tracking позволяет отслеживать передвижения курсора мыши в интернет-приложении. В статье компании Microsoft «Нет кликов – нет проблем: использование перемещения курсора для понимания и улучшения поиска» [2] описано исследование поведения курсора мыши на объединении результатов eye-tracking с анализом больших объемов данных курсора. В исследовании продемонстрирована ценность данных о перемещении курсора и сделан вывод о том, что позиции курсора и взгляда особенно коррелируют на страницах с результатами поиска.

Цель статьи – провести анализ технологий eye-tracking и mouse-tracking и предложить новые методы, основанные на совместном использовании некоторых инструментов рассмотренных технологий и принципов композиционного построения; выявить зависимость между вниманием пользователей и законами композиции.

Технология eye-tracking в области анализа юзабилити интернет страниц

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

Основными преимуществами данной технологии являются:

- получение объективных данных о том, на что люди обращают внимание, а что не замечают; какие тексты читают; где ищут информацию;

- возможность исследования и корректировки дизайна на этапе разработки интернет страницы;

- возможность выявления недостатков существующего дизайна, которые влияют на восприятие материалов [4].

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

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

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

Рисунок 1 – Карта интенсивности взгляда

Рисунок 1 – Карта интенсивности взгляда

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

В таблице 1 приведены карты интенсивности и хронологии для интернет страницы, полученные с помощью технологии eye-tracking [3].

Таблица 1 – Карты интенсивности и хронологии для интернет страницы

Таблица 1 – Карты интенсивности и хронологии для интернет страницы

Eye-tracking исследования показывают, что в первую очередь пользователи просматривают верхнюю и верхнюю левую часть страницы и только потом смотрят ниже и правее. Таким образом, зона внимания пользователей имеет вид буквы F (рис. 2). Наиболее важные элементы интернет страницы должны находиться в этих ключевых областях [5].

Рисунок 2 – Зона внимания пользователей

Рисунок 2 – Зона внимания пользователей

Однако технология eye-tracking в связи с трудоемкостью и сложностью применения, а так же наличием необходимого оборудования, может эффективно применяться только для достаточно крупных исследований, где время, продолжительность и стоимость исследования соизмеримы с ожидаемым эффектом от использования [3].

Технология mouse-tracking в области анализа юзабилити интернет страниц

Mouse-tracking – возможность отслеживать различные действия пользователя на сайте, такие как клики по ссылкам, клики по рабочей области сайта, переходы пользователей и др.

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

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

Технология mouse-tracking использует определенный инструментарий, описанный ниже.

Heatmap – тепловая карта, которая представляет собой распределение кликов пользователей (как по активным, так и по неактивным элементам).

В heatmap принята градация от холодных цветов к теплым (от зеленого до красного). На рис. 3 изображена тепловая карта интернет страницы.

Рисунок 3 – Тепловая карта интернет страницы

Рисунок 3 – Тепловая карта интернет страницы

Overlay – карта кликов, позволяющая видеть клики по активным элементам, таким как: ссылки, кнопки и т.д. Данная разновидность карт в совокупности с heatmap позволяет более точно выделять интерес пользователя к тем или иным товарам, услугам, элементам навигации и поиска на странице. На рис. 4 изображена карта кликов.

Рисунок 4 – Карта кликов для интернет страницы

Рисунок 4 – Карта кликов для интернет страницы

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

Несмотря на ряд достоинств, технология mouse-tracking имеет весомый недостаток, т.к. данное исследование является очень трудоемким процессом и провести его возможно только после запуска проекта. Но если в дальнейшем проект получает развитие и набирает популярность, то такой анализ позволяет увеличить эффективность его работы как на вновь приходящих пользователях, так и на уже имеющейся целевой аудитории [6].

Метод анализа юзабилити интернет страниц

Описанные технологии обладают различным инструментарием, и каждая из них по-своему уникальна. Новым методом в области интеллектуального анализа внешнего вида интернет страницы и навигации по ней может служить некоторое объединение технологий eye-tracking и mouse-tracking.

Тепловые карты обоих технологий могут быть объединены в одну тепловую карту, которая бы показывала сумму фиксаций взглядов (eye-tracking) и кликов (mouse-tracking) пользователей. Градация цветов остается прежней – от холодных к теплым. Такой подход позволит определить зоны наиболее высокого внимания пользователей и установить различие между тактильным и зрительным восприятием информации.

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

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

Для выявления зависимости между вниманием пользователей и правилом золотого сечения были взяты две различные по оформлению интернет страницы. На рис. 5 представлена карта интенсивности, полученная при eye-tracking исследовании новостной интернет страницы, которая использует разметку колонок с отношением по правилу золотого сечения: 61.8%/38.2%. Синяя линия означает разделение на 2 информационных блока: левый блок – основное содержимое страницы, правый – дополнительная информация. Исследование показывает, что внимание пользователей в большей степени сосредоточено на главном (левом) блоке. Таким образом, зависимость между вниманием пользователей и правилом золотого сечения подтверждается.

Рисунок 5 – Карта интенсивности для интернет страницы, использующей разметку по методу золотого сечения

Рисунок 5 – Карта интенсивности для интернет страницы,

использующей разметку по методу золотого сечения

На рис. 6 представлена карта интенсивности для страницы, рабочая площадь которой условно разделена по методу золотого сечения на 9 частей.

Рисунок 6 – Карта интенсивности для интернет страницы с рабочей площадью, условно разделенной на 9 частей по методу золотого сечения

Рисунок 6 – Карта интенсивности для интернет страницы с рабочей площадью, условно разделенной на 9 частей по методу золотого сечения

На пересечении условных прямых находятся точки, которые называются «зрительными центрами». Данная страница имеет 2 зрительных центра, в области которых расположены ключевые элементы. Зоны карты интенсивности с наиболее высоким вниманием совпадают со зрительными центрами данной страницы. Данный случай также подтверждает зависимость между вниманием пользователей и правилом золотого сечения. Знание об этой зависимости поможет при создании «правильного» дизайна интернет страницы, т.е. такого в котором зоны высокого внимания пользователей будут совпадать с зонами, которые хочет выделить разработчик.

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

Выводы

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

Список литературы

  1. Identifying Web Usability Problems from Eye-Tracking Data – BCS/ Интернет-ресурс. – Режим доступа: http://www.bcs.org/upload/pdf/ewic_ hc07_lppaper12.pdf – Загл. с экрана.
  2. No Clicks, No Problem: Using Cursor Movements to Understand and Improve Search/ Интернет-ресурс. – Режим доступа: http://research.microsoft.com/ en-us/um/people/sdumais/HuangCHI2011.pdf – Загл. с экрана.
  3. Что такое технология «eye-tracking» и как ее использовать?/ Интернет-ресурс. – Режим доступа: www/ URL: http://siteactiv.ru/about/faq/Eye-tracking_technology – Загл. с экрана.
  4. Используйте eye-tracking в своей работе/ Интернет-ресурс. – Режим доступа: www/ URL: http://eye-tracker.ru/files/eye-tracking.pdf – Загл. с экрана.
  5. 23 важных вывода из результатов eye-tracking исследований?/ Интернет-ресурс. – Режим доступа: www/ URL: http://designformasters.info/posts/23-lessons-from-eye-tracking-studies/ – Загл. с экрана.
  6. Курс: «Информационные технологии»/Mouse-Tracking/ Интернет-ресурс. – Режим доступа: www/ URL: wiki.auditory.ru/Курс:«Информационные технологии»/Mouse-Tracking – Загл. с экрана.