Date post: | 16-Apr-2017 |
Category: |
Mobile |
Upload: | soledad-moris |
View: | 161 times |
Download: | 2 times |
UX Mobile TrendsSOLEDAD MORIS
UX CONSULTANT @everis
PROIN CHILE
01.GESTOS
¡Aburrido!
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 PressiOS 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ÁSICOSComunes entre Sistemas Operativos
REFERENCIAiOS https://developer.apple.com/ios/human-interface-guidelines/interaction/gestures/ANDROID https://material.google.com/patterns/gestures.html
THUMB ZONE EVOLUTIONDesde el 2011 hasta nuestra Era
REFERENCIAhttp://scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-screens
POSTURA DEL TELÉFONO90% de los usuarios usa el pulgar para operar
REFERENCIAhttp://www.lukew.com/ff/entry.asp?1944
GESTOS= Toques básicos + la actividad que desencadena el toque
SCROLL[FLICKVERTICAL]
REFRESCAR[DRAG DOWN]
ABRIR UN MENÚ DRAWER[SWIPE HORIZONTAL]
! 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’TLo 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.
! 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’TLo 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.
02.CAPAS
FILOSOFÍA MATERIAL DESIGNCapas: Elementos superpuestos unos sobre otros
MATERIAL DESIGNPosicionamiento por capas
REFERENCIAhttps://material.google.com/material-design/elevation-shadows.html#elevation-shadows-elevation-android
POSICIONAMIENTOEjemplo: Posicionamiento del botón FAB
REFERENCIAhttps://material.google.com/material-design/elevation-shadows.html#elevation-shadows-elevation-android
POSICIONAMIENTO Ejemplo: Posicionamiento de un Nav drawer
REFERENCIAhttps://material.google.com/material-design/elevation-shadows.html#elevation-shadows-elevation-android
ESTRATEGIAS iOS Ejemplo: Uso de un fondos difusos
03.TIPOGRAFÍA
PANTALLAS PEQUEÑAS != TEXTO PEQUEÑO
COPYWRITING Keyword: Mobile first content strategy
REFERENCIAhttps://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…
COPYWRITINGConsejo personal: Piensa en haikú
Haikúnombre masculinoPoema 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).
“El viejo estanque:Se zambulle una rana.
El ruido del agua”.
En resumen:Pocas palabras
TIPO: TRUCOS LISTOS REFERENCIAhttps://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.
Dale espacio a las palabras.
TIPO: TRUCOS LISTOS
Jerarquizalo importante
de lo demás
TIPO: TRUCOS LISTOS
¡Alinear!¡Alinear!¡Alinear!
TIPO: TRUCOS LISTOS
04. MICROINTERACCIONES
MICROINTERACCIONESEstrutura
REFERENCIAhttp://microinteractions.com/what-is-a-microinteraction/
MICROINTERACCIONESEstrutura
Recursos chorizos
Inspiraciónhttps://dribbble.com/https://www.behance.net/
Microinteractionshttps://drive.google.com/file/d/0B2QTs9DAUrdPM0R4REJWRGdTaWc/view?usp=sharinghttp://microinteractions.com/
Tipografíahttp://practicaltypography.com/http://webtypography.net/
Guidelines UIhttps://material.google.com/https://developer.apple.com/design/
Superusabilidad en móvileshttp://www.lukew.com/
🙏¡GRACIAS!
@solemorishttps://cl.linkedin.com/in/solemoris