Разборка №7: почему интернет-магазин теряет клиентов? Разбираем популярные ошибки на примере зарубежного сайта Lemme

Привет, это Лиза из Лиги А. Lemme — зарубежный интернет-магазин с таблетками и бадами. Дизайн сайта радует глаз, но удобство, скорость и логика взаимодействия хромает. Мы посмотрели сайт глазами пользователей, дизайнеров и разработчиков: что здесь работает на бренд, а что мешает продажам. В этом разборе — конкретные выводы и рекомендации, которые помогут стартапам и бизнесу сделать сайт более эффективным.

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

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

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

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

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

Заходим сюда: https://lemmelive.com

В глаза сразу бросается цветовое решение

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

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

Создатели сайта в целом ловко обращаются с цветом, расставляя нужные акценты в зависимости от блока. Например:

Например, заголовочная Recoleta и наборный Mier за счёт мягких, округлых форм создают ощущение уюта и натуральности. Реколета и вовсе отсылает к 70-м, к эпохе хиппи, единения с природой и вот этому всему. При этом это современный шрифт, который ловко держит баланс между «стариной» и современностью.

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

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

Что думают разработчики: Анимация при наведении на кнопки выглядит круто, но с технической точки зрения стоит учесть, что анимации должны быть лёгкими и быстро загружаемыми, особенно на мобильных устройствах. Тяжёлые библиотеки для анимаций могут замедлить сайт. Рекомендую оптимизировать эти эффекты, например, используя CSS-анимации вместо более тяжёлых JavaScript-библиотек.

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

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

То же с картинкой в заглавном баннере — очень просится та же привязка к курсору, которая реализо��ана на кнопках.

Ещё один момент, который я не могу никак объяснить, это разность в поведении, казалось бы, одинаковых кнопок. Часть из них при наведении «убегает» от курсора, а часть — просто меняет цвет.

Приятное впечатление от работы с цветами, иллюстрациями, шрифтами и акцентами разбивается о топорность анимации и консистентность её применения.

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

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

Интересная находка с изображениями, появляющимися по наведению

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

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

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

Шапка станицы также хороша

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

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

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

Ещё один классный приём — это баннер создания своего набора

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

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

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

Если резюмировать, то страница товаров производит более цельное впечатление по сравнению с главной

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

Раздел встречает баннером, который ведёт нас на этот же раздел. Очень странное решение, которое выглядит скорее багом, чем фичей.

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

Слева — каталог продукции, имеющий примерно похожую на основной каталог сетку и такую же анимацию. Кнопка добавления превращается в счётчик количества, что стало уже стандартом отрасли.

Но дальше начинаются мелкие проблемы

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

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

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

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

В целом, структура карточки работает на увеличение чека

Отсюда либо нельзя уйти (как в случае с ревью), либо это настолько не акцентно (переход на карточку товара), что не отвлекает пользователя от покупки.

Из минусов: мы насчитали три вида этой карточки

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

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

При этом кнопки, работающие на увеличение чека, заметны и удобны

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

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

Чекаут классический, его испортить трудно:

Фичи: 8/10

Красота и удобство: 9/10

UX: 7/10

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

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

Также есть ощущение, что анимация не оптимизирована, особенно ховер на кнопках. В рамкой даже одной страницы она работает через раз.

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

Так выглядят метрики десктопа:

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

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

Мобильная производительность — это ключевой фактор для конверсии

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

Сайт построен на Lit, а стили написаны с помощью css-in-js библиотеки Emotion. Это заметно по тому, как интерфейс «подпрыгивает» при загрузке страниц — такие эффекты типичны для динамически вставляемых стилей. Сейчас этот подход устарел, а библиотеки css-in-js теряют популярность, потому что усложняют поддержку кода и потребляют больше ресурсов.

Использование Lit и css-in-js может быть оправдано в некоторых случаях, но для интернет-магазина это не лучший выбор

В таких проектах лучше использовать более традиционные решения, например, React + Next.js или Vue + Nuxt.js. Эти фреймворки проще масштабировать и поддерживать, особенно если бизнес будет расти. Также стоит обратить внимание на производительность — css-in-js библиотеки, такие как Emotion, могут усложнить оптимизацию и увеличить размер бандла.

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

Например:

Реализация: 6/10

Метрики: 5/10

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

Отказаться от Shopify и библиотеки css-in-js (Emotion)

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

Пересмотреть использование стилей

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

Почистить метрики и виджеты

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

Внутри советы по дизайну и разработке — от UX до производительности. Сохраняйте и проверяйте себя перед стартом проекта:

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

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

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

Телеграм Лиги А.

Телеграм канал JetStyle