Главное Свежее Вакансии   Проекты
Рекомендуем
Нарративы и всё самое интересное
Перейти
Продвинуть свой проект
1 915 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

UX/UI вашего лендинга: 12 советов для тех, кто далек от дизайна

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

Подберите читаемый шрифт

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

  • Основной шрифт не должен быть меньше 12px, а если текста на вашем лендинге немного, то смело увеличивайте его до 16-18px.
  • Для заголовков лучше выбрать шрифт минимум в полтора раза больше основного.

E5H7C2A6XmKXZXT5LeZt2wrZY9F_gxQRKWySm-nW

  • Большинство UI-cпециалистов выступают за сочетание двух-трех разных шрифтов: без засечек для основного текста и с засечками для заголовков и акцентов.
  • Если с подбором шрифтовой пары есть проблемы — используйте специальные онлайн-сервисы (Font Combinations, Fontjoy, Font Pair).
  • Чтобы страница правильно отображалась у всех пользователей, выбирайте из каталога интернет-шрифтов Google Fonts.
  • Экспериментируйте с разными начертаниями одного шрифта: для акцента — жирное (Bold) или полужирное (Semi-bold), для основного текста — обычное (Regular). Старайтесь по минимуму использовать светлое (Light) или тонкое (Thin) начертания, потому что пользователям с плохим зрением трудно их читать, особенно с экрана смартфона или планшета.

Сделайте текст контрастным

Если фон светлый, сделайте текст черным или темно-серым. Если фон темный, сделайте текст белым.

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

dn2puSQ50sCfZDQ_MYqPxjlATod2M0Btw0dLdz5-

Сократите строки

Оптимальная длина строки — 45-65 символов или не больше 600px. Квадратные текстовые блоки воспринимаются легче, поэтому попробуйте сделать так, чтобы длина строки и длина абзаца были примерно одинаковыми. Но не в ущерб смыслу.

HyzehsGyIzlBYtwKhjOzHl6eIRki6_ooP8h03Msm

Сделайте номера телефонов и мессенджеров кликабельными

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

b_5acc69e596176.jpg

Делайте акценты

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

-rWyU4TQU-Ezef9iN1CuAR0ZrueQdBM0Q-BdN_mF

Простое изменение цветов расставляет акценты на свои места.

UiKwd_ul3Ol-pkN19a8CxS_tV6zzgkreXfqJ1gOa

Если в интерфейсе больше одного цвета, для акцентов подбирайте контрастные, но сочетаемые цвета. Используйте сервисы для создания цветовых палитр: Material Mixer, Color Hunter, Color Scheme (последний еще и автоматически строит макеты в получившейся гамме).

9ivGa1zfh__9VaXELkyySKJMnHJUkHcneWcTP1fS

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

UzqqKQPzY2FqtaStdPZx92Kn23fp_bw9JGB-xMk3

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

Стрелка — еще один хороший способ привлечь внимание к кнопке на лендинге.

gpLM53Lv1GGs9vlt3Gr5DSwR7kokkr1PqwdmyKs_

Важное — наверх

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

  • На первом экране должно быть название и специализация вашей компании, затем сформулировано бизнес-предложение — оффер.
  • Дизайн первого экрана и оффер должны перекликаться с рекламным объявлением, с которого пришел клиент. Можно поработать с сегментами аудитории и настроить мультилендинг. Он позволяет менять содержание страницы (текст, картинки, верстку) в зависимости от локации, поискового запроса или объявления, по которому пользователь попал на сайт.
  • Фон, шрифт, иллюстрации и цветовое решение должны соответствовать офферу. Причем не только по смыслу, но и по атмосфере.

e8oaHobe2B3C3QsUHigIZXZNGgWQdH-y6c-GfZTZ

Структурируйте

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

0Bdzq0KWUo4QbHRYEoP4AWoTNy6kL6oNsbAP9tk5

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

gwv2TP3IPkHc4oey7Jc9YnvKhMJKK1qHOidVpTOY

В левом примере непонятно, какой картинке соответствует каждая кнопка «Купить». Еще одна проблема — нажимать по ним со смартфона будет очень неудобно. В правом примере таких сложностей не будет.

Оформите футер

Футер может быть удобным инструментом навигации. Помните, что это не свалка, там не должно быть ничего лишнего Будут уместны:

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

Подберите иллюстрации

Графика — это хорошо, но она должна решать конкретные задачи. С помощью нее можно дополнить текст, заменить его или помочь в этом тексте ориентироваться.

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

FlVE4kp5kFQrBMYoLbRUGmAKtLHjSR-q5d9aBeF4

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

Используйте (или не используйте) полезное видео

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

  • Решили добавить фоновое видео — будьте осторожны и еще раз подумайте, точно ли оно вам нужно. Если все-таки нужно, то оно не должно длиться дольше 5-10 секунд, вдобавок нужно включить автоматический повтор. Не стоит перегружать лендинг текстом, если вы уже используете фоновое видео.
  • Если у вас есть короткие, динамичные видеопрезентации, инструкции, живые отзывы реальных клиентов — используйте их, чтобы показывать, а не описывать ваши преимущества текстом. Но помните, что любому видео все равно нужно короткое описание.
  • Не делайте окно с видео слишком маленьким — есть риск, что пользователь уйдет на страницу видеохостинга и уже не вернется. По ширине видео должно быть примерно таким же, как текстовый блок.
  • Большинство мобильных пользователей смотрят видео без звука. Если есть возможность, добавьте в видео субтитры.
  • Не используйте автозапуск со звуком.

emJgebB9YcyGior3G7QsQ5oIi6JPz386URnyvd4O

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

Упростите формы

Если вы используете формы для сбора заявок, сократите их объем, насколько это возможно. Длинная форма может отпугнуть пользователя, даже если вопросы простые.

  • Для первого знакомства лучше ограничиться двумя-тремя вопросами: имя, контакт и, если нужно, какой-то важный для вас вопрос. Остальную информацию лучше запросить, когда клиент проникнется к вам доверием и станет более «горячим».
  • Сначала размещайте поля, которые нужно заполнить обязательно и пометьте их яркой звездочкой. Можно даже без пояснений — пользователи уже привыкли, что обязательные поля обозначают так.
  • Формулировки вопросов должны быть короткими, простыми и понятными. Не надо писать «Напишите, пожалуйста, какое ваше имя, фамилия и отчество?», вместо этого просто «Имя».
  • Если используете списки, выпадающие меню, чекбоксы, они должны быть очевидными и удобными. Тестируйте свои формы на мобильных девайсах с маленькими экранами, чтобы проверить это.

mESu6J4FbQQLgSYuW1DKiVc670fleYB05W6kvYNp

Ускорьте загрузку

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

  • Пересохраните вашу фоновую графику с более низким разрешением, оптимально — чуть выше среднего.
  • Лучшие форматы для веб-картинок: PNG, GIF, JPG.
  • Используйте онлайн-сервисы для бесплатной оптимизации изображений (CompressJPEG, JPEGmini, Optimizilla). Они могут быть очень удобными, если нужно обработать сразу много изображений, например, в TinyPNG можно загружать до 20 файлов, максимальный размер каждого — 5 Мб.

Уберите музыку и Flash-анимацию, которые могут существенно замедлить загрузку. Если видео действительно будут полезны пользователю, встройте их как YouTube-ролики или гифки.

***

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

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

Проще не бывает! А потраченное время быстро компенсируется подросшей конверсией. Так почему бы не начать сегодня?

b_5acc69cf33866.jpg

+5
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Популярные за неделю
Показать следующие
Комментарии
Первые Новые Популярные
Комментариев еще не оставлено
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать
Прямой эфир