Посадочные страницы: дизайн, юзабилити, цвета

05.11.2013 Аналитика и юзабилити

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

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

  1. Следите за юзабилити

С первого же взгляда на посадочную страницу пользователь должен понять:

  • цель страницы;
  • какого действия от него ждут;
  • что он получит взамен.

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

Пользователь не должен блуждать по всей странице в поиске нужной информации, это в ваших интересах преподнести ему все необходимое «на блюдечке». В противном случае страница будет закрыта в течение нескольких секунд, а показатель отказов будет стремительно расти вверх.

Удачная посадочная страница от FeedMyInbox:

  1. Знайте меру в оформлении

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

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

Вот так предлагает свои сервисы Dialogix:

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

  1. Упростите навигацию

Чем шире простор для действий на странице, тем выше шанс, что юзер воспользуется ими. Оставьте минимум навигационных ссылок на странице, сделайте акцент на ссылке, ведущей к целевому действию! Разумеется, это относится именно к посадочным страницам – урезать функционал сайта в целом не нужно.

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

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

  1. Эффективность модальных окон

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

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

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

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

  1. Красный уже не в моде

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

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

  1. Но кнопка должна быть заметной!

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

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

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

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

Упустить кнопку из виду невозможно!

 
Больше интересных статей

Оставьте номер телефона, чтобы наш менеджер связался с вами в удобное для вас время

Ваше имя*
Ваш номер телефона*
Тема для обсуждения
Выберите удобное время для звонка
9:00 9:15 9:30 9:45 10:00 10:15 10:30 10:45 11:00 11:15 11:30 11:45 12:00 12:15 12:30 12:45 13:00 13:15 13:30 13:45 14:00 14:15 14:30 14:45 15:00 15:15 15:30 15:45 16:00 16:15 16:30 16:45 17:00 17:15 17:30 17:45
Виды услуг
ОбзорМаксимальный размер файла - 10 мб