Claves para elegir tu herramienta de diseño de prototipos
Cuando se trata de diseñar prototipos, hay tantas herramientas que elegir la adecuada no resulta nada fácil. ¿Cuál es la mejor? Aunque haga un poco de ‘spoiler’, la verdad es que no existe “la mejor”, porque todo depende de qué necesitas en cada momento. Algunas recomendaciones para saber qué tienes que tener en cuenta.
Siempre he querido estar actualizado y saber cuáles son las últimas herramientas de diseño de prototipos, probándolas poco después de su lanzamiento, para ver si alguna de ellas podría mejorar mi proceso de trabajo y permitirme conseguir mejores resultados. Al principio, unos pocos años atrás, creo que era más fácil que ahora decidir si alguna era útil o no. Pero hoy en día, nuevas herramientas son anunciadas casi a diario, y es un poco difícil probar en profundidad una por una.
En un intento casi desesperado por seguir el rastro a cada nuevo programa y sus características, y decidir cuál probar a continuación, empecé a compilar una pequeña lista de herramientas de diseño de prototipos. Gradualmente, mientras iba añadiendo más y más ítems a la lista, se fue de control —un signo evidente de que existen demasiadas opciones.
Quizás es por esto mismo que, después de haber terminado de dar una clase o una conferencia, algunos de los asistentes se me acerca para pedir que les recomiende la mejor herramienta que existe. Sinceramente, no me siento capaz de dar una respuesta directa: en mi opinión, tal como pasa cuando vas a comprar un par de zapatillas de correr, lo “mejor” habitualmente depende de tus necesidades específicas en un momento particular, y de qué resultado esperas obtener.
Supongo que después de un tiempo he desarrollado una especie de “sexto sentido” de diseñador; es decir, una habilidad para decidir (o al menos eso creo, no soy Superman después de todo) si vale la pena probar una herramienta con sólo darle un vistazo rápido.
Por suerte para ti, no necesitas un sentido extra ni ningún súper poder para elegir una herramienta. Hay otras formas, más objetivas, de decidirte por una u otra. Todo depende de cuáles sean tus prioridades, así que empecemos por ahí.
1. Curva de aprendizaje
Los métodos de aprendizaje más efectivos aprovechan el conocimiento que ya tienes, así no tienes que empezar desde cero. Es lo que se llama “transferencia”: aplicar algo que ya has aprendido anteriormente a una nueva situación. También es útil cuando estás aprendiendo a usar un nuevo programa de diseño: aquellos con una interfaz familiar y funciones que ya conoces serán probablemente más fáciles de entender que aquellos que son completamente diferentes.
Esto es especialmente así en el caso de los programas de la suite de Adobe, en donde cada software está diseñado para parecerse a otros de la misma empresa. Ya sabes dónde estarán los paneles y diálogos, y las similitudes hacen que sean fáciles de aprender o cambiar de una herramienta a otra, por ejemplo de Illustrator a Photoshop.
Pero también tienes que comparar cuánto tiempo esperas invertir en aprender una nueva herramienta con el tiempo que esperas efectivamente usar ese programa en tu proceso de diseño. La situación ideal sería cuando pasas poco tiempo aprendiendo un software que usarás frecuentemente o incluso cada día.
2. Soporte para trabajo en equipo
Necesito que mi herramienta de diseño le permita a mis clientes darme feedback sobre mis diseños, así puedo usar esa información para actualizarlos y compartir con ellos una nueva versión mejorada.
Para conseguir esto, generalmente subo los diseños de mis pantallas a InVision, donde el cliente puede dejar comentarios sobre una parte específica de la interfaz, justo en el punto al que hace referencia. Entonces, tendré la posibilidad de responder a la observación, o cerrarla si el problema ya ha sido solucionado.
Pero si trabajas dentro de una empresa, no sólo el cliente se tiene que sentir parte del equipo, si no también tus colegas diseñadores. Es importante tener una herramienta que le permita a tus compañeros de trabajo compartir y subir sus propias versiones de los diseños, de forma que todo el mundo esté alineado, al mismo tiempo que contribuyen al proyecto. Herramientas como la ya mencionada InVision muestran una visión general de la actividad en el proyecto en una especie de línea de tiempo, de manera que puedes estar siempre al día y mantener registro de los cambios que se van haciendo.
3. Nivel de fidelidad
Desde el primer momento, cuando sólo tienes una idea un poco vaga de cómo será el producto que diseñas, el prototipo empieza a evolucionar, alimentado por lo que se va aprendiendo en el camino. Es por eso que diseñamos con iteraciones, decidiendo qué es prioritario probar en cada etapa.
Por ejemplo, al principio de todo, cuando aún no sabemos si una idea es acertada o no, no es recomendable enfocarse en los detalles de diseño, tales como la paleta de colores o el sistema de retícula. En su lugar, deberíamos hacer —y eventualmente descartar— prototipos rápidos. Y la herramienta que elijamos para hacer esto dependerá del nivel de fidelidad que estamos esperando (es decir, que tan parecido será el prototipo al producto final).
La fidelidad puede irse incrementado de forma gradual: baja cuando simplemente queremos probar la idea (la herramienta debería permitir navegar de una pantalla a otra), media cuando nos estamos centrando en la diagramación y el diseño de información e interacción (la herramienta debería permitir un diseño más preciso), y alta cuando lo más importante es el diseño visual, las animaciones y micro-interacciones (la herramienta debería ser capaz de añadir movimiento y transiciones).
Cada herramienta debería ayudarnos a conseguir sólo el prototipo que necesitamos —y no mucho más que eso— y permitirnos mover rápidamente a la próxima etapa, donde puede que ya no la necesitemos más.
BAJA FIDELIDAD
Cuando tan solo quiero probar la idea de un producto digital, aquel software que me dé demasiado control sobre el diseño no resulta conveniente, porque me voy a distraer fácilmente con detalles que no son relevantes en ese momento. Es más importante poder navegar de una pantalla a otra sin preocuparse si los elementos en la interfaz tienen el tamaño correcto (sí, sé que es complicado resistirse a la tentación de alinear los elementos, pero créeme, no es fundamental ahora mismo).
Cuando se me acaba de ocurrir una idea y voy directamente al ordenador, generalmente termino preguntándome cuál será el mejor tamaño del documento o qué fuente usar, cuando ni siquiera estoy seguro que el concepto va por el buen camino. Es por eso que, en momentos así, prefiero usar la opción más básica y antigua: papel y lápiz.
Por supuesto que esto no es ninguna novedad:
“¿Pero por qué deberíamos comenzar bosquejando?” puede ser que te preguntes. Es porque es muy fácil quedar atrapado en un diseño pixel-perfect si pasas directamente al diseño digital, y te costará algo de tiempo a la larga (…). Volver al papel y lápiz es una forma fácil y rápida de plasmar tus ideas y comenzar a iterar.”
Usando papel y lápiz, no me preocupo por los detalles específicos de diseño que comenté antes. En su lugar, puedo centrarme en la idea.
Puedo rápidamente dibujar algo para visualizar lo que tengo en mente, y entonces, usando herramientas como Marvel o POP, sacarle fotos y construir un prototipo interactivo que incluya gestos y transiciones, al menos para poder probar los flujos básicos. Lo bueno de diseñar de esta manera es que si el concepto no funciona (y tienes que seguir trabajando en esa idea del “millón de dólares”) no te sentirás “casado” con tu trabajo, y volver a comenzar con un enfoque diferente será bastante sencillo.
Consejo: Si estás diseñando elementos temporales, como alertas, tooltips, diálogos o mensajes de feedback, puedes dibujarlos separadamente de la interfaz principal en otra pieza de papel aparte. Entonces, puedes cortarlos con tijeras y poner el papelito sobre la pantalla de base. De esta forma, puedes sacar una foto con el elemento, y otra sin él. ¡Tendrás dos versiones por el precio de una, sin tener que dibujar ambas pantallas a mano!
MEDIA FIDELIDAD
Lápiz y papel están bien, pero seamos honestos: vas a llegar a un punto en el proceso de diseño en el que no serán suficiente. En mi caso, cuando estoy seguro del concepto base y ya he hecho unos cuantos prototipos en papel, necesito una herramienta diferente para poder avanzar. Generalmente, cuando hablamos de prototipos de fidelidad media queremos decir wireframes cuyo propósito principal es reflejar interacciones y la información que tendrá cada pantalla.
Por eso mismo, cuando diseño wireframes, intento usar la información más real posible… aunque es cierto que muchas veces no la tengo a mi disposición en esta etapa. Entonces, muchas veces los textos, gráficos y colores se basan en aproximaciones, porque puede que esté a la espera de que los tíos de branding terminen su trabajo (no me culpes, ¡siempre se demoran!). Por lo menos me puedo enfocar en conseguir una diagramación e interacción convincentes.
Durante esta etapa, suelo usar Sketch. Este software es relativamente fácil de usar y me permite llevar mis conceptos en papel al próximo nivel. Usando Sketch, puedo reutilizar elementos prediseñados de interfaz que ya vienen con el programa, así no tengo que empezar desde cero. Hay también un montón de otros componentes de interfaz adicionales que puedes usar para componer tus pantallas, como los de Sketch App Sources. A medida que mi proceso avanza, también puedo controlar el grado de personalización de esos elementos y decidir dónde parar para hacer test de usabilidad.
Usar estos componentes es también buena idea si quieres hacer un diseño realista y no sobrediseñar. Habitualmente, diseñar todo completamente desde cero llevará mucho más tiempo (no sólo para ti, sino también para los desarrolladores que estén a cargo de implementar tu trabajo). Es por eso que es mejor reutilizar elementos nativos de la interfaz, como listas, diálogos y pestañas.
Pero… (siempre hay un “pero”, ¿no?) Sketch sólo funciona en Mac; así que si eres usuario de Windows, tendrás que buscar algo más. Balsamiq y Omnigraffle son ambas buenas opciones, y conocidas, que están en el mercado desde hace un buen tiempo. También hay alternativas que puedes usar directamente desde el navegador (por lo que no necesitas instalar nada): Gravit y Figma.
ALTA FIDELIDAD
Cuando tu prototipo va madurando y se acerca a lo que podría ser un producto viable, necesitarás diseñar componentes que antes no eran tan trascendentales, como diálogos que sólo aparecen en determinadas ocasiones, algunos mensajes de feedback (por ejemplo los que indican un error o aquellos para mostrar el fin de un proceso), estados vacíos, botones deshabilitados, entre otras cosas.
Básicamente, durante las primeras etapas de baja y media fidelidad, estábamos enfocados en la estructura, información y flujos y en un conjunto de casos de uso fundamentales. Cuando el diseño madura, tenemos más cosas que tener en cuenta:
- Casos de uso adicionales (los menos frecuentes);
- Casos extremos y contingencias (por ejemplo, ¿qué pasa en un flujo de compra si la tarjeta de crédito es rechazada?);
- Prevención y gestión de errores.
Todos estos casos son importantes de considerar en el diseño de UX, pero no deberían ser los primeros en diseñar. Más o menos la cosa iría así: empezamos con los flujos y casos que forman el corazón del producto, y nos enfocamos en los aspectos de diseño más relevantes. Después, diseñamos también los casos extremos para completar y validar nuestra interfaz.
En esta etapa, entonces, se vuelve más importante elegir una herramienta que ofrezca un control granular sobre los componentes del diseño, de manera que puedas determinar el aspecto y comportamiento de cada uno de ellos.
Hace un tiempo atrás, usaba Axure para este tipo de cosas. De hecho, en una de mis primeras entrevistas de trabajo en Barcelona me preguntaron si lo dominaba, porque todo el mundo lo usaba en esa empresa. Por supuesto que dije que sí para conseguir el trabajo, y en los días antes de empezar lo aprendí de arriba a abajo. Fue entonces cuando descubrí todo el potencial que tenía, usando funciones como los condicionales, que permiten mostrar y ocultar diálogos, banners y otros bloques temporales de información, dependiendo de las interacciones del usuario. Esto podría ser útil porque minimiza el número de pantallas a diseñar completamente desde cero.
Si has estado leyendo con atención, posiblemente te habrás dado cuenta que hasta ahora me he enfocado sobre todo en diseños estáticos. ¿Pero que hay acerca de las animaciones? Esto se está volviendo más y más importante, no sólo porque pueden encontrarse en todas partes en las interfaces de hoy en día, si no también porque es muy complicado comunicarle al resto del equipo como quieres que algo se mueva sin tener un ejemplo para mostrar.
Cuando se trata de diseñar prototipos de animaciones, micro-interacciones y transiciones, considero que las herramientas se dividen en dos grandes grupos:
- Las que tienen una interfaz familiar para los diseñadores y que no necesitan que aprendas nada de código;
- Y aquellas en las que tendrás que “ensuciarte” un poco las manos, al menos con algunas líneas de código.
En el primer grupo, recientemente han aparecido algunas como Principle y Flinto. La mayoría de las veces usarás estas herramientas no para diseñar la app entera, si no sólo algunas pantallas específicas, para ver cómo se mostrarán determinados elementos o cómo será la transición de un estado (o pantalla) a otra.
Si quieres ir un paso más allá, puede ser que optes por el segundo grupo. Este conjunto de opciones se ven menos familiares para los diseñadores, pero tendrás un control más preciso sobre las animaciones. También, en muchos casos, podrás usar componentes nativos para simular un resultado más real, y por lo tanto, haciendo el prototipo más fácil de implementar. Si quieres ir aún más lejos, te sugiero que intentes con Framer (que está basado en JavaScript) o Facebook Origami (que tendrá Origami Studio próximamente).
Para iOS, también puedes usar Interface Builder, que te permitirá diseñar interfaces usando componentes nativos en un entorno visual (con esta opción no necesitas programar nada, ¡yupi!). Para Android, existe Android Studio.
4. Integración con tu flujo de trabajo
Otro aspecto a tener en cuenta es qué tan bien se ajusta la herramienta a tu proceso de diseño y a los otros programas que usas habitualmente. Diseñar prototipos es parte de un proceso más grande que incluye investigar con usuarios, hacer test de usabilidad, recopilar métricas, comunicar la idea a los integrantes del proyecto y compartir los diseños con los programadores para su posterior implementación.
Probablemente no encuentres una sola herramienta que se ocupe de todo (más sobre esto más adelante), pero el software de diseño de prototipos debería al menos ayudarte a moverte fluidamente a través de este proceso, especialmente cuando tienes que iterar con fechas de entrega ajustadas.
Por ejemplo, si estás diseñando en Photoshop, Illustrator o Sketch, sería genial si el software que usas para diseñar las interacciones puede reaprovechar estos diseños sin que tengas que volver a crear todo.
Personalmente, y de nuevo, me siento satisfecho con Sketch. Puedo exportar imágenes desde el mismo programa, e incluso usar el mismo archivo editable para completar mi prototipo en otra herramienta diferente. Cuando quiero añadir interacciones, subo los archivos a Marvel, y cuando necesito animar, a Framer o Flinto.
Uno de los pasos más importantes cuando se construye un prototipo es probarlo y recopilar información (gestos, toques y otros inputs) de usuarios reales para poder mejorar el producto. Herramientas como InVision y Marvel, conectadas con Lookback, permiten probar la app y grabar video al mismo tiempo, de forma que puedas analizar la información junto con el resto del equipo.
5. Facilidad de uso y comodidad
Finalmente, ¡cómo te sientes con la herramienta es importante! Si la vas a usar cada día —y a veces también sábados y domingos, si eres freelancer como yo— se debería sentir bien, ¿no?
Esto es algo personal, así que no tengo mucho que aconsejar aquí. Busca esa herramienta que te convence, no aquellas que te hacen trabajar más, ponen obstáculos en tu camino, te hacen ir más lento, o te hacen dar muchas vueltas para poder conseguir algo.
Conclusión
Siendo que hay montón de herramientas de diseño de prototipos por ahí (y eso que sólo mencioné algunas) es posible que te sientas algo intimidado. Quizás por eso es un deseo común el tener “una que las gobierne a todas” —una que nos permita crear todo tipo de diseños, incluso con interacción y animaciones.
De alguna forma, ya lo hemos comenzado a ver con Adobe Experience Design CC (la apuesta de Adobe que permite diseñar y añadir links entre pantallas) y Sketch (usado en combinación con plugins como Craft Prototype para interacciones y AnimateMate para animaciones).
Entonces… ¿qué depara el futuro de las herramientas de diseño? No estoy del todo seguro, pero creo que si vamos en esta dirección que comentaba recién, puede que terminemos con un software súper complejo, como si fuera una navaja del ejército suizo que tiene un montón de pequeñas utilidades, pero ninguna de ella es realmente útil. Por otro lado, otros profesionales como mecánicos y cirujanos usan diferentes herramientas dependiendo de lo que necesitan en el momento. ¿Por qué los diseñadores deberíamos ser diferentes? Una de las cosas más importantes en este sentido es saber cuál herramienta es la que mejor se ajusta para realizar una tarea específica.
En cualquier caso, no te obsesiones mucho con la herramienta. Se supone que deben ayudar a dar forma a nuestras ideas, pero no deberían determinar o limitar cómo nuestros productos se ven o comportan.
También entiendo que todos estos puntos puede que sean poco útiles si la empresa donde trabajas ya tiene sus herramientas “corporativas” (como en el caso que mencioné antes). Si es así, podrías intentar convencer a tu equipo a al menos intentar algo diferente, si tienes argumentos claros y lógicos. Quizás algo de lo que comenté en este artículo podría ayudarte a sonar más convincente.
Por último, desconfía un poco cuando alguien te dice que tal herramienta es “la mejor” o “la más fácil de usar”. Esto es algo completamente subjetivo, y tu deberías descubrirlo y decidirlo por tu cuenta. Al final, tú, como yo y todos los demás, somos diferentes.
¡Gracias por leer! Si crees que ha sido útil o interesante, por favor dale al ❤ debajo.
También estoy publicando cosas en Twitter.
Este artículo se publicó originalmente (en inglés) en Smashing Magazine.
