Бренды под UX-прицелом: «Любимый василек» («Ивановский трикотаж»)

Мы запускаем в блоге новую рубрику «Бренды под UX-прицелом». В ней будем оценивать различные интернет-магазины на уровень удобства (юзабилити) и конверсионности, выявлять проблемные зоны. На основе анализа предложим рекомендации, как оптимизировать пользовательский опыт и повысить общую эффективность сайта.

Рубрику открывает интернет-магазин «Любимый василек» («Ивановский трикотаж»). Выяснили, насколько удобно искать, выбирать и покупать товары, а также определили, какие улучшения необходимо внести в работу магазина, чтобы повысить уровень продаж.

«Любимый василек» («Ивановский трикотаж») — один из самых известных брендов в текстильной промышленности России. За десятилетия своего существования он завоевал популярность не только на внутреннем рынке, но и за его пределами. Ивановский трикотаж выбирают за натуральность тканей, комфортные лекала и высокое качество.

Но все ли так же хорошо с интернет-магазином? Разбираемся, насколько удобен сайт и как его можно улучшить.

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

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

Из скриншота Яндекс Вордстата видно, что пользователи примерно одинаково ищут информацию о компании по ключевой фразе «оптом» и «розница»:

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

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

Нелогичное распределение разделов в меню сайта создает хаос для пользователей и усложняет поиск нужных товаров. Например, раздел «Детям» выделен как отдельный пункт меню, а женская и мужская одежда объединены в общий раздел «Одежда».

Рекомендуем пересмотреть организацию меню и разделить категории по гендерному принципу, создав три отдельных пункта: «Женщинам», «Мужчинам» и «Детям». Это сделает навигацию более понятной и удобной для пользователей.

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

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

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

Пример из практики: мы реализовали подобное решение на сайте incanto.eu.

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

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

Рекомендуем добавить хлебные крошки со ссылкой на предыдущую категорию (как в карточке товара) на мобильную версию сайта, чтобы улучшить навигацию.

Пример из практики: мы внедрили подобное решение на сайте aesthetiks.ru в мобильной версии сайта.

На первом экране главной страницы видно слайдер.

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

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

Во-вторых, важно добавить четкие и заметные кнопки CTA на каждый баннер. Они должны быть достаточно крупными, чтобы легко нажимались на сенсорных экранах. Нужно использовать убедительные призывы к действию, например, «Узнать больше», «Получить скидку» или «Купить». Это поможет сориентировать пользователей по нужным разделам сайта и повысить конверсию.

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

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

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

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

Пример из практики: мы реализовали подобное решение на сайте loomknits.com. Подробнее узнать о кейсе.

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

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

Рекомендуем добавить на главную страницу краткий, но содержательный блок с информацией о компании. Это могут быть несколько предложений о ключевых аспектах: сколько лет компания на рынке, какие ценности она продвигает, в чем ее уникальность или какие достижения она может отметить. Например: «Мы работаем на рынке более 10 лет, сотрудничаем с 23 сетями по продаже текстиля. Наша миссия — сделать ваш бизнес успешнее, а покупки — удобнее».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рекомендуем пересмотреть этот подход и выводить размерную сетку в модальном окне. Так пользователи будут быстро получать информацию, не теряя текущего контекста просмотра товара. Модальное окно можно открывать при нажатии на ссылку «Размерная сетка», а закрывать с помощью крестика или клика вне области окна.

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

Рекомендуем переработать отображение Cross-sell и Up-sell блоков, реализовав их в одну строку с возможностью свайпа влево/вправо. Так магазин сможет компактно разместить товары, сохранив при этом их видимость и доступность.

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

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

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

Рекомендуем убрать принудительную регистрацию и предоставить пользователям возможность оформить заказ как гостям. Такой подход ускорит процесс покупки, а значит, увеличит конверсию. Другой вариант — добавить авторизацию/регистрацию по номеру.

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

Пример из практики. На сайте naos.ru мы увеличили конверсию на 32% и уменьшили процент выходов из чекаута на 65% за счет отказа от обязательной авторизации на этапе оформления заказа. Подробнее узнать о проекте.

Убрали принудительный pop-up с авторизацией/регистрацией при переходе из корзины в чекаут. Теперь пользователи смогут сразу оформить покупку, не отвлекаясь на дополнительные шаги.

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

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

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

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

Пример из практики: мы реализовали подобное решение на сайте naos.ru. Только после выбора города выводятся варианты доставки.

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

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

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

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