Оптимизация адаптивного дизайна для конверсии
С каждым годом все большее число пользователей смартфонов онлайн-покупки, используя свои мобильные устройства. Проблема в том, что большинство сайтов не оптимизированы для работы с мобильным трафиком. В связи с этим адаптивный дизайн становится не просто модным веянием, но и жизненной необходимостью. Покупатели постепенно привыкают совершать покупки с разных типов устройств. Бренды — привыкают обслуживать клиентов, пришедших с различных каналов. Адаптивный дизайн позволяет учесть интересы и первых и вторых.
Что такое адаптивный дизайн?
Адаптивный дизайн хорош тем, что не нужно создавать отдельные версии сайта для разных типов устройств. Один и тот же сайт приспосабливается к любому размеру экрана (смартфона, планшета, ноутбука и т.д.). Обычно проектирование начинается с адаптивной версии сайта для мобильных. Информацию представляют таким образом, чтобы она имела смысл на разных устройствах.
Но возникает важный вопрос:
Для достижения максимальной конверсии, какие блоки можно сократить, а какие необходимо оставить?
Что оставить
Оставляйте все, что поможет мобильным пользователям быстро найти необходимое. Обязательно сохраните такие элементы, как направление проезда, карта, кнопка «Написать нам» и другие, которые помогут связаться с представителями компании.
Чтение простого текста на мобильном телефоне — утомительное и трудное занятие, поэтому по максимуму используйте доступные медиа-функции: просмотр видео, прослушивание подкаста.
Выделяйте главное. Хороший пример — мобильный сайт красного креста. Пользователи могут сделать пожертвования через SMS, по телефону или при помощи кредитной карты, нажав на одну кнопку.
Что удалить
Оптимизация адаптивного дизайна для мобильных устройств во многом похожа на создание целевой страницы. Необходимо убрать все лишнее, чтобы посетитель не отвлекся от действий, которые вы хотите, чтобы он совершил. В первую очередь, удалите рекламу.
Взглянем на этот пример компании Tria, которая занимается лазерных удалением нежелательных волос.
Обратите внимание, на странице для мобильных устройств изображения представлены в формате прокручиваемого слайд-шоу для облегчения сенсорной навигации. В десктопном варианте — одна большая картинка и несколько миниатюр.
Пользователям мобильных устройств нет необходимости прокручивать вниз страницу, чтобы увидеть содержимое. Голубые вкладки, которые отображаются в десктопной версии, с мобильных устройств открываются при клике на значок плюс.
Обзоры и рейтинги в мобильной версии расположены вверху и в центре и сразу бросаются в глаза. Таким образом пользователи, задумавшиеся о покупке, сразу обратят на них внимание. Тоже самое касается цены и вариантов оплаты. В адаптивном дизайне для мобильных устройств они значительно крупнее. Бесплатная доставка — более заметна. Кнопка с призывом к действию занимает всю ширину экрана. Пользователи, которые захотят добавить товар в корзину, используя сенсорные экраны, точно не промахнутся.
Бренд сфокусировал внимание пользователей на том, что важно для компании, сделав упор на доступность и простоту использования.
Что еще урезать?
Вот другой пример адаптивного дизайна для Часа Земли:
Дизайн для компьютеров и планшетов очень похож и имеет те же элементы. Из версии для смартфонов убраны изображение тусклой лампочки, время обратного отсчета и последние новости. При этом призыв к действию остается кратким и простым.
Кто-то жертвует картинками, а кто-то текстом. Сайт Food Sense пошел по второму пути. Компания решила оставить в мобильном дизайне изображения и урезать текст, сделав акцент на фотографии еды.
Есть ли смысл заморачиваться?
Компания Electric Pulp недавно представила обновленный сайт бренда одежды O’neill. Они использовали весь передовой опыт для мобильных устройств: меню, которое можно развернуть с помощью одного клика, увеличение размера шрифта, большие кнопки. Компания увидела значительный рост конверсии.
Оптимизация формы для мобильных устройств
В древние времена WAP поля формы представляли из себя что-то немыслимое для заполнения. К счастью сейчас все проблемы можно решить нажатием одной кнопки. Советы по оптимизации форм для мобильных устройств включают в себя:
- удаление любой информации, которая не является необходимой. У пользователей могут быть проблемы со связью, и им будет трудно закончить заполнение некоторых полей;
- объединение полей (страна, город и т.п.), где возможно или предложение наиболее популярных вариантов, которые будут появляться первыми в списке. В некоторых случаях имеет смысл включить выбор по умолчанию. Пользователи потратят меньше времени на просмотр информации и внесение корректировок вместо заполнения полей с нуля.
Вот хороший пример мобильных форм компании Hertz.
Заключение
Самое важное, что вы можете сделать, чтобы увеличить количество переходов с мобильного адаптивного дизайна — выяснить, какие элементы сайта важны для конверсии. Это можно сделать с помощью карты кликов. Затем ваша задача — устранить второстепенные элементы навигации, сделав акцент на простом понятном дизайне.
|
Друзья, теперь вы можете поддержать SEOnews https://pay.cloudtips.ru/p/8828f772 Ваши донаты помогут нам развивать издание и дальше радовать вас полезным контентом. |
|
Подписывайся!
ВКонтакте
Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой
-
Даниил больше года назадАдаптивный дизайн даст удобство пользователю, но никто не рассматривал вариант, когда работая в офисе мы выбираем товар и смотрим адрес тем самым достигая 2 цели просмотр более 3х страниц и просмотр контактов, а например выйдя из офиса забыли куда ехать за товаром и идем на сайт смотреть контактны (опять достигнута цель).
Определить точную конверсию не получится. Приблизительные расчеты можно будет вести только при правильной настройке составных целей. И то на мой взгляд остане...Адаптивный дизайн даст удобство пользователю, но никто не рассматривал вариант, когда работая в офисе мы выбираем товар и смотрим адрес тем самым достигая 2 цели просмотр более 3х страниц и просмотр контактов, а например выйдя из офиса забыли куда ехать за товаром и идем на сайт смотреть контактны (опять достигнута цель).
Определить точную конверсию не получится. Приблизительные расчеты можно будет вести только при правильной настройке составных целей. И то на мой взгляд останется погрешность.
А если рассматривать интернет магазины то с телефона врядли кто то будет искать товар - это минимум неудобно. Поэтому при адаптивном дизайну прогнозировать увеличение конверсии я бы не стал.
Конверсию можно будет просчитать если у каждого пользователя(за месяц) посетившего сайт спрашивать сколько раз он заходил когда зачем и тд -
Дмитрий Белозеров больше года назад
Вы забываете про персонализацию. Если вы покупаете что-то в интернет-магазине, то у вас есть учетная запись. По ней все и отслеживается.
С телефона, может быть, и да, но со смартфона или планшета - вполне себе. Ну и не стоит забывать, что адаптивный дизайн как раз и нужен, чтобы было удобно. -
Даниил больше года назад
1) Не обязательно, многие ресурсы предоставляют заказ без регистрации.
2) Под телефоном я и подразумевал смартфон. Вы элементарно не сможете разглядеть товар, и почитать о нем отзывы на других сайтах -
Дмитрий Белозеров больше года назадДаниил,
1) Честно, стараюсь ничего не покупать в таких магазинах. Регистрация является для меня мелким, но все же гарантом качества и обратной связи. Я хотя бы смогу связаться с администрацией и не буду послан "а мы вас не знаем, это не ваш заказ". Особенно это актуально при доставке на дом. Я бы не рискнул заказывать что-то с того же ozon без регистрации. В рамках сети какого-то магазина - отсутствие реги оправдано, т.к товар не покидает по сути сам магазин. И даж...Даниил,
1) Честно, стараюсь ничего не покупать в таких магазинах. Регистрация является для меня мелким, но все же гарантом качества и обратной связи. Я хотя бы смогу связаться с администрацией и не буду послан "а мы вас не знаем, это не ваш заказ". Особенно это актуально при доставке на дом. Я бы не рискнул заказывать что-то с того же ozon без регистрации. В рамках сети какого-то магазина - отсутствие реги оправдано, т.к товар не покидает по сути сам магазин. И даже если я сам его не заберу, магазин от этого ничего не потеряет (расходы на доставку и т.д.)
2) Обычно человек при покупке уже знает, что он хочет. Поэтому для поиска доп информации и внешнего вида удобнее использовать десктоп перед тем, как совершать заказ. Допустим, выбрал я товар. На следующий день положил средства на дебетовую карту, если нет ПК (или на работе сторонние ресурсы заблокированы), я оформляю заказ через смартфон.
P.S. А вообще я в студенческие годы только и искал информацию через смартфон (причем, не самый передовой). Не стоит недооценивать Mobile =) -
Гость больше года назадЕсть ли смысл в адаптивном дизайне в случае контентного проекта портального типа? Ставшая привычной 2- или 3-хколоночная структура трудно поддается таким трюкам. Может, кто видел удачные примеры?
