У вас есть сайт — и он великолепен. Вы открываете его на ноутбуке: кнопки нажимаются, текст ровный, форма отправляется. Показываете партнёру, листаете с экрана на встрече, проверяете утром за кофе. Всё работает. Вы довольны, и правильно делаете.
Только вот вы — не ваш клиент.
Ваш клиент сидит в маршрутке, держит телефон одной рукой, потому что вторая занята поручнем. Экран бликует от солнца, у него открыто восемь вкладок, связь честно борется за жизнь где-то между станциями. Он зашёл к вам не просто так — ему правда что-то нужно. И вот кнопка «оставить заявку» прячется под адресной строкой браузера, цена налезает на название, а галочку согласия под формой невозможно нажать пальцем, потому что она размером с маковое зёрнышко.
И он не напишет вам «у вас сломан сайт». Он закроет эту вкладку и откроет следующего в выдаче. И вы об этом никогда не узнаете — потому что у себя-то вы всё проверили, и у вас всё отлично. Сайт сломался не у вас. Он сломался у него, в руке, которую вы не видите.
Дело не в том, что сайт делали криворукие
Это первое, что приходит в голову — «значит, плохо сделали». Но обычно нет. Сайт собирали нормальные люди по нормальному макету, и на их экранах он действительно работает. Проблема глубже и скучнее: макет и живой телефон — это две разные реальности, и вторую почти невозможно полностью предусмотреть, сидя в первой.
В макете один аккуратный экран. В жизни их сотни — узкие, широкие, вытянутые, квадратные, изогнутые, складные, с вырезом под камеру, со скруглёнными углами, которые молча отъедают пару пикселей по краям. В макете интернет всегда быстрый. В жизни — лифт, подвал, электричка, где страница подгружается рывками и картинки доезжают, когда уже передумал. В макете точный курсор мыши. В жизни — палец, который физически закрывает половину того, на что метит.
Дизайнер рисует в тишине и сосредоточенности; пользователь тыкает на бегу, не глядя, краем внимания, параллельно отвечая кому-то в мессенджере и слушая подкаст.
И вот в чём собака: человек, который делает сайт, смотрит на него не так, как тот, кто им пользуется. Разработчик открывает его на большом мониторе, в специальном режиме, который изображает телефон. Это полезная штука, но это — нарисованный телефон, не настоящий. А настоящий ведёт себя иначе. И сильнее всех выделился айфон.
Отдельный разговор — айфоны
Если какое-то устройство и умеет ломать то, что вчера работало, то это iPhone. У его браузера свой характер, был и остаётся, несмотря на многие перемены, и он подкидывает сюрпризы даже тем, кто делает сайты годами.
Покажу на одном примере, потому что он идеально объясняет всю суть проблемы. Есть негласное правило: если текст в поле ввода мельче определённого размера, айфон при нажатии на это поле сам приближает страницу — решает, что текст мелковат, и помогает вам его разглядеть. Звучит как забота. На деле выглядит так: человек тапает в поле «телефон», экран резко наезжает, вся вёрстка съезжает вбок — и обратно само не возвращается. Пользователь остаётся в перекошенном, увеличенном сайте, тыкает пальцами, пытаясь его уменьшить, не понимает, что вообще произошло, и закрывает вкладку. Лечится это одной правкой — но только если человек, который делал сайт, про этот нюанс знает. А знает далеко не каждый, потому что нигде в очевидных местах это не написано, и узнаёшь обычно только на своём опыте.
И таких мелочей у айфона не одна. То он по-своему считает высоту экрана, и блок, который должен занимать его целиком, оказывается то выше, то ниже, чем надо. То иначе ведёт себя прокрутка. То что-нибудь ещё. Ни одну из этих штук не видно в нарисованном телефоне на мониторе — они вылезают только на живом устройстве в живой руке. А если на живом айфоне сайт никто не открывал, то первым это сделает ваш клиент. Бесплатно поработает в роли тестировщика — и уйдёт.
Узнаёте свой сайт?
Вот как это выглядит снаружи, глазами человека, который просто хотел что-то купить. Пробегитесь — наверняка пара пунктов отзовётся.
- Сайт едет вбок сам по себе. Вы его не двигали, а он почему-то прокручивается горизонтально, будто за край завалился невидимый ящик — обычно так и есть, один элемент вылез за границу экрана и потащил за собой всё остальное.
- Форму невозможно заполнить. Поля стоят впритык, между ними не попасть, выезжающая клавиатура закрывает кнопку «отправить», и ты отправляешь вслепую, не видя, нажалось ли вообще.
- Самая важная кнопка прячется за панелью браузера. Та самая CTA, ради которой всё строилось — «купить» или «позвонить» — оказывается ровно за полоской браузера снизу. Главное место занято, дотянуться нельзя.
- Страница дёргается под пальцем. Целишься в ссылку, а в этот момент сверху дозагрузилась картинка, всё подскочило, и ты нажал на соседнюю кнопку.
Каждая из этих вещей поодиночке — мелочь. Но для реального клиента мелочи кончаются быстро. Достаточно одной, чтобы он закрыл вкладку.
Почему это бьёт по карману
Скучные цифры, для полноты картины. Больше половины всего интернет-трафика в мире сегодня — мобильный: по разным подсчётам, от 60 до 64 процентов, и эта доля растёт уже почти десять лет подряд. Для интернет-магазинов и сферы услуг телефонов обычно ещё больше. То есть большая часть ваших посетителей видит ровно ту версию, которая ломается.
И вот в чём реальная проблема: мобильный трафик у всех большой, а покупают с телефона заметно хуже, чем с компьютера — примерно вдвое реже. Причина ровно та, о которой весь этот текст: на маленьком экране тяжело выбирать, а заполнять формы — мучение. Люди приходят, но спотыкаются по дороге к оплате.
Сломанная форма на телефоне — это не «некрасиво» и не «поправим на досуге». Это конкретный человек, который хотел отдать вам деньги и не смог. Он не жалуется, не пишет в поддержку — он просто уходит к конкуренту, у которого кнопка нажимается, а вы даже не узнаёте, что он был. Он был готов отдать деньги, но теперь уже не вам.
Есть, правда, одно исключение. Кривой мобильный вам простят, если деваться некуда — если вы единственный, у кого есть нужное, или если вы часть инфраструктуры, из которой не выйдешь. Условный рабочий портал человек откроет с телефона, несколько раз выругается и будет терпеть, потому что надо. Но если вы бьётесь за клиента на открытом рынке, где он в одном движении пальца от того, чтобы уйти, — такой роскоши у вас нет.
Что с этим делать
Хорошая новость: всё это решаемо. Плохая: макетом на мониторе не отделаетесь, придётся брать настоящий телефон.
Самое полезное, что можно сделать прямо сегодня и без разработчика, — открыть свой сайт на своём же телефоне и честно пройти весь путь клиента. Не пробежаться по главной, а именно пройти: найти товар, положить в корзину, заполнить форму, нажать «отправить». Там, где спотыкаетесь вы, споткнётся и покупатель — только он, в отличие от вас, не будет разбираться, а просто уйдёт. Дайте потыкать друзьям с разными телефонами — айфон и андроид ведут себя по-разному. И отдельно, руками, проверьте формы: реально заполните заявку большим пальцем одной руки, как в той самой маршрутке. Это самое слабое место почти у всех и самое редко проверяемое.
Для самых любопытных есть приём, которым пользуются сами разработчики. В обычном браузере на компьютере нажмите F12 — откроется панель разработчика. Сверху там есть значок с телефоном и планшетом: включаете его — и сайт показывается в рамке выбранной модели, хоть айфона, хоть андроида. Это нарисованный телефон, не настоящий, и финальную проверку он не заменит. Но очевидные поломки — уехавшую вёрстку, вылезающий текст — покажет моментально, не вставая с кресла. Грубо говоря, быстрая проверка «горит или нет», тушить всё равно идёте к живому устройству.
Вывод до обидного простой. Мобильная версия — это не уменьшенная копия большого сайта, которую делают по остаточному принципу. Для большинства ваших клиентов мобильный и есть сайт — единственный, который они вообще увидят. Начните относиться к телефону как к главному экрану, а не как к довеску в духе «потом причешем» — и он перестаёт разваливаться в руках. А заявки, что характерно, начинают доходить.
Если вы дочитали и уже машинально потянулись за телефоном проверить ту самую кнопку — не останавливайтесь, проверьте по-настоящему.
Будь первым