wensity/wensity-ui-copy

Wensity UI Copy

Las palabras son parte del diseño. Una copia vaga o inflada hace que una interfaz pulida se sienta genérica; una copia sencilla y específica hace que una interfaz sencilla se sienta confiable. La prueba para cada cadena: ¿ayuda a alguien a entender o actuar?

1. Voz

• Palabras sencillas. Escribe como una persona útil lo diría en voz alta. "Guardar cambios", no "Persistir modificaciones". "Te has quedado sin créditos", no "Saldo de crédito agotado".
• Las palabras del usuario, no las del sistema. "Notificaciones", no "Configuración de envío de Webhooks". Nombra las cosas por lo que las personas hacen con ellas.
• Corto. Elimina cada palabra que no cambie el significado. Luego vuelve a eliminar.
• Minúsculas iniciales en todas partes: encabezados, botones, elementos de menú, pestañas, etiquetas. "Crear nuevo proyecto", no "Crear Nuevo Proyecto".
• Voz activa, dirigida al usuario. "No tienes acceso a este proyecto", no "El acceso a este proyecto no está permitido". Cuando el sistema falla, dilo claramente: "No pudimos guardar tu archivo", no "El archivo no pudo ser guardado".
• Tranquilo. Sin signos de exclamación excepto para celebraciones genuinas, sin disculpas en errores, sin bromas en estados de error.

2. Palabras que hacen que la copia parezca generada

Evita estas. No dicen nada que un lector pueda verificar:

• Verbos: desbloquear, liberar, elevar, empoderar, potenciar, revolucionar, transformar, optimizar, apalancar, aprovechar, reinventar, disparar.
• Adjetivos: sin fisuras, sin esfuerzo, de vanguardia, de próxima generación, de clase mundial, robusto, potente, intuitivo, innovador, todo en uno.
• Frases: "En el mundo acelerado de hoy", "Lleva tu X al siguiente nivel", "Ya seas X o Y", "Di adiós a", "No busques más".
• Formas: tres adjetivos seguidos ("Rápido. Seguro. Simple."), listas con punto medio (Diseñar · Construir · Enviar) y guiones largos en cualquier parte del texto del producto, incluido el <title> de la página, la meta descripción y el texto alternativo. Usa dos puntos, una coma o dos frases: "Ledgerline: facturas en cualquier moneda".

Reemplaza cada una con un hecho concreto: qué hace, qué tan rápido, para quién, con qué resultado. "Reduce un informe de 40 minutos a 2 minutos" supera a "Potencia tu flujo de trabajo".

3. Encabezados

• Un encabezado dice el punto, no el tema. "Las facturas se pagan 9 días más rápido" supera a "Funcionalidades". "Tu espacio de trabajo está vacío" supera a "Espacio de trabajo".
• Sin cejas. No pongas una etiqueta pequeña en mayúsculas encima de un encabezado ("CARACTERÍSTICAS", "PRECIOS", "CÓMO FUNCIONA"). Escribe un encabezado que se sostenga por sí solo.
• Los títulos de página nombran la página para que la gente sepa dónde está: "Facturación", "Miembros del equipo".

4. Botones y enlaces

• Empieza con un verbo y nombra el resultado: "Crear factura", "Enviar invitación", "Exportar CSV". No "Enviar", "Aceptar", "Sí", "Haz clic aquí", "Saber más" solos.
• Haz coincidir el botón con lo que sucede después. Si el botón dice "Publicar", la notificación dice "Publicado", y la página muestra el estado publicado.
• Las acciones primaria y secundaria deben ser claramente diferentes: "Eliminar proyecto" y "Cancelar", no "Sí" y "No".
• Idealmente de una a tres palabras. Un CTA puede llegar a cinco si añade un beneficio concreto ("Empieza gratis, sin tarjeta").
• El texto del enlace tiene sentido por sí solo (los lectores de pantalla listan los enlaces fuera de contexto): "Lee la guía de la API", no "aquí".
• Las acciones destructivas nombran la cosa: "Eliminar 3 archivos", "Quitar a Sam del equipo".

5. Formularios

• Etiquetas sobre los campos, siempre visibles. El texto de marcador de posición no es una etiqueta; desaparece al empezar a escribir.
• Los marcadores de posición muestran el formato, no instrucciones: [email protected], MM / AA. Omítelos cuando la etiqueta sea suficiente.
• Texto de ayuda debajo del campo para reglas que la gente necesita antes de escribir: "Al menos 12 caracteres".
• Marca los campos opcionales, no los obligatorios, cuando la mayoría de los campos son obligatorios: "Empresa (opcional)".
• Valida al perder el foco o al enviar, no en cada pulsación de tecla. Muestra el error junto al campo al que pertenece.

6. Errores

Cada error responde dos preguntas: qué pasó y qué hacer ahora.

Débil	Mejor
Entrada inválida	Ingresa una fecha posterior a hoy
Algo salió mal	No pudimos conectar con el servidor. Verifica tu conexión e inténtalo de nuevo.
Error 403	No tienes acceso a este proyecto. Pide a un propietario que te invite.
Subida fallida	Este archivo tiene 24 MB. El límite es 10 MB.
Pago rechazado	Tu tarjeta fue rechazada. Prueba con otra tarjeta o contacta a tu banco.

• Nunca culpes al usuario ("Ingresaste un correo inválido"). Describe la solución ("Ingresa un correo como [email protected]").
• Mantén los códigos y los seguimientos de pila fuera del mensaje. Pon un ID de referencia al final si el soporte necesita uno.
• Conserva lo que el usuario escribió. Nunca borres un formulario porque un campo falló.

7. Estados vacíos

Un estado vacío es lo primero que ve un nuevo usuario. Trátalo como incorporación (onboarding):

1. Di qué aparecerá aquí: "Las facturas que envíes aparecerán aquí."
2. Da la acción que lo llena: un botón primario, "Crear factura".
3. Opcional: un enlace para importar, una plantilla o una guía breve.

Para estados vacíos de "sin resultados", di qué se buscó y cómo ampliarlo: "Sin resultados para 'invioce'. Revisa la ortografía o limpia los filtros."

8. Carga, éxito y notificaciones

• Carga: di qué está pasando cuando tarda más de un segundo: "Generando informe…". Usa el carácter de puntos suspensivos.
• Notificaciones de éxito: tiempo pasado de la acción, más el objeto: "Invitación enviada a [email protected]", "Proyecto eliminado. Deshacer".
• Ofrece Deshacer en lugar de un diálogo de confirmación para acciones reversibles. Pide confirmación solo cuando la acción no se pueda deshacer.
• Diálogos de confirmación: el título hace la pregunta real ("¿Eliminar 'Informe Q3'?"), el cuerpo indica la consecuencia ("Esto lo elimina para todos. No puedes deshacer esto."), los botones nombran la acción ("Eliminar informe" / "Cancelar").

9. Números, fechas y unidades

• Usa numerales: "3 archivos", no "tres archivos".
• Formatea según la configuración regional del usuario: Intl.NumberFormat y Intl.DateTimeFormat (o toLocaleString) en lugar de cadenas hechas a mano.
• Tiempo relativo para eventos recientes ("hace 2 min"), fechas absolutas para más antiguas ("4 mar") y la marca de tiempo completa en un tooltip.
• Pluraliza correctamente: "1 archivo", "2 archivos", "0 archivos". Usa Intl.PluralRules o una función auxiliar, nunca "archivo(s)".
• Mantén números y unidades juntos con un espacio de no separación (10 MB en HTML, "10\u00A0MB" en JavaScript) para que nunca se separen.

10. Contenido de muestra realista

Al construir un diseño sin contenido real, escribe contenido que parezca real:

• Nombres y datos específicos: "Maya Chen, Diseñadora de producto en Northwind", "$12,480.00", "Factura INV-2041". No "Juan Pérez", "$XX", "Lorem ipsum".
• Longitudes realistas, incluyendo algunas largas, para que el diseño se pruebe: un nombre de 40 caracteres, una descripción de 3 líneas junto a una de 1 línea.
• Nunca inventes pruebas. Sin logotipos de clientes inventados, valoraciones con estrellas, conteos de usuarios o testimonios presentados como reales. Usa marcadores de posición ([Cita de cliente], [Logotipo]) o pide al usuario los reales.
• Coincide con el mundo del producto. Los datos de muestra de una herramienta de desarrollo son repositorios y despliegues; los de una aplicación clínica son citas y pacientes.

11. Accesibilidad en la copia

• Cada botón de solo icono tiene un nombre accesible: aria-label="Cerrar diálogo".
• El texto alternativo describe lo que muestra una imagen cuando lleva información ("Gráfico de barras: ingresos subieron un 24% desde enero"). Las imágenes decorativas llevan alt="".
• No confíes solo en palabras de color ("haz clic en el botón verde").
• Expande las abreviaturas la primera vez a menos que la audiencia las use a diario.

12. Verifica antes de terminar

• Sin palabras de relleno de la sección 2, sin eslóganes de tres adjetivos, sin guiones largos en cadenas de interfaz.
• Cada encabezado expone un punto; sin cejas.
• Cada botón empieza con un verbo y nombra su resultado.
• Cada error dice qué pasó y qué hacer.
• Cada estado vacío se explica a sí mismo y ofrece la siguiente acción.
• Minúsculas iniciales en todo el texto.
• El contenido de muestra es específico, variado en longitud y no contiene pruebas inventadas.
• Los controles de solo icono y las imágenes significativas tienen texto accesible.