mobile trends 2016

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