Как настроить автопродвижение товаров в ВКонтакте
Пошаговая инструкция для тех, кому нужно быстро получить продажи
Проверили, удобно ли делать покупки со смартфона в топовых магазинах
Мобильная версия сайта — must have в текущих реалиях. Все к этому идут, но пока не дошли полностью.
Лидеры отрасли должны задавать планку остальным игрокам. Мы провели исследование 20 топовых интернет-магазинов России. Оценили мобильные версии их сайтов по 44 параметрам. Все параметры поделили на девять групп:
Интернет-магазины для исследования взяли из рейтинга DataInsight (рейтинг за 2018 год). Это ключевые игроки в своих отраслях, с которых берут пример другие участники рынка.
Параметры для оценки взяли из подобного исследования западных интернет-магазинов.
В исследовании, которое мы взяли за ориентир, намного больше параметров (больше сотни). Для оценки российских интернет-магазинов выделили только наиболее значимые критерии.
Посмотреть таблицу с оценками по каждому магазину
Ниже разберем каждый из 44 параметров, по которым проводилась оценка и постараемся найти основные закономерности.
Дисклеймер. Мы не даем оценку «хорошо/плохо», мы лишь показываем вам, как часто используются разные механики.
Поэтому — рассматривайте этот разбор как рекомендации, которые вы можете позаимствовать (или нет). Преимущество собранных примеров в том, что все они взяты у лидеров рынка, которые тестировали свои решения на больших объемах.
Общая картина. Вместо отдельной мобильной версии сайта большинство интернет-магазинов предпочитают адаптивную верстку. А скорость загрузки почти у всех хромает.
Адаптивный сайт: 14 / Мобильная версия: 6
Тут все хорошо. Адаптивный сайт — более выгодное решение по сравнению с отдельной мобильной версией. В большинстве случаев от специально созданной мобильной версии больше проблем, чем преимуществ:
Адаптивность от этого всего избавляет.
Хорошая: 2/ Плохая: 18
С этим у большинства сайтов существенные проблемы. Статистика по сайтам из нашей выборки распределяется так:
Зона в Google PageSpeed Insights | Баллов | Количество сайтов |
---|---|---|
Зеленая | 90 и больше | 1 |
Оранжевая | от 50 до 89 | 1 |
Красная | менее 50 | 18 |
На низкую скорость влияет обилие высококачественных изображений и скриптов на страницах сайтов.
Если у вас интернет-магазин — хорошо поработайте над оптимизацией скорости загрузки страниц. Для мобильных скорость особенно важна, так как это один из факторов ранжирования в мобильной выдаче. Долго грузится сайт — готовьтесь терять позиции.
Да и посетитель может не дождаться загрузки товаров.
Система PromoPult — рекламный комплекс для привлечения клиентов из интернета. SEO, PPC, SMM в одном аккаунте. Полная автоматизация, готовые чек-листы, точные настройки. Комплексное решение для малого и среднего бизнеса. Минимальные стартовые бюджеты, полный набор инструментов для всех каналов продвижения, глубокая автоматизация, кампании «под ключ».
Общая картина. Есть набор элементов, которые присутствуют у большинства интернет-магазинов:
Эти элементы — базовый минимум того, что должно быть на странице магазина.
Другие элементы (например, фиксация меню или виджет онлайн-чата с поддержкой) не являются обязательными: это нужно тестировать.
Используют: 11/ Не используют: 9
С незначительным перевесом в сравнении побеждают сайты с фиксированным меню: при прокрутке страницы меню и ключевые элементы шапки сайта всегда отображаются в верхней части экрана. Это удобно для навигации и позволяет пользователю воспользоваться нужной функцией в любой момент. Например, при прокрутке раздела каталога в самый низ не нужно возвращаться наверх — можно прямо с этой позиции воспользоваться полем поиска.
При реализации фиксированного меню главное не перестараться и соблюдать баланс: меню не должно конфликтовать с другими элементами экрана.
Используют: 15/ Не используют: 5
Если номер кликабельный, можно просто кликнуть и нажать кнопку вызова. Это очень удобная опция для пользователей, которые заходят на сайт с мобильных. Если номер некликабельный, придется копировать его (что не очень удобно делать со смартфона) и вставлять в приложение для звонков.
Всегда делайте номер телефона кликабельным. А так — не делайте:
Используют: 19/ Не используют: 1
Тренд очевиден, но не стоит зацикливаться на этом формате. Ключевой фактор при принятии решения о виде меню — особенности ЦА. Если вашим клиентам меню «гамбургер» привычно — делайте так. Для консервативной аудитории гамбургер может оказаться непривычным и непонятным элементом интерфейса. Тогда лучше использовать обычное текстовое меню. Но таких пользователей все меньше.
Используют: 16 / Не используют: 4
Еще одна полезная функция для магазинов с сетью офлайн-точек (например, физических магазинов или точек самовывоза) — поиск ближайшего магазина. Идеальный вариант реализации — поиск по местоположению клиента.
Для удобства пользователей следует дать возможность посмотреть адреса магазинов в виде списка или на карте.
Если физических магазинов у вас нет, укажите список пунктов доставки. Здесь также нужна возможность подобрать пункт доставки по местоположению.
Рекомендация. Используйте веб-аналитику. Если страницу с адресами торговых точек (или пунктов доставки) посещают достаточно часто, добавьте ссылку на нее в шапке сайта.
Используют: 17 / Не используют: 3
Еще один базовый элемент, который пользователи ожидают увидеть в привычном месте и в привычном виде. Оптимальное расположение иконки корзины — в правом верхнем углу (в шапке сайта). Сама иконка должна выглядеть как корзина или тележка.
Если возникнет соблазн покреативить и создать уникальную иконку, трижды подумайте: не запутаете ли вы пользователя, который ищет привычную иконку.
Используют: 4 / Не используют 16
Неплохой вариант показать пользователям специальные предложения, акции или призывы к действию — разместить их в нижней части экрана. Позаботьтесь о том, чтобы фиксированный элемент с предложением можно было скрыть.
Используют: 7 / Не используют: 13
Слайдер с автоматической ротацией баннеров в верхней части экрана — хорошее решение для десктопной версии сайтов. А вот на мобильных от таких баннеров отказалось большинство интернет-магазинов из нашей выборки — и правильно сделали. Карусель — достаточно старый элемент продающего сайта, и у многих он уже находится в «слепой зоне».
Используют: 20 / Не используют: 0
Поиск — еще один обязательный элемент, который должен быть заметным и доступным в шапке сайта. Для экономии места (это важно в мобильной версии сайта) можно разместить только значок лупы. После нажатия на значок — открывать поле для ввода поискового запроса.
Для сравнения: у «Комуса» по умолчанию развернуто поле поиска — занимает целую строку. «Сима-ленд» использует более компактное решение.
Используют: 3 / Не используют: 17
Для интернет-магазинов виджет онлайн-консультанта — нужная и полезная вещь. Пользователи могут задать вопрос и получить оперативный ответ или консультацию. Для десктопных версий это однозначно must have.
При отображении сайта на мобильных устройствах от виджета скорее больше вреда, чем пользы. Иконка или бар виджета перекрывает основной контент, а спрятать его зачастую нельзя.
Чтобы принять решение взвешенно — протестируйте. Например, для тестирования можно использовать бесплатный онлайн-консультант GetSale. Установите его на сайт, а через месяц соберите статистику по обращениям пользователей. Если клиенты активно пользуются виджетом — оставляйте, если не пользуются совсем — убирайте.
Общая картина. Если в категории больше 20 товаров — вам нужен фильтр:
Используют: 19 / Не используют: 1
Фильтры есть у всех интернет-магазинов из нашей выборки, кроме одного. Наличие фильтра — однозначно правильное решение, так как для пользователей это понятный и ожидаемый элемент функционала, который помогает быстрее и проще находить нужные товары.
Используют: 3 / Не используют: 17
Фиксация фильтра при скролле (как в случае с фиксацией меню) — пока что недостаточно распространенное решение. Такое отображение фильтра позволяет вернуться к выбору параметров фильтрации из любой позиции на странице.
Используют: 19 / Не используют: 1
Практически для любого товара, где нужен фильтр, нужна также и возможность выбирать одновременно несколько параметров. Например, при выборе одежды нужно выбрать бренд, размер, цвет и ткань.
В фильтрах всех интернет-магазинов из нашей выборки есть такая возможность. Только у одного сайта вообще нет фильтров, соответственно — ничего нельзя и выбрать.
Используют: 4 / Не используют: 16
Для удобства клиентов в фильтре по цвету лучше всего наглядно показывать цвет. Например, в виде цветных кружочков. Как вариант — название цвета текстом и соответствующий цветовой маркер.
Вариант похуже — только текстовое описание цвета. Если цветов три (черный, белый и красный) — это может сработать. Но для большого количества оттенков лучше показывать наглядно, чтобы пользовал точно понимал, какой цвет подразумевается.
Увы, большинство магазинов пока что используют только текст.
Используют: 17 / Не используют 3
Полезный фильтр, с его помощью клиент может быстро подобрать товар, который устраивает его по цене. Этот фильтр используют практически все сайты. У некоторых магазинов его нет — аргументируют это тем, что акцентируют внимание в первую очередь на товаре и его качествах, а не на цене.
Общая картина. У большинства интернет-магазинов можно:
Пока не используют:
Используют: 3 / Не используют: 17
Для вывода товаров в категории каталога большинство пока что используют стандартную пагинацию. С точки зрения мобильного юзабилити удобнее не переключаться между страницами, а просто пролистывать страницу вниз с автоматической подгрузкой карточек. Такое решение пока только у трех магазинов.
Есть еще одно неплохое решение — промежуточное. Сохраняется пагинация для навигации по страницам с фиксированным количеством карточек товаров. Дополнительно отображается кнопка «Показать еще».
Используют: 1 / Не используют: 19
Большинство интернет-магазинов показывают в каталоге 1 картинку для каждого товара. Чтобы посмотреть все фото — нужно переходить непосредственно в карточку товара.
Только один магазин из выборки (Озон) использует более удобное решение: в каталоге можно пролистать доступные фото каждого товара.
Используют: 10 / Не используют: 10
Стикер на карточке товара или отметка «Новинка» — хороший способ привлечения внимания посетителей магазина. Эта отметка более эффективна тогда, когда у вас есть постоянные клиенты с высоким показателем возврата. Таким клиентам могут быть интересны новые товары в ассортименте. Но и новых посетителей скорее привлечет новинка.
Используют: 2/ Не используют: 18
Для товаров с несколькими вариантами расцветки полезно реализовать функцию просмотра этих вариантов (например, для одежды или обуви). В десктопных версиях эта функция доступна не только в карточке товара, но и на странице категории. Это удобно, так как можно просмотреть сразу несколько товаров в разных вариантах расцветки.
В мобильных версиях не всегда целесообразно добавлять эту функцию на странице категории. Пальцем неудобно попадать в небольшие значки для переключения вариантов. Возможное решение: указать текстом, что есть несколько вариантов цветов, а возможность переключения и просмотра реализовать уже в карточке товара. Там все элементы можно сделать более крупными и удобными.
Используют: 15 / Не используют: 5
Оценки товара и отзывы — элементы социальных доказательств, которые могут повышать доверие новых клиентов к товару и к магазину в целом. Большинство магазинов из нашей выборки используют эти элементы — можем сделать вывод, что они приносят пользу.
В любом случае эффект от наличия оценок и отзывов можно протестировать и замерить. Для некоторых товаров это действительно может отразиться на продажах.
Используют: 18/ Не используют: 2
Цены со скидками должны быть хорошо заметными и выделяться на фоне обычных товаров (без скидок). Стандартный формат отображения:
В карточке товара стоит указывать сколько клиент экономит при покупке. Например, с формулировкой «Ваша экономия: 1 500 ₽».
Плитка: 9 / Список: 11
Здесь стоит исходить из особенностей продукции, представленной в каталоге интернет-магазина. Например,
Используют: 16 / Не используют: 4
У большинства магазинов товар можно добавить в корзину прямо из каталога (не переходя в карточку товара). Это удобно и полезно, если в ассортименте простые продукты, где не нужно изучать товар, вчитываться в описание и характеристики.
Для сложных товаров пользователю требуется предварительно изучить товар. Но и здесь кнопка «Добавить в корзину» на странице каталога не будет лишней — если пользователь точно знает, что хочет купить.
Используют: 8 / Не используют: 12
У большинства сайтов, у которых есть эта опция, в мобильной версии неудобно пользоваться сравнением. Тут два варианта:
Общая картина. В карточках товара пригодятся:
Используют: 16 / Не используют: 4
У большинства сайтов этот функционал есть. В реализации есть два основных варианта:
Используют: 9 / Не используют: 11
Видео хороши тем, что дают возможность пользователю наглядно посмотреть, как выглядит товар, получить полезную информацию об упаковке, комплекте, функциях и особенностях.
Снять видео для каждого товара — нереально, да и не нужно. Имеет смысл это делать для популярных товаров (на которые есть большой спрос и которые приносят хорошую прибыль магазину).
Используют: 8 / Не используют: 12
Большинство магазинов не используют кнопки шеринга. Одна из возможных причин — низкая популярность опции. Поделиться можно прямой ссылкой, а если пользователь смотрит товар со смартфона, то проще и быстрее сделать скриншот страницы.
Общая картина. Сопутствующие и рекомендованные товары повышают продажи. Если магазин их не использует — значит, недозарабатывает.
Используют: 13 / Не используют: 7
В этом блоке можно показывать товары на основе истории заказов других пользователей, а также выводить наиболее релевантные позиции к основному товару.
Блок необходим, если пользователь выбрал товар, к которому нужны дополнения или аксессуары. Банальный пример — чехол к мобильному телефону.
Рекомендованные товары желательно показывать не только в каталоге или на страницах товара, но и в корзине. Перед оформлением заказа пользователь может увидеть полезную рекомендацию и добавить товар в корзину.
Используют: 9 / Не используют: 11
Полезный блок, который позволяет пользователю быстро вернуться к просмотренным товарам: не нужно вспоминать, в какой категории находился товар или изучать историю браузера.
55% магазинов из выборки эту опцию не используют.
Используют: 13 / Не используют: 7
Добавляйте несколько блоков рекомендованных товаров. Так вы познакомите пользователя с ассортиментом и, возможно, подскажете ему нужный товар. Стоит отметить, что рекомендации и в десктопных версиях магазинов не всегда работают удовлетворительно.
Главное. После добавления товара в корзину пользователь должен оставаться на странице товара (или в каталоге). Дать понять, что товар добавлен в корзину, можно с помощью всплывающего окна.
Используют: 20 / Не используют: 0
Такая логика реализована у всех магазинов из ТОП-20. Это удобно, пользователь может оставаться в каталоге сколько угодно времени и без проблем добавлять товары в заказ.
Используют: 6 / Не используют: 14
С помощью этой механики вы можете показать пользователю содержимое корзины без обязательного перехода в нее. Используют ее только 30% интернет-магазинов из выборки.
Используют: 5 / Не используют: 15
У 25% интернет-магазинов, которые мы проанализировали, реализован предпросмотр содержимого корзины при добавлении товара. При нажатии кнопки «Купить» товар добавляется в корзину и всплывает окно с подтверждением. Здесь можно сразу перейти к оформлению заказа или закрыть окно и продолжить покупки.
Общая картина. Корзину нужно хорошо проработать:
Необязательный элемент — дублирование кнопки «Оплата/Далее».
Используют: 20 / Не используют: 0
Все магазины из выборки показывают в корзине фото и краткое описание добавленных товаров. На этапе оформления заказа пользователю важно убедиться, что он добавил в корзину именно то, что нужно. Поэтому отображаемой информации должно быть достаточно для этого.
Используют: 5 / Не используют: 15
Эта информация поможет сформировать правильные ожидания у пользователя (если, конечно, у вас отлажены процессы и нет задержек с доставкой). Если точные сроки доставки неизвестны — можете указать примерные (или хотя бы дату отправки).
Используют: 2 / Не используют: 18
Если при покупке клиент получает бонусы, выгодные условия или другие преимущества — нужно это указать. Так клиент наглядно будет видеть, что магазин дает ему (например, бесплатную доставку). Это, в свою очередь, формирует лояльность покупателей.
Используют: 3 / Не используют: 17
Львиная доля интернет-магазинов из нашего исследования не реализовали возможность сохранения корзины. Тем не менее, ориентироваться на это не стоит. Такая опция будет полезна клиентам, часто покупающим одинаковый набор товаров (например, продукты питания или бытовую продукцию). И напротив — будет избыточной, если товар из той категории, где покупка происходит редко (как часто вы покупаете, например, обогреватели в квартиру или новые светильники?).
Используют: 2 / Не используют: 18
Раньше было популярным дублировать кнопку «Далее» или «Оплата» в двух местах на странице: вверху и внизу. Сейчас тренд прошел и такое можно встретить только на единичных сайтах.
Общая картина. Чтобы не терять клиентов на этапе оформления заказа — позаботьтесь о том, чтобы страница оформления была понятной, удобной и максимально простой:
Используют: 14 / Не используют: 6
Обычно интернет-магазины требуют от покупателей регистрироваться при оформлении покупки. Так могут делать крупные бренды с лояльной аудиторией постоянных клиентов. В большинстве же случаев должна быть возможность выбора: покупка без регистрации.
Чтобы пользователи все-таки регистрировались, предлагайте им зарегистрироваться и объясняйте, какие преимущества получит от этого клиент (например, накопительный счет для бонусов, которые можно будет использовать для оплаты заказов). Но прежде проанализируйте поведение клиентов и подумайте, так ли вам нужна регистрация.
Используют: 5 / Не используют: 15
Проблема отображения сайтов на мобильных — мало места. Например, при оформлении заказа есть несколько этапов, где пользователь должен вводить данные и выбирать варианты доставки и оплаты. Хорошее решение для отображения разделов — аккордеоны: активный этап разворачивается, а пройденные (или предстоящие) отображаются в свернутом виде.
Такую опцию используют только 5 сайтов из нашей выборки.
Используют: 12 / Не используют: 8
На практике даже в самых понятных и простых формах пользователи вводят данные с ошибками. У восьми сайтов из нашей выборки проверка корректности заполнения полей проводится после нажатия кнопки «Отправить» — только тогда показываются уведомления о неправильном заполнении полей.
Это неудобно для пользователя. Логичнее выглядит проверка по мере заполнения — так пользователь сразу понимает, в каком поле допустил ошибку и может оперативно исправить ее.
Используют: 12 / Не используют: 8
Если пользователь уже указывал свои данные (например, зарегистрировался или авторизовался), их можно использовать для автозаполнения форм на этапе оформления заказа. Это поможет избежать ошибок и ускорит процесс покупки.
Используют: 13 / Не используют: 7
При оформлении покупки важно дать пользователю информацию о составе заказа. Необязательно показывать полные карточки товаров, достаточно краткого описания — названий товаров и цен. Так покупатель видит, что у него в заказе, и может проверить это, не возвращаясь в корзину.
Если посмотреть несколько интернет-магазинов, занимающих топ в своих отраслях, бросаются в глаза закономерности: расположение элементов и функционал практически идентичен (отличается лишь визуальная реализация). И в этом нет ничего плохого.
Для хорошего UX не нужно придумывать уникальный дизайн. Логика интерфейса должна быть привычной и понятной пользователю. Поэтому при работе над юзабилити интернет-магазина нужно обращать внимание на другое:
Проверьте свой магазин по нашему списку — возможно, в следующей версии вы что-то измените к лучшему. Но не стоит слепо копировать то, что вам просто понравилось. Постарайтесь выбирать механики, которые используются в интернет-магазинах, близких вашему по типу товаров и покупателей.
Пошаговая инструкция для тех, кому нужно быстро получить продажи
Держим баланс между SEO и простой человеческой пользой
Обзор условий популярных площадок и рекомендации селлерам
— Мы только спросить: нужен трафик и лиды из поиска Яндекса и Google?
Подключите бесплатное продвижение на 2 недели и получите взрывной рост позиций в Яндексе и Google, целевой трафик и продажи.
Настоящим Я даю свое полное согласие на получение электронных уведомлений (на указанные мой абонентский номер и адрес электронной почты), а также выражаю явное и полное согласие на сбор, хранение, обработку и передачу персональных данных, согласно положениям, изложенным в Политике конфиденциальности, расположенных по адресу: promopult.ru/rules.html?op=private, с которыми я ознакомился и принял.