Дизайн мини ап с реальными примерами: как создать UX и UI в Telegram Mini App и не потерять в конверсии

«А где здесь кнопка назад?», «Ой, а где я?», «Мини ап загрузился или еще нет?», «Как посмотреть страницу инкогнито?» и другие приключения пользователя в Telegram Mini App. 

Руководитель компании ChatLabs Владислав Деханд делится опытом, как создать Telegram Mini App и не переделывать дизайн — с примерами реальных UI- и UX-решений для продаж и конверсий.

Какие проблемы возникают, если не учитывать особенности Telegram Mini App?

Пользователи быстро закрывают приложение, не заходят повторно, не выполняют целевые действия? Разбираемся, почему из-за дизайна в мини-ап падают MAU (Monthly Active Users), продажи (Paying Users), продолжительность сессии (Average Session Length) и другие метрики.

Mini App Telegram — это не сайт и не нативное приложение. Это отдельная среда, с которой нужно уметь работать. Технические особенности Телеграм диктуют правила UX и UI-дизайна.

Если дизайн мини-приложения в Телеграм не продуман, есть риск потратить деньги впустую и не достичь желаемого эффекта. Основные проблемы в юзабилити и дизайне мини апп:

1. Стартовый экран перегружен → пользователь не хочет разбираться, не видит ценности, уходит.
2. Непонятная структура → человек делает несколько тапов, путается, уходит.
3. Запутанная логика → непонятно, как вернуться на шаг назад, а вместо этого пользователь просто закрывает мини-приложение.
4. Сложные сценарии → воронка длинная и непонятная с «Нажми раз-два-три-четыре-пять, сделать седьмой шаг»: человеку надоедает, и он уходит.
5. Неадаптированные под Телеграм функции и сценарии → не работает часть функций, сделали макет, а его невозможность реализовать в Mini App, приходится переделывать.

Чтобы не пришлось тратить время и деньги, лучше на старте закладывать правильную структуру. ChatLabs занимается разработкой Telegram Mini App (TMA) с 2022 года. Ниже делимся накопленным опытом, рабочими приемами UI- и UX-дизайна мини-приложений, правилами прототипирования и тестирования юзабилити. А еще собрали все стадии и нюансы разработки в полезном чек-листе: скачивайте pdf в 1 клик, делитесь с коллегами и создавайте высококонверсионные проекты без проблем с UI, UX и масштабированием!

Почему и как дизайн Telegram Mini App отличается от веба?

Разработка мини-приложений в Телеграм — это и не веб, и не мобильные приложения. Аналогично и с Mini App для MAX, VK и иных платформ.

Здесь важно вписать UX-сценарии в контекст мессенджера, создать эффект бесшовного перехода и упростить пользовательский путь. При этом важно учесть ограничения платформы (Телеграм, Макс, Вк) и технические нюансы реализации проекта.

Мини ап запускается через бота или по прямой ссылке в мессенджере

Mini App доступен только с платформы Телеграм. Сценарии запуска и завершения отличаются от привычной вкладки в браузере. 

Это важно учитывать не только при проектировании дизайна, но и когда планируете рекламу на мини-приложение со сторонних источников: 

1. VK Реклама;
2. РСЯ;
3. Google UAC;
4. UGC-трафик;
5. контент-маркетинг. 

К примеру, у части пользователей мини-приложение не откроется просто потому, что не установлен Telegram. Один из способов решить подобную проблему — работать с аудиторией, которая уже есть в Телеграм. В кейсе SOKOLOV рассказывали, как ювелирный бренд запустил реферальную программу с розыгрышем и набрал 14 000+ подписчиков на текущей аудитории в Telegram-канале.

Визуал и наполнение TMA нужно проектировать так, чтобы у человека не было диссонанса с тем, что он видел в мессенджере. В идеальном сценарии — иллюзия бесшовного перехода: как будто не открывается приложение на стороне, а реально часть мессенджера.

Telegram Web Apps API ограничивает привычную системную навигацию

В мини-приложениях Телеграм нет привычной системной навигации. В частности:

1. Недоступность привычной в мобильной версии кнопки «Назад». Возврат через системную кнопку Телеграм.
2. Отсутствие адресной строки как в браузере. Нет и привычного «домика» — кнопки возврата домой.
3. Пользователь может закрыть мини-приложение в любой момент. 

Выбор настроек (нажатие на три точки в верхнем углу) ограничен. После тапа на три точки в меню Телеграм появляются «Показать бота», «Обновить страницу», «Условия использования», «Полноэкранный режим» (с конца 2024), «Добавить на главный экран» (с конца 2024), «Поделиться», «Настройки». 

В браузере, к примеру, будут доступны «Вкладка инкогнито», «Масштаб», «Закладки», «Недавние вкладки», «Найти на странице». Это влияет на паттерны поведения, а значит — механики вовлечения и удержания.

Мини-приложение в Телеграм может сохранять введенные данные и прогресс пользователя 

При проектировании дизайна Mini App Telegram стоит учитывать сценарии запуска и завершения. Плюс мини-аппов в Телеграме — работа с идентификатором аккаунта (Telegram ID). Благодаря этому легко сохраняются:

1. брошенные корзины;
2. прогресс-бар;
3. шаги в мини-приложении, на которых остановился пользователь. 

Если человек заходит в мини-приложение с одного и того же аккаунта, но на разных устройствах (ПК, планшет, смартфон), везде будет подтягиваться прогресс. Это особенно актуально для магазинов в Телеграм.

Telegram UI поддерживает темную, светлую и кастомную темы

В мини-приложениях Телеграм доступны Day and Night modes или кастомные темы. Вне зависимости от выбора стоит учитывать: и светлые, и темные режимы должны создавать ощущение бесшовной интеграции и продолжения мессенджера. Как будто бы человек вообще не выходит из Телеграма. Но здесь все зависит от конфигурации проекта. 

К примеру, для утилитарных мини-приложений, где предусмотрены частый вход и минимум действий (заметки, трекер привычек) лучше подойдет стандартный интерфейс. Для вовлекающих проектов — игр, тапалок, кликеров — можно делать кастомные темы, не связанные с Телеграм.

Для быстрого создания интерфейсов используют UI Kits (User Interface Kit, юай киты):

1. Telegram UI (Telegram Web Apps UI) — библиотека на GitHub с готовыми React-компонентами для Telegram Mini Apps;
2. Figma Telegram Mini Apps UI Kit — готовые компоненты и стили для мини-приложений в Телеграм;
3. Headlessui — UI-компоненты для интерфейсов WebApp Telegram.

Библиотека Telegram UI предоставляет готовые React-компоненты для создания TMA:

1. блоки — меню-аккордеон, карточка, кнопка, секция, аватар, плейсхолдер;
2. формы — чекбоксы, инпуты, мультиселекторы, радиокнопки, слайдеры, textarea;
3. навигация — навигационные цепочки (Breadcrumbs), сегментированные элементы управления (segmented control), пагинация, ссылки, группы вкладок TabsList;
4. оверлеи (Overlays) — модальные окна, всплывающие подсказки (poppers), подсказки-тултипы (tooltip);
5. feedback-компоненты — круговая полоса загрузки Circular Progress, progress bar, упрощенный макет загрузки Skeleton, snackbar-компоненты, кружок загрузки Spinner и другие.

Mini App может работать в полноэкранном и неполноэкранном (стандартном) режимах

В обновлении ноября 2024 года появился Full-screen Mode — полноэкранный режим, доступный при горизонтальной (альбомной) и вертикальной (портретной) ориентации. Полноэкранный режим позволяет:

1. получить больше пространства для игр и игровых интерфейсов;
2. воспроизводить широкоэкранные мультимедийные материалы;
3. улучшать и поддерживать Immersive experience (IE — иммерсивный опыт) в рамках расширенной реальности / Extended Reality.

Full-screen Mode в дизайне мини-приложений используют, когда взаимодействие достаточно долгое и подразумевает максимальное погружение (вовлечение, включение). Как правило, Mini App с фулл-мод заказывают для игр, тапалок, кликеров.

Неполноэкранный (стандартный) режим подразумевает наличие верхней «шторки», где размещены название мини-приложения в Телеграм и описание. При проектировании и разработке можно покрасить ее в цвет приложения, чтобы создать ощущение как будто она дефолтная от Телеграм.

Роберт Михалюк

Бизнес-аналитик компании ChatLabs

«Клиенты часто просят дублировать кнопку «Назад» в самом интерфейсе мини-приложения, т.е. в дополнение к верхней системной. Опыт ChatLabs показывает, что подобный ход излишний. Получается дублирование кнопки «Назад»: она и в интерфейсе Mini App, и системная».

В Телеграм Mini App недоступна работа с фоновыми задачами и процессами

Среда WebView накладывает ограничения на сценарии взаимодействия с мини-приложением и проектирование логики TMA. Mini App в Telegram работает ровно столько, сколько открыто (пока человек им пользуется). Как только пользователь закрывает мини-апп или переключается на другой экран, TMA прекращает работать и потреблять ресурсы устройства. 

Этим игры в Телеграм отличаются от браузерных. Если страница открыта в браузере (даже в фоновой вкладке), она все равно «живет». Значит:

1. продолжается отсчет таймера;
2. обновляется состояние игрового мира;
3. срабатывают триггеры.

Особенность Mini App в Telegram — в отсутствии подобных фоновых функций. Это ограничивает маркетологов и разработчиков. Например, нельзя реализовать сложные UX-сценарии с периодическими проверками или триггерами.

Важно учитывать, что движок Телеграм не поддерживает часть функций, которые доступны в браузере. В результате сложные UI и UX-сценарии могут «ломаться». Проблемы возникают, если нужны:

1. кастомные анимации;
2. тяжелые библиотеки;
3. 3D графика;
4. Unity и Unreal Engine;
5. WebGL.

Частично опытные разработчики могут решить перечисленные проблемы: 

1. минимизировать JS/CSS;
2. избегать тяжелых фреймворков;
3. использовать Lazy Load.

В области мобильного гейминга возникал вопрос: не запускаются игры внутри Telegram на старых устройствах (варианты — не открываются, открываются и не работают). После обновления 2024 г. программисты получили возможность взаимодействовать с аппаратными характеристиками гаджетов — мощностью и объемом памяти. Это позволяет автоматически настраивать параметры в зависимости от ресурсов устройства.

Также в обновлении 2024 года появился лоадер мини-приложения. На экран Mini App можно добавить логотип, значок и иные изображения: они отображаются перед началом загрузки приложения.

Как сделать дизайн мини-ап? Советы дизайнера, фишки, рекомендации

Для тех кто собирается создать Mini App, в Telegram разработали Design Guidelines — набор принципов для проектирования приложений. В ChatLabs дополнили гайдлайн Телеграма рекомендациями из опыта:

1. Подход Telegram-first. UX и UI-дизайн приложения создают с учетом ограниченного экранного пространства: ширина — до 375–400px, высота — до 800px. 
2. Контекст Телеграм. Потребитель уже находится в мессенджере, и важно сделать приложение органичной частью Telegram, не ломать шаблон восприятия. Для этого используют кнопки, свайпы, стеки, табы. 
3. Анимации плавные. В Design Guideline от Телеграма указывают идеальное значение — 60fps.
4. Ориентация на мобильные устройства. Mobile-first-подход, крупные кнопки, минимальное количество таблиц, замена сложных экранов на пошаговые действия.
5. Учет безопасных зон — Safe Area и Content Safe Area. Safe Area — какие отступы предусмотреть, чтобы контент не перекрывался системными элементами гаджета: вырезы («брови»), закругленные края экрана, камеры. Content Safe Area — какие отступы предусмотреть, чтобы на контент не перекрывался элементами интерфейса Телеграма.

С аналогичными ограничениями сталкиваются разработчики, которые создают VK Mini Apps или MAX Mini App для отечественных мессенджеров. На платформе Макс предлагают готовую библиотеку MAX UI с компонентами для мини-приложений в MAX, сторонних суперприложений или standalone-приложений. Компоненты библиотеки MAX UI мимикрируют под нативные компоненты Android и iOS, умеют поддерживать светлую и темную темы оформления. Для кастомизации компонентов в MAX предусмотрели API.

Прием №1. Погружение и онбординг на входе в приложение

Каждый мини-ап в Телеграм имеет уникальную ссылку, которую можно разместить в различных каналах. Это могут быть:

1. email-рассылка;
2. рекламные баннеры;
3. статьи на сайте; 
4. социальные сети (Вконтакте и иные).

Пользователь откроет мини-апп в Телеграм даже в случае, если раньше не был подписан на бота. На входе в Telegram Mini App человек должен сразу понять, где он, для чего это приложение и что делать. Основные приемы онбординга и погружения:

1. Сделать серию сторис-знакомства.
2. Разместить продающую информацию на стартовом экране.
3. Предоставить вводные данные в боте, с которого человек запускает мини-приложение.
4. Дать информацию источнике, откуда человек будет запускать мини-ап (пост в канале, письмо в рассылке).

Прием №2. Отображение прогресса, перечисление шагов

В мини приложения в Телеграме не стоит добавлять многоуровневую навигацию. Задача — не перегружать, максимально упрощать. 

В интерфейсе мини-приложения можно заложить шкалу с прогрессом: шаг 1, 2, 3, 4, 5. Структура взаимодействия выглядит логичной: 1 шаг = 1 действие. Человек видит шаг, на котором находится, сколько этапов впереди.

Прием №3. Сегментация на входе (особенно в сложных мини-приложениях)

Сегментация на входе (после запуска Telegram Mini App) поможет в будущем сделать кастомный маршрут, соответствующий интересам потребителя. Варианты, как сегментировать аудиторию мини приложения в Телеграм, Макс или Вк, могут быть разными. Например:

1. анкета-опросник с простыми вопросами о хобби, увлечениях, предпочтениях;
2. выбор роли при регистрации;
3. ползунок «Действующий клиент», «Новый пользователь»;
4. запрос геолокации в Телеграм и иные.

Подход позволяет предоставить персонализированный опыт и увеличить глубину взаимодействия.

Прием №4. Микродействия, промежуточные CTA и захваты в UX-сценарии

UX-сценарий мини-приложения зависит от ниши. В онлайн-обучении, инфобизнесе, психологии, коммьюнити-сервисах стоит предусмотреть основной CTA и промежуточные на пути достижения. 

В UX-сценарии можно заложить интерактивные элементы:

1. привести друга (реферальная система);
2. поделиться приложением;
3. оставить отзыв;
4. пройти тест;
5. оставить заметку;
6. написать консультанту;
7. подписаться на канал;
8. оставить комментарий под постом;
9. отсканировать чек покупки;
10. активировать персональный промокод;
11. выбрать продукт из «Рекомендованного», а также многие другие.

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

Пускай человек в ходе взаимодействия с мини-приложением в Telegram или MAX выполнил задачи: подписался на Telegram-канал, оставил отзыв на сайте, купил товар и отсканировал чек, вовлекся в обсуждения в социальной сети Вконтакте. Одна воронка с геймификацией в Телеграм закрыла задачи SMM, бренд-маркетолога, интернет-маркетолога, PR-специалиста, руководителя отдела продаж.

В 2024 году появилась возможность разместить иконку на главном экране. Опция «Add to Home Screen» позволяет запускать игры и сервисы в одно касание. Значит, человеку не нужно: заходить в Телеграм, искать мини-приложение в списке, открывать. Это положительно влияет на возвращаемость и удержание (Retention Rate).

Прием №5. Контент с упором на персонализацию и вовлечение на каждом экране

Разработка Mini App Telegram в идеале предусматривает максимальное вовлечение и персонализацию. В UX-сценарии Телеграм закладывают интерактивные механики, которые могут заинтересовать и мотивировать человека. Например, в дизайне и юзабилити можно предусмотреть:

1. аватар с выбором стиля, эмоций;
2. шкала прогресса;
3. рейтинг игроков;
4. квесты с миссиями и наградами;
5. послания дня;
6. бейджи со статусами;
7. интерактивные эмодзи;
8. адвент-календари;
9. мини-игры и сценарии выбора.

Важно, чтобы UX-сценарии не были сложными и перегруженными. Поэтому в ChatLabs рекомендуют делать упор на микродействия и разбивку логики на мелкие шаги.

Заключение. Как создать Mini App с продающим дизайном и правильными UX-сценариями

Мини-приложение — формат, который доступен не только в Телеграм, но и в MAX, VK и на иных платформах. Mini App для бизнеса становится точкой входа в продукт, а не просто очередной «фичей для бота». При правильной воронке можно получать пользователей из любой внешней среды: email-рассылка, рекламные баннеры, UGC-контент, ссылки в статьях на сайте. Телеграм (равно как MAX или VK) в таком случае работает как среда авторизации и доставки. 

Дизайн Telegram Mini Apps подразумевает бриф и знакомство с проектом, UX-прототип с оценкой удобства и цепочки действий, нативный и простой UI-интерфейс в стиле Telegram. После разработки и тестирования могут потребоваться доработки: например, для масштабирования мини-приложения или изменения бизнес-логики в нем. Поэтому важно выбирать подрядчика, который умеет работать с Mini Apps и на старте закладывает возможности масштабирования.

Больше про продающий дизайн и конвертящие мини-апы можно найти в Телеграм-канале. Примеры реальных проектов для вдохновения и изучения представлены в разделе «Кейсы».