Фишки для лендинга

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

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

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

Попробуем разобрать, какие «фишки» применяют веб-дизайнеры, оправданы ли их действия?

Параллакс (parallax-scrolling)

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

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

Это — тренд, это популярно, это привлекает внимание. Но оправдано ли применение параллакса в лендинге?

Вначале плюсы

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

А теперь минусы. Не забывайте, что речь идет о лендинге.

• «Крутой» эффект параллакса отвлечет от главного, что Вы хотели донести (если это главное не скрыто в самом эффекте, но тогда это для особо креативных посетителей, к которым не относится большинство);
• Страницы с параллаксом медленнее открываются, следовательно, особо нетерпеливые уйдут с сайта;
• Не всегда корректно отображаются на мобильных устройствах.
  
  

Вроде бы минусов меньше? Но они весомые… Наверное, попробовать параллакс стоит. Отследить конверсию. А вдруг это именно ваш вариант? Вот только не все сразу.

Призраки (ghost buttons)

Призраки… Невидимые, но вездесущие. Страшно?

Это всего лишь контурные кнопки, отличаются от обычных они лишь прозрачностью фона.

Новый тренд, появившийся в результате желания веб-дизайнеров вписать кнопки в любой интерфейс. Они не «портят» вид, выполняя при этом свою функцию. А решаются достаточно просто возможностями HTML5 и CSS3.

Плюсы

• Возможность создания интерфейса поверх кнопок;
• Возможность сосредоточить внимание на фотографиях и картинках, не отвлекая на кричащую кнопку.
  
  

Минусы

• Если на странице много информации, то посетитель может и не заметить вашу кнопку;
• На лендинге должно возникать желание на кнопку нажать, а вот призрачный фон это желание вызывает далеко не всегда.
  
  

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

Увеличение контента

Скорость загрузки страниц увеличивается. Это даже не оспаривается. И вместе с увеличением скорости появилась тенденция нагружать лендинг контентом.

Сравнительные цифры

• Ноябрь 2010 г — средний вес страницы 700Кб;
• Март 2015 г — 2Мб.

Но для лендинга имеет значение даже 1 секунда. Статистика показывает, что если сайт не загружается за 3 секунды, закрывают страницу 40% посетителей. Конечно, текстовый контент вряд ли повлияет на скорость загрузки, а вот изображения — да.

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

Адаптивный дизайн

Люди часто ищут информацию на мобильных устройствах. По последним данным — это уже 80% времени.

А вот из 147 млн посадочных страниц лишь 3% (!) соответствуют требованиям мобильных браузеров. Значит, адаптивный дизайн для лендингов — не прихоть, а необходимость.

Google уже заявил о лучшем продвижении адаптированных сайтов (с апреля 2015 года). Значит, сайты с дизайном для мобильных устройств не только имеют преимущества перед 97% стандартных ресурсов, но и выигрывают в ранжировании.


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

Читайте также

Если у вас не адаптивный сайт, 57% ваших пользователей испытывают неудобства

Уж сколько споров было по поводу адаптивного сайта! Даже известные веб-разработчики говорили, что он нужен далеко не всегда, что надо брать в учет целевую аудиторию. Кто-то заявлял, что лучше иметь два сайта: один для стационарных компьютеров, другой — для мобильных устройств…

Триггеромания

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

Дизайн триггеров или дизайн-триггеры?

Для начала разберемся, что такое «триггеры»? По определению в БСЭ, это спусковое устройство, которое сколь угодно долго находится в состоянии равновесия, а потом скачком переключается в другое при получении внешнего сигнала.

Написать комментарий