Откройте статистику своего сайта и посмотрите, с каких устройств приходят посетители. Почти наверняка смартфоны составляют больше половины трафика, а в некоторых нишах — до восьмидесяти процентов. При этом большинство лендингов до сих пор проектируются для большого монитора, а мобильная версия делается по остаточному принципу: «пусть блоки встанут друг под друга, и хватит».
Результат предсказуем: конверсия на смартфонах в два-три раза ниже, чем на компьютерах, а рекламный бюджет тратится впустую. В этой статье — двенадцать правил, которые мы соблюдаем в каждом проекте.
Почему мобильная версия — отдельная задача
Человек со смартфоном находится в другом контексте. Он может ехать в метро, стоять в очереди, сидеть на диване вечером. Его внимание рассеяно, связь может быть нестабильной, а экран маленький. Он держит телефон одной рукой и листает большим пальцем.
Всё это меняет требования к странице. То, что прекрасно работает на большом экране, на маленьком становится нечитаемым, неудобным или просто бесполезным. Поэтому мы проектируем мобильную версию параллельно с десктопной, а не адаптируем готовый макет в последний момент.
Правила для текста и структуры
Правило 1. Короткий заголовок
Заголовок, который на компьютере занимает две строки, на телефоне растягивается на пять-шесть. Это съедает весь первый экран. Для мобильной версии часто стоит сократить формулировку или уменьшить размер шрифта, сохранив смысл.
Правило 2. Кнопка на первом экране
Без прокрутки должны быть видны заголовок и главная кнопка. Если кнопка уехала за пределы экрана, значительная часть посетителей её просто не увидит.
Правило 3. Короткие абзацы
Абзац в пять строк на компьютере превращается в стену из пятнадцати строк на телефоне. Разбивайте текст на абзацы по две-три строки, используйте списки и подзаголовки.
Правило 4. Меньше блоков
Не всё, что есть на десктопе, нужно на мобильном. Второстепенные блоки можно скрыть или свернуть в аккордеон. Галерею из двенадцати фотографий — заменить слайдером. Таблицу сравнения — превратить в карточки.
Мобильная версия — это не уменьшенная копия сайта, а отдельный сценарий для человека, у которого мало времени, маленький экран и занята одна рука.
Правила для интерфейса
Правило 5. Большие кнопки
Минимальный размер области нажатия — около сорока четырёх пикселей по высоте. Кнопки меньше этого размера трудно нажать пальцем, особенно на ходу. Между соседними кликабельными элементами должен быть отступ.
Правило 6. Зона большого пальца
Человек держит телефон одной рукой, и большой палец свободно достаёт до нижней и центральной частей экрана. Верхние углы — неудобная зона. Важные действия лучше размещать ниже или делать закреплённую кнопку внизу экрана.
Правило 7. Правильные типы полей
Поле телефона должно открывать цифровую клавиатуру, поле почты — клавиатуру с символом собаки. Это мелочь, но каждое лишнее переключение раскладки снижает вероятность того, что форма будет заполнена.
Правило 8. Минимум полей
На телефоне каждое поле формы — это усилие. Если можно обойтись одним полем телефона, не просите имя, почту и комментарий. Остальное менеджер уточнит при звонке.
Правило 9. Кликабельный телефон
Номер телефона на мобильной версии должен быть ссылкой, по нажатию на которую сразу начинается звонок. Удивительно, но эту простую вещь до сих пор забывают на многих сайтах. Также стоит добавить кнопки быстрой связи через мессенджеры.
Правила для скорости и техники
Правило 10. Лёгкие изображения
Мобильный интернет не всегда быстрый. Изображения нужно сжимать, использовать современные форматы и отдавать на телефоны уменьшенные версии. Фоновое видео на мобильном лучше заменить статичной картинкой.
Правило 11. Никаких горизонтальных прокруток
Если на странице что-то выходит за ширину экрана, страница начинает «гулять» вбок при прокрутке. Это раздражает и создаёт ощущение сломанного сайта. Проверяйте каждый блок на узких экранах.
Правило 12. Осторожно со всплывающими окнами
Всплывающее окно, которое закрывает весь экран через три секунды после загрузки, на телефоне особенно раздражает: крестик маленький, его трудно найти и нажать. Поисковые системы также негативно относятся к навязчивым всплывающим окнам на мобильных страницах.
Как проверить мобильную версию
Живое тестирование
Ничто не заменит проверку на реальных устройствах. Откройте страницу на своём телефоне, на старом телефоне коллеги, на планшете. Попробуйте заполнить форму одной рукой, стоя. Пролистайте страницу в метро с плохой связью. Многие проблемы становятся очевидны только так.
Инструменты браузера
Режим разработчика в браузере позволяет посмотреть страницу на экранах разных размеров. Это удобно для быстрой проверки вёрстки, но не заменяет живого тестирования: на реальном устройстве всё ощущается иначе.
Аналитика
Сравните конверсию на мобильных устройствах и компьютерах. Если разница больше чем в полтора раза, мобильная версия требует внимания. Вебвизор покажет, где мобильные посетители останавливаются и уходят. Карта кликов — куда они пытаются нажать.
Проверка скорости
Сервисы проверки скорости загрузки дают оценку для мобильной и десктопной версий отдельно. Обращайте внимание на время до появления основного контента: если оно больше трёх секунд, часть посетителей уйдёт, не дождавшись.
Частые ошибки, которые мы встречаем на аудитах
Меню-бургер с двадцатью пунктами, в котором невозможно ничего найти. Текст светло-серого цвета, который не читается на солнце. Фиксированная шапка, которая занимает треть экрана. Слайдеры, которые перелистываются сами и не дают дочитать. Формы, где кнопка «Отправить» скрыта под клавиатурой. Изображения с текстом, который на маленьком экране превращается в нечитаемые пиксели.
Каждая из этих ошибок снижает конверсию на несколько процентов. Вместе они могут обнулить эффект от рекламы.
Закреплённая панель действий
Один из самых эффективных приёмов для мобильной версии — небольшая закреплённая панель внизу экрана. В ней обычно две-три кнопки: позвонить, написать в мессенджер, оставить заявку. Панель всегда находится под большим пальцем, и посетителю не нужно прокручивать страницу в поисках формы.
Важно, чтобы панель была компактной и не закрывала контент. Высота около шестидесяти пикселей, спокойный фон, контрастные иконки. Некоторые делают панель появляющейся только после прокрутки первого экрана — так она не конкурирует с главной кнопкой.
В наших проектах такая панель обычно повышает долю мобильных обращений на десять–двадцать процентов. Особенно хорошо она работает в нишах, где клиенты привыкли звонить, а не заполнять формы.
Вместо заключения
Мобильная версия — это не техническая формальность, а основная версия сайта для большинства ваших посетителей. Двенадцать правил из этой статьи — минимальный стандарт, который стоит соблюдать на любом лендинге.
Если вы видите, что конверсия на смартфонах заметно ниже, чем на компьютерах, начните с простого: откройте свою страницу на телефоне и попробуйте оставить заявку одной рукой. Скорее всего, вы сразу найдёте пару вещей, которые стоит исправить.