Черная пятница в UPROCK! 5 дней до конца распродажи!

Движение взгляда по принципу газонокосилки

Резюме: С большой вероятностью пользователи последовательно просматривают сравнительные таблицы строка за строкой, справа налево и обратно.

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

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

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

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

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

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

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

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

Участник быстро оценил сравнительную таблицу, прежде чем непосредственно приступить к чтению.

В зависимости от интересов пользователя он может просматривать только часть таблицы по принципу газонокосилки. В примере CNET участник начал двигаться через всю таблицу по этому принципу. Однако он быстро решил, что его интересуют характеристики только Sonos One, Apple HomePod и Amazon Echo — таким образом, он сузил область просмотра до этих столбцов и перестал оценивать достоинства в последних двух.

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

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

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

1. Дизайн сравнительной таблицы может нарушить принцип газонокосилки

Веб-сайт IGN: длинный и сложный, но при этом пустой

Один участник пытался сделать выбор между двумя игровыми системами, PlayStation 5 и Xbox Scarlett. На сайте IGN он нашел сравнительную таблицу.

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

Участник просматривал эту длинную сравнительную таблицу по принципу газонокосилки, пока не понял, что многие строки содержат одно и то же слово-заполнитель (слово “TBA”). (Слева: полная схема движения взгляда по всей странице; справа: крупный план таблицы)

При просмотре данной сравнительной таблицы участник столкнулся с тремя основными проблемами:

  1. Длина таблицы;
  2. Профессиональные термины без объяснения их значений;
  3. Большое количество повторяющегося, не несущего смысла контента в ячейках таблицы (TBA, “to be announced” - “будет объявлено”).

Рассмотрим каждую из этих проблем подробнее.

Длина таблицы

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

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

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

Профессиональные термины без объяснения их значений

Некоторые сложные строки пользователю приходилось изучать дольше, чем другие, чтобы понять смысл их содержания, тем самым нарушая свой принцип просмотра. Эти строки видны на схеме движения взгляда по всей странице, на которой показаны плотные скопления фиксаций взгляда. Его взгляд быстро перемещался туда и обратно между двумя контентными ячейками, возможно, задаваясь вопросом, в чем разница между ними. Такие названия, как 4K, Native 4k и 8k Support (в строке Video Output) вызвали множество движений глаз назад и вперед.

Большое количество текста-заполнителя

Когда участник понял, что многие из ячеек содержат один и тот же текст-заполнитель (слово “TBA”), он перепрыгнул к следующему разделу таблицы, который называется Backwards compatibility (Совместимость с предыдущими версиями). Затем он понял, что большинство следующих строк пустые, поэтому на данном этапе он бросил применение принципа газонокосилки.

«Мне нравится формат таблицы, но в ней на самом деле не так много информации».

Ссылка на видео

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

2. Apple Watch: читаемые, но повторяющиеся

Другая участница задумывалась о покупке Apple Watch, выбирая между двумя моделями. На веб-сайте Apple для сравнения она отобрала модели Series 3 и Series 4 в настраиваемой сравнительной таблице.

Участница посмотрела на эту сравнительную таблицу, сравнивая две модели Apple Watch. (Слева: страница; справа: схема движения взгляда по странице)

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

На этом кадре видео участница движется в противоположном направлении движения газонокосилки: снизу слева (Series 4 processor (процессор Series 4) в нижний правый угол (Series 3 processor (процессор Series 3), затем вверх направо (Series 3 thickness (толщина Series 3), и далее вверх налево (Series 4 thickness (толщина Series 4).

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

Далее вниз по сравнительной таблице ее взгляд движется по классической модели газонокосилки: сверху слева (Series 4 Improved gyroscope (Улучшенный гироскоп Series 4) в правый верхний угол (Series 3 Gyroscope (Гироскоп Series 3), вниз вправо (Series 3 Ambient light sensor (Датчик освещения  Series 3), по низу влево (Series 4 Ambient light sensor (Датчик освещения  Series 4).

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

  • Optical heart sensor (Оптический датчик сердца)
  •  Ambient light sensor (Датчик внешнего освещения)
  • Microphone (Микрофон)
  • Apple Pay
  • GymKit (это термин бренда, значение которого здесь не объясняется)
  • Capacity 16 GB (Ёмкость 16 ГБ)
  • Capacity 8 GB (Ёмкость 8 ГБ)
  • Ceramic and sapphire crystal back (Задняя крышка из керамики и сапфирового стекла)

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

Несколько разных характеристик на этом скриншоте, которые видоизменялись,  на самом деле практически не отличались. Например, в Series 3 был указан Gyroscope  (Гироскоп), а в Series 4 - Improved Gyroscope (Улучшенный Гироскоп). Хотя эта формулировка предполагает, что гироскоп Series 4 в чем-то лучше, неясно, насколько он лучше и какую ценность в этом случае имеет слово «улучшенный».

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

«Мне действительно понравилось, как было организовано сравнение, чтобы увидеть различия между ними. Очень полезно, вместо того, чтобы выяснять, что есть у каждой модели. Это сделало сравнение легким".

3. Поддерживайте модель газонокосилки        

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

Фиксированные заголовки столбцов

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

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

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

Интуитивно понятная информация в ячейках

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

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

Ячейки сравнительной таблицы на сайте CNET практически лишены смысла без названия строк - участнику приходилось часто оставлять принцип просмотра, чтобы прочитать и перечитать названия.
Группируйте вместе характеристики с вариантом Да/Нет

Мы придерживаемся рекомендации создания содержательных ячеек, однако в тех случаях, когда характеристики имеют только 2 возможных значения, намного полезнее будет использовать вариант Да/Нет или галочка/X. Поскольку в таких ситуациях принцип газонокосилки может быть нарушен, мы рекомендуем вам группировать эти столбцы вместе.

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

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

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

Xbox.com применял подход с фиксированным заголовком для своей таблицы для сравнения Series X и Series S. В случаях, когда у обеих систем есть одинаковая характеристика, в таблице используется одна ячейка, которая растянута между двумя столбцами. Это эффективный способ избавить пользователей от необходимости читать повторяющуюся информацию. (Эта сравнительная таблица, однако, не идеальна - большие отступы снижают плотность представления информации и могут быть симптомом подхода в дизайне, ориентированного в первую очередь на мобильные устройства (mobile-first).
Нет узким терминам

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

В сравнительной таблице Dropbox для одной характеристики использовался термин бренда Smart Sync Auto-Evict. Этот термин вряд ли будет иметь смысл для тех, кто еще не знаком с Dropbox. В таблицу включили всплывающую подсказку при наведении для каждой строки, таким образом, пользователи могли узнать значение каждой характеристики.
Перенесите пустые ячейки за пределы пути просмотра

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

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

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

Источник
и
:
arrow