Usability и landing page

Usability в landing page

Для удобства, я выделил основные факторы, которые влияют на Usability, когда мы говорим о landing page и вот они:

  • Залипающие меню
  • По-блочная прокрутка landing page
  • Свободное пространство
  • Визуальное сопровождение
  • Показывание анимации и активных действий на странице
  • Облегчение информации с помощью инфографики
  • Видео
  • Шрифты и правильная иерархия элементов

Поговорим о каждом более подробно.

Залипающие меню,как фактор Usability

Что такое залипающие меню в landing page — меню которое перекидывает, вас по странице на разные блоки, в зависимости от того куда вы нажали.

Например, вы нажали на отзывы и Вас перекинуло на блок посадочной страницы с отзывами и т.д.Наверняка, Вы встречали landing page с залипающими меню.

Примерно пол года назад таких меню вы практически не увидели, но сейчас, это стало достаточно популярным.

Пример такого меню, от нашей студии.

Usability и landing page

Есть несколько вариантов, как это можно реализовать:

  • Вариант первый — меню с надписями (классическое). Тут всё просто, классическое текстовое меню, обычно делается на одноцветном фоне.
  • Вариант второй -(тот который в последнее время нравится мне) — меню с клипартами.

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

  • Вариант третий — Залипающее меню с боку страницы + анимация. Очень интересная реализация, по Европейски и аккуратно. Обычно при наведение есть анимация и взаимодействие с пользователем.

Выводы: Я с читаю, если ваш лендинг пейдж больше 6-7 разворотов, он нуждается в залипающем меню, если страница короче, то в нем нет потребности.


Но в большинстве случаев это сыграет в плюс, чем в минус.

По-блочная прокрутка в landing page

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

Выводы: «фишка» крутая, особенно когда дизайн в landing page качественный, а не шаблонный. Мы в своих проектах, используем это редко, но на западе это довольно распространенно.

Свободное пространство на landing page

Если мы говорим о Usability в landing page, то конечно дизайн играет большую роль.

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


Выводы: лично я люблю landing page в «чистом дизайне», но тут скажу следующее: сложно сделать просто, нужно иметь огромный опыт.


Шрифты и правильная иерархия элементов

Начнем со шрифтов. Вот несколько правил которые мы используем:

  • Максимум два шрифта одного семейства
  • Понятные шрифты для человека
  • Нет жирным, курсивным шрифтам

Usability в landing page

Иерархия элементов — когда пользователь читает Ваш сайт или лендинг, важно что бы он понимал, где есть заголовки и какого они порядка.Например: в этой статье есть название и Вы интуитивно понимаете, что это самое главное в ней. В случае landing page, это заголовок.Так же в этой статье, есть заголовки первого порядка (он в начале) и второстепенного порядка + собственно сам текст.


Выводы: Следите за иерархией, правильно подбирайте шрифты и самое главное, доверяйте свой бизнес профессионалам!


Визуальное сопровождение

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


Выводы: с моей точки зрения, если Вам не удалось реализовать  пункт (Свободное пространство), то это нужно использовать.


Единственное, просьба не делайте это «криво»с пиксельными стрелками и не удачной реализацией.

Облегчение информации с помощью инфографики

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


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


Видео

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

Важно! Не делайте, «печальку», то есть если делать, то сразу хорошо.В ином случае это раздражает людей и это может сыграть с Вами злую шутку.

Виды видео роликов:

  • Видео инфографика
  • Продающее видео
  • Видео история
  • Видео кейс стади
  • Мультяшный ролик

Пример видео нашей компании 

Usability в landing page

Показывание анимации и активных действий на странице

Это вопрос Ui/UX дизайна.

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

Или другой случай, вы допускаете ошибку, а система это не распознает, например не дописали в номере телефона — одну цифру и отправили заявку.


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


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

Оцените статью:
Не интересноБаянСреднячокБравоИдеально (голосов 44, средний: 3,75 из 5)
Загрузка...

Хотите создать landing page?

Получите доступ к серии из 8 видео уроков о том, как проверить подрядчика при создании landing page.