Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile Trends 2016

439 views

Published on

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

Published in: Mobile
  • Login to see the comments

Mobile Trends 2016

  1. 1. UX Mobile Trends SOLEDAD MORIS UX CONSULTANT @everis PROIN CHILE
  2. 2. 01.GESTOS
  3. 3. ¡Aburrido!
  4. 4. 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
  5. 5. 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
  6. 6. POSTURA DEL TELÉFONO 90% de los usuarios usa el pulgar para operar REFERENCIA http://www.lukew.com/ff/entry.asp?1944
  7. 7. GESTOS = Toques básicos + la actividad que desencadena el toque SCROLL [FLICKVERTICAL] REFRESCAR [DRAG DOWN] ABRIR UN MENÚ DRAWER [SWIPE HORIZONTAL]
  8. 8. ! 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.
  9. 9. ! 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.
  10. 10. 02.CAPAS
  11. 11. FILOSOFÍA MATERIAL DESIGN Capas: Elementos superpuestos unos sobre otros
  12. 12. MATERIAL DESIGN Posicionamiento por capas REFERENCIA https://material.google.com/material-design/elevation- shadows.html#elevation-shadows-elevation-android
  13. 13. POSICIONAMIENTO Ejemplo: Posicionamiento del botón FAB REFERENCIA https://material.google.com/material-design/elevation- shadows.html#elevation-shadows-elevation-android
  14. 14. POSICIONAMIENTO Ejemplo: Posicionamiento de un Nav drawer REFERENCIA https://material.google.com/material-design/elevation- shadows.html#elevation-shadows-elevation-android
  15. 15. ESTRATEGIAS iOS Ejemplo: Uso de un fondos difusos
  16. 16. 03.TIPOGRAFÍA
  17. 17. PANTALLAS PEQUEÑAS != TEXTO PEQUEÑO
  18. 18. 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…
  19. 19. 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).
  20. 20. “El viejo estanque: Se zambulle una rana. El ruido del agua”.
  21. 21. En resumen: Pocas palabras
  22. 22. 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.
  23. 23. Dale espacio a las palabras. TIPO: TRUCOS LISTOS
  24. 24. Jerarquiza lo importante de lo demás TIPO: TRUCOS LISTOS
  25. 25. ¡Alinear! ¡Alinear! ¡Alinear! TIPO: TRUCOS LISTOS
  26. 26. 04. MICROINTERACCIONES
  27. 27. MICROINTERACCIONES Estrutura REFERENCIA http://microinteractions.com/what-is-a-microinteraction/
  28. 28. MICROINTERACCIONES Estrutura
  29. 29. 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/
  30. 30. 🙏¡GRACIAS! @solemoris https://cl.linkedin.com/in/solemoris

×