Новое исследование от Nielsen Norman Group: нюансы в чередовании расположения контента

zig_logo

Nielsen Norman Group провели исследование о том, действительно ли компоновка текста и изображений влияет на результат и на восприятие материала читателем. С полным текстом статьи вы можете ознакомиться на сайте компании. Мы же предложим вам основные идеи нового ресерча.

zigzag_1

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

Об исследовании

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

zigzag_2

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

Информационная ценность важнее выравнивания

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

zigzag_3

Пользователи предпочитают игнорировать декоративные изображения

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

zigzag_4

Декоративные изображения в зигзагообразном макет сложнее игнорировать

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

zigzag_5

Однако в выровненном макете это сделать намного легче.

Сложные изображения не помогают

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

zigzag_6

Рассмотрев одно — два изображения, люди потом начинают игнорировать любые изображения на этом сайте.

Некоторые типичные закономерности поведения

Независимо от типа используемого макета, проявлялись и такие особенности поведения:

Пользователи начинают сканирование страницы слева

zigzag_7

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

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

zigzag_8

Подводя итоги, отметим следующее:

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

Читайте также:

Конференции UX и дизайн, которые нужно посетить в 2018

Еженедельные лекции от Behance: UX дизайн

Лучшая наружная реклама 2017 года

<p style="text-align: center">Нашли ошибку?  Выделите текст и нажмите <em>Ctrl+Enter</em>.</p>
Поделиться:

Теги

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Яндекс.Метрика