Cómo crear una app nativa (III): diseño de aplicaciones móviles

Tras habernos ocupado de la planificación de una app y de la implementación técnica en nuestra serie dedicada a la creación de aplicaciones móviles, ahora toca profundizar en su concepción y diseño. En esta tercera parte hemos hecho una selección de recomendaciones a tener en cuenta en la representación visual del contenido de una aplicación nativa que, en principio, pueden aplicarse tanto a sistemas Android como iOS (las directrices son las mismas para uno y otro formato). En el diseño de aplicaciones no solo es importante prestar atención a la coherencia del aspecto visual, sino también a la usabilidad de la aplicación (app usability). En esto, algunas herramientas de diseño de apps, que presentamos más abajo, pueden ser de gran ayuda.

Tan pronto como se sabe con certeza cómo se va a implementar técnicamente el concepto inicial, es el momento de concentrarse en el diseño de la interfaz de usuario gráfica, también conocida como Graphical User Interface o GUI, la cual, como presentación de la imagen global de la aplicación, constituye el componente central del diseño de aplicaciones móviles. El diseño de la interfaz es, por esto, un componente esencial del campo técnico del desarrollo de aplicaciones que no cabe infravalorar. Para muchos desarrolladores, el diseño de la GUI tiene la misma relevancia que el contenido de la aplicación en sí, pues, incluso cuando una aplicación despierta el interés de muchos usuarios por unas funciones extraordinarias y se descarga ampliamente, un mal diseño puede oscurecer la utilidad de la aplicación y provocar el abandono de los usuarios.

El diseño de apps puede ser entendido como término genérico para distintos aspectos del diseño de interfaces gráficas que no se limita a los tipos de fuente o a la gama cromática, sino que comprende la interfaz completa junto con sus funciones y sus elementos de navegación. Por consiguiente, es de vital importancia conocer bien y manejar con responsabilidad todos los componentes gráficos de la aplicación, ya que, sobre todo la posición, el tamaño y el aspecto de los elementos de contenido son los factores que determinan la usabilidad de una aplicación móvil.

Los dispositivos móviles poseen dos características que afectan en gran medida al diseño de la interfaz gráfica: por un lado, el tamaño y la resolución de la pantalla en la que se visualiza la interfaz varía enormemente en función del terminal y, por otro, la navegación táctil de las aplicaciones móviles plantea ciertas exigencias en lo referente a su concepción. Aun cuando estas condiciones circunstanciales que afectan al uso de las aplicaciones pueden sonar ciertamente banales, se manifiestan en todos los aspectos del trabajo de diseño de aplicaciones. Ahora bien, ¿cómo observar estos aspectos en la concepción de la interfaz? A continuación te revelamos cómo hacerlo y presentamos los principios básicos que afectan a la composición y a la usabilidad de tu aplicación.

Con el término inglés “layout” (“plan”, “disposición”) se designa a la configuración visual de la interfaz de usuario de la aplicación y a la disposición espacial de sus contenidos. Para esta labor de composición, el diseñador cuenta con paquetes de herramientas, generalmente conocidos como kits GUI o UI, que contienen elementos predefinidos para la interfaz y plantillas para posicionarlos y estructurarlos. Estos kits, algunos de los cuales están disponibles en Internet de forma gratuita, incluyen a menudo iconos, plantillas, widgets, colores, etc. Utilizarlos conlleva la ventaja de que permiten crear, sin mucha dificultad, diseños convincentes y fáciles de usar en formatos conocidos por los usuarios. En la otra cara de la moneda hay que contar con limitaciones en cuanto a creatividad, con una cierta falta de personalidad en el diseño y con su dependencia respecto a las plataformas respectivas.

Material Design, la normativa de diseño para Android desarrollada por Google, pone a disposición gratuitamente, por ejemplo, diversos elementos descargables para la interfaz, como plantillas o iconos. Por su parte, en su página para desarrolladores, Apple ofrece algunos componentes de diseño gratuitos para sus propias aplicaciones, aunque no de forma tan extensa. Una alternativa a estas dos páginas son los kits GUI puestos a disposición de los diseñadores por sus propios desarrolladores en la red. Para sistemas iOS se puede recurrir a designcode.io y para aplicaciones Android a sketchappsources.com.

Estos paquetes de diseño de apps para Android e iOS ponen claramente de relieve la consolidación de ciertos estándares en el campo del diseño de aplicaciones móviles. Entre estos se incluyen las fuentes tipográficas o la paleta cromática, así como diversas directrices de diseño y variantes de app layout, íntimamente relacionadas con la variedad de tamaños y de resoluciones de las pantallas.

Todas las aplicaciones contienen texto, porque, aún predominando las imágenes y los símbolos, algunos segmentos de la composición, como el aviso legal o las condiciones de uso, requieren la implementación de texto, pero son sobre todo aquellos elementos que determinan el aspecto de la interfaz en gran medida, como los menús o las entradas, los que requieren acertar con la fuente que se selecciona. Así, la configuración de los textos es un componente esencial del app layout.

En la elección de la fuente tipográfica en el marco del app design, una opción muy válida es recurrir a la tipografía propia de las plataformas. En el caso de iOS y desde la versión 9, la “San Francisco”, que ha superado a las clásicas “Helvetica” y “Nueva helvética” como fuentes estándar de las aplicaciones iOS. Android, por su parte, utiliza “Roboto” como fuente del sistema desde la versión 4.0. Muchos desarrolladores tienen buenos motivos para decidirse por estas fuentes estandarizadas, pues, además de ajustarse como un guante al sistema operativo correspondiente y ahorrar espacio, pueden ser utilizadas de forma inmediata, al contrario que otras fuentes, que requieren ser instaladas antes.

No obstante, en algunos casos podría ser preferible utilizar una fuente diferente, en especial si la aplicación ha de contener mucho texto y aspira a diferenciarse del resto en los aspectos tipográficos. Para estos casos, los diseñadores pueden recurrir a una gran diversidad de fuentes descargables de forma gratuita. La elección de la fuente correcta suele estar íntimamente ligada al tema y al contenido de la aplicación: si el concepto va en una línea artística y creativa, una tipografía de aspecto elegante o excéntrico podría ser la mejor elección, aunque conviene ser prudente y no olvidar aspectos de legibilidad, especialmente si la aplicación incluye abundantes fragmentos de texto. No en vano, los caracteres de muchas fuentes estándar como “Open Sans” o “Lato” están caracterizados por la delgadez de las líneas y la falta de serifas, haciéndolas aptas para muchos ámbitos de aplicación diferentes.

A la hora de seleccionar la gama cromática, hay que cuidar que la aplicación disponga de un buen contraste que garantice la fácil lectura de los contenidos, ya que, por lo general, las aplicaciones son utilizadas al aire libre y con frecuencia bajo condiciones lumínicas complicadas, como la luz solar directa. El color camina de la mano del tema y la audiencia de la aplicación, pero si guarda relación directa con una empresa o un proyecto con un esquema cromático sólido, hay que regirse por este. En el marco de la corporate identity y junto a un concepto cromático coherente, el logo y la fuente corporativa (corporate font) también ponen de manifiesto la unidad de las diversas ofertas y hacen posible el reconocimiento por parte del consumidor.

De lo que se trata, en definitiva, es de garantizar que el formato de los diferentes elementos de la interfaz sea coherente. Si te interesa profundizar en el aspecto visual de las interfaces de usuario, en nuestro artículo sobre diseño corporativo y los efectos de los colores en el diseño web sintetizamos algunas directrices y recomendaciones fácilmente transferibles al diseño de apps móviles.

El display del terminal es el que, en definitiva, determina siempre el espacio disponible para visualizar los contenidos. Solo entre los smartphones, las diferencias de tamaño y resolución ya son considerables y lo son aún más si observamos la diversidad de tablets disponibles hoy en el mercado.  Y aun cuando el diseño de una aplicación para Android o iOs se ajusta automáticamente al tipo de pantalla escalando los elementos de la aplicación en función de la interfaz del usuario, el layout como tal permanece inalterable, lo que puede conducir con facilidad a una representación inadecuada del contenido de la aplicación.

Es lo que ocurriría, por ejemplo, con una composición ideada para la pequeña pantalla de un iPhone, solo en casos excepcionales indicado también para el formato, de mayor tamaño, de un iPad, pues si no se ajusta al formato de tablet más habitual, los botones podrían mostrarse desmesuradamente grandes. Lo mejor sería, por consiguiente, crear una versión para tablets, ya que, en este caso, un app layout adecuado suele contar con botones proporcionalmente más pequeños, aprovechando el espacio ganado para mostrar otro tipo de contenido.

Crear varias versiones del layout para resoluciones y tamaños variables se ha convertido, de esta forma, casi en una obligación en el campo profesional del diseño de aplicaciones. Muchas aplicaciones ya disponen de tres o más variantes, por lo menos si se han consolidado en el mercado o aspiran a ello. Sin embargo, el desarrollo de versiones diferentes conlleva, naturalmente, más trabajo.

No olvidemos un aspecto capital de la visualización de las aplicaciones como es la rotación de la pantalla propia de los smartphones y tablets, que permite alternar la orientación vertical y horizontal, a la que la vista del contenido debería ajustarse de forma automática. Para esto, nuevamente es necesario un nuevo app layout. El número de composiciones que requiere una aplicación depende de cada proyecto, pero conviene recordar siempre que un formato inadecuado tiene consecuencias negativas para la usabilidad.

Suele mencionarse al diseño intuitivo como requisito básico que garantice la usabilidad de las aplicaciones. Con él se hace referencia a la facilidad de uso de la aplicación, derivada del uso de patrones y estructuras conocidos y cuyo grado de presencia en cada aplicación depende, en última instancia, del criterio del usuario. Por esto es fundamental conocer las preferencias y expectativas de la audiencia a la que se dirige la aplicación y orientarse por ellas. Y es que no se trata de mostrar al usuario el virtuosismo del diseñador, sino más bien de ofrecer a la audiencia de la aplicación la mejor experiencia de usuario posible.

Un diseño de apps amigable suele lograrse con una composición visual clara, ordenada y simple, pues no se dispone de mucho espacio con el que jugar, en particular en las pequeñas pantallas de los smartphones. Así, es conveniente una cierta cautela con la cantidad de contenido que se va a ubicar en la pantalla de la aplicación para evitar la impresión de sobrecarga. Reducir el contenido y las funciones a lo estrictamente necesario permite diseñar los elementos con el tamaño adecuado y  dejar espacio libre suficiente, de tal forma que el efecto sea más harmónico.

En una aplicación, el menú ha de estar colocado en un lugar visible y poder ser reconocido como tal de forma inmediata. El formato más popular es el del menú desplegable porque constituye una solución especialmente frugal con el espacio que necesita. Sin embargo, una vez desplegado, no ha de desbordar al usuario, ya que el efecto buscado es el de una navegación inteligible y directa. Si la aplicación consta de distintos aspectos, a cada uno de los cuales ha de corresponder una categoría en el menú, debería encontrarse la forma de mostrar las funciones más importantes de la aplicación en el menú principal y el resto en un submenú.

La representación visual de los distintos puntos del menú, sin embargo, no revela necesariamente su estructura fundamental. Conviene facilitar el acceso a los distintos apartados de la aplicación sin requerir muchas acciones. En este sentido, gran parte de los expertos recomiendan diseñar la estructura de una aplicación de tal forma que permita acceder a todos los apartados en solo dos pasos. Si todos los submenús se encuentran realmente tan cerca los unos de los otros depende de cada aplicación, pero conviene interiorizar la directriz que recomienda mantener los itinerarios de acceso a los submenús tan breves como sea posible. Las estructuras demasiado complejas confunden al usuario y hacen que pierda la orientación dentro de la aplicación.

Otro factor relevante de la usabilidad es la implementación amigable de los elementos de navegación, en especial en cuanto al tamaño, a la colocación y al diseño de los botones en la interfaz de usuario. Conviene cuidar que todos los elementos interactivos (menús desplegables, botones, enlaces, etc.) puedan reconocerse siempre y pueda hacerse clic en ellos. No olvidemos aquí que también debería ser posible utilizar estos elementos para aquellos usuarios con dificultades motrices. Botones muy pequeños o mal colocados pueden conducir al error, lo que podría frustrar al usuario.

Otro aspecto a tener en cuenta en el uso de elementos interactivos es el de ofrecer un feedback gráfico con símbolos o animaciones para mostrar cuando un proceso se está ejecutando, sobre todo en acciones con un tiempo de carga prolongado. De esta forma se logra transmitir transparencia, en particular en lo que hace a los procesos de búsqueda o carga.

A diferencia de una aplicación web o una híbrida, el diseño de una aplicación nativa se adapta a la plataforma correspondiente. Esto hace posible poder otorgarle un mejor look and feel, lo que se pone de relieve especialmente en la usabilidad.

En el campo del diseño de aplicaciones existe una diversidad de programas y herramientas con los cuales experimentar con diferentes layouts o elaborar el diseño final. De entrada, es recomendable contar con bocetos digitales de todas las pantallas de la aplicación, que se pueden crear con un programa como Photoshop o como Sketch. Los archivos de imagen se introducen entonces en una herramienta de diseño de aplicaciones, se enlazan entre sí y se ensamblan de forma que conformen un prototipo de la aplicación, también llamado mock up.

Por regla general, estas herramientas son extremadamente fáciles de usar gracias a la utilización de la técnica drag and drop para disponer los elementos de diseño en un editor WYSIWYG. Enlazando las pantallas entre sí e introduciendo interacciones es posible simular el uso de la aplicación. Por último, el prototipo puede probarse en un Smartphone o en una tablet, pudiendo hacer uso de la pantalla táctil y de otras técnicas tal como se realizaría en la vida real.

Estas herramientas permiten crear mock ups de aplicaciones incluso sin conocimientos en programación. Invirtiendo algo de trabajo es posible lograr que el prototipo se comporte de forma sorprendentemente similar a una aplicación real. A continuación te presentamos tres de las mejores y más conocidas herramientas de diseño de apps.

InVision es una herramienta de diseño de aplicaciones para uso profesional. Aunque dispone de una versión gratuita, implica tener que prescindir de algunas funciones. Esta herramienta permite crear un prototipo de app layout de forma sencilla y relativamente rápido añadiendo y ajustando plantillas de diseño y probarlo en un terminal móvil. Mediante diversos ajustes el uso del prototipo se puede asemejar al de una aplicación real.

Una particularidad de esta herramienta es la función para el trabajo en equipo. Gracias a ella, los diversos usuarios que tienen acceso al mock up pueden dejar indicaciones e intercambiar opiniones sobre el diseño de la aplicación mediante comentarios. Empresas tan renombradas como IBM, Twitter, Netflix o SoundCloud ya han utilizado InVision para realizar sus prototipos de diseño.

Cuando no se han elaborado plantillas propias, esta herramienta puede ser la alternativa perfecta. Fluid UI cuenta con diversas compilaciones de pantallas predefinidas que se pueden integrar en el prototipo, aunque no es solo este aspecto el que la equipara a las herramientas mencionadas, pues su paleta de funciones ofrece casi las mismas prestaciones que InVision o Pixate.

Sin embargo, la versión gratuita solo permite crear prototipos con un máximo de diez pantallas, las cuales, aunque no son suficientes para una prueba exhaustiva de la aplicación, permiten probar el funcionamiento de la herramienta tanto como sea necesario.

En el diseño de aplicaciones móviles se han de tener en cuenta muchos detalles. Presentarlos en el marco del layout a otros colegas o a posibles patrocinadores requiere la elaboración de prototipos mediante las herramientas anteriores o con otros programas alternativos. Es importante, una vez encontrado el diseño óptimo, no olvidar que ha de ser aplicable a distintos tamaños y distintas resoluciones de pantalla. Esto determina la exigencia de crear diferentes versiones en las cuales ajustar el orden de los contenidos en función de los diferentes formatos.

Una vez concluida esta fase de diseño y desarrollo de la aplicación, es el momento de ocuparse de otro aspecto relevante antes de poder ofrecerla al público: someterla a examen. Es esto de lo que se ocupa nuestro siguiente capítulo.