Diseñoen aplicaciones móviles

Claves a tener en cuenta

Crea idea de marca

Una parte CRUCIAL del diseño de tu app es el tratamiento correcto del COLOR

Descuidar la “personalidad” de tu app

Lo que

NOdebes hacer

Utiliza un color para enfatizar tu idea de marcay los elementos importantes de la app

Utiliza la action bar para acentuar tu marca

El usuario de una Appno mira,

OJEA

Enlaces linkables, palabras destacadas, botones de acción... aplicar TU COLOR a estos elementos te ayudará a dotar de

fuerza visual y jerarquía el diseño de tu app.

Utiliza un color para señalar cuales son los elementos STANDARD de interacción.

Es un elemento de usabilidad muy potente

Ayudamos al usuario a identificar mejor los elementos de interacción

El ojo humano no ve la info. superflua y elige directamente aquello con lo que puede interactuar

Facilitamos el uso de nuestra app

por lo que...

por lo que...

@isaezdesign

455

Mi Biografía

Mi Trabajo

Mis Seguidores

Mis Libros favoritos

Mi música preferida

@isaezdesign

455

Mi Biografía

Mi Trabajo

Mis Seguidores

Mis Libros favoritos

Mi música preferida

Si abusamos del color TODO GRITA,

los elementos no se jerarquizan y no ayudamos al

usaurio a guiarse a través de la

aplicación.

Una paleta de colores reducida afianzará nuestra identidad de marca, nos hará más reconocibles y perdurables en la memoria.

Lo que

NOdebes hacer

Crea experiencias inmersivas

Focaliza lo que está haciendo o viendo el usuario: sin distracciones visuales.

Delante y detrás: Lo que estoy viendo ahora resalta sobre el 2º plano

Uso de desenfoque u oscurecimiento del 2º plano como recurso para focalizar en la información actual.

En la visualización de videos o aplicaciones de lectura es muy útil esconder las barras superior e inferior.

Despejar la pantalla, la zona de lectura, de elementos molestos.

Modo inmersivo

Las action bar tienen demasiado protagonismo

Con algo de transparencia y usan-do la ocultación creamos una

experiencia más inmersiva. Sin distacciones.

M M

Lo que

NOdebes hacer

Lo que

Sídebes hacer

Lo que

Sídebes hacer

Barras traslúcidas, con gradiente de sólido a transparente... hay varios recursos para que éstas no sean molestas en la app.

Desaparecen todos los iconos y barras para que el video sea el protagonista.Si tocamos la pantalla aparecen de nuevo para interactuar con la aplicación.

Lo que

Sídebes hacer

Las imágenes son más rápidas que las palabras

Algunos tips sobreel uso de imágenes

El ojo humano se dirige primero a las imágenes, porque son más fáciles de interpretar para el cerebro y nos suelen aportar mayor información que las palabras.

Algunos tips sobre el uso de imágenes

1

Deben ser flexibles para los distintos tamaños de dispositivos, sin deformarse.

Algunos tips sobre el uso de imágenes

2

Puedes presentar las imágenes con diferentes decoraciones para evitar

la monotonía visual.

Algunos tips sobre el uso de imágenes

3

Circa News Imágenes grandes, protagonistas.

Android design in action Uso de formatos de imágenes rectangulares , circulares...etc.

Cuidado cuando texto e imagen van solapados. El texto SIEMPRE debe ser legible

Algunos tips sobre el uso de imágenes

4

Circa News

Etsy

Airbnb

Utiliza los siguientes recursos para asegurarte la legibilidad del texto

- Leve oscurecimiento con degradado de la imagen donde vaya el texto.

- Ligero desenfoque.

Marcadores de posición (placeholders)

Si tu app tiene una gran cantidad de imágenes y hay un tiempo de carga inevitable debes colocar algo que

indique al usuario que se están cargando las imágenes

Esto evita la sensación de que se ha quedado colgada

Dar un apoyo visual de carga y ubicación mediante el uso de elementos semitransparentes.

No ocultes con colores sólidos los elementos con los que se esté interactuando, utiliza cierto grado de transparencia para que el usuario sepa en todo momento dónde está. Tener presente el feedback visual.

M M M

TOUCH FEEDBACKLo que

NOdebes hacer

Lo que

Sídebes hacer

Lo que

Sídebes hacer

De esta forma el usuario se ubica en lo que tiene y en las posibilidades que puede obtener.

Lo que

Sídebes hacer

Splash screenUna cosa del pasado

Lleva/muestra al usuario directamente el contenido no le hagas esperar

En el uso de una app CADA SEGUNDO CUENTA, es mejor ofrecer una pantalla donde ya se pueda interactuar, aunque sea muy básicamente a que

el usuario no pueda hacer nada

Una imagen de presentación no tiene por qué estar reñida con ser algo USABLE:

Imagen + acceso + splash

Los tutoriales

Algunos tips sobreel uso de tutoriales dentro de la app

Evita el uso de un tutorial, eso te obligará a simplificar tu aplicación

Algunos tips sobre el uso de tutoriales

1

Si lo primero que muestras es un tutorial dará sensación de uso complicado de la app

Algunos tips sobre el uso de tutoriales

2

Implementar un tutorial cuando se necesite y en uso de la acción a través de una pequeña animación sutíl, por ejemplo...

Algunos tips sobre el uso de tutoriales

3

Lo que

SIdebes hacer

La opción de OMITIR siempre debe aparecer, no obligues al usuario a ver un tutorial si no quiere...

Algunos tips sobre el uso de tutoriales

4

Este tipo de tutoriales aumentan el tiempo de espera para usar la app.En este caso no tiene opción de omitir tutorial lo cual es un error.

Lo que

NOdebes hacer

Algunos buenos ejemplos sobre el tema de los tutoriales...

De esta forma el usuario sabe qué posibilidades tiene sin esperas.

Lo que

Sídebes hacer

Airbnb

El usuario puede OMITIR el tutorial e ir directamente a la app ¡perfecto!

Lo que

Sídebes hacer

El login

1 No obligues al resgistro hasta que no sea totalmente necesario

El login

1

1 Debes dejar MUY CLAROS LOS BENEFICIOS DE REGISTRARSE en tu app

El login

2

1 El registro debe serRÁPIDO Y FÁCIL:

- A través de redes sociales- Email + password

El login

3

Mezcla de tutorial y login¡2x1!

Lo que

Sídebes hacer

Lo que

Sídebes hacer

Lo que

Sídebes hacer

Lo que

Sídebes hacer

Lo que

NOdebes hacer

En resumen:Evita estos errores de diseño

Enfatiza gracias al color

Las imágenes son más fuertes que las palabras

No uses Splash Screens

No obligues a registrarse al usuario antes de usar tu app

Integra redes sociales como medio de login

Genera valor de uso desde el primer segundo ¿Por qué necesitabn tu app un usuario?

¡Gracias!

@isaezdesign

izaskunsaez.esDiseño Gráfico

Diseño print Diseño web Creatividad

hola@izaskunsaez.esTwitter: isaezdesign