Бесплатные шаблоны для вашего сайта, в свободном доступе

Вся правда о продвижении Landing page. Как улучшить отклик пользователей


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

Что такое landing page (целевая страница)?

Прежде чем мы начнем, давайте определим несколько вещей ...

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

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

Совет 1 - Держите бренд

Несоответствия в вашем бренде влияют на первое впечатление и могут даже создавать путаницу. Вот возможные варианты для бренда «One Page Love»:

  • One Page Love (верный вариант)
  • Onepagelove
  • ONEPAGELOVE
  • onepagelove
  • One Page love
  • One-Page Love
  • Onepage Love

Вот некоторые популярные:

  • WordPress (1 слово, 2 заглавные буквы)
  • MailChimp (1 слово, 2 заглавные буквы)
  • Stack Overflow (2 слова)
  • Facebook (1 слово)

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

Совет 2 - Не пренебрегайте Retina оптимизацией

Во всяком случае, вам абсолютно необходимо иметь Retina оптимизированный логотип. «Пикселированный» логотип влияет на первые впечатления. Это в основном означает, что ваш логотип должен быть вдвое больше на экранах Retina или должен быть в формате Vector, т.е. SVG. Обратите внимание на «пикселированный» логотип слева и четкий логотип с retina оптимизацией справа:

Сравнение логотипа Retina

Совет 3 - Больше отступов

Большинство пользователей просто вскользь просматривают ваш контент. Если вы соберете все вместе, то они потратят еще меньше времени на просмотр вашей страницы.

81% людей просто просматривают контент, который они читают в Интернете. Эксперт по юзабилити Jakob Nielsen сообщает, что средний пользователь читает от 20 до 28 процентов слов во время посещения.

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

Мы говорим о «плавном понижении» отступов с десктопной версии на мобильную (например, рабочий стол 40px, 20px mobile), но как насчет «грациозной модернизации» на огромных мониторах? Какая радость видеть оптимизацию с щедрым дополнением (наряду с большими шрифтами) при больших разрешениях:

Изящное обновление

 

Совет 4 - Согласованный вертикальный интервал

Таким образом, мы обсудили сетки (обычно используем отступы по горизонтали), но мы часто игнорируем важность вертикального отступа на Landing page. Он может стать довольно важным моментом с такими вещами, как Vertical Rhythms и Baseline Grids,но что относительно последовательного разделения разделов и отступов между элементами?

Вот классическая страница Landing Page:

Вертикальное расстояние

Теперь обратите внимание на согласованность в вертикальном расстоянии, обратите внимание, что меньшие отступы составляют половину больших отступов по вертикали между элементами:

Вертикальное расстояние

Совет. Сохраняйте интервал в соответствии с постоянными коэффициентами. Пример: если мы установили 50px-кнопку, тогда установите нижние отступы раздела также на расстоянии 50px и отступы в больших блоках по 100px. Согласованность является ключевым моментом, соблюдайте пропорции.

Совет 5 - Меньше изображений, но только лучшие

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

 «Простота означает достижение максимального эффекта с минимальными средствами». ~ Д-р Коичи Каванайте

Хорошие образы создают доверие. Доверие приводит к конверсиям. Потратьте деньги. Сделайте фотосессию своей команды, вашего продукта, вашей еды. Выхлоп от качественной фотосессии всегда гарантирует новых покупателей.

Сайт Доны Риты

На сайте Dona Rita представлены только 4 качественные изображения, которые полностью охватывают ее продукт и бренд.

Совет. Если у вас есть выбор, спросите себя, действительно ли каждое изображение отражает вашу историю или дополняет ваш бренд. Устраните все ненужные.

Совет 6 - Меньше шрифтов, больше жирностей

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

Совет. Попробуйте придерживаться двух семейств шрифтов (максимум три) на вашей целевой странице.

Совет 7 - Больше контраста цвета текста

Избегайте наличия чистого черного ( #000000) текста на #FFFFFF фоне белой страницы. Сгладьте такое отношение с небелым фоном и серой текстовой иерархией. Пример:

  • #f8f8f8 задний план
  • #111111 основные рубрики
  • #222222 подзаголовки
  • #444444 цитата
  • #666666 блочные кавычки

Иллюстрированный справа:

Текстовая контрастность

То же самое касается чистого белого цвета на черном. Контраст может быть слишком сильным. Обратите внимание на более мягкую цветовую схему с темно-серой цветовой гаммой:

Текстовая контрастность

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

Совет 8 - Убедитесь, важные кнопки вашего сайта - это макет Ace-drawing Maverick

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

Ссылка на вызов

На странице Landing Page имеют одинаковые цветные и стильные кнопки, но они изменяют формулировку призывы в разных разделах сайта.

Дуб от Абсолютской целевой страницы

Совет 9 - Сглаживание шрифтов

Невероятно, как самые маленькие настройки могут трансформировать проект Landing Page. Этот пример показывает тонкий кернинг только в заголовках:

Текст Кернинг Демо

Совет. Различные семейства шрифтов выглядят по-разному, некоторым нужно больше кернинга, а некоторые ничем не изменить.

Добавив всего несколько строк кода CSS, вы можете действительно отполировать проект Landing Page. Вот код, который я использую в большинстве своих проектов:

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -moz-font-feature-settings: "liga" on;
}

Различие видно ниже:

Справочник по сглаживанию шрифтов

Оба скриншота сняты с устройства Mac.

Подсказка 10 - Только  лучшее

Ранее мы сокращали число изображений, но не стоит останавливаться только на них. Мы не пытаемся убедить пользователя, что мы лучше, чем мы есть. Необходимо просто показать на landing page только самое важное.

Вдумайтесь, что каждый элемент контента должен внести свой вклад:

  • 2 блестящих отзыва - не 8 средних.
  • 2 выделенные сильные характеристики, с четырьмя меньшими по значению ниже - не сетка из 12.
  • Ваши 8 лучших свадебных фотографий - не последние 4 года работы.
Планировщик

Дата публикации: .