В мае деловой портал BFM.ru перешел на новый адаптивный дизайн. Изменения коснулись не только внешнего вида. Поменялись принципы верстки и подачи информации. Образно говоря, из «стационарного» ресурс стал «мобильным», более удобным и доступным для самых активных пользователей интернета.
«Деловой портал BFM.ru обновился. Теперь BFM — адаптивный, что обеспечивает удобство и своевременную подачу различного типа информации для нашей аудитории. Работу по веб-аналитике, проектированию и дизайну нового сайта мы доверили лидеру в нише адаптивного дизайна — интерактивному агентству AGIMA».
Аудитория интернета стремительно меняется. Все чаще для выхода в сеть люди используют не традиционные PC, а мобильные устройства. По данным исследовательской группы TNS, аудитория мобильного интернета в течение прошлого года в России выросла более чем в полтора раза — на рекордные 8,7 миллионнов пользователей.
По данным Liveinternet на начало 2014 года, 40% трафика Рунета генерировали мобильные устройства.
BFM.ru — один из крупнейших российских бизнес-порталов с ежедневной посещаемостью более 150 000 человек. Начиная с 2011 года мобильная аудитория BFM выросла в 25 раз. На момент запуска нового дизайна (май 2014 года) для BFM.ru этот показатель достиг почти 20%. Каждый пятый посетитель портала читал новости и статьи со смартфона или планшета.
Учитывая столь быстрый рост мобильной аудитории, крайне остро встала задача по разработке адаптивного сайта.
По данным TNS, в начале 2014 года мобильный интернет стал основным способом выхода в сеть для 18% пользователей в России.
Цель перемен — контент должен корректно отображаться на всех мобильных устройствах при любых типах соединений с интернетом. Другая важная задача — борьба с эффектом «mobile drop off», то есть уходом пользователей с сайта из-за его некорректного отображения на экране.
«Портал уже имел мобильную версию, поэтому нам было важно на цифрах получить доказательство, что разработка адаптивной версии оправдана и имеет ряд неоспоримых преимуществ перед мобильной версией. Благодаря Universal Analytics мы смогли оценить масштаб пересечения аудиторий, потребляющих ресурс со всех возможных устройств».
Принято считать, что мобильные устройства люди используют, прежде всего, для общения и развлечения. Entertainment, безусловно, занимает большую часть мобильного трафика. Но оказалось, что 80% пользователей смартфонов и планшетов постоянно читают с их помощью новости.
По данным Reynolds Journalism Institute, июль 2013.
Аудитория мобильного интернета быстро растет, а информационному ресурсу важно соответствовать меняющимся приоритетам и потребностям своих читателей.
Так что же это такое — адаптивный дизайн? Это целостный подход к созданию макетов, вёрстке и программированию, при котором получившийся сайт одинаково удобно просматривать на любом типе устройств. Ресурс становится универсальным и в то же время персонализированным для каждого отдельного посетителя, так как «подстраивается» под его условия. Речь не идет об отдельных версиях для разных платформ — это один и тот же сайт, но с «гибким» макетом.
Адаптивный дизайн стал трендом после того, как его активно стали применять крупные бренды (среди первопроходцев — Microsoft, Time и Disney). Эту услугу сейчас предлагает едва ли не каждое агентство, занимающееся веб-разработкой, но часто за адаптивный дизайн выдают то, что им не является.
Сайт просто «учат» реагировать на устройство и растягиваться или ужиматься в соответствии с размером и разрешением экрана. При этом интернет-страница может потерять в читабельности и долго загружаться (на маленький гаджет загружается большое количество «тяжелых» элементов, которые просто не отображаются на экране).
Пользователи стали «капризные». 57% из них уйдут с сайта, если загрузка длится более 3 секунд, а 80% этих «отказников» уже никогда не вернутся на ресурс, утверждает компания Strangeloop Networks.
Разработка настоящего адаптивного сайта начинается по принципу mobile first: в первую очередь сайт проектируется для экрана мобильного телефона.
Пункты меню, ссылки и другие элементы навигации должно быть удобно использовать, а страницы — листать пальцем.
Адаптивный дизайн уже давно не связан только с размерами экрана. Это принципиально другой подход к верстке, сценариям взаимодействия сайта с пользователем и интерфейсным решениям.
К настоящему адаптивному дизайну также можно применить определение smart-дизайн: в зависимости от типа устройства он загружается в таком виде, чтобы пользователь сразу же увидел самое интересное и полезное — то, что может его заинтересовать в первую очередь.
Изменение BFM.ru — сложный проект. Только подготовительная часть заняла у специалистов интерактивного агентства AGIMA около полугода. Так как перед редизайном ставились конкретные задачи («увеличение глубины», «повышение CTR рекламных баннеров и анонсов редакционных материалов», «рост лояльной аудитории и повышения уровня энгейджмента»), было необходимо измерить текущие показатели и распланировать достижение целевых значений.
Специалисты AGIMA разработали модель измерения основных KPI и настроили систему Google Universal Analytics. Кроме целеполагания, это позволило нам точнее оценивать интерес пользователей к опубликованным материалам, связать кликабельность баннеров с различными типами публикаций, найти точки роста и организовать редизайн, основанный на данных, а не только опыте и гипотезах.
Почти 25% посетителей используют все типы устройств для посещения сайта в течение дня.
Оказалось, что сайтом BFM с мобильных устройств в основном пользуются те же лояльные посетители, которые уже просматривают его на десктопах. Другими словами, типичный сценарий слушателя Business FM: утром почитать новости на планшете, в машине послушать радио, на работе зайти на сайт с десктопа, а в очереди в супермаркете посмотреть его на смартфоне. Мы понимаем, что таких людей немало и планируем заботиться о них. Например, не показывать в первом экране уже просмотренные материалы, оставляя их доступными для повторного просмотра.
Преемственность и адаптивность интерфейсов на различных устройствах должна упростить жизнь этим людям, а также увеличить их долю в общем количестве посетителей. Учитывая рост мобильного трафика, это даёт прямую экономическую отдачу.
Благодаря глубокой аналитике мы узнали сильные и слабые стороны ресурса: что востребовано аудиторией, а что требует развития. Мы поняли, как меняется желание пользователя продолжать читать сайт BFM в той или иной ситуации.
Мы выявили предпочтения аудитории к авторам, нюансы использования социальных сетей, зависимость потребления информации от времени суток и типа материала. В арсенале команды BFM появилось понятие «информационной насыщенности» — порога, после которого посетитель не в состоянии изучать новую информацию.
Так был создан план развития ресурса для удовлетворения пользовательских предпочтений. В то же время возможности редакции по созданию материалов ограничивали полёт фантазии в архитектуре сайта. Балансируя между этими требованиями и ограничениями и опираясь на данные, мы должны были разработать информационную структуру проекта и макеты адаптивного дизайна.
Анализ собранной статистики влиял даже на выбор тех пороговых значений ширины браузеров, при которых происходит переключение между мобильной, планшетной, десктопной и широкой версиями (так называемые «брейкпойнты»). Мы выбирали их, исследовав размеры экранов устройств, с которых заходят на сайт BFM, и то, как они меняются со временем.
Блоки меняются в зависимости от разрешения
Авария в столичном метро
Обрушение строительной сваи в тоннель произошло на территории, за которую отвечает РЖД, сообщили в Мосгосстройнадзоре
Великобритания запретит водителям пользоваться Google Glass
Зимнее вождение №3 Техника работы рук на руле
SEAT Alhambra: испанский «семьянин» с немецкими корнями
Amazon Kindle 5 выбился в лидеры рынка читалок
Многие решения мы принимали, основываясь не только на прошлых данных, но и на результатах экспериментов. Например, посетителю из Facebook вместо рекомендаций от редакции мы показывали блок со статьями, прочитанными его друзьями из Facebook и проверяли кликабельность.
В итоге мы разработали прототипы, определяющие как внешний вид сайта, так и требования к формату подачи материалов и логике их показа.
Проектировщики должны были, кроме всего прочего, держать в голове ряд требований:
Дизайн, рассчитанный на мобильные устройства, заметен в мелочах: привычное меню в духе мобильных приложений, не отнимающее полезную площадь экрана, увеличенный шрифт. Галереи изображений адаптированы под пролистывание жестами, а всплывающие формы (например, входа на сайт) на мобильном экране разворачиваются внутри страницы, а не поверх неё.
Создавая макеты, постоянно приходилось балансировать между идеями дизайнеров и реальностью в работе редакции BFM.ru. Контент постоянно варьируется: картинки имеют разный размер, а тексты — разную длину. При создании дизайна было необходимо продумать логику растягивания/сжимания и показа иллюстраций на разных разрешениях экранов, переноса заголовков и так далее.
Даже с учётом того, что проектировщики и дизайнеры серьёзно поработали над адаптивностью макетов, разработка потребовала некоторых технических ухищрений. Например, на небольших разрешениях вёрстка сделана «резиновой», а на планшетах и десктопах — фиксированной по ширине.
Сайт создан по принципу «сначала мобильные» («mobile first»), что гарантирует правильное отображение контента на мобильных устройствах, но усложняет разработку. Например, много усилий было вложено в правильную «адаптацию» и показ на мобильных устройствах баннеромест, которые могут быть не заполнены. 
Портал протестирован более чем на двадцати различных устройствах: от популярных гаджетов до устаревших моделей телефонов и планшетов.
Главный результат редизайна — читатели BFM.ru явно оценили адаптивность ресурса. По данным аналитического исследования, проведенного редакцией портала после запуска нового сайта, мы имеем следующие показатели:
- Редизайн не отразился на лояльности аудитории, так как разработчики сохранили преемственность интерфейсов. Сайт удержал пользователей, несмотря на кардинальное обновление внешнего вида.
- Покупатель голосует рублём, а посетитель сайта — кликами. Рекламные места были сохранены, а CTR не только не упал, но даже увеличился на рекламных позициях, которые обеспечивают основную прибыль. Благодаря адаптивности, реклама на мобильных экранах также стала приносить деньги.
«Стремительный рост мобильных пользователей среди нашей аудитории лишь подтвердил правильность принятого решения и показал важность нарастающего тренда. После перехода на адаптив мы видим, что эта растущая аудитория взаимодействует с порталом так же качественно, как на десктопах. Читатели активно используют BFM.ru с мобильных устройств, и мы получаем множество положительных отзывов о новом дизайне».
- Новый адаптивный дизайн улучшил ещё целый ряд ключевых показателей. Один из самых важных: при сохранении структуры трафика, количество отказов снизилось более, чем втрое.
Прямой трафик* (сеансов в неделю)
До редизайна
После редизайна
«Итоги месяца работы в «адаптиве» говорят о том, что операция «редизайн» прошла успешно, а цели, которые мы ставили перед собой, достигнуты. Теперь сайт стал по-настоящему «дружить» с мобильными устройствами. Но, пожалуй, важнее цифр и процентов то, что партнеры — интерактивное агентство AGIMA — сами оказались мобильными, продемонстрировали умение находить проблему, искать нестандартные решения, готовность меняться».
Внедрённые инструменты аналитики открывают большой простор для кластеризации и классификации редакционных материалов. Это позволит, зная отношение конкретного пользователя к определённой теме, сюжету, рубрике, автору и даже характеру повествования, предлагать ему наиболее интересный контент.
В тесном сотрудничестве радиостанции Business FM и сайта BFM.ru был сделан следующий шаг навстречу конвергентному СМИ, когда редакционные материалы портала дополняют и расширяют радийные сводки.
«Мы в AGIMA уверены – дизайн должен опираться на данные веб-аналитики. Любые изменения в дизайне должны быть обоснованы изменившимися потребностями пользователей сайта или новыми задачами бизнеса. В то же время мы часто видим примеры того, что резкие изменения сказываются негативно на лояльной аудитории сайта. Я считаю, у нас получилось решить обе задачи: выпустить новый дизайн портала, показывающий отличный рост в конверсиях и, при этом, не растерять ядро аудитории».
