Sesión Nº2 Diseño de Interacción e Interfaces en Mejorando.la

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

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. 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á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 de Clases
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. Diseño de Interacción

11. Diseño de Interacción

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

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

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

15. ¿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

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

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

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

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

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

34. Anticipación

35. Anticipación

36. Anticipación

37. Anticipación

38. Autonomía

39. Autonomía

40. Daltonismo

41. Daltonismo

42. 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.

43. Eficacia del usuario
Busca la productividad del usuario, no del computador

44. Eficacia del usuario
Mantén ocupado al usuario

45. Eficacia del usuario
Mantén ocupado al usuario

46. Mapas de Clases

47. 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
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ías de
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ías de
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ías de
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ías de
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. Mapas de Clases

53. Mapas de Clases
Ai
Id
Login
Login
Número de cédula
Dígito verificador
Clave
Recuperar Clave
Entrar

54. Mapas de Clases
Ai
Id
Login
Login
Número de cédula
Dígito verificador
Clave
Recuperar Clave
Entrar

55. Mapas de Clases
Ai
Id
Login
Login
Número de 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. Partituras de interacción (Pi)

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. http://wiki.ead.pucv.cl/index.php/Partituras_de_Interacción

63. Wireframes

64. Wireframes

65. Wireframes

66. Wireframes

73. 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

77. 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

78. Herramientas para hacer WFs

79. 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

80. 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

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

83. Diseño de Interfaces

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

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

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

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

88. 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

89. User Interfaces (UI)

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. Semántica
Contenido
Presentación
HTML
CSS

92. Diseño tipográfico
• 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

93. Sin Serif
Con Serif
Aa Aa

96. 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

101. Diseño cromático

102. RGB

103. Colores y usabilidad
www.mejorando.la
Lorem ipsu
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. Diseño de Interfaces UI

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

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

118. 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

119. 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

124. Componentes

125. 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

126. Componentes

127. Componentes

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. Resumen Taller UX

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

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