В мобильном маркетинге и веб-разработке адаптивный дизайн давно из модного тренда превратился в высокоэффективный инструмент и своего рода стандарт для современных сайтов.

Как выяснилось не так давно, 9 из 10 пользователей смартфонов осуществляют микроплатежи и финансовые операции при помощи своих этих устройств, сообщается в результатах исследования Prosper Mobile Insights Survey.  А это более половины из числа тех, кто пользуется смартфонами для онлайн-покупок. И хотя уровень конверсии на сайте по-прежнему выше для настольных систем, планшеты и смартфоны постепенно догоняют их по этому показателю.

Любопытен тот факт, что чем меньше диагональ экрана, тем больше денег пользователи смартфонов тратят в среднем на интернет-шоппинг:

 

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

Среди хороших примеров для подражания — WebUndies.com, проект, который занимается розничной торговлей. Его продажи через мобильные каналы дистрибуции пересекли отметку в $168 тыс., что составило 5,4% от общей суммы в 3,1 млн продаж. С одной стороны, величина вроде бы небольшая; с другой стороны, это рост конверсии на 169%. В практике WebUndies используется как адаптивный дизайн, так и оптимизация каталога в виде приложения для планшетов. Много внимания уделено мобильным покупателям, а потому нет ничего удивительного в том, что они приходят снова и снова.

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

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

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

Но тут возникает важный вопрос: что оставить, а что выкинуть из этих элементов оформления на сайте?

Какие элементы дизайна важны для конверсии?

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

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

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

Что следует убрать?

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

К примеру, выше  было показано, что для мобильных устройств убраны текстовые статьи и реклама, но остались краткие описания, большие картинки.

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

  • Меньше элементов = больше результатов. Несколько элементов, большие кнопки и скроллинг для того, чтобы на странице помещалось не все сразу, а только несколько укрупненных фрагментов. Это делает навигацию по мобильному сайту проще, быстрее и понятнее для пользователя.
  • Контент, который можно развернуть. В одно касание можно развернуть, перелистнуть страницу, раскрыть контент, просмотреть содержимое раскрытого «контейнера». Это быстрее и удобнее для мобильного пользователя, чем бесконечная перемотка страниц назад-вперед и масштабирование страниц (что удобно делать в настольном браузере и на большом экране, но никак не на экране смартфона, который обычно не превышает 5 дюймов по диагонали).
  • Обзоры и рейтинги. Популярные товары и уровень их надежности подкреплены рейтингами и короткими обзорами отзывами пользователей, уже купивших продукцию компании.
  • Акцент на ценах и возможностях оплаты. Первое, что должно бросаться в глаза новому посетителю, — это цены и способ, которым можно заплатить за понравившийся товар.
  • Подчеркнуть бесплатность доставки. Бесплатная доставка — один из ключевых факторов при принятии решения о покупке. Лучше разместить это упоминание прямо рядом со значком корзины с покупками.
  • Большие кнопки с призывами к действию. Четкие инструкции и призывы к действию, которые занимают большую часть экрана при переходе к конкретномутовару, броская кнопка добавления в корзину или мгновенной оплаты и т. д.

В приведенном выше примере все эти аспекты и элементы приведены в соответствие с требованиями адаптивной верстки и правилами повышения конверсии.

Что вы можете убрать, а что оставить?

Вот еще один пример хорошего адаптивного дизайна. Это промо-сайт экологической инициативы «Час Земли»:

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

А вот другой пример, проект Food Sense. В отличие от предыдущего проекта, в мобильной версии они выбрасывают большую часть текстового контента и фокусируют внимание пользователя на графических элементах и фотоснимках:

Здесь иконки и меню навигации распределены так, что основной контент можно легко и удобно просмотреть.

Как достичь конверсии +400%?

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

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

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

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

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

UX Booth тоже подготовили свой набор инструкций, среди которых особо выделим следующие:

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

Вот еще один хороший пример — мобильная форма от проекта Hertz:

Как создать собственный адаптивный дизайн

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

  • Simple Grid — система, представляющая собой набор блоков, которые можно комбинировать и перемещать по модульной сетке, создавая сочетания на свой вкус.
  • Skeleton — набор инструментов для разработки адаптивных стилей с нуля на основе сетки 960 grid. В него также входит ряд расширений для популярных систем управления контентом и платформ ведения блогов, таких как WordPress, Drupal и Github.
  • Gridpak — генератор адаптивных дизайнов для создания базовой сетки и слайдеров, которые можно размещать на ней. Есть много гибких настроек для создания адаптивной верстки.
  • The 1140 CSS Grid — сетка для адаптивной верстки, доступная и как CSS, и как шаблон для Photoshop.

В заключение

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

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

 

Источник: Quicksprout.com