Как создать дизайн, поощряющий эффективный просмотр страницы. часть 1

Posted on by riasevastopol

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

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

Недавние айтрекинг-изучения (eyetracking), совершённые агентством Nielsen Norman Group, специализирующимся на консультировании и изысканиях в области UX, строятся на изучениях Ярбуса и подтверждают идею о том, что делаемые пользователями задачи радикально воздействуют на особенности их поведения в сети и на результаты приобретаемых айтрекинг-тепловых карт и схем (heatmaps).

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

Просматривайте кроме этого: Как оптимизировать дизайн лендинг пейдж на базе правил айтрекинга?

Методика изучения NNGroup

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

Но, потому, что цель изучения NNGroup была в том, чтобы выяснить, как пользователи просматривают одну и ту же страницу, пробуя выполнить на ней разные задачи, айтрекинг-методика была скорректирована следующим образом. Пользователям была дана задача, и вместо того, дабы разрешить им перейти на соответствующую страницу самим, их сходу поместили на тестируемую страницу, разрешили завершить задачу на ней, а после этого закрыли страницу за них. Было изучено пара разных страниц, а также две приведенные в данной статье: страница, отображающая женские платья на Bebe.com, и страница с пакетами отпусков на сайте jetBlue.com.

Как создать дизайн, поощряющий эффективный просмотр страницы. часть 1

На одной странице в изучении были изображены платья на www.Bebe.com

Еще одна страница изучения включала перечень достаточно отпусков, предлагаемых на www.jetBlue.com

Для каждой страницы пользователям было поставлено пара разных задач. Нижеприведенные задачи были даны для jetBlue (задачи для Bebe будут обрисованы позднее):

1. Посмотрите на страницу. (Координатор теста закрывает страницу через 8 секунд.)
2. В каких местах предлагается совершить отпуск?
3. Какое из них вам думается самые привлекательным?
4. Какой вариант отпуска наименее дорогой?
5. Какому из них присвоен наивысший рейтинг?
6. Представьте, что вы планируете пройти викторину по данной странице. Изучите страницу так детально, дабы это помогло вам пройти викторину.

Просматривайте кроме этого: Юзабилити-тестирование: пошаговая инструкция на примере Yelp

Схемы направлений взоров

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

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

  • Точки = фиксации. В схеме любая точка воображает один взор (либо фиксацию). Иначе говоря точка обозначает, что пользователь взглянуть на данный участок на экране (либо близко к нему). Большая часть айтрекинг-изучений исходят из догадки «глаз-мышление», в соответствии с которой, в случае если пользователь взглянуть на элемент, значит, этому элементу было уделить время и он обрабатывался когнитивно. Но наряду с этим элемент, на что было обращено внимание, все еще возможно неправильно истолкован либо забыт. Необходимо понимать, что точки отображают лишь части страницы, замеченные пользователем достаточно четко, дабы прочесть текст либо осознать подробности изображений.
  • Громадные точки = долгие фиксации. Размер точки (примерно) пропорционален длительности соответствующей фиксации. Так, более большие точки символизируют более долгий промежуток время, затраченного на просмотр участка страницы. Долгие фиксации сигнализируют о том, что пользователь израсходовал больше времени на обработку соответствующего элемента, по причине того, что: 1) он заинтересован в этом либо 2) он растерян и не понимает его смысла.
  • Числа = последовательность. Числа в точек обозначают последовательность, в соответствии с которой пользователь разглядывал элементы на странице.
  • Линии = саккады между фиксациями. Любая точка (фиксация) связана с предыдущей и последующей фиксациями. Так, линии между точками облегчают наблюдение за перемещением глаз (именуемым саккадами) и последовательностью фиксаций. (Числа дают хватает информации для определения последовательности, но без линий сложно отыскать следующую фиксацию.) Потому, что между фиксациями глаза перемещаются весьма скоро, человек практически слеп на ходу глаз и не регистрирует визуальный ландшафт, мимо которого проносится взор.

Эта схема направлений взоров, полученная от участницы опыта, делавшей задачи на странице jetBlue, включает более 440 фиксаций

Просматривайте кроме этого: Айтрекинг: для чего он нужен и в то время, когда применять?

Интерпретация фиксаций пользователя на странице

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

Возможно сформулировать пара разумных толкований, как:

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

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

Вот и все выводы, что возможно сделать, глядя лишь на одно статическое изображение.

Фиксации в зоне меню и логотипа случились довольно поздно, по окончании более 200 фиксаций в других местах на странице

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

Разглядим эти задачи во второй части.

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

По данным nngroup.com

Случайные статьи:

Новый дизайн 2016 бизнес страниц Facebook


Подборка похожих статей:

riasevastopol

More Posts