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

Аудио перевод статьи
0:00
0:00
Аудио перевод статьи
0:00
0:00
·

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

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

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

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

Этот принцип часто вытекает из предварительной оценки — пользователь быстро анализирует макет таблицы, прежде чем начать читать более внимательно.

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

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

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

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

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

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

Веб-сайт 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. Он начал с предварительной оценки, а затем вошел в модель газонокосилки. Но он часто прерывал его, чтобы проверить названия и останавливался, когда сталкивался с непонятными терминами. (В большинстве браузеров наведите указатель на видео, чтобы отобразить элементы управления, если они еще не видны.)

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 в чем-то лучше, неясно, насколько он лучше и какую ценность в этом случае имеет слово «улучшенный».

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

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

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

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

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

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

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

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

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

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

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

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

Группируйте вместе характеристики с вариантом Да/Нет

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

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

Помогайте пользователям избегать повторяющихся ячеек

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

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

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

Нет узким терминам

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

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

Перенесите пустые ячейки за пределы пути просмотра

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

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

Источник:
nngroup.com
·
comments powered by HyperComments