El documento discute varios puntos clave para diseñar una buena experiencia de usuario (UX) para dispositivos móviles, incluyendo si el enfoque "mobile first" sigue siendo relevante, las ventajas de las aplicaciones web responsive frente a las aplicaciones nativas, el uso efectivo de la navegación, animaciones y microinteracciones, y el diseño optimizado de formularios para pantallas pequeñas.

1. 1
UX y mobile a tres bandas
#uxday
BCN MAD SCL MDE LIM MEXBOG MIA SFOBUE
por Gerard Adell, Miquel Mir
& Hugo Fernández

2. 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!

3. 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

4. 4
¿Mobile First?
Lo importante no
es el dispositivo
sino el
contenido.

5. 7
Responsive Web vs
Native Apps
Antes de empezar a diseñar nuestra presencia mobile
debemos tener claro qué producto vamos a diseñar en función
de nuestros objetivos.

6. 8
Web
Responsive

7. 9
¿Deberíamos
plantear el m.site
como
alternativa?

8. 10
Native apps

9. 11
Y llegaron las
PWA para
cambiarlo
todo.

10. 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

11. 14
Bootstrap grid

12. 15
¿Os resulta familiar?

13. 16
Material design

14. 17
iOS Human Interaction Guidelines

15. 18
iOS vs android

16. 19
Hergonomía

17. 20
Convergencia y estandarización

18. 21
¿Se están volviendo
predecibles y aburridas
las experiencias
digitales?

19. 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

20. 25
Hamburger
menú
Es una tendencia muy clara,
que tiene fans y detractores.
Bien usada con sentido
funciona, mal usada, es un
desastre.

21. 26
Muchas variantes

22. 27
Poca hergonomía

23. 28
La Tab bar entra en juego

24. 30
Sobretodo en apps, su uso está
muy extendido, sustituyendo el
menú hamburguesa o
conviviendo con el.
Tab bar

25. 31
Arriba o abajo

26. 32
Bottom Tab bar

27. 33
Tab bar + Bottom Hamburger Menu

28. 35
Animaciones &
microinteracciones
Las 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?

29. 36
Feedback de confirmación
Aportando información sobre el estado del proceso

30. 37
Dinamisimo
Animaciones que aportan atractivo

31. 38
Adecuación
De estructura diseño y animación

32. 39
Potenciar la imagen
Cobra relevancia en categorías y fichas de producto

33. 40
Cobra relevancia en categorías y fichas de producto
Potenciar la imagen

34. 41
Abusar de ello puede generar distracción y ser contraproducente
Evitar excesos

35. 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

36. 44
Traducción optimizada
Reestructuración natural de cualquier formulario desktop

37. 45
El scroll es relativo
El usuario está acostumbrado en mobile pero un exceso puede ser contraproducente

38. 46
Anclar elementos
Dejar siempre visibles de forma fija los CTA´s o elementos relevantes

39. 47
Trabajo por capas
El usuario está acostumbrado pero no hemos de abusar

40. 48
Secuenciar el proceso
Ubicar al usuario para reducir su incertidumbre

41. 49
Indicar el progreso
Dejarle claro al user cuántos pasos le quedan para completar la acción

42. 52
La tendencia
genera
convención
si es aceptada

43. 53
¿Preguntas?