Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

В дизайне, как и в политике, разбираются абсолютно все. Но премиум-ecommerce диктует другие правила — товары не для всех. Каким должен быть идеальный дизайн для премиум-сегмента ecommerce? Отвечаем на этот вопрос на примере нашего кейса для магазина BoConcept. Осторожно: внутри много красивых фото.

Кратко о нас

Мы – студия ДзенДизайн: команда, которая создаёт и развивает интернет-магазины для крупных брендов. Разработанные нами сайты приносят прибыль таким брендам, как EGLO, Mail.ru, ALBA, Аудиомания и BoConcept, о котором расскажем ниже.

О заказчике

BoConcept – бренд дизайнерской мебели из Дании. Компания начала работу в 1952-м году, а к настоящему моменту в её сеть входит около 300 розничных магазинов в более чем 60 странах. Где бы ни появлялись BoConcept, их название быстро начинает ассоциироваться с мебелью премиум-класса: это эталон в дизайне мебели, на который равняются конкуренты, и клиенту важно продемонстрировать данную особенность российской аудитории.

О проекте

Обычно BoConcept используют один и тот же интернет-магазин для всех стран, в которых работают, но для России бренд решил сделать исключение. Причина в том, что рынок СНГ достаточно самобытен – на нём сформировалась своя философия, поэтому наши покупатели привыкли видеть e-commerce не так, как европейцы.

Наш заказчику эту специфику понимает, поэтому с одной стороны нам дали карт-бланш на разработку дизайна, а с другой поставили чёткую задачу: BoConcept должен остаться BoConcept’ом. Сохранить узнаваемость и характер бренда, адаптировав его визуальное представление для отечественного рынка – вот наша цель.

3 принципа дизайна для премиум e-commerce

Чтобы выполнить поставленную задачу, мы опираемся на многократно проверенную триаду: главные правила, которым нужно следовать при создании дизайна премиальных интернет-магазинов. Особенность этих правил в том, что они диаметрально противоположны принятой в масс-маркете стратегии: те приёмы, которые хорошо показывают себя с товарами эконом-сегмента, не работают в люкс-классе – или даже дают обратный эффект, снижая продажи. Наш подход ориентирован именно на дорогие дизайнерские и брендовые товары, он обеспечивает максимальную прибыль при взаимодействии с аудиторией высокого достатка.

Принцип 1: бренд и товар одинаково важны

В эконом и среднем ценовых сегментах принято делать ставку на сами товары и их качества: материалы, размеры, стоимость. Откроем, например, главную страницу IKEA:

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

Минималистичная шапка, большой баннер со специальным предложением (переводит в каталог) и сразу же лента товаров. Типичная продуктоцентричная компоновка: пользователь заходит и сразу же упирается в витрину.

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

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

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

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

Принцип 2: штучному товару индивидуальная презентация

Премиум-класс – это прямая противоположность масс-маркету, поэтому и показывать его нужно по совершенно другим принципам. Эконом-сегмент всегда стремится продемонстрировать клиентам широту ассортимента, выводя на каждой странице каталога десятки товаров:

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

В люксе ситуация иная: каждый из ваших товаров – произведение искусства, в которое максимально вложились все его создатели. На каждом этапе подготовки мебели к продаже, от первых эскизов до фотосъёмки готового изделия, BoConcept стремятся к идеалу, поэтому в массовости просто нет нужды. Более того: она вредит.

Сайт должен наглядно демонстрировать премиальный характер каждого продукта, поэтому нужно соблюдать простое правило:

Каждый товар должен находиться в центре внимания клиента

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

Чтобы этого добиться, нужно выполнить два условия:

  • Оставить на экране не больше, чем 2-4 товара – даже в каталоге. Крупные изображения в деталях показывают привлекательность продукции, помогают сфокусировать внимание и создают подсознательную ассоциацию: «большое и красивое = дорогое, хорошее».
  • Сделать дизайн самого интернет-магазина минималистичным, чтобы от товара ничего не отвлекало.

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

Третий принцип: цена не важна

В масс-маркете цена – это основное качество товара: чем меньше, тем лучше. Именно поэтому так хорошо работают жёлтые ценники и красные плашки «бестселлер», которые привлекают к себе внимание и показывают, что здесь можно сэкономить:

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

Однако у покупателей, которые приходят в дорогой бутик за дизайнерской мебелью, нет затруднений с деньгами. Многие из них вообще не обращают внимание на цену – или делают это в последнюю очередь – поэтому третье правило звучит так:

Настроение важнее цены

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

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

Как мы применили эти принципы в BoConcept

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

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

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

Акции, скидки, «уникальное спецпредложение к Чёрной пятнице – если делаете дизайн для премиум-класса, забудьте про эти приёмы. Точно так же не стоит использовать «агрессивные» попапы: например, появляющееся при добавлении товара в корзину уведомление «Перейти к оплате заказа» на весь экран – это будет неуместно.

Вокруг слайдера господствует минимализм: однотонный фон в спокойных цветах, небольшая навигация сверху – всё внимание пользователя фокусируется на центральной картинке. Чем больше на сайте «воздуха», тем лучше.

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

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

Типографика

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

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

Каталог

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

В конечном счёте, мы остановились на том, что при нажатии на кнопку «Каталог» слева-сверху пользователь видит масштабное графическое меню-плитку с лучшими фотографиями:

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

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

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

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

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

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

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

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

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

Карточка товара

Стандартный вариант – фото-материалы-размеры-цена – выглядит так…

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

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

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

Именно поэтому у нас, на второй по заметности (после фотографии) позиции расположен блок «Особенности дизайна». Художественное описание модели превращает подачу информации о продукте в сторителлинг – помогает клиенту погрузиться в историю товара, понять его особенности и фишки.

Картинка легко разворачивается на весь экран, чтобы пользователь мог изучить модель в деталях:

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

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

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

Микро-анимации

Чтобы сделать сёрфинг по сайту более интересным, дополнив общую атмосферу, мы используем мини-анимации. Например, при наведении на превью товара фотография меняет ракурс:

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

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

Шильдики

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

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

Раздел «О компании»

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

В BoConcept для этого мы опубликовали видео о компании…

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

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

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

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

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

…а также наглядный рассказ о ценностях компании:

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

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

Виртуальный тур

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

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

Раздел «Интерьеры»

В премиум-сегменте вы продаёте не столько отдельные предметы мебели, сколько их влияние на интерьер клиента – как хорошо они впишутся в общую стилистику, как будут выглядеть в комнатах. Примеряя новую одежду, вы всегда хотите посмотреть её в целостном образе, вместе с другими его частями. Тот же принцип работает и с мебелью, поэтому страница «Интерьеры» так важна:

Интернет-магазин должен быть, как сайт Apple: чтобы всё, кроме товаров, было невидимым

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

Результат нашей работы над сайтом BoConcept

Вы можете подробно ознакомиться с интернет-магазином BoConcept одним из следующих способов:

Посмотрите видеопрезентацию проекта (рекомендуем развернуть её на полный экран для полноты впечатления):

Ознакомьтесь с отчётом о проекте на сайте нашей студии.

Итоги

Главные принципы дизайна премиальных интернет-магазинов – это:

  • Акцент на ценности бренда не в меньшей степени, чем на качества товара.
  • Штучная демонстрация товара – так, чтобы каждый продукт находился в центре внимания, с отличной визуализацией.
  • Максимум внимания не на цену, а на общее настроение и свойства продукции в контексте её использования (мебель показываем в интерьере).

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

7171
74 комментария

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

18
Ответить

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

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

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

Что касается известности бренда, вам большинство дорогих брендов не известно, на то вы и нищеброд, что бы не отличать часы с алиэкспреса от часов швейцарских марок, какая разница, что нам показывает время, не так ли?

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

Мы не равны, есть прослойка людей, которые на Вас не похожи и у них другие потребительские паттерны поведения. И речь шла как раз о дорогих брендах "не для всех" и разработчики сайта это понимали, не важно получилось или нет пока, главное они понимают главные особенности ЦА для которой делается сайт и своего заказчика.

1
Ответить

Конечно, только акцент на товары это не решает, решают все принципы и подходы вместе, только комплекс дает результат.

Ответить

Приятные внутренние страницы, но от главной страницы прям воротит. И дело тут в главном цвете и типографике. Очень неприятный цвет, сырое дерево какое-то. Шрифт напрашивается на то чтобы его "приправили парфюмом". Но, решение за компанией, конечно.

Спасибо за статью. :)

5
Ответить

А многим наоборот цвета нравятся, а главное что они из брендбука бренда, поэтому увы на вкус и цвет

1
Ответить

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

4
Ответить

это называется брендовый e-commerce, но да он отличается от мультибрендового

Ответить