Количество людей, активно использующих интернет со своих смартфонов и планшетов, неуклонно растет с каждым днем. Разработчики и владельцы сайтов просто обязаны задумываться об их удобстве. Тем более, что Яндекс и Google повышают в выдаче сайты, адаптированные под мобильные устройства.
Мы расскажем вам, каким правилам нужно следовать, чтобы человеку было удобно на вашем сайте вне зависимости от устройства, которое он использует, и в чем вообще различия юзабилити для ПК и смартфонов.
Самый простой пример:
Человек за компьютером, изучая сайт компании, принял решение позвонить для консультации. Он берет телефон и набирает номер, который написан на странице контактов.
Человек, изучающий сайт со смартфона, уже держит трубку в руках. Чтобы ему было удобно вам позвонить, сделайте на сайте кнопку звонка специально для мобильных устройств.
Мобильная версия сайта: в чем отличие для пользователя?
Для понимания того, чем различаются дизайн сайтов, ориентированный на пользователей ПК, и дизайн мобильных версий, необходимо понять, чем отличаются условия для самих пользователей.
Размер экрана
Чтобы грамотно и удобно для посетителя скомпоновать страницу, нужно учитывать размер его экрана, так как дисплеи мобильных устройств значительно уступают экранам персональных компьютеров.
Проблема в том, что элементы, которые занимают половину большого экрана вашего компьютера, могут вовсе не уместиться на экране смартфона. Необходимо правильно определять размер шрифтов, изображений, кнопок и анимации. Уделяйте внимание и компоновке страницы, наиболее значимые блоки должны выглядеть одинаково хорошо на всех типах устройств.
Размер шрифтов
Весь важный текст на сайте должен быть легко читаем. Рекомендуем определить минимальный размер в 16 пикселей, и убедиться, что междустрочные интервалы выполняют свою функцию, отделяя одну строку от другой.
На изображении внизу подписи у картинок невозможно читать, а текст в абзаце сливается из-за недостаточного интерлиньяжа (расстояния между строками).
Графика и анимация делают страницу тяжелой
Старайтесь не перегружать свой сайт тяжелой графикой и не используйте автовоспроизведение для видео на странице. У пользователя мобильного устройства может быть недостаточно хороший сигнал или попросту ограниченный трафик, подумайте об этом, иначе вы рискуете потерять посетителя.
Flash-анимация
Flash-анимация не воспроизводится на многих мобильных устройствах. Советуем полностью убрать ее из мобильной версии сайта, иначе пользователь может столкнуться с отказывающимся воспроизводиться видео или, что еще хуже, с меню, которым он не сможет воспользоваться.
Проверьте свой сайт на удобство с помощью мобильных устройств. Доля посетителей, использующих планшеты и смартфоны, растет день ото дня. В этом несложно убедиться, посмотрев в Метрике соотношение посетителей, использующих разные устройства.
Сделайте взаимодействие посетителя с сайтом простым
Проверьте сайт на наличие критических ошибок, создающих высокий процент отказов и губящих конверсию, прямо сейчас.
Не создавайте длинные формы захвата
Заполнять форму заявки с мобильного устройства неудобно, а если форма громоздкая, ее вовсе не станут заполнять. Позаботьтесь о том, чтобы у пользователя не возникло трудностей, если он хочет стать вашим клиентом. Заполнение любых форм должно быть легким и быстрым.
Форму справа, разбитую на несколько простых шагов, заполнит больше людей, чем ту, что на рисунке слева.
Указывайте номер телефона с «+7»
Пользователь смартфона, посетивший ваш сайт, должен иметь возможность позвонить вам, кликнув по номеру телефона. Не стоит размещать телефон в виде картинки или в неправильном формате.
Палец против мышки
Важнейшая проблема в дизайне для мобильных устройств — отсутствие мышки в руках человека, который просматривает сайт со смартфона или планшета. Что это значит на практике? Элементы в мобильной версии должны быть такого размера, чтобы на них можно было нажимать пальцем, не задевая соседних элементов.
Кроме того, нельзя использовать отображение подсказок при наведении курсора мыши, ведь у мобильного пользователя курсора просто-напросто нет. Вот эту картинку никогда не сможет увидеть пользователь смартфона:
Адаптивный дизайн или мобильная версия?
Современные возможности верстки и достаточное развитие мобильных устройств оставляют очень ограниченный набор случаев, когда действительно актуально создание отдельной мобильной версии сайта. Чаще всего достаточно создать отзывчивый – адаптивный – дизайн, который будет удобным для пользователя образом преобразовываться при разных разрешениях экрана.
Один из принципов, которому нужно следовать: не прячьте от мобильных посетителей то, что вы показываете пользователю ПК.
Если вы понимаете, что мобильному пользователю не нужна львиная доля представленной на десктопном сайте информации, стоит задуматься над отдельной, существенно облегченной версией либо – и это более перспективный путь – разработать приложение для смартфона. Так стоит поступать, если у вас есть функционал, которым нужно оперативно пользоваться в любое время – делать заказы, бронирования или покупки, отмечаться на карте или отправлять данные.
Рекомендуем вам тщательно проверить свой сайт на наличие вышеописанных проблем. Заботясь о мобильных пользователях, вы сможете не только повысить их лояльность, но и улучшить позиции сайта в поисковой выдаче.
