Как оценить юзабилити мобильной версии сайта

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

Самый простой пример:

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

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

Мобильная версия сайта: в чем отличие для пользователя?

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

• Размер экрана

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

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

• Размер шрифтов

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

  На изображении внизу подписи невозможно читать, а текст в абзаце сливается из-за недостаточного интерлиньяжа (расстояния между строками).



• Графика и анимация делают страницу "тяжелой"

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

• Flash-анимация

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

  Проведите анализ и проверьте свой сайт на удобство с помощью мобильных устройств. Доля посетителей, использующих планшеты и смартфоны, растет день ото дня. В этом несложно убедиться, посмотрев в Метрике соотношение посетителей, использующих разные устройства.

Сделайте взаимодействие посетителя с сайтом простым

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

2. Не создавайте длинные формы захвата. Заполнять форму заявки с мобильного устройства неудобно, а если форма громоздкая – ее вовсе не станут заполнять. Позаботьтесь о том, чтобы у пользователя не возникло трудностей, если он захочет стать вашим клиентом. Заполнение любых форм должно быть легким и быстрым. Форму справа, разбитую на несколько простых шагов, заполнит больше людей, чем ту, что на рисунке слева.

   

3. Указывайте номер телефона с «+7». Пользователь смартфона, посетивший ваш сайт, должен иметь возможность позвонить вам, кликнув по номеру телефона. Не стоит размещать телефон в виде картинки или в неправильном формате. Попробуйте прямо сейчас посетить собственный сайт со смартфона и позвонить, кликнув по номеру.

Палец против мышки

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

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

Адаптивный дизайн или мобильная версия?

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

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

Если вы понимаете, что пользователю не нужна львиная доля представленной на десктопном сайте информации, стоит задуматься над отдельной версией или, и это более перспективный путь, разработать приложение для смартфона. Так стоит поступать, если у вас есть функционал, которым нужно оперативно пользоваться в любое время: делать заказы, бронирования или покупки, отмечаться на карте или отправлять данные.

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