🇺🇦 Мы работаем: ПН-ПТ: 09:00-18:00 (Киев) Telegram Viber WhatsApp
Киев / Одесса (Украина):+38-098-887-05-49

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

 

Пополнение счета на сайте Life:)

Изучение поисковой выдачи

 

 Изучение поисковой выдачи Life

 

Заголовок ссылки на сайт life.ua выглядит не очень привлекательным. Будет намного лучше, если заголовок будет, например, таким “Пополнение счета Life:) без комиссии”.

 

Целевой URL содержит дважды раздел /popolnenie. Это делает сам адрес нелогичным. И этот элемент в таком виде теряет какую-либо маркетинговую ценность и всю привлекательность. URL должен соответствовать содержанию страницы.
 

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

 

Отсутствие контекстной рекламы Life:) по таким брендовым запросам является большим упущением. Самая главная потеря — уход части пользователей на сторонние сайты. Также при наличии рекламы, об этой аудитории можно будет собирать очень много полезных данных, которые нельзя будет получить при наличии только органического (бесплатного) поиска.

 

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

 

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

 

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

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

 

Вывод: контекстная реклама для компании Life:) обязательна.

 

 

Переходим из поиска на сайт life.ua

http://www.life.ua/ru/popolnenie/popolnenie/

 

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

 Регистр в заголовках на сайте

 

 

Сравните сами, какой текст читается легче и быстрее:

  •  ПОПОЛНИТЬ СЧЕТ МГНОВЕННО И БЕЗ КОМИССИИ

  • Пополнить счет мгновенно и без комиссии

При том, что в первом случае размер шрифта меньше, но занимает он места больше и читается хуже.

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

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

 Размер шрифта в полях ввода данных формы на сайте

Пользователи сайта должны достигать своей цели без каких-либо усилий. Именно поэтому, согласно многим исследованиям по юзабилити (имеются ввиду актуальные исследования 2015 года), шрифт на сайте должен быть не менее 15-16px. А в поле ввода данных — даже более 16px.

 

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

 

 

  1. Сумму пополнения необходимо вводить цифрами. Но можно разместить кнопки с наиболее популярными суммами, которые упростят ввод данных для 80% пользователей.

 

 

  1. Следующий блок “Оплатить с помощью” также неоднозначный. Этот блок должен быть понятен даже самому неопытному пользователю сайта без каких-либо интеллектуальных усилий. В текущем варианте нужно догадаться, что изображения кликабельные. Неопытный пользователь этого не поймет.

 

Было бы лучше, если бы каждый из блоков был подписан как “Шаг 1” и “Шаг 2”. В таком случае было бы понятно, что после внесения телефона следует выбрать способ оплаты. Но способы оплаты разместить по порядку один под другим с крупным текстовым названием и логотипом, расположенным справа от названия. Выбор способа оплаты можно сделать элементом выбора типа “radio”. Если необходимо способствовать популяризации метода oplata.life.ua, то этот пункт должен быть выбран по-умолчанию.

 

 

  1. Блок “Как можно произвести оплату” целесообразней назвать “Другие способы пополнения счета”, поскольку при текущем названии возникает ожидание, что информация в этом блоке касается текущего способа пополнения (в том смысле, что тут разъясняется что нужно делать на сайте, чтобы произвести оплату), а на самом деле к этому способу пополнения эта информация не относится.

"Как можно произвести оплату” или “Другие способы пополнения счета" на сайте

 

 

  1. При переходе по способу оплаты oplata.life.ua необходимо лишний раз нажимать “Далее”, чтобы открылось следующее окно с полями для ввода данных платежной карты. Это бесполезное действие, которое вынужден совершать посетитель. От этого действия следует однозначно избавиться и при переходе сразу показывать поля для ввода данных платежной карты.

 

Использование кнопки далее и оплатить на сайте

 

 

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

 Реализация поля для ввода данных платежной карты

 

 

  1. Выпадающее меню для ввода CVV тоже очень маленькое и его обязательно необходимо увеличить.

 

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

 

  1. После пополнения следует не только уведомить пользователя об успешной операции, но и поблагодарить за пользование сервисом. Помимо этого, на данной стадии можно попробовать достичь какую-то из дополнительных целей:
  • предложить посетителю добавить сайт в закладки, чтобы в следующий раз было проще найти ваш сервис;
  • рекомендовать подписаться/вступить в ваши сообщества в социальных сетях;
  • предложить отправить уведомление на почту или телефон пользователя о необходимости очередного пополнения счета через любой указанный промежуток времени (по умолчанию следует указать 30 дней или предложить на выбор наиболее популярное количество дней);
  • предложить уведомить пользователя всплывающим окном в браузере при снижении остатка средств менее 5 грн на счету (эту опцию можно реализовать только в браузере Chrome и только для авторизованных пользователей).

 

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

Оптимальный размер шрифта для сайта

 

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

 

 

Пополнение счета на сайте Киевстар

 Изучим поисковую выдачу

Продвижение Киевстар в поисковой системе

 

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

 

URL целевой страницы также не оптимизирован и не несет никакой маркетинговой нагрузки, а мог бы при должной оптимизации.

 

Заголовок сниппета зачем-то содержит в себе много вертикальных черточек и указание на Киевскую область и “г. Киев” в таком редком написании с сокращенной буквой “г”, да еще и с точкой. Такая оптимизация вряд ли оправдана, так как пользователь ожидает в первую очередь узнать можно ли пополнить счет по ссылке, каким образом и сколько это будет стоить.

 

Поэтому в первую очередь в заголовке следует попробовать разместить фразы “платежной картой” и “без комиссии” или “0% комиссии” (меньше на 1 символ и цифры со знаком % лучше привлекают внимание, чем предлог “без”).

 

Описание сниппета написано без пробелов. Из-за этого оно очень плохо читаемое и, к сожалению, также как и URL, не несет никакой маркетинговой ценности для пользователя.

 

 

Переходим из поиска на сайт kyivstar.ua

http://www.kyivstar.ua/ru/od-631/mm/recharge/recharge/

 

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

 Ошибки в словах на сайте

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

 

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

 

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

 

После нажатия переходим на страницу стороннего сайта с адресом https://pay.wideup.net/e-comm/kyivstar/ru/

 

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

 

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

 Аудит юзабилити сайта и платежной системы

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

 

  1. Главным недостатком все таки выделим то, что на первом экране присутствует очень много свободного и незадействованного места. При том что поля для ввода реквизитов самой платежной карты и кнопка “Оплатить” вынесены на второй экран.

 

Оценивая то, как использовано пространство первого экрана, можно с уверенностью сказать, что поля для ввода платежной карты и кнопку “Оплатить” можно было с легкостью разместить на первом экране, рядом с текущими полям для ввода Телефона, Счета и Суммы пополнения, не ограничивая пользователя в удобстве работы с последними тремя полями.

 

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

Аудит интерфейса сайта на практическом примере

 

  1. На первом экране ситуация с взаимоисключающими полями данных “Мобильный телефон” и “Номер лицевого счета” аналогична ситуации с этими же полями на сайте life.ua. Незадействованные разделы следует либо затенять, либо же наоборот — дополнительно выделять и подчеркивать только выбранные поля.

 Поля ввода данных номера телефона и номера лицевого счета

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

 

Следует весь важный текст выделить черным цветом. Серым можно оставить неактивные поля на первом экране.

 

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

 Защита данных при реализации формы и полей для заполнения на сайте

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

 

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

 

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

 

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

 

Выпадающий список даты при заполнении данных платежной карты

 

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

 

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

 

Сама же страница благодарности размещена по адресу https://pay.wideup.net/e-comm/kyivstar/ru/

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

 

Для интернет-маркетолога, работающего с сайтом Киевстара, это очень плохо, так как в аналитике сайта kyivstar.ua на странице http://www.kyivstar.ua/ru/od-631/mm/recharge/recharge/все данные об оплаченных счетах будут отсутствовать. Определить какой источник или какой посетитель сколько, как часто и на какую сумму пополняет счет — не будет возможности.

 

 

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

 

 

Пополнение счета на сайте МТС

 Изучим поисковую выдачу

 

МТС в Google, характеристики сниппета.

 

МТС даже не на первом месте в органической выдаче. Такой крупный бренд, а отдает свой трафик другим сервисам. Ну и конечно же — контекстная реклама также отдана на откуп другим компаниям.

 

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

 

Более того, описание в сниппете представляет из себя набор вырванных из контекста фраз. Это говорит о плохой SEO-оптимизации метатегов сайта, а именно — этой страницы.

 

 

Переходим из поиска на сайт mts.ua

http://www.mts.ua/ru/online-services/payment

 

Аудит главной страницы сайта

 

При переходе на сайт МТС мы видим ситуацию, очень похожую с сайтом Life:) — очень много дополнительных ссылок и разделов, куда пользователь может уйти, не достигнув основной цели посещения сайта. В этом смысле сайт Киевстара имеет наилучшую реализацию и не отвлекает посетителя лишними разделами (по крайней мере, на их сайте этих ссылок минимум).

 

Но это не слишком критично.

 

  1. А вот что критично, так это то, что пользователю абсолютно не понятно сколько будет стоить пополнение телефонного счета через сайт МТС. И узнать эту информацию можно лишь нажав кнопку “Подробнее”, расположенную в правом верхнем углу (не думаю, что ее многие там замечают даже не смотря на красный цвет этой кнопки).

 

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

 

  1. Недостает кнопок с цифрами самых популярных сумм пополнения для быстрого выбора.

 

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

 

Рекомендую провести А/В тестирование этой кнопки в двух вариантах — сразу с активным цветом и в текущей реализации, чтобы определиться не отталкивает ли изначально посетителей сайта то, что кнопка “Продолжить” не работает, без заполненных данных.

 

Черный цвет кнопки — не лучшее решение. Кнопка должна быть самым ярким и привлекательным элементом на странице. И ее лучше сделать красным цветом, а не черным или серым.

 

При нажатии на кнопку “Продолжить” пользователь переходит на страницу Приватбанка (при соответствующем выборе способа оплаты), разработанную в стилистике МТС. Данные с номером телефона и суммой оплаты передались на эту страничку и подтянулись в соответствующие поля. Только вот поля для ввода платежных данных следовало бы разместить несколько выше, так как на моем среднем ноутбучном экране они уже находятся в миллиметре от нижней границы экрана, а на еще более узком экране — и вовсе будут за пределами первого экрана, а это уже будет вынуждать посетителя к лишним действиям на странице.

 

Размещение поля для ввода платежных данных на сайте

 

 

Вводим платежные реквизиты, подтверждаем. И видим окно со смайликом и уведомлением о том, что оплата произошла успешно.

 Завершение оплаты на сайте: подтверждение и благодарность.

 

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

 

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

 

Пока что удивляет то, как далеки от идеала сайты трех гигантов рынка операторов мобильной связи. И если сайты Киевстара и МТС хоть немного, но отвечают современным требованиям, то сайт оператора Life:) не только морально устарел, но и очень неудобен в своем использовании, особенно неудобен людям с плохим зрением.
 

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

 

Более того, главный маркетолог Киевстара, Life:) или МТС просто обязан предложить развивать такой сервис, возможно даже под сторонним брендом. Но можно, как вариант, выкупить кого-либо из крупных уже популярных сервисов. Ведь одна из стратегических маркетинговых задач мобильных операторов не столько увеличивать количество клиентов за счет новых пользователей, покупающих свою первую карточку (ведь рынок в Украине уже давно перегрет и таких пользователей крайне мало), сколько за счет переманивания клиентов у других операторов мобильной связи. Причем тех пользователей, которые много разговаривают, то есть много тратят, а значит — часто пополняют счет.

 

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

 

При настроенной аналитике и контекстной рекламе это делается без особого труда, с помощью гибких стратегий ремаркетинга в Adwords, Директ, Facebook и Вконтакте.

 

 

Автор статьи — руководитель «StarMarketing» Сиднев Влад


Об авторе - Вадим Стеблинский

Русский