Как сделать ваш лендинг более профессиональным

Мы знаем, как выглядит «профессионал». Тогда почему так сложно сделать, чтобы страницы сайта выглядели должным образом?

В процессе создания дизайна страницы мы воплощаем в жизнь тысячи микро-решений, таких как:

• В каком месте необходимо добавить изображения?
• Расстояния между блоками достаточно? Или его уже слишком много?
• Все объекты выровнены друг с другом? Этот элемент необходимо расположить не по правилам по уважительной причине?
• Какие отступы должны быть между абзацами? Как насчет иллюстрации в этом месте? Здесь что-то выглядит не так.
  

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

Итак, вопрос следующий: есть ли более легкий способ?

Давайте изучим 3 простых техники, которые придадут страницам более профессиональный вид.

1. Модель дизайна главного экрана
2. Общеизвестные UX-секреты
3. Облегчение беглого сканирования страницы
   

Первые 5 секунд имеют значение

В текущий момент я прохожу курс по лендингам, который уделяет много внимания вопросу UX. 

Так много, что в конечном итоге все закончилось знакомством с концепцией 5-ти секундного теста.

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

5-ти секундный тест на практике:

1. Найдите друга (или дружелюбного незнакомца), у которого есть свободное время, чтобы помочь вам с вашим сайтом.
2. Дайте ему посмотреть на страницу в течение 5 секунд.
3. После этого задайте ему дополнительные вопросы.
   

Достаточно просто, верно?

Но самый важный момент, конечно же, это вопросы.

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

• Что продает или предлагает страница?
• Какие выгоды вы получите от предложения?
• Как называется компания, которая делает вам предложение?
  

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

Вы тестируете наглядность, а не спрос. 

В итоге наглядность становится значимым фактором, когда речь идет о профессиональном виде страницы.

Чтобы понять, почему это происходит, сначала нам необходимо поговорить о первом впечатлении.

Почему для профессиональных страниц первое впечатление имеет большое значение?

Помните, что мы упомянули, что вы легко можете сказать, выглядит страница профессионально или нет? 

Что ж, отчасти это связано с первым впечатлением.

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

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

Согласно исследованиям, первое впечатление формируется за 500 миллисекунд.

И именно на основе этого первого впечатления пользователи принимают первое решение на вашей странице. 

Решения, которые потенциальный клиент может принять при посещении вашей страницы:

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

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

А сейчас вернемся к теме наглядности страницы.

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

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

Причина проста.

Если вы заставляете клиентов думать о чем-то «‎умном»‎, вы испортите первое впечатление. Это не умно, а суматошно.

Вот почему существуют модели дизайна первого экрана.

Модель дизайна первого экрана выглядит следующим образом:

Заголовок: Готовы стать профессионалом в рекламе на Facebook и Instagram? 

Кнопки: Подписаться или Узнать больше

Страница AdEspresso’s University 

Заголовок: Увеличьте конверсию сайта на 15% меньше чем за 15 минут

Кнопка: Попробовать бесплатно

Страница UseProof

Заголовок: Новый сервис по подсчету прибыли для маркетинговых агентств

Кнопка: Стать партнером

Страница EzTexting

Модель первого экрана — это комбинация трех элементов.

Заголовок + призыв к действию + видеоролик или изображение

Это трехкомпонентное комбо работает по нескольким причинам:

• Оно следует принципу дизайна «‎правило трех элементов»‎, которое помогает разделить контент, улучшает внешнюю привлекательность и делает ее более запоминающейся.
• Вы показываете не просто текст и кнопку (которые могут придать странице обычный базовый вид). Использование хороших изображений или видео могут усилить эмоции и помочь быстрее придать ясности сообщению в отличие от слов (например, изображение книги на лендинге сильнее, чем просто слова «‎бесплатная электронная книга»‎).
• Оно создает визуальную иерархию, которая уменьшает сложность. Во время чтения контента вы понимаете его естественный и не требующий объяснений порядок. Заголовок, затем изображение или видео, после них кнопка или форма.
  

Если вы действительно хотите увидеть больше практических примеров трехкомпонентной модели, просто вбейте в поиске на Behance запрос «‎‎лендинг»‎. Вы увидите такой формат первого экрана везде, и небезосновательно.

Вот почему хороший первый экран имеет большое значение.

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

Для вашего удобства, вот эти ресурсы…

Список бесплатных ресурсов с изображениями для вашего лендинга:

• Pexels
• Little Visuals
• Unsplash
• Death to the Stock Photo
• New Old Stock
• Superfamous
• Picjumbo
• The Pattern Library
• Gratisography
• Getrefe
• IMCreator
  

Но что, если вы не хотите использовать модель дизайна, упомянутую выше?

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

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

Изображение — вот что важно.

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

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

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

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

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

Используйте общеизвестные UX-секреты

Итак, UX (расшифровывается как user experience — пользовательский опыт) — это явление, которое вызывает странное чувство во время изучения.

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

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

Вот почему их называют общеизвестные UX-секреты. Они настолько очевидны, но мы все еще постоянно нарушаем эти правила.

Общеизвестные UX-секреты включают в себя:

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

• Будьте настолько последовательны, насколько это возможно. Если вы создаете расстояние в 24 пикселя, сделайте все аналогичные расстояния на странице в 24 пикселя. Сделайте все заголовки первого уровня — одинаковыми, второго уровня — одинаковыми. Все это поможет вашей странице не выглядеть отталкивающе.
  

• Используйте систему заголовков: заголовок 1, заголовок 2, заголовок 3 и так далее (используйте правильные теги при html-верстке). Люди, которые пользуются программами для чтения экрана (читают текст вслух), используют их, чтобы лучше представить себе вашу страницу. Вы никогда не знаете, кто из вашей целевой аудитории использует их. Также система заголовков помогает с SEO-оптимизацией.
  

• Группируйте элементы, чтобы упростить визуальную структуру. Хорошо, это не такое очевидное правило, но это хороший принцип в разработке дизайна. Элементы, которые находятся рядом друг с другом, стремятся к визуальной (и психологической) группировке. Вы можете использовать цвет, чтобы объединить компоненты.

• 16 размер шрифта. На любом сайте минимальный размер шрифта текста, которым он должен быть написан — это 16 пикселей. [Хорошо, после того как я опубликовал эту статью, я узнал, что технически это неверно. Постоянно говорят, что минимальный размер шрифта должен быть 16 пикселей или по крайней мере это хорошее начало по причине читабельности такого размера. Неправда. Проблема в том, что я слышал эту фразу так много раз, что сам поверил в нее. В действительности нет стандартного размера шрифта. Однако с тех пор как 16px стал для браузеров размером по умолчанию, всем кажется, что этой фразой разбрасываются везде. Реальное лучшее действие — это использовать размер шрифта в процентах или относительных единицах (не менее 1 em), которые масштабируется в зависимости от размера экрана и увеличения масштаба. Оставляю две ссылки, которые вы можете посмотреть, чтобы узнать больше: https://www.w3.org/QA/Tips/font-size и  https://w3-lab.com/website-font-size-guidelines/]

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

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

Остался последний принцип, о котором мы еще не поговорили.

Сделайте страницу удобной для беглого просмотра

Давайте будем честными, скорее всего вы не читали каждое слово этой статьи. Вы пробежались по ней, потому что, вы сами знаете, у вас есть жизнь.

И это чудесно!

А теперь поймите, что ваши потенциальные клиенты делают также. 

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

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

Вот как можно улучшить возможность для пользователя быстро просканировать ваш сайт:

• Используйте маркеры списка (такие как в тексте, который вы читаете прямо сейчас. Они помогут быть краткими и напористыми при описании выгоды от предложения)
• Выделяйте ключевые слова (варианты — жирное выделение или использование цветов)
• Используйте подзаголовки со смыслом (спросите себя “что потенциальные клиенты должны узнать”, и сделайте ваш ответ подзаголовком)
• Длина строки должна быть небольшой, от 60 до 80 символов, чтобы ее было легче читать. Вы же не хотите, чтобы потенциальные клиенты терялись в тексте из-за длины строки, когда переходят на новую строчку.
• Одна идея — один параграф (Длина абзаца должна составлять не более 3-х предложений. Если вам нужно больше, либо разбейте абзац, либо будьте более краткими).
• Включите самую важную информацию для вашего потенциального клиента наверх страницы. Менее важную и дополнительную информацию — ниже.
• Посмотрите, можете ли вы убрать половину слов после того, как закончите тексты на странице. Меньше слов – меньше беспорядка.

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

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

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

Они просто листают страницу.

Замечательный запоминающийся пример использования правил по улучшению легкости сканирования страницы, который я встретил в жизни, это сравнение вот этого сайта с этим сайтом получше (ПРЕДУПРЕЖДЕНИЕ: на сайте присутствует сильное шутливое ругательство).

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

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

Мой бесплатный список удачных лендингов включает примеры и исследования настоящих страниц вместе с моими комментариями.

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