От автора: Стратегия Mobile first! Адаптивный дизайн! Вы слышали подобные заумные термины и броские выражения. Бесчисленные полезные и не очень статьи провозглашают подъем мобильных устройств, а какие практические шаги можно предпринять, чтобы сделать свой бренд более доступным мобильным пользователям?
При рассмотрении проблемы создания веб-сайта согласно стратегии mobile-friendly можно представить владельцу бизнеса множество свидетельств вроде исследования Pew Research, которое показывает, что 56% взрослых людей в США носят с собой смартфоны. Однако хотя общая статистика удобна для демонстрации значимости создания сайтов, заботящихся о мобильных устройствах, она не гарантирует точного понимания того, каким образом пользователи станут взаимодействовать с отдельным брендом в своем телефоне.
Часто команды дизайна и разработки просят переделать дизайн старого веб-сайта и сделать его адаптивным. Рассмотрев уже существующие данные, можно понять то, каким образом лучше всего представить информацию мобильным пользователям. Для невероятно детального анализа мобильной активности Google Analytics предлагает несколько бесплатных свойств с возможностью легкого сравнения активности настольных компьютеров. Если у вас еще не установлен Google Analytics, то сделать это легко. Всего лишь создайте бесплатный аккаунт, а затем Google сопроводит вас по всему процессу. Вам нужно будет разместить на своей странице код слежения перед тем, как начать собирать данные, которые мы рассмотрим в этой статье.
Анализ мобильных посещений через отчеты
Стандартные отчеты в Google Analytics – о том, где большинство людей просматривают страницы. Давайте рассмотрим самые важные из них для мобильной активности.
1. ОБЗОР
Этот отчет (в Audience/Аудитория → Mobile/Мобильные → Overview/Обзор) делит посещения на мобильные, настольные и планшетные. Он пригодится для быстрого просмотра статистики высокого уровня, такой как количество процентов посещений с мобильных устройств.
Предпросмотр мобильного отчета-обзора, доступного на Google Analytics.
Когда клиентов интересует значимость создания статического адаптивного веб-сайта, их часто убеждает простая демонстрация того, сколько посещений их веб-сайта производится с мобильных устройств. Если впечатление значительной части пользователей будет хуже оптимального, то владелец должен понять, что уже настала пора воспринимать их нужды всерьез. По моему опыту, количество активности с десктопов насчитывает всего около 50-60% посещений, при этом количество мобильных и планшетных пользователей вместе составляет остальной процент (почти половину!).
Однако команды разработчиков и дизайнеров должны смотреть глубже, чем в простой обзор. Вот тут-то очень помогает отчет Devices/Устройства.
2. УСТРОЙСТВА
Этот отчет (Audience/Аудитория → Mobile/Мобильные → Devices/Устройства) разбивает статистику на отдельные устройства, используемые для получения доступа на ваш веб-сайт. Эти детали способны помочь вам выделить проблемы применимости в отдельной телефонной, планшетной или мобильной операционной системе. Например, если Galaxy S III демонстрирует значительно большие показатели, нежели iPhone, вам, наверное, потребуется сравнить, как отражается ваш веб-сайт в этих устройствах.
Предпросмотр отчета о мобильном устройстве.
Просматривая отчет о местном бизнесе по предоставлению услуг, чей веб-сайт предназначен для целевых потребителей, я увидел значительно более высокий уровень переходов с iPad’ов, чем с любых перечисленных в списке телефонов. Простое впихивание веб-сайта для настольных компьютеров в браузер смартфона не давало пользователям позитивного впечатления от этого процесса. Однако при размерах планшета веб-сайт оставался для пользователей достаточно большим, чтобы пользоваться формой было довольно удобно.
Как человек, управляющий рекламными онлайн-кампаниями, я обычно обнаруживаю, что верно противоположное – с планшетов смотрят сайты реже, чем с телефонов. Статистика, таким образом, усилила необходимость оптимизации мобильного впечатления и приведения телефонного отображения сайта в норму. В адаптивной разметке, которая устраняет необходимость растягивать и увеличивать размеры для того, чтобы заполнить форму в мобильном браузере, веб-сайт будет работать более эффективно.
Предпросмотр отчета о разрешении экрана.
Но отчет не ограничивается списком устройств. Верху также можно выбрать разные параметры для обзора таких факторов, как разрешение экрана и операционная система. Обзор наиболее часто встречающихся разрешений экрана посетителей поможет вам спланировать контрольные точки адаптивного редизайна сайта. Также можно отметить чрезвычайно высокий рейтинг или слишком маленькое время загрузки сайта для отдельного разрешения, что может оказаться результатом обрезки содержимого при этом размере.
3.БРАУЗЕР & ОС
Этот отчет (Audience/Аудитория → Technology/Технология → Browser & OS/Браузер и ОС) показывает основные применяемые для доступа на ваш веб-сайт браузеры, а также отражает тренды — например, какой браузер чаще используется на телефонах с Android – по умолчанию или Firefox. Кроме того, можно смотреть статистику по операционной системе и даже добавить колонку для ее версии (щелкните выпадающее меню Secondary Dimension/Дополнительные параметры и выберите Operating System Version/Версия операционной системы).
Предпросмотр отчета об операционной системе.
Отчет также способен показать, сколько усилий вам придется приложить, чтобы сделать веб-сайт обратно совместимым. Например, при просмотре статистики веб-сайта одной инженерной компании наша команда разработчиков обнаружила значительное количество посетителей с Internet Explorer 8 (наверное, в тех офисах, чьи ИТ-отделы до сих пор решают, нужно ли переходить с CRT на LCD-мониторы!), и лишь небольшим количеством запросов с мобильных устройств. Эти результаты помогли сфокусировать внимание на создании веб-сайта, подходящего для устаревших систем.
Создание расширенных сегментов
Хотя общие отчеты предоставляют уже достаточное количество полезной информации, расширенные сегменты заставляют вас глубже покопаться в полезных данных о мобильных посетителях. Можно установить разные сегменты для мобильных, планшетных и настольных посещений, и даже более узкое сегментирование по размеру экрана и устройству.
Чтобы отыскать расширенные сегменты, перейдите во вкладку Reporting/Отчетность в своем аккаунте Google Analytics. Ближе к верху страницы (между графиком и панелью меню) щелкните на выпадающую стрелку-указатель возле All Visits/Все посещения. Появится меню, позволяющее просмотреть существующие сегменты и создать новые. В Built-In/Встроенные вы сможете выбрать сегменты по умолчанию для Mobile Traffic/Мобильный трафик и Tablet Traffic/Планшетный трафик.
Однако вам придется создать сегмент специально для трафика с настольных компьютеров (так как единственная встроенная опция собирает десктопы и планшеты в один сегмент).
Создание нового расширенного сегмента.
Выберите Create New Segment/Создать новый сегмент и в появившемся новом меню выберите в левой боковой колонке Technology/Технология. Прокрутите до Device Category/Категория устройства и введите Desktop/Десктоп. Затем сохраните сегмент с тем, чтобы можно было использовать его в своем аккаунте.
Фильтрация сегмента по устройству.
Можно применить расширенные сегменты для отчетов через интерфейс Google Analytics. Я часто пользуюсь ими при рассмотрении общей статистики, потому что поведение пользователя на мобильном устройстве сильно отличается от поведения на планшете или десктопе. К тому же, при обнаружении пика в рейтингах или какой-либо иной проблемы, я часто пользуюсь такими сегментами для определения специфичности данной проблемы для типа устройства. Ниже для обзора при фильтровании приведены некоторые полезные отчеты вплоть до мобильного трафика.
1.СТРАНИЦЫ
Здесь (Behavior/Поведение → Site Content/Содержимое сайта → All Pages/Все страницы) можно определить первые страницы, просматриваемые мобильными пользователями. Эта информация важна для планирования того, какие элементы навигации включить в мобильную версию и для идентификации важных страниц, не обнаруживаемых мобильными пользователями. Вдобавок, сравнивая первые страницы настольных компьютеров и мобильных устройств, можно понять, какие цели преследуются разными видами пользователей. Например, пользователь десктопа может увлеченно рыться в каталоге продукции, тогда как пользователь смартфона просто постарается отыскать адрес вашего ближайшего офиса.
2. СТРАНИЦЫ ВЫХОДА
Этот отчет (Behavior/Поведение → Site Content/Содержимое сайта → Exit Pages/Страницы выхода) показывает последние просматриваемые страницы перед выходом с веб-сайта. Профильтровав до мобильного сегмента, сделайте обзор первых страниц выхода и определите, не мешают ли добиться желаемой цели пользователям какие-либо специфические мобильные проблемы.
Например, мы обнаружили, что многие, особенно мобильные пользователи, покидали веб-сайт нашей компании на тех страницах, где обсуждаются определенные услуги. Чтобы справиться с этим, мы поместили вверху этих страниц заголовки с коротким сообщением «Contact us»/«Свяжитесь с нами».
3. ПОТОК ПОСЕТИТЕЛЕЙ
Этот отчет (Audience/Аудитория → Visitors Flow/Поток посетителей) показывает основные маршруты посетителей по вашему сайту. И снова сравнение мобильного и десктопового поведения должно помочь вам решить, какие страницы при каждом размере устройства следует сделать наиболее заметными.
На одном сайте я обнаружил, что страница About/О нас для пользователей настольных компьютеров была одной из привычных. Однако на мобильном устройстве страница оказалась гораздо ниже в списке, так как ссылка на нее из навигационной панели на телефоне была едва заметна.
4. ИСТОЧНИКИ ТРАФИКА
Этот отчет (Acquisition/Сбор данных → All Traffic/Весь трафик) показывает самые частые источники, посредством которых посетители заходят на сайт. Сравнение мобильного и десктопового сегментов показывает, имеется ли у мобильных пользователей перекос в сторону какого-либо источника. Я часто замечал более высокий процент трафика, идущего с Facebook* на мобильных устройствах, чем на десктопах, так как очень многие заходят в Facebook* через приложение для смартфонов. Такая информированность поможет вам приспособить сообщения в размерах мобильных устройств для тех людей, которые обнаружили ваш бренд посредством социального средства. Например, если это блог, убедитесь, что в мобильном устройстве хорошо видны и нормально функционируют кнопки социальных сетей.
Вдобавок, этот отчет поможет диагностировать проблемы с поисковым движком, индексированным на мобильном устройстве. В 2013г. Google объявил об ужесточении правил и штрафах для веб-сайтов с плохим впечатлением на мобильных пользователей. Если ваш естественный трафик устойчив на десктопах, но очень низок на мобильных устройствах, то вам, возможно, придется поискать факторы, караемые Google’ом, такие как Flash-видео или неисправные перенаправления, переводящие пользователей с субстраницы на домашнюю страницу.
Действуйте согласно данным
Если у вас есть доступ к аккаунту Google Analytics того веб-сайта, который вы переделываете, то у вас будет достаточно материала для принятия дизайнерских и девелоперских решений. Уделите время рассмотрению этих данных!
Если нужно отстоять значимость адаптивного дизайна для какого-либо сайта, начните с процентного соотношения последних посещений с мобильных устройств и планшетов. Перейдите к устройствам, браузерам и размерам экранов, чтобы решить, какие элементы включить в навигацию для мобильных устройств. Воспользуйтесь первыми страницами, потоком посетителей и источниками трафика для определения того контента, который следует выделить, и способов маршрутизации пользователей по веб-сайту при каждом из размеров экрана.
Самое опасное решение при планировании любого веб-сайта – проигнорировать данные о своей аудитории. Любой бизнес, пренебрегающий обеспечением дружественного веб-присутствия для мобильных пользователей наверняка проиграет тем конкурентам, которые сделают это правильно. Команды дизайна, разработки и маркетинга ответственны за использование всех имеющихся данных и ориентирование людей, принимающих решения, на успешную работу веб-сайтов для мобильной аудитории.
Автор: Tim Jensen
Источник: www.smashingmagazine.com
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
