Как адаптироваться к мобильному UX и изменению привычек пользователя в браузере

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

Плохой мобильный дизайн может испортить ваш бренд

Пользователи мобильных сайтов не очень прощают бренды, которые не оптимизируют их сайты должным образом. По данным Impactbnd, 52% клиентов не захотят использовать веб-сайт с плохим мобильным интерфейсом. Кроме того, вероятность того, что они вообще покинут сайт, в пять раз выше.

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

Чем отличается мобильный UX от других?

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

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

Вот несколько советов по улучшению мобильного UX.

Увеличьте видимость вашего текста и ссылок

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

• Избегайте использования необычных шрифтов. Лучшими типами шрифтов для использования являются Arial, Times New Roman, Grotesque, Helvetica и Open Sans. Такие шрифты, как Algerian of Ad Bonnie, будут слишком трудными для чтения.
• Рассмотрите возможность использования шрифта размером от 18 до 22 пунктов. Тот же размер шрифта на 10% больше на настольном устройстве, поэтому вам нужно будет использовать более крупный шрифт, чтобы текст был заметен на мобильном устройстве.
• Используйте более темный текст и более жирные цвета для гиперссылок. Это создает больший контраст.

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

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

Когда вы создаете новые кнопки с призывом к действию, видимость - одна из первых вещей, которые вы собирались рассмотреть. Однако вам также необходимо учитывать простоту выполнения призыва к действию, которая выходит за рамки видимости. На маленькие кнопки будет труднее нажимать. Это особенно актуально для пользователей с большими пальцами. Когда вы оцениваете UX своего сайта, вы должны помнить, что у некоторых людей пальцы будут больше, чем у вас, и соответственно регулировать размер кнопки. У Дуды это очень хорошо получается. Их инструмент онлайн-планирования vCita имеет большие кнопки CTA, на которые легко нажимать.

Используйте функцию "Звонок по клику"

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

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

Не усложняйте воронку электронной почты

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

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

Используйте гамбургер-меню, чтобы сделать Контент более доступным

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

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

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

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

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

Удаляем ненужные элементы

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

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

Внимательно изучите свой мобильный UX

Очень важно иметь хорошо оптимизированный мобильный интерфейс. Вы должны убедиться, что пользователи могут легко взаимодействовать с вашим контентом и максимизировать коэффициент конверсии. К счастью, есть много способов улучшить свой мобильный UX. Эти рекомендации являются хорошей отправной точкой, но не забудьте проверить! Ваши аналитические данные будут вашим лучшим ориентиром, когда вы внесете новые изменения в дизайн своего мобильного веб-сайта.