Diseñando un prototipo de tu app (antes de que sea demasiado tarde)

Captura de pantalla 2015-10-05 a las 11.31.44 a.m.
Lanzar algo al mercado sin haber tenido el tiempo de ir evolucionando gradualmente puede ser tan riesgoso como construir una casa sin tener los planos.

Por: Javier «Simón» Cuello*

Hace un tiempo, me contactó una startup: querían diseñar su aplicación por segunda vez. Pero ahora, querían hacerlo bien, siguiendo un proceso de diseño paso a paso, aprendiendo de aquellos errores que en el pasado les habían hecho perder un montón de tiempo (y dinero) en un producto que no tenía ni pies ni cabeza. 

(Lea: 10 apps ideales para emprendedores)

Antes de contactarme, habían estado trabajando tan entusiasmados con su idea, que comenzaron a desarrollarla directamente, sin ni siquiera tener antes un prototipo funcional; sólo para descubrir (meses después) que el producto era un fracaso absoluto.

Este tipo de situaciones suceden más a menudo de lo que puedas imaginar, especialmente cuando sentimos la presión de lanzar algo al mercado sin haber tenido el tiempo de ir evolucionando gradualmente, pasando por las diferentes etapas de un proceso de desarrollo, y validando cada una de ellas antes de continuar con la próxima. En muchos casos, hacer esto es tan riesgoso como construir una casa sin tener los planos.

Afortunadamente, construir un prototipo no es tan difícil como puede parecer a primera vista. Además, lo que aprendas en este proceso te acompañará durante todo el camino, así que es mejor comenzar a trabajar en él en etapas tempranas, tan pronto como cuando tienes tus primeras ideas.

La complejidad y apariencia de este prototipo (algo llamado habitualmente “fidelidad”) variará dependiendo de lo que quieras comprobar. Por ejemplo, si sólo quieres ver cómo otras personas, o potenciales usuarios, reaccionan al concepto de tu app, quizás sólo un bosquejo interactivo puede ser suficiente.

Por el contrario, si ya has testado el concepto y te sientes con confianza, entonces necesitarás un prototipo más “avanzado” para probar interacciones, el diseño visual o las animaciones, entre otras cosas. 

1
Algunas herramientas permiten diseñar un prototipo, y al mismo tiempo, trabajar en equipo en modo colaborativo. Fuente InVision.

Los prototipos son también útiles para comunicar ideas, algo que es muy importante cuando estás trabajando en equipo. Puede llegar a ser muy complicado explicar lo que tienes en mente sólo usando palabras. Entonces, un prototipo más visual ayudará a todo el mundo a estar en la misma página antes de seguir adelante, evitando malentendidos. Hacer un prototipo también será valioso para ti mismo, porque te permitirá visualizar mejor tus ideas y te proporcionará los medios para probar diferentes diagramaciones y enfoques antes de desarrollar algo “terminado”. Por suerte, en el comienzo, algunas herramientas tan básicas como papel y lápiz pueden ser lo que necesitas para comenzar con el pie derecho.

Lápiz y papel: Construye tu idea

A veces, las herramientas más simples, esas que tenemos sobre el escritorio y usamos cada día, son lo que necesitamos para comenzar a bosquejar ideas. ¿Quién no ha diseñado una interfaz en una servilleta, alguna vez? Aunque a lo que me refiero ahora es algo más profesional que eso, el objetivo sigue siendo el mismo: conseguir un panorama rápido de cómo puede ser la interfaz, y llevar tus ideas a un plano más tangible.

2
Es relativamente fácil (y rápido) diseñar una interfaz en papel y luego tomar fotos de las pantallas para añadir interacción. Fuente Marvel.

En esta etapa, no deberías estar preocupado por conseguir la perfección, los dibujos en papel son tan fáciles de hacer (y de descartar) que no deberías sentir culpa si los tiras a la basura cuando te das cuenta que no sirven. 

Una vez que tienes una posible estructura de las pantallas, hay algunas herramientas que te permitirán ir un poco más allá y construir un prototipo que también tendrá enlaces entre pantallas, soporte para gestos y transiciones, ¡tal como una app real, pero hecho de papel! Para conseguir esto, instala en tu celular POP o Marvel. Toma unas fotografías de tus diseños, y usando estas apps que que comento tendrás un prototipo listo en —literalmente— 5 minutos.

Esta es una forma genial de mostrar tus ideas a amigos y compañeros de trabajo, y comenzar a validar tu concepto para descubrir si vas por el camino correcto antes de avanzar demasiado.

Pasando a la computadora: Piensa las interacciones

Cuando tengas un entendimiento sólido de que tu prototipo inicial en papel puede funcionar, entonces es hora de dar el próximo paso. Después de todo, el papel es una herramienta algo limitada, y aún cuando ha cumplido su objetivo en la primera parte del proceso, no te deja ir mucho más allá.

Pasar a la computadora debería ser el próximo paso lógico, pero aquí es donde muchas personas se atascan (sobre todo aquellos que no son diseñadores). No saber qué software usar es una de las razones. 

Además, Photoshop históricamente a ahuyentado a quienes no están familiarizados con herramientas de diseño (y a veces, a diseñadores también) por su infinidad de paletas de herramientas y opciones. Todo eso es muy útil si quieres hacer retoque fotográfico, pero seamos realistas: pueden entorpecer tu proceso al diseñar algo simple. 

3
Sketch permite reutilizar componentes de interfaz basados en los estándares para construir tus pantallas, tan simple como copiando y pegando elementos.

Recientemente, han aparecido en el mercado algunas herramientas de diseño que son fáciles de usar incluso para aquellas personas que no se sienten con confianza en sus capacidades de diseño. Sketch es una de las más conocidas de este tipo, pero hay muchas más. Cuando uso alguna de estas herramientas, comienzo a diseñar los wireframes usando elementos de la interfaz (tales como diálogos, listas, y botones, entre otras cosas) que ya vienen en plantillas provistas por el programa. De esa forma, tan simple como copiando y pegando elementos puedes conseguir una interfaz que casi se parece a la de una app “real”. 

(Lea: Por qué deberías escribir el código como si fuera poesía y 10 consejos de un programador)

El peligro aquí es ir más lejos de lo que realmente necesitas en esta etapa. Intenta no invertir una excesiva cantidad de tiempo en elegir colores, tipografía, o ajustar tu diseño al mínimo detalle si lo que quieres hacer es probar sólo interacciones o la navegación, por ejemplo.

¡Recuerda que el diablo está en los detalles!

4
Puedes visualizar tu diseño en el móvil, simulando la apariencia de una app terminada. Fuente InVision.

Luego, cuando te sientas satisfecho con lo que has conseguido, puedes usar otras herramientas (como InVision o Flinto, por ejemplo) para añadir interacción a tus diseños. Después, también podrás compartir prototipo con tus compañeros de trabajo, que lo probarán en sus dispositivos. De hecho, muchas de estas herramientas están pensadas para trabajar en equipo, así que es fácil invitar a los demás para que sean parte del proyecto. Ellos te podrán decir lo que piensan dejando comentarios mientras tú vas avanzando, o aún más, subir sus propias propuestas.

Finalmente, hay otras opciones más tradicionales para ayudarte a diseñar tus wireframes, como Axure, Balsamiq u Omnigraffle, sólo por nombrar algunas, que pueden venir bien una vez que te sientas más experimentado con software de diseño.

Más allá de diseños estáticos: Animaciones

Lo siguiente son las animaciones. Aquí, una vez más, las herramientas que has estado usando hasta ahora para tu prototipo pueden no ser suficientes, si lo que necesitas es más que diseños estáticos. En realidad, aunque lo queramos y busquemos, no hay una sola herramienta con lo que se pueda hacer todo.

Tal como un mecánico usa un set de herramientas en su taller, tú también necesitarás encontrar la que se ajuste a lo que necesites cuando diseñes prototipos de animaciones. 

Piensa que siempre será mejor diseñar algo, que perder tiempo intentando explicar al resto del equipo como quieres que un elemento “vuele”, “se mueva” o “aparezca”. 

Si sólo quieres una idea rápida de como debería verse una animación, puedes usar Keynote, por ejemplo. Aún si fue pensada originalmente para hacer presentaciones, también te permite construir animaciones relativamente fácil. Si quieres probarla, también hay montones de recursos de ayuda que te guiarán en el proceso de entender cómo funciona.

5
Las animaciones en apps están teniendo cada vez más protagonismo, y en consecuencia, han aparecido diferentes herramientas para prototiparlas. Fuente Principle.

Últimamente, han aparecido más opciones, quizás por el impulso que Android le está dando a Material Design, donde las animaciones son grandes protagonistas. En cualquier caso, si necesitas animaciones más complejas, entonces puedes elegir entre una variedad de opciones que tienen una apariencia similar a otras herramientas de diseño, como Pixate (recientemente adquirida por Google), Flinto para Mac, o Principle. Todas ellas te permiten conseguir animaciones, sobre todo basadas en tus diseños previos, y sin necesidad de aprender a programar.

Por otro lado, si quieres transformar tus animaciones en código que después puedas aprovechar, puedes usar herramientas como Framer, Form (también comprada por Google), u Origami (usada por Facebook para desarrollar su aplicación Paper). Estas son un poco más difíciles de usar y pueden tener una curva de aprendizaje más alta que las que comentaba antes, pero te darán más control sorbe los diferentes componentes de la interfaz, para conseguir un resultado más realista.

Conclusión 

Cuando estaba trabajando en una startup de Barcelona, hace algunos años, solíamos pasar muchísimo tiempo encerrados en una sala de reuniones, discutiendo sobre posibles soluciones para los problemas que encontrábamos en los productos. Entonces, dibujábamos en la pizarra, borrábamos y volvíamos a comenzar, intentando encontrar la respuesta. En algún momento, yo, el diseñador de la empresa, me cansaba de la situación e irónicamente comentaba “Hum, deberíamos contratar un diseñador para que trabaje sobre esto y ver cómo funciona”.

Bromas aparte, y más allá de qué perfil o habilidades tengas, siempre es más útil diseñar un prototipo en lugar de perder tiempo en reuniones. Esa es la única —o al menos la mejor— forma de visualizar un enfoque de forma más tangible, que pueda llevarte a encontrar lar respuesta que buscas.

Cómo habrás podido ver, herramientas para esto no faltan. Sólo elige aquella con la que te sientas más cómodo y te permita alcanzar los niveles de complejidad que esperas. Pero recuerda ir paso a paso, y construir un prototipo que responda a las necesidades del momento, y no necesariamente mucho más que eso.

*Es diseñador de UX especializado en móviles, actualmente reside en Barcelona. Allí ha trabajado en diferentes proyectos para pequeñas y grandes empresas, como Telefónica, Zara, Yahoo! o el FC Barcelona. Toda su experiencia la ha transmitido en Diseñando apps para móviles, libro del cual es coautor, y que con el tiempo se ha transformado en la guía imprescindible para quienes quieren comenzar en el mundo del diseño de apps para Android, iOS y Windows Phone. En Twitter: @millonestarde y Facebook /disenoenviaje