UX-экспресс: 10 лет опыта в проектировании интернет-магазинов в одной статье

Про UX интернет-магазинов: какие они бывают, чем отличаются, какие функции и паттерны базовая база, а что лучше никогда не делать. B2B, B2C, мультибренды, монобренды, премиум, дисконт — в общем поделюсь чего узнал за 10 лет проектирования интерфейсов.

Так сложилось, что в 2014 году я начал работать в веб-студии и погружаться в диджитал сферу. Затем с каждым годом, по сегодняшний день, работая с кучей проектов, делая новые интерфейсы, качая насмотренность, понимаешь — как же все таки всего дофига разного в одном только e-commerce.

Ну и раз я потратил 10 лет узнавая эту информацию, то можно её запаковать в статью для вас, написанную лайтовым языком, чтоб вы это всё узнали за минут 10. Инвестиция времени — 10 лет за 10 минут))

Начну с простого и потихоньку буду рассказывать более сложные и глубокие штуки.

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

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

Итак, вот набор базовых привычных паттернов e-commerce:

1. Корзина — иконка тележки в правом верхнем углу.

2. Личный кабинет — тоже иконка, расположена там же, обычно силуэт человека.

3. Каталог — самая важная и акцентная штука в шапке.

4. Поиск срабатывает по нажатию enter. Находится в шапке сразу развернутый или в виде иконочки лупы.

5. Клик на лого — это переход на главную.

6. Добавить в корзину — в карточке самая яркая кнопка.

7. В каталоге внизу — постраничная навигация или показать еще.

8. Всплывающие окна при входе — закрываем не читая)0

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

Далее буду сравнивать две противоположные по определенному признаку категории магазинов.

Давайте сразу на примерах наших проектов.

Например, restore:, М.Видео, Столплит — это мультибренд, ибо на них представлены товары разных брендов.

А вот Sokolov, Nutrilak, Erich Krause — это уже монобрендовые сайты и на них продается только продукция одного бренда.

В чем могут быть отличия?

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

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

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

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

Вот не уходя от темы мультибрендов, условно на Озон или Алик заходите и там че-то все в баннерах про акции, у кучи товаров красные цены, а потом еще доп скидка по озон карте. Ну и заходим мы туда за всем подряд, но редко за чем-то прям брендовым, дорогим и тд.

Ну и теперь сравним с сайтом условного ЦУМ-а. Тоже мультибренд, но акцент на фотографии товара, цена где-то маленькая (я про кегль, а так-то конская конечно) написана внизу.

Скидки и акции не кричат. Все беленькое, нейтральное. Даже если цена со скидкой, то это не кричит.

Ну и если возвращаться к монобрендам — как раз именно товары подороже покупают на таких сайтах. Условно, футболку ТВОЕ можно заказать, когда попадется случайно на озоне, вб, ламоде.

А за NIKIFILINI ты уже на сайт их перейдешь. Ну, это, наверное, не такой понятный пример для большинства, ибо это я кайфую от их шмоток так, что аж познакомился с ними в живую, скатался на производство и теперь прорабатываем новую версию сайта))₽

Есть более известные, такие как FARFETCH (лашкери мультибренд), BALENCIAGA (лакшери монобренд), Bat Norton (крутой монобренд из Питера, чуваки свяжитесь со мной). Думаю суть понятна, едем дальше.

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

Б2С

Business-To-Consumer. Ну тут относительно просто для понимания — это то, чем мы с вами регулярно пользуемся, как правило в личных целях. Продукты заказываем, роллы, одежду, туалетную бумагу и всякое такое.

По UX как раз довольно стандартно, то что я в базовой базе описывал, так что погнали дальше.

Б2Б

Business-To-Busines. Чаще ориентированы на большие закупки / опт и все в этом духе. ЦА обычно специально обученные закупщики, которые привыкли работать в экскльке и им надо все по файлику заказать.

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

Короч, получаются конкретные космолеты для Б2Б магазинов частенько и это отличается от Б2С.

А еще бывает:

— Заказчик говорит, что для разных клиентов разные цены и их направит уже менеджер. Либо надо показать после авторизации всем свои цены, в зависимости от аккаунта под которым авторизовался.

— У разных клиентов разный уровень по программе лояльности: один заказывает каждый месяц на десятки миллионов, а другой раз в год на сто тыщ.

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

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

Вот для примера наш прототип ЛК на одном из проектов:

Совмещение

Вот тут самое прикольное. Когда клиент говорит что нам надо и для b2c и для b2b, но на одном сайте. Нарисуйте чтоб удобно было.

И ты начинаешь попытки сесть на два стула))

Но это не значит, что это сразу плохо, невозможно и так далее. Можно. Просто сложнее и не всегда нужно.

Но вот особенности:

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

— Каталог двух видов. Для юр.лиц вверху выводим дополнительно файлы с прайс-листами по выбранной категории и даже по примененным параметрам фильтра, чтобы можно было скачать Excel-файл. Отображаем функцию резервации товаров. По умолчанию устанавливаем списочное представление. Акцентно показываем артикул, который физ.лицам особо не интересен. Отображаем разные цены. А у физ.лиц всё стандартно при этом.

— Корзину двух видов. У юр.лиц показываем кол-во товаров в резерве, кол-во в наличии. Саму корзину резервируем на определенное время, после очищаем, ибо долго держать в резерве большие партии товаров невыгодно — другой б2б клиент может не получить нужный товар. Добавляем конфигуратор по тому, с какого склада доставить товары. Условно, в МСК в наличии 50 единиц, а остальные в Италии — а тебе необходимо 70. Это должно быть наглядно, что 20 товаров поедут из Италии.

— Оформление заказа (чекаут). Для юр.лиц нужно вводить реквизиты компании получателя, добавлять отдельного человечка, который получит поставку товаров, другие способы и стоимости доставок, другие способы оплаты.

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

В общем, очень весело делать такие магазины.

Разумеется, это не все категории магазинов. Еще бывает по возрасту: условно, детские товары или какой-то сексшоп, ну или магазин инструментов.

По ЦА, разумеется, условно для подростков магазин скинов для доты или для мам в декрете магазин колясок.

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

Но про все в одной статье если напишу — даже сам не дочитаю))

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

Если зайдет вам — расскажу подробнее про e-commerce или сделаю экспресс-тур куда-то еще, например в корпоративные порталы. Там у меня тоже большая экспертиза)

Ну а читать больше моих текстов про бизнес, жизнь и интерфейсы можно тут.

Там сейчас ещё можно будет получить 10 000, подписки ТГ-премиум и мерч.

Приятных покупок в интернете, а я пошел и дальше делать интернет удобнее со своей командой UXART :)

Приходите за удобным интерфейсом: