Просмотр сравнительных таблиц методом газонокосилки


20.01.2021 Время чтения - 9 минут 887

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


Подписывайтесь на наш телеграм-канал — https://t.me/uxidesign


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

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

Быстрый просмотр

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

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

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

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

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

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

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

IGN: Длинный, сложный, но пустой

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

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

Участник просмотрел эту длинную сравнительную таблицу по методу газонокосилки, пока не понял, что многие строки содержат один лишь заполнитель (TBA). 

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

  1. Длина таблицы
  2. Необъяснимый жаргон
  3. Большое количество «пустых» ячеек в таблице ( TBA , «будет объявлено позже» и прочее)

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

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

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

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

Необъяснимый жаргон

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

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

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

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

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

Apple Watch: Сканируемые, но повторяющиеся

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

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

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

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

Далее ее взгляд движется по классической схеме газонокосилки

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

  • Оптический датчик сердца 
  • Датчик освещенности 
  • Микрофон
  • Apple Pay 
  • GymKit  (что означает этот фирменный термин, не объясняется) 
  • Емкость 16 ГБ 
  • Емкость 8 ГБ 
  • Задняя крышка из керамики и сапфирового стекла 

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

Несколько функций значительно не отличались. Например, в Series 3 был гироскоп, а в Series 4 – улучшенный гироскоп. Эта формулировка предполагает, что гироскоп в Series 4 лучше, но понятие «лучше» никак не обоснованно.

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

«Мне действительно понравилось это сравнение. Оно было очень полезным и сделано довольно легко для восприятия». 

Поддержка модели газонокосилки

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

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

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

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

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

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

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

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

Группировать Да / Нет функции вместе

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

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

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

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

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

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

Без жаргона

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

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

Пустые ячейки

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

Источник.

Читайте также: Создание продуктов, формирующих привычки

UX/UI Designer

*Клик*