UX Telegram Bots: Buttons und FSM mit aiogram

UX-Design für Telegram-Bots: Buttons, Szenarien und FSM mit aiogram

Die Benutzererfahrung entscheidet über die Verweildauer bei Telegram-Bots. Ohne klare Abfolge von Nachrichten und Buttons ist die Funktionalität nutzlos. Bei Telegram läuft UX auf eine Kette hinaus: Nachricht → Button → Antwort. Minimieren Sie die Entscheidungen der Nutzer – führen Sie sie Schritt für Schritt ohne Zögern.

Die erste Nachricht bei /start ist entscheidend: Innerhalb von 3 Sekunden entscheiden Nutzer, ob sie bleiben. Vermeiden Sie lange Texte – nennen Sie das Wesentliche, den Nutzen und den Hauptbutton.

Startbildschirm-Struktur:

• Titel mit dem Zweck des Bots
• 1–2 Zeilen Erklärung
• 1 Hauptaktionsbutton
• Optional: Hilfe-Button

Buttons als primäre Schnittstelle

Buttons ersetzen Bildschirme und Menüs. Inline-Buttons sind zu bevorzugen: an Nachrichten angehängt, überladen sie nicht den Chat. Verwenden Sie Reply-Buttons für einen festen Satz von Optionen.

Optimale Anzahl an Buttons:

• 1–2 Buttons: sofortige Wahl
• 3–4: 2–3 Sekunden Pause
• 5+: Stress und Abbruch

Regeln für Button-Text:

• Verben: „Erstellen“, „Senden“, „Zurück“
• Statt „Ja/Nein“ – „Bestätigen/Abbrechen“
• Einzigartiger Text in der Nachricht
• Bei riskanten Aktionen: klare Warnung

Farbige Buttons in Bot API 9.4

Bot API 9.4 führte Stile für Inline-Buttons ein: primary (blau), success (grün), danger (rot). Erfordert aiogram 3.20+. Benutzerdefinierte Emojis sind mit Telegram Premium für den Besitzer oder einen zusätzlichen Benutzernamen auf Fragment verfügbar.

Beispiel-Tastatur in aiogram:

from aiogram.types import InlineKeyboardMarkup, InlineKeyboardButton

def get_colored_keyboard() -> InlineKeyboardMarkup:
    return InlineKeyboardMarkup(inline_keyboard=[
        # 🔵 Blauer Button
        [InlineKeyboardButton(
            text="Kanal abonnieren",
            url="https://t.me/example",
            icon_custom_emoji_id="6039422865189638057",  # 📣 Megafon
            style="primary",
        )],
        # 🟢 Grüner Button
        [InlineKeyboardButton(
            text="Abonnement prüfen",
            callback_data="check_subscribe",
            icon_custom_emoji_id="5870633910337015697",  # ✅ Haken
            style="success",
        )],
        # 🔴 Roter Button
        [InlineKeyboardButton(
            text="Konto löschen",
            callback_data="delete_account",
            icon_custom_emoji_id="5870657884844462243",  # ❌ Kreuz
            style="danger",
        )],
        # Zwei Buttons in einer Reihe
        [
            InlineKeyboardButton(
                text="Abbrechen",
                callback_data="cancel",
                icon_custom_emoji_id="5870657884844462243",
                style="danger",
            ),
            InlineKeyboardButton(
                text="Fertig",
                callback_data="confirm",
                icon_custom_emoji_id="5870633910337015697",
                style="success",
            ),
        ],
        # Button ohne Stil
        [InlineKeyboardButton(
            text="Einstellungen",
            callback_data="settings",
            icon_custom_emoji_id="5870982283724328568",  # ⚙️
        )],
    ])

Aufruf: await message.answer("Text", reply_markup=get_colored_keyboard()). Emoji-IDs von @ShowJsonBot holen.

Einschränkungen:

• Stile – Bot API 9.4+
• Benutzerdefinierte Emojis – Premium
• Ohne Premium: Quadrate für Nutzer ohne Abonnement

Benutzerdefinierte Emojis für modernes Aussehen

Premium-Emojis verbessern die Wahrnehmung: Marken-Icons in Buttons, Titeln, Bestätigungen. Nicht überladen – 1–2 Akzente pro Nachricht.

Anwendungen:

• Haken statt ✅ in Buttons
• Einzigartiges Emoji als Bot-Marke
• Animation bei Erfolg

Szenarien statt Befehle

Befehle (/erstellen, /bearbeiten) zwingen Nutzer, Logik zu merken. Szenarien führen sie Hand in Hand: Der Bot diktiert Schritte, der Nutzer folgt.

Beispiel-Szenario zur Erstellung eines Beitrags:

| Schritt | Nutzeraktion | Bot-Antwort |

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

| 1 | „Beitrag erstellen“ | „Sende ein Foto oder GIF“ |

| 2 | Sendet Foto | „Jetzt der Text“ |

| 3 | Sendet Text | „Button hinzufügen?“ |

| 4 | „Ja“ | „Button-Text und Link“ |

| 5 | Gibt Daten ein | Vorschau |

| 6 | „Senden“ | „✅ Veröffentlicht“ |

Wann Szenarien verwenden:

• Mehrere Schritte
• Dateneingabe
• Auswahl von Optionen

Befehle: /start, /help, /cancel.

FSM für Zustandsverwaltung

Ohne Finite State Machine brechen Szenarien zusammen: Nutzer senden Text statt Fotos, der Bot ist verwirrt.

Zustände lösen:

• Verfolgung der Phase für jede user_id
• Fehlerbehandlung: „Warte auf Foto, ignoriere Text“
• Unterstützung für „Zurück“

Beispiel-Zustandsklasse:

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

In Handlern: FSMContext.state prüfen, Übergang await state.set_state(States.WAITING_TEXT).

Wichtige Erkenntnisse

• Erste Nachricht: Wesentliches + 1 Button, keine Befehlslisten.
• Buttons: max. 2–4, Verben, Farben aus Bot API 9.4.
• Szenarien > Befehle: Nutzer Schritt für Schritt führen.
• FSM ist essenziell: für Abfolgen >1 Schritt.
• Emojis sorgfältig: Premium-Icons nur als Akzente.

— Editorial Team