Hablamos del mundo de la comunicación, el diseño, los medios sociales, el marketing online, la imagen de marca

Terceto Comunicación, diseño web y diseño gráfico en Granada

usabilidad-experienciaUsuario-UI-UX
7
diciembre
2017

Conceptos básicos para diseño de una app

Lo primero que debemos saber para crear el diseño de una app es a qué publico nos dirigimos para ello necesitamos un análisis de fondo muy grande y una vez detectado desarrollar nuestro proyecto en estos pasos:

CONCEPTUALIZACIÓN

Necesidad de los Usuarios |  Ventajas competitivas | Contenido

FLUJO DE NAVEGACIÓN

Pantallas mínimas | Wireframe | Prototipo Interactivo |Test de Navegación

DISEÑO DE INTERFAZ

Definimos Tipografía | Definimos Color | Definimos iconografía | Resultado Final

INTERACCIÓN Y PREPARACIÓN

Animaciones | Transiciones | Exportación de Archivos para el programador.

Una vez sepamos cual será nuestro timeline para ir cerrando cada uno de estos procesos debemos saber que existen más de mil aplicaciones en el apps store y que los usuarios tienen una media de 48 app instaladas, de las cuales usan durante 13 minutos de media cada una, pero lo que esta claro es que pasamos el 86% de las veces que cogemos el teléfono utilizando app.

Diferentes estudios nos indican el tamaño correcto de los botones para que nuestras manos sean capaces de alcanzar los diferentes elementos dentro de la pantalla.

No olvidemos que en Movil trabajamos con las manos

Captura de pantalla 2017-11-30 a las 17.19.17

Zona de Toque 44pt – Para todos los elementos

Captura de pantalla 2017-11-30 a las 17.20.37
Otro elemento a tener en cuenta es la zona segura de nuestro movil esto lo detectamos cuando observamos que el pulgar es el protagonista de nuestras acciones, por lo tanto en la zona verde colocaré botones principales “comprar” y en la zona roja elementos que no quiero que el usuario pueda tocar “Borrar”

Captura de pantalla 2017-11-30 a las 17.22.36

Debemos evitar poner elementos que el usuario ya conoce, esto ocurre con los movimientos de los dedos se tratan de acciones ya establecidas con los dedos. Zoom, Desplazar, Arrastrar. Para estas acciones podemos prescindir de botones dejando un diseño más limpio e intuitivo.

Captura de pantalla 2017-11-30 a las 17.24.27

Una de las aplicaciones que mejor trabaja esto es la app de iPHOTO de apple.

Nunca debemos perdernos en los recursos e iconografía pues si hemos creado un botón para confirmar acciones ejemplo “enviar” con forma de estrella, este debe repetirse a lo largo de la navegación así el usuario solo tendrá que hacer una vez el aprendizaje de color y forma para saber que ese elemento cuando lo vuelva a ver será el de enviar.

08-Diseno-para-Movil

Muy importante al no tener ( Hover ) el usuario no puede pasar el ratón por encima en una app por lo que cada vez que toquemos un elemento con acciones o botón debemos devolver un feedback, comunicar al usuario que ocurre algo al hacer toque.

Podemos hacerlo con una opacidad sobre el elemento, por ejemplo.
08-Diseno-para-Movil

Trabajemos con metáforas reales, si pongo un botón para una categoría de inmobiliaria pondré una casa que es un objeto reconocible para el usuario un ejemplo es este video donde la rana reconoce perfectamente el icono en la pantalla

Nunca debemos olvidar que una app estará en diferentes sistemas operativos por lo que vamos a diseñar de tal forma que mi propuesta sirva para iOS, Android y Windows phone:

08-Diseno-para-Movils

Por último muy importante reutilicemos elementos del sistema operativo para hacer más facil el aprendizaje de nuestra app.

08-Diseno-para-Movila

Teniendo estos principios de diseño de interfaz en la cabeza podremos hacer aplicaciones muy intuitivas para el usuario haciendo que viva una experiencia agradable dentro de nuestro diseño para una app

Responsable de Proyectos, Diseñador  y desarrollador web Se define con la letra "D" y no por su nombre, si no por ser nuestro Diseñador y Desarollador Web, ser amante del deporte y el café le hacen trabajar a un ritmo acelerado! Pero ¡ojo! siempre cuidando hasta el último detalle. Contáctame: [T]  958 405 998 - [M]  daniel@terceto.es - [S]Contacta conmigo por Skype

Blog