1	
  
Diseño	
  de	
  	
  
interfaz	
  móvil	
  
-­‐ 	
  ¿Por	
  qué	
  móviles?	
  
-­‐ 	
  ¿Qué	
  es	
  un	
  móvil?	
  
-­‐ 	
  Estrategias	
  
-­‐ 	
  Paradigma	
  mó...
¿Por	
  qué	
  móviles?	
  
assetDNA	
  
	
  
4	
  
Hercampus	
   5	
  
Google	
   6	
  
GeJy	
  Images	
   7	
  
25%de	
  los	
  que	
  >enen	
  un	
  móvil	
  entre	
  
18-­‐44	
  años	
  dicen	
  “no	
  puedo...
Los	
  usuarios	
  admiten	
  que	
  usan	
  el	
  móvil	
  en	
  el	
  
baño	
  
11Mark.	
  Octubre	
  2011.	
  Usuarios	...
Luke	
  Wroblewski	
  	
  
	
  
9	
  
Investor._.com	
   10	
  
Ingresos	
  por	
  móvil	
  
Luke	
  Wroblewski	
  	
   11	
  
comScore	
  –	
  Market	
  Realist	
  	
   12	
  
Dynatrace	
   13	
  
de	
  usuarios	
  pasa	
  más	
  >empo	
  con	
  
tabletas	
  que	
  con	
  ordenadores.	
  
Google	
  AdMob.	
  Marzo	
  ...
 
	
  
	
  
	
  
28%	
  said	
  that	
  the	
  tablet	
  is	
  their	
  primary	
  computer	
  
Usuarios	
  sólo	
  desde	...
Usuarios	
  sólo	
  desde	
  móviles	
  
“A	
  mobile	
  device	
  is	
  the	
  internet	
  for	
  many	
  
people.”	
  
—...
Ventas	
  globales	
  
Luke	
  Wroblewski	
  	
  
	
  
17	
  
Luke	
  Wroblewski	
  	
  
	
  
18	
  
REUTERS/Kimimasa	
  Mayama	
  
2005	
  
19	
  
AP	
  
2013	
  
20	
  
°	
   °	
   °	
   °	
   °	
  
El	
  País	
  
	
  
21	
  
¿Qué	
  es	
  un	
  móvil?	
  
Los	
  disposiAvos	
  
Luke	
  Wroblewski	
  	
   24	
  
25	
  Luke	
  Wroblewski	
  	
  
26	
  Luke	
  Wroblewski	
  	
  
¿Tableta?	
  
27	
  
¿PortáAl…?	
  
28	
  
¿…?	
  
29	
  
¿…	
  o	
  tableta?	
  
30	
  
¿PortáAles?	
  
31	
  Luke	
  Wroblewski	
  
¿…?	
  
Luke	
  Wroblewski	
  
	
  
32	
  
33	
  
34	
  
Luke	
  Wroblewski	
  
	
  
35	
  
	
  
•  Diseñar para multidispositivos!
•  Favorecer el continuum de pantallas!
•  Opti...
Las	
  personas	
  
Foto	
  de	
  flickr/Clive	
  Fint	
  
“Mobile	
  refers	
  to	
  the	
  
user,	
  and	
  not	
  the	
  device	
  
or	
  th...
Móviles	
  
•  Personal	
  
•  Communica>ve	
  
•  Handheld	
  
•  Wakable	
  
•  The	
  carry	
  principle	
  
	
  
Barba...
The	
  carry	
  principle	
  
39	
  Barbara	
  Ballard	
  
	
  
Implicaciones	
  en	
  el	
  disposi>vo:	
  
•  Dimensione...
Restricciones	
  
Tamaño	
  de	
  pantallas	
  
41	
  
42
19”	
  
3,5”	
  
Velocidad	
  de	
  conexión	
  
•  Velocidades	
  más	
  lentas	
  
43	
  
GRPS	
  
EDGE	
  
3G	
  
ADSL	
  
Velocidad	
  
inmediato	
  
7	
  segundos	
  
medio	
  minuto	
  
GPRS	
   2	
  minutos	...
Cobertura	
  
•  Conec>vidad	
  limitada/intermitente	
  
Cobertura Vodafone
2G 3G
45	
  
•  Descargar sólo lo necesario:
...
Cómo	
  lo	
  usamos	
  
“Unlike	
  the	
  sta>c	
  and	
  
predictable	
  PC	
  context,	
  
the	
  mobile	
  context	
  is	
  a	
  lot	
  
like	
...
48TraderGroup	
  Signal	
  
	
  
§  En	
  movimiento	
  
§  Suscep>bles	
  a	
  
distracciones	
  e	
  
interrupciones	
  
§  Disponibles	
  
49	
  Alex...
§  En	
  movimiento	
  
§  Suscep>bles	
  a	
  
distracciones	
  e	
  
interrupciones	
  
§  Disponibles	
  
§  Sociab...
51	
  ShuJerstock	
  
	
  
Móvil	
  no	
  es	
  esto	
  
52	
  Google	
  
	
  
Las tabletas se usan en el sofá y en la cama
53	
  Google	
  
	
  
54	
  Google	
  
	
  
Preferencia de dispositivo a lo largo del día
55	
  
Cuándo	
  usamos	
  el	
  móvil	
  
Luke	
  Wroblewski	
  
	
  
56	
  
57	
  Adobe	
  The	
  State	
  of	
  Mobile	
  Benchmark	
  -­‐	
  Q2	
  2013	
  
	
  
“
58	
  Google	
  
	
  
AcAtud	
  móvil	
  
59	
  
Estrategias	
  
61	
  Brad	
  Frost	
  
	
  
62	
  Brad	
  Frost	
  
	
  
63	
  Brad	
  Frost	
  
	
  
64	
  Luke	
  Wroblewski	
  	
  
	
  
65	
  
Aproximaciones	
  disponibles	
  
•  Aplicaciones	
  na>vas	
  
•  Aplicaciones	
  híbridas	
  
•  Si>os	
  web	
  móviles...
Aplicaciones	
  naAvas	
  
•  Se	
  descargan	
  (desde	
  el	
  store)	
  y	
  residen	
  en	
  el	
  disposi>vo.	
  	
  ...
SiAos	
  web	
  móviles	
  /	
  aplicaciones	
  web	
  
•  Corren	
  en	
  el	
  navegador	
  web	
  
•  Escritas	
  en	
 ...
Aplicaciones	
  híbridas	
  
•  Son	
  una	
  combinación	
  de	
  apps	
  na>vas	
  y	
  web	
  
•  Son	
  esencialmente	...
70	
  
	
  
¡Depende!	
  
	
  
•  Producto!
•  Negocio!
•  Usuarios!
•  Capacidad técnica y recursos
disponibles!
•  Tiemp...
"Define	
  a	
  problem.	
  Then	
  solve	
  that	
  problem	
  
and	
  decide	
  on	
  what	
  channels	
  make	
  sense	
...
Aplicaciones	
  naAvas	
  
72
73	
  
74	
  
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	
  	
...
76	
  An	
  OpenSignal	
  Report	
  August	
  2014	
  
	
  
Seguir	
  las	
  Guías	
  de	
  esAlo	
  
•  Especialmente	
  en	
  áreas	
  UX	
  principales	
  como	
  
–  Navegación	
...
Android	
  
hJp://developer.android.com/design/index.html	
   78	
  
iOS	
  
hJp://developer.apple.com/library/ios/#documenta>on/userexperience/conceptual/mobilehig/Introduc>on/Introduc>on.ht...
Convergencia	
  de	
  funcionalidades	
  y	
  
diseño,	
  diferencias	
  de	
  filosoVa	
  
80	
  
Hardware	
  
81	
  
•  Home	
  
82	
  
•  Sin	
  botones	
  
•  Vía	
  so}ware:	
  
–  Back	
  
–  Home	
  
–  Recents	
  
83	
  
Estructura	
  básica	
  
84	
  
Estructura	
  
85	
  
Layout	
  popularizado	
  por	
  iOS	
  
Barra	
  de	
  estado	
  (de	
  sistema)	
  
Título	
  de	
...
Estructura	
  
86	
  
Layout	
  popularizado	
  por	
  iOS	
  
Barra	
  de	
  estado	
  (de	
  sistema)	
  
Título	
  de	
...
1.  Barra	
  de	
  acciones	
  
principales	
  
2.  Control	
  de	
  vistas	
  
3.  Contenido	
  principal	
  
4.  Barra	
...
88	
  
89	
  
Distribución	
  de	
  acciones	
  
90	
  
91	
  
AcAon	
  bar	
  
1.  Icono	
  de	
  aplicación	
  (con	
  o	
  sin	
  la	
  affordance	
  “up”)	
  
2.  Control	
  de	
  vi...
Back	
  
94	
  
Up	
  vs	
  back	
  
96	
  
97	
  
SiAos	
  web	
  móviles	
  
98
99
Webs	
  opAmizadas	
  para	
  móvil	
  
100
Jakob	
  Nielsen	
  
Theresa	
  Neil	
   101	
  
Theresa	
  Neil	
   102	
  
103	
  
Webs	
  opAmizadas	
  para	
  móvil	
  
•  Si>o	
  web	
  op>mizado	
  para	
  móviles	
  separado	
  
•  Redirigir	
  los...
CríAca	
  
“Mobile	
  is	
  not	
  less”	
  
	
  
—	
  Josh	
  Clark	
  
	
  
	
  
	
  
105
106
Es	
  importante…	
  
•  No	
  confundir	
  contexto	
  con	
  intención	
  
•  No	
  asumir	
  más	
  de	
  la	
  cuenta	...
Contra-­‐estrategias	
  
•  Enfa>zar,	
  no	
  eliminar	
  
•  U>lizar	
  “progressive	
  enhancement”	
  (mejora	
  
prog...
109
Mobile	
  first	
  
110
Luke	
  Wroblewski	
  
Empezar	
  pequeño	
  y	
  mejorar	
  hacia	
  
arriba	
  
•  Empezar	
  por	
  defecto	
  con	
  lo	
  principal	
  
•  B...
Luke	
  Wroblewsky	
   112	
  
Luke	
  Wroblewsky	
  
	
  
113	
  
Luke	
  Wroblewsky	
   114	
  
Luke	
  Wroblewsky	
  
	
  
115	
  
Móvil	
  primero	
  	
  
•  Te	
  fuerza	
  a	
  focalizar	
  y	
  priorizar	
  tus	
  productos	
  
teniendo	
  en	
  cue...
AdapAve	
  Content	
  
117
Karen	
  McGrane	
  
Karen	
  McGrane	
   118
Karen	
  McGrane	
   119
Karen	
  McGrane	
   120
"Content	
  is	
  the	
  main	
  reason	
  we	
  use	
  our	
  mobile	
  
devices	
  (aside	
  from	
  Angry	
  Birds)".	
...
Contenido	
  antes	
  que	
  la	
  plataforma	
  
Contenido	
  >	
  Contenedor	
  
122
Planteamiento	
  
Contenido	
  adapta>vo:	
  
	
  
•  Es	
  más	
  que	
  “móvil”.	
  
•  Contenido	
  en	
  un	
  formato...
Responsive	
  web	
  design	
  
124
Ethan	
  MarcoJe	
  
•  El	
  diseño	
  se	
  adapta	
  al	
  tamaño	
  y	
  orientación	
  de	
  
la	
  pantalla	
  y	
  al	
  disposi>vo	
  q...
¿Cómo?	
  	
  
•  Grilla	
  fluida:	
  columnas	
  basadas	
  en	
  porcentajes	
  que	
  cambian	
  de	
  forma	
  flexible...
127
128
129
130
131	
  
132	
  
Diseñar	
  para	
  mulAdisposiAvo	
  
Cambiamos	
  de	
  disposiAvos	
  a	
  lo	
  largo	
  del	
  día	
  
Anna	
  Dahlström	
   134
NFL	
   135
hJps://www.youtube.com/watch?v=qn7RfQU1MJg	
  
Google	
   136
Google	
   137
Rachel	
  Hinman	
   138	
  
Coherencia	
   Sincronización	
   Compar>ción	
  de	
  pantalla	
  
Cambio	
  de	
  disposi>v...
Internet	
  de	
  las	
  cosas	
  
140
141	
  
Paradigma	
  móvil	
  emergente	
  
Luke	
  Wroblewski	
   143
Disfrutar	
  tocando	
  
Organizar	
  la	
  interfaz	
  para	
  tocar	
  
Al	
  alcance	
  de	
  la	
  mano	
  
Al	
  alca...
Diseñar	
  para	
  tocar	
  
146
“You’re	
  
designing	
  a	
  
physical	
  device”	
  
Josh	
  Clark	
  
147
Definir	
  y	
  organizar	
  la	
  interfaz	
  también	
  
para	
  tocar	
  
148
¿Cómo	
  sujetamos	
  el	
  móvil?	
  
49%
36%
15%
	
  Steven	
  Hoober	
   149
49%
36%
75%
Steven	
  Hoober	
   150
26%
10%
36%
Steven	
  Hoober	
   151
90% 10%
Steven	
  Hoober	
   152
Raizlabs	
  
Áreas	
  de	
  interacción	
  
153	
  
154	
  
	
  
Situar	
  las	
  acciones	
  arriesgadas	
  o	
  los	
  
elementos	
  UI	
  auxiliares	
  
	
  
	
  
Poner	
 ...
155	
  Rachel	
  Hinman	
  
156	
  Rachel	
  Hinman	
  
157	
  Josh	
  Clark	
  
Luke	
  Wroblewski	
   158	
  
159	
  zzzz	
  
160	
  Josh	
  Clark	
  
•  Aplicaciones	
  iOS	
  
– Navegación	
  en	
  la	
  parte	
  inferior	
  de	
  la	
  pantalla	
  
•  Aplicaciones	
  An...
Steven	
  Hoober	
  
“We	
  know	
  that	
  
this	
  diagram	
  is	
  
wrong	
  ”	
  
Steven	
  Hoober	
  
162	
  
@shoobe01!
#UXPA2014!
163	
  
164	
  
Steven	
  Hoober	
  
Los	
  usuarios	
  prefieren	
  tocar	
  el	
  centro	
  
de	
  la	
  pantalla	
  
165	
  
Steven	
  Hoober	
   166	
  
Steven	
  Hoober	
   167	
  
•  Situar	
  las	
  acciones	
  principales	
  en	
  el	
  centro	
  
•  Situar	
  las	
  acciones	
  secundarias	
  arrib...
 
	
  Diseñar	
  en	
  función	
  de	
  cómo	
  
sos>enen	
  el	
  disposi>vo	
  los	
  usuarios	
  
	
  
169
Postura	
  tableta	
  
Luke	
  Wroblewski	
   170
171
Áreas	
  de	
  interacción	
  
D.	
  Saffer	
  
	
  
L.	
  Wroblewski	
  
	
  
Acciones arriesgadas o elementos
UI auxi...
172	
  
Facilitar	
  las	
  acciones	
  
principales	
  
173
Es	
  imposible	
  llegar	
  
sin	
  levantar	
  la	
  mano	
  
174
175
Evitar	
  situar	
  
controles	
  en	
  el	
  
centro	
  superior	
  
176
 
Lectura	
  cómoda	
  
	
  
R.	
  Hinman	
   177
 
Portapapeles	
  
	
  
R.	
  Hinman	
   178
Al	
  alcance	
  de	
  la	
  mano	
  
Boring	
  et	
  al.	
  
	
  
Facilitar	
  el	
  movimiento	
  de	
  la	
  mano	
  
	
  
180
181
182
183
 	
  Al	
  alcance	
  del	
  disposiAvo	
  periférico	
  de	
  
introducción	
  de	
  datos	
  en	
  el	
  sistema	
  	
  ...
Yema/pulpejo:	
  
	
  10-­‐14	
  mm	
  
	
  Punta:	
  
	
  8-­‐10	
  mm	
  
	
  
Adecuación	
  de	
  los	
  elementos	
  d...
Tamaño	
  del	
  objeAvo	
  
7	
  mm	
  
Aceptable	
  7	
  mm	
  
ÓpAmo	
  por	
  precisión	
  
9	
  mm	
  
9	
  mm	
  
§...
 
El	
  tamaño	
  del	
  obje>vo	
  influye	
  
en	
  la	
  tasa	
  de	
  errores	
  
	
  
Microso}	
   187
Tocar	
  es	
  impreciso	
  
•  Los	
  obje>vos	
  tác>les	
  deben	
  ser	
  lo	
  más	
  
grandes	
  posible	
  
•  Tap	...
Espacio	
  en	
  blanco	
  entre	
  objeAvos	
  
2	
  mm	
  
	
  
2	
  mm	
  (al	
  menos)	
  de	
  separación	
  visual	
...
Zona	
  pulsable	
  
La	
  zona	
  pulsable	
  debe	
  ser	
  igual	
  o	
  mayor	
  al	
  
tamaño	
  real	
  (visual)	
  ...
El	
  espacio	
  muerto	
  reduce	
  el	
  peligro	
  de	
  pulsar	
  
otro	
  botón	
  por	
  equivocación.	
  
Espacio	
...
Enviar	
  el	
  correo	
  en	
  
lugar	
  de	
  añadir	
  otro	
  
des>natario.	
  
192
Enviar	
  el	
  correo	
  en	
  
lugar	
  de	
  añadir	
  otro	
  
des>natario.	
  
	
  
Borrar	
  el	
  correo	
  en	
  
...
Espacio	
  en	
  blanco	
  entre	
  objeAvos	
  
194
S.	
  Hoober	
  
Los	
  obje>vos	
  tác>les	
  deben	
  estar	
  al	
...
195
Interacción	
  mulAtácAl	
  
Gestos	
  básicos	
  
L.	
  Wroblewski	
  et	
  al.	
   197
 
Permi>r	
  la	
  interacción	
  múl>ple	
  
	
  
L.	
  Wroblewski	
  et	
  al.	
   198
Lorient	
   199
 
Permi>r	
  usar	
  la	
  pantalla	
  entera	
  como	
  control	
  
	
  
200
 
Permi>r	
  usar	
  la	
  pantalla	
  entera	
  como	
  control	
  
	
  
201
Para	
  definir	
  gestos	
  en	
  una	
  aplicación:	
  
	
  
1.  Asegurar	
  que	
  el	
  acceso	
  a	
  contenidos	
  y	...
 
Cuanto	
  más	
  complicados	
  sean	
  los	
  gestos,	
  
menos	
  personas	
  podrán	
  realizarlos	
  
	
  
	
  
203	...
Escala	
  intuiAva	
  de	
  gestos	
  
204	
  Five	
  WorkLight	
  
Emular	
  las	
  interacciones	
  “naturales”	
  
NUI	
  exploits	
  skills	
  that	
  we	
  
have	
  acquired	
  through	
  a	
  
life>me	
  of	
  living	
  in	
  the	
  
...
Interacción	
  y	
  manipulación	
  directa	
  
 
Acción	
  –	
  reacción/percepción	
  están	
  
cerca,	
  similar	
  al	
  mundo	
  †sico	
  
	
  
B. Pagán 208
1	
  
2	
  
3	
  
4	
  
209
 
El	
  contenido	
  es	
  lo	
  principal	
  
	
  
210
 
Dedicar	
  el	
  máximo	
  espacio	
  
posible	
  al	
  contenido	
  
	
  
211
 
Minimizar	
  el	
  uso	
  del	
  chrome	
  
	
  
212
Chrome	
  is	
  the	
  visual	
  design	
  
elements	
  that	
  give	
  users	
  informa>on	
  
about	
  or	
  commands	
 ...
 
Minimizar	
  el	
  uso	
  del	
  chrome	
  
	
  
214
 
Interactuar	
  directamente	
  con	
  el	
  contenido	
  
	
  
215
 
Interactuar	
  directamente	
  con	
  el	
  contenido	
  
	
  
216
 
Interactuar	
  directamente	
  con	
  el	
  contenido	
  
	
  
217
 
Interactuar	
  directamente	
  con	
  el	
  contenido	
  
	
  
218
 
Interactuar	
  directamente	
  con	
  el	
  contenido	
  
	
  
219
Sensación	
  de	
  realismo	
  
When	
  appropriate,	
  add	
  a	
  realis>c,	
  
physical	
  dimension	
  to	
  your	
  applica>on.	
  
O}en,	
  the	
  m...
Feedback:	
  respuesta	
  inmediata	
  al	
  toque	
  del	
  usuario	
  
Manipulación	
  directa	
  del	
  contenido,	
  e...
U>lización	
  de	
  metáforas	
  del	
  mundo	
  †sico	
  
223
Realismo	
  visual	
  =	
  realismo	
  de	
  interacción	
  
224
Esqueomorfismo	
  
Antiguo
Kitch
225
Google	
   226	
  
227
•  Dificultad	
  de	
  descubrir	
  qué	
  es	
  pulsable	
  
(affordance)	
  
•  Más	
  di†cil	
  de	
  aprender	
  	
  
• ...
229
Feedback	
  inmediato	
  
(en	
  Aempo	
  y	
  espacio)	
  
 Arturo	
  Toledo	
   231
232
233
234
235
Lookand Feel
§ 	
  	
  Visual	
  
§ 	
  	
  Sonoro	
  
§ 	
  	
  Tác>l	
  
Feedback	
  visual	
  es	
  el	
  
principal	
  y	
  más	
  importante	
  
236
Cambiar	
  	
  de	
  
color	
  
Cambiar	
  de	
  tamaño	
  
Moverse	
  
237
Feedback	
  inmediato:	
  el	
  contenido	
  
debe	
  seguir	
  a	
  los	
  dedos	
  
238
Feedback	
  mulAmodal	
  
239	
  
Feedback	
  mulAmodal	
  
240	
  
Al	
  hacer	
  una	
  foto:	
  
§ Se	
  muestra	
  una	
  animación.	
  
§ Se	
  repro...
Animación:	
  interacción	
  más	
  natural	
  
Inercia	
  
	
  
Sensación	
  de	
  realismo	
  usando	
  
efectos	
  del	
  mundo	
  †sico	
  
	
  
	
  
Aceleración	
  y...
243
Mejora	
  la	
  orientación	
  	
  
Las	
  transiciones	
  visuales	
  mejoran	
  la	
  
comprensión	
  de	
  lo	
  que	
 ...
245
La percepción periférica del movimiento es eficiente
Dirige	
  la	
  atención	
  del	
  usuario	
  
Puede ayudar en los ca...
Dirige	
  la	
  atención	
  del	
  usuario	
  
247
Dirige	
  la	
  atención	
  del	
  usuario	
  
248
Las	
  transiciones	
  suaves	
  añaden	
  realismo	
  
Ofrece	
  con>nuidad	
  y	
  man>ene	
  el	
  flujo	
  
Crea	
  con...
250
251
Reducir	
  el	
  cambio	
  de	
  pantallas	
  	
  puede	
  mantener	
  el	
  flujo	
  
Ofrece	
  con>nuidad	
  y	
  man>ene...
253	
  
Busca	
  las	
  diferencias	
  
	
  Bill	
  ScoJ	
  
254	
  
Inténtalo	
  otra	
  vez…	
  
	
  Bill	
  ScoJ	
  
255
256
257
Disfrutar	
  tocando	
  
El	
  placer	
  de	
  la	
  interacción	
  
tác>l,	
  disfrutar	
  haciendo	
  
259
Buenas	
  prácAcas	
  
Layout	
  
262
263	
  Luke	
  Wroblewski	
  
264	
  
265	
  Luke	
  Wroblewski	
  
Interacción	
  	
  
principal	
  
Estructurar	
  la	
  interfaz	
  
266	
  Josh	
  Clark	
  
Estructurar	
  la	
  interfaz	
  
267	
  Android	
  
268	
  
	
  
Contenido	
  lo	
  primero,	
  
navegación	
  lo	
  segundo	
  
	
  
269	
  
Contenido	
  máximo,	
  navegación	
  mínima	
  
Luke	
  Wroblewski	
  
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
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
272	
  Luke	
  Wroblewski	
  
Aportar	
  valor	
  inmediatamente	
  
In	
  the	
  new	
  app,	
  we	
  present	
  relevant...
Centrarse	
  en	
  las	
  tareas	
  clave	
  
273	
  
Priori>ze	
  content	
  for	
  mobile	
  users	
  
	
  
Priorizar	
  contenidos	
  para	
  los	
  
usuarios	
  en	
  movil...
Simplificar	
  la	
  interfaz	
  
275	
  J.	
  Nielsen	
  &	
  R.	
  Budio	
  
Simplificar	
  la	
  interfaz	
  
276	
  
Simplificar	
  la	
  interfaz	
  
Mostrar	
  una	
  gran	
  idea	
  por	
  pantalla	
  
Jeremy	
  Olson	
   277
Revelar	
  más	
  información	
  
•  Fuera	
  de	
  la	
  pantalla	
  por	
  defecto	
  
•  Presentación	
  progresiva	
  ...
Luke	
  Wroblewski	
  
	
  
279	
  
280	
  Luke	
  Wroblewski	
   280
281	
  Luke	
  Wroblewski	
  
282	
  
	
  
Acciones	
  principales	
  
	
  
Contenido	
  principal	
  
	
  
Navegación	
  
	
  
Contenido	
  secundario	...
Controlar la complejidad mostrando la
información necesaria en cada momento.
Presentación	
  progresiva	
  
283	
  
La	
  revelación	
  progresiva	
  difiere	
  las	
  
caracterís>cas	
  avanzadas	
  o	
  rara	
  vez	
  u>lizadas	
  
a	
  ...
285
286
Presentación	
  progresiva	
  
287	
  
Josh	
  Clark	
  
Presentación	
  progresiva	
  
288	
  
Josh	
  Clark	
  
“Clarity	
  trumps	
  density”	
  
	
  	
  	
  	
  	
  	
  	
  	
...
Presentación	
  progresiva	
  
289	
  
Presentación	
  progresiva	
  
290	
  
Josh	
  Clark	
  
Presentación	
  progresiva	
  
291	
  
“Op>mize	
  each	
  screen	
  for	
  the	
  
primary	
  task”	
  
	
   	
  Josh	
  ...
Acordeón	
  
292
Carrusel	
  
	
  
Dejar	
  clara	
  la	
  navegación	
  
	
  
293
Carrusel	
  
	
  
Navegación	
  explícita	
  
	
  
	
  
Indicar	
  dónde	
  se	
  está	
  
respecto	
  al	
  total	
  
	
 ...
Carrusel	
  
	
  
Ofrecer	
  pistas	
  de	
  los	
  gestos	
  
	
  
	
  
Tác>l	
  como	
  mejora	
  	
  
	
  
295
Aprovechar	
  las	
  ventajas	
  del	
  móvil	
  
296	
  
”
“Mobile	
  is	
  not	
  less	
  but	
  more.	
  Mobile	
  has	...
Mecanismos	
  del	
  disposiAvo	
  
297	
  
	
  
¿Cómo	
  puedo	
  usar	
  estos	
  mecanismos?	
  
	
  
Henrik	
  Olsen	
...
Mecanismos	
  del	
  disposiAvo	
  
298	
  Henrik	
  Olsen	
  
	
  
¿Cómo	
  puedo	
  usar	
  estos	
  mecanismos?	
  
	
  
299	
  
Formularios	
  
301	
  
La regla general es limitar
el uso de formularios en
el contexto móvil
	
  
Brian	
  Flig	
  
	
  “	
  	
  
	
  
E...
TransmiAr	
  visualmente	
  sensación	
  de	
  
facilidad	
  
	
  
Luke	
  Wroblewski	
  
	
  
302	
  
	
  
Simplificar	
  ...
Reducir	
  la	
  introducción	
  de	
  datos	
  
Barron	
  Cuadrro	
  
	
  
303	
  
	
  
No	
  solicitar	
  datos	
  
	
  
Barron	
  Cuadrro	
  
	
  
304	
  
Barron	
  Cuadrro	
  
	
  
305	
  
En	
  web	
  no	
  es	
  muy	
  
adecuado.	
  
	
  
Menos	
  en	
  móvil.	
  
	
  
No	
...
Barron	
  Cuadrro	
  
	
  
306	
  
	
  
No	
  solicitar	
  datos…	
  a	
  no	
  ser	
  que	
  
sean	
  absolutamente	
  ne...
 
Rellenar	
  	
  por	
  defecto	
  el	
  formulario	
  con	
  
los	
  datos	
  personales	
  conocidos	
  
	
  
	
  
Usar...
308	
  
	
  
Aprovechar	
  los	
  datos	
  que	
  
ya	
  conoce	
  el	
  disposi>vo.	
  
	
  
309	
  
	
  
Aprovechar	
  las	
  posibilidades	
  
del	
  disposi>vo.	
  
	
  
310
Brad	
  Frost	
   311	
  
	
  
Información	
  que	
  puede	
  saber	
  
el	
  sistema	
  
	
  
Simplificar	
  	
  
312	
  
	
  
Eliminar	
  los	
  campos	
  
innecesarios	
  o	
  repe>ciones	
  
	
  
313	
  
Luke	
  Wroblewski	
  
	
  
314	
  
	
  
Esconder	
  los	
  campos	
  
innecesarios	
  
	
  
Elegir	
  el	
  método	
  de	
  input	
  más	
  fácil	
  	
  
315	
  
	
  
Botones	
  con	
  tamaño	
  suficiente	
  
	
  
 
Radio	
  buJons	
  con	
  tamaño	
  e	
  
interespacio	
  suficiente	
  
	
  
	
  
Check	
  boxes	
  con	
  tamaño	
  e	
...
 
Desplegables	
  no	
  son	
  eficientes	
  
	
  
317	
  
Luke	
  Wroblewski	
  
	
  
318	
  
Luke	
  Wroblewski	
  
	
  
319	
  
320	
  
Luke	
  Wroblewski	
  
	
  
321	
  
Destacar	
  la	
  acción	
  principal	
  de	
  las	
  
secundarias	
  
322	
  
323	
  
324	
  
325	
  
326	
  
Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”
Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”
Próxima SlideShare
Cargando en…5
×

Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”

535 visualizaciones

Publicado el

El pasado 17 de diciembre de 2014 tuvo lugar la sesión técnica de la que os informamos hace días. En ella los participantes tuvieron ocasión de profundizar con Armando Fidalgo sobre el diseño de interfaces en dispositivos móviles.

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.

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.

Publicado en: Tecnología
0 comentarios
2 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
535
En SlideShare
0
De insertados
0
Número de insertados
4
Acciones
Compartido
0
Descargas
18
Comentarios
0
Recomendaciones
2
Insertados 0
No insertados

No hay notas en la diapositiva.

Material de la sesión técnica sobre “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  

×