Разбор сайтов мобильных операторов: «Билайн», «Мегафон», МТС

Прозвонили сайты на пригодность, удобство и удовольствие — в Red Collar.

В этот раз выбрали мобильных операторов, ведь жизнь без смартфона — уже не жизнь. Посмотрим на изнанку и на дизайн, на функциональность и удовольствие одних из самых популярных компаний на рынке мобильной связи: «Билайн», «Мегафон», МТС.

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

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

У нас нет доступа к конверсии, мы не разбираем сайты по метрике. Мы смотрим на ошибки в дизайне, которые, если убрать — пользователь станет довольнее, а бизнес прибыльнее.

• 1 — функции нет на сайте.
• 2 — есть, но пользоваться почти невозможно.
• 3 — есть, но неудобная.
• 4 — есть, удобная, но с косяками.
• 5 — реализована отлично.

Стартуем с основы: сайт должен открываться. Если он тормозит, нечитабелен с мобилки, не юзабелен с телека (а ну кто не смотрел YouTube за праздничным столом, щелкая с пульта?) или табом — дальнейшего опыта пользователь не сможет получить физически.

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

Скорость загрузки главной страницы составляет в среднем 21 секунду при 3g-подключении и 5 секунд при подключении со скоростью в 50 Мбит/c — среднячок из тройки сайтов.

Изображения оптимизированы, однако имеется одна очень важная проблема: как для мобильных, так и десктопных устройств грузятся ненужные изображения. На главной странице есть слайдер, в каждом слайде которого вставлено по 2 изображения — одно для десктопов, а другое для мобильных устройств. Разработчики не стали использовать элемент <picture>, который позволяет не загружать ресурсы, пока они не понадобятся. Если для десктопов это не критично, то для мобилок 1МБ неиспользуемых картинок ощутимо увеличивает время ожидания.

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

Если сломался трекпад на ноуте или лежишь на диванчике и решил полазить по сайту с телека — нажимаешь такой Tab или берешь пульт. И что? Ничего. Для навигации с клавиатуры ничего не сделано, на Tab сайт не откликается. У лузера «Пятерочки» из прошлого разбора хоть ссылки подсвечивались. Для скринридера, который важен слабовидящим людям, тоже мало сделано: описание есть лишь у половины изображений и шлак с заголовками, которые должны формировать структуру страницы.

«Мегафон» лишь чуть не доработал адаптив: перелистывание слайдера на странице вакансий с глюком. Скорость загрузки главной страницы сайта составляет примерно 16 секунд при 3G-подключении и 2 секунды при подключении со скоростью 50 Мбит/с.

В целом всё в порядке и оптимизировано по максимуму, кроме SVG. По сайту можно ходить при помощи Tab, но нет ячейки для смены города, а сам он определяет неточно — это неприятно. Для скринридера заполнены 2 из 18 изображений и ноль ссылок с пустым атрибутом href, нет заголовков первого уровня, а из HTML5-элементов используется только footer.

МТС не подумали о слайдере на приветственном экране: у него есть подписи, и в зависимости от количества контента на телефоне двигается вся верстка, всё прыгает. И на раздел со смартфонами адаптива не хватило: нет системы стилей, отступов, размеров шрифтов, иконок и элементов — всё разное, выглядит очень неопрятно.

Хоть что-то объединяет операторов — у МТС тоже не оптимизированы SVG-файлы. Понадобилось 32 секунды, чтобы загрузить сайт в 3G и 3,5 секунды при скорости в 50 Мбит/с. Самый медленный из тройки. При использовании Tab сайт никак не реагирует на фокусировании элементов, подсвечивается только несколько иконок в середине страницы, а у 90% изображений нет описания для скринридера.

Всё как и всегда: с доступностью у сайтов в России большие проблемы. Мало кто хочет тратиться на время в разработке ради таких вещей, как скринридер и навигация с клавиатуры. Однако тема начинает набирать обороты. Верим, что скоро, как и в Европе, это станет нормой как минимум для сайтов крупных компаний, которыми пользуются десятки миллионов людей.

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

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

У «Билайна», как у всех, тарифы вынесены в шапку и удобно делятся на четыре раздела: «Всё в одном» с пояснением сути пакетных тарифов, «Мобильная связь и интернет», «Домашний интернет, «Домашний интернет и ТВ».

Мы ищем тариф для мобильной связи, и на странице идеальная выжимка по тарифу: все компактно и понятно подано для сравнения, четко вынесены дополнительные бонусы, иконкой объяснено, что можно переводить минуты и SMS в интернет-трафик. Хотя, на наш взгляд, саму иконку лучше подать иначе: сейчас она отвлекает от самой таблицы, её можно вынести влево, а не намекать на интерактив вроде ползунков между цифрами.

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

«Мегафон» решил, что потенциальный клиент знает всё о тарифных планах (или SEO-шники постарались с заголовками). В меню «Тарифы» на главной странице можно выбрать: «Тарифы “Включайся!”», «Тарифы “Тёплый приём”» или «Другие тарифы». Что из этого выбрать, если пользователь ищет выгодный для мобильного интернета тариф — неясно. Ощущение запутанности с первого шага — минус.

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

У МТС все очень странно и в куче: от самого меню в шапке сайта до огромного запутанного каталога. Например, «Тарифы для смартфона» и «Тарифы для звонков» — на первый взгляд и не скажешь, что это разные вещи. Удивились, что «Весь МТС» это название линейки тарифов, а не возможность посмотреть сразу все тарифы. И самое неудобное сравнение тарифов из всей тройки: в превьюшкой карточке информация подана сплошным текстом, выделяется только цена.

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

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

Лучше всех с навигацией и подачей тарифов справился «Билайн»: он действительно думает о первом впечатлении пользователя и сумел весь объем тарифов распределить грамотно и поэтапно: нужный находится в несколько кликов и нет ни грамма негативных эмоций.

Уи-и-и, отпуск! Отправляемся в путешествие по России, например, в Севастополь. Берем Крым, так как в него действительно ездят многие туристы, но со связью могут быть сложности из-за переходного периода. Смотрим, как операторы подают услуги по роумингу, насколько заботятся о потребностях и удобстве клиента, и думают о его переживаниях.

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

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

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

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

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

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

МТС разместил роуминг в «Тарифах и услугах». Внутри страницы атмосферу путешествия пытается создать сверхузенькая стоковая фотка с девушкой на фоне гор, все остальное — сухие функциональные блоки.

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

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

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

На сайте «Билайна» сразу нашли раздел для бизнеса: очень логично и прямо в шапке. Дальше всё сложнее. Если выбирать «Мобильную» связь» из меню и подбирать тарифы, на этапе количества SIM-карт счетчик упрется в 5, а если надо двадцать? Изучив все страницы, решили, что искать стоит в «Крупном бизнесе».

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

Сложно понять, где именно искать сотовую связь, рандомно тыкаем в «Финансы» — попали! Тут есть один пункт про связь, но сколько стоит и на какое количество сотрудников рассчитано, не ясно, надо звонить и выяснять. Всё это очень сложный путь для пользователя, много раздражения и в итоге — ноль информации, все было зря, надо звонить и выяснять с нуля.

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

МТС тоже не стал прятать твои тарифы для связи. Заходим в «Бизнесу» — «Мобильная и фиксированная связь». Сразу предлагают хит продаж, и снова тот же сложный каталог, что и в тарифах для частных лиц. Есть ползунки для для подбора соотношения пакетов связи и интернета, но нет наглядного изменения, все в цифрах, а карточки уползают вверх по странице.

Захочешь подключить — снова звони менеджеру и объясняй с нуля. Удовольствия по нулям.

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

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

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

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

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

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

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

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

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

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

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

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

И-и-и *кнопочный перезвон вместо барабанной дроби* победителем становится «Билайн». Отметим, что он сильно просел из-за своей недоступности в навигации как-либо, кроме мыши и сильно подкачал в простом кейсе на поиск корпоративного тарифа. Зато на голову обогнал всех в важнейшей имиджевой составляющей любого сайта — уникальности и приятных эмоциях, который вызывает сайт во время использования; впечатлении, которое запоминается надолго.

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

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

#разборсайтов