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

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

Кратко о нас

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

О заказчике

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

О проекте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Типографика

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

Каталог

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шильдики

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Посетите сам интернет-магазин BoConcept.

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

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