Вход

Гайд по CRO (2019). Часть 3: дизайн и фронт-часть

19.04.2019

17 минут

Маркетинг,

Главная
>
Блог
>
Гайд по CRO (2019). Часть 3: дизайн и фронт-часть

144

Читайте весь гайд по CRO:

В прошлый раз мы обсуждали, как разработать страницу с хорошим UX. Сегодня — вторая часть этой темы. Еще немного обсудим вопросы дизайна, а также работу над фронт-частью! Заваривайте чай — нас ждет интересная тема!

Дизайн посадочной страницы

Посадочная страница — своего рода «лицо» компании. Ее важность сложно переоценить. У нее несколько функций:

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

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

Общие правила

При разработке лендинга есть два ключевых правила — про стабильность и про доверие.

Во-первых, все на сайте должно быть стабильно, в едином духе. К примеру:

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

Во-вторых, страница должна вызывать доверие и создавать правильное впечатление у пользователя:

на посадочной нужны контакты: адрес, номера телефонов, e-mail, формы обратной связи, заказ обратного звонка. По возможности средств связи должно быть несколько: кому-то удобнее звонить, кому-то писать — не ограничивайте аудиторию;
реальные фотографии привносят больше доверия, нежели стоковые. Это правило касается не только товаров и услуг компании, но и например, фото менеджера. Пусть он и не модель Calvin Klein, пользователю удобней видеть, с кем он общается. Стоковые Джимы и Мэри — это не «нейтрально» по шкале привлекательности, это «очень негативно»;
чтобы показать отличия от конкурентов, используйте краткие иллюстрированные факты — и пишите не о себе, а о том, чем вы можете помочь клиенту. Например, «гарантия 5 лет», «полный цикл работ»;
если делаете отзывы, просите реальных клиентов писать их, но не заказывайте у копирайтеров. Сложно навскидку вспомнить что-то, что хуже фейковых отзывов. Добавляйте к ним ссылки на профили клиентов в Facebook, фотографии заказчиков.

Элементы страницы должны быть выдержаны в одном стиле со всем сайтом и вызывать доверие пользователя — и не должны спорить между собой.

Как оформить первый экран

Above the fold — это «первый экран», та часть страницы, которая видна после загрузки без прокручивания вниз. И она самая важная, потому что с нее начинается формирование пользовательского мнения. Как и в человеческой психологии, пользователю достаточно 3-5 секунд на первое впечатление и понимание, соответствует сайт его запросу или нет.

Исходя из этого, на первом экране обязательно должны быть:

логотип и название компании;
предложение;
меню.

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

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

Давайте на примерах.

Смотрите, это главная страница сайта Make Up.

Что мы на ней видим?

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

↓

Второе — крупная картинка, на ней акционное предложение — это плюшка пользователю.

↓

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

Это — простой бизнес, знакомый пользователям. Его не надо объяснять прямо — это косвенно делают название и меню. Соответственно, общее предложение (вид деятельности) бизнеса вообще не нужно указывать на первом экране.

А вот второй пример. Есть бизнес WOW! TOUCH по продаже бьюти-боксов. Что такое бьюти-боксы? Да черт знает, какие-то коробки красоты. Или красивые коробки. Это незнакомый пользователю продукт, значит, его надо объяснить. Как компания делает это на первом экране, чтобы дать общее понимание пользователю?

При помощи текста и видеофона.

Фраза в «В коробке WOW! TOUCH косметика…» сразу отвечает на вопрос «что это?» — косметика. А видеофон показывает, что за косметика и почему именно «бокс», «коробка», а не просто косметика.

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

Первый экран должен отвечать на вопрос «Что это за компания и что она предлагает»

Как наладить контакт

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

I. Интуитивно-понятный интерфейс

На самом деле вот этот интуитивно-понятный интерфейс — это набор шаблонов, выработанный годами, где больше не требуется ничего придумывать. Нужна корзина? Смотри на правый верхний угол. Поиск? В шапке сайта или боковой панели. Форма обратной связи? Загляни на страницу контактов. Подробная информация о товаре в каталоге? Кликни на фото — откроется.

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

II. Подсказка направлений

Сайт должен подсказывать пользователю, как и куда двигаться дальше:

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

Также важно расставить подсказки на «развилках» — тех местах, где у пользователя более 1 варианта действий. Подсказывайте самый выгодный путь и не делайте варианты равноценными — возможность выбора не всегда играет вам на руку, на самом деле.

К примеру, такая ситуация с тарифными планами.

У компании Юздеск сразу выделяется один тариф — самый дешевый для покупателя и самый выгодный для компании. Наглядно, не отвлекает, сразу видно, куда смотреть:

А вот у Lifecell в таблице с тарифами ничего не выделено:

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

Вывод: не будьте как Lifecell, будьте как Юздеск.

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

К примеру, сервис Content-Watch предлагает ручную проверку текстов на уникальность: копируешь текст в поле, кликаешь кнопку, получаешь результат. Таблицы тарифов на сайте очень простые и не нуждаются в подсказках: пользователь сразу видит количество предлагаемых проверок в день, оценивает свои масштабы работы и выбирает нужный вариант. В таком случае можно делать тарифы равноценными по оформлению — человек выберет сам.

III. Дозировка предложений

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

“На посадочной странице одна цель — и должно быть только одно место для клика. Избегайте дополнительных ссылок, куда может захотеть уйти пользователь, избегайте дополнительных навигационных панелей”

Как не спугнуть потенциального клиента

Если человек зашел на сайт, значит, он заинтересован, но не факт, что уже готов на заказ. Тут нужно действовать аккуратно и не давить.

Что заставляет посетителей бежать с вашего сайта:

назойливый поп-ап — признак лохотрона, да и попросту бесит;
сложная регистрация: в норме достаточно имени и номера телефона; а если нет, можно разбить регистрацию на несколько этапов, медленно подводя пользователя к самым «трудозатратным» полям;
жесткие рамки ввода информации: ввод номера телефона исключительно в формате (+380…) или четкая последовательность «Фамилия → Имя» и ни в коем случае не наоборот;
отсутствие «указательных знаков»: длительную загрузку страницы скрасит полоса загрузки или отображения процентов выполнения задачи; после действия хочется видеть оповещения «Товар добавлен в корзину», «Изменения сохранены», «Ваш заказ принят и обрабатывается. Ожидайте звонок в ближайшее время» и т.д.

Чек-лист качественной посадочной страницы

Какой должна быть посадочная, чтобы работать на бизнес, а не против него? Мы собрали короткий чек-лист для проверки.

Информативность:
1. есть данные о бизнесе;
2. информация про продукт (товар/услугу);
3. выгоды компании перед конкурентами;
4. отзывы;
5. контакты и соцсети компании.
Коммуникация с клиентом:
1. везде используется единый стиль общения, обращения, узнается «голос компании»;
2. компания говорит про клиента и пользу для него, а не про себя;
3. контент говорит на языке клиентов (без непонятного сленга и аббревиатур).
Ценность — чем продукт важен, принципиально нов, почему его стоит заказать.
Функциональность:
1. навигация удобная, пользователю понятно, куда двигаться дальше;
2. регистрация/авторизация не слишком сложная;
3. есть кнопка обратного звонка;
4. страница адаптирована для мобильного просмотра;
5. страница загружается быстро.
Конверсии:
1. есть СТА;
2. есть возможность совершить конверсию сразу или приблизиться к своей цели.
Визуальная привлекательность:
1. цветовая гамма в фирменном стиле;
2. все элементы дизайна в одном стиле: кнопки одной формы и т.д.;
3. использованные изображения не нарушают авторские права, среди фото нет стоковых;
4. все элементы дизайна несут пользу и не используются ради номинального присутствия на странице;
5. информация легко считывается, шрифт не меньше 12 кегля, цвет фона и текста контрастный, важная информация написана печатным шрифтом, не рукописным.
6. не больше трех шрифтов на странице.

Фронт-часть

Сегодня разберем 4 этапа разработки фронт-части:

Верстка: написание html-, css- и javascript-кода в соответствии с макетом, который мы сделали в прошлых частях, создание дополнительного функционала и эффектов.
Адаптация под мобильные устройства и планшеты.
Проверка всех активных элементов: меню, форм, ссылок, кнопок.
Оптимизация: повышение скорости загрузки сайта за счет уменьшения размера медиафайлов, файлов скриптов и стилей.

Верстка

В качестве примера будем рассматривать wowtouchbox.com и обсудим 3 важных элемента, которые сейчас реализованы на сайте:

поэкранная навигация;
видеофон на первом экране;
слайдер с отзывами.

Пройдемся по каждому.

Поэкранная навигация

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

При этом на сайте есть боковая навигация для быстрого перехода к конкретному блоку.

Навигация реализована при помощи плагина fullPage, который также дает возможность отслеживать действия со скроллом и адаптивен для разных экранов.

Видеофон на первом экране

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

Впрочем, вместе они работают еще лучше: ролик можно разместить на заднем плане, а на передний добавить слоган/СТА и активную кнопку.

Примеры использования видео для фона у других компаний мы рассказывали в Части 2 гайда по CRO: разработка посадочной страницы с хорошим UX.

Важно! «Тяжелые» видео замедляют загрузку страницы и стабильность воспроизведения.

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

Рекомендации по использованию медиафайлов:

Выбирайте ролики с небольшим размером и длительностью.
Лучше использовать формат mp4 или avi.
Чем больше разрешение — тем лучше, тем качественней будет выглядеть на больших экранах.

В нашем случае длительность видео была больше 40 секунд, а размер около 30 Мб. Самые простые варианты: сократить длину (= потерять информацию) или уменьшить размер (= потерять качество). Если вы не ищете легких путей, ищите способы дальше. Так сделали и мы.

В процессе опробовали 2 подхода:

Загружать видео с самого сайта — оно будет моментально загружаться почти с любым интернетом, если размер файла не превышает 10 Мб.
Загружать видео с помощью встроенного плеера YouTube. Подойдет, если видео весит больше 10 Мб и потери качества недопустимы. Плеер достаточно гибкий в настройке, с прелоадером, может проигрывать видео без подвисаний даже с низкой скоростью подключения.

Совет! Настройте показ красивого фирменного баннера вместо стандартного прелоадера на черном фоне.

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

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

Реализация слайдера

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

Для реализации этого лучше всего подошел Slick Slider благодаря встроенной возможности синхронизировать сразу несколько слайдеров. В данном случае их три.

Адаптивность

Сейчас мобильный трафик лидирует — большинство пользователей будут пользователями смартфона/планшета. Поэтому после верстки основной версии приходит время делать мобильную. Плюс, поисковики лучше ранжируют дружелюбные к пользователю сайты, а Google и вовсе внедряет политику «Mobile-First Indexing», которая выше оценивает сайты с мобильной версией.

К ней есть 2 требования:

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

Чтобы мобильная версия была удобной и быстрой, мы используем адаптивные сетки и медиазапросы, делаем контент компактнее и оптимизируем медиафайлы.

Для страниц блога, кроме адаптивности, мы используем AMP — это технология ускоренных мобильных страниц от Google, которая создает страницу на основе HTML для максимально быстрой загрузки на телефонах и других мобильных устройствах.

Как это работает: обычная страница размечается специальными тегами — их количество и функционал строго ограничены; javascript-библиотеки в их числе. АМР-страницы сохраняются в кэше Google и при соединении загружаются на устройство пользователя прямо оттуда. Статьи с AMP ранжируются выше других.

Вот как это выглядит: слева AMP-версия, справа — обычная.

Как видите, AMP-версия проще: без визуальных эффектов с заголовком и главной картинкой, со стандартным шрифтом одного цвета.

Ко всем таким страницам Google добавляет иконку AMP в поисковой выдаче.

Решение подойдет для информационных сайтов, блогов, онлайн-изданий и журналов — то есть там, где нужно максимально быстро показать контент в доступной форме, а не впечатлить дизайнерскими решениями. Также используются для статических каталогов без фильтров. Так, к примеру, делает e-Bay.

Плагины AMP есть под разные CMS — пишите в комментариях, если вам интересно прочесть полномасштабный обзор, и мы сделаем его в следующий раз 🙂

Тестирование и отладка

Фокус при тестировании — на меню, формах, ссылках и кнопках. Они должны корректно работать в разных браузерах и на мобильных устройствах. Автоматические системы проверки позволяют протестировать только часть функционала. А проверить все, включая поведение пользователя на сайте, можно только в ручном режиме.

Чек-лист по тестированию включает 4 этапа:

юзабилити;
совместимость;
мобильная версия;
бета-тестирование.

Функциональное тестирование

Ссылки должны работать, переправлять по правильному пути; ссылки на сторонние сайты должны открываться в новой вкладке.
На полях в формах ставим маски (позволяют избежать ошибок при вводе данных), обязательные поля проверяем на заполнение. Данные с формы поступают, формы работают. Если работаете через Chrome, советуем плагин Form Filler для автозаполнения форм при проверке — чертовски экономит время.
Дополнительный функционал, который участвует в бизнес-логике сайта: регистрация, авторизация, добавление в корзину товара, оформление заказа — каждый этап должен быть проверен на предмет ошибок.

Usability-тестирование

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

Также включает:

Навигационное тестирование: все страницы понятны и просты в использовании; кнопки, ссылки, формы рабочие. Главное меню всегда доступно и удобно.
Тестирование контента: контент информативен и написан без ошибок; изображения нормального качества и корректно выводятся.

Тестирование совместимости (конфигурационное тестирование)

Тестирование совместимости выполняется для проверки работы сайта при различных программных и аппаратных конфигурациях:

конфигурация операционной системы. Кросс-платформенное тестирование позволяет оценивать работу при разных ОС (как десктопных, так и мобильных): Windows, iOS / Mac OS, Linux, Android и т.д.;
конфигурация браузера. Кросс-браузерное тестирование помогает проверить правильность работы сайта в разных конфигурациях браузера: Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari и т.д.

Тестирование мобильной версии сайта

Сайт должен быть быстрым и удобным для мобильных устройств с разными размерами экрана.

Нужно проверить следующее:

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

Бета-тестирование

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

Требования к готовому продукту

№1. Валидация проверена через валидатор W3C. Все ошибки типа «error» должны быть исправлены, «warning» по возможности исправлять, но не они критичны.

№2. Все страницы сайта быстро загружаются на всех типах устройств. Проверяйте через PageSpeed Insights: оценка должна быть в «зеленой зоне».

№3. Изображения оптимизированы при помощи TinyPNG и не влияют на скорость загрузки.

Остались вопросы или хотите разобраться в чем-то детальнее? Ставьте ♥, пишите в комментарии — разберемся!