Cuando un fundador me pide que eche un vistazo a su producto actual, los problemas rara vez son exóticos. Los mismos ocho problemas explican la mayor parte de lo que hace que una interfaz parezca inacabada, y todos son baratos de arreglar en relación con lo mucho que cambian la impresión que causa el producto.
Nada de esto va sobre el gusto. Cada punto de abajo tiene una prueba concreta que puedes hacer en tus propias pantallas esta misma tarde.
Demasiados tamaños de tipografía, muy poca jerarquía
Cuenta los tamaños de fuente distintos de tu producto. Si el número pasa de ocho, algunos no están haciendo ningún trabajo. El patrón habitual son tamaños que se diferencian en un solo píxel (15 y 16, 13 y 14), lo que se lee como inconsistencia y no como jerarquía, porque el ojo no llega a resolver la diferencia pero sí registra que algo no encaja.
El arreglo es una escala fija con saltos evidentes entre pasos, y usar el peso y el color para crear las distinciones más finas en lugar del tamaño. Una etiqueta en gris apagado del mismo tamaño que el texto de cuerpo se separa perfectamente sin necesidad de un nuevo tamaño en la escala.
El error relacionado son los niveles de encabezado elegidos por su apariencia. Elige el nivel de encabezado según la estructura del documento y dale el estilo para que se vea bien; tanto los lectores de pantalla como los buscadores leen la estructura, no el tamaño en píxeles.
Un espaciado uniforme en lugar de agrupado
Las interfaces que cuesta recorrer con la vista suelen estar espaciadas de forma uniforme: el mismo hueco de 16px entre una etiqueta y su campo que entre dos secciones sin relación. La proximidad es la señal de agrupación más fuerte que existe, y usarla de manera uniforme la desperdicia.
Arréglalo decidiendo primero las relaciones. Una etiqueta va pegada a su campo, los campos van más separados entre sí, y un cambio de sección recibe dos o tres veces esa distancia. Cuando el espaciado está bien, puedes entornar los ojos ante la pantalla y aun así ver la estructura.
Ya que estás, elige una unidad base (4px es un buen valor por defecto) y deja de usar valores fuera de la escala. El espaciado arbitrario es, con diferencia, la fuente más habitual de esa sensación de que «algo se ve un poco mal» que los clientes mencionan pero no saben diagnosticar.
Un contraste que falla en las pantallas reales
El texto en gris claro sobre fondo blanco parece refinado en el monitor calibrado de un diseñador en una sala con poca luz. Es ilegible en un portátil al aire libre, e incumple los requisitos de accesibilidad. El umbral con el que comparar es una relación de contraste de 4.5:1 para el texto de cuerpo y 3:1 para el texto grande, los iconos y los bordes de los controles interactivos.
Pasa un comprobador de contraste por tu texto atenuado, tu texto de placeholder, tus estados disabled y tus bordes. El texto de placeholder es el fallo más habitual, y a menudo lleva información que, de todos modos, debería haber sido una etiqueta.
La otra mitad de esto es no depender solo del color. Un borde rojo en un campo no válido no significa nada para una persona daltónica sin un icono y un mensaje. Los errores necesitan texto, siempre.
Estados vacíos, de carga y de error que se dejan sin diseñar
La primera pantalla que ve un usuario nuevo suele ser la vacía, y suele ser la pantalla menos diseñada del producto. Un estado vacío que dice "Aún no hay proyectos" desaprovecha el momento; uno que explica qué es un proyecto y ofrece el botón para crear el primero es onboarding.
Los estados de carga merecen la misma atención. Un esqueleto con la forma del contenido que va a llegar reduce la espera percibida y evita que el layout dé un salto cuando llegan los datos. Un spinner centrado no hace ninguna de las dos cosas.
Para los errores, escribe mensajes que nombren el problema y la siguiente acción. "Algo ha ido mal" solo le dice al usuario que no pensaste en este caso.
Formularios que pelean con quien los rellena
Los placeholders usados como etiquetas desaparecen en cuanto alguien escribe, así que cualquiera que se despiste tiene que vaciar el campo para recordar qué le pedía. Usa una etiqueta persistente encima del campo y reserva el placeholder para ejemplos de formato, si acaso.
Valida al perder el foco en lugar de en cada pulsación, para no decirle al usuario que su correo no es válido mientras aún está escribiendo el tercer carácter. Pon el mensaje de error justo debajo del campo, en texto, y di cómo arreglarlo.
Recorta los campos. Cada campo opcional es un pequeño impuesto sobre la finalización, y la mayoría de los formularios tienen al menos dos que existen porque alguien pensó una vez que el dato podría ser útil. Cuatro campos es un buen objetivo para un formulario de contacto.
Áreas táctiles y pensar primero en el escritorio
Los botones de solo icono diseñados a 24px en una maqueta de escritorio se convierten en áreas táctiles de 24px en un móvil. El mínimo práctico ronda los 44px de área táctil, que puedes conseguir con padding sin cambiar el tamaño visual del icono.
Comprueba también el espacio entre áreas contiguas: una fila de iconos separados 4px provoca toques erróneos por mucho que sea el tamaño individual. Y coloca las acciones principales al alcance del pulgar en el móvil, en lugar de fijarlas en una esquina superior derecha heredada del layout de escritorio.
Diseñar con contenido que nunca existirá
El lorem ipsum tiene una longitud de palabra cómoda y uniforme. Los datos reales de un producto no. Las maquetaciones construidas sobre texto de relleno se rompen con el cliente cuyo nombre de empresa tiene cuarenta caracteres, con el total de factura que trae dos dígitos de más, y con la notificación que llega sin ningún texto de cuerpo.
Usa contenido realista desde el principio y luego somételo a prueba: la cadena más larga plausible, la más corta, el caso vacío. Si el diseño solo aguanta con la longitud ideal, es una foto de una interfaz y no una interfaz.
Sin foco visible y sin recorrido por teclado
Los componentes personalizados salen a menudo con el anillo de foco del navegador eliminado y nada en su lugar, lo que hace que el producto sea inutilizable con teclado e invisible para cualquiera que navegue sin ratón. Diseña un estilo de foco que encaje con el lenguaje visual en lugar de borrar el valor por defecto.
Luego recorre tú mismo un flujo clave con el tabulador. Encontrarás el modal que no atrapa el foco, el desplegable que no se puede abrir sin un clic, y el orden en que los elementos reciben el foco dando saltos por la pantalla. Son arreglos de veinte minutos en la fase de diseño y reescrituras después del lanzamiento.
