Escritura de interfaz
Lo claro y breve vence a lo ingenioso; lo consistente vence a lo variado. El mejor mensaje de error es la interacción rediseñada para que el error no pueda ocurrir.
Cómo se renderiza el texto (capitalización mediante text-transform, truncamiento, puntuación inteligente) pertenece a better-typography. El marcado de errores y los anuncios (aria-invalid, regiones en vivo) pertenecen a better-accessibility. El espacio para cadenas traducidas pertenece a better-layout.
Reconocer la voz existente
Antes de escribir o revisar, lee el texto cercano. Anota la terminología del producto, sus convenciones de localización y cualquier guía de estilo de voz o contenido.
Una voz de marca deliberada no es un defecto. Señala una desviación del lenguaje sencillo solo cuando crea inconsistencia, ambigüedad, riesgo de traducción o un tono que las circunstancias no justifican.
Una voz, tono flexible
El producto tiene una voz y su texto existente la establece. Una edición local no puede inventar una nueva. Mantén los términos consistentes: si es "Archivar" en el menú, no es "Mover al almacenamiento" en la notificación. El tono se flexiona según las circunstancias:
| Contexto | Tono |
|---|---|
| Éxito, incorporación, estados vacíos | Cálido, puede ser ligero |
| Acciones rutinarias, configuración | Neutral, mínimo |
| Errores, confirmaciones destructivas | Tranquilo, sencillo, cero diversión |
| Pérdida de datos, seguridad | Serio, explícito |
Dirígete al lector directamente
En texto instructivo, escribe "tú", no "el usuario". En errores, "nosotros" invita a la ambigüedad y suena a evasión, así que prefiere "No se pudo cargar el contenido" sobre "Estamos teniendo problemas para cargar este contenido". Una voz en primera persona ya establecida puede permanecer en textos de bajo riesgo donde aún se lea claramente.
Usa los posesivos con moderación: "Favoritos" es mejor que "Tus favoritos". Mantén una perspectiva a lo largo de un flujo.
Palabras sencillas sobre las ingeniosas
Elige palabras que un lector cansado entienda a la primera, y elimina toda palabra que no haga trabajo. Sin modismos, sin coloquialismos, sin humor que no se pueda traducir.
Omite el género innecesario: "Los suscriptores pueden publicar recetas", no "cada suscriptor puede publicar sus recetas". Adapta al dispositivo de entrada: "tocar" en pantalla táctil, "hacer clic" con un puntero, "seleccionar" cuando ambos son posibles.
Nunca construyas una oración a partir de fragmentos alrededor de una variable ("Tienes " + n + " mensajes nuevos"), porque el orden de las palabras cambia según el idioma. Usa una cadena de plantilla completa con pluralización adecuada.
Botones con verbo primero
La etiqueta de un botón comienza con un verbo que nombra la acción: "Enviar", "Guardar borrador", "Eliminar proyecto". Nunca "¡OK!", "¡Vamos!" o un simple "Sí" y "No" en una acción importante.
Un botón de confirmación repite la consecuencia, para que el diálogo se pueda responder sin leer el cuerpo. "¿Eliminar este proyecto?" ofrece Eliminar proyecto y Cancelar.
Vocabulario consistente en flujos
Un flujo de varios pasos usa un solo vocabulario en todo momento: "Comenzar" para entrar, "Continuar" o "Siguiente" (elige uno) para avanzar, "Listo" para finalizar. Alternar sinónimos hace que los usuarios se pregunten si los botones hacen cosas diferentes.
Los enlaces describen su destino
El texto del enlace debe tener sentido fuera de contexto, porque los usuarios de lectores de pantalla navegan por una lista de enlaces de la página. Escribe "Lee la documentación de facturación". "Haz clic aquí" falla esta regla y la del verbo del dispositivo a la vez.
Un simple "Más información" se rompe tan pronto como aparecen dos en una página. Agrega un sufijo a cada uno: "Más información sobre exportaciones".
Una política de capitalización
Elige mayúscula inicial o minúscula inicial según el tipo de elemento, luego aplícala a cada instancia de ese tipo. La minúscula inicial es el valor predeterminado más seguro. Es más tranquila, no tiene reglas por palabra que recordar y se localiza limpiamente. "Guardar cambios" junto a "Descartar cambios" se lee como descuido.
La configuración describe el estado ACTIVADO
Etiqueta un interruptor para lo que sucede cuando está activado. "Enviar confirmaciones de lectura" permite a los usuarios inferir el estado desactivado; la forma negativa ("No enviar confirmaciones de lectura") convierte el interruptor en una doble negación.
Enlaza directamente a una configuración referenciada en lugar de describir la ruta: un enlace "Configuración de notificaciones", no "Ir a Configuración > Notificaciones > Correo electrónico".
Los errores dicen cómo solucionar, junto a donde ocurrió
Un error es una instrucción y pertenece al lado del campo que falló:
| Malo | Bueno |
|---|---|
| Esa contraseña es demasiado corta | Elige una contraseña de al menos 8 caracteres |
| Nombre no válido | Usa solo letras para tu nombre |
| ¡Ups! Algo salió mal. | No se pudo guardar. Verifica tu conexión e inténtalo de nuevo. |
Sin culpa, sin "ups", sin signos de exclamación. Redacta las pistas de forma positiva ("Usa solo letras", no "No uses números ni símbolos") y muéstralas antes del error, no después. Cuando el mismo error se repite, rediseña la interacción en lugar de reformularlo.
Los estados vacíos apuntan hacia adelante
Un estado vacío dice qué es este lugar, cómo llenarlo y ofrece una acción clara a continuación:
<!-- Malo: un encogimiento de hombros -->
<p>Sin resultados.</p>
<!-- Bueno: orientación más un paso siguiente -->
<p class="font-medium">Aún no hay proyectos</p>
<p class="text-sm text-zinc-500">Los proyectos mantienen tus tareas y archivos juntos.</p>
<button class="mt-4">Crear un proyecto</button>
Un estado vacío de búsqueda o filtro nombra la consulta y ofrece una salida: "Sin resultados para 'trimestral'. Limpiar filtros". Nunca coloques información persistente en un estado vacío. Desaparece en el momento en que existe contenido.
Los placeholders son ejemplos, no etiquetas
Un placeholder muestra el formato esperado: [email protected], DD/MM/AAAA. Desaparece al escribir, por lo que nunca es la única etiqueta. Cada campo mantiene una etiqueta visible.
Informes
Gravedad. ALTA desorienta al usuario u oculta cómo recuperarse de un error. MEDIA rompe la coherencia de voz, terminología o capitalización. BAJA es pulido de redacción aislado.
Verificación. Solo la fuente es suficiente aquí. Revisa cada etiqueta contra la acción que invoca, cada error con una solución indicada y la terminología contra el texto circundante. No se requiere verificación en navegador.
Formato. Agrupa los hallazgos bajo el principio que violan, ordenados por gravedad, una fila por causa raíz que enumera cada ubicación donde aparece:
| Gravedad | Ubicación | Antes | Después | Por qué |
|---|
Ubicación es ruta/al/archivo:línea. Por qué nombra el principio y el impacto en el usuario.
Termina con Bloquear cuando quede alguna ALTA, o Aprobar en caso contrario, dejando el resto en la tabla como trabajo pendiente. Nunca Aprobar cobertura que no inspeccionaste. Si no hay nada que informar, indica "No se encontraron problemas de redacción procesables" y reporta la verificación.