Адаптивный дизайн - это относительно новое понятие в маркетинге, которое касается дизайна интерфейсов. Удобный пользовательский интерфейс может продать вам больше, чем вы предполагаете. Вашей задачей будет повышение конверсии со всех устройств. Адаптивный веб дизайн предполагает создание одного интерфейса для всех устройств. Этот интерфейс будет самостоятельно подстраиваться под все виды устройств, с которых может зайти пользователь.
Это и ноутбуки, и планшеты (таблетки), и мобильные телефоны (смартфоны). В каждом отдельном случае пользователь будет видеть немного измененную картинку сайта. Задачей команды по разработке адаптивного интерфейса сайта является создание такого адаптивного дизайна, который бы одинаково хорошо конвертировал просмотры в целевые действия независимо от того, с какого устройства зашел пользователь.
Использование 9 правил адаптивного дизайна чрезвычайно важно для всех компаний, которые занимаются продажами. В принципе, продажами у нас занимаются любые сайты начиная от интернет-магазинов и заканчивая различными блогами, где для аудитории ставится целевым действием нажатие на рекламную ссылку или просто рекомендация данного блога своим друзьям в соцсетях. Но, особенно важен адаптивный дизайн именно для тех компаний, которые реализовывают свои продукты через форму заказа (лидогенерация). Для них придумывание и создание адаптивного сайта - это вопрос получения дополнительной прибыли от заказов. На самом деле сегодня далеко не все сайты являются удобными с точки зрения заказа продукции. Вы заходите на сайт с компьютера дома и можете пролистать товары и быстро выбрать то, что нужно. В мобильных устройствах все смотрится сложнее по определению. Там маленький экран, а вместо нажатия мышкой нужно выбирать пальцами. Это создает определенные сложности и далеко не всегда легко даже выбрать товар. Все эти вышеперечисленные особенности являются отличным поводом создать единое решение и имя ему адаптивный дизайн.
Ниже мы перечислим основные принципы адаптивного дизайна и покажем, на что стоит обратить особенное внимание при разработке сайтов.
1. Смысл сайта
При заходе на ваш сайт с любого устройства сразу же должен быть понятен смысл сайта. Иначе вы просто не сможете завлечь потребителя. На сайте смыслом является структурированная, понятная и логичная информация, а также то, как она отображена. Здесь главный вопрос в том, какую информацию стоит оставить для отображения на всех устройствах? В этом заключается одна из самых больших сложностей при разработке сайтов методом адаптивного дизайна. Вам нужно один раз решить, что пользователь сможет видеть на сайте. У вас нет двух версий - обычной и мобильной, чтобы вы могли сделать все по-разному. Поэтому стоит придерживаться следующих принципов:
- Выделять важное. Это особенно важно для мобильных телефонов, поскольку там экраны совсем маленькие.
- Заменять часть текстовой информации видео и подкастами. При этом видео и фото являются действительно лучшими по сравнению с текстом. Вы можете использовать силу восприятия инфографики и соединить текстовые и визуальные элементы воедино.
- Быстрая навигация. На мобильном устройстве важным является возможность найти быстро нужный раздел. По-настоящему важно выделять самые нужные и востребованные разделы. Также нужно помнить, что если пользователю мобильного устройства дать меньше функций и убрать определенные разделы из поля обозрения, то можно повысить конверсию. Вам не нужно оставлять мобильному пользователю все возможности взаимодействия с сайтом, которые есть при использовании обычной версии. Просто просмотр товара, кнопка "Заказать" и сразу оформление заказа.
Если пользователь зашел с мобильного телефона и совершает покупку через него, то он либо вообще не собирался покупать и решил все спонтанно, либо просто у него нету времени. В любом случае не стоит навязывать такому клиенту возможность просматривать дополнительные товары и растягивать сеанс покупки. Нужно как можно быстрее завершить сделку. При этом нельзя оставлять у человека чувство неполноценности из-за того, что он купил через телефон. Просто рекомендуйте самые актуальные товары, а также не навязывайте слишком много сопутствующих товаров.
2. Берите в пример посадочные странички
Посадочные странички - это отличный способ понять, как должен функционировать сайт с мобильного телефона. Посадочная страничка выделяется тем, что она профессионально заточена под конкретное целевое действие. Посадочная страничка не призывает делать несколько дел одновременно, не рассеивает внимание потенциального клиента, а все элементы дизайна и контента на сайте работают на то, чтобы человек совершил целевое действие.
Берите эту тактику за правило и создавайте такие странички, с которых невозможно уйти, не сделав запрос или покупку. В этом вам помогут краткие, лаконичные и очень информативные seo тексты, картинки, инфографика, а также формы заказа и указание цены.
3. Не промахнитесь со значками
Значки и кнопки, которые имеют решающее значение при покупке, например, кнопки "Купить", "Узнать больше", "Подписаться на новости" и так далее должны быть выделены настолько, что при желании нажать на кнопку пользователь не может промахнуться. В мобильной версии вам не позволительно размещать крохотные значки. Они должны выделяться, кнопки должны быть заметными и "аппетитными". Все это играет огромную роль при повышении конверсии с сайта. Делайте такие кнопки, которые побуждают сделать заказ, при этом можно нажать кнопку без труда, не используя стилус, а просто пальцем.
4. Оптимизация информации
В мобильной версии сайта вся информация должна быть представлена кратко и ясно, но в то же время очень привлекательно. Для этого стоит сразу думать, перед тем как писать тексты и делать фото для проекта. Для обычной версии сайта можно составлять более ёмкие коммерческие предложения, добавлять больше фото и информации. Для мобильной версии допустим минимум информации. Вы можете в мобильной версии сайта урезать часть текстов, переписать их, а также поработать с фото. Все это должно в итоге повысить конверсию вашего ресурса.
5. Человеколюбивые формы для ввода информации
Раз уж вы решили продавать через интернет, да еще и через мобильный телефон, то стоит задуматься над тем, как оптимизировать формы для введения данных пользователем. Не секрет, что многие формы заказа товара включают в себя огромное количество полей, которые иногда трудно заполнить. Естественно, при создании адаптивного дизайна любые сложные формы - вообще табу. Конечно, вы не можете доставить товар клиенту, если он не указал свой адрес и телефон. Но, много полей можно на самом деле сократить либо же объединить в одно поле. Например, адрес не нужно разбивать на поля "Город", "Страна", "Индекс", "Адрес" и так далее. Пусть у вас будет всего несколько полей для заполнения: телефон, адрес, имя и фамилия. Если что-то не ясно, то менеджер магазина звонит и уточнят данные. Введите возможность заполнения полей по принципу выбора данных из списка (там где "Город", например), а также помните, что у пользователя может прерваться связь и он не захочет заполнять форму снова.
6. Четкое описание товаров
В адаптивном дизайне очень большую роль играет наличие четкого описания товара. Особенно при использовании человеком мобильной версии сайта описание продукта - вот что продает на самом деле. Для описания товаров, которые просты в объяснении и не содержат сложных технических инструкций можно попробовать фото. Например, вы продаете пироги и хлеб. Вы можете использовать очень аппетитные фото этих продуктов, которые в случае с мобильным сайтом продадут вам больше, чем детальное описание товара. При этом само текстовое описание может выглядеть очень сжато. В случае с более сложными товарами стоит акцентировать внимание на конкретных важных характеристиках. Например, наличие в ноутбуке 3G-модема или похожие описания.
7. Быстрый поиск контактов
Быстрый поиск контактов имеет значение, поскольку может потребоваться человеку, который хочет сделать самовывоз товара, узнать адрес вашего физического магазина или просто заехать на склад. В этом случае наличие телефона, карты с указанием, как добраться, возможность быстро написать вам сообщение и мгновенно получить ответ будет существенным образом влиять на продажи.
Итак, после такого детального описания адаптивного дизайна стоит сказать, что сейчас он требуется далеко не всем, поскольку иногда лучше развить сначала основной сайт, а потом уже переключаться на продажи через мобильные устройства. Так что правильно расставляйте задачи и приоритеты при создании сайтов для бизнеса.