Cómo crear una app nativa (III): diseño de apli­ca­cio­nes móviles

Tras habernos ocupado de la pla­ni­fi­ca­ción de una app y de la im­ple­me­n­ta­ción técnica en nuestra serie dedicada a la creación de apli­ca­cio­nes móviles, ahora toca pro­fu­n­di­zar en su co­n­ce­p­ción y diseño. En esta tercera parte hemos hecho una selección de re­co­me­n­da­cio­nes a tener en cuenta en la re­pre­se­n­ta­ción visual del contenido de una apli­ca­ción nativa que, en principio, pueden aplicarse tanto a sistemas Android como iOS (las di­re­c­tri­ces son las mismas para uno y otro formato). En el diseño de apli­ca­cio­nes no solo es im­po­r­ta­n­te prestar atención a la co­he­re­n­cia del aspecto visual, sino también a la usa­bi­li­dad de la apli­ca­ción (app usability). En esto, algunas he­rra­mie­n­tas de diseño de apps, que pre­se­n­ta­mos más abajo, pueden ser de gran ayuda.

Tan pronto como se sabe con certeza cómo se va a im­ple­me­n­tar té­c­ni­ca­me­n­te el concepto inicial, es el momento de co­n­ce­n­trar­se en el diseño de la interfaz de usuario gráfica, también conocida como Graphical User Interface o GUI, la cual, como pre­se­n­ta­ción de la imagen global de la apli­ca­ción, co­n­s­ti­tu­ye el co­m­po­ne­n­te central del diseño de apli­ca­cio­nes móviles. El diseño de la interfaz es, por esto, un co­m­po­ne­n­te esencial del campo técnico del de­sa­rro­llo de apli­ca­cio­nes que no cabe in­fra­va­lo­rar. Para muchos de­sa­rro­lla­do­res, el diseño de la GUI tiene la misma re­le­va­n­cia que el contenido de la apli­ca­ción en sí, pues, incluso cuando una apli­ca­ción despierta el interés de muchos usuarios por unas funciones ex­trao­r­di­na­rias y se descarga am­plia­me­n­te, un mal diseño puede oscurecer la utilidad de la apli­ca­ció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 in­te­r­fa­ces 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 na­ve­ga­ción. Por co­n­si­guie­n­te, es de vital im­po­r­ta­n­cia conocer bien y manejar con re­s­po­n­sa­bi­li­dad todos los co­m­po­ne­n­tes gráficos de la apli­ca­ción, ya que, sobre todo la posición, el tamaño y el aspecto de los elementos de contenido son los factores que de­te­r­mi­nan la usa­bi­li­dad de una apli­ca­ción móvil.

Los di­s­po­si­ti­vos móviles poseen dos ca­ra­c­te­rí­s­ti­cas que afectan en gran medida al diseño de la interfaz gráfica: por un lado, el tamaño y la re­so­lu­ción de la pantalla en la que se visualiza la interfaz varía eno­r­me­me­n­te en función del terminal y, por otro, la na­ve­ga­ción táctil de las apli­ca­cio­nes móviles plantea ciertas exi­ge­n­cias en lo referente a su co­n­ce­p­ción. Aun cuando estas co­n­di­cio­nes ci­r­cu­n­s­ta­n­cia­les que afectan al uso de las apli­ca­cio­nes pueden sonar cie­r­ta­me­n­te banales, se ma­ni­fie­s­tan en todos los aspectos del trabajo de diseño de apli­ca­cio­nes. Ahora bien, ¿cómo observar estos aspectos en la co­n­ce­p­ción de la interfaz? A co­n­ti­nua­ción te revelamos cómo hacerlo y pre­se­n­ta­mos los pri­n­ci­pios básicos que afectan a la co­m­po­si­ción y a la usa­bi­li­dad de tu apli­ca­ción.

Con el término inglés “layout” (“plan”, “di­s­po­si­ción”) se designa a la co­n­fi­gu­ra­ción visual de la interfaz de usuario de la apli­ca­ción y a la di­s­po­si­ción espacial de sus co­n­te­ni­dos. Para esta labor de co­m­po­si­ción, el diseñador cuenta con paquetes de he­rra­mie­n­tas, ge­ne­ra­l­me­n­te conocidos como kits GUI o UI, que contienen elementos pre­de­fi­ni­dos para la interfaz y pla­n­ti­llas para po­si­cio­nar­los y es­tru­c­tu­rar­los. Estos kits, algunos de los cuales están di­s­po­ni­bles en Internet de forma gratuita, incluyen a menudo iconos, pla­n­ti­llas, widgets, colores, etc. Uti­li­zar­los conlleva la ventaja de que permiten crear, sin mucha di­fi­cu­l­tad, diseños co­n­vi­n­ce­n­tes y fáciles de usar en formatos conocidos por los usuarios. En la otra cara de la moneda hay que contar con li­mi­ta­cio­nes en cuanto a crea­ti­vi­dad, con una cierta falta de pe­r­so­na­li­dad en el diseño y con su de­pe­n­de­n­cia respecto a las pla­ta­fo­r­mas re­s­pe­c­ti­vas.

Material Design, la normativa de diseño para Android de­sa­rro­lla­da por Google, pone a di­s­po­si­ción gra­tui­ta­me­n­te, por ejemplo, diversos elementos de­s­ca­r­ga­bles para la interfaz, como pla­n­ti­llas o iconos. Por su parte, en su página para de­sa­rro­lla­do­res, Apple ofrece algunos co­m­po­ne­n­tes de diseño gratuitos para sus propias apli­ca­cio­nes, aunque no de forma tan extensa. Una al­te­r­na­ti­va a estas dos páginas son los kits GUI puestos a di­s­po­si­ción de los di­se­ña­do­res por sus propios de­sa­rro­lla­do­res en la red. Para sistemas iOS se puede recurrir a de­sig­n­co­de.io y para apli­ca­cio­nes Android a ske­t­cha­p­p­sou­r­ces.com.

Estos paquetes de diseño de apps para Android e iOS ponen cla­ra­me­n­te de relieve la co­n­so­li­da­ción de ciertos es­tá­n­da­res en el campo del diseño de apli­ca­cio­nes móviles. Entre estos se incluyen las fuentes ti­po­grá­fi­cas o la paleta cromática, así como diversas di­re­c­tri­ces de diseño y variantes de app layout, ín­ti­ma­me­n­te re­la­cio­na­das con la variedad de tamaños y de re­so­lu­cio­nes de las pantallas.

Todas las apli­ca­cio­nes contienen texto, porque, aún pre­do­mi­na­n­do las imágenes y los símbolos, algunos segmentos de la co­m­po­si­ción, como el aviso legal o las co­n­di­cio­nes de uso, requieren la im­ple­me­n­ta­ción de texto, pero son sobre todo aquellos elementos que de­te­r­mi­nan el aspecto de la interfaz en gran medida, como los menús o las entradas, los que requieren acertar con la fuente que se se­le­c­cio­na. Así, la co­n­fi­gu­ra­ción de los textos es un co­m­po­ne­n­te esencial del app layout.

En la elección de la fuente ti­po­grá­fi­ca en el marco del app design, una opción muy válida es recurrir a la ti­po­gra­fía propia de las pla­ta­fo­r­mas. 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 apli­ca­cio­nes iOS. Android, por su parte, utiliza “Roboto” como fuente del sistema desde la versión 4.0. Muchos de­sa­rro­lla­do­res tienen buenos motivos para decidirse por estas fuentes es­ta­n­da­ri­za­das, pues, además de ajustarse como un guante al sistema operativo co­rre­s­po­n­die­n­te y ahorrar espacio, pueden ser uti­li­za­das de forma inmediata, al contrario que otras fuentes, que requieren ser in­s­ta­la­das antes.

No obstante, en algunos casos podría ser pre­fe­ri­ble utilizar una fuente diferente, en especial si la apli­ca­ción ha de contener mucho texto y aspira a di­fe­re­n­ciar­se del resto en los aspectos ti­po­grá­fi­cos. Para estos casos, los di­se­ña­do­res pueden recurrir a una gran di­ve­r­si­dad de fuentes de­s­ca­r­ga­bles de forma gratuita. La elección de la fuente correcta suele estar ín­ti­ma­me­n­te ligada al tema y al contenido de la apli­ca­ción: si el concepto va en una línea artística y creativa, una ti­po­gra­fía de aspecto elegante o ex­cé­n­tri­co podría ser la mejor elección, aunque conviene ser prudente y no olvidar aspectos de le­gi­bi­li­dad, es­pe­cia­l­me­n­te si la apli­ca­ción incluye abu­n­da­n­tes fra­g­me­n­tos de texto. No en vano, los ca­ra­c­te­res de muchas fuentes estándar como “Open Sans” o “Lato” están ca­ra­c­te­ri­za­dos por la delgadez de las líneas y la falta de serifas, ha­cié­n­do­las aptas para muchos ámbitos de apli­ca­ción di­fe­re­n­tes.

A la hora de se­le­c­cio­nar la gama cromática, hay que cuidar que la apli­ca­ción disponga de un buen contraste que garantice la fácil lectura de los co­n­te­ni­dos, ya que, por lo general, las apli­ca­cio­nes son uti­li­za­das al aire libre y con fre­cue­n­cia bajo co­n­di­cio­nes lumínicas co­m­pli­ca­das, como la luz solar directa. El color camina de la mano del tema y la audiencia de la apli­ca­ció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 co­r­po­ra­ti­va (corporate font) también ponen de ma­ni­fie­s­to la unidad de las diversas ofertas y hacen posible el re­co­no­ci­mie­n­to por parte del co­n­su­mi­dor. De lo que se trata, en de­fi­ni­ti­va, es de ga­ra­n­ti­zar que el formato de los di­fe­re­n­tes elementos de la interfaz sea coherente. Si te interesa pro­fu­n­di­zar en el aspecto visual de las in­te­r­fa­ces de usuario, en nuestro artículo sobre diseño co­r­po­ra­ti­vo y los efectos de los colores en el diseño web si­n­te­ti­za­mos algunas di­re­c­tri­ces y re­co­me­n­da­cio­nes fá­ci­l­me­n­te tra­n­s­fe­ri­bles al diseño de apps móviles.

El display del terminal es el que, en de­fi­ni­ti­va, determina siempre el espacio di­s­po­ni­ble para vi­sua­li­zar los co­n­te­ni­dos. Solo entre los sma­r­t­pho­nes, las di­fe­re­n­cias de tamaño y re­so­lu­ción ya son co­n­si­de­ra­bles y lo son aún más si ob­se­r­va­mos la di­ve­r­si­dad de tablets di­s­po­ni­bles hoy en el mercado.  Y aun cuando el diseño de una apli­ca­ción para Android o iOs se ajusta au­to­má­ti­ca­me­n­te al tipo de pantalla escalando los elementos de la apli­ca­ción en función de la interfaz del usuario, el layout como tal permanece inal­te­ra­ble, lo que puede conducir con facilidad a una re­pre­se­n­ta­ción inade­cua­da del contenido de la apli­ca­ción.

Es lo que ocurriría, por ejemplo, con una co­m­po­si­ción ideada para la pequeña pantalla de un iPhone, solo en casos ex­ce­p­cio­na­les 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 de­s­me­su­ra­da­me­n­te grandes. Lo mejor sería, por co­n­si­guie­n­te, crear una versión para tablets, ya que, en este caso, un app layout adecuado suele contar con botones pro­po­r­cio­na­l­me­n­te más pequeños, apro­ve­cha­n­do el espacio ganado para mostrar otro tipo de contenido.

Crear varias versiones del layout para re­so­lu­cio­nes y tamaños variables se ha co­n­ve­r­ti­do, de esta forma, casi en una obli­ga­ción en el campo pro­fe­sio­nal del diseño de apli­ca­cio­nes. Muchas apli­ca­cio­nes ya disponen de tres o más variantes, por lo menos si se han co­n­so­li­da­do en el mercado o aspiran a ello. Sin embargo, el de­sa­rro­llo de versiones di­fe­re­n­tes conlleva, na­tu­ra­l­me­n­te, más trabajo.

No olvidemos un aspecto capital de la vi­sua­li­za­ción de las apli­ca­cio­nes como es la rotación de la pantalla propia de los sma­r­t­pho­nes y tablets, que permite alternar la orie­n­ta­ción vertical y ho­ri­zo­n­tal, a la que la vista del contenido debería ajustarse de forma au­to­má­ti­ca. Para esto, nue­va­me­n­te es necesario un nuevo app layout. El número de co­m­po­si­cio­nes que requiere una apli­ca­ción depende de cada proyecto, pero conviene recordar siempre que un formato inade­cua­do tiene co­n­se­cue­n­cias negativas para la usa­bi­li­dad.

Suele me­n­cio­nar­se al diseño intuitivo como requisito básico que garantice la usa­bi­li­dad de las apli­ca­cio­nes. Con él se hace re­fe­re­n­cia a la facilidad de uso de la apli­ca­ción, derivada del uso de patrones y es­tru­c­tu­ras conocidos y cuyo grado de presencia en cada apli­ca­ción depende, en última instancia, del criterio del usuario. Por esto es fu­n­da­me­n­tal conocer las pre­fe­re­n­cias y ex­pe­c­ta­ti­vas de la audiencia a la que se dirige la apli­ca­ción y orie­n­tar­se por ellas. Y es que no se trata de mostrar al usuario el vi­r­tuo­si­s­mo del diseñador, sino más bien de ofrecer a la audiencia de la apli­ca­ción la mejor ex­pe­rie­n­cia de usuario posible.

Un diseño de apps amigable suele lograrse con una co­m­po­si­ción visual clara, ordenada y simple, pues no se dispone de mucho espacio con el que jugar, en pa­r­ti­cu­lar en las pequeñas pantallas de los sma­r­t­pho­nes. Así, es co­n­ve­nie­n­te una cierta cautela con la cantidad de contenido que se va a ubicar en la pantalla de la apli­ca­ción para evitar la impresión de so­bre­ca­r­ga. Reducir el contenido y las funciones a lo es­tri­c­ta­me­n­te necesario permite diseñar los elementos con el tamaño adecuado y  dejar espacio libre su­fi­cie­n­te, de tal forma que el efecto sea más harmónico.

En una apli­ca­ción, el menú ha de estar colocado en un lugar visible y poder ser re­co­no­ci­do como tal de forma inmediata. El formato más popular es el del menú de­s­ple­ga­ble porque co­n­s­ti­tu­ye una solución es­pe­cia­l­me­n­te frugal con el espacio que necesita. Sin embargo, una vez de­s­ple­ga­do, no ha de desbordar al usuario, ya que el efecto buscado es el de una na­ve­ga­ción in­te­li­gi­ble y directa. Si la apli­ca­ción consta de distintos aspectos, a cada uno de los cuales ha de co­rre­s­po­n­der una categoría en el menú, debería en­co­n­trar­se la forma de mostrar las funciones más im­po­r­ta­n­tes de la apli­ca­ción en el menú principal y el resto en un submenú.

La re­pre­se­n­ta­ción visual de los distintos puntos del menú, sin embargo, no revela ne­ce­sa­ria­me­n­te su es­tru­c­tu­ra fu­n­da­me­n­tal. Conviene facilitar el acceso a los distintos apartados de la apli­ca­ción sin requerir muchas acciones. En este sentido, gran parte de los expertos re­co­mie­n­dan diseñar la es­tru­c­tu­ra de una apli­ca­ción de tal forma que permita acceder a todos los apartados en solo dos pasos. Si todos los submenús se en­cue­n­tran realmente tan cerca los unos de los otros depende de cada apli­ca­ción, pero conviene in­te­rio­ri­zar la directriz que re­co­mie­n­da mantener los iti­ne­ra­rios de acceso a los submenús tan breves como sea posible. Las es­tru­c­tu­ras demasiado complejas confunden al usuario y hacen que pierda la orie­n­ta­ción dentro de la apli­ca­ción.

Otro factor relevante de la usa­bi­li­dad es la im­ple­me­n­ta­ción amigable de los elementos de na­ve­ga­ción, en especial en cuanto al tamaño, a la co­lo­ca­ción y al diseño de los botones en la interfaz de usuario. Conviene cuidar que todos los elementos in­ter­ac­ti­vos (menús de­s­ple­ga­bles, botones, enlaces, etc.) puedan re­co­no­ce­r­se siempre y pueda hacerse clic en ellos. No olvidemos aquí que también debería ser posible utilizar estos elementos para aquellos usuarios con di­fi­cu­l­ta­des 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 in­ter­ac­ti­vos es el de ofrecer un feedback gráfico con símbolos o ani­ma­cio­nes para mostrar cuando un proceso se está eje­cu­ta­n­do, sobre todo en acciones con un tiempo de carga pro­lo­n­ga­do. De esta forma se logra tra­n­s­mi­tir tra­n­s­pa­re­n­cia, en pa­r­ti­cu­lar en lo que hace a los procesos de búsqueda o carga. A di­fe­re­n­cia de una apli­ca­ción web o una híbrida, el diseño de una apli­ca­ción nativa se adapta a la pla­ta­fo­r­ma co­rre­s­po­n­die­n­te. Esto hace posible poder otorgarle un mejor look and feel, lo que se pone de relieve es­pe­cia­l­me­n­te en la usa­bi­li­dad.

En el campo del diseño de apli­ca­cio­nes existe una di­ve­r­si­dad de programas y he­rra­mie­n­tas con los cuales ex­pe­ri­me­n­tar con di­fe­re­n­tes layouts o elaborar el diseño final. De entrada, es re­co­me­n­da­ble contar con bocetos digitales de todas las pantallas de la apli­ca­ción, que se pueden crear con un programa como Photoshop o como Sketch. Los archivos de imagen se in­tro­du­cen entonces en una he­rra­mie­n­ta de diseño de apli­ca­cio­nes, se enlazan entre sí y se ensamblan de forma que conformen un prototipo de la apli­ca­ción, también llamado mock up.

Por regla general, estas he­rra­mie­n­tas son ex­tre­ma­da­me­n­te fáciles de usar gracias a la uti­li­za­ció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 in­tro­du­cie­n­do in­ter­ac­cio­nes es posible simular el uso de la apli­ca­ción. Por último, el prototipo puede probarse en un Sma­r­t­pho­ne o en una tablet, pudiendo hacer uso de la pantalla táctil y de otras técnicas tal como se rea­li­za­ría en la vida real.

Estas he­rra­mie­n­tas permiten crear mock ups de apli­ca­cio­nes incluso sin co­no­ci­mie­n­tos en pro­gra­ma­ción. In­vi­r­tie­n­do algo de trabajo es posible lograr que el prototipo se comporte de forma so­r­pre­n­de­n­te­me­n­te similar a una apli­ca­ción real. A co­n­ti­nua­ción te pre­se­n­ta­mos tres de las mejores y más conocidas he­rra­mie­n­tas de diseño de apps.

InVision es una he­rra­mie­n­ta de diseño de apli­ca­cio­nes para uso pro­fe­sio­nal. Aunque dispone de una versión gratuita, implica tener que pre­s­ci­n­dir de algunas funciones. Esta he­rra­mie­n­ta permite crear un prototipo de app layout de forma sencilla y re­la­ti­va­me­n­te rápido añadiendo y ajustando pla­n­ti­llas de diseño y probarlo en un terminal móvil. Mediante diversos ajustes el uso del prototipo se puede asemejar al de una apli­ca­ción real. Una pa­r­ti­cu­la­ri­dad de esta he­rra­mie­n­ta es la función para el trabajo en equipo. Gracias a ella, los diversos usuarios que tienen acceso al mock up pueden dejar in­di­ca­cio­nes e in­te­r­ca­m­biar opiniones sobre el diseño de la apli­ca­ción mediante co­me­n­ta­rios. Empresas tan re­no­m­bra­das como IBM, Twitter, Netflix o Sou­n­d­Cloud ya han utilizado InVision para realizar sus pro­to­ti­pos de diseño.

Cuando no se han elaborado pla­n­ti­llas propias, esta he­rra­mie­n­ta puede ser la al­te­r­na­ti­va perfecta. Fluid UI cuenta con diversas co­m­pi­la­cio­nes de pantallas pre­de­fi­ni­das que se pueden integrar en el prototipo, aunque no es solo este aspecto el que la equipara a las he­rra­mie­n­tas me­n­cio­na­das, pues su paleta de funciones ofrece casi las mismas pre­s­ta­cio­nes que InVision o Pixate. Sin embargo, la versión gratuita solo permite crear pro­to­ti­pos con un máximo de diez pantallas, las cuales, aunque no son su­fi­cie­n­tes para una prueba exhau­s­ti­va de la apli­ca­ción, permiten probar el fu­n­cio­na­mie­n­to de la he­rra­mie­n­ta tanto como sea necesario.

En el diseño de apli­ca­cio­nes móviles se han de tener en cuenta muchos detalles. Pre­se­n­tar­los en el marco del layout a otros colegas o a posibles pa­tro­ci­na­do­res requiere la ela­bo­ra­ción de pro­to­ti­pos mediante las he­rra­mie­n­tas an­te­rio­res o con otros programas al­te­r­na­ti­vos. Es im­po­r­ta­n­te, una vez en­co­n­tra­do el diseño óptimo, no olvidar que ha de ser aplicable a distintos tamaños y distintas re­so­lu­cio­nes de pantalla. Esto determina la exigencia de crear di­fe­re­n­tes versiones en las cuales ajustar el orden de los co­n­te­ni­dos en función de los di­fe­re­n­tes formatos. Una vez concluida esta fase de diseño y de­sa­rro­llo de la apli­ca­ció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.