material de la sesión técnica sobre “patrones de diseño de interacción de interfaces...
TRANSCRIPT
1
Diseño de interfaz móvil
-‐ ¿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
¿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 recordar la úl>ma vez que no tenía mi teléfono cerca”
Los usuarios admiten que usan el móvil en el baño
11Mark. Octubre 2011. Usuarios EEUU.
75%
8
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 2011. Usuarios EEUU.
Usuarios sólo desde móviles
43%
14
28% said that the tablet is their primary computer
Usuarios sólo desde móviles
Google 15
Usuarios sólo desde móviles
“A mobile device is the internet for many people.”
—Susannah Fox, Pew Research Center
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!
• Optimizar para interacción táctil!
• Permitir el cursor & teclado!
Las personas
Foto de flickr/Clive Fint
“Mobile refers to the user, and not the device or the applica>on”.
Barbara Ballard
37
Móviles
• Personal • Communica>ve • Handheld • Wakable • The carry principle
Barbara Ballard 38
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
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
UMTS
44
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
Cómo lo usamos
“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 TraderGroup Signal
§ En movimiento § Suscep>bles a distracciones e interrupciones
§ Disponibles
49 Alexis Polegato
§ 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 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 web
66 • Chris>an Karasiewicz
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
67 Chris>an Karasiewicz
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
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.
69 Chris>an Karasiewicz
70
¡Depende! • Producto!
• Negocio!
• Usuarios!
• Capacidad técnica y recursos
disponibles!
• Tiempo disponible!
¿Cuál?
Chris>an Karasiewicz
"Define a problem. Then solve that problem and decide on what channels make sense to carry out the solu>on". — Brad Frost
71
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 (48.7%)
4.4 (33.9%)
76 An OpenSignal Report August 2014
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
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.html 79
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 pantalla y navegación
secundaria (+ acciones) Contenido/navegación principal Pestañas de navegación
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
1. Barra de acciones principales
2. Control de vistas 3. Contenido principal 4. Barra de acciones
“split”
87
88
89
Distribución de acciones
90
91
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
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 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
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 sobre el tamaño de la pantalla – No implica necesitar menos información. – No implica necesitar menos funcionalidades.
107
Contra-‐estrategias
• Enfa>zar, no eliminar • U>lizar “progressive enhancement” (mejora progresiva)
• U>lizar técnicas adapta>vas, como responsive web design
108
109
Mobile first
110
Luke Wroblewski
Empezar pequeño y mejorar hacia arriba • Empezar por defecto con lo principal • Buscar oportunidades de mejorar
111
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 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
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)". — Karen McGrande
121
Contenido antes que la plataforma
Contenido > Contenedor
122
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
Responsive web design
124
Ethan MarcoJe
• 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
¿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
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>vo Complementariedad Simultaneidad
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 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
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 las botones de acción principales y navegación
Luke Wroblewski
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 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
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 arriba y abajo
Los usuarios prefieren tocar el centro de la pantalla
168
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 auxiliares
Botones de acción principales y navegación
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
de los dedos
184
Yema/pulpejo: 10-‐14 mm
Punta: 8-‐10 mm
Adecuación de los elementos de la interfaz al tamaño de los dedos
185
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
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 el contenedor entero • Diseñar con listas y cajas grandes
188
Espacio en blanco entre objeAvos
2 mm
2 mm (al menos) de separación visual reduce errores y la percepción de dificultad.
189
Zona pulsable
La zona pulsable debe ser igual o mayor al tamaño real (visual) del botón.
190
El espacio muerto reduce el peligro de pulsar otro botón por equivocación.
Espacio muerto
191
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 lugar de guardarlo como borrador.
193
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)
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
funcionalidades principales u>liza gestos básicos.
2. Añadir gestos más complejos como atajos a las funcionalidades más usadas.
202
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 World
Bill Buxton, principal researcher en Microso}
“ ”
206
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 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
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 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
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
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 • Más di�cil de recordar
Problemas de usabilidad
228
229
Feedback inmediato (en Aempo y espacio)
Arturo Toledo 231
232
233
234
235
Look and 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 reproduce un sonido.
Animación: interacción más natural
Inercia
Sensación de realismo usando efectos del mundo �sico
Aceleración y desaceleración
Velocidad
Fricción
Elas>cidad
242
243
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
245
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
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 consistencia y con>nuidad
Las transiciones deben ser suaves y su>les para no llamar la atención hacia sí mismas
249
250
251
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
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
Navegación
Contenido
Navegación
Contenido
270
271
Navegación
Contenido
Navegación
Contenido
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
Centrarse en las tareas clave
273
Priori>ze content for mobile users
Priorizar contenidos para los usuarios en movilidad
Anna Yeaman 274
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 • Acordeón • Carrusel
278
Luke Wroblewski
279
280 Luke Wroblewski 280
281 Luke Wroblewski
282
Acciones principales
Contenido principal
Navegación
Contenido secundario
Luke Wroblewski
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 una pantalla secundaria, haciendo las aplicaciones más fáciles de aprender y menos propensas a errores. Jakob Nielsen
“
”
284
285
286
Presentación progresiva
287 Josh Clark
Presentación progresiva
288 Josh Clark
“Clarity trumps density” Josh Clark
Presentación progresiva
289
Presentación progresiva
290 Josh Clark
Presentación progresiva
291
“Op>mize each screen for the primary task”
Josh Clark
Josh Clark
Acordeón
292
Carrusel Dejar clara la navegación
293
Carrusel Navegación explícita
Indicar dónde se está respecto al total
294
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 superpowers … Sensors Give Us Superpowers” Josh Clark
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
“ Evitar introducir inpu
ts al usuario
Evitar introducir inpu
ts al usuario
… cuando sea posible
TransmiAr visualmente sensación de facilidad
Luke Wroblewski
302
Simplificar el número de elementos visuales
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 solicitar datos
Barron Cuadrro
306
No solicitar datos… a
no ser que
sean absolutamente necesarios
Solicitar el mínimo de
información necesaria para
la tarea
Rellenar por defecto
el formulario con
los datos personales conocidos
Usar el autocompletado y sugerencias
Guardar y u>lizar la h
istoria de uso
307
Mostrar seleccionado por defecto los
datos per>nentes
308
Aprovechar los datos
que
ya conoce el disposi>vo.
309
Aprovechar las posib
ilidades
del disposi>vo.
310
Brad Frost 311
Información que puede sabe
r
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 tam
año e
interespacio suficiente
Check boxes con tam
año e
interespacio suficiente
316
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