Cómo se diseña una app móvil multiplataforma y los beneficios de hacerlo correctamente
Este resumen explica los pasos a seguir para diseñar una app y que el diseño sea innovador o único, no adaptándose a librerías, sino diseñado desde cero.
1-) Requisitos de la app móvil: El primer paso es conocer qué va a hacer la app, sus funcionalidades, si va a acceder al hardware del dispositivo, si va a ser una app de alta calidad nativa o qué calidad quiere el cliente que tenga. Esto es determinante para decidir si se programará una app nativa o una app híbrida, elección que influirá en el diseño.
2-) Elección del tipo de desarrollo que vamos a acometer: como hemos indicado antes podrá ser app híbrida o nativa según los requisitos de desarrollo multiplataforma. La influencia de esta elección se explica a continuación
- Diseño de apps híbridas: generalmente el diseño es unificado pues está basado en HTML5 y sólo tienen particularizados a cada plataforma los componentes nativos que haya que añadir al desarrollo, como por ejemplo un pop up nativo.
- Diseño de apps nativas con mismo diseño y navegación: Se puede diseñar una app Android e iOS prácticamente idénticos, tanto en flujos de navegación como gráficamente, aunque algunas particularidades han de permanecer. Que el diseño de ambas plataformas sea similar reduce tiempo y coste de diseño, pero por el contrario los usuarios de cada plataforma pueden no conocer el funcionamiento de la aplicación porque no estén acostumbrados al mismo. Además hay que conocer las guidelines de diseño de Google y Apple (y Windows) para respetarlas en la medida de lo posible.
- Diseño de apps nativas específico para cada plataforma: Esto requiere diseñar tantas veces como plataformas para las que se vaya a programar. Por ejemplo la app de Facebook tiene un diseño para Android y otro distinto para iOS, cada uno de ellos siguiendo las guidelines de diseño de cada plataforma. No llega a ser el doble de trabajo porque algo se puede aprovechar, pero implica un mayor coste de diseño que si el diseño es unificado para todas las plataformas, aun así, el es diseño de apps óptimo.
3-) Diseño para tablets / iPad: Debemos conocer si la app será usada en dispositivos de mediana superficie como tablets. Para ello, evaluaremos los requisitos. Hay 2 maneras de hacer diseños para tablets:
- Adaptación por padding, en la que permanece la navegación en el smartphone y adaptamos el layout a superficies mayores. No tiene apenas coste de diseño pues se puede hacer prácticamente todo por programación
- Diseño específico: Es lo ideal para Tablets, pero dependerá mucho de los requisitos de la app. Aquí podría permanecer la navegación pero rediseñar cada pantalla para exprimir al máximo las posibilidades que las Tablets ofrecen. Lógicamente tiene el coste de diseño específico en esta parte.
4-) Esquema de flujo de navegación de la app: Dependiendo del tipo de desarrollo que vayamos a hacer y del tipo de diseño – específico para cada plataforma o unificado- se han de preparar los flujos de navegación de la app para smartphones. Es decir, si es una aplicación que muestre noticias de un periódico, se tiene que preparar la navegación desde que se entra en la app móvil hasta que se llega al contenido de cada noticia y la navegación entre cada noticia.
5-) Preparación de los Wireframes: Los wireframes consisten en plasmar todas las funcionalidades que se han analizado en los requisitos en las pantallas que se van a ver en la aplicación. Son pre-diseños que mostrarán de forma sencilla todos los elementos como botones, sus acciones, pantallas precedentes y posteriores todas ellas conceptualizadas. Lo fundamental es que recojan toda la funcionalidad que ha de tener cada pantalla para plantear el diseño definitivo. Herramientas hay muchas, por ejemplo Photoshop permite multitud de wireframes y es muy potente, nosotros la recomendamos.
6- ) Testeo de los wireframes: los wireframes de apps han de ser testeados antes de convertirlos en mockups, para ello se ha de repasar que cada pantalla contenga todas las funcionalidades y que esté bien enlazada con la pantalla precedente y con las pantallas a las que puede destinar más navegación. Además se testearán los iconos para que representen su funcionalidad y colores llamativos donde tienen que serlo y su touch feedback.
7-) Mockups definitivos: Una vez testeado los wireframes, se procede a dar la imagen a la app con el color, iconos específicos, tipografía, estilos para cada pantalla etc. Se han de cuidar las medidas de cabeceras, de iconos, paneles o pestañas de cada plataforma. Estos mockups de apps también recomendamos hacerlos con Photoshop, de hecho si se ha partido de un wireframe que tenga las medidas de cabeceras, iconos etc. correctas reducirá gran parte el trabajo.
😎 Posteriormente conviene definir el UX (User Experience) de la app. Se pueden optar por efectos nativos de cada plataforma o por programar efectos propios que requerirán desarrollo. Muchos de estos efectos no serán visibles hasta la programación, pues no hay plataformas que permitan emular todos ellos en un prototipado, por lo que habrán de ser descritos con la mayor definición posible.
9-) Prototipado interactivo de apps: El prototipado de diseño consiste en hacer una maqueta interactiva sin funcionalidad a partir de pantallas diseñadas, no programadas. Para ello existen plataformas específicas, nosotros recomendamos Invision para prototipar porque es muy potente, se hace todo mediante web online y se puede tener el primer proyecto gratis (no nos llevamos nada, la plataforma es genial!) Este prototipado permitirá comprobar los flujos de navegación, distribuirlo a usuarios para pruebas, dejar comentarios, verlo en el móvil (con Invision se ve a través de la web responsive perfectamente). El prototipado requiere invertir tiempo en montarlo (previa curva de aprendizaje) pero es el instrumento perfecto para la aprobación definitiva del diseño por parte del cliente.
10- ) Test de usuarios del diseño: como comentado en el punto anterior, este es el último punto crítico del diseño, un test de comprobación de funcionalidades, flujos de navegación, diseño de marca etc con el objetivo de comprobar que el usuario entiende el flujo de la app y no se pierde navegando y detectar aquellos puntos de conflicto que pueden hacer que el usuario no encuentre funcionalidades o se pierda navegando.
11-) Adaptación de los recursos gráficos para que sean aptos para programación: Cuando todo lo anterior está hecho, se procederá a recortar iconos y demás elementos gráficos que irán implementados en la app, por lo que se adaptarán los recursos gráficos a las densidades de pantalla de Android, iOS y Windows Phone en formato PNG para que sean aptas para programar y se visualicen correctamente en todos los dispositivos móviles.
12-) Otras tareas de diseño: Aquí englobamos otras tareas como puede ser la creación del icono de lanzamiento en las dimensiones que indiquen las plataformas en las que se va a programar o la creación de imágenes atractivas para subirlas con la app a Google Play y App Store. Estas tareas pueden hacerse perfectamente en paralelo con el desarrollo, no son tareas críticas más que al final del proyecto cuando se va a poner la app en producción.
Beneficios de un diseño de apps bien estructurado, según lo que entiende Qode como empresa de desarrollo de apps.
Siguiendo estos pasos se conseguirá:
- Un diseño testeado y que los usuarios entenderán, tanto en navegación, como colores e iconos.
- Tener un coste controlado de diseño en el que todo lo que se cambie sea por algo concreto y no arbitrariamente.
- Garantizar que el desarrollo de la app no tendrá sobre costes por cambios a mitad de proyecto, que es lo más importante pues si bien el diseño puede hacerlo una persona durante un cierto tiempo, el desarrollo nativo multiplataforma implica varios programadores coordinados y el coste de los cambios es mucho más elevado.
- Lo anterior implica un time to market menor y cumplimiento de los plazos de desarrollo del proyecto.
Si os ha resultado útil esta breve introducción al cómo se diseña una aplicación móvil compartidla para que a los diseñadores también les sea beneficioso!
