Для выделения отдельных фрагментов текста – в зависимости от того, чего хочет добиться автор или верстальщик, – могут с успехом использоваться болд (жирный шрифт), болдер (полужирный шрифт) и италик (курсив).
Болд отлично привлекает внимание читателя к конкретному слову или фразе. Нужно только помнить, что таких вставок не должно быть много: это вызывает раздражение и усталость. Реже встречается применение полужирного шрифта для выделения слов, хотя это менее навязчивый и в то же время довольно выразительный прием. Оба вышеупомянутых шрифта хорошо подходят для выделения заголовков и подзаголовков.
Самое комфортное для читателя – это выделение курсивом. Тексты, оформленные таким образом, выглядят более однородными и проще читаются, но злоупотреблять тут тоже не стоит.
Слишком сжатый или разреженный интервал усложняет чтение и создает ощущение неаккуратного набора. А такие мелочи очень важны для восприятия, даже если на сознательном уровне сложно понять, что «не так» с текстом.
Обратимся к стандартам. Вот что они рекомендуют: правильные интервалы составляют 1,5 для массива текста, 1,25 для заголовка{38}.
Здесь речь тоже пойдет об интервалах, но только уже о расстоянии не между строчками, а между символами.
Очень не рекомендуется увеличивать или уменьшать его без особой надобности. Определенная разрядка изначально учитывается разработчиком шрифта, и ее смена по серьезности равна… ну, примерно генной модификации. Шутки шутками, но в заголовках разрядку действительно допускается изменять только при крайней надобности и лишь в двух случаях: на баннерах или в H1. Не делайте этого в текстовых массивах – не стоит ломать пользователю зрение.
Некоторые почему-то считают, что непропорциональное растягивание текста украшает его. Однако на самом деле это не так. Лучше не нарушать пропорции символов, заложенные шрифтовыми дизайнерами, потому что эти люди – специалисты, имеющие представление о том, как воспринимается текст.
Не гонитесь за внешними эффектами: это лишь усложняет восприятие написанного. Да, стилизация текста в логотипах или других исключительных случаях допустима, но не стоит этим злоупотреблять. Шрифт в первую очередь инструмент коммуникации.
Не стоит, например, выравнивать длинные тексты по центру или по правому краю – это усложняет их чтение. И в вебе, и в офлайне лучше держаться левого края. Для комфортного чтения длина строки должна составлять 40–80 символов{39}.
Глава 5Лендинги
Незыблемые правила
На сайте-одностраничнике мы сосредоточиваемся на одном товаре или одной услуге, реже – на линейке товаров или услуг. Это облегчает работу: не придется утрамбовывать в 500 символов плюсы всей продукции компании. Яркий пример – наша работа для бренда «Пират-Мармелад»: мы создавали его исключительно под франшизу, и только под нее, а основной контент остался на сайте компании. Полный кейс про создание лендинга – по ссылке ниже.
Если нужно показать несколько разных товаров или услуг, то потребуется создать полноценный сайт (или отдельный лендинг под каждый из вариантов).
Из опыта компании «Текстерра». Кейс 23
Как мы делали лендинг для «Пират-Мармелад» – требовалось красиво и «вчера»
С аудиторией ровно то же самое. Ну, вообще-то, писать «для всех» – это в принципе провальная затея, а уж на лендинге тем более: здесь аудитория, как правило, совсем узкая. Если на главной странице сайта интернет-магазина зоотоваров вам надо привлечь внимание и любителей птичек, и владельцев английских догов, то на одностраничник к вам придут строго за индивидуальным пошивом одежды на померанских шпицев. Возможно, даже только мальчиков.
Кстати, что сначала – прототип или текст?
● С одной стороны, грамотный специалист по юзабилити и без вас прекрасно знает, что на первом экране будет заголовок, подзаголовок, фото товара и несколько ключевых преимуществ. Поместить туда вместо этого цену и большую красную кнопку «КУПИТЬ» он вам не даст, и правильно сделает – ему известно, что пользователям насилие не нравится.
● С другой стороны, вы как контент-менеджер уже прикинули, сколько места займут эти самые преимущества, и можете сказать ему: «Дружок, не надо мне тут столько места, обойдемся тремя пунктами, добавь лучше воздуха».
В идеале вам обоим следует ознакомиться с брифом, послушать клиента, позадавать ему вопросы, все хорошенько обсудить и уж потом работать – каждому на своем фронте.
Спросите заказчика, почему его клиенты выбирают именно это (или должны выбрать, по его мнению, если речь идет о стартапе). Образовательный курс, например, может иметь фишку в виде сильного кураторства, мандарины – приезжать за несколько часов прямиком из Абхазии, а квартиры в аренду на сутки – стоить на 5 % дешевле аналогичных, и чтобы при возврате ключей никто за клиентом серебряные ложечки не пересчитывал (по крайней мере, при нем).
В статьях про тексты в целом и лендинги в частности вы миллион раз читали что-то там про «боли» пользователя и прочие надоевшие «продающие фишки». Но это все действительно важно. Искусственно изобретать никакие «боли» не нужно: если продукт выбирают именно за названное качество, значит, он их и снимает.
Ну и, разумеется, все это должно быть правдой – и хорошо бы подкрепить информацию цифрами.
Какая цифра на лендинге – главная? Цена, разумеется. И, кстати, не помешает ее продублировать в самом низу полотна одностраничника, где-нибудь около финальной формы обратной связи. В каждом конкретном случае, разумеется, лучше посоветоваться с UX-специалистом!
Тут похожая история, только теперь надо объяснить, почему этот товар надо купить именно у этого производителя/дистрибьютора/дилера.
Это самый опасный для автора блок – всегда есть соблазн скатиться куда-то в «индивидуальный подход» и прочую муть. Запретите себе это словосочетание: если ваш товар или услуга и так подразумевает индивидуальный подход, то уточнение будет выглядеть глупо. Например, дизайн интерьера в любом случае будет индивидуальным – не подойдет же один и тот же проект для хрущевки и для сталинки. А если товар типовой, вроде кирпичей для строительства, то их потребителю точно не дадут выбрать, как картошку на рынке.
Дальше порядок блоков еще более свободный – выбирайте те, которые, на ваш взгляд, представляют товар и бренд в наиболее выгодном свете. Например, если у вас много реальных отзывов на бланке с печатью, выносите их повыше, если есть хороший видеообзор – показывайте его во всей красе.
Мультилендинг – это один лендинг, на котором динамически меняется контент или дизайн. Это работает для разных запросов одинаковых услуг или товаров: например, для разных ЦА («пластиковые окна на дачу» и «пластиковые окна в офис»). Под запрос перестраивается или контент, или дизайн, или все вместе, чтобы уменьшить показатель отказов и давать пользователю конкретное предложение.
В основном тут все так же, как с обычными сайтами, – просто ставим во главу угла удобство пользователя. Есть, правда, и своя специфика: плавающее меню-бургер и плавающая же кнопка обратного звонка.
Ни в коем случае никуда не уводите пользователя. Потому что, если посетитель уйдет (даже на ваш собственный сайт), начнет читать что-то о компании, смотреть другие продукты – которые не факт, что купит, – он на что-то отвлечется и никогда уже не вернется на лендинг. Человек о нем банально забудет.
Если ваш товар из категории тех, по которым решение принимается долго: приобретение недвижимости (в том числе в ипотеку) или, скажем, машины, то возникает вопрос: как не потерять пользователя, которому понравилось предложение? Вряд ли он положит лендинг в закладки.
Есть три основных способа удержать потребителя:
1. Постоянный ретаргетинг, направленный на тех, кто уже был на лендинге (так делают, например, «Тинькофф» и OZON);
2. Материалы, которые можно скачивать, – всевозможные презентации и руководства; они обязательно должны быть брендированными (ну и, конечно, полезными);
3. Онлайн-консультанты вроде JivoSite, чат-боты, которые помогут собрать контакты тех, кто проявил интерес к вашему товару или услуге.
Например, на лендинге планировщика задач Wunderlist есть сразу два призыва к действию, которые усиливают друг друга: «Создать бесплатную учетную запись» и «Загрузить Wunderlist». Пользователи кликают по обеим ссылкам, конверсия растет, а лендинг выполняет свою работу на отлично.
Лендинг может быть постоянным, то есть заточенным не под временную акцию. Отличается от «акционных» он в основном возможностями в плане дизайна и UX: когда есть какая-то услуга, которая выделяется из общего продуктового ряда, логично создать для нее страницу на другом шаблоне. Чтобы не переделывать весь сайт, создается лендинг и встраивается в структуру многостраничника – обычная история. Красивый визуал, анимация, интерактив – возможности безграничны.