С каждым днем количество адаптивных сайтов растет, и понятие просто модного тренда уже постепенно остается в прошлом. Эффективность данного решения для сайтов становится все более очевидна на примере успешно реализованных проектов. Последние исследования показывают, что 80% пользователей смартфонов совершают различные финансовые операции со своих устройств. А половина из них регулярно совершает покупки в интернете. Хотя конверсия сайта с настольных компьютеров по-прежнему выше, чем с планшетов и смартфонов, но в скором времени они догонят эти показатели, а в прогнозах на 2015 год предполагается, что даже обойдут их.

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

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

Разбираем термин "адаптивный дизайн"

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

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

Рассмотрим элементы дизайна, которые важны для конверсии сайта

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

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

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

Что будем убирать?

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

Как пример, если вы удалили длинный текст, то его можно заменить не только видео или аудио контентом, но и кратким описанием или качественным фото товара.

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

 

  •  Делаем меньшее количество элементов. Так мы сможем увеличить размеры важных для нас элементов, сделав упор на удобство пользования и навигации по сайту с мобильного.
  •  Легкодоступность контента. Что бы одним касанием руки можно было развернуть контент, перелистать страницу и пересматривать фото. Все это удобнее и практичней для пользователей мобильных устройств.
  •  Обзоры и рейтинги. Для самых популярных товаров следует подчеркнуть уровень их надежности, различными рейтингами и, по возможности, короткими отзывами пользователей, или же отображать все это значками и символами.
  •  Цена и оплата. Посетители в первую очередь должны четко видеть цену и основные способы оплаты, а также  иметь возможность легко перейти на страницу с более подробным описанием раздела оплаты.
  •  Бесплатная доставка. Один из наиболее факторов, влияющих на выбор клиента при покупке товаров. Поместить данную информацию следует на самом видном месте, и также отображать на странице товара.
  •  Выделенная кнопка «Заказать». Хорошо проработанная продающая страница товара, с правильным призывом к действию, является основой успешного конверсионного пути.

Все это лишь рекомендации по оптимизации адаптивного дизайна.

 Несколько примеров

 

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

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

 

Как увеличить конверсию?

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

Немного о формах

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

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

Итоги

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