Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces

1. Taller de UX & Usabilidad Sesión 2/3 Diseño de Interacción e Interfaces ! ! ! ! 23 de noviembre de 2013 Mejorando.la

2. Resumen Sesión Nº1

3. Resumen Sesión Nº1 Estrategia Investigación Arquitectura ! ! ! •Brief • Usabilidad • Historia • Comportamiento de las Personas • Indexación de Contenidos •Contrabrief •Propuesta Comercial •Debrief •Benchmark •Brief final • Personas & escenarios • Etnografía • Taxonomía • Card Sorting • Mapas de • Conversaciones Navegación guiadas

6. Sesión Nº2

7. Sesión Nº2 Mapas de Clases Diseño de Interacción Partituras de Interacción Wireframes 2 Diseño tipográﬁco y cromático Diseño de Interfaces Dirección de Arte Fotográﬁco Diseño de Interfaces de Usuarios (UI)

8. Sesión Nº2 Mapas de Clases Diseño de Interacción Partituras de Interacción Wireframes 2 Diseño tipográﬁco y cromático Diseño de Interfaces Dirección de Arte Fotográﬁco Diseño de Interfaces de Usuarios (UI)

9. Diseño de Interacción

10. Diseño de Interacción

11. Diseño de Interacción •¿Qué es? •Mapas de Clases •Partituras de Interacción •Wireframes

12. ¿Qué es el Diseño de Interacción?

13. ¿Qué es el Diseño de Interacción? •Se ocupa de las experiencias interactivas •Servicios •Productos •Actos vivos •Es diseñar la manera de hacer formar parte a los usuarios •No son meros espectadores

14. ¿Qué es el Diseño de Interacción? •Se ocupa de las experiencias interactivas •Servicios •Productos •Actos vivos •Es diseñar la manera de hacer formar parte a los usuarios •No son meros espectadores • Estética • Función • Mediación entre personas y servicios

15. ¿Cómo conversa un sistema complejo con un ser humano?

16. Verbos ¿Cómo conversa un sistema complejo con un ser humano?

17. Verbos ¿Cómo conversa un sistema complejo con un Físicos y ser humano? digitales

18. Verbos ¿Cómo conversa un sistema complejo con un Físicos y ser humano? digitales También complejos

19. Principios de Diseño de Interacción ! ! Bruce Tognazzini asktog.com

20. Anticipación

21. Anticipación

22. Anticipación

23. Anticipación

24. Autonomía

25. Autonomía

26. Daltonismo

27. Daltonismo

28. Consistencia (niveles) 1. Interpretación del comportamiento del usuario. 2. Estructuras invisibles. 3. Estructuras visibles pequeñas. 4. Consistencia interna. 5. Consistencia con la plataforma.

29. Eﬁcacia del usuario Busca la productividad del usuario, no del computador

30. Eﬁcacia del usuario Mantén ocupado al usuario

31. Eﬁcacia del usuario Mantén ocupado al usuario

32. Mapas de Clases

33. Mapas de Clases Nivel 1 Footer A) Team B) Blog (con categorías de Mark, Ventas y Gestión) D) Condiciones E) API Home Getting Started, Login, Idioma Nivel 2 Deﬁnir Orden Ingreso a Clerk Marketing Ventas Gestión Hazte cliente Nivel 3 Planes Comunidad Redes Sociales Skype Encuentros Hoteleros Contáctanos Formulario de registro 1) Hotel website 2) Template 3) Diseño responsive 4) Tripconnect 1) Motor de reservas 2) Medios de pago 1) OTAs 2) Channel Manager Wizard

34. ter Team Blog (con categorías de k, Ventas y Gestión) Condiciones API Mapas de Clases Home Getting Started, Login, Idioma Deﬁ Ingreso a Clerk Ventas de reservas os de pago Gestión Hazte cliente Formulario de registro 1) OTAs 2) Channel Manager Wizard Planes

38. Mapas de Clases

39. Mapas de Clases Ai Id Login Login Número de cédula Dígito veriﬁcador Clave Recuperar Clave Entrar

42. Partituras de interacción (Pi) • ¿Qué son las Pi? • ¿Para qué sirven? • ¿Qué soluciona? • ¿Cómo se usan?

43. Partituras de interacción (Pi)

44. Partituras de interacción (Pi) • Acciones del usuario • Contacto directo • Proceso interno • Trabaja con sistema visual único y universal

45. Partituras de interacción (Pi) • Acciones del usuario • Contacto directo • Proceso interno • Trabaja con sistema visual único y universal

46. Partitura de Interacción (Pi) • Niveles • Páginas • Módulos de Interacción

47. Partitura de Interacción (Pi) • Niveles • Páginas • Módulos de Interacción

48. http://wiki.ead.pucv.cl/index.php/Partituras_de_Interacción

49. Wireframes

50. Wireframes

51. Wireframes

52. Wireframes

53. Ventajas de hacer wireframe • Pueden ser dibujos rápidos y concretos • No es necesario un software o algo especial • Permiten diseñar lo esencial obviando lo accesorio • Se pueden hacer pruebas de usabilidad • A TI empieza hacerle sentido todo • El cliente participa en su elaboración (!) • Permite discutir e iterar en torno al diseño

54. Características de un wireframe • Simples y directos (Cajas y líneas) • Cada pantalla está representada por un wireframe • Se puede adicionar explicaciones laterales • Se usan para cualquier interfaz digital (web, móviles, app, etc.) • Se hacen siempre en escala de grises (nunca color!) • Todos los elementos se representan esquemáticamente • Se usa sólo una familia tipográfica

55. Herramientas para hacer WFs

56. Herramientas para hacer WFs • Lápiz & papel • Omnigraffle • Mocking Bird https://gomockingbird.com • Moqups https://moqups.com • UX Pin http://uxpin.com • eZine de wireframes: http://wireframes.linowski.ca

57. Herramientas para hacer WFs • Lápiz & papel • Omnigraffle • Mocking Bird https://gomockingbird.com • Moqups https://moqups.com • UX Pin http://uxpin.com • eZine de wireframes: http://wireframes.linowski.ca

58. Mobile first https://vimeo.com/38187066

59. Diseño de Interfaces

60. Interfaces • http://www.jbarahona.com/la-interfaz-es-el-negocio/

63. Principios de Dierter Rams https://vimeo.com/7917568 http://es.wikipedia.org/wiki/Dieter_Rams

64. Principios del buen diseño • Innovador • Hace útil a un producto • Es estético • Ayuda a entender un producto • No molesta • Es honesto • Es duradero • Es minucioso hasta el último detalle • Se preocupa por el medio ambiente • Es tan poco diseño como sea posible

65. User Interfaces (UI)

66. User Interfaces (UI) • GUI (Graphics User Interface) • Es el lado emocional del sistema • Es la capa final (o inicial) de relación del sistema con los usuarios • Comunica, da énfasis e instrucciones al usuario a través de la propia forma (en diseño industrial) y las imágenes que se apropian de esa forma (color, tonos, tipografías, imágenes, íconos…) • Todos inter-relacionados a partir de sus tamaños y énfasis

67. Semántica Contenido Presentación HTML CSS

68. Diseño tipográﬁco • Las tipografías tienen significado y sentido • Dan el carácter y adjetivo a un sistema • Diseñarlas permite jerarquizar y distribuir en capas la lectura del contenido • Fuentes como un objeto asociado al diseño • Está en las CSS • Webfonts

69. Sin Serif Con Serif Aa Aa

70. Características • Tipografía o fuente • Cada fuente tiene estilos • Cada estilo un tamaño expresado en • Pixeles (px) • Unidades en em • Unidades de porcentaje

71. Diseño cromático

72. RGB

73. Colores y usabilidad www.mejorando.la Lorem ipsu Lorem ipsu

74. Dirección de Arte • Diseñar la fotografía • Determinar qué tipo y cómo será • Aspectos a definir • Cromática y ambiente • Uso, cómo se verá • Directrices de profundidad de campo • Directrices de escena

75. Diseño de Interfaces UI

76. Diseño de Interfaces UI Framework • Componentes de interfaz • Patrones de interacción • Incluyen • Grilla • Componentes • Patrones

77. Diseño de Interfaces UI Framework • Componentes de interfaz • Patrones de interacción • Incluyen • Grilla • Componentes • Patrones

78. Grilla • Fundamental para mantener la coherencia del diseño • Permite diseñar muy rápido en responsive • Se lleva desde el papel a la pantalla manteniendo criterios http://960.gs

79. Grilla • Fundamental para mantener la coherencia del diseño • Permite diseñar muy rápido en responsive • Se lleva desde el papel a la pantalla manteniendo criterios http://960.gs

80. Componentes

81. Componentes • Son todos los elementos básicos de interfaz que actuarán en el diseño del sistema o servicio • Están identificados como código de CSS y sus clases • Imágenes como íconos deben estar en código

82. Componentes

83. Componentes

84. Patrones de Interacción • Estilos de textos • Estilos de párrafos • Estilos de listas • Tablas • Formularios • Botones • Banner

85. Patrones de Interacción • Estilos de textos • Estilos de párrafos • Estilos de listas • Tablas • Formularios • Botones • Banner

86. Resumen Taller UX

87. Próxima Sesión Nº3 “Usabilidad”

88. ¿Preguntas, dudas, ideas, ejemplos, etc.? ¡Ahora!

Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces

You are reading a preview.

Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces

More Related Content

Viewers also liked

Similar to Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces

More from Jorge Barahona Ch.

Featured

Related Books

Related Audiobooks