Este artículo fue escrito el 6 de noviembre de 2026.
Las herramientas de IA evolucionan rápido. El deber de la interfaz de informar sobre lo que acaba de suceder, no. Botón (button), enlace (link), etiqueta (label), error (error), notificación flotante (toast), esqueleto de carga (skeleton), estado vacío (empty state) e información sobre herramientas (tooltip): estas son las formas en que una página responde a una persona. La estética de los iconos cambiará con el tiempo; tome este texto como una regla de honestidad y no como una presentación de componentes.
Una página que no confirma sus acciones provoca que la gente pulse el botón dos veces. Lo hacen porque nada en la pantalla les indicó que el primer intento fue registrado. Los modelos de IA son hábiles diseñando la pulsación inicial, pero fallan al crear la respuesta posterior a menos que se les pida explícitamente como un elemento propio. La respuesta del sistema no es un adorno: es la diferencia entre un formulario que realmente registra una reserva y uno que solo lo parece.
Un botón realiza una acción. Un enlace lleva a otro lugar.
Un botón (button) modifica algo en el momento actual: enviar, guardar, reservar o eliminar. Un enlace (link) redirige a una ubicación distinta: la página de mañana, un mapa o una política de privacidad. Cuando un modelo presenta cada texto con formato de botón, el usuario no logra distinguir entre navegar y ejecutar una acción. Cuando muestra cada acción como un enlace, la opción “eliminar” parece una página más (y a veces lo es, lo cual resulta peor). En su instrucción técnica, defina los verbos de acción como botones y los destinos como enlaces. Un solo botón principal por pantalla es suficiente; los demás deben tener un peso visual menor. Incluir dos botones principales equivale a trasladar una indecisión del diseño al usuario.
Redacte el texto del botón usando un verbo que el usuario pueda verificar más tarde. La frase “Reservar plaza” permite comprobar si el trámite se realizó; en cambio, palabras como “Continuar” o “Aceptar” no confirman nada. Si sus usuarios leen en español, el verbo visible debe estar en ese idioma. El término técnico del componente en la orden de la IA —button, link— debe mantenerse en inglés.
Un formulario es un conjunto de preguntas etiquetadas
Un formulario (form) no es una simple acumulación de recuadros grises. Cada casilla es un campo de entrada (input), y cada campo de entrada necesita una etiqueta (label) fija y siempre visible en la parte superior, no un texto de ejemplo (placeholder) que desaparece en cuanto se empieza a escribir. El texto indicativo dentro de la casilla es solo una pista visual, y una pista no sustituye a un nombre. Los usuarios olvidan qué información se les pedía en esa casilla, y las herramientas de traducción no pueden procesar un texto que ha desaparecido. Indique en la instrucción: cada campo de entrada debe tener una etiqueta visible arriba, redactada en el idioma del lector.
Un mensaje de error (error) debe colocarse mediante texto explicativo junto al campo de entrada correspondiente, acompañado de un resumen superior si varios campos han fallado. El color por sí solo no basta para señalar un error: el rojo y el verde resultan indistinguibles para muchas personas y son el recurso fácil al que recurren las IA. Especifique en su orden: “mensajes de texto junto al campo, no solo variaciones de color”.
La condición de campo obligatorio es algo que usted debe declarar explícitamente, no un asterisco que presupone universal. Indique con claridad qué campos pueden quedar vacíos. Solicitar un número de teléfono puede ser obligatorio en un país y opcional en otro; esa precisión debe detallarse en su idioma debajo de la instrucción en inglés.
Avisos temporales, avisos permanentes y ausencias de información
Una notificación flotante (toast, a veces llamada snackbar) es un aviso breve que suele aparecer en la parte inferior tras completar una acción y desaparece solo al cabo de unos momentos: “Guardado” o “Copiado”. Tres segundos en pantalla son más que suficientes. Jamás debe emplearse como el único registro de un fallo. Los errores deben permanecer visibles junto al campo afectado o en la parte superior del formulario hasta que el usuario los corrija. Una notificación flotante que dice “No se pudo reservar” y desaparece a los pocos segundos genera una desorientación completa.
Un esqueleto de carga (skeleton) es la estructura gris que reserva el espacio mientras el contenido real termina de cargarse. Ofrece una experiencia superior a una pantalla en blanco y resulta más clara que un icono giratorio (spinner) que no explica nada. Úselo mientras se descarga una lista. No lo convierta en un diseño permanente: si los datos no llegan a cargarse, el esqueleto debe dar paso a un estado vacío.
Un estado vacío (empty state) es la vista que se muestra cuando aún no hay datos que presentar: sin reservas activas, sin clases programadas esta semana o sin resultados en la búsqueda. Nombra la ausencia de datos y propone una acción clara para continuar. Una tabla vacía sin indicaciones no es un estado vacío; es una interfaz que no responde. Este es el detalle que las pequeñas organizaciones suelen olvidar y el que los primeros visitantes encuentran el día del estreno cuando la lista está verdaderamente vacía.
Una información sobre herramientas (tooltip) consiste en un texto breve que aparece al pasar el cursor o al enfocar con el teclado sobre un icono que, de otro modo, resultaría enigmático. No es el lugar para explicar políticas del servicio ni funciona de forma fiable en dispositivos móviles. Si la información es relevante para el usuario, debe figurar como texto visible en la pantalla. La información sobre herramientas es un recurso secundario, no un documento.
El peligro de la segunda pulsación
Un padre de familia reservó una plaza en un taller desde el móvil de regreso a casa. El botón solo decía «Continuar». Al pulsar, nada en la pantalla cambió de forma perceptible, por lo que volvió a pulsar. El centro recibió dos reservas duplicadas. La recepción lo atribuyó a un error del usuario, pero en realidad fue una falta de respuesta del sistema. «Continuar» no es un verbo que confirme nada, y una pantalla silenciosa no es una respuesta válida.
Una página funcional utiliza elementos claros y directos. El botón indica «Solicitar plaza en este taller» en el idioma del usuario. Cada campo conserva su etiqueta visible en todo momento. Si no se introduce el teléfono, aparece un mensaje explicativo al lado del campo que no desaparece hasta corregirlo. Si el envío es correcto, una notificación flotante (toast) confirma la recepción antes de retirarse, mientras el formulario se transforma en un recibo breve que se puede revisar al desplazarse. Si no hay clases disponibles en ese momento, el estado vacío (empty state) lo aclara y ofrece un botón directo para consultar otras fechas, en lugar de mostrar una tabla desierta que parece rota. Nada de esto responde a una moda visual: es el compromiso de la página de no hacer adivinar al usuario.
Al preparar esta instrucción, mantenga los nombres técnicos en inglés —button, label, error, toast, empty state— y redacte cada mensaje que leerá la persona en su propio idioma. Si le proporciona a la IA solo etiquetas en inglés, publicará el sitio con etiquetas en inglés. Ese es un fallo distinto a la falta de notificaciones, pero igual de frecuente. La estructura técnica se comparte en inglés para que la función sea correcta; las palabras se redactan en el idioma local para que el usuario sepa exactamente qué acaba de hacer.
Un ejemplo de instrucción técnica
Build a booking form. Each input has a visible label. Errors are written beside the field in words, not by color alone. After a successful send, show a toast that says the visit is requested and leaves after a few seconds. If sending fails, keep the error on the form. If there are no visits yet, show an empty state with one button to add the first.
A continuación, redacte las etiquetas y los mensajes de error en su idioma. El bloque en inglés define la estructura del sistema; las frases que añada debajo representan la atención al usuario. Un modelo de IA no sabe cómo se responde con cortesía en su ciudad; usted sí. El próximo artículo aborda el uso del movimiento y las decoraciones visuales que pueden esperar hasta que estas respuestas básicas estén resueltas.