5 способов визуализации данных на лендинге

Обсудить
5 способов визуализации данных на лендинге

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

Если задача веб-сайта – предоставить максимум информации о компании и услугах, то лендинг призывает потенциального клиента к одному конкретному действию. Именно компании с 31-40 целевыми страницами получают в 7 раз больше потенциальных клиентов, чем компании с 1-5 целевыми страницами.

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

Рассказываем о пяти самых популярных способах визуализации данных.

Анимация

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

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

Анимация погоды

Источник

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

Цифры на сайтах

Источник

Наконец, видео само по себе может значительно украсить ваш лендинг или сыграть роль полноценного оффера. Статистика показывает, что целевые страницы с видео могут увеличить конверсию на 86%. Ролики воспроизводятся на странице при помощи плеера YouTube или Vimeo и часто воспринимаются пользователями как развлекательный контент. Видео на лендинге помогает продать сложный продукт, например CRM-систему или программу.

Кому подойдет:

  • ИТ-компаниям,
  • event-агентствам,
  • медиа.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться

Пиктограммы и статичные цифры

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

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

Пиктограммы и статичные цифры

Источник

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

Цифры Альфа-банка

Источник

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

Кому подойдет:

  • производственным компаниям,
  • сервисным компаниям,
  • банкам.

Таймлайн и mind map

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

Таймлайн

Источник

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

Источник

Кому подойдет:

  • аналитическим и маркетинговым агентствам,
  • компаниям со сложным продуктом.

Инфографика

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

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

Инфографика

Источник

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

Кому подойдет:

  • компаниям со сложным продуктом,
  • аналитическим и маркетинговым агентствам.

Диаграммы и графики

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

Диаграммы и графики на сайте

Источник

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

Кому подойдет:

  • финансовым компаниям и банкам,
  • аналитическим агентствам.

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

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

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

Николай Маринин
Арт-директор Timeweb Cloud и Craftum
Подборки, инструкции и советы от дизайнеров для дизайнеров.

Комментарии

Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте
С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Войти в Комьюнити
Регистрация в Комьюнити
Восстановление пароля