Patrones de diseño de interacción de interfaces móviles

1. 1 Diseño de interfaz móvil

2. -‐  ¿Por qué móviles? -‐  ¿Qué es un móvil? -‐  Estrategias -‐  Paradigma móvil emergente -‐  Buenas prác>cas 2 Diseño de interfaz móvil

3. ¿Por qué móviles?

4. assetDNA 4

5. Hercampus 5

6. Google 6

7. GeJy Images 7 25%de los que >enen un móvil entre 18-‐44 años dicen “no puedo recordar la úl>ma vez que no tenía mi teléfono cerca”

8. Los usuarios admiten que usan el móvil en el baño 11Mark. Octubre 2011. Usuarios EEUU. 75% 8

9. Luke Wroblewski 9

10. Investor._.com 10

11. Ingresos por móvil Luke Wroblewski 11

12. comScore – Market Realist 12

13. Dynatrace 13

14. de usuarios pasa más >empo con tabletas que con ordenadores. Google AdMob. Marzo 2011. Usuarios EEUU. Usuarios sólo desde móviles 43% 14

15. 28% said that the tablet is their primary computer Usuarios sólo desde móviles Google 15

16. Usuarios sólo desde móviles “A mobile device is the internet for many people.” —Susannah Fox, Pew Research Center

17. Ventas globales Luke Wroblewski 17

19. REUTERS/Kimimasa Mayama 2005 19

20. AP 2013 20

21. ° ° ° ° ° El País 21

22. ¿Qué es un móvil?

23. Los disposiAvos

25. 25 Luke Wroblewski

27. ¿Tableta? 27

28. ¿PortáAl…? 28

29. ¿…? 29

30. ¿… o tableta? 30

31. ¿PortáAles? 31 Luke Wroblewski

32. ¿…? Luke Wroblewski 32

33. 33

34. 34

35. Luke Wroblewski 35 •  Diseñar para multidispositivos! •  Favorecer el continuum de pantallas! •  Optimizar para interacción táctil! •  Permitir el cursor & teclado!

36. Las personas

37. Foto de ﬂickr/Clive Fint “Mobile refers to the user, and not the device or the applica>on”. Barbara Ballard 37

38. Móviles •  Personal •  Communica>ve •  Handheld •  Wakable •  The carry principle Barbara Ballard 38

39. The carry principle 39 Barbara Ballard Implicaciones en el disposi>vo: •  Dimensiones –  Pantalla pequeña –  Teclado pequeño (si hay) •  Limitaciones ergonómicas… •  Autonomía –  Uso de batería •  Interrup>bilidad •  Priorización técnica de poco consumo –  CPUs poco potentes »  Aplicaciones lentas… •  Comunicación inalámbrica

40. Restricciones

41. Tamaño de pantallas 41

42. 42 19” 3,5”

43. Velocidad de conexión •  Velocidades más lentas 43

44. GRPS EDGE 3G ADSL Velocidad inmediato 7 segundos medio minuto GPRS 2 minutos UMTS 44

45. Cobertura •  Conec>vidad limitada/intermitente Cobertura Vodafone 2G 3G 45 •  Descargar sólo lo necesario: focalizarse en lo que solicita el usuario! •  Evitar descargar elementos o imágenes meramente decorativas! •  Optimizar el peso de los archivos ! Vodafone. Marzo 2014

46. Cómo lo usamos

47. “Unlike the sta>c and predictable PC context, the mobile context is a lot like life. It’s unpredictable, ambiguous . . . it’s everywhere”. Rachel Hinman 47

48. 48TraderGroup Signal

49. §  En movimiento §  Suscep>bles a distracciones e interrupciones §  Disponibles 49 Alexis Polegato

50. §  En movimiento §  Suscep>bles a distracciones e interrupciones §  Disponibles §  Sociables 50 Alexis Polegato •  Ofrecer claridad y foco! •  Focalizarse en el contenido sobre la navegación! •  Focalizarse en las tareas principales (1 por pantalla)! •  Conocer realmente lo más importante (conocer el negocio y a tus usuarios)! •  Autoguardar! •  Multitarea! •  Facilitar retomar la tarea (en el mismo dispositivo, en otro...)!

51. 51 ShuJerstock Móvil no es esto

52. 52 Google

53. Las tabletas se usan en el sofá y en la cama 53 Google

54. 54 Google

55. Preferencia de dispositivo a lo largo del día 55

56. Cuándo usamos el móvil Luke Wroblewski 56

57. 57 Adobe The State of Mobile Benchmark -‐ Q2 2013

58. “ 58 Google

59. AcAtud móvil 59

60. Estrategias

61. 61 Brad Frost

62. 62 Brad Frost

63. 63 Brad Frost

65. 65

66. Aproximaciones disponibles •  Aplicaciones na>vas •  Aplicaciones híbridas •  Si>os web móviles / aplicaciones web 66 •  Chris>an Karasiewicz

67. Aplicaciones naAvas •  Se descargan (desde el store) y residen en el disposi>vo. •  Son especíﬁcas de la plataforma y sistema opera>vo (ej: iOS o Android) •  Construidas con el lenguaje de la plataforma SDK •  Tienen acceso y usan los sensores del disposi>vo (GPS, acelerómetro, cámara, etc.) y a los componentes del SO, como los elementos UI (botones, sliders, pestañas y otros controles), patrones de interacción (gestos, transiciones) y caracterís>cas principales (lista de contactos, logs de llamadas). •  Están integradas en el sistema de no>ﬁcaciones 67Chris>an Karasiewicz

68. SiAos web móviles / aplicaciones web •  Corren en el navegador web •  Escritas en HTML 5, con hojas de es>lo CSS3 y javascript •  Las app web parecen aplicaciones na>vas pero no se implementan como tal. Son efec>vamente webs. •  Pueden incorporar gestos y transiciones ( sólo los que HTML5 soporta) •  No >enen la calidad de experiencia de las na>vas (en rendimiento, ﬂuidez, gestos naturales, etc.) •  Ciertas caracterís>cas del SO na>vo, como el sistema de no>ﬁcaciones, algunos sensores y gestos avanzados, no están todavía disponibles 68 Chris>an Karasiewicz

69. Aplicaciones híbridas •  Son una combinación de apps na>vas y web •  Son esencialmente aplicaciones HTML5 empaquetadas en contenedores de na>vas •  Residen en el disposi>vo •  Se instalan desde el store •  El propósito es reunir lo mejor de los dos mundos: –  Tener un código único para todas las plataformas –  Tener acceso a las capacidades del disposi>vo, como el acelerómetro, GPS, cámara, etc. 69Chris>an Karasiewicz

70. 70 ¡Depende! •  Producto! •  Negocio! •  Usuarios! •  Capacidad técnica y recursos disponibles! •  Tiempo disponible! ¿Cuál? Chris>an Karasiewicz

71. "Deﬁne a problem. Then solve that problem and decide on what channels make sense to carry out the solu>on". — Brad Frost 71

72. Aplicaciones naAvas 72

73. 73

74. 74

75. 75 2.2 (0.5%) 2.3.3 -‐2.3.7 (9.1%) 4.0.3 -‐4.0.4 (7.8%) 4.1.x -‐4.3 (48.7%) 4.4 (33.9%)

76. 76 An OpenSignal Report August 2014

77. Seguir las Guías de esAlo •  Especialmente en áreas UX principales como –  Navegación –  Controles básicos (campos de texto, botones, pestañas, desplegables…) –  Acciones principales (compar>r…) –  Gestos (aunque está más abierto) •  Son “normas”, recomendaciones y consideraciones generales de diseño. •  Son guías (en el sen>do de “dirigir” o “encaminar”), no mandamientos 77

78. Android hJp://developer.android.com/design/index.html 78

79. iOS hJp://developer.apple.com/library/ios/#documenta>on/userexperience/conceptual/mobilehig/Introduc>on/Introduc>on.html 79

80. Convergencia de funcionalidades y diseño, diferencias de ﬁlosoVa 80

81. Hardware 81

82. •  Home 82

83. •  Sin botones •  Vía so}ware: –  Back –  Home –  Recents 83

84. Estructura básica 84

85. Estructura 85 Layout popularizado por iOS Barra de estado (de sistema) Título de pantalla y navegación secundaria (+ acciones) Contenido/navegación principal Pestañas de navegación

86. Estructura 86 Layout popularizado por iOS Barra de estado (de sistema) Título de pantalla y navegación secundaria (+ acciones) Contenido/navegación principal Acciones

87. 1.  Barra de acciones principales 2.  Control de vistas 3.  Contenido principal 4.  Barra de acciones “split” 87

88. 88

89. 89

90. Distribución de acciones 90

91. 91

92. AcAon bar 1.  Icono de aplicación (con o sin la aﬀordance “up”) 2.  Control de vistas 3.  Botones de acción 4.  “Desbordamiento” de acciones (ac>on overﬂow) 92

93. Back 94

94. Up vs back 96

95. 97

96. SiAos web móviles 98

97. 99

98. Webs opAmizadas para móvil 100 Jakob Nielsen

99. Theresa Neil 101

100. Theresa Neil 102

101. 103

102. Webs opAmizadas para móvil •  Si>o web op>mizado para móviles separado •  Redirigir los usuarios que visiten el si>o web al si>o web móvil •  Enlazar si>o web móvil y si>o web complete entre ellos •  Y mejor… hacer una aplicación. 104

103. CríAca “Mobile is not less” — Josh Clark 105

104. 106

105. Es importante… •  No confundir contexto con intención •  No asumir más de la cuenta sobre el tamaño de la pantalla –  No implica necesitar menos información. –  No implica necesitar menos funcionalidades. 107

106. Contra-‐estrategias •  Enfa>zar, no eliminar •  U>lizar “progressive enhancement” (mejora progresiva) •  U>lizar técnicas adapta>vas, como responsive web design 108

107. 109

108. Mobile ﬁrst 110 Luke Wroblewski

109. Empezar pequeño y mejorar hacia arriba •  Empezar por defecto con lo principal •  Buscar oportunidades de mejorar 111

110. Luke Wroblewsky 112

114. Móvil primero •  Te fuerza a focalizar y priorizar tus productos teniendo en cuenta las restricciones inherentes al diseño de móviles •  Te permite ofrecer experiencias innovadoras basándote en las nuevas capacidades propias de los disposi>vos móviles 116

115. AdapAve Content 117 Karen McGrane

116. Karen McGrane 118

119. "Content is the main reason we use our mobile devices (aside from Angry Birds)". — Karen McGrande 121

120. Contenido antes que la plataforma Contenido > Contenedor 122

121. Planteamiento Contenido adapta>vo: •  Es más que “móvil”. •  Contenido en un formato que permita compar>rlo y distribuirlo en cualquier plataforma. •  Plataformas que controles (actuales) o futuras. 123

122. Responsive web design 124 Ethan MarcoJe

123. •  El diseño se adapta al tamaño y orientación de la pantalla y al disposi>vo que se esté u>lizando. •  El contenido es el mismo. 125

124. ¿Cómo? •  Grilla fluida: columnas basadas en porcentajes que cambian de forma flexible con el tamaño del disposi>vo •  Imágenes flexibles: tamaño fluido de imágenes basadas en porcentaje •  Media queries: una herramienta de CSS3 que detecta las caracterís>cas del disposi>vo (tamaño, resolución y otras) y lanza una hoja de es>los apropiada. Brad Frost 126

125. 127

126. 128

127. 129

128. 130

129. 131

130. 132

131. Diseñar para mulAdisposiAvo

132. Cambiamos de disposiAvos a lo largo del día Anna Dahlström 134

133. NFL 135 hJps://www.youtube.com/watch?v=qn7RfQU1MJg

134. Google 136

135. Google 137

136. Rachel Hinman 138 Coherencia Sincronización Compar>ción de pantalla Cambio de disposi>vo Complementariedad Simultaneidad

137. Internet de las cosas

138. 140

139. 141

140. Paradigma móvil emergente

142. Disfrutar tocando Organizar la interfaz para tocar Al alcance de la mano Al alcance de los dedos Interacción mul>tác>l Interacción y manipulación directa Sensación de realismo Feedback inmediato Animación 144

143. Diseñar para tocar

144. 146

145. “You’re designing a physical device” Josh Clark 147

146. Deﬁnir y organizar la interfaz también para tocar 148

147. ¿Cómo sujetamos el móvil? 49% 36% 15% Steven Hoober 149

148. 49% 36% 75% Steven Hoober 150

149. 26% 10% 36% Steven Hoober 151

150. 90% 10% Steven Hoober 152

151. Raizlabs Áreas de interacción 153

152. 154 Situar las acciones arriesgadas o los elementos UI auxiliares Poner las botones de acción principales y navegación Luke Wroblewski

153. 155 Rachel Hinman

154. 156 Rachel Hinman

155. 157 Josh Clark

157. 159 zzzz

158. 160 Josh Clark

159. •  Aplicaciones iOS – Navegación en la parte inferior de la pantalla •  Aplicaciones Android – Navegación en la parte superior de la pantalla •  Web móvil – Navegación en la parte inferior de la pantalla 161 Josh Clark

160. Steven Hoober “We know that this diagram is wrong ” Steven Hoober 162

161. @shoobe01! #UXPA2014! 163

162. 164

163. Steven Hoober Los usuarios preﬁeren tocar el centro de la pantalla 165

164. Steven Hoober 166

165. Steven Hoober 167

166. •  Situar las acciones principales en el centro •  Situar las acciones secundarias arriba y abajo Los usuarios preﬁeren tocar el centro de la pantalla 168

167. Diseñar en función de cómo sos>enen el disposi>vo los usuarios 169

168. Postura tableta Luke Wroblewski 170

169. 171 Áreas de interacción D. Saﬀer L. Wroblewski Acciones arriesgadas o elementos UI auxiliares Botones de acción principales y navegación

170. 172 Facilitar las acciones principales

171. 173

172. Es imposible llegar sin levantar la mano 174

173. 175

174. Evitar situar controles en el centro superior 176

175. Lectura cómoda R. Hinman 177

176. Portapapeles R. Hinman 178

177. Al alcance de la mano

178. Boring et al. Facilitar el movimiento de la mano 180

179. 181

180. 182

181. 183

182. Al alcance del disposiAvo periférico de introducción de datos en el sistema de los dedos 184

183. Yema/pulpejo: 10-‐14 mm Punta: 8-‐10 mm Adecuación de los elementos de la interfaz al tamaño de los dedos 185

184. Tamaño del objeAvo 7 mm Aceptable 7 mm ÓpAmo por precisión 9 mm 9 mm § Para cerrar, eliminar o acciones graves o importantes 5 mm 5 mm Mínimo para tamaños pequeños § Si se necesita apilar gran can>dad de elementos +10 10 7 186

185. El tamaño del obje>vo inﬂuye en la tasa de errores Microso} 187

186. Tocar es impreciso •  Los obje>vos tác>les deben ser lo más grandes posible •  Tap el contenedor entero •  Diseñar con listas y cajas grandes 188

187. Espacio en blanco entre objeAvos 2 mm 2 mm (al menos) de separación visual reduce errores y la percepción de diﬁcultad. 189

188. Zona pulsable La zona pulsable debe ser igual o mayor al tamaño real (visual) del botón. 190

189. El espacio muerto reduce el peligro de pulsar otro botón por equivocación. Espacio muerto 191

190. Enviar el correo en lugar de añadir otro des>natario. 192

191. Enviar el correo en lugar de añadir otro des>natario. Borrar el correo en lugar de guardarlo como borrador. 193

192. Espacio en blanco entre objeAvos 194 S. Hoober Los obje>vos tác>les deben estar al menos alejados 8 mm del centro geométrico (preferible 10 mm)

193. 195

194. Interacción mulAtácAl

195. Gestos básicos L. Wroblewski et al. 197

196. Permi>r la interacción múl>ple L. Wroblewski et al. 198

197. Lorient 199

198. Permi>r usar la pantalla entera como control 200

199. Permi>r usar la pantalla entera como control 201

200. Para deﬁnir gestos en una aplicación: 1.  Asegurar que el acceso a contenidos y funcionalidades principales u>liza gestos básicos. 2.  Añadir gestos más complejos como atajos a las funcionalidades más usadas. 202

201. Cuanto más complicados sean los gestos, menos personas podrán realizarlos 203

202. Escala intuiAva de gestos 204 Five WorkLight

203. Emular las interacciones “naturales”

204. NUI exploits skills that we have acquired through a life>me of living in the World Bill Buxton, principal researcher en Microso} “ ” 206

205. Interacción y manipulación directa

206. Acción – reacción/percepción están cerca, similar al mundo †sico B. Pagán 208

207. 1 2 3 4 209

208. El contenido es lo principal 210

209. Dedicar el máximo espacio posible al contenido 211

210. Minimizar el uso del chrome 212

211. Chrome is the visual design elements that give users informa>on about or commands to operate on the screen´s content (as opposed to being part of the content). These design elements are provided by the underlying system and sorrounds the user´s data J.Nielsen&R.Budiu “ 213

212. Minimizar el uso del chrome 214

213. Interactuar directamente con el contenido 215

218. Sensación de realismo

219. When appropriate, add a realis>c, physical dimension to your applica>on. O}en, the more true to life your applica>on looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it iOS Human Interface Guidelines ” “ 221

220. Feedback: respuesta inmediata al toque del usuario Manipulación directa del contenido, en lugar de uso de controles Simular las leyes †sicas (inercia, resistencia…) en los objetos Toques de realismo U>lizar metáforas del mundo real 222

221. U>lización de metáforas del mundo †sico 223

222. Realismo visual = realismo de interacción 224

223. Esqueomorﬁsmo Antiguo Kitch 225

224. Google 226

225. 227

226. •  Diﬁcultad de descubrir qué es pulsable (aﬀordance) •  Más di†cil de aprender •  Más di†cil de recordar Problemas de usabilidad 228

227. 229

228. Feedback inmediato (en Aempo y espacio)

229. Arturo Toledo 231

230. 232

231. 233

232. 234

233. 235 Lookand Feel §  Visual §  Sonoro §  Tác>l

234. Feedback visual es el principal y más importante 236

235. Cambiar de color Cambiar de tamaño Moverse 237

236. Feedback inmediato: el contenido debe seguir a los dedos 238

237. Feedback mulAmodal 239

238. Feedback mulAmodal 240 Al hacer una foto: § Se muestra una animación. § Se reproduce un sonido.

239. Animación: interacción más natural

240. Inercia Sensación de realismo usando efectos del mundo †sico Aceleración y desaceleración Velocidad Fricción Elas>cidad 242

241. 243

242. Mejora la orientación Las transiciones visuales mejoran la comprensión de lo que ha pasado Muestra cambios de estado o situación Muestra relaciones entre elementos 244

243. 245

244. La percepción periférica del movimiento es eficiente Dirige la atención del usuario Puede ayudar en los cambios de elementos pequeños o fuera del centro de la pantalla 246

245. Dirige la atención del usuario 247

246. Dirige la atención del usuario 248

247. Las transiciones suaves añaden realismo Ofrece con>nuidad y man>ene el ﬂujo Crea consistencia y con>nuidad Las transiciones deben ser suaves y su>les para no llamar la atención hacia sí mismas 249

248. 250

249. 251

250. Reducir el cambio de pantallas puede mantener el ﬂujo Ofrece con>nuidad y man>ene el ﬂujo De pantallas discretas a movimiento con>nuo Abrir, cerrar y refrescar paneles con gestos Abrir el contenido y medias en la página 252

251. 253 Busca las diferencias Bill ScoJ

252. 254 Inténtalo otra vez… Bill ScoJ

253. 255

254. 256

255. 257

256. Disfrutar tocando

257. El placer de la interacción tác>l, disfrutar haciendo 259

258. Buenas prácAcas

259. Layout

260. 262

262. 264

263. 265 Luke Wroblewski Interacción principal

264. Estructurar la interfaz 266 Josh Clark

265. Estructurar la interfaz 267 Android

266. 268 Contenido lo primero, navegación lo segundo

267. 269 Contenido máximo, navegación mínima Luke Wroblewski

268. N a v e g a c i ó n C o n t e n i d o N a v e g a c i ó n C o n t e n i d o 270

269. 271 N a v e g a c i ó n C o n t e n i d o N a v e g a c i ó n C o n t e n i d o

270. 272 Luke Wroblewski Aportar valor inmediatamente In the new app, we present relevant content up-‐front and instantly no>fy users of new invita>ons and messages. In other words, we remove the fric>on of a dashboard and provide immediate value on app launch

271. Centrarse en las tareas clave 273

272. Priori>ze content for mobile users Priorizar contenidos para los usuarios en movilidad Anna Yeaman 274

273. Simpliﬁcar la interfaz 275 J. Nielsen & R. Budio

274. Simpliﬁcar la interfaz 276

275. Simpliﬁcar la interfaz Mostrar una gran idea por pantalla Jeremy Olson 277

276. Revelar más información •  Fuera de la pantalla por defecto •  Presentación progresiva •  Acordeón •  Carrusel 278

278. 280 Luke Wroblewski 280

280. 282 Acciones principales Contenido principal Navegación Contenido secundario Luke Wroblewski

281. Controlar la complejidad mostrando la información necesaria en cada momento. Presentación progresiva 283

282. La revelación progresiva diﬁere las caracterís>cas avanzadas o rara vez u>lizadas a una pantalla secundaria, haciendo las aplicaciones más fáciles de aprender y menos propensas a errores. Jakob Nielsen “ ” 284

283. 285

284. 286

285. Presentación progresiva 287 Josh Clark

286. Presentación progresiva 288 Josh Clark “Clarity trumps density” Josh Clark

287. Presentación progresiva 289

288. Presentación progresiva 290 Josh Clark

289. Presentación progresiva 291 “Op>mize each screen for the primary task” Josh Clark Josh Clark

290. Acordeón 292

291. Carrusel Dejar clara la navegación 293

292. Carrusel Navegación explícita Indicar dónde se está respecto al total 294

293. Carrusel Ofrecer pistas de los gestos Tác>l como mejora 295

294. Aprovechar las ventajas del móvil 296 ” “Mobile is not less but more. Mobile has superpowers … Sensors Give Us Superpowers” Josh Clark

295. Mecanismos del disposiAvo 297 ¿Cómo puedo usar estos mecanismos? Henrik Olsen

296. Mecanismos del disposiAvo 298 Henrik Olsen ¿Cómo puedo usar estos mecanismos?

297. 299

298. Formularios

299. 301 La regla general es limitar el uso de formularios en el contexto móvil Brian Flig “ Evitar introducir inputs al usuario Evitar introducir inputs al usuario … cuando sea posible

300. TransmiAr visualmente sensación de facilidad Luke Wroblewski 302 Simpliﬁcar el número de elementos visuales

301. Reducir la introducción de datos Barron Cuadrro 303 No solicitar datos

302. Barron Cuadrro 304

303. Barron Cuadrro 305 En web no es muy adecuado. Menos en móvil. No solicitar datos

304. Barron Cuadrro 306 No solicitar datos… a no ser que sean absolutamente necesarios Solicitar el mínimo de información necesaria para la tarea

305. Rellenar por defecto el formulario con los datos personales conocidos Usar el autocompletado y sugerencias Guardar y u>lizar la historia de uso 307 Mostrar seleccionado por defecto los datos per>nentes

306. 308 Aprovechar los datos que ya conoce el disposi>vo.

307. 309 Aprovechar las posibilidades del disposi>vo.

308. 310

309. Brad Frost 311 Información que puede saber el sistema

310. Simpliﬁcar 312 Eliminar los campos innecesarios o repe>ciones

311. 313

312. Luke Wroblewski 314 Esconder los campos innecesarios

313. Elegir el método de input más fácil 315 Botones con tamaño suﬁciente

314. Radio buJons con tamaño e interespacio suﬁciente Check boxes con tamaño e interespacio suﬁciente 316

315. Desplegables no son eﬁcientes 317

318. 320

320. Destacar la acción principal de las secundarias 322

321. 323

322. 324

323. 325

324. 326