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

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

16 августа 2021
~ 15 минут на чтение
Статья была опубликована на vc.ru
Елена Пономарева
ведущий дизайнер Uplab
Если вы пытаетесь убедить кого-то купить машину, то он точно захочет узнать, как она выглядит. А это значит, что ваш сайт будет в значительной степени полагаться на визуальные элементы.
Веб-сайты, посвященные продаже автомобилей обычно выглядят немного иначе, чем типичный интернет-магазин. Автобренды стараются передать через экран ощущение комфорта, роскоши и безопасности от пользования автомобилем.

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

1. Минимализм, максимальное упрощение и избавление от лишних деталей

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

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

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

Большое внимание на сайте уделяется будущему — компания презентует автомобили грядущего, которые сохраняют узнаваемость дизайна и дополняются футуристичными деталями, совсем как из фантастических фильмов.
Электромобили Volkswagen
Электромобиль Volkswagen
Kia недавно обновил фирменный стиль. Раньше у них был очень лаконично использован корпоративный красный цвет в дизайне сайта — для надписей и деталей на фото. Это помогало создать нужное настроение и поддержать целостность дизайна.
Старый фирменный стиль kia
Сейчас сайт сменил дизайн, но остался таким же стильным. По-прежнему сделан акцент на качественные яркие фотографии. В основу новой концепции легла идея единства противоположностей, которая используются как для дизайна автомобилей, так и для создания рекламных образов.
Новый фирменный стиль kia
Еще одна ключевая идея бренда — движение, которое вдохновляет на творчество, развитие и рост. Раскрыли идею на сайте с помощью «залипательной анимации».

В разделе про новый бренд пояснили, что сущность движения в природе передается художниками с помощью изменения цвета в зависимости от скорости. Чтобы проиллюстрировать этот принцип, KIA показали с помощью разного цвета и скорости движения частиц природные стихии. На их цикличные движения можно смотреть бесконечно.
Анимация со стихиями на сайте KIA
Посмотреть анимацию в движении можно на этой странице.
Отражением этой идеи стало представление на главной разных моделей автомобилей в цветах и оформлении, которые ассоциируются со стихией воды, земли и воздуха и погружают зрителя в нужную атмосферу.
Новый Kia K5
У Volvo тоже использован минималистичный подход, при этом для каждого автомобиля выбран свой эмоциональный контекст. За счет игры света, контраста и гармоничного расположения элементов на фото удается создать эффектную картинку.

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

2. Сервисный дизайн

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

На ключевых страницах сайта как правило сокращают описания технических составляющих автомобилей, оставляют только концентрированный и емкий опыт. У Volkswagen в начале персональных страниц автомобилей представлено общее описание и визуалы, сразу после них блок с сервисами.
Блок с описанием преимуществ автомобиля Volkswagen Transporter 6.1
Блок с описанием преимуществ на странице автомобиля Volkswagen Transporter 6.1
Блок с цифровыми сервисами автомобиля Volkswagen Transporter 6.1
Блок с цифровыми сервисами на странице автомобиля Volkswagen Transporter 6.1
Еще пример блока цифровых сервисов на сайте Audi, уже в сегменте личных автомобилей.
Онлайн-сервисы Audi
Представление преимуществ может быть не только в виде текстового описания. Например, на сайте Fiat каждое преимущество автомобиля в зависимости от типа и важности презентовано по-разному: схематические рисунки, фото, изображение в формате 360° и другие интерактивные элементы. Это помогает управлять вниманием пользователя.
Fiat онлайн-инструменты

3. Форма восприятия информации

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

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

4. Онлайн-конфигураторы автомобилей

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

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

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

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

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

5. Использование VR и AR технологий

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

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

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

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

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

Для дилеров тоже есть плюсы. С технологией VR необязательно арендовать большие площади. Теперь можно оборудовать виртуальные выставочные залы в простом офисном помещении.
Шоурум виртуальной реальности
Выставочный зал виртуальной реальности (Источник)
Например, Audi использует технологию иммерсивной виртуальной реальности в своих дилерских центрах, чтобы покупатели получили реалистичные впечатления от использования индивидуально настроенного автомобиля. Клиенты могут попробовать то, что собираются купить и охотнее соглашаются на покупки.

Решение Audi VR позволяет клиентам видеть свои автомобили на 360° градусов со световыми и звуковыми эффектами. Кроме того, они могут оценить вид автомобилей в разных условиях, например, в темное время суток.
Audi VR Experience
Компания Volvo тоже создала виртуальный тест-драйв. С помощью VR-гарнитуры и смартфона можно испытать внедорожник XC90 в сельской местности перед покупкой.
Volvo Virtual Reality

6. Видео и панорамы

Пока технология VR не настолько распространена, чтобы каждый пользователь мог у себя дома просматривать автомобили мечты. Все-таки она только начала внедряться и есть даже не во всех автосалонах. Но бренды и дилеры автомобилей нашли способ приблизиться к этому опыту и используют на своих сайтах впечатляющие видео и панорамы — мощный инструмент повышения конверсии и продаж.
Исследование Gearshift, IPSOS совместно с Google о просмотре онлайн-видео
Исследование Gearshift, IPSOS совместо с Google о продаже панорам
У Porche на страницах автомобиля использовано много видео и интерактива. Но главная фишка — использование панорамы в 360°со сменой уровня камеры. Также с машиной можно повзаимодействовать: включить и выключить фары, открыть багажник.
Porche Cayenne S 360
Крутой тур по интерьеру автомобиля предлагает Toyota. Это хорошая возможность рассмотреть все детали и ощутить себя владельцем автомобиля.
Toyota RAV 4 обзор салона 360
Еще один потрясающий пример панорамной презентации предлагает Volkswagen в своем 3D-шоуруме. Там показаны новые модели Volkswagen Polo и Volkswagen Taos.
Volkswagen Polo и Volkswagen Taos
Volkswagen Taos

7. Анимация

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

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

8. Дизайн-системы автобрендов

У автопроизводителей, как правило, есть основной сайт бренда и множество дилеров по всему миру, которые тоже могут делать свои сайты. В такой ситуации очень уместно использование дизайн-системы.
Дизайн-система — это целостный визуальный язык и его техническое отражение в виде библиотеки компонентов на едином репозитории, а также сопутствующих дизайнерских шаблонов. Она помогает достичь согласованности дизайна и кода, разрабатывать продукт быстрее и эффективнее. Каждому компоненту или шаблону дизайна соответствует определенный шаблон кода. В результате дизайн может масштабироваться параллельно с разработкой.
Дизайн-система — инвестиция в повышение эффективности разработки продуктов и их качества. В чем плюсы применения этого подхода на проектах:
1
Увеличение скорости и более быстрый выход на рынок. Доступный в одном месте набор инструментов позволяет сделать процесс разработки более гибким, что ускоряет внедрение без ухудшения качества. В 1,5−2 раза сокращает время выхода на рынок продуктов. На 30−50% сокращаются расходы на разработку новых цифровых продуктов.
2
Согласованность и последовательность пользовательского опыта. Это значит, что пользователи быстрее осваивают ваш UI, у вас выше конверсия, больше прибыли и лучше показатели метрик.
3
Экономия времени и денег. Дизайнеры и разработчики не задают избыточные вопросы, минимизируется время на обсуждения и разработку одноразовых решений. Не выполняют повторяющуюся работу, а многократно используют уже созданные элементы интерфейса.
В основе дизайн-системы Audi лежат компоненты, модули и анимации. На сайте подробно описаны правила использования сущностей дизайн-системы, ведется история обновлений. Компоненты представлены как визуально, так и в коде (также есть репозиторий на GitHub).
Дизайн-система Audi
Дизайн-система немецкого производителя грузовых автомобилей и автобусов MAN состоит из стайл-гайдов и библиотеки компонентов. С дизайн-системой работают более 500 пользователей и более 50 партнеров. Ежегодно создается более 100 проектов. Вся информация хранится в закрытом доступе на бренд-портале.
Дизайн-система MAN
Крупные автомобильные бренды постоянно внедряют инновации как в сами продукты, так и в процесс их продаж. Подобно тому, как в машинах появляются умные компьютеры и различные системы для безопасности, комфорта и легкости управления, так на сайтах появляются функции, которые облегают жизнь клиента по выбору и покупке прямо в режиме-онлайн. Поэтому смело ориентируйтесь на находки этих компаний для развития своего клиентского сервиса, бренда и увеличения продаж.

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

Успешных проектов и высоких конверсий! ❤
Читайте по теме
1327
Оцените статью
(3.3)

Поделитесь материалом с друзьями и коллегами:

Комментарии к статье

Другие статьи в блоге
Статьи ~ 25 минут на чтение

Как сделать клиента лояльным с помощью сайта? 7 стратегий с примерами

613
31 августа 2021
Статьи ~ 15 минут на чтение

6 приемов с Awwwards, которые помогут вашему сайту выделиться

2079
06 августа 2021
Статьи ~ 20 минут на чтение

Как бизнесу продавать себя через обучающие вебинары?

2844
30 июля 2021
Статьи ~ 45 минут на чтение

Как подготовить сайт к участию в конкурсе?

2434
28 июля 2021
Статьи ~ 22 минут на чтение

Для чего нужна анимация на сайте и как она работает?

2985
22 июля 2021
Статьи ~ 15 минут на чтение

5 фишек front-end, которые сделают ваш интернет-магазин прибыльным

4273
05 июля 2021
Статьи ~ 40 минут на чтение

Чему стоит поучиться у маркетплейсов владельцам интернет-магазинов?

12261
30 июня 2021
Статьи ~ 25 минут на чтение

14 главных трендов в e-commerce в 2021 году

8240
11 июня 2021
Статьи ~ 20 минут на чтение

Страница «О компании» на сайте: нужно ли уделять ей много внимания?

7911
02 июня 2021
Статьи ~ 20 минут на чтение

Проектный офис Uplab: как мы управляем проектами и выстраиваем отношения с клиентами

7907
24 мая 2021