Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Diseño de
Interfaces Digitales
“Cada decisión de sus diseños
necesita tener un propósito. Deberían
poder explicar por qué cada
elemento está donde está.”
• Principios, modelos y
cuantificación
• Diseñar con bases racionales
• Obtener algo que funciona de
acuerdo a lo esperado
Empezá con una
cuadrícula.
Example Layout GuidelinesConsetetur sadipscing
elitr, sed diam nonumy
eirmod tempor invidunt ut
labore et dolore magna
ali...
Example Layout GuidelinesConsetetur sadipscing
elitr, sed diam nonumy
eirmod tempor invidunt ut
labore et dolore magna
ali...
Diseña componentes
Que sean consistentes
Esto hace que las interacciones se aprenden una
vez. Los usuarios esperan que los elementos que se
v...
Usa convenciones.
Adaptarse a las convenciones hace que el usuario
tenga menos carga cognitiva al realizar una tarea.
UI Stack
Principios, Modelos y
Cuantificación
Ley de Pareto (80/20)
Priorizar y anticipar por relevancia, menos pasos
de operación hace q sea menos costoso.
Cuantificación: KLM-GOMS
• Análisis y estimación de tiempo
necesario para realizar una tarea.
• Cada operación del usuario tiene
un costo.
• Pregun...
Nombre y apellido:
1.
2.
3.
4.
5.
6.
Nombre y apellido:
Nombre y apellido:
Gregory House
Cuantificación:
Estado Inicial: Ma...
Ley de Fits
Es un modelo del movimiento humano, que
predice el tiempo necesario para moverse
rápidamente desde una posición inicial ha...
• Priorizar ubicación respecto a posición inicial
del cursor
• Evitar movimientos complejos
• Ampliar y distinguir áreas c...
“Las mejores prácticas de diseño de
interacción buscan reducir la
cantidad de pasos y la complejidad
cognitiva de las oper...
Fin.
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Diseño de interfaces digitales
Nächste SlideShare
Wird geladen in …5
×

Diseño de interfaces digitales

262 Aufrufe

Veröffentlicht am

Consejos para el diseño de interfaces digitales centradas en el usuario.

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Diseño de interfaces digitales

  1. 1. Diseño de Interfaces Digitales
  2. 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. 3. • Principios, modelos y cuantificación • Diseñar con bases racionales • Obtener algo que funciona de acuerdo a lo esperado
  4. 4. Empezá con una cuadrícula.
  5. 5. 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.
  6. 6. 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.
  7. 7. Diseña componentes
  8. 8. Que sean consistentes Esto hace que las interacciones se aprenden una vez. Los usuarios esperan que los elementos que se ven iguales funcionen iguales.
  9. 9. Usa convenciones. Adaptarse a las convenciones hace que el usuario tenga menos carga cognitiva al realizar una tarea.
  10. 10. UI Stack
  11. 11. Principios, Modelos y Cuantificación
  12. 12. Ley de Pareto (80/20) Priorizar y anticipar por relevancia, menos pasos de operación hace q sea menos costoso.
  13. 13. Cuantificación: KLM-GOMS
  14. 14. • Análisis y estimación de tiempo necesario para realizar una tarea. • Cada operación del usuario tiene un costo. • Preguntar no es gratis.
  15. 15. 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
  16. 16. Ley de Fits
  17. 17. 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.
  18. 18. • 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.
  19. 19. “Las mejores prácticas de diseño de interacción buscan reducir la cantidad de pasos y la complejidad cognitiva de las operaciones.”
  20. 20. Fin.

×