Subido porJorge Barahona Ch.
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Este documento resume la segunda sesión de un taller de UX y usabilidad. La sesión se centra en el diseño de interacción e interfaces, incluyendo mapas de clases, partituras de interacción, wireframes, diseño tipográfico y cromático, y diseño de interfaces de usuario. El objetivo es enseñar técnicas para crear experiencias digitales intuitivas y centradas en el usuario.
Más contenido relacionado
Similar a Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
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.
- 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
- 4. 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
- 5. 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.
- 7. Sesión Nº2 Mapas deClases Diseño de Interacción Partituras de Interacción Wireframes 2 Diseño tipográfico y cromático Diseño de Interfaces Dirección de Arte Fotográfico Diseño de Interfaces de Usuarios (UI)
- 8. Sesión Nº2 Mapas deClases Diseño de Interacción Partituras de Interacción Wireframes 2 Diseño tipográfico y cromático Diseño de Interfaces Dirección de Arte Fotográfico Diseño de Interfaces de Usuarios (UI)
- 10.
- 11.
- 12. Diseño de Interacción •¿Quées? •Mapas de Clases •Partituras de Interacción •Wireframes
- 13. ¿Qué es elDiseño de Interacción?
- 14. ¿Qué es elDiseñ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
- 15. ¿Qué es elDiseñ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
- 16. ¿Cómo conversa un sistemacomplejo con un ser humano?
- 17. Verbos ¿Cómo conversa un sistemacomplejo con un ser humano?
- 18. Verbos ¿Cómo conversa un sistemacomplejo con un Físicos y ser humano? digitales
- 19. Verbos ¿Cómo conversa un sistemacomplejo con un Físicos y ser humano? digitales También complejos
- 33. Principios de Diseño deInteracción ! ! Bruce Tognazzini asktog.com
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. Consistencia (niveles) 1. Interpretacióndel comportamiento del usuario. 2. Estructuras invisibles. 3. Estructuras visibles pequeñas. 4. Consistencia interna. 5. Consistencia con la plataforma.
- 43. Eficacia del usuario Buscala productividad del usuario, no del computador
- 44. Eficacia del usuario Manténocupado al usuario
- 45. Eficacia del usuario Manténocupado al usuario
- 46.
- 47. Mapas de Clases Nivel1 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 Definir 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
- 48. ter Team Blog (con categoríasde k, Ventas y Gestión) Condiciones API Mapas de Clases Home Getting Started, Login, Idioma Defi Ingreso a Clerk Ventas de reservas os de pago Gestión Hazte cliente Formulario de registro 1) OTAs 2) Channel Manager Wizard Planes
- 49. ter Team Blog (con categoríasde k, Ventas y Gestión) Condiciones API Mapas de Clases Home Getting Started, Login, Idioma Defi Ingreso a Clerk Ventas de reservas os de pago Gestión Hazte cliente Formulario de registro 1) OTAs 2) Channel Manager Wizard Planes
- 50. ter Team Blog (con categoríasde k, Ventas y Gestión) Condiciones API Mapas de Clases Home Getting Started, Login, Idioma Defi Ingreso a Clerk Ventas de reservas os de pago Gestión Hazte cliente Formulario de registro 1) OTAs 2) Channel Manager Wizard Planes
- 51. ter Team Blog (con categoríasde k, Ventas y Gestión) Condiciones API Mapas de Clases Home Getting Started, Login, Idioma Defi Ingreso a Clerk Ventas de reservas os de pago Gestión Hazte cliente Formulario de registro 1) OTAs 2) Channel Manager Wizard Planes
- 52.
- 53. Mapas de Clases Ai Id Login Login Númerode cédula Dígito verificador Clave Recuperar Clave Entrar
- 54. Mapas de Clases Ai Id Login Login Númerode cédula Dígito verificador Clave Recuperar Clave Entrar
- 55. Mapas de Clases Ai Id Login Login Númerode cédula Dígito verificador Clave Recuperar Clave Entrar
- 56. Partituras de interacción(Pi) • ¿Qué son las Pi? • ¿Para qué sirven? • ¿Qué soluciona? • ¿Cómo se usan?
- 57.
- 58. Partituras de interacción(Pi) • Acciones del usuario • Contacto directo • Proceso interno • Trabaja con sistema visual único y universal
- 59. Partituras de interacción(Pi) • Acciones del usuario • Contacto directo • Proceso interno • Trabaja con sistema visual único y universal
- 60. Partitura de Interacción(Pi) • Niveles • Páginas • Módulos de Interacción
- 61. Partitura de Interacción(Pi) • Niveles • Páginas • Módulos de Interacción
- 62.
- 63.
- 64.
- 65.
- 66.
- 73. Ventajas de hacerwireframe • 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
- 77. Características de unwireframe • 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
- 78.
- 79. Herramientas para hacerWFs • 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
- 80. Herramientas para hacerWFs • 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
- 81.
- 83.
- 84.
- 85.
- 86.
- 87. Principios de DierterRams https://vimeo.com/7917568 http://es.wikipedia.org/wiki/Dieter_Rams
- 88. Principios del buendiseñ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
- 89.
- 90. 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
- 91.
- 92. Diseño tipográfico • Lastipografí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
- 93.
- 96. Características • Tipografía ofuente • Cada fuente tiene estilos • Cada estilo un tamaño expresado en • Pixeles (px) • Unidades en em • Unidades de porcentaje
- 101.
- 102.
- 103. Colores y usabilidad www.mejorando.la Loremipsu Lorem ipsu
- 110. 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
- 115.
- 116. Diseño de InterfacesUI Framework • Componentes de interfaz • Patrones de interacción • Incluyen • Grilla • Componentes • Patrones
- 117. Diseño de InterfacesUI Framework • Componentes de interfaz • Patrones de interacción • Incluyen • Grilla • Componentes • Patrones
- 118. Grilla • Fundamental paramantener 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
- 119. Grilla • Fundamental paramantener 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
- 124.
- 125. Componentes • Son todoslos 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
- 126.
- 127.
- 128. Patrones de Interacción •Estilos de textos • Estilos de párrafos • Estilos de listas • Tablas • Formularios • Botones • Banner
- 129. Patrones de Interacción •Estilos de textos • Estilos de párrafos • Estilos de listas • Tablas • Formularios • Botones • Banner
- 130.
- 132.
- 134. ¿Preguntas, dudas, ideas, ejemplos,etc.? ¡Ahora!