Структура лендинга и рекомендации по улучшению юзабилити

Ниже 3 презентации обязательны для изучения. Были подготовлены специально отделом дизайна для нас. 

1.1 Структура лендинга

1.2 Мобильная адаптация лендинга

1.3 Как ставить задачи дизайнеру

Проверить скорость загрузки сайта можно тут - https://pagespeed.web.dev/analysis

Список доменов наших клиентов: https://docs.google.com/spreadsheets/d/1v5Hzixq6UfXvpiUvOtc34nGtJL1K2o3SpAq_nMw6Fjc

Когда нужно:

1. Проанализировать и сравнить , что можно доработать на твоем лендинге
2. Показать дизайнерам на примере, что нравится
3. Сравнить мобильные версии сайтов
4. Получить вдохновение и набить глаз на хорошие примеры Обращайся к этому файлу, находи несколько лендингов по твоей марке и изучай.

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

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

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

В ней расположено:

1. Лого марки, лого дилера - обязательные пункты от импортера, делаются по брендбуку.
2. Адрес - для удобства, но это не так важно.
3. Номер и заказать звонок - обязательные пункты с точки зрения трафика. Самый важный элемент для нас. Клиент должен иметь возможность увидеть из любого места лендинга номер, по которому он может позвонить. Если ему не удобно звонить самому, рядом расположена форма “Заказать звонок”, чтобы была возможность оставить заявку.
4. Навигация по сайту - при нажатии клиент может перейти сразу к нужному блоку. Не обязательный пункт, часто его не делаем.

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

Баннер, заголовок и таймер должны занимать весь первый экран. Таймер может не входить в первый экран, а располагаться ниже. Но желательно, чтобы был на первом экране.  

На баннере обычно отображаем все модели, которые расположены в карточках авто. Пользователь должен войти на сайт и сразу увидеть на первой экране автомобиль, которым он заинтересовался. Бывает модельный ряд слишком большой, чтобы разместить все автомобили на главном баннере.  Адекватно дизайнеры могут отобразить 5 автомобилей. Если моделей больше, отображаем основные трафикообразующие модели в марке (модели, которыми интересуются большее количество пользователей и по ним больше продаж). 

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

Основные правила, что пишем в хорошем заголовке:

1. Ограничение по времени: Только с 06.05 по 12.05 (даты ставим на автозамену с понедельника по воскресенье. Попроси программистов, они умеют). Или Только до 12.05 (дата конца недели). Это дает понять пользователю, что лучше оставить заявку сейчас и узнать подробнее, такие условия будут не всегда и до конца недели она закончатся.
2. Кричащий текст: Финальное снижение цен, Грандиозные выгоды, Неделя продаж, Рекордные условия, Глобальное снижение цен, Дни рекордных продаж, Без наценки дилера.
3. К кричащему заголовку добавляем самую большую выгоду на модели 1.500.000р или -30% от цены.
4. Можно добавить 1-2 самых жирных УТП: зимние шины в подарок.
5. Призыв к действию или фраза подталкивающая к действию: Успейте зафиксировать условия, Таких условий больше не будет, Подробности по телефону, Успейте купить последние автомобили, Ограниченная партия - не обязательно, если помещается.

Хорошие примеры главных баннеров:

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

Хорошие примеры счетчиков времени:

Карточка авто должна содержать следующие блоки:

1. Выгода, которая транслируется под каждую модель
2. Преимущества. Например, подарки (шины сигнализация), Обслуживание авто (ТО)
3. Кнопки действий
4. Живые фото (не обязательно)

Основная суть карточки авто - это показать пользователю почему нужно купить у нас эту модель, а не у другого дилера. За это отвечают выгоды и УТП. “Почему купить у этого дилера?” “У нас выгод больше, а еще зимние шины подарим и ПТС есть, да и сигнализацию за наш счет”. Если у другого дилера такого количества выгод нет, клиент с большей вероятностью заинтересуется и оставит заявку на нашем сайте.

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

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

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

Основная максимальная выгода, указываем крупным размером. 

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

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

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

Блок нужен, чтобы пользователь вовлекся и оставил заявку. Он ждет сразу стоимость, когда ему перезванивает колцентр, а менеджер из колцентра говорит: “Здраствуйте, вы оставили заявку на обратный звонок. Какой у вас вопрос?”, можно услышать негатив: “Я вам оставил конкретные данные, смотрите что я заполнил”. Колцентру данные из этих форм не передаем, но даже если бы передавали, скрипт разговора никто бы не переписывал - передача этих данных будет бессмысленна.

Блок является не обязательным, размещение по желанию. При размещении информации про кредит нужно быть аккуратным. Правительство ввело штрафы, если не выполняем требования к размещению такого текста. Основной принцип, которого должен придерживаться: не пиши % ставку. Кредит от 0,01% - такое использовать нельзя.

Можешь использовать просто слово “кредит” “рассрочка” “выгодный кредит”, “От 330 руб/день**”.**

Более подробно можно почитать тут - https://yandex.ru/support/direct/moderation/categories/finance-sale.html.

Обязательно проверяй, как выглядит ЛП в мобильной версии. Мобильный трафик - это 60-70% нашего трафика. Даже не настолько важно, как адаптирован лендинг под дестоп, как важно адаптировать его под мобильные устройства. Обычно дестопные версии дизайнеры всегда делают хорошо, т.к. это основной макет для согласования с клиентом. Задача контестника довести до идеала мобильную версию вместе с дизайнером после верстки программистов.

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

Инструкция, как проверить мобильную версию сайта:

Fav icon и тай (Фав икон) - иконка с маркой машины.

Тайтл - название сайта (JAC|АВТОМИР - официальный дилер)

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

Как правило 1 числа тяжелые как у нас так и у клиента. Пришлют дисклеймер в лучшем случае 3-5 числа. Лучше путь даты обновятся сами, далее дисклеймер как пришлют - поправишь.

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

Пример: https://avtomir-jac-blsh.ru/policy.php

и политика в отношении персональных данных внизу лендинга https://avtomir.ru/disclaimer/politic/