Почему сайт, который отлично выглядит на ноутбуке, на телефоне не продаёт?
Открываешь новый сайт на ноутбуке: аккуратно, всё на своих местах, заказчик доволен. Берёшь телефон, и та же страница превращается в бесконечную простыню. Кнопка заказа уехала на три экрана вниз, меню спряталось в угол, до которого большой палец не дотягивается, а фото занимает полэкрана и ничего не объясняет.
Почти всегда причина одна: мобильную версию делали последней, из готового десктопного макета, который просто ужали по ширине. Расскажем, как мы подходим к этому иначе и что проверяем до запуска.
Почему простое сжатие ломает сайт
На десктопе человек сидит за столом, у него точный курсор, большой экран и время разобраться. С телефона заходят в очереди, в транспорте, одной рукой, между двумя другими делами. Палец при этом куда менее точный инструмент, чем мышь, и к тому же закрывает то место, в которое целится.
Поэтому ужатый десктоп ломается сразу в нескольких местах. Ссылки и кнопки становятся слишком мелкими: производители платформ рекомендуют делать интерактивные элементы не меньше примерно 44 пикселей у Apple и 48 у Google, и на сжатой версии эти размеры почти всегда нарушены. Блоки, которые на десктопе стояли в ряд, превращаются в крошечные карточки. Таблицы сравнения не помещаются в экран и уезжают в горизонтальный скролл, который многие даже не замечают.
Что уходит, что остаётся, как блоки встают в колонку
Мы начинаем не с «как это уменьшить», а с вопроса к каждому блоку страницы: помогает ли он человеку с телефона дойти до целевого действия? Дальше у блока три возможные судьбы:
- Остаётся без изменений всё, на чём держится решение: заголовок, главное предложение, основная кнопка, телефон или мессенджер для связи. Если убрать это, мобильная версия потеряет смысл.
- Меняется всё, что можно показать компактнее. Фото, которое на десктопе стояло сбоку от текста, на телефоне встаёт под заголовок на всю ширину, а иногда обрезается или уменьшается, чтобы не съедать первый экран. Сравнительные таблицы превращаются в карточки или раскрывающиеся списки. Длинные меню прячутся в бургер, но самое важное действие, например «Позвонить» или «Написать», лучше вынести рядом.
- Уходит декор и повторы: лишние иллюстрации, дубли одного и того же оффера в трёх местах, длинные ленты портфолио, слайдеры с автопрокруткой. По нашему опыту, карусели на телефоне листают редко, поэтому всё, что важно, в них лучше не прятать.
Отдельная история с порядком. В колонке порядок блоков и есть приоритет, потому что человек видит только то, что уже проскроллил. На десктопе кнопка может спокойно жить в правом нижнем углу рядом с фото, а на телефоне её нужно поднимать сразу под оффер или закреплять внизу экрана. Хороший тест: пролистайте страницу пальцем и честно ответьте, что вам предлагают сделать на каждом экране. Если ответа нет, блок стоит не на своём месте.
Зона большого пальца
Большинство людей держат телефон одной рукой и управляют им большим пальцем. От этого экран делится на три условные зоны. Нижняя часть достаётся без усилий. Середина требует небольшого движения кисти. Верхний угол, противоположный той руке, которой держат телефон, достать тяжело, и туда приходится перехватывать устройство.
Из этого вытекают вполне практичные вещи. Главные действия мы ставим вниз: основную кнопку, переключатели, нижнюю панель навигации. В верхнюю зону уходит то, что нужно редко или только для просмотра: логотип, заголовок, иногда поиск. Левши и правши держат телефон зеркально, поэтому крупные кнопки на всю ширину экрана почти всегда работают надёжнее, чем маленькие в углу.
Но схема зон остаётся теорией, пока вы не проверили её на реальных людях. Для этого есть настоящие тепловые карты: в Яндекс Метрике это карта кликов, карта скроллинга и Вебвизор, где видно записи сессий. Смотрим на три вещи. Куда тыкают мимо, то есть по элементам, которые выглядят кликабельными, но ничего не делают. До какого места страницы реально долистывают посетители. И где относительно этого места находится кнопка или форма. Если форма стоит там, куда добирается меньшая часть аудитории, никакой красивый дизайн не поможет, её надо поднимать выше.
Что мы проверяем перед запуском
- Кнопки и ссылки достаточно крупные и не прижаты друг к другу, на них можно попасть, не целясь.
- Главное действие понятно уже на первом экране, без прокрутки.
- Основная кнопка находится в нижней половине экрана или закреплена.
- Основной текст читается без увеличения пальцами, ориентир от 16 пикселей.
- Страницу открыли на живом телефоне и пролистали одной рукой, а не только в режиме эмуляции в браузере.
Мобильная версия давно перестала быть дополнением к «настоящему» сайту. Для многих проектов с телефона приходит больше половины посетителей, а значит, для них это и есть основной сайт. Проектировать его стоит как отдельный сценарий, со своими приоритетами и своими правилами.
direkt.ink