Post on 24-Jan-2018
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?