Обе темы
Переключаю тему в Telegram и прохожу каждый экран: текст читается, фото не теряются, ничего не слепит ночью.
УслугиTelegram Mini App для бизнесаДизайн Mini App
Дизайн Mini App для Telegram
Дизайн Mini App для Telegram
Дизайн Telegram Mini App, с которым клиент не думает, куда нажать: приложение берёт тему самого Telegram, главная кнопка под пальцем, а заказ — в несколько касаний.
- Цену называю лично
- Тёмная и светлая тема
- Кнопки под палец
Просто напишите — дальше я сам. Посчитаю задачу без оплаты.
Кофе Зернобот
Вчера
Ваш капучино готов — заберите на кассе.
Спасибо!
Сегодня
Кофе заранеебез очереди · с 08:00Доброе утро! Закажите кофе заранее — заберёте без очереди.
Зерно на Подолесегодня в 09:12
Что приготовить?
Елена · +380 67 ··· ·· 12из Telegram
ОплаченоЗерно на Подоле · в 09:12
О чём это
Красивый экран не продаёт, если кнопку не найти
Человек открывает приложение посреди переписки, одной рукой, часто на ходу. Если ему приходится искать, куда нажать, заказа не будет, какими бы красивыми ни были цвета. Поэтому дизайн я начинаю не с картинок, а с пути: что клиент хочет сделать и сколько касаний на это уйдёт.
Такое приложение нужно тем, кому уже пишут в Telegram и у кого клиент должен что-то выбрать: напиток в кофейне, товар в магазине, время в салоне. Если вопросов немного, может хватить и бота с кнопками — это видно уже по первому разговору.
Гордей Фисун · обновлено
Конкретика
Telegram Mini App дизайн: что я проверяю
Мелочи, из-за которых приложением пользуются, а не закрывают после первого экрана.
Одной рукой
Крупные зоны касания, никаких мелких ссылок, в которые трудно попасть пальцем.
Без лишних полей
Ни регистрации, ни пароля. Оставляю только те вопросы, без которых заказ не выполнить.
Понятный финал
После оплаты клиент сразу видит, что всё прошло, и получает подтверждение в чате. Вам — новый заказ в Telegram.
Ваши слова на кнопках
Названия товаров, услуг и кнопок — так, как говорят ваши клиенты, а не как привыкли разработчики.
Можно попробовать
На сайте есть живое демо магазина: соберите корзину и оформите заказ. Это рабочий код, а не картинка.
Что входит
Что входит в дизайн Telegram Web App
Цвета из Telegram клиента
Приложение подхватывает тему мессенджера: в тёмной — тёмный экран, в светлой — светлый. Поэтому оно выглядит частью Telegram, а не чужой страницей, которая вдруг открылась.
Главное действие внизу
Кнопка «Заказать» или «Оплатить» там, куда дотягивается большой палец. Сначала собираю и пробую всё на телефоне, компьютер — потом.
Мало шагов до оплаты
Выбрал, добавил, оплатил. Имя вводить не нужно: кто заказывает, приложение узнаёт от Telegram.
Одинаково на всех устройствах
На iPhone, Android и компьютере — то же приложение и тот же вид. Клиенту ничего не нужно устанавливать.
Живое демо
Заказ в несколько касаний — попробуйте сами
Это рабочий код, а не картинка. Соберите корзину и оформите заказ — и увидите, что в ту же секунду приходит вам.
Как я работаю
От списка экранов до вашего телефона
Вы видите приложение на каждом шаге — в своём Telegram, а не на картинках.
Путь клиента
Рассказываете, что клиент должен сделать: выбрать, записаться или оплатить. Можно своими словами, хоть голосовым.
Список экранов
Записываю, какие будут экраны и что на каждом. Вы согласуете список — и только тогда я сажусь за код.
Пробуете пальцем
Открываете живую версию на своём телефоне, в тёмной и светлой теме. Что неудобно — правим тут же.
Запуск
Приложение работает в вашем аккаунте. Показываю, как самим менять тексты и товары, чтобы не ждать меня по каждой мелочи.
5,0 · 37 отзывов
- Вы решаете, двигаться ли дальшеПосле каждого этапа можете остановить проект. Оплачиваете только выполненные и принятые этапы. Предоплату за неначатые — возвращаю.
- Цена окончательная. Перерасход — мойЗадача не изменилась — сумма, названная на старте, не растёт. Изменилась — сначала обсуждаем, потом делаю.
Вопросы
Вопросы о дизайне
Что входит в дизайн Telegram Mini App?
Дизайн мини-приложения в Telegram — это список экранов, путь клиента от кнопки в чате до оплаты, вид в тёмной и светлой теме Telegram и кнопки, удобные под палец. Вместо картинок я показываю рабочую версию на вашем телефоне.
Mini App подстраивается под тему Telegram?
Да, Mini App берёт цвета Telegram клиента: в тёмной теме он тёмный, в светлой — светлый. Поэтому приложение выглядит частью мессенджера.
Можно ли согласовать дизайн до того, как начнётся код?
Да, дизайн Mini App согласуем до кода: сначала список экранов — что на каждом и в каком порядке. Код пишу только после этого, а дальше показываю приложение по частям в вашем Telegram.
Чем дизайн Telegram Web App отличается от дизайна сайта?
Telegram Web App открывается внутри мессенджера, чаще всего на телефоне, в окне поверх чата. Поэтому в нём меньше экранов, главное действие внизу под пальцем и нет регистрации — Telegram сам передаёт, кто клиент.
Что подготовить к разговору о дизайне?
Для разговора о дизайне мини-приложения достаточно одного реального примера заказа: что клиент выбирает, что указывает и как платит. Логотип и фото товаров, если они есть, тоже пригодятся.
Смогу ли я сам менять тексты и товары в Mini App?
Да, после запуска я показываю, как это делать, и дальше вы меняете тексты и товары сами. Код и доступы — на ваших аккаунтах: уйдёте — всё останется у вас.