Как мы сделали интернет-магазин шин и дисков, в котором легко разобраться с первого экрана
Привет! На связи Webest, и сегодня расскажем о дизайне интернет-магазина автомобильных шин и дисков для B2C- и B2B-клиентов.
В проекте нужно было совместить две разные задачи: эффектно показать сам продукт и при этом сделать большой объём технической информации понятным для пользователя. Поэтому дизайн построили на контрасте имиджевых экранов с крупными изображениями шин и спокойных функциональных страниц.
О клиенте
Компания более 25 лет работает на рынке и является дилером ведущих мировых производителей автомобильных шин и дисков. В ассортименте — товары для разных автомобилей и задач, поэтому пользователю важно быстро найти подходящий вариант и получить достаточно информации для выбора.
Проблема и задача
Главный вызов — собрать в понятный интерфейс, не перегружая пользователя. На первом экране нужно было одновременно показать основные возможности магазина, дать быстрый доступ к подбору шин и оставить место для информационных предложений.
Поэтому задача была не просто сделать новый дизайн интернет-магазина, а правильно расставить приоритеты внутри каждого экрана.
Решение
Основой визуального языка сделали сочетание глубоких темных фонов, яркого синего акцента и крупных фотографий шин и автомобилей. За счет этого имиджевые блоки выглядят выразительно, а функциональные страницы остаются спокойными и легко читаются.
Собрали первый экран вокруг главного сценария
Главный экран построили вокруг формы «Подбор шин» — одного из ключевых элементов магазина. Рядом оставили только необходимую навигацию: ненагруженную шапку, сайдбар и два информационных баннера.
Для услуг выбрали другой принцип, вместо длинного списка вывели только шесть самых популярных. Так первый экран остается информативным, но не превращается в набор равнозначных блоков.
Выстроили понятную иерархию в каталоге
В каталоге мы помогли пользователю быстро перейти от большого ассортимента к конкретному варианту. Поэтому подбор шин вынесли на заметное место, а информацию о товаре структурировали по степени важности.
Здесь дизайн работает не за счет большого количества визуальных приёмов, а за счет правильной последовательности информации: сначала найти нужную модель, затем изучить характеристики и перейти к покупке.
Продумали карточку товара
Карточку построили так, чтобы изображение шины сразу привлекало внимание, а технические характеристики и информация о покупке были доступны рядом. Так пользователь может сначала оценить модель визуально, а затем перейти к параметрам и сравнению.
Убрали лишние действия из оформления заказа
Вместо того чтобы заставлять пользователя каждый раз заново заполнять данные, использовали автозаполнение форм и сохранение ранее указанных адресов. В результате оформление сводится к нескольким действиям, где дизайн работает на сценарий: меньше полей и повторных действий — проще завершить покупку.
Собрали личный кабинет вокруг информации о заказах
В личном кабинете не стали усложнять структуру дополнительными разделами. В одном месте собрали идентификаторы заказов, информацию по ним и личные данные. Так пользователь получает понятную точку, где можно проверить историю взаимодействия с магазином и быстро найти нужную информацию.
Результат
Получился интернет-магазин, где сложный ассортимент и большое количество технических данных не мешают основным сценариям. Подбор, изучение товара, оформление заказа и работа с ним выстроены в последовательную систему, а визуальная иерархия помогает двигаться по ней без лишних действий.
Хотите спроектировать интернет-магазин со сложным ассортиментом и сделать его понятным для пользователей? Оставьте заявку на сайте webest.ru
Комментарии
Войдите, чтобы оставить комментарий.