¿Cuál es la mejor herramienta para prototipar un app?

Ya sea para un sitio web o una aplicación para dispositivos móviles, al crear una interfaz los diseñadores no solo buscamos crear algo visualmente atractivo y que refleje la personalidad del producto o servicio que vendemos. Lo prioritario es enfocarse en crear una interfaz que genere una buena experiencia, que sea lo más intuitiva posible y, por consiguiente, que sea fácil de utilizar para el usuario final.

“Interfaz que genere una buena experiencia y que sea fácil de usar”

Para lograr esta fluidez en la utilización del software, los diseñadores debemos poner a prueba el diseño que hemos planteado. De lo contrario, podríamos arriesgarnos a lanzar al mercado un software que no le permita al usuario completar las acciones para las que fue desarrollado. Esto no sólo representaría pérdidas para nuestras empresas, sino que generaría un sentimiento de frustración cada vez que el usuario tenga que utilizar nuestra interfaz.

Lo recomendable es hacer las pruebas de nuestra interfaz antes de que el proyecto entre en la etapa de desarrollo. La razón de elaborar antes las pruebas, se debe a que el objetivo de ellas es estudiar el comportamiento del usuario con la interfaz, para así descubrir posibles fallos y analizar mejoras que podrían implementarse para que el resultado final sea el más efectivo. Entre más avanzado esté el proyecto, más difícil sería implementar estos cambios.

“Pruebas antes de que el proyecto entre en la etapa de desarrollo”

Pero, ¿cómo podemos probar una interfaz que aún no ha sido desarrollada? La respuesta es sencilla, podemos hacerlo mediante un prototipo. Los prototipos pueden ser de gran ayuda cuando queremos poner aprueba la navegación y el comportamiento del usuario al usar nuestra nuestra interfaz. Un prototipo puede ir desde dibujos realizados a mano hasta diseños completamente funcionales que podrían hacer creer al usuario que está utilizando un producto ya terminado.


Buscando el mejor software para prototipar

La Creativería siempre ha reconocido la importancia de los prototipos en el proceso de desarrollo de software, y hemos elaborado varios en algunos de nuestros proyectos. La mayoría de estos tenían como objetivo el ayudarle a nuestros clientes a visualizar el producto mientras lo desarrollábamos y así someterlo a su aprobación.

Recientemente, decidimos comenzar a emplear prototipos en nuestro proceso de diseño para comprobar la efectividad de las interfaces que vamos a implementar. Así podremos predecir el comportamiento de los usuarios y crear productos adecuados a cada uno de ellos.

Es aquí donde comienza nuestra búsqueda de la mejor herramienta de prototipado que se ajuste a las necesidades de nuestra empresa. Dentro de las características que consideramos imprescindibles al adquirir un software de este tipo se encuentran las siguientes:

  • Rápida ejecución. Los prototipos deberían de poder realizarse de manera rápida, pues uno de sus principales objetivos es ahorrarnos tiempo. La interfaz de nuestra herramienta de prototipado deberá ser comprensible y familiar para cualquier diseñador.
  • Variedad de fucionalidades. Necesitamos una herramienta con la que podamos elaborar tanto prototipos sencillos como de alta fidelidad. Por esta razón, buscamos un software que nos permita crear animaciones, transiciones, formularios y todo aquello que pueda hacer nuestro prototipo lo más parecido posible al producto final.
  • Importación del diseño. Ya sea por medio de la integración con nuestros programas de diseño o por algún otro medio, necesitamos un software que nos permita importar fácilmente los diseños que hemos trabajado para convertirlos en un prototipo.
  • Previsualización. La herramienta debe permitirnos probar el prototipo en el dispositivo para el cual fue creado. De esta manera, la interacción del usuario con él será más real.
  • Soporte. El fabricante del software debe proporcionar documentación clara para enseñarle -en este caso- a los diseñadores a utilizar de manera correcta la herramienta. Y además, brindarle el soporte necesario por si se presenta algún inconveniente al utilizarla.

Teniendo definido lo que buscábamos, decidimos iniciar a investigar sobre qué opciones nos ofrece el mercado actualmente. Nos encontramos con una gran variedad de herramientas, dirigidas tanto a diseñadores como a desarrolladores y a personas que solo quieren empezar a materializar una idea propia.

Después de leer artículos y experiencias de otros diseñadores de interfaces, elegimos poner a prueba algunas de las herramientas más populares y evaluar los pros y contras de cada una de ellas. A continuación se encuentran los cuadros comparativos que realizamos según nuestra experiencia con cada software.

Principle

Creada por un ingeniero de Apple y con la colaboración de algunos de sus amigos en empresas como Facebook y Cartoon Network, la interfaz de Principle nos remite inevitablemente a Sketch. Se caracteriza por ser intuitiva y fácil de utilizar.

PROS

  • Línea de tiempo para animaciones.
  • Interfaz intuitiva y similar a la de Sketch.
  • Visualización en tiempo real en iPhone.
  • Trabaja con imágenes y assets.

CONS

  • Aplicación solamente disponible en App Store y solo se puede previsualizar el prototipo en iPhone.
  • Limitaciones en cuanto animaciones y mal funcionamiento de las mismas.
  • No existe un plug-in para sketch.
  • No permite hacer simulación de campos de texto.
  • No permite realizar animaciones 3D.
  • Creación de gran cantidad de artboards debido a que las interacciones son entre páginas y no entre assets.

Pixate

Es una herramienta para crear prototipos de alta fidelidad y que ha sido utilizada por marcas como Amazon, Disney, Facebook, Google y Uber. Crea prototipos 100% nativos que pueden ser utilizados en dispositivos Android y iOS.

PROS

  • Se pueden incluir campos de texto para formularios.
  • Creación de hotspots.
  • Permite compartir el proyecto, previsualizarlo e ingresar comentarios.
  • Alta calidad de las animaciones.
  • Visualización en tiempo real del prototipo en el dispositivo.

CONS

  • Problemas para exportar.
  • La interfaz puede resultar compleja y no muy intuitiva.
  • En algunas funcionalidad se requieren muchos pasos para definir una acción.
  • No hay integración con los programas de diseño. Prácticamente se debe rehacer el diseño en el programa.
  • No se pueden incluir campos de texto para formularios.
  • Se requiere descargar Xcode para visualizar el prototipo en el computador.

Proto.io

Sus creadores prometen que su interfaz basada en “arrastrar y soltar”, le facilitará el trabajo al diseñador y le permitirá realizar prototipos funcionales en cuestión de minutos y sin una sola línea de código.

PROS

  • Se pueden incluir campos de texto para formularios.
  • Integración con Sketch.
  • Permite compartir el proyecto y previsualizarlo, así como ingresar comentarios.
  • Trabaja tanto con assets como con imágenes. Se puede empezar a diseñar desde cero o importar el diseño desde Sketch manteniendo la organización de los elementos.
  • Amplia gama de funcionalidades (animaciones, transiciones, edición de texto).
  • Es una herramienta en línea, por lo que se puede accesar y prototipar desde cualquier computador.
  • La opción de “states” permite reducir el número de pantallas y realizar interacciones más fácilmente.
  • Templates útiles.
  • Creación de hotspots y la posibilidad de copiarlos y pegarlos en otras pantallas.
  • Posibilidad de realizar tanto prototipos sencillos como complejos.

CONS

  • La documentación para aprender a utilizar la herramienta no es clara.
  • Interfaz saturada.
  • No cuenta con una previsualización en tiempo real.
  • No permite realizar animaciones 3D.
  • Algunas veces, al importar los diseños, se llegan a perder elementos.
  • Limitaciones en cuanto a fuentes tipográficas.

Invision

Se basa en crear hotspots en las imágenes de cada pantalla del diseño para agregar interacciones. Es una aplicación web fácil de utilizar y bastante completa.

PROS

  • Integración con Sketch y Photoshop.
  • Creación de hotspots.
  • Permite compartir el proyecto, previsualizarlo e ingresar comentarios.
  • Creación rápida de interacciones e interfaz fácil de utilizar. Se puede obtener un prototipo sencillo de manera rápida.
  • Anima imágenes completas de las pantallas del diseño.
  • Es una herramienta en línea, por lo que se puede accesar y prototipar desde cualquier computador.

CONS

  • En algunos casos, son necesarias una gran cantidad de imágenes para crear un prototipo.
  • Animaciones muy básicas.
  • No se pueden incluir campos de texto para formularios.
  • El resultado es un prototipo de baja fidelidad.
  • No se permite copiar y pegar hotspots para agilizar el trabajo.

Flinto

Al igual que Invision, esta herramienta trabaja sobre las imágenes PNG de cada una de las pantallas. Es una herramienta bastante sencilla para realizar prototipos de baja fidelidad.

PROS

  • Rapidez al crear transiciones.
  • Gran variedad de animaciones.
  • Interfaz simple.

CONS

  • No permite crear áreas de scroll.
  • No se pueden incluir campos de texto para formularios.
  • Cantidad de transiciones limitada.
  • El plugin de Sketch no funciona correctamente.
  • Solo exporta el prototipo en un tamaño.

Just In Mind

Esta aplicación promete ser ideal para toda clase de prototipos, desde muy básicas hasta los más elaborados. Contiene widgets que hacen del prototipo una simulación bastante real y sin demasiado trabajo.

PROS

  • Interfaz intuitiva y familiar para un diseñador.
  • Amplia gama de funcionalidades.
  • Es similar a Invision pero cuenta con muchas más herramientas.
  • Se pueden copiar y pegar hotspots para agilizar el trabajo.

CONS

  • No hay integración con los programas de diseño (Sketch y Photoshop).

Tomando una decisión y el híbrido ideal

Analizar a fondo todas las características de estas herramientas, nos permitió darnos cuenta de que el mercado nos ofrece una amplia variedad de opciones para realizar prototipos funcionales. Cada uno de estos programas tienen enfoques diferentes para satisfacer necesidades específicas de los usuarios, y además se encuentran en etapas de crecimiento diferentes (algunos son productos muy recientes y otros ya han evolucionado en varias versiones).

Por todos estos factores, no podemos recomendar solamente una herramienta para realizar un prototipo, ya que la mejor opción depende de qué es lo que cada diseñador esté buscando. Aclarado esto y para facilitar un poco esta decisión, decidimos elegir la mejor característica de todas las herramientas que analizamos. De esta manera, los diseñadores que lean este artículo buscando recomendaciones sobre este tipo de programas, podrán tener en cuenta nuestras opiniones y tomar una decisión según sus propios requerimientos.

Elegimos presentar estas opiniones pensando en qué aspectos rescataríamos de cada herramienta para crear nuestro híbrido ideal. A continuación nuestros resultados:

Esperamos que este artículo le haya ayudado a tomar una decisión sobre qué herramientas debería probar según la clase de prototipo que necesita. Cuéntenos cuáles de estos programas ha utilizado, cómo han sido sus experiencias con ellos y cuáles otros recomendaría que evaluemos.


Si le gustó el artículo y cree que le podría interesar a los suyos, por favor presione el ♥ de abajo. Compartamos conocimiento entre todos y sigamos la conversación en Facebook y Twitter.

También puede visitar La Creativería si tiene curiosidad en conocer más sobre nuestro trabajo. Gracias a Guillermo Zúñiga y María Antonieta Rojas por tanta dedicación al escribir este artículo.

Show your support

Clapping shows how much you appreciated La Creativería’s story.