UX Bots de Telegram: Botones y FSM en aiogram

Diseño de UX para Bots de Telegram: Botones, Escenarios y FSM con aiogram

La experiencia de usuario determina la retención de los bots de Telegram. Sin una secuencia clara de mensajes y botones, la funcionalidad es inútil. En Telegram, el UX se reduce a una cadena: mensaje → botón → respuesta. Minimiza las decisiones del usuario—guíalos paso a paso sin vacilaciones.

El primer mensaje en /start es crítico: en 3 segundos, los usuarios deciden si quedarse. Evita textos largos—expresa la esencia, el beneficio y el botón principal.

Estructura de la pantalla de inicio:

• Título con el propósito del bot
• 1–2 líneas de explicación
• 1 botón de acción principal
• Opcional: botón de ayuda

Botones como Interfaz Principal

Los botones reemplazan pantallas y menús. Los botones en línea son preferidos: adjuntos a mensajes, no saturan el chat. Usa botones de respuesta para un conjunto fijo de opciones.

Número óptimo de botones:

• 1–2 botones: elección instantánea
• 3–4: pausa de 2–3 segundos
• 5+: estrés y abandono

Reglas del texto de los botones:

• Verbos: "Crear", "Enviar", "Atrás"
• En lugar de "Sí/No"—"Confirmar/Cancelar"
• Texto único en el mensaje
• Para acciones peligrosas: advertencia clara

Botones de Colores en Bot API 9.4

Bot API 9.4 introdujo estilos para botones en línea: primario (azul), éxito (verde), peligro (rojo). Requiere aiogram 3.20+. Los emojis personalizados están disponibles con Telegram Premium para el propietario o un nombre de usuario adicional en Fragment.

Ejemplo de teclado en aiogram:

from aiogram.types import InlineKeyboardMarkup, InlineKeyboardButton

def get_colored_keyboard() -> InlineKeyboardMarkup:
    return InlineKeyboardMarkup(inline_keyboard=[
        # 🔵 Botón azul
        [InlineKeyboardButton(
            text="Suscribirse al canal",
            url="https://t.me/ejemplo",
            icon_custom_emoji_id="6039422865189638057",  # 📣 megáfono
            style="primary",
        )],
        # 🟢 Botón verde
        [InlineKeyboardButton(
            text="Verificar suscripción",
            callback_data="check_subscribe",
            icon_custom_emoji_id="5870633910337015697",  # ✅ marca de verificación
            style="success",
        )],
        # 🔴 Botón rojo
        [InlineKeyboardButton(
            text="Eliminar cuenta",
            callback_data="delete_account",
            icon_custom_emoji_id="5870657884844462243",  # ❌ cruz
            style="danger",
        )],
        # Dos botones en una fila
        [
            InlineKeyboardButton(
                text="Cancelar",
                callback_data="cancel",
                icon_custom_emoji_id="5870657884844462243",
                style="danger",
            ),
            InlineKeyboardButton(
                text="Hecho",
                callback_data="confirm",
                icon_custom_emoji_id="5870633910337015697",
                style="success",
            ),
        ],
        # Botón sin estilo
        [InlineKeyboardButton(
            text="Configuración",
            callback_data="settings",
            icon_custom_emoji_id="5870982283724328568",  # ⚙️
        )],
    ])

Llamada: await message.answer("Texto", reply_markup=get_colored_keyboard()). Obtén IDs de emojis de @ShowJsonBot.

Limitaciones:

• Estilos—Bot API 9.4+
• Emojis personalizados—Premium
• Sin Premium: cuadrados para usuarios sin suscripción

Emojis Personalizados para un Aspecto Moderno

Los emojis Premium mejoran la percepción: iconos de marca en botones, títulos, confirmaciones. No sobrecargues—1–2 acentos por mensaje.

Aplicaciones:

• Marca de verificación en lugar de ✅ en botones
• Emoji único como marca del bot
• Animación en éxito

Escenarios en Lugar de Comandos

Los comandos (/crear, /editar) obligan a los usuarios a recordar la lógica. Los escenarios los guían de la mano: el bot dicta los pasos, el usuario sigue.

Ejemplo de escenario de creación de publicación:

| Paso | Acción del Usuario | Respuesta del Bot |

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

| 1 | "Crear publicación" | "Envía una foto o GIF" |

| 2 | Envía foto | "Ahora el texto" |

| 3 | Envía texto | "¿Añadir un botón?" |

| 4 | "Sí" | "Texto del botón y enlace" |

| 5 | Introduce datos | Vista previa |

| 6 | "Enviar" | "✅ Publicado" |

Cuándo usar escenarios:

• Múltiples pasos
• Entrada de datos
• Selección de opciones

Comandos: /start, /help, /cancel.

FSM para Gestión de Estados

Sin Máquina de Estados Finitos, los escenarios fallan: los usuarios envían texto en lugar de fotos, el bot se confunde.

Los estados resuelven:

• Seguimiento de etapa por cada user_id
• Manejo de errores: "Esperando foto, ignorando texto"
• Soporte para "Atrás"

Ejemplo de clase de estado:

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

En manejadores: verifica FSMContext.state, transición await state.set_state(States.WAITING_TEXT).

Conclusiones Clave

• Primer mensaje: esencia + 1 botón, sin listas de comandos.
• Botones: máximo 2–4, verbos, colores de Bot API 9.4.
• Escenarios > comandos: guía a los usuarios paso a paso.
• FSM es esencial: para secuencias >1 paso.
• Emojis con cuidado: iconos Premium solo como acentos.

— Editorial Team