Prototipado vs Creación de Esquemáticos: ¿Cuál es la Diferencia?
En el mundo de la gestión de productos, una habilidad que querrás tener en tu repertorio es la de poder crear un wireframe o prototipos.
Utilizar prototipos o un wireframe es una excelente representación visual para transmitir una idea que puedas tener para una aplicación móvil o un sitio web, y una forma de obtener retroalimentación de usuarios que no consume mucho tiempo.
Dicho esto, existe mucha confusión sobre las diferencias entre prototipos y wireframes. Hay bastante superposición entre ambos en cuanto a lo que abarcan, pero también existen muchas diferencias clave.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Es fácil pensar que la diferencia principal entre un wireframe y prototipos se reduce a que uno es de baja fidelidad (un wireframe), mientras que el otro es de alta fidelidad (wireframes de alta fidelidad o prototipos), pero hay mucho más que eso.
En este artículo, veremos en qué consiste un wireframe, junto con los prototipos, y las diferencias entre ambos. También hablaremos de los mockups, el punto intermedio entre los dos, y qué tanto deberías conocer sobre el proceso de diseño como gerente de producto.
¿Qué es el wireframing?
Primero, veamos qué es un wireframe.
Un wireframe es reducir la idea (como una app o una página web) a su esencia. Es la vista panorámica de cómo podría verse tu app o página web. Incluye un esquema de la estructura, la interfaz de usuario y cómo se presenta la información frente al usuario.
El enfoque aquí es la simplicidad—crear un wireframe no es un proceso que consuma mucho tiempo. Aquí, tu objetivo no es la experiencia de usuario ni la interactividad.
Un wireframe es ideal para recibir feedback rápido de los principales interesados para saber si estás en el camino correcto. Si no es así, es fácil crear iteraciones con solo algunos ajustes.
¿Cómo se ve un wireframe?
Algunas de las mejores prácticas de wireframing de productos incluyen lo siguiente:
- Un wireframe suele ser en blanco y negro o en escala de grises
- El texto Lorem ipsum es común como texto de relleno
- En lugar de mostrar imágenes, se puede utilizar una caja simple (normalmente con una “x” en su interior)
Recuerda que esto es de baja fidelidad: la funcionalidad y la experiencia de usuario vienen después.
Herramientas para crear un wireframe
Si quieres hacerlo a la antigua, crear un wireframe con papel y lápiz es más que suficiente para transmitir la idea rápidamente. Tal vez estás almorzando o en una cafetería y solo tienes una servilleta y un bolígrafo cuando se te ocurre una idea.
Si no, una solución de software para wireframing popular para crear wireframes es Balsamiq. Este software está dedicado exclusivamente a crear wireframes y nada más.
Por supuesto, si no quieres aprender otra herramienta de software, crear un wireframe es posible con aplicaciones con las que ya estés familiarizado, como Sketch e Invision.
Recuerda, un wireframe es de baja fidelidad y puedes hacerlo rápidamente para transmitir una idea. No querrás invertir mucho tiempo en aprender un software nuevo (aunque Balsamiq es bastante fácil de aprender).
Lo que los product managers deben saber sobre los wireframes
Como gerente de producto, quieres ser capaz de comunicar tu perspectiva de forma visual y gastando poco tiempo.
Ya sea que le estés mostrando algo a un desarrollador de software o a alguien de UX design, tener el conocimiento para crear un wireframe rápido será clave para avanzar en tu carrera en la gestión de productos.
¿Qué es el prototipado?
Los prototipos son una versión de alta fidelidad que, dependiendo de la retroalimentación del usuario, puede no diferir mucho en apariencia y funcionamiento de tu producto final.
Los prototipos son excelentes para realizar pruebas con usuarios. Puedes probar las interacciones, la experiencia de usuario, la usabilidad y la interfaz de usuario.
Los prototipos requieren mucho más tiempo para crearse ya que pueden representar de cerca el diseño final del producto, pero te ahorrarán mucho tiempo si simplemente pasas a crear el producto final probándolo a través del prototipado.
¿Cómo es un prototipo?
Dependiendo de qué sea tu producto, el diseño de tu prototipo debe lucir bastante similar a cómo se verá el diseño final del producto.
Esto debería incluir las fuentes, la imagen de marca, los elementos de diseño y el diseño de la interfaz de usuario que tu organización utiliza actualmente para otras aplicaciones o páginas web.
Dependiendo de cuán detallado quieras ser, puedes crear prototipos interactivos para obtener una mejor idea de cómo será el producto terminado. Esto puede incluir enlaces clicables que te lleven a otras partes del prototipo.
También puedes incluir animaciones y transiciones para crear un prototipo que se comporte mucho más como lo haría un producto final. En algunos casos—como la simulación de productos físicos, distribuciones espaciales o interfaces de realidad aumentada—los equipos pueden recurrir a herramientas que admiten prototipado 3D para captar una sensación de interacción y movimiento más realista.
Herramientas para prototipado
Algunos de los software de prototipado más populares son los siguientes:
Muchos de estos proveedores ofrecen herramientas gratuitas de prototipado o versiones freemium de su software para ayudarte a comenzar.
Qué debería saber un Product Manager sobre prototipos
Esto va a depender de varios factores.
Si trabajas en una empresa pequeña, probablemente tengas que asumir varios roles y tengas una idea de cómo armar un prototipo de alta fidelidad.
Si trabajas en una organización más grande, lo más probable es que tengas compañeros de equipo que se especialicen en diseño de experiencia de usuario. Estos son los miembros del equipo que deberían trabajar en el prototipo, ya que cuentan con un conjunto de habilidades más especializadas y adecuadas para ello.
Si vas a enfocarte en el desarrollo de una sola habilidad como product manager, dedica más tiempo al wireframing, ya que es algo que harás con mayor frecuencia.
Las principales diferencias entre prototipos y wireframes
Resumamos las principales diferencias entre el prototipado y el wireframing:
- Un wireframe es de baja fidelidad y toma menos tiempo en crearse, mientras que un prototipo es de alta fidelidad y lleva más tiempo.
- Un wireframe es más para transmitir la idea del producto a vista de pájaro. Un prototipo es algo que será similar a cómo actúa y se comporta el producto final.
- Un wireframe utiliza marcadores de posición y se enfoca en la estructura general. Un prototipo utiliza el diseño real.
- Los wireframes son herramientas para obtener la aprobación de los interesados. Un prototipo te permitirá probar la experiencia de usuario y obtener retroalimentación de los usuarios sobre la interacción.
Mockups: el punto intermedio
Existe una pequeña brecha entre un prototipo y un wireframe. Para ayudar a cubrir esa brecha, también deberías conocer los mockups.
Si bien los wireframes se pueden crear rápidamente, a veces puede ser difícil imaginar cómo se verá el producto final cuando solo tienes cajas en escala de grises y texto lorem ipsum.
Con un mockup, el objetivo es acertar con el diseño visual. Esta etapa no se trata de pruebas de usabilidad o de experiencia de usuario—eso corresponde a la etapa de prototipo. Se trata del aspecto visual de cómo podría lucir el producto final—cuando pases al prototipo podrás empezar a enfocarte en el flujo del usuario.
En este caso, lo que un product manager debe saber sobre los mockups es similar a lo que debe saber sobre los prototipos.
Si trabajas en una organización grande, sin duda tendrás compañeros de equipo mucho mejor preparados para el proceso de diseño y que pueden crear un boceto para recibir comentarios. (Y seré claro, la retroalimentación es crucial para detectar problemas en el diseño del producto.)
En resumen...
Ahora tienes una mejor comprensión de las diferencias entre bocetos y prototipos, junto con el punto intermedio de los bocetos.
Debes evaluar en qué punto te encuentras actualmente respecto a tus habilidades aquí. Si lápiz y papel te ha funcionado, puedes continuar así, o puedes probar con las excelentes herramientas de diseño UX que tienes a tu disposición.
Recuerda que el día solo tiene unas pocas horas, y la parte de bocetos y prototipos estará más a cargo de los miembros del equipo que se especializan en el proceso de diseño. Querrás trabajar de cerca con ellos para crear algo que tenga la mínima barrera posible entre el prototipo y el producto final.
Si te interesa absorber más información sobre diseño, consulta nuestro resumen de conferencias de diseño web que se celebrarán este año.
Si quieres aprender más sobre cómo convertirte en un mejor product manager, suscríbete al boletín de The CPO Club.
