Пример хорошего сайта: структура и логика podbor-auto.com

В статье «5 компонентов корпоративного сайта» я описал общие принципы, которыми стоит руководствоваться при его создании.

В этой статье я на примере покажу логику размещения и взаимосвязь элементов.

Пример хорошего сайта – http://podbor-auto.com/, который я в еще в 2011 году создал для продвижения услуг собственной компании по подбору автомобилей на заказ:

Цветовая гамма: светло-зеленый и оранжевый.

Остановились на этих двух цветах, поскольку исследования в области UX делят цвета на приятные для глаза, нейтральные и «тревожные». Используемые цвета относятся к первой категории, решая задачу повышения доверия к компании.

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

Оформление шапки: логотип, «стрелочка» и контакты:

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

Блок с баннерами: в формате слайдер:

Делает сайт более «живым» + быстро дает пользователю несколько дополнительных аргументов в пользу продвигаемой компании в сравнении с конкурентами.

Главный экран: описание услуги, цены, форма заявки:

В блоке с подробным описанием услуги указывается, что мы предлагаем, и сразу же указаны расценки, чтобы отсечь нецелевую аудиторию – тех, кто хочет получить эту услугу дешевле.
Так же пользователь получает выбор из нескольких вариантов оставления заявки: на сайте, письмом, или по телефону.
Форма заявки составлена в двух вариантах: Оформить заказ / Задать вопрос, потому что многим заказчикам такой услуги комфортней начать общение с уточнения каких-то деталей.

«Задать вопрос» — подсознательно менее обязывающая форма, чем «Оставить заказ», соответственно такая форма заявки призвана повышать конверсию из посетителей в тех, кто начал общение с компанией по возможному заказу.

Второй экран: формы договора и заявки, схема работы и выполненные заказы:

Подбор автомобиля на заказ – сложная услуга, состоящая из нескольких стадий. Большинство заказчиков просят образец договора и уточняют, как выглядит общая схема работ.
Для упрощения коммуникации эта информация выложена на сайт сразу после прайс-листа. Это пример структуры правильного сайта.
Чтобы уместить на пространстве второго экрана максимально полную информацию о том, как выстроена работа по подбору, использован элемент, который разворачивает пояснение к пункту основного списка при наведении на него курсора:

Справа пользователь видит ленту выполненных заказов, которая выполняет роль фактора, повышающего доверие к компании.

При переходе в ленту он видит каждый заказ в формате карусели фотографий подобранных авто и описания заказа в формате «Задача / Результат»:

Третий экран: описание дополнительных преимуществ в блоках «Кроме того» и «Почему мы лучше»:

Решает задачу убеждения пользователя воспользоваться именно нашими услугами, а не услугами конкурентов, объясняя, что еще он может получить у нас в дополнение к основной услуге.

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

Для поисковой оптимизации сайт содержит четыре контентных блока: «Все заказы», «Новости и статьи», «Вопрос-ответ» и «Пособие-инструкция «Покупаем автомобиль с пробегом»».

За счет постоянного пополнения первых трех блоков и уникальности четвертого (это книга, написанная создателем сайта) решается задача подъема сайта по среднечастотным и низкочастотным поисковым запросам.

Задачу повышения трастовости так же решает раздел сайта «Наши мастера»:

Примеры из статьи можно смело брать в работу интернет-маркетологу при решении задачи «как сделать качественный сайт»