Компании сферы e-commerce одними из первых осознали необходимость создания мобильной версии сайта, т.к. от представления продукта на мобильных устройствах напрямую зависят продажи. В этой статье мы рассмотрим семь грехов мобильных сайтов интернет-магазинов – от самых легких до самых тяжелых. За идею благодарим Алексея Шевцова, арт-директора компании WebProfy (Kokoc Group).
1. Невозможность поделиться интересной информацией с друзьями
Социальные сети захватили мир. Даже придя в интернет-магазин и увидя что-то интересное, пользователь хочет поделиться этим со своими друзьями. Отсутствие кнопок социальных сетей сильно усложняет ему задачу. Не лишайте себя дополнительной рекламы, а пользователя удовольствия высказать свое мнение!
Кирилл Соколов, UI-специалист компании Е96.ru: “Я не уверен, что в области интернет-магазинов на данный момент шарилки друзяшкам и в социальные сети вообще пользуются особой популярностью. Если это сайт, то всегда можно отправить ссылку на страницу через встроенное меню браузера. В приложении, возможно, было бы не лишним добавить такую возможность, но не думаю, что ее отсутствие критично. Процент использующих эти функции крайне мал”.
2. Отсутствие ремаркетинговой стратегии
Мобильные сайты тратят огромные суммы денег на продвижение своих товаров, однако зачастую забывают о такой простой технологии, как ремаркетинг, которая позволяет не только лишний раз напомнить пользователю о товарах и услугах компании, но также серьезно сэкономить бюджеты.
Алексей Шевцов, арт-директор WebProfy (Kokoc Group): “С точки зрения пользователя это вообще не проблема. Маркетинг — это набор манипулятивных техник, призванных склонить носителя денег с этими деньгами расстаться. Так что пользователь может лишь порадоваться, что им не манипулируют, и что один раз по ошибке просмотренные калоши не будут преследовать его по всей глобальной сети.
С точки зрения продавца, потенциальный ущерб может быть просчитан только индивидуально и зависит в первую очередь от того, чем он торгует и как принимается решение о покупке конкретного товара. Например, ремаркетинг будет по-разному работать для квартир и одежды”.
3. Отсутствие полноразмерных изображений
На экране смартфона очень сложно увидеть разницу в качестве изображения, однако это не значит, что не нужно предлагать пользователю полноразмерных изображений. Посетитель мобильного сайта должен иметь возможность увеличить картинку при клике на ее превью. Это существенно влияет на конверсию магазина.
Кирилл Соколов, UI-специалист компании Е96.ru: “Изображения товаров при удаленной покупке всегда имеют важную роль, тут нет особой разницы, мобильный это сайт или обычный. Когда нет возможности лично рассмотреть, покрутить в руках, приходится использовать все средства, чтобы донести до пользователя внешний вид товара. И полноразмерными изображениями в данном случае пренебрегать нельзя. Если есть возможность, то и видеоролики будут весьма кстати. Но есть один момент, скорость беспроводного интернета, конечно, растет, но не такими темпами, как бы нам хотелось, да и не везде. Поэтому большие картинки следует загружать только по осознанному желанию пользователя сайта”.
Александр Гладнев, консультант по маркетинговым коммуникациям: “Для смартфонов всё ещё не всегда доступны 3g или wifi, поэтому заставлять сайт показывать одни и те же картинки пользователям компьютеров и смартфонов – очень плохая практика, а отдельные наборы уменьшенных и полноразмерных изображений товаров для разных разрешений – хорошая. Лучший вариант – это их автоматическое кадрирование. И совсем вежливым можно считать указание размера и формата скачиваемых документов (например, прайс-листов или инструкций к товару) в виде «Скачать прайс в формате MS Excel (2Мб, .xlsx)» Человек видит размер (и понимает, потянет ли его интернет скачать два мегабайта) и формат (есть ли программа, с помощью которой можно просмотреть файл, или загрузка вообще не имеет смысла)”.
4. Отсутствие фильтров подбора товаров
Фильтры подбора товаров ускоряют время, которое пользователь тратит на выбор продукта. Отсутствие необходимых фильтров, особенно при наличии большого числа позиций может отпугнуть пользователя и увеличить число отказов.
Кирилл Соколов, UI-специалист компании Е96.ru: “Это механизм сужения выборки по заранее определенным параметрам. Он усложняет навигацию, и нужен не всегда. Но если количество товаров велико, то отказываться от него не следует. Правильно реализованный фильтр помогает найти нужный товар за минимальное количество шагов, увеличивая вероятность покупки”.
5. Слишком много полей и форм для заполнения
Пользователи, заполняющие контактную информацию о себе с мобильного устройства очень часто приходят в замешательство от количества полей, которые им необходимо заполнить и числа вопросов, на которые нужно ответить прежде чем они смогут получить желаемый товар. Поэтому для того, чтобы сделать мобильный сайт максимально удобным для его посетителя, можно обратиться к опыту успешных компаний – сделать форму регистрации подобно той, что предлагает компания Facebook, а форму оплаты товара то, что представлена на сайте Amazon.
Алексей Шевцов, арт-директор WebProfy (Kokoc Group): “Заполнять информацию на смартфоне (пока еще) не очень удобно, так что, по возможности, не стоит заставлять пользователя этим заниматься. Впрочем, есть, во-первых, инструменты, позволяющие этого избежать (авторизация через соцсети, например), во-вторых, формы можно спроектировать таким образом, чтобы их заполнение вызывало меньше затруднений.”
6. Плохо реализованная возможность финальной покупки
Ряд магазинов, особенно это касается магазинов продажи модных товаров, одежды, аксессуаров имеют такую особенность: они полно и удобно представляют информацию о товаре, но при этом имеют совершенно неприемлемую форму добавления продукта в корзину и его оплаты. Разработчики часто создают такую же форму корзины, как и для веб версии магазина, не учитывая особенности мобильных устройств (например, предлагают пользователю указать информацию о городе доставки и почтовом индексе отправления, хотя только по индексу можно определить город доставки).
Александр Гладнев, консультант по маркетинговым коммуникациям: “Очень часто на своих экранах телефонов мы видим уменьшенные копии обычных сайтов, дважды тапаем по ним и видим в чуть большем размере. Но это всё ещё тот же самый дизайн, который разрабатывался для просмотра на большом экране. Технология responsive / adaptive design предполагает, что сайт не просто пропорционально уменьшается, но и меняет своё поведение в зависимости от разрешения экрана. Так, обычный трёхколоночный сайт на мобильных устройствах с относительно большим экраном становится двухколоночным, а на устройствах с маленькими экранами – одноколоночным (соответственно, три колонки отображаются не сбоку друг от друга, а сверху-снизу). Соответственно, товары в каталоге тоже сперва отображаются по несколько в ряд, а на самых маленьких разрешениях – уже строго друг под другом. Не меньшим «грехом» можно считать и принудительное переключение человека в мобильную версию сайта без возможности вернуться в обычный режим (да-да, некоторым привычнее или по каким-то причинам удобнее пользоваться масштабированной обычной версией сайта, нельзя отнимать у человека такую возможность). Оптимальным решением можно считать не разработку отдельной, мобильной версии сайта, а «научение» сайта менять своё отображение, адаптируясь под размер экрана человека”.
7. Плохо продуманная навигация
Мобильные пользователи расширяют опыт мобильных покупок. Однако большинство мобильных сайтов имеют неудобную систему навигации просмотра продуктов, продуктов одной категории или одного типа. Хорошим примером успешной реализации сайта под мобильные устройства является сайта американского магазина продажи техники Best Buy. Посмотрите, насколько он удобен для просмотра с мобильного устройства и как хорошо продумана возможность передвижения пользователя по сайту. Несмотря на то, что магазин предлагает большое количество товарных позиций, пользователь без труда может найти то, что интересно ему и совершить покупку.
Алексей Шевцов, арт-директор WebProfy (Kokoc Group): “Адский князь всех ошибок, власть которого распространена далеко за пределами мобильного, веб и вообще дизайна. Как правило, происходит от того, что создатели интерфейса не ставят себя на место пользователей и не пытаются проделать их путь”.
Кирилл Соколов, UI-специалист компании Е96.ru: “Использование сайта на телефоне или планшете отличается от десктопного. На мой взгляд, важнее всего два момента: физические размеры и соотношение их к способу взаимодействия. Экран телефона и планшета меньше, а пальцы сильно уступают курсору в точности. Тем не менее, для интернет-магазина важно иметь на мобильной версии полноценный удобный механизм перемещения по сайту. От того, насколько продумана навигация, зависит потенциальная возможность покупки.
Самые важные элементы должны быть видны, интуитивно понятны и расположены в ожидаемых местах. Размер навигационных элементов обязан учитывать характер взаимодействия с ними, зона тапа должна быть комфортна для попадания по ней подушечкой пальца. Из этого вытекает другая проблема, соседние элементы порой располагаются слишком близко друг к другу, что вызывает ошибочные нажатия. При этом не нужно забывать про логику и структуру, они должны быть понятными, последовательными и не слишком утомительными, чем короче путь пользователя до цели, тем лучше, как бы говорит нам кэп.
Основные действия должны быть доступны в любом месте сайта, например, переход в корзину, поиск. Приятным бонусом, которым некоторые пренебрегают, является возможность вернуться на шаг назад, например из карточки товара к списку товаров. Кликабельные изображения, относящиеся к ссылкам, наиболее удобны для нажатия, чем текстовые строчки. Но до сих пор иногда встречаются сайты, где по фотографии товара нельзя перейти в его карточку. Вообще, если есть возможность где-то предвосхитить желание пользователя и подставить в нужное место нужный навигационный элемент, нужно обязательно это делать, но без фанатизма, конечно. Обвешивать все ссылками по поводу и без – плохая практика”.
Кейсом поделился Павел Козловский, создатель программы “Домашняя бухгалтерия”:
“Недавно мы перезапустили сайт компании, у которого раньше не было нормальной мобильной версии. Дело в том, что программы у нас изданы под Windows, Android и iOS, и на сайте долгое время была доступна покупка под сверхпопулярную Android-версию с версией страницы только под обычный ПК… А при этом с мобильных и планшетов у нас почти 15% трафика, как и в среднем в Рунете.
По сути, это была ошибка навигационная, влияющая на загрузки и покупки. Распознали мы её, как водится, при тестировании сайтов конкурентов с телефонов. Но вот уже месяц на сайте – адаптивный дизайн, когда при заходе с конкретной ОС выдается сразу предложение скачать соответствующее приложение (apk с сайта для Android или перейти сразу в AppStore для iOS). Конверсия на мобильных у нас существенно подросла – теперь 20-25% мобильного трафика превращается в загрузки, и ждем окончания месяца, чтобы подвести итоги по конверсии в покупки”.
