Сделайте как в банке: почему чужой онбординг и нижняя навигация убивают ваши продажи, и как собрать свой путь за неделю

Стук в личку от заказчика звучит уверенно: «Нам нужен онбординг (первый экран-знакомство с приложением) и нижняя навигация (меню внизу экрана для управления одной рукой) ровно как в банковском приложении. Это же стандарт». Кажется, что спорить не о чем. Банки — лидеры по метрикам удержания, их интерфейсы вылизаны до пикселя. Но чужая кнопка выросла из чужих денег, законов и привычек. Вчера мы откатили назад точно такое же решение на MVP (минимально жизнеспособный продукт — первая рабочая версия сервиса) локальной сети магазинов. За одну неделю слепого копирования корзины крупного игрока конверсия в оплату рухнула на 22%. Мы потеряли почти четверть реальных заказов просто потому, что перенесли красивую обертку без понимания того, что под ней спрятано.

Шаг 1. Что именно сломалось при переносе банковских паттернов в доставку еды

Мы честно скопировали корзину лидера рынка. Модификаторы товара (выбор добавок к блюду — например, сыр или соус поверх пиццы) переехали из списка прямо поверх карточки через оверлей (всплывающее окно). Добавились обязательные поля адреса внутри чекаута (этап проверки заказа перед оплатой), внезапная перезагрузка шага после выбора времени и KYC-экран (процедура подтверждения личности клиента; Know Your Customer — термин из банковской сферы) ради аналитики. На бумаге это выглядело солидно. В реальности импульс покупки умер на третьем клике. Пользователь открывал модификатор, ждал анимацию, тыкал в опции, закрывал его, промахивался мимо кнопки из-за сдвига верстки, попадал на перезагрузку данных и видел требование заполнить улицу еще до того, как выбрал сам товар. Лишние касания крадут время, а любая пауза длиннее трех секунд дает мозгу команду закрыть вкладку. Люди уходили не потому, что им не нужны были пельмени, а потому что интерфейс требовал от них дисциплины ипотечного заемщика ради пачки замороженных полуфабрикатов. На полный аудит воронки ушло три дня, еще два — на экстренный откат к простой корзине без тяжелых слоев. Продажи вернулись к исходным значениям сразу после удаления лишнего трения.

Шаг 2. Почему чужой UX ломает ваш контекст: четыре невидимые переменные

Банковский интерфейс кажется безопасным только снаружи. Внутри него работают жесткие правила, которых нет у магазина у дома. Разный порог входа: банк имеет юридическое право требовать паспортные данные и биометрию до первого действия, пользователь готов ждать минуту ради безопасности своих миллионов. Магазин пельменей этого права не имеет, а холодный клиент закроет приложение при виде первой же анкеты. Разные устройства: нижний таб-бар идеален для приложения Сбера, где главный экран — статичная лента операций. В каталоге товаров эта полоса высотой в 60–80 точек съедает вертикаль под реальный контент, заставляя пользователя бесконечно листать пустоту вместо просмотра витрины. Разные деньги и связь: сложные анимации переключения экранов, фоновые запросы геолокации и тяжелые библиотеки сжирают батарею и мобильный трафик там, где половина аудитории сидит на лимитных тарифах в регионах. Разные риски: принудительная регистрация ради сбора сквозной аналитики режет первый заказ. Если человек пришел купить один конкретный товар здесь и сейчас, любое препятствие между ним и кнопкой «Оплатить» работает против вас. Копируя экраны банка, вы копируете их главную задачу — минимизировать юридические и финансовые риски. Ваша задача прямо противоположная — максимально быстро отдать горячий товар голодному человеку.

Шаг 3. Как безопасно брать чужое: деконструкция цели до голых шагов

Чужой интерфейс — это источник гипотез, а не чертеж финального продукта. Чтобы перестать копировать пиксели и начать решать свою проблему, сделайте следующее. Выпишите цель конкретного экрана одним предложением. Например: «Пользователь должен выбрать адрес так, чтобы курьер нашел дом без звонка». Теперь снимите идеальный путь вашего реального пользователя до денег. Не фантазируйте, посмотрите записи сессий вашей старой версии. Где люди реально замирают? Оставьте только те шаги, которые сокращают время или риск физической ошибки (например, опечатку в номере квартиры). Все остальное — красивые маски ввода, дополнительные согласия на рассылку, выбор цвета темы и приветственные слайды про миссию компании — уходит в опциональное и ставится в бэклог (очередь задач на разработку) до первых твердых данных. Если функцию нельзя обосновать прямой экономией минут покупателя или рублей логиста, она вырезается без обсуждения.

Шаг 4. Быстрая проверка перед релизом: коридорный тест на ваших реальных товарах

Никакой магии, только фиксация трения своими руками. Соберите прототип (черновой интерактивный макет, который можно потыкать) ровно тех экранов, которые планируете выпустить. Возьмите пять живых людей со стороны — коллег из соседнего отдела тоже можно, если они никогда не видели вашу админку. Дайте им в руки свои реальные товары, а не абстрактные плейсхолдеры (заглушки вместо настоящих картинок и текстов). Поставьте простую метрику: если трое из пяти медлят дольше трех секунд на одном экране или переспрашивают формулировку («А тут надо улицу выбирать или уже дом?») — этот экран меняется либо полностью уходит. Засекайте время пальцем по секундомеру, записывайте дословные реплики. Вы удивитесь, сколько «стандарта» рассыплется после второго респондента. Этот метод занимает полдня, но спасает недели разработки и тысячи слитых рекламных бюджетов.

Завтра утром откройте запись реальной сессии пользователя в вашем текущем заказе. Найдите самый длинный участок, где курсор замер или палец завис над экраном. Запишите тайминг этой паузы. Затем выпишите одно предложение-цель этого экрана. Уберите все элементы, которые не ведут напрямую к оплате или выбору результата. Соберите быстрый коридорный тест на этих исправленных экранах до конца недели. Чужой интерфейс оставьте открытым во второй вкладке браузера исключительно как справочник идей, а не как готовый шаблон для вставки в код.