Cada ley tiene su definición parafraseada, tres cosas que tener en cuenta cuando diseñas, cómo comprobarlas y un enlace a la fuente. La definición original, la historia y la bibliografía están en lawsofux.com.
Clase 1
Qué poner y qué quitar Qué dice Tus usuarios pasan casi todo su tiempo en otros sitios, y prefieren que el tuyo funcione igual que los que ya conocen.
Cuando diseñes, ten en cuenta Mira tres apps parecidas a la tuya. Fíjate dónde ponen el logo, el avatar y la búsqueda. Si casi todas lo ponen igual, ponlo ahí. Compruébalo Enséñasela a alguien que no la conozca: ¿encuentra el logo, el avatar y la búsqueda a la primera?
De la fuente Cuando YouTube se rediseñó en 2017, dejó que la gente probara el diseño nuevo, diera su opinión y volviera al viejo si lo prefería, para evitar el choque con lo que ya conocía.
Aprende más → lawsofux.com/es/ley-de-jakob/ Qué dice Cuantas más opciones hay, y cuanto más complejas son, más tarda una persona en decidir.
Cuando diseñes, ten en cuenta Elige una acción principal por pantalla y hazla la más visible. Deja a la vista solo las pocas que importan. Guarda el resto en un menú o en un segundo paso. Compruébalo Cuenta las acciones visibles de cada pantalla. ¿Cuál es la principal?
De la fuente Google casi solo muestra un cuadro de búsqueda, y Slack empieza mostrando solo los mensajes y va revelando el resto.
Aprende más → lawsofux.com/es/ley-de-hick/ Qué dice Es el esfuerzo mental que cuesta entender y usar tu interfaz. Una parte es necesaria y otra, la que no ayuda a la tarea, sobra.
Cuando diseñes, ten en cuenta Cada elemento debe ayudar a la tarea. Quita lo que distrae, como animaciones y adornos. Quita el texto que sobra. Compruébalo Quita un elemento a la vez: si la tarea sigue entendiéndose, sobraba.
De la fuente Origen: la teoría de la carga cognitiva es de John Sweller, de 1988.
Aprende más → lawsofux.com/es/carga-cognitiva/ Qué dice En muchos casos, cerca del 80 % del resultado viene del 20 % de las causas. Es una regla aproximada, no una ley exacta.
Cuando diseñes, ten en cuenta Mira tus analíticas: qué funciones usa casi todo el mundo. Pule esas primero. Lo demás puede esperar. Compruébalo ¿Tienes tus analíticas a mano? Si no, empieza por medir qué se usa.
De la fuente Origen: Vilfredo Pareto notó que el 80 % de la tierra de Italia era del 20 % de la población.
Aprende más → lawsofux.com/es/principio-de-pareto/ Clase 2
Cómo se ve y cómo se toca Qué dice Lo que está cerca se percibe como un grupo, y se entiende que comparte función o características.
Cuando diseñes, ten en cuenta Menos espacio dentro de un grupo que entre grupos. Define una escala de espaciado, por ejemplo 8, 16 y 32 px. Úsala siempre. Compruébalo Entrecierra los ojos frente a la pantalla: ¿se ven los grupos?
De la fuente Google separa cada resultado con espacio, y por eso la página se escanea fácil.
Aprende más → lawsofux.com/es/ley-de-proximidad/ Qué dice Entre cosas parecidas, se recuerda mejor la que es distinta.
Cuando diseñes, ten en cuenta Haz distinta la acción clave, y solo esa. No dependas solo del color: súmale un icono o un texto. Respeta a quien reduce el movimiento (prefers-reduced-motion). Compruébalo Mira la pantalla durante un segundo: ¿qué es lo primero que ves?
De la fuente Origen: la psiquiatra Hedwig von Restorff lo describió en 1933.
Aprende más → lawsofux.com/es/efecto-von-restorff/ Qué dice El tiempo para alcanzar un objetivo depende de su distancia y de su tamaño.
Cuando diseñes, ten en cuenta Botones táctiles grandes: al menos 24 px según WCAG 2.2 (44 px es el nivel AAA). Con espacio entre ellos. En zonas fáciles de alcanzar. Compruébalo Pruébalo con el pulgar, en un celular real.
De la fuente Los 24 y 44 px no son de Laws of UX: salen de los criterios 2.5.8 (AA) y 2.5.5 (AAA) de WCAG 2.2.
Aprende más → lawsofux.com/es/ley-de-fitts/ 08 Efecto de estética-usabilidad Qué dice Lo que se ve mejor se percibe como más usable, aunque no lo sea, y puede tapar problemas que no salen en las pruebas.
Cuando diseñes, ten en cuenta Pruébalo con gente. Revisa el contraste. No lo des por bueno solo porque se ve bien. Compruébalo Antes de decir «está listo», que lo use alguien que no lo hizo.
De la fuente En 1995, Hitachi probó 26 versiones de la pantalla de un cajero con 252 personas: lo bonito se relacionó más con lo fácil que parecía que con lo fácil que era.
Aprende más → lawsofux.com/es/efecto-de-est%C3%A9tica-usabilidad/ Antes Continuar
Después Continuar
Clase 3
Cómo se siente usarla Qué dice La gente mantiene la atención cuando el sistema da feedback en menos de 400 milisegundos.
Cuando diseñes, ten en cuenta Responde al instante a cada clic. Si algo tarda, muestra una animación o un skeleton. Si es largo, usa una barra de progreso. Compruébalo Pulsa y cuenta: ¿hay una señal de respuesta al instante?
De la fuente En 1982, Doherty y Thadani, de IBM, propusieron responder en menos de 400 ms, en lugar de los 2 segundos que eran el estándar.
Aprende más → lawsofux.com/es/umbral-de-doherty/ Antes Después feedback inmediato
Qué dice Sé flexible con lo que aceptas y estricto con lo que envías.
Cuando diseñes, ten en cuenta Recorta espacios y acepta mayúsculas. Acepta formatos distintos, como los teléfonos. Conviértelo al formato que necesitas y avisa claro si falla. Compruébalo Escribe el dato mal a propósito: ¿lo acepta o te regaña?
De la fuente Origen: Jon Postel, y el principio de robustez de TCP.
Aprende más → lawsofux.com/es/ley-de-postel/ Antes ANA@Mail .com ✕ formato inválido
Después ana@mail.com ✓ listo
11 Efecto de tendencia a la meta Qué dice Cuanto más cerca estás de terminar una tarea, más rápido avanzas. Mostrar el progreso motiva.
Cuando diseñes, ten en cuenta Muestra el progreso real. Divídelo en pasos, como «paso 2 de 4». Que se vea cuánto falta. Compruébalo ¿Sabe la persona en qué paso está y cuánto falta?
De la fuente Origen: Clark Hull lo propuso en 1932; en un experimento de 1934, las ratas de un pasillo corrían cada vez más rápido al acercarse a la comida.
Aprende más → lawsofux.com/es/efecto-de-tendencia-a-la-meta/ Qué dice Juzgamos una experiencia por su momento más intenso y por cómo termina, y lo negativo se recuerda con más fuerza.
Cuando diseñes, ten en cuenta Cuida la pantalla final. Cuida el peor error. Que el error siempre tenga una salida clara. Compruébalo ¿Cuál es tu pantalla final y tu peor error? ¿Los diseñaste?
De la fuente Mailchimp, en un momento importante, va más allá de un aviso de confirmación, con ilustración, animación y humor.
Aprende más → lawsofux.com/es/regla-de-fin-de-pico/ Sigue aprendiendo Laws of UX es la fuente: ahí está cada ley con su historia, ejemplos y bibliografía. Esta guía solo resume cómo aplicarlas cuando estás creando un producto.
Más recursos gratis Jonathan Pacheco Design Engineer · Ing. de Sistemas
Basada en Laws of UX (lawsofux.com), de Jon Yablonski. Las definiciones están parafraseadas; las reglas, las comprobaciones y los dibujos son aplicaciones propias. Para la definición original, visita lawsofux.com.
