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

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

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

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

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

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

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

Что оставить

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

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

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

Что удалить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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


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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
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
SEOnews и Serpstat запускают конкурс для интернет-маркетологов
Marina Lagutina
1
комментарий
0
читателей
Полный профиль
Marina Lagutina - Добрый день! Видимо я из тех, кто пытается последней вскочить в уходящий поезд. Ночью написала статью на тему "обзор инструментов контент-маркетинга". Своего блога нет. Отправила вам не мейл. Я еще могу у вас разместиться или искать, кто возьмет статью к себе в блог?
«Я оптимизировал сайт, а он не в ТОП! Что делать?»
Павел Горбунов
7
комментариев
0
читателей
Полный профиль
Павел Горбунов - Как можно в инструменте tools.pixelplus.ru/tools/text-natural сравнить текст со страницы конкурента и со своей страницы? Я вижу возможность только для проверки одного урла.
Монетизация сайта. Как, когда, сколько?
Гость2
1
комментарий
0
читателей
Полный профиль
Гость2 - Руслан! Спасибо за ваш сервис и за данную статью в частности! С апреля являюсь вашим пользователем - очень доволен как сервисом, так и уровнем заработка! Еще раз спасибо, удачи вашему проекту!
Мир глазами поисковых систем
Александр Рунов
7
комментариев
0
читателей
Полный профиль
Александр Рунов - Какой регион, если не секрет? В Мск, в ряде ВК тематик (в тех же "окнах" или "колесах"), без работы с внешними факторами по ВЧ запросам в ТОП не выплывешь. Хотя в большинстве направлений вполне реально.
Влияние HTTPS на ранжирование региональных поддоменов в Яндексе
Екатерина Иванова
1
комментарий
0
читателей
Полный профиль
Екатерина Иванова - Посмотрите на сколько упал трафик и на сколько потом вырос:упал на 10-20% на 1 месяц, а вырос в итоге в 5 раз. Одним мартовским трафиком всё падение перекрыли. Или можно ждать Яндекс неопределённое количество времени со стартовым уровнем трафика. Упущенные возможности и всё-такое.
День рождения SEOnews: 12 лет в эфире!
Анна Макарова
308
комментариев
0
читателей
Полный профиль
Анна Макарова - Ура )
7 причин не работать на биржах копирайтинга
Dasha Shkaruba
6
комментариев
0
читателей
Полный профиль
Dasha Shkaruba - Спасибо за мнение! Кстати, на бирже главреда прием анкет закрыт
Google.ru внесли в реестр запрещенных сайтов
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
Инфографика: самые распространенные SEO-ошибки Рунета
Alex Wise
3
комментария
0
читателей
Полный профиль
Alex Wise - Спасибо, Женя, за рекомендацию! :) Андрей, чтобы понять, какой программой пользоваться, нужно сделать несколько вещей: 1. Попробовать обе: у нас в Netpeak Spider бесплатный триал на 14 дней с полным функционало; у SFSS до 500 URL всегда бесплатно, но с ограниченным функционалом. 2. Понять свой стиль работы – если вы любите полный контроль и из-за этого более высокую скорость пробивки, тогда выбирайте Netpeak Spider. Если для вас не так важна скорость и количество пробитых URL, то можно остановиться на SFSS. 3. Определиться с нужными функциями: их в обоих программах очень много и как в Netpeak Spider есть уникальные, так и в SFSS есть свои уникальные. Мы всегда ориентируемся на то, чтобы быстро и чётко показать ошибки – для этого у нас вся таблица красится в соответствующие цвета. Думайте!) И, если что, обращайтесь с вопросами – мы будем рады помочь!)
Конкурс: угадайте пятерку лидеров рейтинга «SEO глазами клиентов 2017»
Оля
1
комментарий
0
читателей
Полный профиль
Оля - 1 Ingate 2 Wezom 3 Bynjg vtlbf 4 seo energy 5 директ лайн
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
308
Комментариев
262
Комментариев
224
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
55
Комментариев
53
Комментариев
52
Комментариев
46

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