4 Tendencias de Diseño UI y de Interacción a la hora de diseñar interfaces para móviles.

1. UX Mobile Trends
SOLEDAD MORIS
UX CONSULTANT @everis
PROIN CHILE

5. 01.GESTOS

7. ¡Aburrido!

8. iOS Android GESTO
Tap Touch Activa un control o selecciona un item.
Drag Drag
Mueve un elemento de lado a lado o arrastra un elemento a través
de la pantalla.
Flick Fling Scroll o panea rápidamente.
Swipe Swipe Infinitas aplicaciones.
Doble Tap Double Touch Zoom in/zoom out.
Pinch Pinch Zoom in/zoom out.
Touch and Hold Long Press
iOS en texto, opciones. En vistas, ordenamiento de elementos.
Android.
Seleccionar elemento. NOT: Menú contextual.
Shake Deshacer ultima acción.
3D Touch!
Hacer un tap profundo que suena “clic” desplega un menú
contextual.
TOQUES BÁSICOS
Comunes entre Sistemas Operativos
REFERENCIA
iOS https://developer.apple.com/ios/human-interface-guidelines/interaction/gestures/
ANDROID https://material.google.com/patterns/gestures.html

9. THUMB ZONE EVOLUTION
Desde el 2011 hasta nuestra Era
REFERENCIA
http://scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-
screens

10. POSTURA DEL TELÉFONO
90% de los usuarios usa el pulgar para operar
REFERENCIA
http://www.lukew.com/ff/entry.asp?1944

11. GESTOS
= Toques básicos + la actividad que desencadena el toque
SCROLL
[FLICKVERTICAL]
REFRESCAR
[DRAG DOWN]
ABRIR UN MENÚ DRAWER
[SWIPE HORIZONTAL]

12. ! DO
○ Usa gestos estándar.
○ Ofrece atajos para complementar, NO
REEMPLAZAR, la navegación basada en
interfaces y acciones.
○ Usa gestos con varios dedos para mejorar
la experiencia en algunas apps (como
juegos).
GESTOS DO & DON’T
Lo IN y lo OUT en aplicación de gestos
# DON’T
○ Bloquear los gestos del sistema.
○ Usar gestos estándar para ejecutar acciones no
estándar.

13. ! DO
○ Usa gestos estándar.
○ Ofrece atajos para complementar, NO
REEMPLAZAR, la navegación basada en
interfaces y acciones.
○ Usa gestos con varios dedos para mejorar
la experiencia en algunas apps (como
juegos).
GESTOS DO & DON’T
Lo IN y lo OUT en aplicación de gestos
# DON’T
○ Bloquear los gestos del sistema.
○ Usar gestos estándar para ejecutar acciones no
estándar.

14. 02.CAPAS

15. FILOSOFÍA MATERIAL DESIGN
Capas: Elementos superpuestos unos sobre otros

16. MATERIAL DESIGN
Posicionamiento por capas
REFERENCIA
https://material.google.com/material-design/elevation-
shadows.html#elevation-shadows-elevation-android

17. POSICIONAMIENTO
Ejemplo: Posicionamiento del botón FAB
REFERENCIA
https://material.google.com/material-design/elevation-
shadows.html#elevation-shadows-elevation-android

18. POSICIONAMIENTO
Ejemplo: Posicionamiento de un Nav drawer
REFERENCIA
https://material.google.com/material-design/elevation-
shadows.html#elevation-shadows-elevation-android

19. ESTRATEGIAS iOS
Ejemplo: Uso de un fondos difusos

21. 03.TIPOGRAFÍA

22. PANTALLAS PEQUEÑAS != TEXTO PEQUEÑO

23. COPYWRITING
Keyword: Mobile first content strategy
REFERENCIA
https://material.google.com/material-design/elevation-
shadows.html#elevation-shadows-elevation-android
En la mayoría de las ocasiones, es muy conveniente hacer el
esfuerzo de reducir el número de palabras que presentamos en
las pantallas… ¿Pero por qué? Bueno, la verdad es que los
usuarios en general no leen los textos y solamente “escanean” las
vistas. Así las cosas, es muy probable que tu extenso texto jamás
sea leído en completitud por alguien en la vida, sobretodo en
formato móvil.
Recomiendo con énfasis, aplicar la tercera regla de oro de
usabilidad de Steve Krug, que visionariamente nos recomendó
antes de que llegara el formato móvil a nuestras vidas que…

25. COPYWRITING
Consejo personal: Piensa en haikú
Haikú
nombre masculino
Poema japonés de 17 sílabas nacido de la
escisión del hakai, del cual se conservaron solo
los tres versículos iniciales (de 5, 7 y 5 sílabas
respectivamente).

26. “El viejo estanque:
Se zambulle una rana.
El ruido del agua”.

28. En resumen:
Pocas palabras

29. TIPO: TRUCOS LISTOS REFERENCIA
https://www.usertesting.com/blog/2014/08/06/choosing-the-right-
font-a-guide-to-typography-and-user-experience/
😎30 A 40 CARACTERES POR LÍNEA.

30. Dale espacio a las
palabras.
TIPO: TRUCOS LISTOS

31. Jerarquiza
lo importante
de lo demás
TIPO: TRUCOS LISTOS

32. ¡Alinear!
¡Alinear!
¡Alinear!
TIPO: TRUCOS LISTOS

33. 04. MICROINTERACCIONES

34. MICROINTERACCIONES
Estrutura
REFERENCIA
http://microinteractions.com/what-is-a-microinteraction/

35. MICROINTERACCIONES
Estrutura

38. Recursos chorizos
Inspiración
https://dribbble.com/
https://www.behance.net/
Microinteractions
https://drive.google.com/file/d/0B2QTs9DAUrdPM0R4REJWRGdTaWc/view?u
sp=sharing
http://microinteractions.com/
Tipografía
http://practicaltypography.com/
http://webtypography.net/
Guidelines UI
https://material.google.com/
https://developer.apple.com/design/
Superusabilidad en móviles
http://www.lukew.com/

39. 🙏¡GRACIAS!
@solemoris
https://cl.linkedin.com/in/solemoris