Рубрика: UI / UX дизайн

Mobile First: да или нет?

Вступление

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

Что такое Mobile First и в чем его суть

Понятие Mobile first (в переводе самого Гугла означает индексирование, которое направлено на мобильные устройства) — это новая концепция индексации, следуя которой для ранжирования сайтов Google использует мобильные версии страниц веб-сайтов. Раньше Гугл сперва учитывал десктопную версию, а оптимизация под смартфоны лишь улучшала ранжирование.

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

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

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

Есть ли разница между адаптивным дизайном и Mobile First

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

  • Адаптивный вариант. При создании веб-проекта создают статичные макеты, рассчитанные на разные гаджеты. Шаблоны имеют структуру расположения и размера зависимо от экрана. Как правило, создают стандартные макеты от 320 до 1600 пикселей. Специальные скрипты выявляют размеры дисплея конкретного посетителя и открывают подходящий шаблон. В таких макетах учитывают особенности разных моделей устройств. Допустим, для больших экранов — создают только горизонтальный вид, а для гаджетов — возможность переключения между горизонтальным и вертикальным видом.
  • Вариант Mobile First. При таком раскладе сначала создается и открывается версия для гаджетов. После этого она изменяет масштаб зависимо от ОС, вебмастер сможет вносить в дальнейшем правки, добавляя дополнительные опции и работать со стилями.

Как работать с Mobile First

Работа по такому принципу проходит так:

  1. Создается дизайн, чтобы на смартфоне всё смотрелось красиво. Основываясь на нарисованном дизайне пишут код. Либо код и сам дизайн создают параллельно исходя от общего видения.
  2. При необходимости создают отдельный вариант версии для ПК, если необходимости нет — делают так, чтобы мобильный дизайн мог «увеличиваться» до больших размеров.
  3. При внесении правок работают сначала с версией для смартфонов и только потом переходят к компьютерной версии.

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

Особенности проектирования

Делаем акцент на контенте

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

Возьмем для примера торговую онлайн площадку. В поступках посетителей есть следующие закономерности:

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

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

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

Создаем визуальную иерархию

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

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

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

Упрощаем навигацию

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

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

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

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

  • посетители на сайте чаще взаимодействуют с навигацией в нижней части экрана (правило “большого пальца” в действии);
  • такое размещение навигации на сайте напоминает интерфейс множества приложений, поэтому человеку будет проще ориентироваться на веб-проекте.

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

Создаем интерфейс User-friendly

Комфорт посетителя – важное требование Mobile First. Создав идеально проработанный UX, можно рассчитывать на то, что человек вернется на вебсайт еще ни один раз.

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

  • Расположение содержимого в области просмотра;
  • Грамотная типографика;
  • Нацеленность на сенсор;
  • Устранение контента, который не воспроизводится;
  • Оптимизация всех виджетов сайта;
  • Уменьшение ненужный пользовательских действий.

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

Где нужно применять

Mobile First можно использовать абсолютно везде, если в этом есть необходимость: в информационных и новостных сайтах, интернет-магазинах, сервисах доставки и дистанционных услуг, службах такси, социальных сетях и сервисах. Реализовать mobile first можно абсолютно на любом проекте, если перед вами стоит главная задача – обеспечить пользователям удобный просмотр контента со смартфона.

Плюсы и минусы Mobile First

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

Плюсы:

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

Минусы:

  • Временные и финансовые затраты на разработку mobile first;
  • Визуальное оформление весьма ограничено.

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

Продвигаем мобильное приложение: бесплатно и платно

Вступление

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

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

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

Что такое performance-маркетинг

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

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

Чаще всего Performance-маркетинг используется при бюджете на рекламу в 200 тысяч рублей и более. Хотя и при более скромном финансировании с его помощью можно орудовать базовыми инструментами: например, отслеживать, какое финансирование требуется тому или иному каналу, или смотреть статистику по эффективности инструментов.

С помощью Performance-маркетинга можно:

  • измерить результаты эксплуатируемых каналов по рекламе;
  • оценить бизнес-показатели: CPA и ROI;
  • в реальном времени повлиять на результаты продвижения; 
  • синхронизировать работу всех каналов продвижения (SEO, SMM, email-рассылки, реклама в СМИ).

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

Важно понимать, что Performance-маркетинг будет эффективен только после продолжительной настройки всех каналов продвижения и детального тестирования продукта и его целевой аудитории. И в этом вам с радостью помогут специалисты DIART AGENCY. К ключевым компетенциям digital-агентства относятся как разработка продающей структуры сайта или лендинга (на основе CJM и прототипа), так и создание рекламы и дизайна для любого бизнеса. И кстати, что немаловажно, с DIART AGENCY вам гарантированы внимательное отношение к проекту и скрупулезность в проработке каждой детали.

Основные понятия

Для успешного продвижения приложения в магазинах — в App Store, Google Play и их менее популярных аналогах — нужна продуманная стратегия. Еще до начала работы над приложением важно понимать, кто им будет пользоваться, на какую целевую аудиторию оно рассчитано. А после успешного попадания в ЦА необходимо постоянно продвигать приложение, не давая ему затеряться среди конкурентов на рынке. Именно на этом этапе подключается performance-маркетинг.

Основные понятия мобильного performance-маркетинга: 

  • магазины мобильных приложений («сторы»): App Store, Google Play и т.д.;
  • трекинговые системы («трекеры») для отслеживания установок приложения;
  • бесплатные каналы распространения мобильных приложений (собственный сайт, SMM, реклама в СМИ и т.д.);
  • платные каналы распространения мобильных приложений (Яндекс.Директ, Google Ads и т.д.).

Магазины мобильных приложений («сторы»)

App Store и Google Play — крупнейшие магазины приложений, продвигающие аппы для iOS и Android соответственно. С их помощью возможен охват огромной потенциальной аудитории. Но стоит учитывать, что и конкуренция на этих сторах очень высока. 

В то же время существуют альтернативные магазины приложений — ряд популярных аналогов Google Play (Aptoide, Amazon Appstore, GetApps и многие другие) и целая коллекция китайских сторов, появившихся из-за запрета на сервисы компании Google в Китае. 

При выборе стора/-ов для размещения приложения нужно: 

  • обратиться в тем сторам, которыми пользуется целевая аудитория приложения (например, для Китая это будут TencentMyApp, а для Кореи — SK T-Store);
  • выбрать стор в зависимости от того, на публикации какого типа приложений он специализируется (это могут быть мини-игры, утилиты, бизнес-приложения и т.д.).

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

Трекинговые системы («трекеры»)

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

Для качественного анализа действий пользователя трекинговыми системами используются три механизма:

  • Install Referrer — метод атрибуции, основанный на добавлении уникального параметра, который передается по ссылке. 
  • Device ID Matching — метод атрибуции, сохраняющий первоначальный идентификатор пользователя при клике на баннер и сверяющий его с параметрами девайса при установке приложения. 
  • Fingerprint — метод атрибуции, основанный на сборе информации об устройстве в момент прохождения редиректа. 

Мобильные трекеры играют незаменимую роль в performance-маркетинге. Они помогают маркетологам:

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

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

Бесплатные каналы распространения мобильных приложений

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

Представьте, что вы выложили свое мобильное приложение в один из самых популярных доступных магазинов (App Store или Google Play). У приложения хорошие отзывы, отличная оценка, но…оно все равно не достаточно востребовано и запланированные вами прогнозы по скачиваниям и установкам не оправдываются. Что же делать? Обратиться к каналам привлечения бесплатного трафика. 

Бесплатно привлечь внимание к приложению, рассказав о нем потенциальным клиентам, можно разными способами, среди которых: 

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

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

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

Платные каналы распространения мобильных приложений

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

  • Google Ads — контекстная онлайн-реклама для размещения на страницах с результатами поиска Google;
  • Яндекс.Директ — сервис для размещения контекстной рекламы на Яндексе; 
  • Facebook Ads — сервис для запуска рекламных кампаний на Facebook (и, соответственно, Instagram);
  • myTarget — платформа для настройки рекламы во ВКонтакте, на Одноклассниках, Моем Мире и других социальных сетях от Mail.Ru Group.

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

Анализ конкурентов

Для начала разберемся, почему Performance-маркетинг предполагает проведение анализа конкурентов. Представьте ситуацию: ваше мобильное приложение уже год на рынке, и дела вроде бы идут неплохо. Есть стабильные продажи, от клиентов регулярно поступают позитивные отзывы о сервисе…А теперь обратите внимание на два ключевых параметра: LTV и CRR (посмотреть их можно с помощью инструмента Google Analytics).

  • LTV (LifeTimeValue) — параметр, демонстрирующий жизненную ценность клиента. То есть ту прибыль, которую бизнес получит от пользователя за все время работы с ним. 
  • CRR (CustomerRetention) — параметр, демонстрирующий способность бизнеса удерживать клиента. 

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

Как анализировать конкурентов

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

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

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

MVP

Полезным шагом в подготовке конкурентного приложения будет создание MVP (Minimal Viable Product) — тестовой версии приложения. С ее помощью бизнес может:

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

MVP поможет оценить рабочие гипотезы и получить первые отклики от пользователей.

Правила ранжирования в App Store и Google Play

Успешность и популярность приложения сильно зависят от качественного ранжирования в магазинах App Store и Google Play. На первый взгляд, может показаться, что эти два магазина похожи, но это не совсем так. Да, в обоих можно совершать покупки программ, книг, фильмов. Но ранжируются приложения в системах по-разному.

Сравним параметры ранжирования App Store и Google Play и выясним, какие правила ранжирования им свойственны:

  1. Название. 
  • В App Store под поисковый индекс попадает до 30 символов. 
  • В Google Play больше – до 50 символов.
  1. Подзаголовок. 
  • В App Store подзаголовок играет не последнюю роль, занимая до 30 символов. 
  • В Google Play отсутствует возможность добавления подзаголовков.
  1. Ключевые слова. 
  • В App Store ключевые слова должны содержать не более 100 символов + употребляться в верных словоформах. 
  • В Google Play поля под ключевые слова отсутствуют, нельзя использовать брендовые запросы (в том числе брендовые запросы конкурентов), выдача приложений персонализирована. 
  1. Краткое описание приложения. Доступно в обоих магазинах. 
  • В App Store под описание проекта выделяется 170 символов, но оно не попадает под индекс. Плюс его можно менять. Указав, например, что на товар действует скидка. 
  • В Google Play под описание продукта выделяется всего 80 символов. Менять релиз нельзя, зато он индексируется.
  1. Отзывы. 
  • В App Store отзывы не индексируются. 
  • А Google Play отзывы индексируются. Причем алгоритм учитывает ключевые слова в комментариях. Значит, ключи можно вставлять прямо в текст отзыва — ранжирование будет лучше.
  1. Локализация. 
  • В App Store есть понятия главной и дополнительной локализации у одной страны. Для пользователя это означает, что в зависимости от настроек языка на устройстве, он будет видеть разные страницы приложения с разными метаданными. Для разработчика — что при индексации приложения поисковым движком App Store будут учтены текстовые индексируемые поля.
  1. Встроенные покупки. 
  • У App Store встроенные покупки — это одна из главных фишек. На экране приложения пользователь видит возможность приобрести предмет в игре, подписку, какую-либо услугу. Каждая услуга имеет название, иконку и краткое описание. Подобные предложения занимают больше места на экране юзера, что положительно сказывается на общей конверсии. 
  • В Google play встроенные покупки отсутствуют.

Продвижение в App Store

Чаще всего продвижение приложений на App Store осуществляется тремя основными способами: 

  • через работу с ключевыми словами и фразами;
  • через вывод приложения в топ по популярным запросам (Trending Searches);
  • с помощью выхода в ТОП App Store или по категориям. 

Каждый из этих способов эффективен, имеет свои особенности и достоин отдельной статьи. Но сегодня мы хотим порекомендовать вам 5 неочевидных советов для продвижения приложения на App Store:

  1. Запустите MVP (то есть приобщите людей к тестированию!). На вас будет работать сарафанное радио, эффект эксклюзивности и открытость перед публикой. Люди почувствуют себя частью проекта, а, значит, неминуемо установят ваше приложение.
  2. Работайте с  медиа. Найдите подходящую по тематике площадку, наймите хорошего копирайтера или журналиста. Пусть он пишет обзоры на приложение, делает гайды и создает рекламные материалы.
  3. Используйте раздел «Что нового». Добавляйте в этот раздел информацию о продукте, об обновлениях, об исправленных ошибках. Делитесь новостями с людьми — сделайте товар живым и постоянно развивающимся.
  4. Поработайте над видимостью приложения в App Store. Действуйте, как разработчик, занимаясь ASO-продвижением мобильного приложения.
  5. Продвигайте приложение в интернете. Социальные сети — это хорошая реклама без больших затрат. Растите аудиторию, рассказывайте про продукт во ВКонтакте, Instagram и т.д.

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

Продвижение в Google Play

Выделим основные моменты, на которые следует обратить внимание при продвижении продукта в магазине от Google:

  1. Выбор категории для приложения. Гугл рекомендует выбирать категорию товара максимально точно для лучшего ранжирования. 
  2. Используйте фичеринг. Фичеринг позволяет бесплатно попадать в тематические подборки на главной странице магазина. Размещается предложение автоматически и двигается по площадке с помощью алгоритма. 
  3. Раздел «Выбор редакции», в который попадают лучшие приложения площадки. Раздел обновляется 1 раз в 3 недели или месяц, зато гарантирует рост скачиваний и популярности.
  4. Бесплатные рекомендации. Чем чаще ваше приложение скачивается, тем активнее магазин продвигает его.

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

Заключение

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

Используйте их аккуратно, анализируйте полученные результаты и не переставайте двигаться вперед!   

Как адаптировать сайт под мобильные устройства: пошаговая инструкция

Вступление

Сегодня больше половины транзакций в сети осуществляются с использованием мобильных устройств. Согласно статистике «Similarweb Introduces», мобильный трафик за период с 2017 по 2021 год уже вырос на 50%. И продолжает неуклонно расти.

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

Изображение: maestro / shutterstock.com

Проблемы, которые решает адаптация сайта

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

Проблема 1: Некорректное отображение текста и элементов

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

Проблема 2: Отсутствие популярности ресурса

Адаптированный сайт, будучи простым и приятным в использовании, не отталкивает потенциального клиента, а привлекает его, заставляя посещать сайт снова и снова. Посетители особо удачных адаптированных версий сайта советуют его знакомым по принципу сарафанного радио: «Смотри, как удобно они сделали!».

Проблема 3: Низкое ранжирование сайта в поисковой выдаче

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

Изображение: maestro / shutterstock.com

Проблема 4: Низкая конверсия

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

Проблема 5: Неработающий таргетинг

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

Приступаем к адаптации

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

Существует три основных вида адаптации сайта:

  • Создание адаптивного дизайна. 
  • Преобразование сайта в мобильную версию.
  • Создание динамической демонстрации. 

Давайте рассмотрим каждый из способов по отдельности, выделим их преимущества и недостатки.

Создание адаптивного дизайна

Адаптивный дизайн — самый простой и эффективный способ общей адаптации веб-ресурса. Его суть состоит в том, что сам по себе код сайта HTML остается без изменений. Наша задача — видоизменить дизайн сайта, сделав его адаптивным.

Изображение: maestro / shutterstock.com

Для этого мы можем:

  • Значительно увеличить шрифт текста, представленного для ознакомления посетителям сайта.
  • Разделить дизайнерские блоки на сайте (при их наличии), уменьшив их количество по горизонтали (это избавит посетителя от нужны листать сайт влево-вправо).
  • Сделать контекстное меню открывающимся/всплывающим, не забыв при этом сделать каждый пункт меню читаемым.
  • Уменьшить формат изображений и GIF-изображений на сайте до такого, какой будет удобен посетителям для просмотра с экрана их смартфонов.
  • Сделать маркированные списки на сайте доступными для прочтения и восприятия (для это цели их часто приходится видоизменять).

Теперь пошагово выполняем каждое из указанных действий:

  1. Открываем доступ к коду страницы (или ее исходному ресурсу). Речь идет о параметрах CSS, JScript, изображениях всех форматов и тому подобное.
  2. Вписываем в код страницы специальный метатег под названием «Viewport». Он позволит нам настроить ширину страницы под нужды того или иного устройства, в нашем случае — мобильного. Параллельная переадресация при использовании этого метатега самостоятельно не применяется.
  3. После инжекта метатега (HTML-код которого Вы легко можете найти в открытых источниках), создаем разметку и настраиваем CSS-фреймворк, используя инструкции и свойства кода.

ВАЖНО! Каждое из перечисленных действий выполняется вне зависимости от типа сайта и его дизайна. Случается, что полученная веб-версия становится более компактной благодаря смещению формата по горизонтали, но не становится адаптивной из-за наложения блоков друг на друга и некорректного переноса шрифтов.

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

Изображение: Десктопная версия сайта логистической компании / allitec.ru
Изображение: Мобильная версия сайта логистической компании / allitec.ru

Что мы получаем в итоге? Узнаваемый при просмотре с экрана мобильного телефона или планшета сайт. 

Создание мобильной версии сайта

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

ВАЖНО! При создании мобильной версии сайта обязательным условием станет вписывание в код сайта тега типа «Link rel=»alternate» с добавлением действующего адреса мобильного сайта. Зачем нужен этот тег? После создания второй веб-страницы и присвоения ей доменного имени, автоматическая система идентификации поисковых систем (у Яндекса и Гугла уж точно) посчитает оба сайта за дубликат одного и, скорее всего, заблокирует один из доменов к выдаче. У поисковиков это называется антиспам-политикой.

Динамическая демонстрация

Динамическая демонстрация по своей сути объединяет оба предыдущих метода адаптации. При ее использовании вы сохраняете единственный адрес для мобильной и ПК-версий сайта, но код формата HTML все же меняется.

Каждый из трех, приведенных выше, способов адаптации сайта под мобильные устройства

Как самостоятельно адаптировать сайт под мобильные устройства

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

Также вы можете использовать специальные онлайн-конструкторы по созданию сайтов. Самым популярным из них является к Tilda. 

Создание сайта на Tilda

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

Изображение: Tilda / tilda.ru

В интерфейсе Tilda вы сможете найти вкладку по созданию сайтов для мобильных приложений. На сайте реализован достаточно удобный пользовательский интерфейс, а также имеется доступный FAQ. К основным преимуществам сервиса относятся: 

  • широкий инструментарий, доступный каждому;
  • понятный пользовательский интерфейс;
  • высокая скорость работы;
  • интересный выбор дизайнерских решений (например, шрифты и оформление блоков);
  • выбор шаблонов для ориентирования.

Вместе с тем, сервис обладает и рядом особенностей:

  • ежемесячно взимаемая плата за использование расширенных функций сервиса;
  • принадлежность сайта платформе Tilda и использование ее внутреннего движка;
  • ограниченный функционал для создания объемных многостраничных сайтов;
  • ограниченное место на хостинге.

Другие конструкторы сайтов

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

  • Wix.com;
  • uKit.com;
  • Nethouse.ru;
  • Конструктор сайтов от Tinkoff.ru;
  • Bitrix24.ru.

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

Как проверить готовый сайт на адаптивность

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

При работе с браузера Google Chrome просто нажмите F12 и выберите соответствующую функцию в «Инструментах разработчика». Аналогичная процедура применяется в Yandex Browser.

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

Изображение: source / shutterstock.com

Заключение

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

  • Большинству проектов подходит адаптивный дизайн, как самый простой в реализации способ адаптации, не требующий глубоких знаний мобильной верстки.
  • Конструкторы мобильных версий — тоже популярный вариант, подходящий многим проектам. Однако этот способ всегда сопряжен с необходимостью оплаты сервиса и определенными функциональными ограничениями.
  • Сайты на WordPress и других известных системах проще всего адаптировать с помощью встроенных шаблонов, плагинов.
  • Для крупных сложно сконструированных порталов чаще всего используют отдельный поддомен для мобильной версии ресурса.  

За экспертной оценкой ресурса и помощью в адаптации обращайтесь в наше агентство. Мы уже много лет помогаем компаниям адаптировать ресурсы под смартфоны и планшеты. А потому дадим экспертную оценку вашего сайта, поможем с выбором оптимального способа адаптации и его реализацией. Вам понравится работать с нами! 😉

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

CJM: 10 советов по созданию эффективной карты пути клиента

Вступление

Отличный метод поиска реальных способов увеличения конверсий и продаж вашего продукта — построение Customer Journey Map. С помощью CJM вы дадите пользователю то, что ему действительно нужно, а не то, что ему нужно по вашему мнению.

Что такое Customer Journey Map

Customer Journey Map (Карта Пути Пользователя»/«Карта Путешествия Пользователя) —  метод развития продукта, основанный на изучении особенностей ЦА и ее потребностей.

Проще говоря, CJM — это описание пути пользователя от момента, когда он еще не знает о продукте, до совершения покупки и дальше.

В ходе следования по CJM каждый пользователь проходит несколько контрольных точек: 

  • Осознание (от англ. Awareness): «Пытаюсь понять, что мне нужно»;
  • Изучение (от англ. Consideration): «Уже осознаю свою проблему и ищу ее решение»;
  • Принятие решения (от англ. Decision): «Знаю, как решать проблему, ищу у кого купить нужное»;
  • Покупка (от англ. Purchase): «Покупаю»;
  • Лояльность (от англ. Loyalty): «Покупаю снова и снова»;
  • Готовность защищать бренд (от англ. Advocacy): Покупаю снова и даже рекомендую». 
Изображение: maestro / shutterstock.com

Зачем нужна CJM

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

Продуманная CJM дает ответы на ряд важнейших вопросов о взаимодействиях ЦА и продвигаемого продукта: 

  • В каких точках ЦА соприкасается с продуктом?
  • Как разные сегменты ЦА взаимодействуют с продуктом?
  • Как ЦА идет к своим целям и какие испытывает эмоции в ходе следования по пути? 
  • Где барьеры, которые мешают представителям ЦА совершить покупку? 
  • Как помочь ЦА быстрее переходить от одной контрольной точки к другой? 

Построение эффективной CJM возможно только на основании детального исследования ЦА продукта. В процессе исследования ЦА разделяется на категории: 

  • Социальные: возраст, социальное положение, пол, доход, национальность, религия, должность, образование.
  • Географические: место жительства, работы.
  • Поведенческие: сроки принятия решения о покупке, место покупки, склонность к спонтанным покупкам, периодичность потребления товара.
  • Психологические: жизненная позиция, мотивация, эмоциональный фон при оформлении покупки продукта, ценности.
  • Сегменты рынка (B2С, B2B или B2D): размер закупок, сезонные изменения, отрасль бизнеса, потенциал покупателя, размер выручки.
Изображение: maestro / shutterstock.com

Каждый бизнес имеет свою индивидуальную CJM, построение которой требует глубокого анализа продукта и целевой аудитории. Провести детальное исследование с полным погружением в специфику проекта помогут специалисты digital-агентства DIART AGENCY, представив карту пути клиента в любой удобной форме (в виде таблиц, графиков и/или схем). 

Когда без CJM не обойтись

Применение анализа Customer Journey Map возможно на любом этапе развития вашего продукта и компании в целом. Но особенно серьезное влияние на работу организации CJM оказывает в следующих случаях:

  • Этап «Старт производства продукта. Когда бренд только выходит на рынок, анализ целевой аудитории и точек ее соприкосновения с продуктом поможет правильно позиционировать компанию.
  • Этап «Уже есть накопленная статистика». Бизнес находится на рынке какое-то время и имеет некоторый объем продаж. Анализ Customer Journey Map помогает скорректировать УТП, проанализировать правильность позиционирования и соответствие характеристик товара запросам покупателей.
  • Этап «Есть препятствия». Компания уже давно существует на рынке. Появилась потребность в анализе повторных обращений для возвращения большего процента покупателей.

Customer Journey Map — это комплексная работа по исследованию пользовательского опыта, как оффлайн, так и онлайн. Тогда как для анализа поведения клиентов непосредственно в интернете выстраивается специальная User Journey Map.

Как составить Customer Journey Map

Действуйте поэтапно, чтобы не ошибиться в построении CJM. Только последовательное прохождение всех шагов позволит правильно проанализировать психологию ЦА и сформировать эффективную Customer Journey Map.

Шаг 1. Определите цель

Определите итоговую цель исследования перед началом составления CJM. От итоговой цели зависит постановка вопросов для фокус-группы и контекст анализа реакции ЦА на продукт бренда. 

Среди целей могут быть:

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

Шаг 2. Соберите информацию о ЦА

Собирая информацию о ЦА, избегайте обобщенных характеристик. Постарайтесь составить детальный «портрет» каждой группы ЦА:

  • подготовьте анкету, отвечающую поставленным целям;
  • соберите данные клиентов (при необходимости мотивируя их с помощью бонусов, акций и других «плюшек» за активность);
  • проанализируйте полученные данные. 
Изображение: maestro / shutterstock.com

Шаг 3. Сегментируйте аудиторию

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

Шаг 4. Проанализируйте каналы и стадии взаимодействия с брендом

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

Среди стадий взаимодействия бренда и клиента выделяют:

  • возникновение потребности у клиента: «проблема»;
  • поиск пути решения проблемы: выбор подходящего предложения; 
  • возвращение за повторной покупкой. 

Знакомство с продуктом начинается с поиска способа удовлетворения потребности и углубляется по мере прохождения клиентом всего пути от формирования задачи до ее решения.

Шаг 5. Найдите барьеры и способы их преодоления

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

Шаг 6. Оформите Customer Journey Map

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

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

10 советов для создания эффективной CJM

  1. Составляйте индивидуальные «портреты» клиентов. При анализе ЦА избегайте обобщенных формулировок. Напротив, опишите каждого целевого покупателя максимально подробно. Чем лучше вы его представите и поймете, тем больше у вас шансов на продажу. 
  2. Не объединяйте разные сегменты ЦА в одном CJM. Не забывайте, что к B2С, B2B и B2D клиентам необходим разный подход. К примеру, если для B2B-клиента важны скидки на оптовые покупки, то для B2C куда более важными показателями будут скорость доставки и аккуратность упаковки. 
  3. Составляйте CJM с опорой на анализ разных ситуации интереса к продукту.
  4. Составляйте CJM регулярно, чтобы вовремя скорректировать позиционирование компании и не упустить новых и старых клиентов. 
  5. Основывайте УТП (Уникальное Торговое Предложение) на CJM. Детальная оценка ЦА в ходе составления CJM поможет выявить боли клиентов и эффективно их закрыть. 
  6. При выстраивании CJM смотрите на ваш бренд глазами клиента.
  7. Визуализируйте Customer Journey Map так, чтобы не отвлекать от сути работы и полученных данных. Излишне художественное оформление CJM ни к чему. Основная задача: наглядно продемонстрировать результаты исследования. 
  8. Используйте полученные данные при обучении сотрудников работе с ЦА.
  9. Не отрицайте пользовательские оценки вашей работы.
  10. Проанализируйте все каналы взаимодействия.

Почему CJM полезна для бизнеса

Опираясь на результаты, полученные нашими клиентами после составления CJM, мы пришли к двум основным выводам: 

  1. Прибыль растет там, где клиенту легко решить свою проблему сразу. Разрабатывая сайт для логистической компании Allitec Logistics, мы разместили удобную форму расчета стоимости перевозки на главной странице. Теперь заходя на сайт, клиент сразу получает ответ на волнующий его вопрос «Во сколько мне обойдется эта перевозка?».
  2. CJM помогает не тратить деньги компании попусту. Возьмем для примера ту же компанию Allitec Logistics. Благодаря детальной CJM мы выяснили, что ЦА чаще всего интересуются автомобильными перевозками, а уже после железнодорожными, морскими и воздушными. Поэтому наибольшие силы компания сейчас вкладывает в рекламу этого вида перевозок.

Изучайте свою аудиторию, чтобы дать ей по-настоящему нужный продукт! Спасибо за внимание.

Как проходит Юзабилити Тестирование — в крупных компаниях и банках