0. Оценка общего состояния сайта
1. Навигация
2. Дизайн
3. Контент
4. Верстка
5. Взаимодействие с интерфейсом
6. Выбор продукта/услуги
7. Оформление заказа
8. Автоматическая проверка в Вебмастере
9. Что дальше: работа с мобильным трафиком
Как проверить общее состояние мобильного сайта
Быстрая оценка с помощью Метрики
Отчёт Метрики «Устройства» позволяет узнать, как взаимодействовали с сайтом пользователи смартфонов и планшетов. Где посмотреть данные: Стандартные отчеты → Технологии → Устройства.
Если процент отказов с мобильных значительно выше, чем с десктопов — значит, на мобильных сайт работает недостаточно хорошо.
Удобная мобильная версия сайта поможет не упускать ни одного целевого перехода на сайт — с какого бы устройства ни приходил пользователь.
Навигация по сайту
Быстрое переключение между разделами
Чтобы мобильные пользователи сразу могли перейти в нужную часть сайта, ссылки на основные разделы лучше поместить в самом верху страницы.
Удобные меню
Для мобильного сайта полезно использовать минимум пунктов меню — чтобы они помещались в одну строку. Также меню можно выполнить в виде вертикального выпадающего списка.
Кнопки вместо ссылок
Главные навигационные элементы на мобильном лучше выполнять в виде кнопок, а не ссылок. Кнопки должны быть достаточно крупными и располагаться с некоторым интервалом, чтобы избежать случайных нажатий.
Дизайн
Размер страницы, адаптированный под экран мобильного
Весь контент сайта не должен выходить за рамки экрана мобильного устройства.
В мобильной версии сайта не рекомендуется использовать крупные элементы с фиксированной шириной, чтобы не допускать горизонтальной прокрутки. Для корректного масштабирования страницы в браузере используйте метатег "viewport".
Адекватный размер шрифта
Оптимальная длина строки для удобного чтения — 50-75 символов.
Наиболее комфортный размер шрифта для чтения — не менее 12 px.
Отсутствие «визуального шума»
Мобильные сайты не стоит перегружать изображениями и большими текстовыми блоками.
Отсутствие анимированных баннеров и других отвлекающих элементов
Для мобильной версии сайта лучше не использовать анимированные баннеры. Они могут отвлекать пользователя от целевого действия и замедлять загрузку контента.
Контент
Продуманные списки
Информацию желательно структурировать с помощью раскрывающихся списков, якорных ссылок и других удобных элементов навигации. При прокрутке длинной таблицы её шапка должна быть зафиксирована.
Отсутствие проблем при загрузке изображений, видео и другого медиаконтента
Частая причина проблем при загрузке контента — помимо обычных ошибок в коде и верстке — видеоформаты Flash, Applet или Silverlight: они не воспроизводятся на мобильных. Для видео лучше использовать HTML5.
Flash-объекты и изображения, которые не загружаются, портят впечатление от сайта и не дают получить нужную информацию.
Возможность увеличить изображения
Рассмотрев товар в подробностях, пользователи смогут быстрее принять решение о покупке.
Верстка
Отсутствие горизонтальной прокрутки
Верстка в одну колонку позволит избежать горизонтальной прокрутки.
Кроссплатформенность
Сайт должен корректно работать во всех мобильных операционных системах — Android, IOS, Windows Phone и других. Не забудьте, что для одной платформы есть разные версии браузеров, в которых сайт также должен отображаться без ошибок.
Взаимодействие с интерфейсом
Быстрая загрузка
Скорость загрузки мобильного сайта напрямую связана с показателем отказов. Желательно, чтобы сайт загружался практически мгновенно.
Статус загрузки элементов
Пока сайт или его элементы загружаются, нужно показывать соответствующее текстовое сообщение или наглядный визуальный статус. Иначе пользователи могут просто закрыть сайт, решив, что он не работает.
Визуальный эффект от нажатия кнопок
Интерактивные элементы должны изменяться от действий пользователя. Такая обратная связь позволит избежать ошибок при повторном нажатии.
Удобные элементы интерфейса
Элементы должны быть достаточно крупными, чтобы ими можно было пользоваться без изменения масштаба. Например, для чекбокса полезно увеличить кликабельную площадь — включить в неё не только место для «галочки», но и название пункта целиком.
«Умные» списки, в которых можно быстро выбрать нужный пункт
На мобильном особенно сложно найти нужный пункт в длинном списке. Здесь помогут поисковые подсказки — достаточно начать набирать слово, чтобы сразу увидеть нужный вариант. Такое решение экономит время клиентов и уменьшает процент отказов.
Возможность пролистывать фотографии
На мобильном удобно пролистывать изображения с помощью жестов — а не нажимая на маленькие неудобные стрелочки.
Очевидный способ закрыть изображение
Чтобы пользователям было легко переходить от одной галерее к другой, у каждой картинки должен быть заметный крестик закрытия в правом верхнем углу. Роль крестика может играть и однократное нажатие на изображение.
Удобный выбор даты в календаре
Наличие онлайн-карты и геолокации
Местоположение пользователя желательно запрашивать на страницах адресов или поиска магазина, а не сразу на главной. При этом стоит пояснять, зачем сайт спрашивает, где находится клиент — например, чтобы «найти магазин поблизости».
Отсутствие навязчивых элементов
Всплывающие баннеры, тизеры приложений во весь экран и другие подобные элементы портят впечатление от сайта и увеличивают процент отказов. Если у сайта есть приложение, о нём лучше рассказать с помощью аккуратного уведомления:
Выбор продукта/услуги
Удобная навигация в каталоге
Чтобы использовать каталог было удобно, элементы управления нужно делать крупными и размещать их на видном месте. Также полезно обеспечить возможность перехода на несколько страниц вперёд или назад.
Удобный переход к подробному описанию товара
Полезно сделать всю карточку товара кликабельной, чтобы пользователи могли быстро перейти к подробному описанию.
Оформление заказа
Наличие интерактивной кнопки звонка
Использование встроенных функций смартфонов может ускорить достижение цели. Рекомендуем настроить автоматический набор номера по нажатию.
Наличие кнопок социальных сетей, почты, мессенджеров
Кнопки социальных сетей/мессенджеров/почты помогут пользователям сохранить интересующую их информацию и завершить конверсию на другом устройстве.
Широкие поля формы
Рекомендуем сделать поля формы крупнее. Для этого можно разместить название поля не слева от него, а сверху.
Подсказки по формату заполнения полей
Благодаря подсказкам пользователи смогут сразу заполнить форму без ошибок. Рекомендуем размещать подсказки в полях ввода, используя привычный светло-серый шрифт.
Удобный ввод данных в форме
Чем меньше нажатий на экран отделяет пользователя от конверсии, тем лучше. Сократите путь до покупки за счёт цифровой клавиатуры для ввода номера телефона и календаря для выбора даты. При этом пользователь должен автоматически попадать в следующее поле формы.
Сохранение данных при нажатии кнопки «назад» или случайной перезагрузке
Данные должны автоматически сохранятся на любом шаге заполнения формы. Чтобы пользователь не мог нечаянно закрыть анкету, используйте предупреждения («Продолжить» / «Отменить»). Это поможет увеличить процент отправленных форм.
Корректная работа кнопок
Рекомендуем проверить, что по нажатию на кнопку происходит именно то, чего мог ожидать пользователь.
Автоматическая проверка в Вебмастере
С помощью Вебмастера можно быстро проверить, выполняются ли некоторые из пунктов выше: Инструменты → Проверка мобильных страниц*
* Потребуются права на управление сайтом в Вебмастере.