Ищем разработчика, который без ума от JavaScript и клёвых анимаций
Дизайн
Alexander Marfitsin
3638

Как улучшить сканируемость контента и сделать его более читаемым

The UX Collective рассказали об основных паттернах чтения и поделились рекомендациями по улучшению сканируемости контента. Адаптированный перевод материала от продуктового редактора Александра Марфицина.

В закладки

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

Такое информационно-поисковое поведение можно сравнить с поведением хищников. Дикие животные ищут пищу, чтобы выжить. Люди ищут информацию, чтобы утолить всё возрастающий информационный голод. Эксперты по юзабилити и когнитивные психологи называют это эффектом «информационного запаха» (the information scent effect).

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

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

Вам нужно придать форму своему содержанию

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

4 основных паттерна сканирования

С 1997 года самым популярным паттерном чтения считался F-паттерн. Но с развитием интернета и гаджетов многое поменялось. Теперь NN/g выделяет 4 основных шаблона, по которым люди сканируют информацию.

1. F-паттерн

Пользователи используют этот паттерн при больших объёмах текста без форматирования:

UX Collective

Это похоже на настоящую текстовую стену. Делать её — самая распространённая ошибка при создании контента, людям такие материалы кажутся непривлекательными Поэтому они сканируют слева направо сверху, затем сверху вниз в начале предложений. Только если некоторые слова кажутся им релевантными, они читают дальше.

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

2. «Пятнистый» паттерн

Читатель глазами перескакивает из одного места на другое, ищет ключевые элементы или руководствуется выделенными фрагментами:

UX Collective

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

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

3. Паттерн «слоёного пирога»

В этом случае читатель сканирует не слова по отдельности, а целые фрагменты текста:

UX Collective

Этот шаблон помогает считывать заголовки, а затем сканировать соответствующую часть текста. Так пользователи могут читать больше. Но это не лучший паттерн.

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

4. Паттерн «приверженности» или «обязательства»

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

UX Collective

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

Как усилить «информационный запах» контента

Чтобы достичь паттерна «приверженности» для последовательного сканирования контента, нужно:

  1. Делить содержимое на фрагменты
  2. Сразу загружать ключевую информацию
  3. Создавать визуальную иерархию
  4. Снизить отвлекающие факторы

О каждом из этих пунктов подробнее.

Делить содержимое на фрагменты

Как вы заметили в примерах выше, 3 абзаца из 3 строк намного лучше, чем 1 абзац из 9 строк. Поэтому:

  • Используйте подзаголовки как можно чаще. Сделайте их значимыми и укажите в них важную для читателя информацию.
  • Пишите короткие предложения. Разделите идеи на несколько простых предложений вместо сложных с запятыми.
  • Делайте короткие абзацы. Держите их в пределе 2-5 строк.
  • Разбивайте абзацы на списки. Маркированный и нумерованный списки помогают создавать короткие предложения и увеличивают время чтения.

Для оценки читаемости англоязычных текстов подойдёт Hemingway Editor. Для русскоязычных можно использовать «Главред». Если знаете более подходящие инструменты, поделитесь в комментариях.

Быстро загружайте ключевую информацию

Сначала ответьте на вопрос пользователя, затем переходите к деталям.

  • Правило двух. Внимательно следите за тем, что написано в первых двух абзацах. Затем в первых двух строках, далее в первых двух словах предложения. Если они зацепят внимание читателя, он продолжит сканировать материал.
  • Добавьте выжимку материала в самом начале. Чтобы пользователи сразу поняли ключевую идею и убедились, что статью стоит читать.
  • Добавьте оглавление со ссылками на подразделы. Они описывают ваше содержание и помогают человеку сразу перейти к нужной информации.
  • Задайте иерархию контента. Ответьте в первых двух абзацах: что, когда, кто и где. Затем вникните в «почему», сохранив дополнительные детали.

Это требует опыта. Для англоязычных текстов могут подойти Grammarly и ProWritingAid. Если знаете аналог для русскоязычных текстов, поделитесь в комментариях.

Создайте визуальную иерархию

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

  • Типографика. О ней хорошо написано в материале Canva. Самое главное — сохранить и передать с помощью типографики порядок чтения.
  • Ключевые идеи с полужирным начертанием направляют читателя по всему тексту, снабжая наиболее важной информацией. Используйте полужирное начертание в меру, не стоит выделять больше, чем одно предложение в каждом абзаце.
  • Значимые изображения дополняют ваши идеи и предлагают продолжить изучение. Не используйте их как декоративные элементы — они могут украсть внимание читателя.

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

Снизьте влияние отвлекающих факторов

Аккуратно используйте следующие элементы:

  • Выровненный по центру текст. Он нарушает поток чтения и люди сканируют только его. Например, когда читаем новости, то часто обращаем внимание только на заголовок и крупные цитаты.
  • Цветные «пятна». Они легко привлекают внимание, но, как и отцентрованный текст, отвлекают от основного потока чтения.

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

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

Больше о пользе контента для продукта в моём Телеграм-канале «Инструменты редактора», блоге на Medium и ежемесячной рассылке. За наводку на статью спасибо Михаилу Хананашвили.

{ "author_name": "Alexander Marfitsin", "author_type": "self", "tags": ["\u043c\u0430\u0440\u0444\u0438\u0446\u0438\u043d","\u043a\u043e\u043d\u0442\u0435\u043d\u0442","uxwriting","ux"], "comments": 6, "likes": 24, "favorites": 105, "is_advertisement": false, "subsite_label": "design", "id": 167008, "is_wide": false, "is_ugc": true, "date": "Thu, 15 Oct 2020 12:25:00 +0300", "is_special": false }
Объявление на vc.ru Отключить рекламу
Маркетинг
2100 продаж в интернет-магазине мебели. Кейс «Столплит»
Как перейти от имиджевого продвижения на продажи, сделать более 2100 продаж только через интернет-магазин и всё равно…
0
6 комментариев
Популярные
По порядку
Написать комментарий...
2

Спасибо за перевод и за инструменты!

"Главред" достаточно неоднозначен, хотя и помогает: всё зависит от выбранного стиля изложения. Для сухих выжимок и информирования — инструмент практически идеален. Также есть полезный русскоязычный сервис "Орфограммка". 

Ответить
1

Спасибо. Да, согласен. Но я «Орфограммку» больше для выявления ошибок использую, а не «читаемости» :)

Ответить
1

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

А про Grammarly хочется добавить, что лучше для себя инструмента так и не нашёл: уже лет восемь или больше пользуюсь, причём бесплатной версией. 

Ответить
1

Что интересно - этот текст я пролистал. 

Ответить
0

Хорошая заметка, спасибо! Коротко и по делу, при этом с обоснованием, с истоками. Круть.

Ответить
0

Да, ребята хорошо написали, я только перевёл :)

Ответить

Комментарии

null