Интернет-магазин косметики: как сделать сайт, не выглядящий как очередной каталог

У косметического магазина есть одна странная проблема.

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

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

Например, фильтр работает медленно. Или покупатель не понимает, чем отличаются три почти одинаковые сыворотки. Или нужного оттенка нет, но он продолжает висеть среди доступных товаров.

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

Сначала мы смотрим не на дизайн

Это, пожалуй, самая неочевидная часть работы.

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

Сначала разбираем сам товар.

Что продается? Какие бренды? Сколько позиций? Есть ли варианты одного товара? Как люди ищут продукцию? Важна ли страна производства? Есть ли зависимость от сезона? Что происходит с остатками?

Даже название категории может иметь значение. Человек может искать «тональный крем», а в магазине эта группа называется «тональные основы». Для менеджера разницы нет. Для поиска и покупателя — уже есть.

Поэтому структура магазина рождается не из шаблона. Она вырастает из ассортимента.

Когда каталог становится похож на шкаф с косметикой

Представим обычную ситуацию. Покупатель открывает категорию и видит 800 товаров.

Что он делает?

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

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

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

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

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

Хороший фильтр не показывает покупателю все характеристики товара. Он убирает с дороги те, которые сейчас не нужны.

А что делать с поисковым спросом?

Здесь начинается уже другая история.

Если человек вводит в Google «интернет магазин косметики украина», он еще не обязательно знает, что именно купит. Возможно, он просто ищет магазин с доставкой по стране. Возможно, сравнивает цены. А может, уже знает конкретный бренд, но еще не определился с продавцом.

Запрос «интернет магазин косметики» еще шире. За ним могут стоять совершенно разные намерения.

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

Для SEO это тоже имеет значение. Для человека — еще больше.

Корейская косметика — отдельный случай

С корейской косметикой мы бы вообще не советовали строить структуру по принципу «вот все товары, выбирайте».

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

Поэтому раздел «корейская косметика» должен иметь понятную внутреннюю логику. Бренды, категории средств, потребности, возможно — отдельные тематические подборки.

Но здесь есть тонкая грань.

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

Один реальный случай из нашей работы

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

Мы открыли аналитику.

Потом несколько раз сами прошли путь покупателя — с телефона, не с компьютера.

Проблема оказалась не там, где ее искали.

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

После изменения порядка элементов и нескольких небольших правок поведение на карточке изменилось. Это не была магическая переделка всего сайта. Мы не рисовали новый дизайн ради нового дизайна.

Просто убрали одно препятствие.

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

Карточка товара должна отвечать на неудобные вопросы

Покупатель косметики сомневается.

Это нормальное поведение.

Подойдет ли оттенок? Какой объем? Для какой кожи? Оригинальный ли товар? Какой срок годности? Чем это средство отличается от соседнего? Сколько стоит доставка?

Если страница молчит, вопросы никуда не исчезают. Человек просто закрывает вкладку.

Особенно это заметно в категориях make up. Здесь фотография может создать неправильное ожидание относительно цвета, текстуры или финиша. Поэтому качественные фотографии, информация об оттенке и понятный выбор варианта — не декоративные дополнения.

Это часть продаж.

И еще один нюанс — название магазина в поиске

Когда мы видим запросы вроде «интернет магазин make up» или «интернет магазин makeup», для нас это сигнал не просто вставить эти слова в текст.

Нужно понять, что именно человек ожидает увидеть после перехода.

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

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

Парфюмерия живет по своим правилам

Если планируется интернет магазин парфюмерии украина, структуру лучше продумать еще внимательнее.

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

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

Обычный каталог этого не решает.

Нужна навигация по логике покупателя, а не только по логике базы данных.

Нужен ли дорогой дизайн?

Не всегда.

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

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

Анимация сама по себе крем не продает.

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

Что мы проверяем перед запуском

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

Понятно ли, куда нажимать? Можно ли найти товар, не зная точного названия? Видно ли наличие? Что произойдет, если нужного оттенка нет? Не теряется ли цена? Удобно ли оформить заказ с телефона?

Иногда после такой проверки приходится возвращаться к вещам, которые еще вчера казались «готовыми».

Это нормально.

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

А где здесь собственно интернет-магазин?

Вот в этом и штука.

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

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

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

Поэтому во время разработки мы сначала смотрим на путь покупателя. Что он вводит в поиск? Куда переходит? Где может остановиться? Какой информации ему не хватает перед покупкой?

И только после этого решаем, как именно должен выглядеть магазин. Начинаем не с баннера. Не с анимации. И даже не с цвета кнопки.

Сначала пытаемся понять, как покупатель реально ищет косметику.

А дальше уже строим магазин под это поведение.