Advertisement
  1. Web Design
  2. Prototyping

Storyboarding vs. Protoyping: Cuando usar cada uno

Scroll to top
Read Time: 6 min

Spanish (Español) translation by Marina Cardone (you can also view the original English article)

Prototyping es una actividad multi-disciplinaria, que abarca el diseño digital, el diseño industrial y todo lo intermedio. Mientras que son precursores del producto final, los prototipos pueden variar en fidelidad. Este artículo observará el prototipado digital, proveyendo lineamientos que puedes utilizar para determinar cuando deberías y cuando no deberías construir uno.

Dentro del espacio digital un prototipo se utiliza para testear ideas rápidamente y ver si los usuarios pueden completar tareas fundamentales. Su intensión es ahorrar tiempo de desarrollo ya que no se necesita ninguna línea de código para validar ninguna idea. Además, no siempre se necesita un prototipo. A menudo, una storyboard lo logra! Elegir entre las dos depende de lo que estas tratando de conseguir. Cada uno de estos entregables es una habilidad importante para que desarrollen los diseñadores UX, pero indiscutida es la habilidad de seleccionar la opción apropiada y el nivel de fidelidad requerido.

Prototipos

Prototipos de Baja Fidelidad

Un prototipo de baja fidelidad a menudo se crea utilizando papel y lápiz.

Cuando utilizarlo

En mi experiencia, el prototipo de baja fidelidad está apuntado a capturar el feedback de "la fruta más baja", como confusiones acerca de convenciones de la plataforma (ej: el botón plus de Material design, la barra de encantamiento de Windows 8, etc). También este método se utiliza especialmente cuando se trabaja en un proyecto de diseño colaborativo. Puedes configurar un temporizador de quince minutos, repartir un número de templates y tener a cada persona dibujando sus ideas (una página para dos personas también funciona bien).

Herramientas Recomendadas

Compañías como uistencils.com ofrecen un número de stencils y reglas de elementos comunes de UI para poner juntos conceptos aproximados. También puedes utilizar papel y anotador. Estos prototipos de baja fidelidad se pueden subir a herramientas como invision, donde puedes vincular páginas utilizando "hotspots", y simular, a un nivel bastante ligero, cómo podría lucir el producto final.

Prototipos de Fidelidad Media

Un prototipo de mediana fidelidad normalmente se genera utilizando software. A diferencia del prototipo de papel, que puede ser más apropiado para diseño colaborativo, este método usualmente está a cargo del diseñador de UX del equipo.

Cuando utilizarlo

Utiliza prototipos de mediana fidelidad luego de que hayas pasado por la fase de inspiración, incluyendo investigación cualitativa, mapas de viaje del usuario y flujos iniciales. El objetivo aquí es testear algunos flujos de tareas y ver cómo los usuarios responden generalmente a tus ideas.

Herramientas Recomendadas

Hay un número de herramientas en el mercado como UXpin, que siempre están evolucionando y actualizando sus características. Axure también es una herramienta común y la que yo prefiero por la buena interactividad con los campos de formularios y la habilidad para crear reglas y condiciones complejas. Como sea, en mi experiencia, menos es más -hacer interacciones complejas en este punto anula el propósito. La intensión de este prototipo es crear algo rápido y fácil para testear.

Prototipos de Alta Fidelidad

Los prototipos de alta fidelidad se pueden diferenciar de los de mediana fidelidad en un par de aspectos. El aspecto principal que los separa es que a menudo se crean utilizando código. De todas maneras, este puede ser un código rápido e improvisado, ciertamente no con calidad de producción, y con la necesidad de serio refactoring.

Cuando Utilizarlos

Los prototipos de alta fidelidad son buenos cuando hayas terminado tus sesiones de testeo con usuarios y quieras explorar interacciones más ricas y animaciones. También, puedes querer compartir una visión con stakeholders acerca de cómo se verá el producto final.

Herramientas Recomendadas

En mi experiencia, diseñar en el browser es lo mejor. Bootstrap o Foundation son ejempos perfectos de frameworks para empezar con el pie derecho.

Storyboards

Encuentro que el mejor momento para utilizar una storyboard es cuando tienes una idea para comunicar. Una storyboard (en el contexto de diseño UX) es una secuencia linear, mostrando cómo un usuario puede estar lidiando con un proceso o producto existente. De todas maneras, a menudo refleja un estado imaginado y la interacción con un producto nuevo.

Cuando Utilizarlo

Proyectos de Innovación: Solía trabajar en una consultora. Entre contactos a menudo tenía la tarea de construir un proyecto de innovación en orden de tambalear el mercado y vender nuestra capacidad a compañias que podrían no estar buscando activamente. Por ejemplo, en el reverso de todo lo que lleguemos a mostrar (nuestras habilidades con big data, data visualisation, experiencia de usuario, etc.) el administrador de la cuenta puede solicitarte demostrar nuestras creaciones a cada representante.

Un prototipo a menudo se creaba, simplemente porque teníamos los recursos para construir uno. Sin embargo, en este escenario una storyboard es más efectiva como una herramienta de ventas. El posible cliente puede o no ser aficionado a la tecnología; utilizando una storyboard puedes evitar el vocabulario específico de la industria o el balbuceo técnico y mostrar claramente una historia -incluyendo un problema y una resolución.

Desafíos del Diseño Centrado en Humanos: Contar historias es también poderoso en desafíos de diseño centrado en humanos, donde necesitas obtener información de la investigación, idear y considerar el escenario del problema y formas innovativas de abordar estos problemas. Un prototipo a menudo parece prematuro aquí. La progresión natural de uno de estos desafíos puede ser una campaña de crowdfunding, más que construir el producto verdadero. Por lo tanto, una storyboard puede ser la mejor forma de transmitir de manera sucinta esto a una audiencia y alcanzarlos a un nivel emocional, donde están más abiertos a contribuir (de forma opuesta a ver una interfaz de usuario).

Hackathons: Los hackathons probablemente son el mejor lugar para utilizar una storyboard e irónicamente se ven muy rara vez en ellos. Esto es porque típicamente participan los tipos técnicos y están demasiado enfocados en tecnologías y lenguajes de programación. Esto puede realmente aislar al panel de jueces. Al tener una storyboard completa, mostrando cómo la solución aborda un problema es más probable que sea irresistible para la audiencia y una pieza suplementaria fuerta para cualquier cosa que se haya generado rápidamente en un par de días.

Herramientas Recomendadas

Baja Fidelidad

Todo lo que necesitas para crear una storyboard son algunos sharpies y papel afiche! Ni siquiera necesitas ser bueno dibujando.

Mediana Fidelidad

Si eres un diseñador y tienes Adobe Illustrator, Sketch o Affinity Designer puedes también llevar tus storyboards al siguiente nivel y encontrar un set gratuito de ilustración de arte de storyboards y editarlos para que se ajusten a tu historia. Si echas un vistazo online generalmente hay muchos disponibles.

Conclusión

En mi experiencia personal, storyboards de baja o media fidelidad son suficientes en diseño UX. Quizás si estuvieses trabajando en un espacio industrial puedes necesitar algo de mayor fidelidad. De todas maneras, en el ámbito digital es improbable que el beneficio sobrepase los costos.

La intensión de este artículo es darte mayor conciencia acerca de los entregables para utilizar y cuando. A menudo te pedirán cosas para los managers que realmente no entienden la necesidad de cada uno. Espero que al leer esto puedas pensar críticamente acerca de los entregables necesarios y puedas hacer un caso para cualquier opción que elijas.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.