Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

Sesión técnica llevada a cabo en nuestra Escuela Universitaria el 17 de diciembre de 2014.
El diseño de interfaces de usuario de dispositivos móviles es todo un reto para los diseñadores de interfaz e interacción. Se deben tener en cuenta ciertas características relacionadas con el tamaño de los dispositivos en sí, con los estilos de interacción propios, y el contexto de uso entre otras. Conocer estas características es imprescindible para que la experiencia del usuario al interactuar con estos dispositivos sea positiva. Armando Fidalgo nos lo explicará en esta conferencia.
Sesión conducida por Armando es diseñador de interacción y experiencia de usuario, y consultor de usabilidad. Su experiencia se remonta al año 2000, y durante 10 años ha sido líder del equipo de diseño de interacción y experiencia de usuario de la reconocida empresa Usolab. Actualmente desempeña su profesión como profesional autónomo en el Reino Unido.

  • Login to see the comments

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

  1. 1. 1   Diseño  de     interfaz  móvil  
  2. 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. 3. ¿Por  qué  móviles?  
  4. 4. assetDNA     4  
  5. 5. Hercampus   5  
  6. 6. Google   6  
  7. 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. 8. Los  usuarios  admiten  que  usan  el  móvil  en  el   baño   11Mark.  Octubre  2011.  Usuarios  EEUU.   75%     8  
  9. 9. Luke  Wroblewski       9  
  10. 10. Investor._.com   10  
  11. 11. Ingresos  por  móvil   Luke  Wroblewski     11  
  12. 12. comScore  –  Market  Realist     12  
  13. 13. Dynatrace   13  
  14. 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. 15.         28%  said  that  the  tablet  is  their  primary  computer   Usuarios  sólo  desde  móviles   Google   15  
  16. 16. Usuarios  sólo  desde  móviles   “A  mobile  device  is  the  internet  for  many   people.”   —Susannah  Fox,  Pew  Research  Center  
  17. 17. Ventas  globales   Luke  Wroblewski       17  
  18. 18. Luke  Wroblewski       18  
  19. 19. REUTERS/Kimimasa  Mayama   2005   19  
  20. 20. AP   2013   20  
  21. 21. °   °   °   °   °   El  País     21  
  22. 22. ¿Qué  es  un  móvil?  
  23. 23. Los  disposiAvos  
  24. 24. Luke  Wroblewski     24  
  25. 25. 25  Luke  Wroblewski    
  26. 26. 26  Luke  Wroblewski    
  27. 27. ¿Tableta?   27  
  28. 28. ¿PortáAl…?   28  
  29. 29. ¿…?   29  
  30. 30. ¿…  o  tableta?   30  
  31. 31. ¿PortáAles?   31  Luke  Wroblewski  
  32. 32. ¿…?   Luke  Wroblewski     32  
  33. 33. 33  
  34. 34. 34  
  35. 35. Luke  Wroblewski     35     •  Diseñar para multidispositivos! •  Favorecer el continuum de pantallas! •  Optimizar para interacción táctil! •  Permitir el cursor & teclado!
  36. 36. Las  personas  
  37. 37. Foto  de  flickr/Clive  Fint   “Mobile  refers  to  the   user,  and  not  the  device   or  the  applica>on”.   Barbara  Ballard   37  
  38. 38. Móviles   •  Personal   •  Communica>ve   •  Handheld   •  Wakable   •  The  carry  principle     Barbara  Ballard   38  
  39. 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. 40. Restricciones  
  41. 41. Tamaño  de  pantallas   41  
  42. 42. 42 19”   3,5”  
  43. 43. Velocidad  de  conexión   •  Velocidades  más  lentas   43  
  44. 44. GRPS   EDGE   3G   ADSL   Velocidad   inmediato   7  segundos   medio  minuto   GPRS   2  minutos   UMTS   44  
  45. 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. 46. Cómo  lo  usamos  
  47. 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. 48. 48TraderGroup  Signal    
  49. 49. §  En  movimiento   §  Suscep>bles  a   distracciones  e   interrupciones   §  Disponibles   49  Alexis  Polegato  
  50. 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. 51  ShuJerstock     Móvil  no  es  esto  
  52. 52. 52  Google    
  53. 53. Las tabletas se usan en el sofá y en la cama 53  Google    
  54. 54. 54  Google    
  55. 55. Preferencia de dispositivo a lo largo del día 55  
  56. 56. Cuándo  usamos  el  móvil   Luke  Wroblewski     56  
  57. 57. 57  Adobe  The  State  of  Mobile  Benchmark  -­‐  Q2  2013    
  58. 58. “ 58  Google    
  59. 59. AcAtud  móvil   59  
  60. 60. Estrategias  
  61. 61. 61  Brad  Frost    
  62. 62. 62  Brad  Frost    
  63. 63. 63  Brad  Frost    
  64. 64. 64  Luke  Wroblewski      
  65. 65. 65  
  66. 66. Aproximaciones  disponibles   •  Aplicaciones  na>vas   •  Aplicaciones  híbridas   •  Si>os  web  móviles  /  aplicaciones  web   66 •  Chris>an  Karasiewicz    
  67. 67. Aplicaciones  naAvas   •  Se  descargan  (desde  el  store)  y  residen  en  el  disposi>vo.     •  Son  específicas  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>ficaciones   67Chris>an  Karasiewicz    
  68. 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,  fluidez,  gestos  naturales,  etc.)   •  Ciertas  caracterís>cas  del    SO  na>vo,  como  el  sistema  de   no>ficaciones,  algunos  sensores  y  gestos  avanzados,  no   están  todavía  disponibles   68   Chris>an  Karasiewicz      
  69. 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. 70     ¡Depende!     •  Producto! •  Negocio! •  Usuarios! •  Capacidad técnica y recursos disponibles! •  Tiempo disponible! ¿Cuál?     Chris>an  Karasiewicz    
  71. 71. "Define  a  problem.  Then  solve  that  problem   and  decide  on  what  channels  make  sense  to   carry  out  the  solu>on".     —  Brad  Frost     71
  72. 72. Aplicaciones  naAvas   72
  73. 73. 73  
  74. 74. 74  
  75. 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. 76  An  OpenSignal  Report  August  2014    
  77. 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. 78. Android   hJp://developer.android.com/design/index.html   78  
  79. 79. iOS   hJp://developer.apple.com/library/ios/#documenta>on/userexperience/conceptual/mobilehig/Introduc>on/Introduc>on.html   79  
  80. 80. Convergencia  de  funcionalidades  y   diseño,  diferencias  de  filosoVa   80  
  81. 81. Hardware   81  
  82. 82. •  Home   82  
  83. 83. •  Sin  botones   •  Vía  so}ware:   –  Back   –  Home   –  Recents   83  
  84. 84. Estructura  básica   84  
  85. 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. 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. 87. 1.  Barra  de  acciones   principales   2.  Control  de  vistas   3.  Contenido  principal   4.  Barra  de  acciones   “split”   87  
  88. 88. 88  
  89. 89. 89  
  90. 90. Distribución  de  acciones   90  
  91. 91. 91  
  92. 92. AcAon  bar   1.  Icono  de  aplicación  (con  o  sin  la  affordance  “up”)   2.  Control  de  vistas   3.  Botones  de  acción   4.  “Desbordamiento”  de  acciones  (ac>on  overflow)   92  
  93. 93. Back   94  
  94. 94. Up  vs  back   96  
  95. 95. 97  
  96. 96. SiAos  web  móviles   98
  97. 97. 99
  98. 98. Webs  opAmizadas  para  móvil   100 Jakob  Nielsen  
  99. 99. Theresa  Neil   101  
  100. 100. Theresa  Neil   102  
  101. 101. 103  
  102. 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. 103. CríAca   “Mobile  is  not  less”     —  Josh  Clark         105
  104. 104. 106
  105. 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. 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. 107. 109
  108. 108. Mobile  first   110 Luke  Wroblewski  
  109. 109. Empezar  pequeño  y  mejorar  hacia   arriba   •  Empezar  por  defecto  con  lo  principal   •  Buscar    oportunidades  de  mejorar   111  
  110. 110. Luke  Wroblewsky   112  
  111. 111. Luke  Wroblewsky     113  
  112. 112. Luke  Wroblewsky   114  
  113. 113. Luke  Wroblewsky     115  
  114. 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. 115. AdapAve  Content   117 Karen  McGrane  
  116. 116. Karen  McGrane   118
  117. 117. Karen  McGrane   119
  118. 118. Karen  McGrane   120
  119. 119. "Content  is  the  main  reason  we  use  our  mobile   devices  (aside  from  Angry  Birds)".     —  Karen  McGrande       121
  120. 120. Contenido  antes  que  la  plataforma   Contenido  >  Contenedor   122
  121. 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. 122. Responsive  web  design   124 Ethan  MarcoJe  
  123. 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. 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. 125. 127
  126. 126. 128
  127. 127. 129
  128. 128. 130
  129. 129. 131  
  130. 130. 132  
  131. 131. Diseñar  para  mulAdisposiAvo  
  132. 132. Cambiamos  de  disposiAvos  a  lo  largo  del  día   Anna  Dahlström   134
  133. 133. NFL   135 hJps://www.youtube.com/watch?v=qn7RfQU1MJg  
  134. 134. Google   136
  135. 135. Google   137
  136. 136. Rachel  Hinman   138   Coherencia   Sincronización   Compar>ción  de  pantalla   Cambio  de  disposi>vo   Complementariedad   Simultaneidad  
  137. 137. Internet  de  las  cosas  
  138. 138. 140
  139. 139. 141  
  140. 140. Paradigma  móvil  emergente  
  141. 141. Luke  Wroblewski   143
  142. 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. 143. Diseñar  para  tocar  
  144. 144. 146
  145. 145. “You’re   designing  a   physical  device”   Josh  Clark   147
  146. 146. Definir  y  organizar  la  interfaz  también   para  tocar   148
  147. 147. ¿Cómo  sujetamos  el  móvil?   49% 36% 15%  Steven  Hoober   149
  148. 148. 49% 36% 75% Steven  Hoober   150
  149. 149. 26% 10% 36% Steven  Hoober   151
  150. 150. 90% 10% Steven  Hoober   152
  151. 151. Raizlabs   Áreas  de  interacción   153  
  152. 152. 154     Situar  las  acciones  arriesgadas  o  los   elementos  UI  auxiliares       Poner  las  botones  de  acción  principales  y   navegación       Luke  Wroblewski  
  153. 153. 155  Rachel  Hinman  
  154. 154. 156  Rachel  Hinman  
  155. 155. 157  Josh  Clark  
  156. 156. Luke  Wroblewski   158  
  157. 157. 159  zzzz  
  158. 158. 160  Josh  Clark  
  159. 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. 160. Steven  Hoober   “We  know  that   this  diagram  is   wrong  ”   Steven  Hoober   162  
  161. 161. @shoobe01! #UXPA2014! 163  
  162. 162. 164  
  163. 163. Steven  Hoober   Los  usuarios  prefieren  tocar  el  centro   de  la  pantalla   165  
  164. 164. Steven  Hoober   166  
  165. 165. Steven  Hoober   167  
  166. 166. •  Situar  las  acciones  principales  en  el  centro   •  Situar  las  acciones  secundarias  arriba  y  abajo   Los  usuarios  prefieren  tocar  el  centro   de  la  pantalla   168  
  167. 167.    Diseñar  en  función  de  cómo   sos>enen  el  disposi>vo  los  usuarios     169
  168. 168. Postura  tableta   Luke  Wroblewski   170
  169. 169. 171 Áreas  de  interacción   D.  Saffer     L.  Wroblewski     Acciones arriesgadas o elementos UI auxiliares     Botones  de  acción  principales   y  navegación      
  170. 170. 172   Facilitar  las  acciones   principales  
  171. 171. 173
  172. 172. Es  imposible  llegar   sin  levantar  la  mano   174
  173. 173. 175
  174. 174. Evitar  situar   controles  en  el   centro  superior   176
  175. 175.   Lectura  cómoda     R.  Hinman   177
  176. 176.   Portapapeles     R.  Hinman   178
  177. 177. Al  alcance  de  la  mano  
  178. 178. Boring  et  al.     Facilitar  el  movimiento  de  la  mano     180
  179. 179. 181
  180. 180. 182
  181. 181. 183
  182. 182.    Al  alcance  del  disposiAvo  periférico  de   introducción  de  datos  en  el  sistema        de  los  dedos   184
  183. 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. 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. 185.   El  tamaño  del  obje>vo  influye   en  la  tasa  de  errores     Microso}   187
  186. 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. 187. Espacio  en  blanco  entre  objeAvos   2  mm     2  mm  (al  menos)  de  separación  visual  reduce   errores  y  la  percepción  de  dificultad.     189
  188. 188. Zona  pulsable   La  zona  pulsable  debe  ser  igual  o  mayor  al   tamaño  real  (visual)  del  botón.   190
  189. 189. El  espacio  muerto  reduce  el  peligro  de  pulsar   otro  botón  por  equivocación.   Espacio  muerto   191
  190. 190. Enviar  el  correo  en   lugar  de  añadir  otro   des>natario.   192
  191. 191. Enviar  el  correo  en   lugar  de  añadir  otro   des>natario.     Borrar  el  correo  en   lugar  de  guardarlo   como  borrador.   193
  192. 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. 193. 195
  194. 194. Interacción  mulAtácAl  
  195. 195. Gestos  básicos   L.  Wroblewski  et  al.   197
  196. 196.   Permi>r  la  interacción  múl>ple     L.  Wroblewski  et  al.   198
  197. 197. Lorient   199
  198. 198.   Permi>r  usar  la  pantalla  entera  como  control     200
  199. 199.   Permi>r  usar  la  pantalla  entera  como  control     201
  200. 200. Para  definir  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. 201.   Cuanto  más  complicados  sean  los  gestos,   menos  personas  podrán  realizarlos       203  
  202. 202. Escala  intuiAva  de  gestos   204  Five  WorkLight  
  203. 203. Emular  las  interacciones  “naturales”  
  204. 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. 205. Interacción  y  manipulación  directa  
  206. 206.   Acción  –  reacción/percepción  están   cerca,  similar  al  mundo  †sico     B. Pagán 208
  207. 207. 1   2   3   4   209
  208. 208.   El  contenido  es  lo  principal     210
  209. 209.   Dedicar  el  máximo  espacio   posible  al  contenido     211
  210. 210.   Minimizar  el  uso  del  chrome     212
  211. 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. 212.   Minimizar  el  uso  del  chrome     214
  213. 213.   Interactuar  directamente  con  el  contenido     215
  214. 214.   Interactuar  directamente  con  el  contenido     216
  215. 215.   Interactuar  directamente  con  el  contenido     217
  216. 216.   Interactuar  directamente  con  el  contenido     218
  217. 217.   Interactuar  directamente  con  el  contenido     219
  218. 218. Sensación  de  realismo  
  219. 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. 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. 221. U>lización  de  metáforas  del  mundo  †sico   223
  222. 222. Realismo  visual  =  realismo  de  interacción   224
  223. 223. Esqueomorfismo   Antiguo Kitch 225
  224. 224. Google   226  
  225. 225. 227
  226. 226. •  Dificultad  de  descubrir  qué  es  pulsable   (affordance)   •  Más  di†cil  de  aprender     •  Más  di†cil  de  recordar       Problemas  de  usabilidad   228
  227. 227. 229
  228. 228. Feedback  inmediato   (en  Aempo  y  espacio)  
  229. 229.  Arturo  Toledo   231
  230. 230. 232
  231. 231. 233
  232. 232. 234
  233. 233. 235 Lookand Feel §     Visual   §     Sonoro   §     Tác>l  
  234. 234. Feedback  visual  es  el   principal  y  más  importante   236
  235. 235. Cambiar    de   color   Cambiar  de  tamaño   Moverse   237
  236. 236. Feedback  inmediato:  el  contenido   debe  seguir  a  los  dedos   238
  237. 237. Feedback  mulAmodal   239  
  238. 238. Feedback  mulAmodal   240   Al  hacer  una  foto:   § Se  muestra  una  animación.   § Se  reproduce  un  sonido.  
  239. 239. Animación:  interacción  más  natural  
  240. 240. Inercia     Sensación  de  realismo  usando   efectos  del  mundo  †sico       Aceleración  y  desaceleración   Velocidad   Fricción   Elas>cidad   242
  241. 241. 243
  242. 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. 243. 245
  244. 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. 245. Dirige  la  atención  del  usuario   247
  246. 246. Dirige  la  atención  del  usuario   248
  247. 247. Las  transiciones  suaves  añaden  realismo   Ofrece  con>nuidad  y  man>ene  el  flujo   Crea  consistencia  y  con>nuidad   Las  transiciones  deben  ser  suaves  y  su>les   para  no  llamar  la  atención  hacia  sí  mismas   249
  248. 248. 250
  249. 249. 251
  250. 250. Reducir  el  cambio  de  pantallas    puede  mantener  el  flujo   Ofrece  con>nuidad  y  man>ene  el  flujo   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. 251. 253   Busca  las  diferencias    Bill  ScoJ  
  252. 252. 254   Inténtalo  otra  vez…    Bill  ScoJ  
  253. 253. 255
  254. 254. 256
  255. 255. 257
  256. 256. Disfrutar  tocando  
  257. 257. El  placer  de  la  interacción   tác>l,  disfrutar  haciendo   259
  258. 258. Buenas  prácAcas  
  259. 259. Layout  
  260. 260. 262
  261. 261. 263  Luke  Wroblewski  
  262. 262. 264  
  263. 263. 265  Luke  Wroblewski   Interacción     principal  
  264. 264. Estructurar  la  interfaz   266  Josh  Clark  
  265. 265. Estructurar  la  interfaz   267  Android  
  266. 266. 268     Contenido  lo  primero,   navegación  lo  segundo    
  267. 267. 269   Contenido  máximo,  navegación  mínima   Luke  Wroblewski  
  268. 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. 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. 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. 271. Centrarse  en  las  tareas  clave   273  
  272. 272. Priori>ze  content  for  mobile  users     Priorizar  contenidos  para  los   usuarios  en  movilidad     Anna  Yeaman   274
  273. 273. Simplificar  la  interfaz   275  J.  Nielsen  &  R.  Budio  
  274. 274. Simplificar  la  interfaz   276  
  275. 275. Simplificar  la  interfaz   Mostrar  una  gran  idea  por  pantalla   Jeremy  Olson   277
  276. 276. Revelar  más  información   •  Fuera  de  la  pantalla  por  defecto   •  Presentación  progresiva   •  Acordeón   •  Carrusel   278  
  277. 277. Luke  Wroblewski     279  
  278. 278. 280  Luke  Wroblewski   280
  279. 279. 281  Luke  Wroblewski  
  280. 280. 282     Acciones  principales     Contenido  principal     Navegación     Contenido  secundario   Luke  Wroblewski  
  281. 281. Controlar la complejidad mostrando la información necesaria en cada momento. Presentación  progresiva   283  
  282. 282. La  revelación  progresiva  difiere  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. 283. 285
  284. 284. 286
  285. 285. Presentación  progresiva   287   Josh  Clark  
  286. 286. Presentación  progresiva   288   Josh  Clark   “Clarity  trumps  density”                                                        Josh  Clark  
  287. 287. Presentación  progresiva   289  
  288. 288. Presentación  progresiva   290   Josh  Clark  
  289. 289. Presentación  progresiva   291   “Op>mize  each  screen  for  the   primary  task”      Josh  Clark   Josh  Clark  
  290. 290. Acordeón   292
  291. 291. Carrusel     Dejar  clara  la  navegación     293
  292. 292. Carrusel     Navegación  explícita       Indicar  dónde  se  está   respecto  al  total     294
  293. 293. Carrusel     Ofrecer  pistas  de  los  gestos       Tác>l  como  mejora       295
  294. 294. Aprovechar  las  ventajas  del  móvil   296   ” “Mobile  is  not  less  but  more.  Mobile  has  superpowers  …    Sensors   Give  Us  Superpowers”    Josh  Clark  
  295. 295. Mecanismos  del  disposiAvo   297     ¿Cómo  puedo  usar  estos  mecanismos?     Henrik  Olsen  
  296. 296. Mecanismos  del  disposiAvo   298  Henrik  Olsen     ¿Cómo  puedo  usar  estos  mecanismos?    
  297. 297. 299  
  298. 298. Formularios  
  299. 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. 300. TransmiAr  visualmente  sensación  de   facilidad     Luke  Wroblewski     302     Simplificar  el  número  de   elementos  visuales    
  301. 301. Reducir  la  introducción  de  datos   Barron  Cuadrro     303     No  solicitar  datos    
  302. 302. Barron  Cuadrro     304  
  303. 303. Barron  Cuadrro     305   En  web  no  es  muy   adecuado.     Menos  en  móvil.     No  solicitar  datos    
  304. 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. 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. 306. 308     Aprovechar  los  datos  que   ya  conoce  el  disposi>vo.    
  307. 307. 309     Aprovechar  las  posibilidades   del  disposi>vo.    
  308. 308. 310
  309. 309. Brad  Frost   311     Información  que  puede  saber   el  sistema    
  310. 310. Simplificar     312     Eliminar  los  campos   innecesarios  o  repe>ciones    
  311. 311. 313  
  312. 312. Luke  Wroblewski     314     Esconder  los  campos   innecesarios    
  313. 313. Elegir  el  método  de  input  más  fácil     315     Botones  con  tamaño  suficiente    
  314. 314.   Radio  buJons  con  tamaño  e   interespacio  suficiente       Check  boxes  con  tamaño  e   interespacio  suficiente     316  
  315. 315.   Desplegables  no  son  eficientes     317  
  316. 316. Luke  Wroblewski     318  
  317. 317. Luke  Wroblewski     319  
  318. 318. 320  
  319. 319. Luke  Wroblewski     321  
  320. 320. Destacar  la  acción  principal  de  las   secundarias   322  
  321. 321. 323  
  322. 322. 324  
  323. 323. 325  
  324. 324. 326  

×