Diseño de interfaces

Herramientas para la creación de prototipos navegables

Las razones por las cuales es conveniente crear prototipos navegables radican en la necesidad de mostrar de forma más precisa y realista los distintos flujos y comportamientos de sitios y aplicaciones.

Los prototipos navegables ayudan a la comprensión, ya que permiten que se explique de mejor manera una propuesta, ya sea a través de un diseño, mockup o wireframe.

Hoy en día existen variadas herramientas para agregar interacción a nuestros prototipos y hacerlos navegables, permitiendo la visualización de las interacciones.

5 opciones para crear prototipos navegables

En nuestros proyectos hemos analizado varias aplicaciones y plataformas para crear prototipos que permitan poner a pruebas las distintas interacciones. De entre todas estas opciones, destacamos cinco herramientas.

Marvel

Marvel App permite la creación de proyectos ilimitados, los cuales se componen de plantillas que pueden diseñarse directamente en la aplicación, importarse como archivos (.pdf, .sketch, .gif, .jpg, y .png) o sincronizarse a través de Dropbox, Google Drive, Sketch y Box.

Las plantillas agregadas en cada proyecto son linkeadas entre sí y animadas gracias a los gestos y transiciones que ofrece la herramienta. Sin embargo, al visualizar el prototipo navegable, existen elementos propios de la aplicación (logo y otras opciones) que se superponen a las plantillas y no pueden quitarse a menos que se tenga un plan premium.

Marvel además ofrece una aplicación para iOS, para prototipar bajo la misma lógica que su versión web de escritorio, la cual es sencilla e intuitiva.

Si bien ofrece una versión gratuita, tiene además planes de pago para acceder a más opciones en los proyectos.

Para más información visita Marvel App.

InVision

Esta herramienta es muy similar a Marvel App. Crear un proyecto es la primera invitación, pero en este caso solo permite importar archivos (.psd, .sketch, .pdf, .png, .jpg, y .gif) o sincronizarlos desde Dropbox, Google Drive y Box, obviando la opción de diseñar en la misma.

InVision ofrece más gestos y transiciones que la herramienta mencionada anteriormente, permitiendo un manejo más detallado y controlado en la presentación de un flujo. Un ejemplo de esto es que permite redireccionar automáticamente a otra plantilla en un tiempo determinado por el usuario.

Las características de organización y vinculación son bastante beneficiosas para proyectos que poseen muchas plantillas y que requieren de varias interacciones.

Esta es una herramienta de pago. Sin embargo, ofrece una cuenta gratuita que permite tener solo un proyecto activo.

Si te interesa conocer más sobre esta herramienta, visita InVision App.

UXPin

UXPin permite diseñar prototipos directamente en la aplicación, ofreciendo una variedad de formatos, elementos y acciones. A diferencia de Marvel App, esta herramienta presenta todas estas opciones de manera avanzada, donde el nivel de detalle y precisión en cada una es mayor, siendo la curva de aprendizaje un poco más alta que las dos aplicaciones mencionadas anteriormente.

Por otro lado, permite importar archivos directamente del computador (.jpg, .png, .doc, .ppt y .pdf) o a través de un plugin que la misma plataforma dispone (.psd y .sketch), lo que es beneficioso si se trata de “animar” un prototipo ya hecho.

El modo de visualizar las plantillas dentro de un proyecto es un poco más tosco que en Marvel App o en InVision, pero de cierta forma, más ordenado. En un menú lateral permite crear un mapa de sitio, dando pertenencia y jerarquía en caso que corresponda, lo que también sirve para organizar y ordenar proyectos complejos.

UXPin es de pago y solo ofrece un trial de 6 días. Más información en UXPin.

Proto.io

Está enfocado en prototipar directamente en la app y solo permite importar archivos .sketch y .psd con los plugins correspondientes. Se pueden importar otros archivos pero quedan como elementos a usar en el diseño los prototipos, no como plantillas.

A diferencia de las otras aplicaciones mencionadas, Proto.io mantiene las capas originales de los archivos de Sketch y Photoshop, entregando mayor control en la edición de cada plantilla, a pesar de que quedan como imágenes (ej: el texto no puede editarse).

Las opciones que ofrece (animaciones e interacciones) son variadas y con un alto grado de detalle, siendo una herramienta potente para mostrar acciones avanzadas y realistas que realizan los usuarios en una plataforma.

Más información en Proto.io.

Justinmind

A diferencia de todas las otras opciones, Justinmind es una aplicación para computador (Windows o Mac).

Esta herramienta no permite importar archivos de otras aplicaciones, pero sí imágenes de algún prototipo ya diseñado, a las cuales se les pueden agregar hotspots para generar interacciones y definir animaciones.

Este software está orientado, como otras de las aplicaciones mencionadas, al prototipado desde el mismo, por lo que animaciones e interacciones también son avanzadas y complejas (no por ser difíciles, sino porque presentan un gran nivel de detalle).

Al no estar desarrollado en un ambiente web, los proyectos quedan almacenados como archivos en el computador.

Es un programa gratuito. Puedes encontrar más información en Justinmind.

En IDA hemos utilizado Marvel App para mostrar flujos a clientes e InVision para la realización de test de usuarios, teniendo excelentes resultados en el uso de estas plataformas.

¿Haz utilizado alguna de las herramientas que presentamos? ¿Conoces otra? Ayúdanos a completar nuestro listado.