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

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

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

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

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

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

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

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

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

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

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

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

• Telegram: Telegram (N — ваш ник).
• Whatsapp: https://api.whatsapp.com/send?phone=N">Whatsapp (N — ваш номер телефона без +);
• Viber: Viber (N — ваш номер телефона без +);
• Skype: Skype (N — ваш ник).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

***

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

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

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