Обзор сайтов автобрендов: 8 ключей к сердцу клиентов

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

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

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

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

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

В тренде:

• ограниченная или монохромная цветовая палитра,
• только существенные элементы и функции,
• крупные, качественные фотографии,
• динамическая типографика.

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

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

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

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

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

Еще одна ключевая идея бренда — движение, которое вдохновляет на творчество, развитие и рост. Раскрыли идею на сайте с помощью «залипательной анимации».

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

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

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

Например, электромобиль Volvo XC40 Recharge продемонстрирован с помощью больших имиджевых фото, на котором красуется сама машина в сопровождении хозяйки — активной молодой горожанки. Героиня сюжета и цветовая гамма намекают нам на то, что этот автомобиль идеально подойдет для женщин. Также на странице много видео-контента и анимаций, которые помогают демонстрировать преимущества, создавать настроение и удерживать внимание пользователя.

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

На ключевых страницах сайта как правило сокращают описания технических составляющих автомобилей, оставляют только концентрированный и емкий опыт. У Volkswagen в начале персональных страниц автомобилей представлено общее описание и визуалы, сразу после них блок с сервисами.

Еще пример блока цифровых сервисов на сайте Audi, уже в сегменте личных автомобилей.

Представление преимуществ может быть не только в виде текстового описания. Например, на сайте Fiat каждое преимущество автомобиля в зависимости от типа и важности презентовано по-разному: схематические рисунки, фото, изображение в формате 360° и другие интерактивные элементы. Это помогает управлять вниманием пользователя.

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

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

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

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

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

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

Сегодня уже более 90% пользователей конфигурируют авто в онлайн на сайте производителя, в приложении или используя брошюру. А в дилерский центр обращаются лишь за тест-драйвом или чтобы окончательно определиться с покупкой.

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

Но технологии не стоят на месте. И многие бренды и дилеры внедряют дополненную реальность в свои процессы продаж для демонстрации автомобилей.

Уже сейчас, по данным Nielsen, около половины потребителей (51%) готовы использовать технологии дополненной и виртуальной реальности (AR/VR) для оценки продуктов. А в будущем 89% потребителей откажутся от физического шопинга, если у них в распоряжении будет девайс или технология, которая полностью воссоздаст опыт посещения магазина (включая запахи, возможность пощупать товар и так далее).

Для автодилеров инвестирование в технологии VR и AR — это то, к чему нужно присмотреться.

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

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

Для дилеров тоже есть плюсы. С технологией VR необязательно арендовать большие площади. Теперь можно оборудовать виртуальные выставочные залы в простом офисном помещении.

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

Решение Audi VR позволяет клиентам видеть свои автомобили на 360° градусов со световыми и звуковыми эффектами. Кроме того, они могут оценить вид автомобилей в разных условиях, например, в темное время суток.

Компания Volvo тоже создала виртуальный тест-драйв. С помощью VR-гарнитуры и смартфона можно испытать внедорожник XC90 в сельской местности перед покупкой.

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

У Porche на страницах автомобиля использовано много видео и интерактива. Но главная фишка — использование панорамы в 360°со сменой уровня камеры. Также с машиной можно повзаимодействовать: включить и выключить фары, открыть багажник.

Крутой тур по интерьеру автомобиля предлагает Toyota. Это хорошая возможность рассмотреть все детали и ощутить себя владельцем автомобиля.

Еще один потрясающий пример панорамной презентации предлагает Volkswagen в своем 3D-шоуруме. Там показаны новые модели Volkswagen Polo и Volkswagen Taos.

Анимация играет ключевую роль во всех современных интерфейсах. Интерактивные элементы помогают в навигации по сайту или направляют его дальнейшие шаги. Они также помогают объяснять некоторые функции автомобиля.

У MAN, например, анимация используется для наглядного пояснения функции Ассистента экстренного торможения. А если погулять по сайту, то можно обнаружить и анимации, поясняющие действия других ассистентов.

Подробно об анимации мы говорили в наших статьях:

• «6 приемов с Awwwards, которые помогут вашему сайту выделиться»
• «Для чего нужна анимация на сайте и как она работает?»

У автопроизводителей, как правило, есть основной сайт бренда и множество дилеров по всему миру, которые тоже могут делать свои сайты. В такой ситуации очень уместно использование дизайн-системы.

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

• Увеличение скорости и более быстрый выход на рынок. Доступный в одном месте набор инструментов позволяет сделать процесс разработки более гибким, что ускоряет внедрение без ухудшения качества. В 1,5-2 раза сокращает время выхода на рынок продуктов. На 30-50% сокращаются расходы на разработку новых цифровых продуктов.

• Согласованность и последовательность пользовательского опыта. Это значит, что пользователи быстрее осваивают ваш UI, у вас выше конверсия, больше прибыли и лучше показатели метрик.

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

В основе дизайн-системы Audi лежат компоненты, модули и анимации. На сайте подробно описаны правила использования сущностей дизайн-системы, ведется история обновлений. Компоненты представлены как визуально, так и в коде (также есть репозиторий на GitHub).

Дизайн-система немецкого производителя грузовых автомобилей и автобусов MAN состоит из стайл-гайдов и библиотеки компонентов. С дизайн-системой работают более 500 пользователей и более 50 партнеров. Ежегодно создается более 100 проектов. Вся информация хранится в закрытом доступе на бренд-портале.

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

А если вы хотите больше узнать о создании брендов и дизайн-систем, о разработке сайтов и их продвижении в современном мире диджитал, подпишитесь на наш блог.

Успешных проектов и высоких конверсий! ❤