Microtextos y comunicaciones UX

1) Qué son los microtextos y por qué son necesarios

• explica «qué está pasando ahora» y «qué hacer después»;
• reduce los errores y el soporte;
• aumenta la conversión y la confianza.

2) Principios básicos

1. Claridad> ingenio. No hay ambigüedades ni jerga.
2. Contextualidad. Escribimos exactamente lo que es útil aquí y ahora.
3. Brevedad. Quitamos las palabras superfluas sin sacrificar el significado.
4. Fianza activa y verbos de acción. «Guardar», «Continuar», «Enviar documentos».
5. Detalles y puntos de referencia. Qué, por qué, cómo arreglar, cuánto tiempo tomará.
6. Secuencia de términos. Un término es un significado en todo el producto.
7. La voz de la marca y el tono de la situación. Amable, pero sin alarmismo; en pasos estresantes - neutral y tranquilo.
8. Disponibilidad. Lenguaje comprensible, legibilidad en voz alta, compatibilidad con captores de pantalla.
9. Localización-primero. Fichas de diseño para la longitud de las filas, los números, el tiempo; evitamos los chistes culturalmente dependientes.
10. Ética y responsabilidad. Transparencia de las condiciones, expectativas honestas, sin manipulación.

3) Mapa de puntos de microtextos

Navegación y CTA: nombres de elementos, botones, estados deshabilitados.
Formularios y CUS/registro: etiquetas, listas de reproducción, máscaras, consejos, validación en línea, errores, confirmaciones.
Estados vacíos y pantallas «cero»: qué es y cómo empezar.
Estados y progreso: descargas, cola, pasos, tiempo de espera.
Notificaciones del sistema: tostadas, pancartas, pistolas, e-mail/inbox.
Búsqueda y filtros: consultas de ejemplo, resultados nulos, ordenación.
Pagos/retiros: requisitos de datos, plazos, comisiones, límites.
Configuración y seguridad: contraseñas, 2FA, sesiones, alertas de riesgo.
Ayuda en la interfaz: hints, tooltips, incrustaciones de preguntas frecuentes, enlaces de ayuda.

4) Patrones por zonas clave (con ejemplos)

4. 1 CTA y nombres de acciones

Principio: botón = acción del usuario + objeto.

Antes: «Ok» → Después: «Guardar cambios»

Antes: «Más información» → Después: «Leer las reglas del bono»

Antes: «Enviar» → Después de: «Enviar documento»

Muy bien: brevemente, específicamente, en el lugar. Malo: abstracto, bromista, ambiguo.

4. 2 sellos y playsholder

El sello es obligatorio; playsholder es un ejemplo de formato.
Antes: playsholder «Ivan Ivanov» sin sello → Después: sello «FIO», playsholder «Ivan Yivanov».
Formatear las expectativas: "DD. MM. GGG», «Min. 8 caracteres, 1 dígito".

4. 3 validación en línea y errores

Fórmula de mensaje de error: qué no es así + cómo corregir + (por qué/restricción).

Antes: "Error 400" → Después: "Formato de fecha incorrecto. Use DD. MM. GGG".
Antes: "No se pudo cargar" → Después: "El archivo es demasiado grande (máx. 10 MB). Seleccione un archivo más pequeño".
A las aperturas/bloqueos: agregue el vínculo «Mostrar requisitos» al lado.

4. 4 Estados vacíos

Objetivo: explicar el valor y proponer una acción.

Plantilla: "Aquí estará [el resultado/la historia] tan pronto como usted [la acción]. [Botón de paso]".
Ejemplo: "Aún no tiene guardados los métodos de pago. Agregue una tarjeta: esto acelerará los pagos. [Añadir tarjeta]".

4. 5 Descargas, progreso, espera

Informe lo que sucede y cuánto tardará: «Revisamos los documentos (hasta 2 minutos)».
Sugiera una alternativa: «Es posible cerrar la ventana - lo notificaremos cuando todo esté listo».

4. 6 Resultados de búsqueda nulos

Ejemplo: "No se ha encontrado nada bajo petición "live blackjack". Pruebe el «blackjack» o retire el filtro «Proveedor: X». [Restablecer filtros]".

4. 7 Notificaciones (tostadas/pancartas/pistolas)

Éxito: "Solicitud enviada. Informaremos de la decisión por correo electrónico".
Info: «La verificación de la dirección es obligatoria para aumentar el límite».
Atención: "La sesión expira en 1 minuto. ¿Renovar? [Renovar] [Salir]".
Error: "El pago ha sido rechazado por el banco. Pruebe otro método o póngase en contacto con el banco".

4. 8 Pagos, límites, plazos

Escriba claramente sobre comisiones/plazos: «La comisión del 1,5% es retenida por el proveedor», «El pago es de hasta 15 minutos».
Explique las razones de los fallos: «El método no está disponible en su área debido a las reglas del proveedor».

4. 9 Seguridad y pasos sensibles

Tono neutro, cero bromas.
Ejemplo: "Notamos el inicio de sesión desde el nuevo dispositivo. ¿eres tú? [Sí, soy yo] [No]".

5) Tono y estilo: ajuste a la situación

Flujo normal: amistoso, conciso.
Formación/onboarding: solidario y motivador.
Estrés/error/pago: neutral, tranquilo, específico.
Condiciones legales: formal-transparente, sin promesas de marketing.

• Usamos: «por favor», «listo», «no te preocupes», «compruebe».
• Evitamos: «oh», «ups», «hack», «magia», sarcasmo, diminutivo-cariñoso.

6) Localización y internacionalización

Establecer un margen en la longitud de las filas (DE/UK más largo).
Números/monedas/fechas - formatear localmente.
No cifre el significado en el humor/metáforas.
Mantenga un glosario de términos y tone-map por idiomas (un conjunto de frases de ejemplo para cada situación).

7) Accesibilidad (A11y)

Errores y estados importantes - aria-live.
Contraste y legibilidad a nivel WCAG.
El significado está en el sello/aria-label, no sólo en el placeholder.
Equivalentes de texto para iconos: «Eliminar», «Ocultar contraseña».
Orden de tabulación = orden de significado.

8) Proceso y sistema de diseño de contenido

payplayn de contenidos: brif → draft → UX-revyu → legal/komplaens (si es necesario) → la localización → los tests → la puesta en venta.

• bibliotecas de estados (éxito/información/atención/error);
• patrones de error por tipo de campo
• hyde para los nombres CTA;
• tone-map y glosario;
• «dispensadores» de longitud (max chars para estados).
• Versionar texto: almacena las líneas junto al código/componentes, usa las claves y las descripciones.

9) Métricas y experimentos

Métricas básicas: conversión de pasos, CTR por CTA, tiempo de finalización, tasa de error (tipo-específico), NPS/CSAT para script, frecuencia de llamadas de soporte por tema.
Estudios: entrevistas en UX, pruebas de usabilidad, lectura en voz alta, seguimiento de ojos para detectar «zonas ciegas», análisis de mapas de clics de estados vacíos.
Pruebas de microcopía A/B: prueba un factor semántico a la vez (verbo de acción, especificación de término, formulación de error).

10) Anti-patrones

Humor en pasos críticos («upsik!» en caso de error de pago).
CTA abstractos («OK», «Más allá») sin objeto de acción.
Códigos técnicos sin traducción («Error 500» en lugar de «Servicio no disponible»).
Playsholder en lugar del sello.
Condiciones ocultas y expectativas injustificadas («Instantánea» cuando hay retrasos).
Estados vacíos «cero» sin siguiente paso.
Garantía pasiva y diseños impersonales («debe llenarse»).

11) Plantillas de frases (se pueden tomar e insertar)

• «Escriba su número de teléfono en formato + 380...»
• "La contraseña es demasiado corta. Un mínimo de 8 caracteres"
• "El documento está borroso. Sube una foto más clara"

• "¡Listo! Revisaremos los documentos (hasta 2 minutos) y enviaremos una notificación"
• "Se ha aceptado el pago. El recibo se envió por correo electrónico"

• "Aquí aparecerá un historial de operaciones después de la primera reposición. [Añadir]"

• "Conectamos el proveedor... normalmente tarda hasta 30 segundos"

• "Bloqueamos el intento de entrar desde un lugar desconocido. Si es usted - confirme en la aplicación"

12) Hojas de cheques

• ¿Está claro qué hacer el usuario a continuación?
• ¿Hay algún detalle: formato, límite, plazo, causa/efecto?
• ¿Coinciden los términos con el glosario?
• ¿El tono coincide con la situación?
• ¿El mensaje es legible en voz alta y en la pantalla 320 px?
• Accesibilidad: etiquetas, atributos aria, enfoque, contraste.
• ¿Está lista la opción de localización (sin trampas culturales)?

• ¿El mensaje explica la razón?
• ¿Sugiere una corrección?
• ¿No culpa al usuario?
• ¿No revela detalles técnicos adicionales?

13) Ejemplos de «antes/después»

1. Pago rechazado

Antes: «Error de pago»

Después: "El pago ha sido rechazado por el banco. Pruebe otra tarjeta o póngase en contacto con el banco. La Junta no ha pasado a pérdidas y ganancias"

2. Botón ambiguo

Antes: «Continuar» (no está claro qué es exactamente)

Después: «Ir a confirmación de identidad»

3. Búsqueda cero

Antes: «No hay nada encontrado»

Después: "No se ha encontrado nada por "roulette live". Retire el filtro «Sólo alto límite» o intente «roulette». [Restablecer filtros]"

4. Cartera vacía

Antes: «Aquí está vacío»

Después: "Para empezar, ate la tarjeta o la cartera. Esto acelerará las reposiciones y los pagos. [Añadir método de pago]"

14) Incrustación microcopy en el trabajo del producto

Planifique el texto al mismo tiempo que el diseño y la lógica.
Mantenga el «banco de líneas» en el repositorio y en el sistema de diseño.
Marca la fase de prueba de texto en las copias de las pantallas.
Documentar las soluciones: por qué se selecciona la formulación, qué hipótesis se comprueban.

Breve parche

Significado → Acción → Palabra. Primero lo que hay que hacer, luego cómo decirlo.
Una pantalla es un objetivo. El microtexto sirve al objetivo del paso.
Más contexto - menos apoyo. Explíquelo a tiempo y por caso.
Pruebe las palabras de la misma manera que UI. Los textos forman parte de la interfaz, no de la decoración.