Зигзагообразное расположение изображений и текста делает сканирование информации менее эффективным

Перевод материала UX-специалиста Кима Флаэрти.

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

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

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

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

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

Мы задавались вопросом, легко ли проверять элементы, которые не выровнены, но которые чередуются в рамках согласованного шаблона (например, в макете зигзага). Согласованность обычно полезна, поэтому это правдоподобная гипотеза. Чтобы ответить на этот вопрос, мы провели исследование, в котором изучались шаблоны сканирования страниц, используя зигзагообразные и выравниваемые макеты.

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

Группе из примерно 30-35 участников были показаны только по одному варианту каждой страницы, а другая версия дизайна не упоминалась и не обсуждалась с ними. На каждой странице пользователям приходилось выполнять основную задачу сбора информации, например «Узнайте, как работает служба Splitwise». Затем мы наблюдали шаблоны чтения пользователей, которые они использовали на этих страницах.

Качество иллюстраций и их информационное наполнение повлияли на модели сканирования участников.

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

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

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

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

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

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

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

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

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

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

Как тепловая карта из 34 участников для зигзагообразной версии (слева), так карта из 32 участников для её выровненной вариации (справа) показали, что люди потратили относительно мало времени на информационно-бедные изображения Hellofresh.com.

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

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

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

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

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

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

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

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

Клип взгляда участника на зигзагообразном макете Waze.com показывает, как он фиксировался на изображениях в первом и втором рядах, когда он прокручивал страницу, а затем сразу же перенаправил свой взгляд на текст. Этот клип замедляется до 90% от оригинальной скорости.

Переадресация поведения обусловлена двумя факторами.

• Ориентация зигзага менее предсказуема, что затрудняет сканирование вокруг препятствий (в виде изображения).
• Размещение изображений вызывает остаточную фиксацию. После того, как пользователи закончили чтение текста одного ряда, они прокручивают вниз. Страница движется вниз, пока глаз остаётся в том же месте, фиксируя то, что заменяет содержимое, которое он просматривал до скроллинга. Для макетов зигзага изображения заменяют текст, когда пользователь прокручивает страницу. Этот тип случайной фиксации называется остаточной фиксацией и не является преднамеренным.

Хотя пользователи фиксировали взгляд на картинках на Waze.com и Hellofresh.com, поведение спотыкания и перенаправления было ещё более выраженным на Splitwise.com. Из-за непредсказуемости макета и дополнительного фактора, усложняющего работу с изображениями: большая часть фотографий содержала текст, а некоторые были расположены рядом с текстовыми блоками. Другими словами, фотографии выглядели как текст и конкурировали с ним, поэтому людям было трудно определить следующий фрагмент текста.

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

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

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

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

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

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

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

На этой карте взгляда показаны фиксации глаз одного пользователя, когда он смотрел на Hellofresh.com. Движение глаз пользователя начиналось с фиксации в левой части первого блока.

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

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

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

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

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

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

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

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

• Информационные изображения хорошо работают в выровненных и зигзагообразных макетах. Значимые образы, которые поддерживают текст и рассказывают визуальную историю, полезны и будут привлекать много внимания. Ценные иллюстрации хорошо работают как в зигзагообразном, так и в выровненном макете. Пользователи готовы тратить время, глядя на фотографии, чтобы лучше понять читаемое предложение, поэтому случайные фиксации, вызывающие перенаправления, не являются проблемой в макете.
• Первые изображения на странице задают тон и заставляют пользователей решать, игнорировать ли остальные. Обратите особое внимание на информационное значение иллюстраций, используемых в первых блоках.
• Выровняйте декоративные изображения вниз по странице. Декоративные образы могут быть полезны для создания бренда на веб-страницах, даже если пользователи смотрят только на некоторые первые из них, видя их боковым зрением, когда прокручивают страницу. Однако лучше всего выровнять изображения для поддержки эффективного сканирования, поскольку пользователи предпочитают игнорировать этот контент. Единственное исключение может быть, если у вас короткая страница с содержанием всего двух-трёх блоков. В этих случаях макет зигзага может быть уместным.
• Избегайте чрезмерно сложных образов. На некоторых изображениях может быть слишком много информации: вы можете считать их решающими для понимания предложения, но пользователи могут быть перегружены, особенно когда они мало знакомы с вашим продуктом или контентом. Эти сложные изображения могут также конкурировать с информационным текстом. Выберите информационные иллюстрации, которые дополняют текст и не увеличивают когнитивную нагрузку пользователей.
• Не используйте изображения ради визуальной целостности макета. В некоторых случаях у вас может быть содержательный образ для сопряжения с рекламным текстом. Если это так, то здорово. Картинка может стоить тысячи слов — иногда. Но если у вас нет значимого изображения, не нужно использовать картинку как заглушку, потому что макет, который вы задумали, обязывает вас это сделать. Каждая иллюстрация должна иметь цель, даже если она создаёт бренд.
• Выравнивайте текст с декоративными изображениями. Подумайте о том, как пользователи прокручивают страницу и раскрывают содержимое. Если ваши иллюстрации декоративны, не размещайте их в более высокой позиции в строке, чем соответствующий текст.Горизонтально выровняйте их с соответствующим текстом, чтобы избежать привлечения глаз, а затем вызвать перенаправление пользователя.
• Всегда размещайте высокоинформационный контент в левой части первого блока. Многие люди начали фиксировать взгляд слева ещё до того, как содержимое прокручивалось, а затем приходилось перенаправлять взгляд, если в том месте, куда они смотрели находилась декоративная иллюстрация. Если вы решите поместить изображение или текст в первый блок, убедитесь, что оно несёт достаточное информационное значение и не приводит к потерям времени и лишним фиксациям пользователей.

#дизайн