Если вы пытаетесь убедить кого-то купить машину, то он точно захочет узнать, как она выглядит. А это значит, что ваш сайт будет в значительной степени полагаться на визуальные элементы.
Веб-сайты, посвященные продаже автомобилей обычно выглядят немного иначе, чем типичный интернет-магазин. Автобренды стараются передать через экран ощущение комфорта, роскоши и безопасности от пользования автомобилем.
В этой статье мы рассказываем про те тренды, которые применяются на сайтах зарубежных автобрендов. Эти приемы уже доказали свою эффективность и помогут передать нужные эмоции клиентам.
В этой статье мы рассказываем про те тренды, которые применяются на сайтах зарубежных автобрендов. Эти приемы уже доказали свою эффективность и помогут передать нужные эмоции клиентам.
1. Минимализм, максимальное упрощение и избавление от лишних деталей
Все внимание пользователей должно быть акцентировано на визуальном контенте и целевых действиях. Поэтому в современном дизайне используют все меньше декоративных элементов, различных цветов и прочих украшательств.
Все должно работать на то, чтобы пользователь получил нужные знания и впечатления о продукте.
В тренде:
Все должно работать на то, чтобы пользователь получил нужные знания и впечатления о продукте.
В тренде:
крупные, качественные фотографии,
•
только существенные элементы и функции,
•
ограниченная или монохромная цветовая палитра,
•
•
динамическая типографика.
Volkswagen в оформлении сайта использует один корпоративный цвет — синий. В основном, он использован в обложках некоторых блоков и в кнопках, которые выполнены в виде лаконичных ссылок. Весь цвет и яркость появляются на сайте за счет качественных фотографии, которые демонстрируют использование транспорта в естественных условиях его применения.
Свободное пространство вокруг фото помогает легче воспринимать контент: ничего не мешает сосредоточиться, удобно читать текст, глаз не цепляется за лишние детали. Все это создает ощущение порядка и оставляет приятное впечатление чистоты и свежести.
Большое внимание на сайте уделяется будущему — компания презентует автомобили грядущего, которые сохраняют узнаваемость дизайна и дополняются футуристичными деталями, совсем как из фантастических фильмов.
Большое внимание на сайте уделяется будущему — компания презентует автомобили грядущего, которые сохраняют узнаваемость дизайна и дополняются футуристичными деталями, совсем как из фантастических фильмов.
Kia недавно обновил фирменный стиль. Раньше у них был очень лаконично использован корпоративный красный цвет в дизайне сайта — для надписей и деталей на фото. Это помогало создать нужное настроение и поддержать целостность дизайна.
Сейчас сайт сменил дизайн, но остался таким же стильным. По-прежнему сделан акцент на качественные яркие фотографии. В основу новой концепции легла идея единства противоположностей, которая используются как для дизайна автомобилей, так и для создания рекламных образов.
Еще одна ключевая идея бренда — движение, которое вдохновляет на творчество, развитие и рост. Раскрыли идею на сайте с помощью «залипательной анимации».
В разделе про новый бренд пояснили, что сущность движения в природе передается художниками с помощью изменения цвета в зависимости от скорости. Чтобы проиллюстрировать этот принцип, KIA показали с помощью разного цвета и скорости движения частиц природные стихии. На их цикличные движения можно смотреть бесконечно.
В разделе про новый бренд пояснили, что сущность движения в природе передается художниками с помощью изменения цвета в зависимости от скорости. Чтобы проиллюстрировать этот принцип, KIA показали с помощью разного цвета и скорости движения частиц природные стихии. На их цикличные движения можно смотреть бесконечно.
Посмотреть анимацию в движении можно на этой странице.
Отражением этой идеи стало представление на главной разных моделей автомобилей в цветах и оформлении, которые ассоциируются со стихией воды, земли и воздуха и погружают зрителя в нужную атмосферу.
У Volvo тоже использован минималистичный подход, при этом для каждого автомобиля выбран свой эмоциональный контекст. За счет игры света, контраста и гармоничного расположения элементов на фото удается создать эффектную картинку.
Например, электромобиль Volvo XC40 Recharge продемонстрирован с помощью больших имиджевых фото, на котором красуется сама машина в сопровождении хозяйки — активной молодой горожанки. Героиня сюжета и цветовая гамма намекают нам на то, что этот автомобиль идеально подойдет для женщин. Также на странице много видео-контента и анимаций, которые помогают демонстрировать преимущества, создавать настроение и удерживать внимание пользователя.
Например, электромобиль Volvo XC40 Recharge продемонстрирован с помощью больших имиджевых фото, на котором красуется сама машина в сопровождении хозяйки — активной молодой горожанки. Героиня сюжета и цветовая гамма намекают нам на то, что этот автомобиль идеально подойдет для женщин. Также на странице много видео-контента и анимаций, которые помогают демонстрировать преимущества, создавать настроение и удерживать внимание пользователя.
2. Сервисный дизайн
В настоящее время акцент автомобильных брендов сместился на предоставление пользователям широкого набора онлайн-сервисов по выбору, покупке и обслуживанию автомобилей. Дизайн сайта должен быть ориентирован на то, чтобы использовать эти сервисы было удобно.
На ключевых страницах сайта как правило сокращают описания технических составляющих автомобилей, оставляют только концентрированный и емкий опыт. У Volkswagen в начале персональных страниц автомобилей представлено общее описание и визуалы, сразу после них блок с сервисами.
На ключевых страницах сайта как правило сокращают описания технических составляющих автомобилей, оставляют только концентрированный и емкий опыт. У Volkswagen в начале персональных страниц автомобилей представлено общее описание и визуалы, сразу после них блок с сервисами.
Блок с описанием преимуществ на странице автомобиля Volkswagen Transporter 6.1
Блок с цифровыми сервисами на странице автомобиля Volkswagen Transporter 6.1
Еще пример блока цифровых сервисов на сайте Audi, уже в сегменте личных автомобилей.
Представление преимуществ может быть не только в виде текстового описания. Например, на сайте Fiat каждое преимущество автомобиля в зависимости от типа и важности презентовано по-разному: схематические рисунки, фото, изображение в формате 360° и другие интерактивные элементы. Это помогает управлять вниманием пользователя.
3. Форма восприятия информации
Последние несколько лет идет тенденция на уменьшение контента на сайтах. У большинства пользователей при взаимодействии с цифровыми продуктами сформировалось «клиповое» мышление. Никто уже не читает длинные тексты, не разбирается долго, что и почему происходит. Картинки быстро меняются, и нужно успеть их все понять.
В связи с этим на первый план выходит эмоциональный опыт. Прежде всего важно создание впечатления — с автомобилем комфортно, безопасно, уютно, весело и т.д.
В связи с этим на первый план выходит эмоциональный опыт. Прежде всего важно создание впечатления — с автомобилем комфортно, безопасно, уютно, весело и т.д.
Фото с сайта Volkswagen
Для коммерческого транспорта характерны фотографии в реальных условиях применения. Изображены люди в рабочей одежде, происходит загрузка или разгрузка автомобиля. Такой подход помогает показать разные кейсы использования транспорта и этим привлечь разнообразные аудитории.
Фото с сайта MAN
Фото с сайта MAN
4. Онлайн-конфигураторы автомобилей
Официальные автосалоны обычно предлагают лишь несколько моделей автомобилей. Так что редко можно увидеть, как в реальности будет выглядеть ваша будущая машина, пока вы ее не получите. То же самое и с интерьером и экстерьером.
Предлагать больше машин в салоне дилеры не могут: площадь здания ограничена, дилеры стараются не хранить у себя много непроданных машин, поскольку автопроизводители регулярно выпускают рестайлинговые версии тех или иных моделей. Клиенты не захотят платить за устаревшую машину как за новую, а скидки приводят к снижению прибыли дилеров.
Поэтому почти все известные бренды автомобилей на своем сайте предлагают раздел с онлайн-конфигураторами. Этот инструмент позволяет клиентам настроить модель по своему желанию и увидеть, как автомобиль будет выглядеть в реальности.
Сегодня уже более 90% пользователей конфигурируют авто в онлайн на сайте производителя, в приложении или используя брошюру. А в дилерский центр обращаются лишь за тест-драйвом или чтобы окончательно определиться с покупкой.
У Volvo удобный и простой пошаговый конфигуратор, который позволяет выбрать цвет, диски, отделку салона и различные пакеты комплектации, например, для холодного климата или удобного паркинга.
Предлагать больше машин в салоне дилеры не могут: площадь здания ограничена, дилеры стараются не хранить у себя много непроданных машин, поскольку автопроизводители регулярно выпускают рестайлинговые версии тех или иных моделей. Клиенты не захотят платить за устаревшую машину как за новую, а скидки приводят к снижению прибыли дилеров.
Поэтому почти все известные бренды автомобилей на своем сайте предлагают раздел с онлайн-конфигураторами. Этот инструмент позволяет клиентам настроить модель по своему желанию и увидеть, как автомобиль будет выглядеть в реальности.
Сегодня уже более 90% пользователей конфигурируют авто в онлайн на сайте производителя, в приложении или используя брошюру. А в дилерский центр обращаются лишь за тест-драйвом или чтобы окончательно определиться с покупкой.
У Volvo удобный и простой пошаговый конфигуратор, который позволяет выбрать цвет, диски, отделку салона и различные пакеты комплектации, например, для холодного климата или удобного паркинга.
5. Использование VR и AR технологий
Но технологии не стоят на месте. И многие бренды и дилеры внедряют дополненную реальность в свои процессы продаж для демонстрации автомобилей.
Уже сейчас, по данным Nielsen, около половины потребителей (51%) готовы использовать технологии дополненной и виртуальной реальности (AR/VR) для оценки продуктов. А в будущем 89% потребителей откажутся от физического шопинга, если у них в распоряжении будет девайс или технология, которая полностью воссоздаст опыт посещения магазина (включая запахи, возможность пощупать товар и так далее).
Для автодилеров инвестирование в технологии VR и AR — это то, к чему нужно присмотреться.
VR дают безграничные возможности. Пользователи смогут не только настраивать любую модель автомобиля, но и с помощью шлема виртуальной реальности и контроллеров открыть дверь и сесть на сиденье водителя.
Бренды могут проводить захватывающие тест-драйвы и демонстрировать даже те автомобили, которые еще только собираются выпустить.
Для дилеров тоже есть плюсы. С технологией VR необязательно арендовать большие площади. Теперь можно оборудовать виртуальные выставочные залы в простом офисном помещении.
Уже сейчас, по данным Nielsen, около половины потребителей (51%) готовы использовать технологии дополненной и виртуальной реальности (AR/VR) для оценки продуктов. А в будущем 89% потребителей откажутся от физического шопинга, если у них в распоряжении будет девайс или технология, которая полностью воссоздаст опыт посещения магазина (включая запахи, возможность пощупать товар и так далее).
Для автодилеров инвестирование в технологии VR и AR — это то, к чему нужно присмотреться.
VR дают безграничные возможности. Пользователи смогут не только настраивать любую модель автомобиля, но и с помощью шлема виртуальной реальности и контроллеров открыть дверь и сесть на сиденье водителя.
Бренды могут проводить захватывающие тест-драйвы и демонстрировать даже те автомобили, которые еще только собираются выпустить.
Для дилеров тоже есть плюсы. С технологией VR необязательно арендовать большие площади. Теперь можно оборудовать виртуальные выставочные залы в простом офисном помещении.
Выставочный зал виртуальной реальности (Источник)
Например, Audi использует технологию иммерсивной виртуальной реальности в своих дилерских центрах, чтобы покупатели получили реалистичные впечатления от использования индивидуально настроенного автомобиля. Клиенты могут попробовать то, что собираются купить и охотнее соглашаются на покупки.
Решение Audi VR позволяет клиентам видеть свои автомобили на 360° градусов со световыми и звуковыми эффектами. Кроме того, они могут оценить вид автомобилей в разных условиях, например, в темное время суток.
Решение Audi VR позволяет клиентам видеть свои автомобили на 360° градусов со световыми и звуковыми эффектами. Кроме того, они могут оценить вид автомобилей в разных условиях, например, в темное время суток.
Компания Volvo тоже создала виртуальный тест-драйв. С помощью VR-гарнитуры и смартфона можно испытать внедорожник XC90 в сельской местности перед покупкой.
6. Видео и панорамы
Пока технология VR не настолько распространена, чтобы каждый пользователь мог у себя дома просматривать автомобили мечты. Все-таки она только начала внедряться и есть даже не во всех автосалонах. Но бренды и дилеры автомобилей нашли способ приблизиться к этому опыту и используют на своих сайтах впечатляющие видео и панорамы — мощный инструмент повышения конверсии и продаж.
У Porche на страницах автомобиля использовано много видео и интерактива. Но главная фишка — использование панорамы в 360°со сменой уровня камеры. Также с машиной можно повзаимодействовать: включить и выключить фары, открыть багажник.
Крутой тур по интерьеру автомобиля предлагает Toyota. Это хорошая возможность рассмотреть все детали и ощутить себя владельцем автомобиля.
Еще один потрясающий пример панорамной презентации предлагает Volkswagen в своем 3D-шоуруме. Там показаны новые модели Volkswagen Polo и Volkswagen Taos.
7. Анимация
Анимация играет ключевую роль во всех современных интерфейсах. Интерактивные элементы помогают в навигации по сайту или направляют его дальнейшие шаги. Они также помогают объяснять некоторые функции автомобиля.
У MAN, например, анимация используется для наглядного пояснения функции Ассистента экстренного торможения. А если погулять по сайту, то можно обнаружить и анимации, поясняющие действия других ассистентов.
У MAN, например, анимация используется для наглядного пояснения функции Ассистента экстренного торможения. А если погулять по сайту, то можно обнаружить и анимации, поясняющие действия других ассистентов.
Подробно об анимации мы говорили в наших статьях:
8. Дизайн-системы автобрендов
У автопроизводителей, как правило, есть основной сайт бренда и множество дилеров по всему миру, которые тоже могут делать свои сайты. В такой ситуации очень уместно использование дизайн-системы.
Дизайн-система — это целостный визуальный язык и его техническое отражение в виде библиотеки компонентов на едином репозитории, а также сопутствующих дизайнерских шаблонов. Она помогает достичь согласованности дизайна и кода, разрабатывать продукт быстрее и эффективнее. Каждому компоненту или шаблону дизайна соответствует определенный шаблон кода. В результате дизайн может масштабироваться параллельно с разработкой.
Дизайн-система — инвестиция в повышение эффективности разработки продуктов и их качества. В чем плюсы применения этого подхода на проектах:
Дизайн-система — инвестиция в повышение эффективности разработки продуктов и их качества. В чем плюсы применения этого подхода на проектах:
01
Увеличение скорости и более быстрый выход на рынок. Доступный в одном месте набор инструментов позволяет сделать процесс разработки более гибким, что ускоряет внедрение без ухудшения качества. В 1,5−2 раза сокращает время выхода на рынок продуктов. На 30−50% сокращаются расходы на разработку новых цифровых продуктов.
Экономия времени и денег. Дизайнеры и разработчики не задают избыточные вопросы, минимизируется время на обсуждения и разработку одноразовых решений. Не выполняют повторяющуюся работу, а многократно используют уже созданные элементы интерфейса.
03
Согласованность и последовательность пользовательского опыта. Это значит, что пользователи быстрее осваивают ваш UI, у вас выше конверсия, больше прибыли и лучше показатели метрик.
02
В основе дизайн-системы Audi лежат компоненты, модули и анимации. На сайте подробно описаны правила использования сущностей дизайн-системы, ведется история обновлений. Компоненты представлены как визуально, так и в коде (также есть репозиторий на GitHub).
Дизайн-система немецкого производителя грузовых автомобилей и автобусов MAN состоит из стайл-гайдов и библиотеки компонентов. С дизайн-системой работают более 500 пользователей и более 50 партнеров. Ежегодно создается более 100 проектов. Вся информация хранится в закрытом доступе на бренд-портале.
Крупные автомобильные бренды постоянно внедряют инновации как в сами продукты, так и в процесс их продаж. Подобно тому, как в машинах появляются умные компьютеры и различные системы для безопасности, комфорта и легкости управления, так на сайтах появляются функции, которые облегают жизнь клиента по выбору и покупке прямо в режиме-онлайн. Поэтому смело ориентируйтесь на находки этих компаний для развития своего клиентского сервиса, бренда и увеличения продаж.
А если вы хотите больше узнать о создании брендов и дизайн-систем, о разработке сайтов и их продвижении в современном мире диджитал, подпишитесь на наш блог.
Успешных проектов и высоких конверсий! ❤
А если вы хотите больше узнать о создании брендов и дизайн-систем, о разработке сайтов и их продвижении в современном мире диджитал, подпишитесь на наш блог.
Успешных проектов и высоких конверсий! ❤
Комментарии к статье
Комментарии: 0