Человек не готов вам ничего рассказывать. Он вообще вас не знает. Вы для него даже не сосед, вы «продавец в электричке». Если вы хотите, чтобы человек для получения, допустим, 15 бесплатных советов от гуру маркетинга предоставил какую-то информацию, – обоснуйте, зачем она вам нужна.
Максимально открыто делитесь информацией о себе: юридические данные, личные фотографии, адреса офисов. Видео докажет пользователю, что вы и ваш товар реально существуете. Человеку приятнее общаться с теми людьми, которых он знает.
Бэкграунд
Можно выделить несколько важных особенностей, касающихся оформления общего фона сайта и текста.
Исходя из теории социальных соглашений фон сайта должен быть светлым и однотонным (вспомните аналогию с книгами). Отзывы принято выделять желтым или бежевым фоном.
Посмотрите крупные сайты: Amazon – светлая гамма, Wildberries – светлый фон, Lamoda – белый цвет.
С точки зрения удобства восприятия информации это не совсем правильно.
Монитор компьютера излучает свет, как фонарик, поэтому белые буквы на черном фоне должны восприниматься лучше. Если вспомнить старые программы, например MS DOS, там так и было.
Почему же тенденция изменилась? Снова виноваты книги. Нам привычнее видеть черный текст на белом фоне, несмотря на то что с точки зрения физиологии буквы должны быть белыми, а фон – темным.
Бэкграунд – это отличный способ группировки элементов по смыслу. Форма заказа должна быть на контрастном фоне. Для обозначения прямой речи в отзывах используется желтый фон.
Фон должен быть однотонным. Ни в коем случае нельзя добавлять цветочки или фотографии облаков в качестве фоновой картинки.
Основная функция периферического зрения – это охрана от опасности. Если в зоне ответственности периферического зрения находится отвлекающий элемент, то потенциальный покупатель вашего товара или услуги будет все время забывать про цель визита и не сможет сфокусироваться на вашем коммерческом предложении.
Откройте любой сайт с подобным бэкграундом и почувствуйте, как тяжело воспринимать информацию и читать текст.
По этой же причине нельзя использовать слайдеры, параллакс-эффекты и т. д. Любое движение на сайте уводит пользователя от совершения целевого действия. Если вы хотите создать иллюзию движения, можно применить так называемое псевдодвижение: стрелки, наклон текста, скобки.
На рис. 5.8 представлен сайт. Иллюзия движения создается стрелочками и заставляет человека читать текст несмотря на то, что он стоит вразнобой.
Рис. 5.8. Пример дизайна сайта
Обратите внимание на отдельный бэкграунд для первого экрана и отдельный бэкграунд для отзывов. Отзывы четко обособлены, в их оформлении применяется много разных «фишек»: кавычки, оформление прямой речи.
Но самое главное – выделение смысловых групп элементов: первого экрана и отзывов.
Оформление текста
В медийном пространстве существуют свои правила оформления текста.
В техническом оформлении не рекомендуется красный шрифт.
Не следует также выделять текст с помощью Caps Lock – это воспринимается как крик на посетителя.
Человек легче воспринимает короткие строки. Чем короче строка, тем с большей охотой человек будет читать текст. Именно поэтому в газетах делают колонки.
На самом деле короткие строки сложнее для восприятия информации, но пользователю кажется, что короткий текст легче прочесть, так как массивы текста кажутся меньше.
То, на чем в тексте необходимо акцентировать внимание, выделяют полужирным шрифтом, но не более трех слов подряд.
Более того, выделенные слова должны быть легкочитаемы и иметь отдельную смысловую нагрузку, а информация структурирована для быстрого и легкого восприятия с помощью маркированных списков или буллитов.
Размер от 12 до 18 px. Размер шрифта на сайте должен быть не менее 12 пикселов.
Читать текст с экрана труднее, чем с бумаги. К тому же у многих пользователей плохое зрение и получается, им нужно идти за очками, чтобы разобрать рекламный текст. Тут уже не до покупки. Любые сложности и неудобства ведут к потере клиентов.
Прямая речь – курсив. Прямую речь и какие-то важные моменты лучше выделить курсивом. Можно использовать курсив для выделения прямой речи при оформлении отзывов покупателей чтобы показать, что эти слова принадлежат не авторам сайта, а их клиентам.
Текст контрастный (черный текст на белом фоне). Вопрос применения черного текста на белом фоне уже затрагивался. Поговорим о сером тексте на сером фоне. Это тот случай, когда эстетикой стоит пожертвовать ради юзабилити. И ради продаж.
Использовать синий текст только в ссылках. Многие создатели одностраничников любят использовать синий цвет в заголовках и подзаголовках. Если ориентироваться на социальное соглашение, у книги и сайта есть одно явное отличие – это гиперссылки.
Мы знаем, что можем проходить сайты не от страницы к странице, а двигаться вглубь с помощью ссылок.
Пользователи привыкли к тому, что у ссылок есть две характеристики: ссылки выделяют либо синим цветом, либо подчеркивают специальной линией.
Поэтому, если в тексте что-то подчеркнуто или выделено синим цветом, это автоматически воспринимается как ссылка. Правило простое: никогда не используйте синий цвет в тексте, за исключением выделения ссылок.
На картинке представлены страницы сайтов для сравнения (рис. 5.9). Есть страница с более мелкими шрифтами и более крупными.
Какой проще воспринимается? Естественно, левая страница воспринимается проще, чем правая.
Ниже на картинке вы увидите два примера использования фона. Сравните применение белого и серого фона. Белый фон для восприятия проще, чем серый. Легче понять, что написано, и хочется продолжить чтение.
Для ссылки применяется уникальный цвет: если посмотреть на картинку, можно точно сказать, что ссылка находится на второй строке текста, потому что она подчеркнута и выделена цветом.
Используйте русские кавычки и буллиты. К сожалению, сейчас многие пользователи разучились грамотно писать, доверяя исправление ошибок в тексте компьютерным редакторам.
Рис. 5.9. Структура страниц сайтов для сравнения
Но клиента этим простым объяснением не взять. Он очень быстро отличит грамотный текст от текста с ошибками. А для пользователя ошибки в лендинге – это «триггер» недоверия.
Если у вас хорошая грамотность, то доверие пользователя – ваше. Старайтесь избегать «ляпов» и в мелочах. Например, русские кавычки – это кавычки «лапки» или «елочки». Не используйте две «верхние» кавычки «…». Это признак дурного тона.
Применяйте, где необходимо, тире, а не дефис.
Используйте маркированные списки-буллиты.
Как применять все принципы и правила оформления к каждому элементу сайта, отзывам, описанию продуктов, оформлению первого экрана, мы обсудим далее. Начнем с первого экрана.
Первый экран
Перечислим основные элементы первого экрана: логотип, дескриптор, заголовок (выгода), подзаголовок (дополнительная выгода), кнопка действия или форма заказа.
Дескриптор в Америке уже редко используется, потому что там в основном продвигаются известные бренды. Американцы переносят сам дескриптор в заголовок. В России дескриптором пока пользуются, но наметился тренд на вымирание.
Рассмотрим подробно, как создаются все элементы.
Заголовок
Большой размер (от 30 рх). Заголовок должен быть большого размера, от 30 пикселов и более. Заголовок – это та часть первого экрана, на которую мы обращаем максимальное внимание. Восемь пользователей из десяти читают заголовок.
В центре экрана. Заголовок должен быть по центру экрана либо выровнен по левому краю, в зависимости от того, какая композиция выбрана.
Не больше 8–10 слов. Заголовок должен быть коротким, не более 10 слов. Все остальное будет сложно восприниматься аудиторией.
Обратите внимание на рис. 5.10 – это сервис по созданию меню для ресторана.
Рис. 5.10. Страницы сайтов для сравнения
Здесь большой заголовок, под ним подзаголовок и кнопка заказа. На русском фраза звучит так: «Создайте свое меню онлайн за минуту».
Заголовок читается даже на маленькой картинке и действует убеждающе.
Картинка
Картинки бывают нескольких видов.
Если мы хотим использовать женское лицо, нужно не просто взять первую попавшуюся женщину и вставить ее фото. Пользователь должен ассоциировать себя с этой картинкой и узнавать в ней себя (по возрасту, роду занятий, внешности и т. д.).
В данном случае речь идет о лице-бренде, если такое в компании имеется. Обычно им выступает человек, которого хорошо знает аудитория, к кому относится лояльно, но самый важный фактор – персонаж должен ассоциироваться с компанией.
Речь идет о применении фото клиента, к примеру оставившего отзыв. В подобных случаях использование лица человека оправдано. Соответственно форма заказа размещается слева или справа экрана.
Рассмотрим один пример (рис. 5.11). Это одностраничник обучающих программ Convert Monster. На картинке лицо компании – Евгений Новиков. Пользователь ассоциирует его с агентством, так как Евгений присутствует во всех рекламных кампаниях и участвует в конференциях от лица компании.
Рис. 5.11. Лицо компании
Было проведено огромное количество тестов. У сайтов с фотографией Евгения очень высокая конверсия. И это не просто так – наши клиенты идентифицируют себя с Евгением.
Тесты и отклики аудитории показали, что он действительно располагает к себе, вызывает доверие, являясь при этом лицом компании и ведущим тренингов. Здесь происходит слияние двух понятий: пользователь узнает в лице Евгения себя и в то же время Женя – официальное лицо агентства.