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

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

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

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

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.

8

Web Responsive

9

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

10

Native apps

11

Y llegaron lasPWA para cambiarlo todo.

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

14

Bootstrap grid

15

¿Os resulta familiar?

16

Material design

17

iOS Human Interaction Guidelines

18

iOS vs android

19

Hergonomía

20

Convergencia y estandarización

21

¿Se están volviendo predecibles y aburridaslas experiencias digitales?

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

25

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

26

Muchas variantes

27

Poca hergonomía

28

La Tab bar entra en juego

30

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

Tab bar

31

Arriba o abajo

32

Bottom Tab bar

33

Tab bar + Bottom Hamburger Menu

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?

36

Feedback de confirmaciónAportando información sobre el estado del proceso

37

DinamisimoAnimaciones que aportan atractivo

38

AdecuaciónDe estructura diseño y animación

39

Potenciar la imagenCobra relevancia en categorías y fichas de producto

40

Cobra relevancia en categorías y fichas de producto

Potenciar la imagen

41

Abusar de ello puede generar distracción y ser contraproducente

Evitar excesos

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

44

Traducción optimizadaReestructuración natural de cualquier formulario desktop

45

El scroll es relativoEl usuario está acostumbrado en mobile pero un exceso puede ser contraproducente

46

Anclar elementosDejar siempre visibles de forma fija los CTA´s o elementos relevantes

47

Trabajo por capasEl usuario está acostumbrado pero no hemos de abusar

48

Secuenciar el procesoUbicar al usuario para reducir su incertidumbre

49

Indicar el progresoDejarle claro al user cuántos pasos le quedan para completar la acción

52

La tendencia genera convenciónsi es aceptada

53

¿Preguntas?