Este documento trata sobre los principios del diseño de interfaces digitales. Resalta la importancia de que cada elemento tenga un propósito claro y que se explique su ubicación. También recomienda empezar con una cuadrícula y diseñar componentes consistentes para que las interacciones se aprendan fácilmente. Explica métodos como la Ley de Pareto, Cuantificación KLM-GOMS y Ley de Fitt para priorizar elementos y anticipar la usabilidad basándose en la relevancia, tiempo de tareas y distancias entre elementos. El objetivo final

1. Diseño de
Interfaces Digitales

2. “Cada decisión de sus diseños
necesita tener un propósito. Deberían
poder explicar por qué cada
elemento está donde está.”

3. • Principios, modelos y
cuantificación
• Diseñar con bases racionales
• Obtener algo que funciona de
acuerdo a lo esperado

4. Empezá con una
cuadrícula.

9. Example Layout GuidelinesConsetetur sadipscing
elitr, sed diam nonumy
eirmod tempor invidunt ut
labore et dolore magna
aliquyam erat, sed diam
voluptua. At vero eos et
accusam et justo duo
dolores et ea rebum.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.

10. Example Layout GuidelinesConsetetur sadipscing
elitr, sed diam nonumy
eirmod tempor invidunt ut
labore et dolore magna
aliquyam erat, sed diam
voluptua. At vero eos et
accusam et justo duo
dolores et ea rebum.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.

11. Diseña componentes

12. Que sean consistentes
Esto hace que las interacciones se aprenden una
vez. Los usuarios esperan que los elementos que se
ven iguales funcionen iguales.

15. Usa convenciones.
Adaptarse a las convenciones hace que el usuario
tenga menos carga cognitiva al realizar una tarea.

17. UI Stack

24. Principios, Modelos y
Cuantificación

25. Ley de Pareto (80/20)
Priorizar y anticipar por relevancia, menos pasos
de operación hace q sea menos costoso.

28. Cuantificación: KLM-GOMS

29. • Análisis y estimación de tiempo
necesario para realizar una tarea.
• Cada operación del usuario tiene
un costo.
• Preguntar no es gratis.

30. Nombre y apellido:
1.
2.
3.
4.
5.
6.
Nombre y apellido:
Nombre y apellido:
Gregory House
Cuantificación:
Estado Inicial: Mano en el mouse
1
2
3
3
4
4
5
6
Total
M
P
M
K
M
H
M
K18
Inicio de Tarea
Apuntar al primer campo
Inicio de Tarea
Click en el campo texto
Inicio de Tarea
Pasar al teclado
Pensar el dato
Tipear el dato
1,35
1,1
1,35
0,2
1,35
0,4
1,35
3,6
10,7

34. Ley de Fits

35. Es un modelo del movimiento humano, que
predice el tiempo necesario para moverse
rápidamente desde una posición inicial hasta
una zona destino final como una función de la
distancia hasta el objetivo y el tamaño de éste.

36. • Priorizar ubicación respecto a posición inicial
del cursor
• Evitar movimientos complejos
• Ampliar y distinguir áreas clickeables.
• Separar funciones
• Observar relación vertical:
• Alejar funciones destructivas de funciones
habituales.

42. “Las mejores prácticas de diseño de
interacción buscan reducir la
cantidad de pasos y la complejidad
cognitiva de las operaciones.”

44. Fin.