Представьте: ты заходишь на сайт с телефона, а тебе встречает уменьшенная копия десктопа. Кнопки размером с муравья. Меню где-то в космосе. Текст надо зумить двумя пальцами, как будто расшифровываешь древние рукописи. Знакомо. Это классика жанра: «мы просто ужали сайт — и так сойдёт».
Ты реально думал, что это мобильный UX? Нет, друже. Это просто десктоп, который похудел и стал меньше. А разница между его «ужаль» и нормальным адаптивом — это потерянные продажи, обозлённые пользователи и корзины, брошенные до оплаты. Разберём, почему так нельзя и что с этим делать. Без воды и ваты.
Просто «ужать» сайт — это не адаптив, это издевательство
Слушай сюда. Типичный подход к «мобильной версии» выглядит так: сделали десктоп, прописали в CSS width=device-width, уменьшили шрифты на пару пикселей — и всё, готово. «Адаптив» есть, че ещё надо?»
Надо. Вот почему это плохо: элементы становятся слишком мелкими, акценты ломаются, сетка превращается в порриджейший микс из горизонтального скролла и нечитаемого хаоса. Иногда колонка просто вылезает за край экрана. Ух ты, красота… если смотреть с Марса.
И вот конкретные последствия: пользователь попадает пальцем не на ту кнопку — рост ошибочных кликов взлетает до небес. Форма невозможна заполнить — поля микроскопические. Отказы растут. Любимый приём разработчиков: пусть пользователь зумит, пальцы же у него не отвалятся. Ага, щас. Отваляются вместе с конверсией.
Контент на мобиле: не всё, что влезло, должно жить на экране
На десктопе у тебя три колонки, баннер, промо, всплывающие виджеты, попап с чатом и ещё пять блоков сбоку. На мобиле — один экран, и пользователь, скорее всего, едет в метро или стоит в очереди. Ему нужно быстро. Ему нужно главное. А не километр промо-блоков до кнопки «Купить».
Что нужно делать? Убрать второстепенное. Показать главное в первых двух-трёх экранах. Перестроить порядок блоков так, чтобы воронка продаж работала, а не кроссворд из промо-блоков и баннеров. Если пользователь листает 10 экранов, чтобы дойти до кнопки «Купить», он либо святой, либо очень хочет потратить деньги. Скорее всего, уйдёт раньше.
Палец против мышки: кнопки, в которые невозможно попасть
Помнишь, как работает мышка? Она точная. Пальцем так не получится — его контактная зона около 10 x 10 мм в реальности. Google и Apple давно пишут в своих Human Interface Guidelines: минимальный размер тач-таргета — 44-48 пт. Но кто там читает гайды, да?»
Типичные герои: мелкие ссылки-тексты, кнопки, стоящие вплотную друг к другу, крестик закрытия попапа размером с пиксель. Кто это вообще тестировал? Мышкой? Стилусом? Да ну нафиг. Результат: пользователь нажимает не там, где надо, раздражается, закрывает не тот попап, уходит. Сюрприз, в воронке дыра. Как говорится.
Скорость, жесты и контекст: мобильный UX живёт в другом мире
Мобильный пользователь часто в метро, на ходу, с плохим интернетом — или вообще торопится и хочет быстро получить анс на свой вопрос. Если сайт грузится дольше, чем такси до магазина — угадай, куда пойдёт пользователь?
Тяжёлые десктоп-скрипты, которые ты накостылял на десктопе, продолжают грузиться и на мобиле. Результат — 3-5 секунд загрузки на 4G. Ну охренеть теперь. Google прямо говорит: 53% пользователей уходит с сайта, который грузится дольше 3 секунд. Но зачем оптимизировать, если и так сойдёт, да? Да ну нафиг.
Mobile-first: не модный термин, а способ не выглядеть динозавром
Mobile-first — это подход, когда сначала проектируешь под мобильный сценарий, а уже потом расширяешь под десктоп. Не наоборот. Звучит сложно? Только на первый взгляд. Зато конверсия не падает в подвал.
Почему это важно бизнесу? Потому что в нормальных нишах responsive — больше 50% траффика идёт с мобайла. Деньги там. Но, конечно, можно дальше жить в 2008 году, где все сидят за мониторами 1024×768 и покупают только с ПК. Удачи.
Чек-лист: что проверить прямо сейчас
Открыл свой сайт на телефоне сейчас. Ну признайся, когда делал это последний раз? Вот что проверь сразу:
Есть ли горизонтальный скролл на мобиле? Если да — это приговор.
Можно ли попасть пальцем в кнопку «Купить» с первого раза? Если ищешь очками — проблема.
Сколько экранов до кнопки целевого действия? Больше 3 — подумай, убрать лишнее.
Грузится ли сайт быстрее 3 секунд? Проверь через Google PageSpeed Insights.
Есть ли попапы, перекрывающие весь экран, при заходе с мобайла? Убрать. Немедленно.
Заполняется ли форма без зума? Если нет — ты теряешь людей на этапе заполнения.
Вместо заключения: ваше дело, ваши конверсии
Короче, пацаны и девчонки: мобильный UX — это не кнопка «сжать до размера телефона». Это другая среда. Другие сценарии. Другой мозг у пользователя.
Хотите деньги — делайте отдельный сценарий под мобайл. Не хотите — продолжайте мучить людей десктопом размером с почтовую марку. Ваши конверсии, ваше дело.