uxday 2017. ux y mobile a tres bandas. gerard.miquel.hugo
TRANSCRIPT
![Page 1: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/1.jpg)
1
UX y mobile a tres bandas
#uxday
BCN MAD SCL MDE LIM MEXBOG MIA SFOBUE
por Gerard Adell, Miquel Mir
& Hugo Fernández
![Page 2: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/2.jpg)
2
Hoy vamos a debatir sobre algunos puntos clave que pueden ayudarnos a construir una buen UX para mobile.
Patrones UX, metodología y plataformas
Hola!
![Page 3: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/3.jpg)
3
Esta metodología defiende empezar a diseñar una experiencia multidispositivo por la pantalla más pequeña, es decir, el móvil. Hace un tiempo todo el mundo hablaba de ella, pero ahora, ya no tanto ¿Por qué?
Mobile First
![Page 4: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/4.jpg)
4
¿Mobile First?Lo importante no es el dispositivo sino el contenido.
![Page 5: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/5.jpg)
7
Responsive Web vs Native AppsAntes de empezar a diseñar nuestra presencia mobile debemos tener claro qué producto vamos a diseñar en función de nuestros objetivos.
![Page 6: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/6.jpg)
8
Web Responsive
![Page 7: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/7.jpg)
9
¿Deberíamos plantear el m.site como alternativa?
![Page 8: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/8.jpg)
10
Native apps
![Page 9: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/9.jpg)
11
Y llegaron lasPWA para cambiarlo todo.
![Page 10: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/10.jpg)
13
Material design, iOS HIG, bootstrap y tantos estándares nos ayudan a diseñar experiencias usables, coherentes, más rápidamente y con la certeza de que si lo hacemos bien, la experiencia será positiva.
Usar estándares Vs Originalidad
![Page 11: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/11.jpg)
14
Bootstrap grid
![Page 12: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/12.jpg)
15
¿Os resulta familiar?
![Page 13: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/13.jpg)
16
Material design
![Page 14: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/14.jpg)
17
iOS Human Interaction Guidelines
![Page 15: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/15.jpg)
18
iOS vs android
![Page 16: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/16.jpg)
19
Hergonomía
![Page 17: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/17.jpg)
20
Convergencia y estandarización
![Page 18: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/18.jpg)
21
¿Se están volviendo predecibles y aburridaslas experiencias digitales?
![Page 19: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/19.jpg)
24
La configuración de un buen sistema navegación nos permitirá optimizar el espacio del dispositivo en relación a las funcionalidades específicas que el usuario precisa en cada momento.
Navegación
![Page 20: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/20.jpg)
25
HamburgermenúEs una tendencia muy clara, que tiene fans y detractores. Bien usada con sentido funciona, mal usada, es un desastre.
![Page 21: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/21.jpg)
26
Muchas variantes
![Page 22: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/22.jpg)
27
Poca hergonomía
![Page 23: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/23.jpg)
28
La Tab bar entra en juego
![Page 24: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/24.jpg)
30
Sobretodo en apps, su uso está muy extendido, sustituyendo el menú hamburguesa o conviviendo con el.
Tab bar
![Page 25: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/25.jpg)
31
Arriba o abajo
![Page 26: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/26.jpg)
32
Bottom Tab bar
![Page 27: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/27.jpg)
33
Tab bar + Bottom Hamburger Menu
![Page 28: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/28.jpg)
35
Animaciones & microinteraccionesLas microinteracciones y animaciones o nuevos usos de la imagen y el video se están volviendo muy comunes en las apps y webs de hoy en día. ¿Cómo y cuándo debemos usarlas?
![Page 29: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/29.jpg)
36
Feedback de confirmaciónAportando información sobre el estado del proceso
![Page 30: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/30.jpg)
37
DinamisimoAnimaciones que aportan atractivo
![Page 31: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/31.jpg)
38
AdecuaciónDe estructura diseño y animación
![Page 32: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/32.jpg)
39
Potenciar la imagenCobra relevancia en categorías y fichas de producto
![Page 33: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/33.jpg)
40
Cobra relevancia en categorías y fichas de producto
Potenciar la imagen
![Page 34: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/34.jpg)
41
Abusar de ello puede generar distracción y ser contraproducente
Evitar excesos
![Page 35: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/35.jpg)
43
Un formulario es un elemento siempre sensible en cualquier interface. Adquiere mayor relevancia en pequeños dispositivos en los que se deben optimizar al máximo los recursos.
Formularios one step VS por Pasos
![Page 36: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/36.jpg)
44
Traducción optimizadaReestructuración natural de cualquier formulario desktop
![Page 37: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/37.jpg)
45
El scroll es relativoEl usuario está acostumbrado en mobile pero un exceso puede ser contraproducente
![Page 38: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/38.jpg)
46
Anclar elementosDejar siempre visibles de forma fija los CTA´s o elementos relevantes
![Page 39: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/39.jpg)
47
Trabajo por capasEl usuario está acostumbrado pero no hemos de abusar
![Page 40: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/40.jpg)
48
Secuenciar el procesoUbicar al usuario para reducir su incertidumbre
![Page 41: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/41.jpg)
49
Indicar el progresoDejarle claro al user cuántos pasos le quedan para completar la acción
![Page 42: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/42.jpg)
52
La tendencia genera convenciónsi es aceptada
![Page 43: Uxday 2017. UX y mobile a tres bandas. Gerard.Miquel.Hugo](https://reader031.vdocuments.co/reader031/viewer/2022020103/5a676c307f8b9a0a2e8b48e7/html5/thumbnails/43.jpg)
53
¿Preguntas?