Архив метки: вёрстка

Как создавать более полезный, интересный, вовлекающий контент

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

Другими словами, это коммуникация.

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

Хороший дизайн превращает просто хорошую статью
в ценный информационный ресурс.

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

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

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

F-template

Вывод: то, как представлена информация так же важно, как и сама информация.

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

Дизайн и вёрстка

Самое важное при создании контента — сделать его читабельным.

Это включает стилизацию страницы, текста, отступы, и саму вёрстку.

Создавайте удобную для чтения длину строки

Длина строки зависит от двух составляющих:

  • Размер шрифта.
  • Ширина колонки.

Большинство экспертов советуют: количество символов в строке десктопного текста должно быть не меньше 45 и не больше 75, для мобильных устройств – не больше 50 и не меньше 35.

reading-line-comparison

 

Более длинный текст вызывает у пользователя усталость и нетерпение. Короткий — обрывист и трудночитаем.

Так как сейчас у многих пользователей мониторы и гаджеты с высоким разрешением, на многих сайтах используется увеличенный шрифт (20-22px) и широкая колонка текста (800-1000 px). Но любое сочетание читаемого шрифта и удобной длины строки является приемлемым.

Установите подходящие отступы и высоту строки

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

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

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

line-height-vs-paragraph-spacing
Удалите отвлекающие элементы

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

Этому есть эстетические причины – страница выглядит чище и проще. Отсутствие отвлекающих элементов положительно влияет на вовлечённость и конверсию.

videofruit-no-sidebar

Videofruit упростил дизайн главной до одной колонки и обнаружил рост конверсии на 26%.

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

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

Чем меньше отвлекающих факторов, тем больше
вовлечённость и ценность контента для пользователя.

Написание и структура информации

Очертания строк и параграфов также влияет на степень вовлечённости пользователя.

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

Пишите с намерением

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

Вариация в длине и плотности строк дают нашим глазам возможность «зацепиться» за информацию. Это означает, что форма написанного текста  очень много значит.

Другими словами, это «крючок».

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

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

Чередуйте короткие, простые предложения и
более сложные разъясняющие абзацы,

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

Используйте подзаголовки

Часто применяйте подзаголовки для разбиения текста и для лучшей ориентации пользователя в контексте предоставленной информации.

use-subheaders

Разбивайте текст

Сканирование – главный способ восприятия информации в интернет-пространстве.
Так много всего нужно прочесть, поэтому мало у кого есть время концентрироваться на каждом слове.

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

Как создатели контента, мы не должны бороться с этой склонностью, это не наша работа — менять читательские привычки. Лучше принять эту реальность и принимать её во внимание  при создании контента.

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

  1. Списки
  2. Фотографии
  3. Диаграммы, графики, другой визуал
  4. Цитаты
  5. Призывы к действию

Хороший пример равномерного разбиения текста — посты в Buffer Blog. Читатель легко понимает структуру статьи без необходимости вчитываться в каждое слово.

buffer-page-markup

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

Исследование Buzzsumo показало, что статьи, в которых каждые 75-100 символов текста разбавлены изображениями, получают больше репостов.

words-to-image-ratio-small

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

Как общее правило: каждые 200-400 символов должны быть разбавлены изображениями.

«Вёрстка и дизайн могут компенсировать недостатки контента»

Создание ценности с помощью дизайна

До сих пор мы говорили о самых основах, делающих любой контент более привлекательным.

Но дизайн может сделать намного больше.

«Хороший дизайн превращает контент в ценный информационный ресурс»

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

Контент с хорошим дизайном становится чем-то намного большим, чем просто «пост в блоге», а чем-то важным и особенным.

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

magazine-spread

 

Даже если информация сама по себе интересная, она будет менее ценна и пригодна для использования.

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

Обеспечьте структуру навигации

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

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

helpscout-design-experience

Пример Helpscout — огромная коллекция цитат аккуратно каталогизирована и разбита на понятные категории.

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

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

vero-example

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

Помогите пользователю лучше ориентироваться

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

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

moz-seo-guide

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

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

«Создание чего-то замечательного начинается  с замечательного контента»

Вывод: Хороший дизайн превращает просто хорошую статью в авторитетный ресурс информации – во что-то выдающееся и долгоиграющее. 

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