UX Telegram botů: tlačítka a FSM na aiogram

UX design Telegram botů: tlačítka, scénáře a FSM v aiogram

Uživatelský zážitek určuje retenci Telegram bota. Bez jasné posloupnosti zpráv a tlačítek je funkčnost k ničemu. V Telegramu se UX redukuje na řetězec: zpráva → tlačítko → odpověď. Minimalizujte rozhodnutí uživatele — veďte ho krok za krokem bez přemýšlení.

První zpráva po /start je klíčová: během 3 sekund se uživatel rozhodne, zda zůstane. Vyhněte se dlouhým textům — uveďte podstatu, užitek a hlavní tlačítko.

Struktura úvodní obrazovky:

• Nadpis s podstatou bota
• 1–2 řádky vysvětlení
• 1 hlavní akční tlačítko
• Volitelně: tlačítko nápovědy

Tlačítka jako hlavní rozhraní

Tlačítka nahrazují obrazovky a menu. Inline tlačítka jsou preferovaná: jsou vázána ke zprávě, nezanášejí chat. Reply tlačítka používejte pro pevnou sadu možností.

Optimální počet:

• 1–2 tlačítka: okamžitá volba
• 3–4: pauza 2–3 sekundy
• 5+: stres a odchod

Pravidla textu tlačítek:

• Slovesa: „Vytvořit“, „Odeslat“, „Zpět“
• Místo „Ano/Ne“ — „Potvrdit/Zrušit“
• Unikátní text ve zprávě
• Pro nebezpečné akce: jasné varování

Barevná tlačítka v Bot API 9.4

Bot API 9.4 zavedlo styly pro inline tlačítka: primary (modré), success (zelené), danger (červené). Vyžaduje aiogram 3.20+. Vlastní emodži jsou dostupná s Telegram Premium u vlastníka nebo s dodatečným uživatelským jménem na Fragment.

Příklad klávesnice v aiogram:

from aiogram.types import InlineKeyboardMarkup, InlineKeyboardButton

def get_colored_keyboard() -> InlineKeyboardMarkup:
    return InlineKeyboardMarkup(inline_keyboard=[
        # 🔵 Modré tlačítko
        [InlineKeyboardButton(
            text="Přihlásit se k odběru kanálu",
            url="https://t.me/example",
            icon_custom_emoji_id="6039422865189638057",  # 📣 megafon
            style="primary",
        )],
        # 🟢 Zelené tlačítko
        [InlineKeyboardButton(
            text="Zkontrolovat odběr",
            callback_data="check_subscribe",
            icon_custom_emoji_id="5870633910337015697",  # ✅ fajfka
            style="success",
        )],
        # 🔴 Červené tlačítko
        [InlineKeyboardButton(
            text="Smazat účet",
            callback_data="delete_account",
            icon_custom_emoji_id="5870657884844462243",  # ❌ křížek
            style="danger",
        )],
        # Dvě tlačítka v řadě
        [
            InlineKeyboardButton(
                text="Zrušit",
                callback_data="cancel",
                icon_custom_emoji_id="5870657884844462243",
                style="danger",
            ),
            InlineKeyboardButton(
                text="Hotovo",
                callback_data="confirm",
                icon_custom_emoji_id="5870633910337015697",
                style="success",
            ),
        ],
        # Tlačítko bez stylu
        [InlineKeyboardButton(
            text="Nastavení",
            callback_data="settings",
            icon_custom_emoji_id="5870982283724328568",  # ⚙️
        )],
    ])

Volání: await message.answer("Text", reply_markup=get_colored_keyboard()). ID emodži získejte u @ShowJsonBot.

Omezení:

• Styly — Bot API 9.4+
• Vlastní emodži — Premium
• Bez Premium: čtverečky u uživatelů bez předplatného

Vlastní emodži pro moderní vzhled

Premium emodži zlepšují vnímání: brandové ikony v tlačítkách, nadpisech, potvrzeních. Nepřetěžujte — 1–2 akcenty na zprávu.

Použití:

• Fajfka místo ✅ v tlačítkách
• Unikátní emodži jako značka bota
• Animace při úspěchu

Scénáře místo příkazů

Příkazy (/create, /edit) nutí uživatele pamatovat si logiku. Scénáře vedou za ruku: bot diktuje krok, uživatel ho provede.

Příklad scénáře vytvoření příspěvku:

| Krok | Akce uživatele | Odpověď bota |

|------|----------------|--------------|

| 1 | „Vytvořit příspěvek“ | „Pošlete foto nebo GIF“ |

| 2 | Pošle foto | „Nyní text“ |

| 3 | Pošle text | „Přidat tlačítko?“ |

| 4 | „Ano“ | „Text tlačítka a odkaz“ |

| 5 | Zadá data | Náhled |

| 6 | „Odeslat“ | „✅ Publikováno“ |

Kdy scénáře:

• Mnoho kroků
• Zadávání dat
• Výběr možností

Příkazy: /start, /help, /cancel.

FSM pro správu stavů

Bez Finite State Machine se scénáře rozbijí: uživatel pošle text místo fota, bot se ztratí.

Stavy řeší:

• Sledování etapy pro každé user_id
• Zpracování chyb: „Čekám na foto, text ignoruji“
• Podpora „Zpět“

Příklad třídy stavů:

class States:
    START = "start"
    WAITING_PHOTO = "waiting_photo"
    WAITING_TEXT = "waiting_text"
    WAITING_BUTTON = "waiting_button"

V handlerech: kontrola FSMContext.state, přechod await state.set_state(States.WAITING_TEXT).

Co je důležité

• První zpráva: podstata + 1 tlačítko, bez seznamů příkazů.
• Tlačítka: max 2–4, slovesa, barvy z Bot API 9.4.
• Scénáře > příkazy: veďte uživatele po krocích.
• FSM je nutný: pro posloupnosti >1 krok.
• Emodži opatrně: Premium ikony jen jako akcenty.

— Editorial Team