Визуальные крючки для привлечения внимания читателя
Мы регулярно рассказываем, как сделать текст полезным и интересным. Материалов накопилось настолько много, что пришлось составлять целое . Но в этот раз хотим поговорить не о содержании, а о визуальной составляющей контента на сайте, то есть об оформлении статей и других материалов.
Информация будет полезной начинающим копирайтерам, предпринимателям, которые занимаются контентом самостоятельно, а также маркетологам и SMM-специалистам, желающим расширить знания в смежной тематике. Большая часть способов общеизвестна, поэтому мы решили сделать упор на практическое использование каждого приема.
1. Заголовки
Этот элемент помогает сформировать главную тему статьи, отдельного абзаца или информационного блока. По смыслу он должны быть лаконичными и запоминающимися, отражать проблему, которую решает публикация.
Текст заголовков обычно больше по размеру, чем остальной материал, может отличаться цветом или быть полужирным – все это привлекает внимание. Используемые в статье шрифты должны сочетаться, иначе страница будет выглядеть неопрятно, а названия будут казаться несвязанными с самим материалом.
Шаблонный заголовок ничего не говорит о сути статьи, оформлен курсивом, поэтому не ассоциируется с остальным текстом.
Если говорить о блогах или новостных ресурсах, для привлечения внимания к заголовкам их часто размещают на цветном фоне или поверх изображений. Это отличный способ сразу проиллюстрировать материал, разместить тематическую картинку, которая также даст пользователю представление о содержании. На этапе верстки нужно проверить, остается ли ваш текст читаемым или теряется на ярком фоне. Сравните:
Пример 1
Заголовок в блоге сервиса Aviasales хорошо различим на фоне фотографии Вильнюса. Из названия заметки сразу понятно, что в тексте речь пойдет о неизвестных туристических маршрутах. Люди, отправляющиеся в Литву, точно попадут на крючок.
Пример 2
Из названия непонятно, что речь пойдет именно о корейских средствах ухода за кожей, кроме того, заголовок оформлен зеленым шрифтом на зеленом фоне – его трудно различить.
Для общих страниц блога действует правило единства оформления, то есть заголовки всех статей в разделе должны выглядеть одинаково, посмотрите на примере нашего сайта:
Названия публикаций краткие, отражают суть статьи, не выбиваются из общего дизайна страницы.
2. Анонс
Краткое описание содержания в начале публикации – полезный инструмент для информационных ресурсов, новостных и блоговых площадок. В начале материала дается выжимка из всего текста, человек тратит на ее прочтение несколько секунд и сразу понимает, стоит ли ему браться за весь материал.
В анонсе полезно разместить информацию о времени чтения, так пользователь сразу поймет, стоит ли браться за заметку сейчас или лучше пока отложить ее. Взрослый человек за минуту прочитывает 160 слов, при расчете ориентируйтесь на этот показатель.
3. Рейтинги, комментарии и количество прочтений
Эти элементы могут быть частью заголовка, анонса или краткого описания на общей странице блога. Перечисленные показатели доказывают, что статья действительно интересна аудитории, вызывает отклик у людей, побуждает их проявить активность и высказать свое мнение. Вот несколько вариантов оформления:
«Тинькофф-Журнал»
179 077 просмотров, 197 комментариев.
Блог 1PS
24 000 просмотров, 18 комментариев.
Информационный портал DTF
286 комментариев, 88 добавлений в закладки, 323 положительных оценки.
Инструмент эффективен в первую очередь для новостных и информационных ресурсов, интернет-журналов разной тематики. Читатели могут оценить актуальность темы и перейти на статью, чтобы быть в курсе происходящего.
4. Содержание/Оглавление
На сайтах этот элемент реализуется как кликабельный список тем, чаще всего используется в оформлении больших по объему материалов. Прием активно используется в энциклопедии Википедия, почти все статьи снабжены этим блоком:
А вот пример оглавления из загадочного показателя качества сайта Яндекс ИКС:
Кликабельный список становится путеводителем по тексту, он помогает пользователю сориентироваться в теме. Читатель видит, что в тексте разбирается интересующий его вопрос, переходит в нужный раздел и легко находит ответ.
5. Примечания
Этот способ размещения информации взят из журнальной верстки. Суть в том, что дополнительный материал, ссылки, указания автора и другие данные размещены справа от основного текста. Примеры использования приема можно найти в «Тинькофф-Журнале». В этой статье в примечании разместили информацию об авторе:
А здесь дали ссылку на материал по схожей теме:
Обратите внимание, основную информацию в примечания лучше не выносить, так как некоторые читатели игнорируют их. Дополнительные данные и ссылки на интересные материалы смогут поддержать интерес лояльной аудитории, побудят их перейти на другие страницы сайта.
6. Врезки
Это способ выделения важной информации – фрагмент текста оформляют большим шрифтом, помещают в рамку или на цветной фон. Как и в случае с заголовком, не стоит брать другой шрифт, потому что статья будет выглядеть неопрятно. Исключение составляют только цитаты, для них традиционно используют курсив.
Приведем несколько примеров. На информационном портале НОЖ главную мысль выделили с помощью большого полужирного шрифта:
Максим Ильяхов в своем блоге традиционно выносит важные мысли в рамки оранжевого цвета. Скажем по секрету, в среде копирайтеров и маркетологов они давно стали поводом для шуток, но все же прием остается эффективным:
Также отметим, врезка – отличный способ выделить целевое действие на странице, с помощью нее можно направить пользователя, так как выделенную таким образом информацию люди читают охотнее, чем сплошной текст. Прием активно используют для приглашения к подписке или переходу в другой раздел сайта, вот еще один пример из блога Максима Ильяхова:
Вся статья размещена на белом фоне и только призыв к подписке расположен на цветном фоне.
7. Таблицы
Прием позволяет подать информацию в простом и понятном виде, структурировать ее в сознании пользователя. Есть четкие правила вставки таблиц в текст:
-
Перечисление технических характеристик. Идеальный вариант для карточек товаров, обзорных статей об электроприборах, оборудовании, различных гаджетах. Позволяет лаконично описать свойства продукции, ее габариты и другие параметры:
-
Сравнение. Позволяет наглядно сопоставить какие-либо явления, предметы, методы. Часто используется в обзорах на несколько товаров одной ценовой категории и назначения. В качестве примера приведем сравнение качества видеозаписи на iPhone 7 и iPhone 8:
-
«ДО-ПОСЛЕ». С помощью таблицы можно наглядно проиллюстрировать пользователю эффективные-неэффективные методы, результаты каких-либо работ, услуг, методик. Максим Ильяхов, о котором мы уже говорили, часто сопоставляет в них правильные и неправильные варианты текстов, и таким образом доказывает компетентность своего подхода:
8. Списки
Маркированные и нумерованные списки, как и таблицы, необходимы для структурирования информации в сознании пользователя. С помощью них можно показать последовательность действий, перечислить товары, ингредиенты в рецептах, оформить подборку или ТОП.
Например, так оформила шоппинг-советы девушка, ведущая кулинарный блог:
А вот рецепт в котором используется и маркированный и нумерованный список, так визуально разграничиваются ингредиенты и порядок приготовления:
9. Изображения
Текст без иллюстративных материалов выглядит невзрачно и непривлекательно, его не хочется читать. Но картинки не стоит добавлять бездумно, они должны подходить к материалу и усиливать эффект от него. Приведем несколько лайфхаков, которые помогут вам.
-
Выдерживайте единый стиль. Если ваши публикации связаны между собой, к ним стоит подобрать схожие изображения. Так недавно в нашем блоге вышла серия статей , автор подобрал к ним картинки с кадрами из мультсериала «Симпсоны» и связал публикации с помощью визуального оформления.
-
Избегайте стоковых изображений. Долгое время владельцы сайтов размещали одинаковые картинки со свободной лицензией, и теперь пользователи не воспринимают их как иллюстративный материал. Сейчас подобные картинки стали лишь поводом для шуток, наверняка многие слышали про мем «Грустный Гарольд» или видели пародийную съемку Vanity Fair с актрисой Эмилии Кларк, звездой сериала «Игра престолов».
-
Делайте информативные подписи. Если вы публикуете в портфолио свои работы, кратко опишите, что было сделано в рамках услуги, сколько стоил проект, какие проблемы удалось решить. Особенно это важно для сфер, где точная цена рассчитывается индивидуально. Подобная информация пригодится вашему потенциальному клиенту, поможет ему принять решение о покупке.
Отдельно расскажем об одной из разновидностей иллюстративного материала – статичных баннерах. При их отрисовке следите за тем, чтобы текст, наложенный поверх изображения, отчетливо читался, был лаконичным и не перегружен информацией. В противном случае на него никто не обратит внимания.
Например, на этом баннере в первом экране сайта корейской косметики слишком много разрозненной информации, текст оформлен разными шрифтами, элементы расположены неправильно. В результате пользователь проигнорирует картинку и не узнает о полезных свойствах крема.
А вот хороший баннер в интернет-магазине кофе:
Краткое сообщение об акции и ее условиях + изображения товара, по клику открывается список подарков, и клиент может выбрать понравившийся.
10. Видео, гифки и аудио
Размещение медиафайлов – отличный инструмент, который помогает проиллюстрировать ваши слова. Видео и аудио идеально подходят для блогов по иностранным языкам – так журнал школы Skyeng недавно опубликовал материал об американском английском в песнях хип-хоп исполнителей. К статье прикреплены клипы с пояснениями от преподавателя:
Или пример с портала DTF. В публикации об истории известных музыкальных произведений автор добавил аудио с сервиса YouTube:
Также гифки, видео и аудио отлично подходят для развлекательных статей, в которых полезные материалы подаются с юмором. Они надолго остаются в сознании и помогают лучше запомнить информацию. Недавно мы использовали этот прием в статье о .
Перед тем, как использовать перечисленные приемы, проанализируйте свою аудиторию. Люди старшего поколения редко смотрят ролики и слушают записи на сайте, для них содержание медаифайлов придется продублировать в виде текста.
Использование визуальных элементов для оформления статей и текстов давно считается обязательным, из-за ускорившегося темпа жизни сейчас трудно найти человека, который стал бы читать огромные полотна без элементарной разбивки на абзацы.
Перечисленные в нашей статье, способые зацепить читателя, могут комбинироваться и пересекаться, их нужно выбирать с умом, ориентируясь на вашу целевую аудиторию, привычную для нее подачу материала. Перед написанием любого текста попробуйте поставить себя на место пользователя, и честно ответьте на вопрос: «Стал бы я читать такую заметку?»
Если вам нужен совет по наполнению сайта контентом, оценка размещенных материалов и рекомендации по ним, задайте вопрос . Объективно рассмотрим тексты на вашем сайта, дадим рекомендации или разработаем новые тексты.