Descripción de los tipos de interfaces de acuerdo con Rogers, Preece y Sharp. Un ejercicio de calentamiento creativo para el HCI Design basado en el pensamiento de Bill Buxton (sobre el boceto como herramienta para la descripción de experiencias de uso). Videos sobre el trabajo realizado en instituciones como el MIT en su Media Lab y Design Lab y conferencias del Instituto de Diseño del IIT en Chicago.

1. Diseño de la Interacción
Humano-Computadora.
Tipos de interfaces.
Mtro. Omar Sosa Tzec.
Lic. en Diseño de Interacción.
Universidad Iberoamericana Campus Puebla.
http://www.tzek-design.com/blog

2. Principios en el diseño
de interfaces.

3. * Naturalidad.
* Consistencia.
* Relevancia.
* Soporte.
* Flexibilidad.
Human Computer Interaction.
Jenny Preece.
Addison Wesley, 1994.

4. Naturalidad.

5. http://es.wikipedia.org/wiki/ http://commons.wikimedia.org/wiki/
Archivo:Telefonodefichas.jpg File:Celular_samsung.jpg

13. Consistencia.

23. Relevancia.

26. Soporte.

27. ¿Dónde estoy?
¿Cómo llegué aquí?
¿Qué está pasando?
¿A dónde puedo ir después?
¿Qué puedo hacer?

28. Flexibilidad.

35. Paradigmas en
el diseño de interacción.

36. Dentro del diseño de interacción, un paradigma se refiere a un enfoque
particular que ha sido adoptado por la comunidad de investigadores y
diseñadores para realizar su trabajo, en términos de supuestos,
conceptos, valores y prácticas compartidas.
Interaction Design: beyond Human-Computer Interaction.
2nd Edition.
Helen Sharp, Yvonne Rogers and Jenny Preece.
Wiley, 2007.

37. El cómputo ubicuo es uno de los desarrollos que más influencia ha
tenido en el diseño de interfaces.
La idea de tener dispositivos tecnológicos o de cómputo en forma
ubicua fue introducida por Mark Weiser.
Su visión era de que llegaríamos en algún momento a diseñar y
desarrollar “Tecnología de Calma”.
El paradigma de diseño del Calm Technology parte del supuesto de que
el usuario puede lidiar con la interfaz realizando movimientos entre la
“periferia” y el “centro”. Las tecnologías de calma son las que
soportan este(a) movimiento/liberación cognitiva.
Interaction Design: beyond Human-Computer Interaction.
2nd Edition.
Helen Sharp, Yvonne Rogers and Jenny Preece.
Wiley, 2007.

38. http://en.wikipedia.org/wiki/Mark_Weiser
http://nano.xerox.com/weiser/calmtech/
calmtech.htm

39. Designing a user interface based on the calm technology paradigm and schematic visualization, and its evaluation from a communicability and
rhetoric standpoint. Omar Sosa Tzec, 2009. http://www.slideshare.net/Tzek/gui-design-by-schematic-visualization

40. Periphery
Center
Designing a user interface based on the calm technology paradigm and schematic visualization, and its evaluation from a communicability and
rhetoric standpoint. Omar Sosa Tzec, 2009. http://www.slideshare.net/Tzek/gui-design-by-schematic-visualization

41. Periphery
Center
Designing a user interface based on the calm technology paradigm and schematic visualization, and its evaluation from a communicability and
rhetoric standpoint. Omar Sosa Tzec, 2009. http://www.slideshare.net/Tzek/gui-design-by-schematic-visualization

42. http://ambient.media.mit.edu/projects.php?
action=details&id=26

43. Debido al cómputo ubicuo se han formulado preguntas que incluyen:
¿Cómo permitir a las personas acceder e interactuar con información en
sus trabajos, vida diaria y social, usando un conjunto de tecnologías?
¿Cómo diseñar experiencias de uso para la gente usando interfaces que
son parte del ambiente pero donde no hay aparatos de control obvios?
¿Cómo y en qué forma se puede proveer a la gente de información
relevante al contexto en tiempos y lugares apropiados mientras éstos se
está desplazando?
¿Cómo asegurar que la información que está siendo pasada vía
dispositivos de despliegue, aparatos y objetos, está segura y que
es confiable?
Interaction Design: beyond Human-Computer Interaction.
2nd Edition.
Helen Sharp, Yvonne Rogers and Jenny Preece.
Wiley, 2007.

44. Términos equivalentes son:
* Pervasive computing.
* Disappearing computer.
* Ambient intelligence.
Interaction Design: beyond Human-Computer Interaction.
2nd Edition.
Helen Sharp, Yvonne Rogers and Jenny Preece.
Wiley, 2007.

45. Tipos de interfaces.
Los 80’s.

46. 80’s.
* Comandos.
* GUI/WIMP.
Interaction Design: beyond Human-Computer Interaction.
2nd Edition.
Helen Sharp, Yvonne Rogers and Jenny Preece.
Wiley, 2007.

47. Línea de
Comandos.

52. ¿Cuáles son las ventajas?
¿Cuáles son las desventajas?

53. ¿Qué tan pesada podría decirse que es
la carga cognitiva?
¿Cómo influye el dispositivo de entrada?
¿Influye el dispositivo de salida? ¿Si es una
pantalla? ¿Si no lo es?

54. WIMP/GUI.

56. GUI.
Metáforas. Metonimias.

57. ¿Por qué son importantes las metáforas y
las metonimias en el diseño de interfaces
gráficas de usuario?

60. ¿Cuál sería el criterio para el diseño
de un menú?
¿Cuál es la relación entre la arquitectura
de información y el diseño de menúes?
¿Cómo etiquetar y cómo agrupar las
funciones del sistema?

63. ¿Cuál sería el criterio para el diseño
de un icono?

65. ¿Cómo está relacionada la iconicidad
con el diseño de íconos?
¿Cómo está relacionada la retórica visual
con el diseño de íconos?
¿Cómo está relacionada la narrativa visual
con el diseño de íconos?

68. manzana

69. Tipos de interfaces.
Los 90’s.

70. 90’s.
* Gráficas avanzadas (multimedia, realidad virtual, visualización de
información).
* Web.
* Voz.
* Pluma, gestos y toques.
* Aparato.
Human Computer Interaction.
Jenny Preece.
Addison Wesley, 1994.

71. Multimedia.

73. ¿Por qué preferir una interfaz multimedia?

74. ¿No sobrecargamos cognitivamente
al usuario?

75. ¿Qué influye en el diseño de información?

76. Realidad virtual y
ambientes virtuales.

77. http://es.wikipedia.org/wiki/Archivo:VR-Helm.jpg

78. ¿Existe una aplicación “casera” y
comercial para la realidad virtual?

79. Visualización de
Información.

80. c
http://www.caida.org/tools/visualization/walrus/gallery1/

81. http://www.nytimes.com//interactive/2009/07/31/business/20080801-metrics-graphic.html?hp

82. ¿Cómo influye la iconicidad?
¿Las leyes de Gestalt?
¿Qué perjudica a una visualización?

83. Web.

84. ¿Sólo la usabilidad cuenta?

87. La web como plataforma
para el desarrollo de
aplicaciones.
El cómputo en la nube
(cloud computing).

89. La web…
¿como herramienta?
¿como medio?
¿como repositorio?

92. ¿Cuál es el futuro de la web?

93. Voz.

94. Búsqueda por voz en Google. http://www.google.com/mobile/google-mobile-app/

95. ¿Cuáles son las ventajas de una
interfaz de voz con respecto a una
de línea de comandos o una GUI?

96. ¿La experiencia es más rica o
se empobrece?

97. ¿Cuál es el futuro de las
interfaces de voz?

98. Pluma, toques
y gestos.

99. Palm, una PDA. http://upload.wikimedia.org/wikipedia/commons/9/9b/PalmTX.jpg

100. http://www.flickr.com/photos/internationalces/4263821032/sizes/l/

101. El “undo” en el iPhone. http://gizmodo.com/

102. ¿Cómo relacionar el espacio
de funciones con el espacio
de “gestos” disponibles?

103. ¿Cómo afectaría la redundancia
de los mismos gestos entre
diferentes dispositivos con este
mismo tipo de interfaz?

104. Aparatos
(electrodomésticos).

105. http://www.mcq.org/code/en/documents/document-31.html

106. http://www.mabe.com.mx/ http://www.easy.com.mx/

107. http://www.hardwarezone.com/articles/
print.php?cid=3&id=1955

108. ¿Es un análisis de tareas suficiente
para determinar la funcionalidad de
un electrodoméstico?

109. ¿Cuál es el papel del design research
en la innovación de interfaces para
electrodomésticos del futuro?

110. Tipos de interfaces.
Los 00’s.

111. 00’s.
* Móviles.
* Multimodales.
* Compartidas.
* Tangibles.
* Realidad aumentada.
* Utilizable.
* Robótica.
Human Computer Interaction.
Jenny Preece.
Addison Wesley, 1994.

112. Móviles.

113. http://www.flickr.com/photos/
internationalces/4263074505/sizes/l/

114. http://www.hardwarezone.com/articles/
print.php?cid=3&id=1955

115. http://na.blackberry.com

116. http://www.palm.com/us/products/phones/
preplus/index.html

118. Los dispositivos móviles
y el futuro del cómputo ubicuo.

121. Multimodales.

123. Los dispositivos con interfaces
multimodales y el futuro del
cómputo ubicuo.

124. http://gizmodo.com

125. Compartidas.

126. http://fluid.media.mit.edu/
projects.php?
action=details&id=71

127. http://www.flickr.com/photos/
internationalces/3181195675/sizes/l/

128. ¿Dónde se pueden explotar
las interfaces de trabajo colaborativo?
¿Dónde no es conveniente?

129. ¿Cuál es la mayor dificultad
que se podría tener al trabajar
con este tipo de interfaces?

130. La convergencia entre los dispositivos con
interfaces para trabajo colaborativo y los
dispositivos móviles multimodales…
¿Qué pasará?

131. Tangible.

132. David Merrill - Siftables http://blog.ted.com/DavidMerrill_interview.jpg

133. http://fluid.media.mit.edu/projects.php?action=details&id=41

134. http://fluid.media.mit.edu/
projects.php?
action=details&id=53

135. http://www.pranavmistry.com/projects/quickies/

136. ¿Por qué es importante desarrollar
investigación en cómputo tangible?

137. ¿Qué se necesita para que un usuario
se apto para manejar este tipo de interfaces?
¿Qué papel juega el design research?

138. Realidad aumentada.

139. http://www.pranavmistry.com/
projects/sixthsense/

140. Utilizable.

141. http://en.wikipedia.org/wiki/Wearable_computer

142. ¿Por qué seguir investigando en
el cómputo utilizable como vestimenta?

143. Robótica.

144. http://www.flickr.com/photos/internationalces/
3186080127/

145. ¿Por qué seguir investigando
en robótica?
¿Qué ventajas y áreas de oportunidad
existen que no se dan en los demás
tipos de interfaces?

146. Ejercicio 1.
La idea de este ejercicio es bocetar en 60 segundos
alguna idea de diseño de interacción que se te venga a la
mente para cada una de las palabras.
Ojo, si la palabra se repite, no debes continuar con la idea
anterior sino plantear una nueva idea.
Para cada boceto, debes poner a un lado la palabra
asociada para recordar sobre qué trata dicho boceto.

147. Venta de café.

148. Predial.

149. Refrigerador.

150. Caducidad.

151. Repostería.

152. Mascota.

153. Fiesta.

154. Ilustración.

155. Café.

156. Despensa.

157. Caducidad.

158. Pago de tarjeta de crédito.

159. Oficio.

160. Préstamo de libro.

161. Ubicación de material en biblioteca.

162. Ubicación de material en biblioteca.

163. Préstamo de libro.

164. Salud.

165. Fiesta.

166. Caducidad.

167. Fiesta.

168. Salud.

169. Show de televisión.

170. Toma de medicamento.

171. Plantas.

172. Venta de café.

173. Repostería.

174. Fiesta.

175. Ubicación de material en biblioteca.

176. Plantas.

177. Diálogo.

178. Estudio/Aprendizaje.

179. Diálogo.

180. Circulación/Tráfico/Peatones.

181. Fiesta.

182. Comida/Preparación.

183. Refrigerador.

184. Compras.

185. Oficio.

186. Comida/Preparación.

187. Diálogo.

188. Estudio/Aprendizaje.

189. Predial.

190. Comida/Preparación.

191. Ejercicio 1 (cont).
Expon ante tus compañeros las ideas más relevantes que
tuviste durante el proceso de bocetaje, las dificultades
con las que te encontraste y por qué tus ideas resultarían
innovadoras para su contexto de uso.

192. Algunos videos para checar:
“A day at MIT with Near-Field Communication”.
http://www.vimeo.com/2028724
“The Cloud”.
http://www.vimeo.com/1199539
“Green Wheel - Scenario 7: Cultural trip”.
http://www.vimeo.com/4171214
“Connected Urban Development”.
http://www.vimeo.com/6145800
“New Media Medicine”.
http://www.vimeo.com/4400829

193. Tarea 1.
Checa uno de los siguientes videos y realiza una
presentación de 20 minutos que resuma los puntos
importantes de la charla y tu conclusión personal sobre la
relación del tema con el diseño de interacción.
“Bill Buxton on sketching experiences”.
http://www.vimeo.com/5189134
“Luis Arnal: Field Stories from Latin America”.
http://www.vimeo.com/9217883
“Jon Kolko on Predicting and Avoiding the
Commoditization of Design Research”.
http://www.vimeo.com/8347509

194. Tarea 2.
* Piensa en las personas que ahora tienen 40 años en
promedio.
* Imagina el futuro entre los diferentes tipos de interfaces.
* Reflexiona en cómo la alfabetización tecnológica e
informática de estos usuarios quizá no se equipare al
desarrollo tecnológico en el futuro. Quizá en 30 años.
* Detecta un problema que encuentres con personas
alrededor de 70 años: visitando un parque, platicando con
un familiar, estando en un restaurant, en el cine, etc.

195. * Toma fotografías del lugar, lo que hay en ese lugar y las
personas.
* Cuando detectes el problema que quieras atacar, diseña
una solución futurista.
* Realiza un storyboard (limpio y legible) que narre cómo
la gente que en un futuro tendrá cerca de 70 años puede
resolver el problema que detectas en el presente con tu
propuesta de diseño.
* Traer el storyboard en papel y hacer un post donde
expliques el problema, pongas las fotos, el storyboard y
expliques cuál es tu propuesta de diseño de interfaz.

196. Gracias.
* Presentación con fines didácticos sin lucro.
Imágenes y textos son propiedad de sus autores.
* Esta presentación tiene contenido meramente
ilustrativo y no debe abusarse de la información
personal aquí mostrada.