UX y UI usable
Una interfaz bonita no sirve de nada si el usuario no sabe qué hacer con ella. Aquí vas a entender qué convierte una UI en usable: cuáles son los principios, las leyes y los errores más comunes.
1 UX vs UI: no son lo mismo
Se confunden todo el tiempo, pero son cosas distintas:
UI (User Interface)
Es lo que ves: los botones, los colores, la tipografía, el espaciado, los iconos.
La cara de la aplicación.
UX (User Experience)
Es lo que sientes al usarla: facilidad, frustración, claridad, rapidez, confianza.
El recuerdo que te llevas.
🚪 Analogía: la puerta de Norman
Cuando vas a una puerta y no sabes si empujar o tirar, la UI es el diseño de la puerta (el asa, la placa, el material). La UX es la sensación de "¿por qué no funciona una puerta?". Si tienes que poner un cartel que diga "empujar", la UI ya falló.
Regla de oro: una buena UI no necesita manual de instrucciones.
2 ¿Qué hace que una UI sea usable?
Una interfaz es usable cuando responde sin esfuerzo a las tres preguntas que hace el usuario cada vez que mira una pantalla:
¿Qué es esto?
Identifico de un vistazo en qué pantalla estoy y qué contiene.
¿Qué puedo hacer?
Sé qué elementos son interactivos y cuál es la acción principal.
¿Qué pasó?
Después de hacer click, sé si funcionó, si falló o si sigue cargando.
Si cualquiera de las tres queda sin respuesta, el usuario se frena, duda y, en muchos casos, abandona. La duda es el principal enemigo de la usabilidad.
3 Los 5 principios de una UI usable
No hace falta memorizar las 10 heurísticas de Nielsen. Con estos 5 principios cubres el 90% de los problemas.
1. Visibilidad
Lo importante tiene que verse sin scroll. Las acciones principales no pueden estar escondidas en un menú de tres niveles. Si el usuario no lo ve, no existe.
2. Feedback
Cada acción del usuario tiene que provocar una respuesta visible: hover, loading, confirmación, error. Silencio = el usuario piensa que algo está roto.
3. Consistencia
Los mismos elementos deben comportarse igual en toda la app: los botones primarios tienen un solo estilo, los enlaces tienen un solo color, los errores aparecen siempre en el mismo sitio.
4. Affordance
Un botón debe parecer un botón. Un enlace debe parecer un enlace. Lo que se puede clickar se tiene que notar sin pasar el ratón por encima. No hagas textos subrayados que no sean enlaces.
5. Prevención de errores
Mejor evitar el error que explicarlo. Confirmaciones antes de borrar, validación en tiempo real, campos deshabilitados cuando no se pueden rellenar. Y si el error ocurre, dar un mensaje claro y accionable.
4 El principio de feedback, en vivo
El feedback es invisible cuando está y ensordecedor cuando falta. Mira qué pasa cuando un botón no te dice nada vs cuando sí te habla:
Feedback: el botón que habla vs el botón mudo
A la izquierda no sabes si pasó algo. A la derecha la UI te cuenta qué está haciendo.
¿Qué pasa en la UI muerta?
- El usuario duda: "¿se envió? ¿volví a hacer click?"
- En formularios, acaba enviando dos o tres veces la misma petición.
- Si el backend es lento, asume que la web está rota y se va.
5 Jerarquía visual: guiar el ojo
La jerarquía visual es lo que le dice al usuario dónde mirar primero. Se consigue con tamaño, peso tipográfico, color, espaciado y contraste. Sin jerarquía, todo compite por la atención y el usuario no encuentra el punto de entrada.
Jerarquía visual: el ojo necesita un camino
Sin jerarquía, todo pesa igual y el usuario no sabe dónde mirar primero.
- Hasta 10 usuarios
- Soporte prioritario
- Analytics avanzado
❌ Todo plano
Título, precio, descripción y botón pesan lo mismo. El ojo no sabe por dónde empezar.
✅ Con jerarquía
El nombre del plan destaca, el precio resalta en otro color, el botón primario llama a la acción.
6 Tres leyes de UX que te ahorran discusiones
Ley de Fitts
El tiempo que cuesta llegar a un elemento depende de su tamaño y distancia. Traducción: los botones importantes deben ser grandes y estar cerca del cursor o del pulgar. Un "Eliminar cuenta" diminuto es culpa del diseñador, no del usuario que hizo click por error.
Ley de Hick
Cuantas más opciones, más tiempo tarda el usuario en decidir. Un menú con 30 opciones paraliza. Agrupa, prioriza y esconde lo secundario detrás de "Más opciones".
Ley de Jakob
El usuario pasa la mayor parte del tiempo en otras webs, así que espera que la tuya funcione como las que ya conoce. No reinventes el carrito de la compra, el login o el menú de navegación solo por ser original. La familiaridad es usabilidad.
7 Checklist rápido antes de dar algo por terminado
- ¿La acción principal se ve sin hacer scroll?
- ¿Cada botón tiene estado de hover, active y disabled?
- ¿El usuario recibe feedback inmediato al hacer click (loading, éxito o error)?
- ¿Los mensajes de error explican qué pasó y cómo arreglarlo?
- ¿La jerarquía visual deja claro qué es lo más importante de la pantalla?
- ¿Los elementos clickables se distinguen de los que no lo son sin pasar el ratón?
- ¿La app se puede usar con teclado (tab, enter, escape)?
- ¿El contraste de texto cumple AA (4.5:1) mínimo?
- ¿Los campos de formulario tienen labels visibles, no solo placeholder?
- ¿Las acciones destructivas piden confirmación?
8 En una frase
"Una UI usable es la que el usuario no nota, porque simplemente funciona."
Si el usuario se frustra, se para o tiene que pensar demasiado, la UI ya falló. Tu trabajo no es impresionarlo con el diseño: es que llegue a su objetivo sin darse cuenta del camino.