La programación es un arte que suele dar bastantes dolores de cabeza. Inicialmente puede parecer que lo importante es ponerse a picar (escribir) código lo más rápido posible para cumplir los requisitos del cliente. Una vez funciona se prepara un interfaz de usuario más o menos usable, se prueba la aplicación y se entrega al cliente. La aplicación tiene que cumplir los requisitos del cliente tanto en el funcionamiento interno como en la apariencia. Normalmente se da más prioridad al funcionamiento interno y se le da menos importancia a la apariencia. Para evitar este problema y que el cliente devuelva una aplicación que no cumple sus necesidades podemos hacer mockups antes de empezar la programación. Un mockup es un esbozo o un boceto de una aplicación. En el caso de una aplicación para Android tendríamos una vista más o menos fiable de la pantalla en la que se mostraran las opciones antes de implementarlas. La ventaja de usarlos es clara ya que permite que el cliente conozca la apariencia de su aplicación y la modifique en las fases iniciales del proyecto.

Introducción

Para realizar un mockup podemos usar papel y bolígrafo o el ordenador. La forma más rápida es obviamente con papel y bolígrafo porque permite hacer bocetos y si no cumplen los requisitos tirarlos y empezar de nuevo. Una vez tenemos un diseño candidato para la aplicación es necesario enseñárselo al cliente. Si en lugar de presentarle el diseño en bolígrafo lo hacemos mediante el ordenador el resultado será más profesional. Tenemos dos opciones en este punto del diseño. La primera es usar un software de edición fotográfica como Gimp para dibujar las pantallas. Podéis encontrar una plantilla con los controles de Android 4.3 en esta dirección. La segunda opción es similar pero funciona de forma diferente y consiste en hacer pantallas interactivas usando aplicaciones Web. Para esta tarea podemos usar LucidChart o Fluid UI

Flujo de trabajo

Supongamos dos escenarios. En el primero el cliente ve las pantallas de la aplicación. Mediante las explicaciones que le demos conocerá el funcionamiento de la aplicación y las relaciones entre las pantallas. En el segundo escenario en lugar de decirle las relaciones damos el prototipo al cliente. El propio cliente prueba la aplicación pulsando en los controles y viendo el resultado de la acción usando un navegador. Cuando pulsa en un elemento de una lista puede acceder a la pantalla de propiedades. Después vuelve a la pantalla inicial al pulsar el botón “atrás” que tenemos en la aplicación. Se comporta como si la aplicación estuviera programada pero sin la necesidad de haber escrito una línea de código. Aunque da un poco más de trabajo preparar este segundo escenario conseguiremos que el prototipo sea más profesional y que el cliente nos aporte las modificaciones que crea oportunas sobre el diseño.

El funcionamiento de estas aplicaciones Web es sencillo. Básicamente se comporta como una imagen segmentada en la que cada parte de la imagen tiene enlazada otra imagen. En la red hay varias aplicaciones de este tipo pero las dos más útiles son LucidChart y Fluid UI. Ambas permiten hacer mockups de Android (o de productos de Apple entre otras plataformas), facilitan la creación de mockups interactivos y tienen una versión gratuita limitada. Las capturas corresponden a un diseño que estoy haciendo de una aplicación para Android. La aplicación tiene tres pantallas. Una principal, una que permite editar la información de un bono y una tercera que corresponde al primer paso de un asistente.

Asociar pantallas

Si pulsamos en el primer elemento de la lista (el bono 1) podemos acceder a la pantalla de edición. Al pulsar en el botón Atrás se vuelve a la pantalla inicial. En el caso de pulsar el icono de Añadir pasaréis al primer paso del asistente. Desde esta pantalla se puede volver a la pantalla inicial o pasar a la pantalla de edición pulsando en el botón. Tengo una demo (en fase de diseño) en el siguiente enlace. La parte interactiva funciona a partir de las relaciones que definamos. Si un elemento no tiene ninguna relación no hará nada. La demo sólo responde a los elementos que he comentado.

01 Pantalla principal

02 Propiedades del bono

03 Asistente para crear un bono nuevo

Conclusiones

Este artículo es una introducción a la forma de diseñar una aplicación para Android que se pueda mostrar al cliente. Si bien es cierto que no tenemos la respuesta de una aplicación real que esté programada, también hay que tener en cuenta que no hemos escrito ninguna línea de código. El número de pantallas depende de los estados que queramos mostrar. Por ejemplo si pulsamos sobre un botón y queremos que se muestre un menú tendremos que clonar la pantalla inicial y añadir a la pantalla creada el menú. Es un proceso un poco artesanal pero que puede ahorrar tiempo en las fases del diseño de la aplicación. Una vez que el cliente acepta el diseño ya podemos empezar a codificar el programa.

Tanto LucidChart como Fluid UI tienen una versión gratuita y varios planes de pago. Con Fluid UI es posible crear en la versión gratuita un proyecto que tenga 10 pantallas como máximo. No se pueden exportar los resultados pero siempre podemos hacer una captura de pantalla del navegador. Los planes de pago son un servicio de suscripción y hay que tenerlo en cuenta en los gastos que tengamos. Podemos hacer cosas parecidas con un software como Gimp en local, pero las pantallas serán estáticas. Todo depende del uso que demos a cada herramienta y de la relación coste / tiempo ahorrado en el desarrollo.