UX botów Telegram: przyciski i FSM na aiogram

UX botów Telegram: przyciski, scenariusze i FSM w aiogram

Doświadczenie użytkownika decyduje o retencji bota Telegram. Bez jasnej sekwencji wiadomości i przycisków funkcjonalność jest bezużyteczna. W Telegram UX sprowadza się do łańcucha: wiadomość → przycisk → odpowiedź. Minimalizuj decyzje użytkownika — prowadź go krok po kroku bez zastanawiania się.

Pierwsza wiadomość po /start jest kluczowa: w ciągu 3 sekund użytkownik decyduje, czy zostać. Unikaj długich tekstów — wskaż istotę, korzyść i główny przycisk.

Struktura ekranu startowego:

• Nagłówek z istotą bota
• 1–2 linijki wyjaśnienia
• 1 główny przycisk akcji
• Opcjonalnie: przycisk pomocy

Przyciski jako główny interfejs

Przyciski zastępują ekrany i menu. Przyciski inline są preferowane: powiązane z wiadomością, nie zaśmiecają czatu. Przyciski reply używaj dla stałego zestawu opcji.

Optymalna liczba:

• 1–2 przyciski: natychmiastowy wybór
• 3–4: pauza 2–3 sek
• 5+: stres i odpływ

Zasady tekstu przycisków:

• Czasowniki: „Utwórz”, „Wyślij”, „Wstecz”
• Zamiast „Tak/Nie” — „Potwierdź/Anuluj”
• Unikalny tekst w wiadomości
• Dla niebezpiecznych akcji: wyraźne ostrzeżenie

Kolorowe przyciski w Bot API 9.4

Bot API 9.4 wprowadziło style dla przycisków inline: primary (niebieski), success (zielony), danger (czerwony). Wymaga aiogram 3.20+. Niestandardowe emoji dostępne przy Telegram Premium u właściciela lub dodatkowej nazwie użytkownika na Fragment.

Przykład klawiatury w aiogram:

from aiogram.types import InlineKeyboardMarkup, InlineKeyboardButton

def get_colored_keyboard() -> InlineKeyboardMarkup:
    return InlineKeyboardMarkup(inline_keyboard=[
        # 🔵 Niebieski przycisk
        [InlineKeyboardButton(
            text="Subskrybuj kanał",
            url="https://t.me/example",
            icon_custom_emoji_id="6039422865189638057",  # 📣 megafon
            style="primary",
        )],
        # 🟢 Zielony przycisk
        [InlineKeyboardButton(
            text="Sprawdź subskrypcję",
            callback_data="check_subscribe",
            icon_custom_emoji_id="5870633910337015697",  # ✅ znacznik
            style="success",
        )],
        # 🔴 Czerwony przycisk
        [InlineKeyboardButton(
            text="Usuń konto",
            callback_data="delete_account",
            icon_custom_emoji_id="5870657884844462243",  # ❌ krzyżyk
            style="danger",
        )],
        # Dwa przyciski w rzędzie
        [
            InlineKeyboardButton(
                text="Anuluj",
                callback_data="cancel",
                icon_custom_emoji_id="5870657884844462243",
                style="danger",
            ),
            InlineKeyboardButton(
                text="Gotowe",
                callback_data="confirm",
                icon_custom_emoji_id="5870633910337015697",
                style="success",
            ),
        ],
        # Przycisk bez style
        [InlineKeyboardButton(
            text="Ustawienia",
            callback_data="settings",
            icon_custom_emoji_id="5870982283724328568",  # ⚙️
        )],
    ])

Wywołanie: await message.answer("Tekst", reply_markup=get_colored_keyboard()). ID emoji pobierz z @ShowJsonBot.

Ograniczenia:

• Style — Bot API 9.4+
• Niestandardowe emoji — Premium
• Bez Premium: kwadraciki u użytkowników bez subskrypcji

Niestandardowe emoji dla nowoczesnego wyglądu

Emoji Premium poprawiają percepcję: markowe ikony w przyciskach, nagłówkach, potwierdzeniach. Nie przeciążaj — 1–2 akcenty na wiadomość.

Zastosowanie:

• Znacznik zamiast ✅ w przyciskach
• Unikalne emoji jako marka bota
• Animacja przy sukcesie

Scenariusze zamiast komend

Komendy (/create, /edit) zmuszają użytkownika do zapamiętywania logiki. Scenariusze prowadzą za rękę: bot dyktuje krok, użytkownik wykonuje.

Przykład scenariusza tworzenia posta:

| Krok | Działanie użytkownika | Odpowiedź bota |

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

| 1 | „Utwórz post” | „Wyślij zdjęcie lub GIF” |

| 2 | Wysyła zdjęcie | „Teraz tekst” |

| 3 | Wysyła tekst | „Dodać przycisk?” |

| 4 | „Tak” | „Tekst przycisku i link” |

| 5 | Wprowadza dane | Podgląd |

| 6 | „Wyślij” | „✅ Opublikowano” |

Kiedy scenariusze:

• Wiele kroków
• Wprowadzanie danych
• Wybór opcji

Komendy: /start, /help, /cancel.

FSM do zarządzania stanami

Bez Finite State Machine scenariusze się psują: użytkownik wyśle tekst zamiast zdjęcia, bot się pogubi.

Stany rozwiązują:

• Śledzenie etapu dla każdego user_id
• Obsługa błędów: „Czekam na zdjęcie, tekst ignoruję”
• Obsługa „Wstecz”

Przykład klas stanów:

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

W handlerach: sprawdzenie FSMContext.state, przejście await state.set_state(States.WAITING_TEXT).

Co jest ważne

• Pierwsza wiadomość: istota + 1 przycisk, bez list komend.
• Przyciski: max 2–4, czasowniki, kolory z Bot API 9.4.
• Scenariusze > komendy: prowadź użytkownika krok po kroku.
• FSM obowiązkowy: dla sekwencji >1 krok.
• Emoji ostrożnie: ikony Premium tylko jako akcenty.

— Editorial Team