Пользователю должно быть удобно читать вас в спешке, под ярким солнцем, в транспорте или с приглушенным экраном, когда разряжается телефон. Все эти факторы влияют на восприятие контента и конверсию.
Чтобы не терять лиды, перед запуском кампании важно проверять, как ваш сайт или ленд отображаются в мобильной версии. Часто этому не уделяется достаточно внимания, что в результате влияет на показатели. Разберем детальнее правила хорошего оформления мобильной версии сайтов и лендингов.
Шрифт
Главный инструмент коммуникации с пользователями — это текст. От того, насколько грамотно подобран шрифт, будет зависеть и то, сможете вы привлечь внимание клиента или нет. Выбору шрифта не всегда уделяется достаточно внимания, часто просто берется из библиотеки первый попавшийся.
Шрифт лучше всего брать простой и лаконичный, не использовать декоративные и ориентироваться на стилистику всего сайта. При этом на страницах не должно быть смешения разных стилей, больше трех вариантов шрифтов лучше не использовать.
Главное правило в выборе — текст должен быть хорошо читаем на всех устройствах и корректно отображаться в разных браузерах. У текста на мобильных устройствах есть критически допустимый размер, которого стоит придерживаться, — это 12px. Но назвать его универсальным сложно, поскольку восприятие зависит и от зрения пользователей, поэтому лучше выбрать золотую середину — это 14px.
Между строками также должен быть интервал, чтобы текст был читабельным. Выделяйте заголовки, но выберите один шрифт для них, ориентируясь на основной текст. Чтобы не тратить время на подбор шрифтов, можно воспользоваться дополнительными инструментами, такими как:
Fontpair — это галерея различных шрифтовых пар,
Fontjoy — генератор шрифтовых пар на основе Google Fonts.
В примере выше достаточно сложный шрифт в заголовке. С такими вариантами нужно быть осторожнее, если вам нужно сделать акцент на оффере или его характеристике. При этом сам текст простой, читаемый и органично смотрится на фоне сайта.
Проверьте перед запуском кампании, как отображается сайт, с помощью таких инструментов:
Также проверить, как сайт отображается на разных устройствах, можно в Google Chrome, включив режим разработчика. С выпадающего окна выберите устройство, на котором хотите проверить мобильную версию.
Сочетание цветов
Чаще всего используют монохром и спокойные оттенки, поскольку они легче воспринимаются. Цвета на сайте не должны утомлять пользователя. Старайтесь избегать слишком ярких оттенков, которые плохо «дружат». Например, ярко-зеленый, розовый, синий и красный, и все это на одном ресурсе. Яркие цвета лучше всего оставить для кнопок, чтобы они были заметны для пользователя. Лучшие цвета для них — красный, синий, оранжевый.
Выбирая цветовую гамму, отталкивайтесь от вертикали. В том же гемблинге, например, яркие цвета хорошо воспринимаются и привлекают внимание, но важен баланс. Слишком много всего и сразу может сыграть против вас. Для того чтобы не переборщить, используйте сервисы проверки цветового сочетания. К примеру, проверить сайт можно с помощью WebAIM. Инструмент позволяет определить уровень контраста текста по отношению к фону. Коэффициент контрастности по WebAIM должен быть не меньше чем 7:1 для обычного текста и 3:1 для крупного.
Кнопки для мобильной версии
Лучше всего для мобильной версии, согласно исследованию MIT Touch Lab, использовать кнопки размером 10*10 mm. Конверсионные кнопки лучше размещать в центральной части экрана таким образом, чтобы их было хорошо видно. Лучше, когда кнопки в мобильной версии размещаются в нескольких блоках — в шапке сайта, в середине и в последнем блоке. Так человеку будет проще перейти к совершению целевого действия, нежели в ситуации, когда кнопка находится только внизу и ему нужно скроллить самостоятельно вниз. Если при этом сайт достаточно длинный, есть высокая вероятность, что вниз пользователь не доскроллит.
Если стилистика не позволяет вам вывести кнопки таким образом, чтобы они были вверху, посередине и внизу, вы можете сделать кликабельные фразы «Оформить заказ» и распределить их по странице, чтобы пользователь при нажатии переходил сразу к оформлению покупки.
Для того чтобы мобильная версия работала, необходимо придерживаться базовых правил — удобный шрифт, расположение конверсионных кнопок на видном месте, отсутствие сложных элементов и возможность быстро совершить целевое действие.
Проверяйте мобильную версию перед стартом кампании на разных устройствах, чтобы не слить бюджет. Это можно сделать самостоятельно или же упростить процесс и проверить сайт с помощью специальных инструментов.
