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

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

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

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

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

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

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

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

Что оставить

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

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

Выделяйте главное. Хороший пример — мобильный сайт красного креста. Пользователи могут сделать пожертвования через 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 запускают конкурс для интернет-маркетологов
Анна Ольяная
4
комментария
0
читателей
Полный профиль
Анна Ольяная - благодарю :)
Как построить качественную ссылочную массу сайта
Айрат Рахимзянов
39
комментариев
0
читателей
Полный профиль
Айрат Рахимзянов - Спасибо Кирилл. Сейчас восстановилась работа сервиса: take.ms/ttXrw
«Я оптимизировал сайт, а он не в ТОП! Что делать?»
Павел Горбунов
7
комментариев
0
читателей
Полный профиль
Павел Горбунов - Как можно в инструменте tools.pixelplus.ru/tools/text-natural сравнить текст со страницы конкурента и со своей страницы? Я вижу возможность только для проверки одного урла.
Мир глазами поисковых систем
Александр Рунов
4
комментария
0
читателей
Полный профиль
Александр Рунов - Какой регион, если не секрет? В Мск, в ряде ВК тематик (в тех же "окнах" или "колесах"), без работы с внешними факторами по ВЧ запросам в ТОП не выплывешь. Хотя в большинстве направлений вполне реально.
Влияние HTTPS на ранжирование региональных поддоменов в Яндексе
Екатерина Иванова
1
комментарий
0
читателей
Полный профиль
Екатерина Иванова - Посмотрите на сколько упал трафик и на сколько потом вырос:упал на 10-20% на 1 месяц, а вырос в итоге в 5 раз. Одним мартовским трафиком всё падение перекрыли. Или можно ждать Яндекс неопределённое количество времени со стартовым уровнем трафика. Упущенные возможности и всё-такое.
Google.ru внесли в реестр запрещенных сайтов
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
Монетизация сайта. Как, когда, сколько?
Ruslan Baybekov
2
комментария
0
читателей
Полный профиль
Ruslan Baybekov - Максим, добавили возможность вывода дохода на Яндекс Деньги и WMR.
Интеграция call tracking и CRM: углубленный анализ данных о звонках и продажах
Денис
2
комментария
0
читателей
Полный профиль
Денис - Какой смысл вообще в облачных CRM, обрезанный фугкционал, свое дописать невозможно, слив клиентов другим компаниям. Серверные бесплатные CRM куда надежней и кастамизируй как хочешь.
SEMrush: факторы ранжирования в Google в 2017 году
Анна Макарова
292
комментария
0
читателей
Полный профиль
Анна Макарова - Уважаемый S1, я тоже понимаю, что есть такие люди, которые заметив допущенную неточность несутся на всех парусах продемонстрировать "силу" своего ума. Спасибо вам за пристальное внимание. Это поможет нам быть лучше.
Дашборд Метрика 2.0 – мониторинг проблем на сайте в режиме реального времени
Константин Сокол
24
комментария
0
читателей
Полный профиль
Константин Сокол - Есть динамика трафика по разделам. Этот виджет показывает некоторые фильтры, в результате которых с поиска выпадают целые разделы.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
292
Комментариев
262
Комментариев
219
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
55
Комментариев
52
Комментариев
48
Комментариев
45

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