Оптимизация адаптивного дизайна для конверсии

Россия+7 (495) 960-65-87
Шрифт:
6 13983

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

Что такое адаптивный дизайн?

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

Но возникает важный вопрос:

Для достижения максимальной конверсии, какие блоки можно сократить, а какие необходимо оставить?

Что оставить

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

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

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

Что удалить

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

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

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

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

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

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

Что еще урезать?

Вот другой пример адаптивного дизайна для Часа Земли:

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

Кто-то жертвует картинками, а кто-то текстом. Сайт Food Sense пошел по второму пути. Компания решила оставить в мобильном дизайне изображения и урезать текст, сделав акцент на фотографии еды.

Есть ли смысл заморачиваться?

Компания Electric Pulp недавно представила обновленный сайт бренда одежды O’neill. Они использовали весь передовой опыт для мобильных устройств: меню, которое можно развернуть с помощью одного клика, увеличение размера шрифта, большие кнопки. Компания увидела значительный рост конверсии.

Оптимизация формы для мобильных устройств

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

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

Вот хороший пример мобильных форм компании Hertz.

Заключение

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


Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Ксения
    больше года назад
    Спасибо за статью
    -
    0
    +
    Ответить
  • Даниил
    больше года назад
    Адаптивный дизайн даст удобство пользователю, но никто не рассматривал вариант, когда работая в офисе мы выбираем товар и смотрим адрес тем самым достигая 2 цели просмотр более 3х страниц и просмотр контактов, а например выйдя из офиса забыли куда ехать за товаром и идем на сайт смотреть контактны (опять достигнута цель).
    Определить точную конверсию не получится. Приблизительные расчеты можно будет вести только при правильной настройке составных целей. И то на мой взгляд остане...
    Адаптивный дизайн даст удобство пользователю, но никто не рассматривал вариант, когда работая в офисе мы выбираем товар и смотрим адрес тем самым достигая 2 цели просмотр более 3х страниц и просмотр контактов, а например выйдя из офиса забыли куда ехать за товаром и идем на сайт смотреть контактны (опять достигнута цель).
    Определить точную конверсию не получится. Приблизительные расчеты можно будет вести только при правильной настройке составных целей. И то на мой взгляд останется погрешность.
    А если рассматривать интернет магазины то с телефона врядли кто то будет искать товар - это минимум неудобно. Поэтому при адаптивном дизайну прогнозировать увеличение конверсии я бы не стал.
    Конверсию можно будет просчитать если у каждого пользователя(за месяц) посетившего сайт спрашивать сколько раз он заходил когда зачем и тд
    -
    0
    +
    Ответить
  • Дмитрий Белозеров
    больше года назад


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



    С телефона, может быть, и да, но со смартфона или планшета - вполне себе. Ну и не стоит забывать, что адаптивный дизайн как раз и нужен, чтобы было удобно.
    -
    0
    +
    Ответить
  • Даниил
    больше года назад


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

    2) Под телефоном я и подразумевал смартфон. Вы элементарно не сможете разглядеть товар, и почитать о нем отзывы на других сайтах
    -
    0
    +
    Ответить
  • Дмитрий Белозеров
    больше года назад
    Даниил,

    1) Честно, стараюсь ничего не покупать в таких магазинах. Регистрация является для меня мелким, но все же гарантом качества и обратной связи. Я хотя бы смогу связаться с администрацией и не буду послан "а мы вас не знаем, это не ваш заказ". Особенно это актуально при доставке на дом. Я бы не рискнул заказывать что-то с того же ozon без регистрации. В рамках сети какого-то магазина - отсутствие реги оправдано, т.к товар не покидает по сути сам магазин. И даж...
    Даниил,

    1) Честно, стараюсь ничего не покупать в таких магазинах. Регистрация является для меня мелким, но все же гарантом качества и обратной связи. Я хотя бы смогу связаться с администрацией и не буду послан "а мы вас не знаем, это не ваш заказ". Особенно это актуально при доставке на дом. Я бы не рискнул заказывать что-то с того же ozon без регистрации. В рамках сети какого-то магазина - отсутствие реги оправдано, т.к товар не покидает по сути сам магазин. И даже если я сам его не заберу, магазин от этого ничего не потеряет (расходы на доставку и т.д.)

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

    P.S. А вообще я в студенческие годы только и искал информацию через смартфон (причем, не самый передовой). Не стоит недооценивать Mobile =)
    -
    0
    +
    Ответить
  • Гость
    больше года назад
    Есть ли смысл в адаптивном дизайне в случае контентного проекта портального типа? Ставшая привычной 2- или 3-хколоночная структура трудно поддается таким трюкам. Может, кто видел удачные примеры?
    -
    0
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Кейс: как продвинуть сайт производителя мебели на заказ в Москве
Иван Стороженко
14
комментариев
0
читателей
Полный профиль
Иван Стороженко - В статье мы рекомендовали сервис Мегаиндекс. ru.megaindex.com/backlinks?sort=desc&sort_by=domain_rank По данной ссылке можете ввести любой сайт и посмотреть ссылки, которые ссылаются на него.
Рейтинг «Известность бренда SEO-компаний 2017»: народное голосование
Гость
1
комментарий
0
читателей
Полный профиль
Гость - 1) Ingate 2) Ашманов 3) Кокос 4) Russian Promo 5) Netpeak
«Баден-Баден»: как выйти из-под фильтра
Рецепты с
1
комментарий
0
читателей
Полный профиль
Рецепты с - Удивляют некоторые комментаторы. Как можно удалить текст на кулинарном сайте с позапросным фильтром? Статья про тушеную капусту с грибами, удаляем весь текст и в поиске людям выдаётся пустая страница? С другой стороны ни убирание точной фразы, ни слов из этой фразы, никак не помогает выбраться, периодически страница поднимается на 18-е место, а потом опять улетает на 48... Интересно другое, в Тайтл, Н1, Дескрипшн, Альт и Тайтл финиша, 1 раз в статье у нас тушеная капуста с грибами и мы на 48 месте, а капуста тушеная с грибами по сути в документе не присутствует ни разу и мы на 18 месте...
Второе дыхание ссылочного продвижения
Автопилот
15
комментариев
0
читателей
Полный профиль
Автопилот - Еще лучше, когда продвижение осуществляется комплексно :)
«Прямая линия» с Александром Алаевым («АлаичЪ и Ко»): отвечаем на вопросы
Александр Алаев
13
комментариев
0
читателей
Полный профиль
Александр Алаев - Роман. Тут ответ очень простой. Каждый запрос можно четко разделить на коммерческий или некоммерческий. "Купить слона" и его длинные хвосты - коммерческий. "Как выбрать слона" и подобные - информационные. Вот под коммерческие ключи должны быть страницы услуг или каталога товаров. А под информационку - блог. Очень важно не путать их, тем более несоответствующая коммерческим факторам страниц просто не продвинется, то есть по запросу с "купить" блог никогда не будет показываться в выдаче, так же как и страница услуги/товаров не покажется по "как выбрать". Понятно примерно?
Западные специалисты выяснили, как повысить позиции ресурса в выдаче Google
Максим Мирошник
2
комментария
0
читателей
Полный профиль
Максим Мирошник -
Кейс: продвигаем бизнес по продаже пластиковых окон в Москве
Иван Стороженко
14
комментариев
0
читателей
Полный профиль
Иван Стороженко - 1. По началу вообще не использовали, сейчас уже много каналов используется. 2. Все может быть, в принципе сайты должны быть удобны для пользователя, для этого и нужна схожесть между собой. Честно говоря старались брать все самое интересное у конкурентов + подкреплять своими идеями.
Контекст под SEO. Как поисковая реклама помогает позициям в органической выдаче
Кирилл Щербаков
1
комментарий
0
читателей
Полный профиль
Кирилл Щербаков - чет я не понял, за 3 года ничего с сайтами не делалось что ли? Типо он в статике висел и лился контекст?
День рождения SEOnews: 12 лет в эфире!
Анна Макарова
316
комментариев
0
читателей
Полный профиль
Анна Макарова - Ура )
Сердитый маркетолог: как вы сами хороните свой сайт, или 16 принципов, которые нужно усвоить заказчикам SEO
Dmitry Maslennikov
1
комментарий
0
читателей
Полный профиль
Dmitry Maslennikov - Особенно последний пункт в тему! Как клиент могу сказать что каждый потенциальный подрядчик по SEO пытался "утопить" предыдущего сеошника комментариями типа "что они вообще сделали" и "чем занимались год, у вас не сделаны элементарные вещи". Уровень сео-специлистов в регионах такой, что для клиентов я бы дал только один совет - не верьте в SEO - бесплатный сыр только в мышеловке.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
316
Комментариев
262
Комментариев
231
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
83
Комментариев
80
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
55
Комментариев
55
Комментариев
54
Комментариев
52

Отправьте отзыв!
Отправьте отзыв!