Proceso de Wireframing en 5 Pasos Para Construir Mejores Productos
Estoy seguro de que has escuchado hablar de los beneficios de crear wireframes, ya sea en tus cursos de gestión de productos o a través de colegas o compañeros. También supongo que has intentado introducir algún tipo de proceso de wireframing en tu producto.
Pero, ¿está funcionando bien tu proceso? ¿Estás logrando sacar el máximo provecho de tus wireframes con la forma en que los realizas actualmente? Bueno, realmente depende del proceso que estés usando.
Para ayudarte a aumentar la eficacia de tu wireframing, permíteme compartir mi experiencia y contarte sobre un proceso de wireframing que he encontrado como el mejor de todos.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
El wireframing es una parte esencial del proceso de diseño UX
Los wireframes son representaciones visuales de alto nivel de tu producto que puedes usar para ilustrar cómo quieres que se vea y funcione el producto. Con estos elementos visuales, puedes probar e iterar sobre tu idea antes de pedir a tus ingenieros que intervengan y comiencen el proceso de desarrollo, lo que te ahorra tiempo y dinero.
Me gusta mucho la definición de wireframing de los expertos en experiencia de usuario de NN/g, ya que destaca el beneficio clave que se obtiene de esta práctica.
Técnica rápida y rentable para identificar los principales problemas de usabilidad desde el principio con bocetos y papel. Encaja perfectamente en procesos Ágiles y Lean.
No importa el método de wireframing que elijas (¡dibujar en papel está perfectamente bien!) ni la herramienta de wireframing que decidas usar (para ello, consulta nuestra lista de las mejores herramientas de wireframing), te recomendaría que sigas este proceso que he descubierto después de probar prácticamente todos los métodos de wireframing existentes.
Paso #1: Asegúrate de conocer bien a tus usuarios
Un gran diseño comienza con un equipo que conoce a fondo a sus usuarios. Después de todo, ¿quién necesita tu diseño y el producto que visualiza si no es capaz de satisfacer adecuadamente las necesidades de las personas para las que está destinado? Por lo tanto, el paso más importante que debes dar antes de empezar tu wireframing es la investigación de usuarios.
En realidad, la investigación de usuarios debería continuar durante todo el ciclo de vida de tu proceso de wireframing (y después también), pero vamos a centrarnos en la fase inicial, cuando estás intentando comprender las necesidades y la realidad cotidiana de tus futuros clientes.
Estas son algunas de las actividades importantes que te recomiendo realizar durante esta fase:
Entrevistas exploratorias: ¿Quieres saber qué es lo que quieren tus usuarios? Entonces, ¿por qué no preguntarles directamente? Puedes empezar elaborando una lista de preguntas que ayuden a tus usuarios a hablar sobre los problemas que experimentan y las soluciones que utilizan para resolver estos problemas.
Luego, puedes contactar y reclutar usuarios potenciales a través de redes sociales, plataformas especializadas como Userinterviews o Respondent, o incluso conocerlos en ferias y eventos del sector.
Por último, realizas la entrevista con una grabadora (para analizarla más tarde) o con un compañero de entrevista sentado a tu lado tomando notas.
Nota: Lo ideal es que hagas ambas cosas.
Encuestas: Mientras que las entrevistas son una excelente fuente de datos cualitativos que ayudan a descubrir las razones detrás de las necesidades y comportamientos de los usuarios, las encuestas te proporcionan una combinación de datos cualitativos y cuantitativos, permitiéndote validar hallazgos con significancia estadística.
No entraré mucho en detalle aquí, ya que tenemos una guía completa sobre preguntas para encuestas que puedes consultar.
Estudios de campo: En este caso, observas a tus usuarios en su “hábitat natural”. Significa que estás presente, de forma virtual o física, en el entorno donde tus usuarios objetivo experimentan los problemas que deseas resolver.
Por ejemplo, supongamos que estás creando una herramienta que facilita la edición de vídeos para redes sociales. Tu estudio de campo sería observar el proceso de un influencer grabando un video de TikTok, editándolo y subiéndolo a su canal.
Aunque los estudios de campo son relativamente difíciles de organizar (no todos los usuarios se sentirán cómodos con que observes sus actividades diarias), te proporcionan el contexto y los aprendizajes más ricos sobre tus usuarios.
Talleres de descubrimiento con partes interesadas: Sí, un excelente diseño centrado en el usuario se basa en las necesidades de los usuarios, pero no olvidemos tampoco a tus partes interesadas clave. Aunque tus usuarios también son partes interesadas, aquí utilizo el término para referirme a tus fundadores/directivos, inversores, cualquier organismo legal o regulatorio con el que debas trabajar, etc.
En ocasiones tomas decisiones de diseño no sólo basándote en las necesidades de tus usuarios, sino también considerando:
- Tu visión y estrategia: A los usuarios de Apple les gustan los cables y las conexiones alámbricas, pero la visión de Apple es inalámbrica; por eso siguen eliminando puertos. (¡Ahora lo sabes!)
- Tu entorno legal: Ofrecer una selección de cookies enorme no es la interfaz más amigable para el usuario, pero puede que estés legalmente obligado a mostrarla.
También hay un caso para la intuición: a pesar de conocer bien a tus usuarios, podrías consultar tu propia intuición para tomar algún tipo de decisión de diseño.
Con el concepto y los tipos de investigación claros, ilustremos cómo se verá esto en la vida real con un ejemplo.
Ejemplo 1: Creando una Herramienta de Wireframing para un Profesional de UI
Imagina que estás a cargo de crear una herramienta de wireframing (algo parecido a Balsamiq) y quieres saber exactamente cómo usarán tu herramienta los usuarios objetivo (en este caso, equipos de diseño) y qué problemas esperan resolver.
Para averiguarlo, podemos idear un cuestionario que queramos hacer a nuestros usuarios durante una entrevista. Aquí está lo que podemos incluir:
Ahora, vamos a imaginar que descubrimos que la retroalimentación se da principalmente en forma de comentarios sobre partes específicas del wireframe del producto, y que el product manager debe aprobar el diseño del wireframe. Estos son dos hallazgos que influirán directamente en nuestro diseño, ya que debemos idear un flujo de trabajo y una interfaz de usuario para comentar sobre el wireframe y aprobarlo.
En resumen, realizar una investigación de descubrimiento es la parte más importante de tu proceso de wireframing y no te recomendaría omitirla. Ahora, con todo lo aprendido, pasemos al siguiente paso de nuestro proceso de wireframing.
Paso #2: Crea tus Flujos de Usuario
Antes de crear las pantallas/páginas en sí mismas y de colocar tus componentes como formularios, tarjetas, imágenes, botones, etc., necesitas entender la secuencia de pasos que imaginas que tus usuarios tomarán.
Estas secuencias se conocen también como flujos de usuario y representan todos los caminos posibles que tus usuarios pueden seguir para alcanzar sus objetivos. Estos objetivos pueden ser algo común y "administrativo", como registrarse o cambiar su contraseña, o bien representar tus funciones principales (como buscar y reproducir música en Spotify).
En cualquier caso, crear flujos de usuario es importante, ya que te ayudará a visualizar mejor todas las pantallas/páginas que deseas diseñar, así como el contenido que necesitas en cada una.
Para entender mejor los flujos, déjame mostrarte uno usando una herramienta de diagramas de flujo como Flowmapp.
Ejemplo 2: Visualizando un Flujo de Usuario de una Herramienta de Diseño Web utilizando Flowmapp
Supón que estás creando una herramienta de diseño web de arrastrar y soltar, como Webflow. Tus usuarios son diseñadores web sin conocimientos de código y deseas visualizar los pasos que seguirán para añadir una imagen de fondo a su página web.
Así sería el flujo de usuario para esa funcionalidad en Flowmapp:
Como podemos observar, el énfasis en un flujo de usuario está dirigido más a las acciones que realiza el usuario y a la secuencia/causalidad entre ellas, más que a las páginas y su diseño.
En este ejemplo, queremos que el usuario pueda seleccionar una imagen de la galería o subir/agregar una a la galería. También queremos que el usuario pueda previsualizar la imagen antes de que nuestra herramienta la aplique como fondo de la página web del usuario.
Al observar el flujo aquí, entendemos que el usuario permanecerá en la misma página—el editor de páginas web—y quizás vea otra pantalla mostrando la galería de imágenes en forma de ventana emergente.
Por lo tanto, hay una página y una ventana emergente por diseñar con los elementos y funcionalidades correspondientes.
Como ya tenemos una visión general de los pasos que los usuarios toman para alcanzar sus objetivos en nuestro producto, finalmente podemos comenzar el wireframing real.
Paso #3: Comienza con un Wireframe de Baja Fidelidad
Sí, crear un wireframe es el tercer paso de este proceso de wireframing. Sin embargo, créeme, realizar los dos anteriores llevará la calidad de tu wireframe a otro nivel y definitivamente vale la pena dedicarle tiempo.
En cuanto al propio wireframe, te recomiendo empezar con uno de baja fidelidad. Un wireframe de baja fidelidad no incluirá detalles específicos como colores/tamaños exactos ni otros atributos de diseño de tus páginas y pantallas. Tampoco tendrá imágenes reales ni textos reales. En su lugar, tendrás marcadores de posición para ambos.
Y hay una buena razón por la que un wireframe de baja fidelidad es así y por la que deberías comenzar con uno—los wireframes de baja fidelidad son rápidos de crear y editar.
Es muy probable que hayas pasado por alto algo bastante importante en tu diseño. Al recopilar retroalimentación sobre él (hablaremos más sobre esto en el siguiente paso), podrías darte cuenta de que hay muchos elementos o flujos que necesitan cambiarse.
Si tuvieras un diseño completo, hacer estos cambios te habría tomado días. Pero, con un wireframe de baja fidelidad, puedes hacer tus ediciones y llevar tu diseño a otra ronda de retroalimentación en cuestión de un par de horas o menos.
Así que, después de elogiar tanto los wireframes de baja fidelidad, veamos cómo lucen utilizando una herramienta de wireframe popular—Balsamiq.
Ejemplo 3: Creando un Wireframe de Sitio Web
Lo mejor de las herramientas de diseño especializadas en wireframes, especialmente de baja fidelidad, es que no tienes que dibujar cada elemento desde cero.
En cambio, normalmente vienen con una variedad de elementos básicos de interfaz ya hechos (por ejemplo, imágenes, menús, rutas de navegación, botones, etc.) junto con controles de arrastrar y soltar para que el diseño sea especialmente rápido para ti. Aquí tienes un ejemplo que he creado usando Balsamiq.
Considerando la propia naturaleza de los wireframes de baja fidelidad, normalmente son en escala de grises o tienen poco color y diseño visual añadido. En su lugar, solo puedes ver el aspecto general de los elementos de la interfaz en tu diseño, así como su disposición y la arquitectura de la información.
Ahora bien, si ya tienes tu wireframe de baja fidelidad listo, es momento de llevarlo a tu primera ronda de revisión.
Paso #4: Itera Tu Diseño de Baja Fidelidad Internamente
Antes de invertir tiempo y esfuerzo en construir el diseño final de tu producto, hagamos una suposición educada de que hay muchas cosas que hemos hecho mal o que hemos olvidado considerar en el diseño, y empecemos a mostrar nuestro wireframe de baja fidelidad a nuestros colegas y partes interesadas.
Claro, también podrías mostrar este diseño a tus usuarios. Pero, considerando lo difícil que puede ser reclutar usuarios dispuestos a revisar o probar la usabilidad de tu diseño, te recomendaría que reserves su valioso tiempo para revisar diseños de mayor fidelidad y no desperdicies su tiempo señalando problemas que tus propios colegas podrían haber detectado fácilmente.
Sin embargo, sí recomiendo involucrar a tus partes interesadas en esta fase. Dos de las razones clave para hacerlo son:
- Reducir la “distancia” entre ellos y los miembros del equipo que construyen el producto, involucrándolos desde las etapas tempranas.
- Corregir los problemas de diseño relacionados con la alineación estratégica en las fases tempranas para ahorrar tiempo más adelante.
Finalmente, tan pronto como hayas recopilado retroalimentación de tus colegas y partes interesadas, puedes corregir tu wireframe de baja fidelidad en base a esa retroalimentación, validar las correcciones con ellos y pasar al diseño visual real de tu producto.
Paso #5: Prepara un Wireframe de Alta Fidelidad y un Prototipo Interactivo
Ahora que tienes un entendimiento adecuado de cómo lucirá tu diseño a alto nivel, ya es seguro invertir en crear las partes visuales de tu diseño y llevarlo al estado en el que más se asemeje a lo que realmente pretendes construir.
En esta fase de diseño, tu wireframe digital incluirá:
- Tu diseño de interfaz: incluyendo los colores adecuados, sombras, tipografía y fuentes, márgenes, etc.
- Tu contenido visual: si planeas tener imágenes, ilustraciones, videos u otros elementos gráficos en tus páginas, este es el momento de agregarlos.
- El texto de tu página: nos referimos al texto en tus elementos de interfaz, botones, encabezados, etc.
- Un simulacro de tu contenido: si tu diseño incluye contenido generado por el usuario o propio, también deberías agregar una versión simulada. (Por ejemplo, el diseño de un comentario bajo una publicación que tenga el tamaño y contenido típico de un comentario real de tus usuarios).
Aparte de ser el principal entregable para tu equipo de ingeniería, que construirá tu producto basado en su diseño, el wireframe de alta fidelidad también puede servir como una excelente herramienta para realizar pruebas de usabilidad con tus usuarios reales.
Puedes usar el propio wireframe de alta fidelidad para la prueba o llevarlo a otro nivel añadiendo diseño de interacción y transformándolo en un prototipo interactivo.
Es realmente fácil confundir los términos de los que hablé aquí (wireframes de alta fidelidad, prototipos interactivos, etc.). Así que permíteme aclararlos y mostrarte un par de ejemplos.
Diferenciando Tipos de Wireframes: Maquetas vs Wireframes de Alta Fidelidad vs Prototipos Interactivos
Estos tres conceptos son bastante similares entre sí y, lamentablemente, la gente los usa de manera intercambiable, lo que genera confusión entre quienes son relativamente nuevos en producto y diseño.
Esto es lo que significa cada término:
Wireframe de alta fidelidad: Ya hablamos de esto anteriormente. Así que, en su lugar, déjame mostrarte cómo se ve.
Este atractivo diseño es para un servicio que te permite contratar chefs privados para cocinar platos exclusivos para ti. Como podemos ver, este diseño lo incluye todo: desde imágenes finales hasta colores y posiciones. También hay un poco de texto “lorem ipsum” que representa el testimonio de un chef profesional en la página.
Mockup: A diferencia de su contraparte, el mockup no solo incluye el diseño final, sino que también muestra el entorno donde aparece ese diseño. Por ejemplo, si estás diseñando una hoja membretada, un mockup mostraría una hoja de papel sobre una mesa con tu diseño en ella.
En el caso de una aplicación móvil, tu mockup mostrará la silueta de un iPhone o un dispositivo Android con tu diseño apareciendo en la pantalla.
Prototipo: El prototipo se parece a un wireframe de alta fidelidad, pero, además del aspecto final, también intenta simular la funcionalidad del producto.
Con prototipos interactivos, o herramientas de prototipado 3D, puedes añadir interactividad básica como desplazamiento, animaciones, hacer clic en botones, navegar dentro de la aplicación, etc.
Al simular la interactividad de tu producto, los prototipos te permiten probar cómo deseas que funcionen tus funcionalidades antes de desarrollarlas.
Además, puedes realizar tests de usuario entregando tus prototipos de alta fidelidad a tus usuarios y observando cómo interactúan con tu producto, resuelven sus problemas o intentan encontrar su camino a través de tu diseño.
El wireframing es un juego de prueba e iteración
La naturaleza iterativa de los wireframes te permite ahorrar mucho esfuerzo corrigiendo tus errores. Además, al pasar por un proceso de wireframing como este, te aseguras de que tus usuarios reciban un producto que satisfaga lo mejor posible sus necesidades.
¿Utilizas un proceso de wireframing diferente en tu empresa? Me gustaría saberlo, así que deja un comentario abajo y cuéntanos cómo lo haces.
Espero que te haya gustado esta guía y que te haya parecido útil. No olvides consultar otras guías sobre gestión de productos escritas por algunos de los mejores profesionales del sector, como:
- La diferencia entre Visión y Estrategia de Producto por Kerstin Exner.
- Las 3Ps del Producto por Benoit des Ligneris.
- Requisitos del Producto por Sarah Tolle.
Por último, puedes suscribirte a nuestro boletín, y también te enviaremos contenido interesante directamente a tu buzón de correo.