¡Les damos la

bienvenida!
¿Comenzamos?
Esta clase va a ser
grabada
Clase 01. CURSO UX-UI AVANZADO

Leyes de UX
Temario

02 03 04

Análisis de Leyes de UX Lean Canvas

Tendencias

✓ Encuestas y entrevistas ✓ Analizando una APP ✓ Lean Canvas

con las Leyes de UX y
✓ Análisis de Tendencias Heurísticas de Nielsen ✓ Generando el
Lean Canvas
✓ Benchmarking ✓ Análisis de UX de un
producto o servicio ✓ Arquetipo de
✓ Armando el Cuadro de usuario
Tendencias
Objetivos de la clase

Conocer las leyes básicas que rigen al mundo del

UX.

Comprender la importancia del análisis de

heurísticas para desarrollar un re-diseño

Identificar lo trabajado en ejemplos claros para

incorporar progresivamente los conceptos a
nuestra práctica.
 MAPA DE CONCEPTOS

Producto Digital
Iterar

5 Elementos de UX
Estrategia Requerimientos Estructura Esqueleto Superficie
James Garrett

Mapeo /
Herramientas Leyes de UX
Roadmap
Lo más relevante de la clase 2
CLASE N°#2

Glosario
Matriz de Tendencias: Es una herramienta Entrevistas: Empatizar con los usuarios y
que ordena visualmente las tendencias y las conocer su punto de vista. Pueden ser
fuerzas de cambio que están ocurriendo en entrevistas de preguntas:
un área. Se utiliza para sintetizar con el
objetivo de definir direcciones e intentar 1. Cerradas
detectar oportunidades en el rubro. Se trata 2. Abiertas
de rellenar una matriz según lo anterior, lo
actual y lo que está emergiendo respecto a 3. Híbridas
las áreas o macrotendencias de personas,
tecnología, mercado, cultura y negocios que
Encuestas: Conocer asincrónicamente la voz
afecten al rubro sobre el que estamos
del usuario mediante formularios.
trabajando.
¡Vamos a la clase!
 Producto como Producto como
funcionalidad información

finalizado
concreto

» ¿Cómo se verá la interfaz de

5. SUPERFICIE DISEÑO VISUAL usuario y todo lo relacionado
a lo visual?

DISEÑO DE INTERFAZ DISEÑO DE NAVEGACIÓN » ¿Cómo se organizan los

4. ESQUELETO elementos en la pantalla
DISEÑO DE LA INFORMACIÓN (layout)?

» ¿Cuánto contenido va a
DISEÑO DE LA ARQUITECTURA DE LA tener? ¿Cómo voy a
3. ESTRUCTURA INTERACCIÓN INFORMACIÓN organizar/priorizar los
contenidos?

» ¿Sabemos qué vamos a

ESPECIFICACIONES REQUERIMIENTOS DE
2. ALCANCE FUNCIONALES CONTENIDO
construir? ¿Sabemos qué no
vamos a construir?

concepción
abstracto

» ¿Qué quieren los usuarios

NECESIDADES DEL USUARIO
obtener de este producto? »
1. ESTRATEGIA » ¿Qué quiere el cliente
OBJETIVOS DEL NEGOCIO obtener de este producto?
¿Por qué revisamos
las Heurísticas y leyes?
Aunque estemos trabajando en el rediseño de Las heurísticas (las de Nielsen o cualquier otro
un producto existente, este análisis suele ser usuario) nos permiten una revisión profunda del
una parte casi obligatoria en una auditoría UX. producto con el fin de perfeccionar su usabilidad,
conocer sus falencias, sus puntos fuertes que
debemos mantener y las soluciones de mejora.
Leyes de
UX
 Ley de Jakob

Umbral de
Ley de Fitt
Doherty

Leyes de UX
Ley de Hick Ley de Tesler

Ley de Miller Ley de Postel

Ley de Efecto
Regla de Pico
Regla del Efecto de Usabilidad
Final
Von Restorff Estética
Ley de Miller
“Se sugiere que las personas pueden recordar hasta 7
(+/- 2) elementos a la vez, por eso agrupamos elementos,
para reducir la carga cognitiva”.

Proviene de la psicología cognitiva, los límites de la

memoria a corto plazo de un ser humano son entre 5 y 9
elementos, por eso el 7 es el número ideal.

Cita de Psicología y Mente: Ley de Miller

Ejemplo: https://www.cryptokitties.co/
 Ley de Postel
“Sea liberal en lo que acepta y conservador en lo que envía”.

Implica empatizar, ser flexible y anticipar cualquier posible

acción que el usuario pueda realizar para planificar un
diseño resistente.

Fuente: https://lawsofux.com
Ejemplo: www.waze.com
Ejemplo Nike: mobbin.com
Regla del pico
final / Efecto de
Posición en Serie.
La posición de un elemento en una secuencia afecta a la
precisión de la memoria del usuario. El primer elemento
y el último son los más recordados en una lista.

Cita de Psicología y Mente: Ley de Miller

Ejemplo de
Instagram
y Slack
En este ejemplo se ve en la TabBar de
ambas que lo primero es la Home y lo
último el Perfil del Usuario.
Hay un aprendizaje del usuario a lo largo del
tiempo a partir del cual ya es costumbre
esa configuración de la TabBar.
Los elementos que están en el centro
pueden cambiar sin problema sin alterar la
usabilidad.
Ejemplo Ripio: https://www.ripio.com/ar/
Ejemplo Ripio: https://music.youtube.com/
Ejemplo Ripio: https://www.coderhouse.com/
Fuente: UX en Español
Ley de efecto de
usabilidad
estética
“Los usuarios a menudo perciben el diseño
estéticamente agradable como un diseño más utilizable”.

Fuente: https://lawsofux.com
Fuente: UX en Español
Ejemplo Ripio: https://www.ripio.com/ar/
Ejemplo Ripio: https://music.youtube.com/
Ejemplo Ripio: https://music.youtube.com/
Ejemplo Uber: mobbin.com
 Ley del efecto Von
Restorff
“Cuando hay varios objetos similares presentes, es más
probable que se recuerde el que difiere del resto”.

Esta ley es importante cada vez que se considere

contrastar o destacar algún elemento particular durante la
experiencia.

Fuente: https://lawsofux.com
Fuente: Sleeknote
Fuente: https://www.ripio.com/ar/
Fuente: https://music.youtube.com/
 Umbral Doherty

“La productividad aumenta cuando una computadora y sus

usuarios interactúan a un ritmo (<400 ms) que asegura que
ninguno tenga que esperar al otro”.

Si la espera es considerable, las animaciones y barras de

progreso ayudan a promover la tolerancia.

Fuente: https://lawsofux.com
La velocidad óptima para la animación de la interfaz está
entre 100 y 500 ms ⌚.
Fuente: https://www.coderhouse.com/
Fuente: https://www.uifrommars.com/
Fuente: https://music.youtube.com/
Ley de Jakob

“Las personas pasan casi todo el tiempo en otras páginas

y aplicaciones. Esto significa que los usuarios prefieren
que su sitio funcione de la misma manera que todos los
demás sitios que ya conocen”.

Cita del NNG: Ley de Jakob

Por ejemplo: El e-commerce tiende a tener Si vas a diseñar un e-commerce, lo
una disposición de este estilo: lógico sería que plantees esta
Imagen a izquierda y Nombre, precio, estructura, pues un potencial cliente
configuración y “Añadir al carrito” a la conoce este patrón de diseño y espera
derecha. algo así. ¡No lo hagas pensar!
Fuente: https://music.youtube.com/

Fuente: https://www.spotify.com/
Ley de Fitt

Fuente: https://discord.com/login

Ley de Hick

Fuente:https://www.47street.com.ar/
Ley de Fitt
El tiempo que le toma al usuario llegar a un objetivo
depende directamente de su distancia con él, pero tiene
relación inversa con el tamaño del objetivo.

Deben ser lo suficientemente grandes para que los

usuarios los seleccionen con precisión, tener un espacio
amplio entre ellos y colocarse en áreas de una interfaz
que permitan su fácil adquisición.

Fuente: https://lawsofux.com
 Ley de Hick
“El tiempo que se tarda en adoptar una decisión, aumenta a
medida que se incrementa el número de opciones”

El tiempo necesario para tomar una decisión es

directamente proporcional al número de opciones
disponibles, costando más elegir al aumentar estas.

Cita de IDA Chile: Ley de Hick

Ley de Tesler
“Para cualquier sistema existe una cierta cantidad de
complejidad que no se puede reducir”.

Es importante aquí el equilibrio entre la complejidad

inherente del sistema y el peligro de abstracción del
mismo a la hora de intentar simplificarlo.

Fuente: https://lawsofux.com
 ☕
Break
¡10 minutos y volvemos!
Heurísticas de
Jakob Nielsen
 Evaluación Heurística
La evaluación heurística es una técnica crucial
y muy útil a la hora de encontrar errores de
usabilidad, sobre todo en fases muy
tempranas de un proyecto de diseño.
No obstante, en ningún caso sustituye a las
evaluaciones de usabilidad con usuarios
reales.
Un breve repaso por las
heurísticas de Nielsen

¡Presta atención a la pregunta final para enriquecer tu rediseño!

 9. Ayudar a reconocer,
diagnosticar y
recuperarse de fallos
10. Ayuda y 8. Estética y diseño
documentación minimalista

Heurísticas de
1. Visibilidad del Nielsen
estado del sistema 7. Flexibilidad y
eficiencia de uso

2. Correspondencia 6. Favorecer el
entre el sistema y el reconocimiento
mundo real sobre el recuerdo
3. Control y
libertad para el 5. Prevención
4. Consistencia y
usuario de errores
estándares
Ley de Jakob

1. Visibilidad del
estado del
sistema
El sistema debe informar a los usuarios acerca de su
estado, dando una retroalimentación apropiada en un
tiempo razonable.
¿Qué debería generar cada acción u operación?

Ejemplo de Rappi

Fuente: Nielsen Norman Group

Fuente: https://music.youtube.com/
Ejemplo Waze: https://www.waze.com/
Fuente: https://www.uifrommars.com/
Fuente: https://www.47street.com.ar/
Ley de Jakob

2. Consistencia
entre el sistema
y el mundo real
El sistema debe utilizar el lenguaje de los usuarios,
con metáforas, palabras o frases que les sean
conocidas, en lugar de los términos que se utilizan
en el sistema. Ejemplo de Despegar
¿Sería correcto colocar preguntas que
acompañen al usuario a completar un formulario?

Fuente: Nielsen Norman Group

Fuente: https://interfaceingame.com/
Fuente Duolingo: https://mobbin.com/
Ley de Jakob

3. Control y
libertad para el
usuario
Los usuarios a menudo eligen las funciones del sistema
por error, y necesitan una "salida de emergencia"
claramente marcada.
¿El producto con el que estás trabajando cuenta con
esta funcionalidad?

Ejemplo de Wix

Fuente: Nielsen Norman Group

Fuente Duolingo: https://www.ripio.com/ar/

Fuente Spotiffy: https://mobbin.com/

Ley de Jakob

4. Consistencia y
estándares
El usuario debe seguir las normas y
convenciones de la plataforma sobre la que
está implementando el sistema, No tiene
que preguntarse qué es cada elemento,
tiene que reconocerlo.
¿Qué podría suceder si los íconos no son
consistentes?

Ejemplo de Mercado Libre

Fuente: Nielsen Norman Group

Fuente Linkedln: https://mobbin.com/
Fuente : www.airbnb.com.ar
Ley de Jakob

5. Prevención de
errores
Es más importante prevenir la aparición de errores, que
generar buenos mensajes de error. Hay que eliminar
acciones predispuestas al error o, en todo caso,
localizarlas y preguntar al usuario si está seguro de
realizarlas.
¿Ambas opciones son válidas?

Ejemplo de Google

Fuente: Nielsen Norman Group

Fuente Spotify: https://mobbin.com/
Fuente Spotify: https://auth.ripio.com/
Ley de Jakob

6. Favorecer el
reconocimiento
sobre la memoria
El sistema tiene que minimizar la información que el
usuario debe recordar, mostrándola a través de objetos,
acciones u opciones. El usuario no tiene por qué recordar
la información que recibió anteriormente.
¿Qué estrategias se les ocurren para lograrlo?

Ejemplo de Google

Fuente: Nielsen Norman Group

Fuente Spotify: https://www.airbnb.com.ar/
Ley de Jakob

7. Flexibilidad y
eficiencia de uso
Los aceleradores permiten aumentar la velocidad de
interacción para el usuario. El sistema debe permitir
personalizar acciones frecuentes, para acelerar su uso.
¿Qué atajos tienen las apps?

Ejemplo de teclado de Windows

Fuente: Nielsen Norman Group

Fuente: https://interfaceingame.com/
Ley de Jakob

8. Diálogos
estéticos y diseño
minimalista
La interfaz no debe contener información que no sea
relevante. Cada unidad adicional de información compite
con las unidades relevantes y disminuye su visibilidad
relativa.
¿Cuándo y cómo deberíamos usar íconos?

Ejemplo de Linkedin

Fuente: Nielsen Norman Group

Ejemplo: www.waze.com
Ley de Jakob

9. Reconocer,
diagnosticar y
recuperarse de
los errores
Los mensajes de error deben expresarse en un lenguaje
claro, indicar exactamente el problema y ser
constructivos.
¿A qué nos referimos con que sean constructivos?
Ejemplo de idaBlog

Fuente: Nielsen Norman Group

Fuente: https://discord.com/login
Ley de Jakob

10. Ayuda y
documentación
La documentación tiene que ser fácil de
encontrar, estar centrada en las tareas del
usuario, contar información acerca de las
etapas a realizar y no ser muy extensa.
¿Consideras que esta premisa se cumple en
el ejemplo de Airbnb?

Ejemplo de Airbnb

Fuente: Nielsen Norman Group

Fuente: www.nan-labs.com
 Análisis UX de un
producto o servicio
Duración: 40 minutos
 HANDS ON LAB

Acuerdos
Presencia Apertura al aprendizaje
✓ Participar y “estar” en la clase, que tu ✓ Siempre, pero siempre puedes seguir
alrededor no te distraiga aprendiendo. Compartir el
conocimiento es válido, la construcción
colaborativa es la propuesta.
Escucha activa
✓ Escuchar más allá de lo que la persona
está expresando directamente Todas las voces
✓ Escuchar a todos, todos podemos
reflexionar. Dejar el espacio para que
todos podamos participar.
¿Existen otras heurísticas
además de las de Nielsen?
Otras heurísticas útiles
Por supuesto que Jakob Nielsen no es el único autor que ha realizado este tipo de pautas, pero
sí es uno de los casos más completos y que más se utilizan en esta área.

● Otro ejemplo es el Checklist de Yusef Hassan Montero y Francisco J. Martín Fernández,

donde vemos ejemplos de análisis de sitios web generales y específicos.

● También podemos tomar las reglas de accesibilidad, las WCAG, como un grupo de
heurísticas enfocadas en la percepción y usabilidad del producto digital contemplando las
necesidades específicas de un variado grupo de usuarios.
 #CoderAlert
Encontrarás en el Workbook del curso una actividad para aplicar
todo lo aprendido hoy sobre Análisis de UX para tu Proyecto. ¡Será
fundamental al momento de realizar tu primera pre entrega en
clase Nº5!
¿Quieres saber más?
Te dejamos material
ampliado de la clase
 MATERIAL AMPLIADO

Recursos multimedia
Primeros pasos
✓ Primeros Pasos | Tony Beltramelli
✓ Primeros pasos | Taras Bakusevych
Leyes UX
✓ Leyes de UX | Página recopilatoria ‘oficial’
✓ Leyes de UX (posts) | Welcome to UX
✓ 10 leyes más importantes de UX | Eunoia Digital

Disponible en nuestro repositorio.

¿Preguntas?
 Resumen
de la clase hoy
✓ Conocimos las leyes básicas de UX.
✓ Identificamos y trabajamos con las heurísticas de
Jakob Nielsen.
✓ Aplicamos lo aprendido con una instancia práctica
colaborativa en clase.
Muchas gracias.
Encuesta
sobre esta clase
Por encuestas de Zoom

¡Terminamos la clase!

Cuéntanos qué temas te resultaron más complejos de

entender. Puedes elegir más de uno. Vamos a retomar
aquellos temas que resultaron de mayor dificultad en el
próximo AfterClass.