La herramienta adecuada para el trabajo: elegir el mejor software de creación de prototipos para su proyecto

Las herramientas de creación de prototipos se han convertido en un recurso importante para nosotros, los diseñadores, ya que nos permiten documentar múltiples estados de una sola pantalla, incluidas animaciones, transiciones y microinteracciones que son difíciles de representar en la documentación estática.

Las empresas que prestan atención a esta tendencia han comenzado a crear herramientas de creación de prototipos para abordar esta necesidad; y hoy estamos viendo surgir una plétora de herramientas de manera regular. Pero , ¿cuál debería elegir? Más importante aún, ¿qué preguntas debe hacerse a sí mismo y a su equipo para asegurarse de elegir la correcta?

Lectura adicional en SmashingMag:

• 12 factores para seleccionar una herramienta de creación de prototipos móviles
• La guía del escéptico para la creación de prototipos de baja fidelidad
• Uso de Sketch para un diseño web receptivo
• Obtener el flujo de trabajo de Sketch correcto: el manual de Sketch

“¿Qué herramienta debo usar?” se ha convertido en una de las preguntas más frecuentes en foros online, encuentros de diseño y blogs. Se ha convertido en un debate bastante apasionado, y los diseñadores tienden a argumentar rápidamente a favor de una determinada herramienta o aplicación.

La verdad es que ninguna solución es única para todos . Cada vez más, los diseñadores necesitan tener una variedad de herramientas a su disposición para comprender los pros y los contras de cada una y poder decidir rápidamente sobre el flujo de trabajo más apropiado para el contexto dado.

Varios pasos entran en el proceso de evaluación. Los profesionales experimentados y los jefes de equipo pueden elegir la herramienta adecuada para el trabajo con bastante rapidez, tan pronto como se les informe sobre un nuevo proyecto y entiendan dónde se utilizará el prototipo.

A continuación, exploraremos cinco pasos para decidir cuál es la herramienta de creación de prototipos adecuada para su proyecto: desde la definición de los objetivos hasta la comprensión de los requisitos y el contexto, y la evaluación de las opciones disponibles. El objetivo es guiar a los diseñadores que toman esa decisión por primera vez o que se enfrentan a un proyecto con requisitos y limitaciones únicos.

Antes de ensuciarnos las manos con la construcción del prototipo, debemos pensar por qué lo estamos haciendo. ¿Qué problema está tratando de resolver el prototipo? ¿Por qué creemos que ayudará al proyecto en ese momento en particular?

1. ¿Realmente necesita una herramienta de creación de prototipos?

Ser capaz de mostrar tangiblemente cómo se supone que funciona un producto mientras aún se está diseñando tiene beneficios incuestionables para el proyecto y permite a los diseñadores pensar en las interacciones de la manera más dinámica y real posible. Vivimos en un mundo de interfaces vívidas e interactivas que son difíciles de replicar fuera de su entorno en vivo, y los prototipos interactivos hacen un gran trabajo al emular esa experiencia.

Pero en algunos casos, una herramienta de creación de prototipos no es realmente necesaria. Cuando el proyecto está en sus primeras etapas y todo lo que desea hacer es validar un concepto, un prototipo en papel suele ser más efectivo para representar cómo se supone que funciona el producto. Los prototipos en papel eliminan la necesidad de pasar tiempo con el software (y, en algunos casos, aprender a usarlo), al tiempo que permiten iteraciones rápidas y de baja fidelidad del diseño que se centran más en probar un concepto que en validar problemas de usabilidad específicos. .

En otros casos, en lugar de crear un prototipo independiente con software dedicado, lo mejor que puede hacer es comenzar a construir el producto en el lenguaje de programación final. Al crear un sitio web, algunas personas comienzan con un prototipo HTML de inmediato. Los marcos como Bootstrap pueden ayudarlo a crear un sitio web receptivo con bastante rapidez y, en algunos casos, no requiere conocimientos técnicos avanzados. Tenga en cuenta que el tipo de código que se escribe para un prototipo HTML casi siempre se descarta, porque se escribe rápidamente y posiblemente por personas no expertas.

Antes de gastar energía tratando de seleccionar el software adecuado para el trabajo, discuta con el equipo si un prototipo interactivo es realmente la mejor solución y qué tipo de prototipo cumplirá mejor con las necesidades particulares de ese proyecto.

2. Definir los objetivos

Definir el objetivo del prototipo puede ayudarlo a pensar en el nivel de fidelidad y funcionalidad necesarios, lo que informa directamente la elección de la herramienta de creación de prototipos.

El siguiente cuadro ofrece una descripción general de algunas razones comunes para crear un prototipo en la fase de diseño. Estas categorías no son exhaustivas y, en algunos casos, el mismo prototipo puede servir para diferentes áreas, pero el marco puede usarse como punto de partida para priorizar los objetivos del prototipo.

¿Cuál de los siguientes es su objetivo clave?

• Para vender una idea en una presentación al cliente . Los prototipos son increíblemente útiles para dar vida a los conceptos. También son una excelente herramienta de ventas para presentar ideas a clientes y partes interesadas importantes; visualizar una idea en forma interactiva puede ayudarlos a “soñar en grande”. En tales casos, la funcionalidad del prototipo tiende a ser menos profunda, representando solo las funciones principales y los flujos de usuarios que ayudan a vender la idea. El alcance del producto no necesita estar completamente representado en el prototipo, pero un poco de pulido visual tendrá un gran impacto. Tenga en cuenta que un prototipo orientado a las ventas a menudo debe desecharse cuando comienza la fase real de diseño centrado en el usuario.
• Para testear la experiencia con los usuarios . Poner prototipos frente a los usuarios es una parte importante de lo que hacemos como diseñadores cuando abogamos por la mejor experiencia de usuario posible. Cuanto antes pueda recopilar comentarios para corregir el rumbo, mejor. Los prototipos para pruebas de usuarios tienden a ser un poco más refinados, aunque los prototipos en papel también funcionan bien cuando el producto está en sus primeras etapas. El prototipo debe ser tan sólido como la complejidad de las tareas que asigna a los usuarios durante la sesión de prueba.
• Probar un concepto internamente . A veces, un prototipo se usa solo como una prueba de concepto interna: tiene una idea y quiere asegurarse de que realmente funcione o se sienta bien. Un prototipo rápido lo ayudará a comparar la idea con múltiples partes interesadas antes de invertir tiempo y esfuerzo en diseñar todo el producto o la función.
• Para probar la lógica y la viabilidad . En algunos casos, el equipo realmente necesita probar si una función es factible antes de pasar al desarrollo. El prototipo puede funcionar como un documento vivo, para ser utilizado en debates entre diseñadores y desarrolladores, así como un entorno de prueba para probar ideas e integrar la funcionalidad.

El diagrama de arriba puede darle una ventaja para definir los objetivos de su prototipo. Pero tenga en cuenta que el nivel de fidelidad variará según el contexto. Poner un prototipo de baja fidelidad frente a usuarios y clientes es perfectamente normal, especialmente si está buscando comentarios tempranos sobre un concepto.

3. Comprender los requisitos

Una vez que se define el objetivo de alto nivel del prototipo, es hora de analizar problemas más específicos que informarán su decisión, como los relacionados con el software, el hardware, el tiempo y los recursos.

Un error común que cometen los diseñadores al comienzo de un proyecto es saltar directamente a su herramienta de creación de prototipos favorita, sin tomarse el tiempo para reunirse con el equipo y discutir el contexto en el que se construirá, compartirá y visualizará ese prototipo. Cambiar de opinión será difícil si ha invertido muchas horas en construir una primera versión del prototipo.

Reúnase con su equipo y responda algunas de las preguntas a continuación. Involucre a los gerentes de proyecto, diseñadores y desarrolladores en la discusión: el grupo en su conjunto deberá responder la mayoría de las preguntas de la lista, teniendo en cuenta requisitos como el cronograma, el presupuesto, el conjunto de habilidades y la compatibilidad técnica.

Dependiendo de cómo se configuren los diferentes factores, un prototipo puede tomar diferentes formas. Es posible que pueda salirse con la suya con bocetos a mano y estructuras alámbricas, por ejemplo. En algunos casos, una combinación de HTML y CSS pirateada y sin pulir servirá. En otros casos, deberá crear un prototipo más rico y pulido para comprender realmente si funcionará una interacción determinada y cómo lo hará.

Alcance: Creación de prototipos de flujos frente a interacciones

Preguntas comunes:

• ¿Está tratando de demostrar un flujo con una serie de pasos o está representando una interacción más contenida?
• ¿Cuál es la parte más importante del flujo o la interacción que necesita crear un prototipo para transmitir la idea? ¿Cuál es el tamaño de la pantalla donde ocurrirá esa experiencia?

El mundo de las herramientas de creación de prototipos se puede dividir con bastante facilidad en dos grupos: herramientas que le permiten emular flujos de usuarios y herramientas que se centran más en representar interacciones específicas.

Si está tratando de contar una historia sobre su producto o sobre cómo los usuarios lo experimentarán, entonces crear un prototipo de flujo podría ser un mejor enfoque. En ese caso, herramientas como InVision, Axure y Keynote son extremadamente poderosas para aumentar la eficiencia y hacer que el prototipo se sienta conectado con la historia que intenta contar.

Si está tratando de representar una interacción única y profunda y desea utilizar el prototipo como una forma tangible de explicar su comportamiento a las partes interesadas y a los miembros del equipo, es posible que desee centrarse en un grupo diferente de herramientas. Framer, Principle, Pixate y Origami encabezan esa lista.

Consideraciones:

• capacidad de emular un flujo
• nivel de fidelidad e interactividad permitido por la herramienta
• dispositivos compatibles

Fidelidad: definición del flujo de trabajo y pulido visual

Preguntas comunes:

• ¿Está planeando usar estructuras alámbricas o maquetas visuales como punto de partida?
• ¿Aún hay que diseñar las pantallas?
• ¿Es la misma persona responsable del diseño y la creación de prototipos?
• ¿Tu equipo necesitará entregar el prototipo a otro equipo en algún momento?
• ¿Cuál es el aspecto y la sensación esperados del prototipo final?

Algunas herramientas de creación de prototipos le permiten diseñar y construir al mismo tiempo, mientras que otras se enfocan más en importar activos existentes, como estructuras alámbricas o tableros visuales, al lienzo.

Tómese un tiempo para hablar sobre el proceso de diseño esperado con su equipo. En algunos casos, el prototipo deberá construirse en función de los activos existentes (por ejemplo, es posible que el equipo ya haya realizado una simulación de composiciones visuales para la interfaz de usuario), y todo lo que el diseñador deberá hacer es vincular las maquetas en un flujo coherente. o narrativa. Hay varias herramientas que se centran más en vincular pantallas y emular interacciones a medida que el usuario avanza por el flujo. InVision y Keynote son buenos ejemplos de eso.

En otros casos, el mismo miembro del equipo deberá diseñar la interfaz de usuario y construir el prototipo al mismo tiempo . Ser capaz de iterar simultáneamente en estos dos aspectos del diseño permitirá una entrega más refinada e interactiva al final de la fase de creación de prototipos. Si este es el caso, busque una herramienta que vaya más allá de solo vincular y que también le permita diseñar la interfaz de usuario.

Además, considere el nivel de refinamiento visual necesario. Una herramienta como Axure o UXPin puede hacer que el entregable se vea y se sienta como una estructura alámbrica, mientras que otras permiten un producto final visualmente pulido y más perfecto en píxeles. Algunos equipos de diseño optan por emparejar herramientas que funcionan juntas a la perfección para lograr el mismo resultado (por ejemplo, Sketch para el diseño e InVision para la creación de prototipos). Asegúrese de que las herramientas que elija brinden integración automatizada, para ahorrarle tiempo y trabajo preliminar cada vez que necesite actualizar el prototipo.

Consideraciones:

• características de colaboración (compartir, compartir en vivo, comentar y retroalimentación)
• integración con otro software en su flujo de trabajo (como Photoshop, Sketch)
• nivel de fidelidad requerido (estructura alámbrica versus diseño de píxeles perfectos)

Recursos: Mapeo del conjunto de habilidades requeridas

Preguntas comunes:

• ¿Quién creará el prototipo?
• ¿Cuáles son las habilidades de software de la persona y qué tan rápido pueden trabajar?
• Si no saben cómo usar una herramienta en particular, ¿qué tan rápido pueden aprender? ¿Están dispuestos a hacerlo?
• ¿Cuántos diseñadores colaborarán en el prototipo?

Aprovechar las habilidades de software de su equipo ahorrará mucho tiempo, pero asegúrese de que esto no impida que su organización pruebe nuevas herramientas e incorpórelas en el proceso de diseño. Las herramientas de creación de prototipos son cada vez más fáciles de aprender y operar; los diseñadores pueden preocuparse menos por la curva de aprendizaje y más por si la herramienta es adecuada para el trabajo.

Mapee con su equipo qué herramientas ya saben cómo usar, e investigue un poco en línea para ver qué herramientas son más fáciles de aprender. Anime a su equipo a aprender y jugar con tantas herramientas de creación de prototipos como sea posible: la variedad de opciones y la flexibilidad en el conjunto de habilidades de su equipo serán útiles cuando tenga que elegir la mejor herramienta para su próximo proyecto.

Consideraciones:

• curva de aprendizaje
• facilidad de uso
• velocidad

Contexto: definición de audiencia y uso

Preguntas comunes:

• ¿Quién es la audiencia de tu prototipo? ¿Quién necesita poder interactuar con él y dar su opinión?
• ¿En qué medio se necesita visualizar el prototipo? ¿En qué dispositivo? ¿En que contexto?
• ¿Va a guiar a la audiencia a través del prototipo o simplemente enviar un enlace por correo electrónico? Si es lo primero, ¿el recorrido se llevará a cabo en persona, se realizará en línea mediante el uso compartido de pantalla o será autodirigido?

Si está armando un prototipo móvil y tiene la intención de sentarse junto a una parte interesada en una reunión para explicar la idea, necesitará tener la combinación correcta de software (una herramienta que permite prototipos móviles) y hardware (un teléfono que cumple con sus especificaciones). Un entorno más controlado como este no requiere que se desarrolle todo el flujo, lo que le ahorra tiempo y esfuerzo.

Pero la combinación puede ser completamente diferente si planea usar el mismo prototipo para ejecutar pruebas de usabilidad asincrónicas remotas con usuarios de todo el país que no tienen idea de cómo se ve o hace el producto. En este caso, es posible que necesite un prototipo a prueba de balas más funcional que permita una experiencia autoguiada.

Consideraciones:

• dispositivos compatibles
• experiencia de clics autoguiados
• facilidad para compartir y capturar comentarios

Responder a las preguntas anteriores lo ayudará a comprender el contexto de uso y definir algunos requisitos básicos para el prototipo. Dibuje una lista, asegurándose de incluir los requisitos para los cuatro grupos identificados anteriormente: alcance, fidelidad, recursos y contexto . Lo siguiente que querrá hacer es verificar si las herramientas que está considerando ofrecen la funcionalidad que necesita.

4. Evaluar las herramientas

Cada mes salen nuevas aplicaciones, cada una de las cuales promete resolver todos los problemas que las anteriores no pudieron. La realidad es que cuando llevas más de 10 años trabajando en esta industria, esa historia se vuelve repetitiva y empiezas a ver el patrón en estos anuncios.

Una vez que haya revisado la lista inicial de preguntas con su equipo, es hora de buscar herramientas potenciales. Con solo responder las preguntas del paso 3, podrá eliminar rápidamente algunas opciones y crear una lista restringida para un análisis más detallado.

Para cada herramienta en su lista corta, evalúe lo siguiente:

• Plataforma y canales . ¿Está creando un prototipo de un sitio web o una aplicación? ¿Es una experiencia de escritorio o móvil? ¿Necesita una interfaz receptiva y cómo se comportará en todos los tamaños de pantalla? Algunas herramientas le brindarán más flexibilidad para brindar una experiencia a través de los canales, mientras que otras están más enfocadas.
• fidelidad ¿Qué nivel de pulido permite la herramienta? ¿La herramienta le permite crear prototipos basados ​​en estructura alámbrica rápidos y sin pulir? ¿Puedes importar maquetas visuales y animarlas?
• Compartir y colaborar . ¿La herramienta proporciona el nivel de colaboración que necesita? ¿Se integra a la perfección con las demás herramientas de diseño y comunicación que utiliza su equipo? ¿Eres capaz de compartir el trabajo en curso en línea fácilmente?
• Curva de aprendizaje . ¿Alguien en su equipo sabe cómo operar la herramienta? ¿Qué tan competentes deben ser para crear el prototipo que necesita? ¿Qué tan intuitiva es la herramienta? ¿Se requieren conocimientos de programación o codificación?
• precio ¿Tiene una licencia para el software? ¿Cuánto estás dispuesto a pagar? Si la herramienta se vende en planes escalonados, ¿cuál es el adecuado para su proyecto?

5. ¡Hagámoslo!

En este punto, probablemente haya reducido las opciones a una o dos. El siguiente paso es reagruparse con su equipo, tomar una decisión final y comenzar el trabajo. Por lo general, la llamada final se basará en el cronograma y los costos, pero seguir el proceso que se detalla aquí garantizará que se consideren todos los criterios.

La discusión que tenga su equipo sobre la mejor herramienta de creación de prototipos lo alineará en temas que van mucho más allá del entregable en sí, como el flujo de trabajo, el proceso, los roles y las responsabilidades.

Además, realice un ejercicio rápido de autopsia después del proyecto. Discuta con su equipo qué funcionó y qué no con la herramienta que eligió. En su próximo proyecto, seguramente podrá omitir un par de pasos en el proceso de elegir la herramienta adecuada.

Volvamos a poner la “U” en UX

Un último consejo: no caiga en la trampa de aprender todas las últimas y mejores herramientas de creación de prototipos que existen. Simplemente hay demasiadas opciones. Sea cuidadoso con los que elija y sea inteligente acerca de cómo invierte su tiempo en aprender a usarlos.

En una era en la que los productos se evalúan de acuerdo con la medida en que satisfacen las necesidades del usuario, dedicar demasiado tiempo y energía a la herramienta de creación de prototipos en sí puede distraerlo de lo que es realmente importante en su trabajo. Después de todo, pasar horas elaborando y puliendo una determinada interacción será inútil si la función que está tratando de crear no resuelve una necesidad del usuario legítima y comprobada por investigaciones.

Para obtener una lista completa de herramientas de creación de prototipos, consulte la sección Herramientas UX de Diseño UX.

Gracias a Greg Siegal, Eugene Ahn y Caio Braga por sus aportes a este artículo.