El móvil se ha convertido rápidamente en una de los dispositivos más populares de comunicación en la era digital y, como tal, puede proporcionar un potente canal de dialogo e interacción con nuestro público o clientes. El propósito de este post es ofrecer unos sencillos consejos de ayuda, para poder iniciarse en el diseño de aplicaciones móviles.
Para empezar hemos de tener en cuenta con los fundamentos del diseño móvil. Algo que puede parecer obvio, pero aún nos sorprendemos de la cantidad de sitios y aplicaciones en el mercado que parecen no tener en cuenta estos factores básicos.
Como por ejemplo:
- Tamaño de pantalla y proporciones: pasar del escritorio al móvil significa mucho menos espacio en pantalla y mucha más variedad en las proporciones de la pantalla
- La interacción directa con la pantalla: a diferencia del entorno de escritorio, los usuarios interaccionan directamente con la pantalla en lugar de utilizar un ratón y un teclado, lo cual establece un conflicto inmediato del uso de la pantalla
- Orientación variable: los dispositivos móviles permiten una conmutación rápida de orientación
- Una sola pantalla: incluso con los smartphones que permiten a los usuarios ejecutar múltiples aplicaciones o mantener simultáneamente varias ventanas de navegadores, los resultados son mostrados en una única pantalla establecida para interaccionar, lo que sugiere que tenemos que centrarnos en crear las experiencias en una única pantalla.
- Interacción limitada: no hay rollovers o tooltips, de modo que las acciones deben ser obvias y a su vez que el usuario interprete correctamente los posibles errores.
- Utilización de los estándares establecidos para los dispositivos: aún que el mercado madure, es recomendable utilizar los patrones consistentes de interfaz de usuario que existen( por ejemplo: el botón de atrás en la parte superior izquierda), si no elegimos los estándares debemos asegurarnos que lo utilizamos por razones concretas y correctas.
- Recursos limitados: mientras que los smartphones están avanzando a pasos agigantados, todavía existe una limitación en la calidad de conexión, la vida de la batería, la potencia del procesador, la memoria interna…
Aparte de conocer estos fundamentos, también es muy importante conocer el dispositivo y lo que nos puede ofrecer para poder realizar un diseño creativo. Por ejemplo, los Smartphones de hoy ofrecen un conjunto de entradas muy sofisticadas que proporcionan a los diseñadores múltiples opciones. Por un lado el descubrimiento de nuevos gestos pueden ser una poderosa experiencia para los usuarios. Se añade una sensación de emoción, misterio y logro. Gracias a esta guía muy completa realizada por varios autores podemos conocer cuáles son los gestos que se pueden realizar en pantallas táctiles de los dispositivo móviles más comunes.
También estos dispositivos avanzados ofrecen controles adicionales en forma de: botones físicos (home, menú, atrás, subir / bajar volumen, etc), teclados físicos (atajos, entrada de texto), acelerómetros (track de movimiento y orientación), GPS, micrófono (comandos de voz, audio, música), cámara (fotos y códigos visuales).
Antes de diseñar y programar, hay que tomar una serie de decisiones y realizar un trabajo preliminar de análisis y documentación que de no efectuarse, repercutirá directamente en la calidad y resultado final del proyecto, independientemente del tamaño y alcance del mismo. El proceso más común lo podéis consultar en este post que publique en su día,
Para el diseño de aplicaciones es muy importante también definir una correcta Arquitectura de la Información (AI) para este dispositivo que nos permita organizar los contenidos, para ser encontrados y utilizados por los usuarios, de manera simple y directa. Algunos puntos a tener en cuenta son:
- Que sea sencillo y centrado. Al diseñar nuestra app debemos definir las tareas de los usuarios y apoyarlas con experiencias limpias y bien editadas.
- Priorizar el contenido. Poner lo más importante en primer lugar.
- Mantener el contexto del usuario en mente. ¿Dónde están? ¿Qué es lo apropiado para ese entorno?
- Proporcionar retroalimentación visual, siempre. Muchas veces el usuario se queda pensando si la acción que ha realizado ha funcionado. Siempre hay que confirmar la acción realizada inmediatamente con algún feedback visual.
Y ya para finalizar, para el diseño visual de la aplicación debemos tener en cuenta una serie de recomendaciones que las he estructurado en siete apartados.
Contexto
Con una aplicación de escritorio, podemos estar seguros de que se está utilizando en un entorno particular. Con el móvil, es imposible, por lo tanto:
- Debemos conocer a los usuarios. ¿Quiénes son? ¿Qué sabemos ellos? ¿Qué tipo de comportamiento podemos asumir o predecir acerca de los usuarios?
- Lo que les esta pasando. ¿Cuáles son las circunstancias en las que el usuario absorberá mejor el contenido a presentar?
- Cuándo van a interaccionar. ¿Están en casa y tienen tiempo? ¿Están en el trabajo donde tienen cortos períodos de tiempo? ¿Esperando de un tren?
- Dónde están los usuarios, ¿Están en un espacio público o privado? ¿Están dentro o fuera? ¿Es de día o es de noche?
- Por qué van a utilizar nuestra aplicación, ¿Qué valor se obtienen a partir de los contenidos o servicios en su situación actual?
- Cómo están usando el móvil, ¿Lo mantienen en su mano o en su bolsillo? ¿Encendido o apagado? ¿En formato vertical o horizontal?
Mensaje
El mensaje que queremos transmitir es fundamental. A través del diseño visual creamos explícitamente el mensaje mental que queremos generar al usuario . Cómo alguien reacciona a nuestro diseño y cual es su impresión. Por lo tanto hemos de preguntarnos ¿Qué estamos tratando de decir visualmente en nuestra aplicación?
Look & feel
Se utiliza para describir la apariencia. Sirve tanto para “Quiero un aspecto limpio” o “quiero un look usable.” Los usuarios se preocupan profundamente por la apariencia de sus aplicaciones, porque son cosas personales. El sentido de pertenencia es más fuerte que cuando se trata de aplicaciones de escritorio.
En algunas ocasiones cuesta decidir los elementos de una interfaz cuando hacemos el prototipo de la app. Una forma de ayuda para decidir un diseño consistente es aprovechar patrones de diseño contrastados. En este caso existen un montón de recursos interesantes que nos pueden ayudar, aquí detallo algunos enlaces:
http://mobiledesignpatterngallery.com
http://www.mobile-patterns.com
http://pttrns.com
http://androidpttrns.com
http://inspired-ui.com
Layout
La definición de las estructuras es fundamental en un proyecto móvil para crear una experiencia consistente y utilizable. Una de las diferencias más importantes a tener en cuenta en el diseño para app móviles es que los usuarios tienen que ver no sólo la pantalla, sino también interaccionar con ella.
Gracias al layout el usuario procesará visualmente la página. A medida que va avanzando el panorama móvil, tenemos que ser listos con los diseños para que se adaptan al tamaño de cada dispositivo nuevo así como sus orientaciones . Aún así puede ser muy difícil crear la mejor experiencia posible en diferentes tamaños de pantalla.
Color
Es uno de los obstáculos más común que nos encontramos cuando diseñamos en diferentes pantallas. Cuando realizamos diseños complejos que se muestran en diferentes dispositivos móviles, la profundidad de color limitada en un dispositivo puede causar efectos no deseados.
El color está convirtiendo en una forma cada vez más popular para que las aplicaciones destaquen respecto la competencia. La primera ola de aplicaciones creadas a menudo han imitado las aplicaciones nativas de Apple iOS. Sin embargo lo que estamos viendo más, es un cambio hacia unos diseños más audaces con la utilización de colores primarios y degradados. Así como acabados en mate. Tener colores fuertes en una app puede crear respuestas emotivas de los usuarios, a veces, considerándose una aplicación más memorable.
Si queréis saber como elegir correctamente un color podéis consultar el post que publiqué hace un tiempo, os puede resultar de gran ayuda.
Tipografía
Como las aplicaciones móviles evolucionan, los diseñadores cada vez más se están alejando de usar las fuentes estándar del sistema y utilizan tipografías más especificas. Muchos de los rasgos del diseño de la tipografía en aplicaciones móviles provienen de la web.
Algunas recomendaciones:
- El texto funciona mejor cuando es grande, fácil de leer y no sujeto a otros elementos de la interfaz.
- En los dispositivos móviles, la combinación con una tipo delgada a menudo hace que sea una experiencia más legible en pantallas de alta resolución.
- La altura debe ser uniforme y equilibrada. Las letras minúsculas idealmente deben ser al menos 2/3 de la altura de la letra mayúscula. Esto se conoce como la “altura de la x.”
- El grosor amplio y contrastado. Esto significa que la fuente no debe ser demasiada delgada o demasiado pesada, lo ideal un término medio.
- Evitar fuentes con ascendentes y descendentes demasiados largos. Las fuentes decorativas tienden a romper las tres normas, por lo que es mejor optar por una elegante sans-serif para los elementos de la interfaz de usuario.
Gráficos
Utilizaremos el uso de gráficos para establecer o ayudar a la experiencia visual. Los gráficos se pueden utilizar para complementar la apariencia, o como apoyo al contenido que se muestran en texto. Su uso se basa principalmente en Iconografía o en Imágenes. Respecto a la Iconografía si no tenemos el tiempo necesario para trabajarlo podemos aprovechar recurso ya existentes, en este caso os propongo un ejemplo interesante: http://www.glyphish.com/
Bueno esto sería una breve recomendación inicial para poder iniciarse en el diseño de aplicaciones móviles. Evidentemente hay muchas más, para eso os recomiendo una serie de links que os pueden servir para profundizar más en el tema
http://www.abookapart.com/products/mobile-firs
http://www.abookapart.com/products/content-strategy-for-mobile
https://shop.smashingmagazine.com/smashing-mobile-bundle.html
http://nathanbarry.com/app-design-handbook
http://www.smashingmagazine.com/guidelines-for-mobile-web-development
http://designmodo.com/wireframing-prototyping-mobile-app
Paula López es una profesional de la comunicación y el marketing con más de 8 años de experiencia en puestos de diferente responsabilidad, aunque siempre con mucha vinculación a las nuevas tecnologías. Actualmente editora en 
