Рекламные кампании для вашего бизнеса
Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:

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

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

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

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

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

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

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

Что оставить

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

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

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

Что удалить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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


internet-dlya-biznesa

Есть о чем рассказать? Тогда присылайте свои материалы в редакцию.


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
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
23 действительно эффективных совета по продвижению интернет-магазина
Гость - Троль Гуру паНгинации - Что такое паНгинация?))))
Конкурс: угадайте пятерку лидеров рейтинга «SEO глазами клиентов 2016»
Марина
1
комментарий
0
читателей
Полный профиль
Марина - Ingate i-Media SEO.RU Netpeak 1PS.RU
Анализ ссылок: сравнение многофункциональных платформ по размеру их баз
Михаил - Хватит пениться на каждый аргументированный отзыв. Это не придает вашей компании чести.
Как создать интернет-магазин: сколько стоит открытие?
Гость - да у битрикса что ни обновление - то сплошные баги. недавно знакомый обновился на лицензии интернет-магазина, про***лись заказы за последнюю неделю, слетели все связи по складам. одним словом, жопа. при этом обновился на сразу, а спустя месяц после выкатывания, надеялся, успеют все поправить
Как упростить продвижение вечными ссылками?
Coursh - Зарегестрировался. Накинули 1100 рубликов за пополнение на 10к. Очень неплохо!
Вопрос недели: почему сайт хорошо ранжируется в Google и не интересует Яндекс?
Nina S.Dzh. - У вас достаточно конкурентная тематика для рунета и по главной странице домена расположена англоязычная версия. Полагаю, в этих двух фактах вся проблема. Поскольку Яндекс в данном случае считает английскую версию сайта приоритетной, а среди ваших конкурентов в выдаче достаточно много хороших русскоязычных сайтов, то он и не ранжирует ваш сайт высоко. Грубо говоря, ему есть что предложить пользователю и без вашего сайта. На мой взгляд, в данном случае версии нужно разводить по разным доменам, русскую вешать на RU и продвигать там.
Кому и зачем нужен маркетплейс от Яндекса
Дарья Калинская
203
комментария
0
читателей
Полный профиль
Дарья Калинская - Максим, спасибо, рада, что статья оказалась полезной )
Конкурс: угадай победителя рейтинга «Известность бренда SEO-компаний»
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Оптимизм Дэмис Кокос Ашманов и Партнеры Раш эдженси
ТОП-10 автоматизированных сервисов контекстной рекламы
Жанна Рожкова
155
комментариев
0
читателей
Полный профиль
Жанна Рожкова - Научитесь отличать рекламу от PR-активности. Если следовать вашей логике, на этом сайте (и на всех остальных информационных ресурсах в принципе) кроме рекламы ничего и нет. Так что насчет статьи от понимающего эксперта? Будем рады, если подготовите
Экспериментальное SEO: «Дырявые носочки панды»
Adrian - Испания и Португалия находятся в Европе и участвовали в чемпионате Европы. Одна из этих стран даже стала победителем. А Южная и Центральная Америка здесь при том, что там разговаривают на испанском и португальском языках. Сына, учите географию.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
285
Комментариев
262
Комментариев
203
Комментариев
171
Комментариев
155
Комментариев
137
Комментариев
123
Комментариев
97
Комментариев
97
Комментариев
93
Комментариев
80
Комментариев
70
Комментариев
67
Комментариев
60
Комментариев
55
Комментариев
52
Комментариев
49
Комментариев
45
Комментариев
44

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