En el diseño de aplicaciones móviles es importante tener en cuenta aspectos como el color, el tamaño de los elementos o la cantidad de información que mostramos al usuario de una sola vez. En esta presentación analizo una seri de aplicaciones y doy las claves para pensar las cosas antes de diseñarlas.

1. Diseño y usabilidad
en aplicaciones móviles

2. @isaezdesign
izaskunsaez.es
Diseño Gráfico
Diseño print
Diseño web
Creatividad
hola@izaskunsaez.es

3. El color
El tamaño importa
Simplifica

4. El Color

5. Define la marca / Branding
Ayuda a jerarquizar
Guía al usuario visualmente

6. El color

7. El color

8. El color

9. Escoge una paleta de colores reducida
esto creará idea de marca

10. El color

11. El color
Define la marca / Branding
Ayuda a jerarquizar
Guía al usuario visualmente

12. El color
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.
@isaezdesign
5
@isaezdesign
45
5
45
Mi Biografía
Mi Biografía
Mi Trabajo
Mi Trabajo
Mis Seguidores
Mis Seguidores
Mis Libros favoritos
Mis Libros favoritos
Mi música preferida
Mi música preferida
Una paleta de
colores reducida
afianzará nuestra
identidad de
marca, nos hará
más reconocibles
y perdurables en la
memoria.

13. El color
SOMOS ANIMALES VISUALES
Dos aplicaciones con información
de Londres.
En una han diseñado un menú
simplemente basado en texto, sin
ningún tipo de ayuda visual.
En la 2ª opción han usado el color
para hacer diferenciaciones entre
los diferentes aspectos del menú,
de forma que con el uso habitual de
la aplicación llegará un momento
en que si, por ejemplo, vamos a la
sección de MAP en lugar de leer la
palabra solo veremos el color
y la respuesta por parte del usuario
será mucho más rápida y por tanto
la usabilidad será mayor.

15. El tamaño importa
Photo: Ariel Zambelich/Wired

16. El tamaño importa
ESPACIO DE INTERACTUACIÓN
Los espacios de interacción en
una aplicación móvil deben ser lo
suficientemente grandes para poder
interactuar con comodidad.
Eliminar los aspectos que no
son relevantes como botones
que no son de acción directa o
características que no aportan
nada relevante y que solo agobian
visualmente el diseño y no apoyan
a al usabilidad de al app es de suma
importancia.
En estos ejemplos, vemos como
los elementos de una y otra
aplicación son de muy diferente
tamaño: en el diseño superior han
tenido en cuenta que se trata de
una aplicación donde el usuario
interactuará directamente con
los platos de DJ y por eso le han
dado mucho más tamaño que en el
ejemplo inferior.

17. El tamaño importa
EL TAMAÑO DE LOS BOTONES
En este ejemplo de nuevo nos
encontramos ante una 1ª aplicación
donde los botones de acción son
demasiado pequeños y están muy
juntos entre sí.
En el 2º diseño vemos como todo
está más euqilibrado visualmente,
con iconos lo suficientemente
grandes para interactuar con
nuestro dedo y con en espaciado
entre los elementos que facilita
pulsar sobre lo que queremos sin
errar.

18. ¡Simplifica!

19. Simplifica
DAME AIRE
El diseño en una aplicación debe
respirar, esto es, no saturar al
usuario visualmente con un exceso
de información de una sola vez.

20. Simplifica
AL GRANO
Una pantalla de registro no debe
tener un exceso de información que
pueda llevar a la confusión.
Debemos ofrecer la información
necesaria de una forma amena y
cuanto más visual mejor.
De esta forma evitamos
distracciones sobre el objetivo
que tenemos, en este caso: que el
usuario se registre.

21. Simplifica
MUESTRA SOLO LO NECESARIO
De nuevo el exceso de información
juega a la contra.
Muestra al usuario solamente lo que
necesite ver y en el momento en que
lo necesite ver.
La sobreinformación visual no es
bienvenida en el diseño de una
aplicación.

22. Diseño en aplicaciones móviles es...
Investigar
Hacer mockups
Hacer más mockups
Trabajar con los desarrolladores
Trabajar con los de Marketing
Darle vueltas al tema del color
Optimizar el tamaño de los elementos
Usabilidad
Accesibilidad
...etc

23. LOS DISEÑADORES
SOMOS LOS ENCARGADOS
DE CREAR EXPERIENCIAS
NO APLICACIONES

24. ¿Qué herramientas usa un diseñador ?
Illustrator
Photoshop
Inkscape
Corel
....
La investigación
El análisis
El testeo
Aplicar
Mejora contínua

25. ¡Gracias!
@isaezdesign

26. izaskunsaez.es
Diseño Gráfico
Diseño print
Diseño web
Creatividad
hola@izaskunsaez.es
Twitter: isaezdesign