UX · Microcopy

Microcopy & UX Writing

Textos breves para botones, errores, estados vacíos, confirmaciones y llamadas a la acción, pensados para que la interfaz hable claro y acompañe a la persona usuaria.

Por qué cuidar las palabras de la interfaz

El diseño visual guía la mirada, pero son las palabras las que explican qué va a pasar cuando haces clic y qué ocurre si algo sale mal.

Este módulo reúne ejemplos de microcopy listos para copiar y adaptar en proyectos: textos para botones, errores, estados vacíos, confirmaciones, formularios y mensajes de ayuda. No buscan ser frases perfectas, sino puntos de partida que eviten los clásicos “Enviar” y “Error desconocido”.

Puedes usarlos para:

  • Prototipar más rápido sin dejar textos “lorem ipsum” eternos.
  • Mostrar al alumnado cómo cambia la experiencia solo con cambiar el tono.
  • Revisar una interfaz existente y detectar dónde los textos se quedan cortos.

Principios básicos de buen microcopy

Cuatro ideas sencillas para filtrar textos antes de publicarlos.

1. Claridad por encima de creatividad

Es mejor “Descargar informe” que “Empezar la aventura”. Si la persona duda de lo que va a pasar, el texto no está funcionando.

2. Hablar de la persona, no del sistema

En lugar de mensajes técnicos (“Error en el envío del formulario”), céntrate en lo que puede hacer la persona: “No hemos podido enviar tu mensaje. Revisa el email o inténtalo de nuevo en unos minutos.”

3. Adelantar consecuencias

Si un botón borra algo, dilo. Si una acción no se puede deshacer, también. “Borrar proyecto” es distinto de “Borrar proyecto para siempre”.

4. Ser consistente

Si en un sitio pones “Iniciar sesión” y en otro “Entrar”, estás añadiendo ruido. Escoge una fórmula y repítela en toda la interfaz.

Textos para botones y CTAs

Botones que explican la acción: qué hace la persona, no qué hace el sistema.

Acciones principales

Para CTA destacados en landing, fichas de servicio o pantallas clave.

Ejemplos
– Empezar prueba gratuita
– Pedir presupuesto
– Reservar cita
– Descargar guía en PDF
– Ver planes y precios

Acciones secundarias

Botones menos prioritarios, pero necesarios para navegar o explorar.

Ejemplos
– Ver más detalles
– Ver todos los proyectos
– Editar datos
– Cambiar método de pago
– Volver al panel

Acciones de riesgo

Acciones que pueden generar pérdida de información o cambios importantes.

Ejemplos
– Eliminar proyecto
– Borrar cuenta para siempre
– Cancelar suscripción
– Restablecer configuración

Mensajes de error que ayudan

El objetivo no es decir que algo ha fallado, sino explicar qué hacer ahora.

Errores de formulario

Mensajes breves, pegados al campo, que indican el problema concreto.

Ejemplos
– Introduce un email válido.
– Este campo no puede estar vacío.
– La contraseña debe tener al menos 8 caracteres.
– Revisa que las contraseñas coinciden.

Errores de sistema / red

No hace falta dar código de error, pero sí una salida clara.

Ejemplos
– No hemos podido guardar los cambios. Inténtalo de nuevo en unos minutos.
– Hay problemas de conexión. Revisa tu red o vuelve a intentarlo más tarde.
– Algo no ha ido como esperábamos. Vuelve atrás o recarga la página.

Acciones bloqueadas

Cuando la persona no puede avanzar por permisos, estado o límite superado.

Ejemplos
– No puedes editar este proyecto porque ya se ha enviado.
– Has alcanzado el número máximo de documentos en el plan actual.
– Para usar esta función necesitas actualizar tu plan.

Estados vacíos que orientan

Cuando aún no hay datos, es un buen momento para explicar qué se puede hacer.

Tablas y listados sin contenido

En lugar de dejar una pantalla vacía, indica el siguiente paso.

Ejemplos
– Todavía no tienes proyectos. Crea el primero para empezar a trabajar.
– No hay resultados con estos filtros. Prueba cambiando los criterios de búsqueda.
– Aún no has guardado ningún favorito.

Paneles recién creados

Ideal para dashboards y zonas de usuario nuevas.

Ejemplos
– Bienvenido al panel. Empieza creando una tarea para ver tu progreso aquí.
– Cuando subas tus primeros archivos, los verás en esta sección.
– Configura tus preferencias para personalizar los datos que te mostramos.

Confirmaciones y mensajes de éxito

La persona necesita saber que la acción se ha completado y qué puede hacer después.

Acciones completadas

Mensajes breves que cierran el flujo y sugieren un siguiente paso.

Ejemplos
– Hemos guardado tus cambios correctamente.
– Tu mensaje se ha enviado. Te responderemos en un plazo de 24–48 horas.
– Tu pedido está en marcha. Recibirás un email con los detalles.

Confirmaciones de acciones de riesgo

Antes de borrar o cancelar, confirma la intención y explica el impacto.

Ejemplo de diálogo
Título: ¿Seguro que quieres borrar este proyecto?
Texto: Esta acción no se puede deshacer. Perderás todos los datos asociados.
Botón primario: Borrar proyecto
Botón secundario: Cancelar

Ajustar el tono sin perder claridad

El mismo mensaje puede sonar más formal, neutro o cercano según la voz de la marca.

Mismo mensaje, tres tonos

Ejemplo aplicado a una confirmación de registro.

Formal
“Tu cuenta se ha creado correctamente. Revisa tu correo electrónico para confirmar el acceso.”
Neutro
“Hemos creado tu cuenta. Revisa tu correo y confirma para empezar a usar la plataforma.”
Cercano
“¡Listo! Tu cuenta ya está creada. Solo te falta confirmar el correo para empezar.”

Checklist de tono

Para revisar si los textos encajan con la voz de la marca o del proyecto.

  • ¿Habla como hablaría la marca fuera del producto (web, redes, email)?
  • ¿Respeta el mismo nivel de formalidad en toda la interfaz?
  • ¿Evita bromas en momentos de error o pérdida de información?
  • ¿Suena a persona hablando con otra persona, no a máquina?

Uso docente y práctico

Cómo trabajar microcopy en clase o en proyectos

Este módulo está pensado para que puedas editar textos en vivo con el grupo: cambiar un botón, reescribir un error, mejorar un estado vacío y ver cómo cambia la experiencia sin tocar ni un píxel del diseño.

Algunas ideas de uso:

  • Pedir al alumnado que sustituya todos los “Enviar” de una interfaz por textos específicos, usando los ejemplos de CTA como referencia.
  • Revisar la página de error o de formularios de un proyecto y mejorar los mensajes siguiendo la sección de errores y estados vacíos.
  • Trabajar el tono: dar el mismo mensaje en versión formal, neutra y cercana, y decidir cuál encaja mejor con la marca.

Como en el resto de KIT UX UI: entra, copia, adapta y, si te resulta útil para tus clases o proyectos, siempre puedes citarnos cuando tenga sentido.