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

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

Плохой дизайн мобильного UX может разрушить ваш бренд

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

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

Чем отличается мобильный UX?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Внимательно посмотрите на свой мобильный UX

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