UX Bots Telegram : Boutons et FSM sur aiogram

Conception UX pour les bots Telegram : Boutons, scénarios et FSM avec aiogram

L'expérience utilisateur détermine la rétention des bots Telegram. Sans une séquence claire de messages et de boutons, la fonctionnalité est inutile. Sur Telegram, l'UX se résume à une chaîne : message → bouton → réponse. Minimisez les décisions de l'utilisateur — guidez-le étape par étape sans hésitation.

Le premier message sur /start est crucial : en 3 secondes, les utilisateurs décident de rester ou non. Évitez les textes longs — énoncez l'essence, l'avantage et le bouton principal.

Structure de l'écran de démarrage :

• Titre avec l'objectif du bot
• 1–2 lignes d'explication
• 1 bouton d'action principal
• Optionnel : bouton d'aide

Les boutons comme interface principale

Les boutons remplacent les écrans et les menus. Les boutons inline sont préférés : attachés aux messages, ils n'encombrent pas la conversation. Utilisez les boutons de réponse pour un ensemble fixe d'options.

Nombre optimal de boutons :

• 1–2 boutons : choix instantané
• 3–4 : pause de 2–3 secondes
• 5+ : stress et abandon

Règles pour le texte des boutons :

• Verbes : « Créer », « Envoyer », « Retour »
• Au lieu de « Oui/Non » — « Confirmer/Annuler »
• Texte unique dans le message
• Pour les actions dangereuses : avertissement clair

Boutons colorés dans Bot API 9.4

Bot API 9.4 a introduit des styles pour les boutons inline : primaire (bleu), succès (vert), danger (rouge). Requiert aiogram 3.20+. Les emojis personnalisés sont disponibles avec Telegram Premium pour le propriétaire ou un nom d'utilisateur supplémentaire sur Fragment.

Exemple de clavier dans aiogram :

from aiogram.types import InlineKeyboardMarkup, InlineKeyboardButton

def get_colored_keyboard() -> InlineKeyboardMarkup:
    return InlineKeyboardMarkup(inline_keyboard=[
        # 🔵 Bouton bleu
        [InlineKeyboardButton(
            text="S'abonner à la chaîne",
            url="https://t.me/example",
            icon_custom_emoji_id="6039422865189638057",  # 📣 mégaphone
            style="primary",
        )],
        # 🟢 Bouton vert
        [InlineKeyboardButton(
            text="Vérifier l'abonnement",
            callback_data="check_subscribe",
            icon_custom_emoji_id="5870633910337015697",  # ✅ coche
            style="success",
        )],
        # 🔴 Bouton rouge
        [InlineKeyboardButton(
            text="Supprimer le compte",
            callback_data="delete_account",
            icon_custom_emoji_id="5870657884844462243",  # ❌ croix
            style="danger",
        )],
        # Deux boutons sur une ligne
        [
            InlineKeyboardButton(
                text="Annuler",
                callback_data="cancel",
                icon_custom_emoji_id="5870657884844462243",
                style="danger",
            ),
            InlineKeyboardButton(
                text="Terminé",
                callback_data="confirm",
                icon_custom_emoji_id="5870633910337015697",
                style="success",
            ),
        ],
        # Bouton sans style
        [InlineKeyboardButton(
            text="Paramètres",
            callback_data="settings",
            icon_custom_emoji_id="5870982283724328568",  # ⚙️
        )],
    ])

Appel : await message.answer("Texte", reply_markup=get_colored_keyboard()). Obtenez les ID d'emoji depuis @ShowJsonBot.

Limitations :

• Styles — Bot API 9.4+
• Emojis personnalisés — Premium
• Sans Premium : carrés pour les utilisateurs sans abonnement

Emojis personnalisés pour un look moderne

Les emojis Premium améliorent la perception : icônes de marque dans les boutons, titres, confirmations. Ne surchargez pas — 1–2 accents par message.

Applications :

• Coche au lieu de ✅ dans les boutons
• Emoji unique comme marque du bot
• Animation en cas de succès

Scénarios au lieu de commandes

Les commandes (/create, /edit) forcent les utilisateurs à mémoriser la logique. Les scénarios les guident main dans la main : le bot dicte les étapes, l'utilisateur suit.

Exemple de scénario de création de publication :

| Étape | Action utilisateur | Réponse du bot |

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

| 1 | « Créer une publication » | « Envoyez une photo ou un GIF » |

| 2 | Envoie une photo | « Maintenant le texte » |

| 3 | Envoie le texte | « Ajouter un bouton ? » |

| 4 | « Oui » | « Texte du bouton et lien » |

| 5 | Saisit les données | Aperçu |

| 6 | « Envoyer » | « ✅ Publié » |

Quand utiliser des scénarios :

• Étapes multiples
• Saisie de données
• Sélection d'options

Commandes : /start, /help, /cancel.

FSM pour la gestion des états

Sans machine à états finis, les scénarios échouent : les utilisateurs envoient du texte au lieu de photos, le bot est confus.

Les états résolvent :

• Suivi de l'étape pour chaque user_id
• Gestion des erreurs : « En attente d'une photo, texte ignoré »
• Prise en charge de « Retour »

Exemple de classe d'état :

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

Dans les gestionnaires : vérifiez FSMContext.state, transition await state.set_state(States.WAITING_TEXT).

Points clés à retenir

• Premier message : essence + 1 bouton, pas de liste de commandes.
• Boutons : max 2–4, verbes, couleurs de Bot API 9.4.
• Scénarios > commandes : guidez les utilisateurs étape par étape.
• FSM est essentiel : pour les séquences >1 étape.
• Emojis avec soin : icônes Premium uniquement comme accents.

— Editorial Team