10 трендов веб-дизайна 2016 года для увеличения конверсии

Здравствуйте, меня зовут Бойцов Артур. Я являюсь основателем маркетингового агентства Runwaylab, предлагающего полный спектр услуг в сфере упаковки бизнеса, создания продающих сайтов, выстраивания продаж в интернет. Первый свой сайт я создал еще в 2008 году, когда мы с приятелем открыли компанию по продаже металлопроката. Тогда у нас не было средств для привлечения веб студий, и мне пришлось все делать самому, своими руками - от дизайна до верстки. С тех пор и по настоящее время я создал огромное количество сайтов сам и еще больше - со своей командой. Вот уже на протяжении 7 лет я слежу за тем как меняются и развиваются тренды в сфере веб-дизайна. Если раньше сайт создавался на годы и на протяжении длительного времени после создания считался вполне up to date, то теперь все меняется так быстро, что дизайн нового сайта может устареть за несколько месяцев. Это свидетельствует о том, что с течением времени, а также с более стремительным развитием технологий, тренды в веб дизайне приходят, развиваются и меняются все стремительнее - по экспоненте. Еще одним интересным фактом является то, что последние несколько лет веб дизайн в целом развивается все больше и больше в сторону “продающего” дизайна. Для любого даже самого микроскопического интернет предпринимателя, самым важным является показатель конверсии сайта - отношение числа оставивших заявку или купивших к общему числу посетителей сайта. Вопрос о том как увеличить конверсию (или о том, как ее не потерять) является самым острым для всех, кто пытается что то продать в интернете с помощью своего сайта, интернет магазина или подписной страницы. С ростом конкуренции с каждым днем появляется все более изощренные методы заставить человека оставить заявку именно на этом сайте - от элементов дизайна и счетчиков с призывами к действию, до откровенных фальсификаций, в виде периодически всплывающих табличек с надписью о том, что только что был сделан заказ на сумму ххх руб. таким то человеком. Но мы с Вами говорим именно о продающем дизайне и о трендах в продающего веб дизайна, которые в принципе уже появились в 2015, но сохранятся, на мой взгляд и в 2016 году. Итак начнем.1. Полноэкранные изображения на фонеПреимущества: Большие, атмосферные изображения заставляют посетителя на секунду дольше задержать взгляд и, тем самым, сделать внутреннюю отметку. Этот то самое удержание внимание, которое увеличивает конверсию. Кроме того, в качестве полноэкранного фона можно использовать зацикленные видеоролики, синемаграфию или анимированные фото, что тоже приковывает взгляд с большей вероятностью.2. Деление экрана на две части. Преимущества: Зачем нужно разделять экран на две части и как это работает? Очень просто. Если у вас есть несколько видов товаров, продуктов, услуг или категорий, проще всего разделить лендинг пейдж на зоны, визуально отделенных друг от друга, тем самым предоставляя человеку сделать свой выбор “своей стороны”. Психологически, этот выбор пользователь воспринимает как некую игру, но сделав выбор, он уже более лоялен и тому, продукту, который расположен на этой части лендинга. 3. Контрастные СТА Преимущества: Яркие кнопки, призывающие к действию быстрее и легче замечаются пользователем и следовательно приводят к более высокой конверсии. Здесь работает фактор беглости обработки. Чем понятнее что нужно сделать, тем быстрее человек это обрабатывает в голове, а завершение обработки информации (когда ты быстро понял что от тебя хотят) приводит к положительному всплеску в подсознании. Но при этом, эту положительную эмоцию человек по ошибке приписывает к самому предложению, товару, услуге и с большей вероятностью ее купит. Также, здесь есть некий под тренд - весь остальной фон специально делают более тусклым и в монохромных цветах, что еще больше выделяет CTA и еще больше увеличивает конверсию. 4. Приоритетная навигация. Преимущества: При большом выборе в навигационном меню, когда имеется слишком много вариантов выбора, пользователь в 10 раз менее вероятно будет им пользоваться. Нужно убрать все второстепенные пункты в скрытое меню и оставить только самое нужное - направьте пользователя на самую важную часть сайта, увеличив тем самым конверсию.Дополнительное преимущество: Можно закрепить CTA в меню для максимальной кликабельности. 5. Минимальные формы захвата. Преимущества: Чем больше форма захвата (поля, где пользователь оставляет заявку и свои данные), тем менее вероятно что она будет заполнена. Те кто ставит на своем сайте огромнейшую форму, содержащую поля для имени, телефона, email, адреса, комментариев (или не дай бог капчи!) сразу же подписывает смертный приговор своему сайту. Необходимо выкинуть все ненужное и оставить самый минимум - обычно это имя и телефон. Самым же последним трендом является форма только с одним полем - номером телефона. Таким образом, человеку нужно минимум времени, чтобы оставить заявку и для него это происходит максимально безболезненно. При этом и вы получаете тот минимум, который нужен Вам чтобы закрыть этот лид на продажу. 6. Использование видео Преимущества: Одним из самых больших барьеров между простым посетителем вашего сайта и покупателем является доверие. Видеоролики, будь то представление компании, видеоотзывы или обзоры продуктов и услуг, позволяют персонализировать ваш бренд, познакомить Вашу аудиторию непосредственно с компанией и тем, чем она занимается. И тем самым увеличивается доверие аудитории к продукту или услуге, что в свою очередь, приводит к увеличению конверсии. 7. Закрпленные СТА. Преимущества: Рекомендуется закреплять призыв к действию, чтобы он был постоянно перед глазами пользователя, увеличивая конверсию. Для ПК браузеров лучше закреплять кнопку сверху, для мобильных версий сайта, лучше делать это в самом низу. 8. Дизайн в виде карточек. Преимущества: Данный тренд вдохновлен сайтом Pinterest (https://ru.pinterest.com), где тысячи веб дизайнеров выкладывают свои работы в виде “приколотых на доску” табличек. Такой дизайн позволяет быстро направить пользователя именно в ту воронку, которую необходимо для получения большей конверсии. Визуально это воспринимается очень легко и быстро. Здесь работает все та же беглость обработки. 9. Отдельный блок с СТА. Преимущества: Мы прерываем поток информации сайта, который состоит из множества блоков, панелей, картинок и текстов и останавливаем внимание пользователя одним блоком, где располагается только небольшой заголовок, подзаголовок и призыв к действию. Этот блок отделяется большими белыми пространствами от других блоков сайта и яркой кнопкой, привлекающей внимание. Таким образом, даже на тяжелых сайтах, с большим количеством информации, мы можем сделать хороший отдельно-стоящий СТА и увеличить конверсию. 10. Вертикальная навигация:Преимущества: Довольно долгое время очень широко применялась горизонтальная навигация в виде закрепленного меню сверху сайта. Но порой, случается что имея длинный лендниг пейдж, пункты меню идущие слева направо, не отражают структуры лендинга, и кликая по пунктам, мы можем рандомно перемещаться вниз и вверх, что сбивает с толку. Вертикальное меню решает проблему. Оно четко отаражет вертикальную структуру ленднг пейдж и дает представление о том где конкретно мы находимся, и что находится выше, а что ниже. Простота навигации уже относится к UX (User experiense) показателям, но также увеличивает конверсию.Есть и другие аспекты увеличения конверсии и тренды, но мы рассмотрели только самые основные, которые действительно работают и которые будут активно использоваться повсеместно в ближайший год точно. Надеюсь было полезно. Благодарю за внимание. Бойцов Артур.Основатель компании Runwaylab - http://runwaylab.ru/