Estoy seguro de que has oído hablar de los beneficios de crear bocetos estructurales, ya sea en tus cursos de gestión de productos o por parte de colegas o compañeros. También supongo que has intentado introducir algún tipo de proceso de creación de bocetos estructurales en tu producto.
Pero ¿está funcionando bien tu proceso? ¿Eres capaz de sacar el máximo partido a tus bocetos estructurales con la forma en que los haces ahora? Bueno, realmente depende del proceso que estés utilizando.
Para ayudarte a aumentar la eficacia de la creación de bocetos estructurales, permíteme compartir mi experiencia y hablarte de un proceso que he descubierto que es el mejor de todos.
La creación de bocetos estructurales es una parte esencial del proceso de diseño de UX
Los bocetos estructurales son representaciones visuales de alto nivel de tu producto que puedes utilizar para ilustrar cómo quieres que se vea y funcione. 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 permite ahorrar tiempo y dinero.
Me gusta mucho la definición de creación de bocetos estructurales de los expertos en experiencia de usuario de NN/g, ya que muestra el principal beneficio que obtienes de ella.
Técnica rápida y rentable para identificar los principales problemas de usabilidad en una fase temprana mediante bocetos y papel. Encaja perfectamente con los procesos ágiles y Lean.
Independientemente del método de creación de bocetos estructurales que elijas (¡dibujar en papel es perfectamente válido!) o de la herramienta que decidas utilizar para crear tus bocetos (para ello, consulta nuestra lista de las mejores herramientas para crear bocetos estructurales), te recomiendo que sigas este proceso, al que he llegado después de probar prácticamente todos los procesos de creación de bocetos estructurales que existen.
Paso n.º 1: asegúrate de conocer suficientemente bien a tus usuarios
El gran diseño comienza con un equipo que conoce bien a sus usuarios. Después de todo, ¿quién necesita tu diseño y el producto que este representa si no es capaz de satisfacer adecuadamente las necesidades de las personas a las que va dirigido? Por lo tanto, el paso más importante que debes dar antes de comenzar a crear tus bocetos estructurales 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 creación de bocetos estructurales (y también después), pero centrémonos en la fase inicial, cuando intentas 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é quieren tus usuarios? Entonces, ¿por qué no se lo preguntas directamente? Puedes empezar elaborando una lista de preguntas que ayuden a tus usuarios a hablar sobre los problemas que están experimentando y las soluciones que utilizan para resolverlos.
Después, puedes ponerte en contacto con usuarios potenciales y reclutarlos a través de las redes sociales, plataformas especializadas como Userinterviews o Respondent, o incluso conocerlos en ferias comerciales.
Por último, realizas la entrevista con una grabadora (para poder analizarla más tarde) o con un compañero de entrevista sentado a tu lado y tomando notas.
Nota: lo ideal es hacer ambas cosas.
Encuestas: Mientras que las entrevistas son una gran fuente de datos cualitativos que ayudan a descubrir las razones que se esconden tras las necesidades y el comportamiento de los usuarios, las encuestas proporcionan una combinación de datos cualitativos y cuantitativos, lo que permite validar los hallazgos con significación estadística.
No profundizaré demasiado en este tema, 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». Esto significa que estás presente, de forma virtual o física, en el entorno en el que tus usuarios objetivo experimentan los problemas que quieres resolver.
Por ejemplo, supongamos que estás creando una herramienta que facilite la edición de vídeos para redes sociales. Tu estudio de campo consistiría en observar el proceso de una persona influyente en redes sociales mientras graba un vídeo para TikTok, lo edita y lo sube a su canal.
Aunque los estudios de campo son relativamente difíciles de organizar (no todos los usuarios se sentirán cómodos mientras observas sus actividades diarias), te proporcionan el contexto y los conocimientos más completos sobre tus usuarios.
Talleres de descubrimiento con las partes interesadas: Sí, un gran diseño de experiencia de usuario se construye en torno a las necesidades de los usuarios, pero tampoco debemos olvidarnos de las partes interesadas clave. Aunque tus usuarios también son partes interesadas, utilizaré este término para referirme a tus fundadores o a la dirección ejecutiva, tus inversores, cualquier organismo legal o regulador con el que tengas que trabajar, etc.
A veces tomas decisiones de diseño no basadas en las necesidades de tus usuarios, sino teniendo en cuenta:
- Tu visión y estrategia: A los usuarios de Apple les encantan los cables y las conexiones por cable, pero la visión de Apple es inalámbrica; por eso siguen eliminando puertos. (¡Ahora ya lo sabes!)
- Tu entorno legal: Disponer de una enorme selección de opciones de cookies no es la interfaz más fácil de usar, pero es algo que quizá estés legalmente obligado a mostrar.
También hay razones para confiar en la intuición: a pesar de conocer bien a tus usuarios, podrías recurrir a tu propia intuición para tomar algún tipo de decisión de diseño.
Una vez claros el concepto y los tipos de investigación, veamos cómo sería en la vida real mediante un ejemplo.
Have an account? Log In
Ejemplo 1: Creación de una herramienta de esquemas para un profesional de UI
Imagina que estás a cargo de crear una herramienta de esquemas (algo similar a Balsamiq) y quieres saber exactamente cómo la utilizarán tus usuarios objetivo (en este caso, equipos de diseño) y qué problemas esperan resolver.
Para averiguarlo, podemos elaborar un cuestionario que queramos plantear a nuestros usuarios durante una entrevista. Esto es lo que podemos incluir:
Ahora imaginemos que descubrimos que los comentarios se realizan principalmente sobre una parte específica del esquema del producto y que el responsable del producto debe aprobar el diseño del esquema. Estos son dos hallazgos que afectarán directamente a nuestro diseño, ya que debemos diseñar un flujo de trabajo y una interfaz de usuario para comentar el esquema y aprobarlo.
En resumen, realizar una investigación exploratoria es la parte más importante de tu proceso de creación de esquemas y no te recomendaría omitirla. Ahora, con todo lo aprendido, pasemos al siguiente paso de nuestro proceso de creación de esquemas.
Paso n.º 2: crea tus flujos de usuario
Antes de crear las propias pantallas o páginas y colocar en ellas tus componentes, como formularios, tarjetas, imágenes, botones, etc., debes comprender la secuencia de pasos que imaginas que seguirán tus usuarios.
Estas secuencias también se conocen como flujos de usuario y representan todas las posibles rutas que tus usuarios pueden seguir para alcanzar sus objetivos. Estos objetivos pueden ser algo habitual y «administrativo», como registrarse o cambiar la contraseña, o 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 o páginas que quieres diseñar, así como el contenido que necesitas en cada una.
Para comprender mejor los flujos, permíteme mostrarte uno utilizando la herramienta de diagramas de flujo Flowmapp.
Ejemplo 2: visualización del flujo de usuario de una herramienta de diseño web mediante Flowmapp
Supongamos que estás creando una herramienta de diseño web de arrastrar y soltar como Webflow. Tus usuarios son diseñadores web que no programan y quieres visualizar los pasos que seguirán para añadir una imagen de fondo a su página web.
Así se verá en Flowmapp el flujo de usuario de esa función:
Como podemos ver, el énfasis de un flujo de usuario se pone más en las acciones que realiza el usuario y en la secuencia o causalidad entre ellas que en las páginas y su diseño.
En este ejemplo, queremos que el usuario pueda seleccionar una imagen de la galería o cargar o añadir 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 de nuestro usuario.
Al observar el flujo, entendemos que el usuario permanecerá en la misma página —el editor de páginas web— y quizá verá otra pantalla que muestra la galería de imágenes en forma de ventana emergente.
Por lo tanto, hay una página y una ventana emergente que diseñar, con elementos y funciones de diseño relevantes.
Ahora que tenemos una visión general de los pasos que siguen los usuarios para alcanzar sus objetivos en nuestro producto, por fin podemos empezar con la creación de esquemas propiamente dicha.
Paso n.º 3: empieza con un esquema de baja fidelidad
Sí, crear un esquema es el tercer paso de este proceso. Sin embargo, créeme: realizar los dos pasos anteriores llevará la calidad de tu esquema a un nivel completamente nuevo y, sin duda, merece la pena dedicarles tiempo.
En cuanto a la propia estructura alámbrica, te recomiendo que empieces con una de baja fidelidad. Una estructura alámbrica de baja fidelidad no incluirá detalles específicos como los colores y tamaños correctos ni otros atributos de diseño de tus páginas y pantallas. Tampoco incluirá imágenes ni textos reales. En su lugar, tendrás marcadores de posición para ambos elementos.
Y hay una buena razón por la que una estructura alámbrica de baja fidelidad es así y por la que deberías empezar con ella: las estructuras alámbricas de baja fidelidad se crean y editan rápidamente.
Es muy probable que hayas pasado por alto algo bastante importante en tu diseño. Al recopilar comentarios sobre él (hablaremos de esto en detalle en el siguiente paso), podrías darte cuenta de que hay muchos elementos y flujos que deben cambiar.
Si hubieras creado un diseño completo, realizar estos cambios te habría llevado días. Pero, con una estructura alámbrica de baja fidelidad, puedes hacer las modificaciones y someter tu diseño a otra ronda de comentarios en un par de horas o menos.
Así que, después de elogiar tanto las estructuras alámbricas de baja fidelidad, veamos qué aspecto tienen utilizando una herramienta popular para crearlas: Balsamiq.
Ejemplo 3: Crear la estructura alámbrica de un sitio web
La ventaja de las herramientas de diseño especializadas en la creación de estructuras alámbricas, especialmente las de baja fidelidad, es que no tienes que dibujar cada elemento desde cero.
En su lugar, normalmente incluyen una variedad de elementos básicos de interfaz prediseñados (por ejemplo, imágenes, menús, migas de pan, botones, etc.), junto con controles de arrastrar y soltar que hacen que el diseño sea especialmente rápido. Este es un ejemplo que he creado con Balsamiq.
Dada la propia naturaleza de las estructuras alámbricas de baja fidelidad, normalmente están en escala de grises o incluyen muy poco color y diseño visual. En su lugar, lo único que puedes ver es el aspecto general de los elementos de la interfaz de usuario de tu diseño, así como su ubicación y arquitectura de la información.
Ahora bien, si ya tienes lista tu estructura alámbrica de baja fidelidad, es hora de someterla a tu primera ronda de revisión.
Paso n.º 4: Itera internamente sobre tu diseño de baja fidelidad
Antes de invertir tiempo y esfuerzo en crear el diseño final de tu producto, supongamos razonablemente que hay muchas cosas que hemos hecho mal u olvidado tener en cuenta en el diseño, y empecemos a mostrar nuestra estructura alámbrica de baja fidelidad a nuestros compañeros y partes interesadas.
Por supuesto, también podrías mostrar este diseño a tus usuarios. Pero, teniendo en cuenta lo difícil que es reclutar usuarios dispuestos a revisar o probar la usabilidad de tu diseño, te recomendaría que utilizaras su valioso tiempo para evaluar diseños de mayor fidelidad y no lo desperdiciaras señalando problemas que tus compañeros podrían haber encontrado fácilmente.
Sin embargo, sí recomiendo involucrar a las partes interesadas en esta fase. Dos de las razones principales son:
- Reducir la «distancia» entre ellas y los miembros del equipo que crean el producto al involucrarlas desde las primeras etapas.
- Resolver en las primeras fases los problemas de diseño relacionados con la alineación estratégica para ahorrarte tiempo más adelante.
Por último, en cuanto hayas recopilado los comentarios de tus compañeros y de las partes interesadas, puedes corregir tu estructura alámbrica de baja fidelidad basándote en ellos, validar las correcciones con ellos y pasar a crear el diseño visual propiamente dicho de tu producto.
Paso n.º 5: Prepara una estructura alámbrica de alta fidelidad y un prototipo interactivo
Como ya tienes una comprensión adecuada de cómo será tu diseño a grandes rasgos, ahora puedes invertir con seguridad en crear los aspectos visuales de tu diseño y llevarlo al estado en el que más se parezca a lo que pretendes construir.
En esta fase del diseño, tu estructura alámbrica digital incluirá:
- Tu diseño de interfaz de usuario: incluidos los colores, las sombras, la tipografía y las fuentes, los márgenes correctos, etc.
- Tu contenido visual: si tienes previsto incluir imágenes, ilustraciones, vídeos u otros elementos gráficos en tus páginas, este es el momento de añadirlos.
- El texto de tu página: nos referimos al texto de los elementos de tu interfaz de usuario, los botones, los encabezados, etc.
- Una muestra de tu contenido: si tu diseño incluye contenido generado por los usuarios o contenido propio, también deberías añadir una versión de muestra. (Por ejemplo, el diseño de un comentario bajo una publicación que tenga el tamaño y el contenido habituales de un comentario que harían tus usuarios reales).
Además de ser el principal entregable para el equipo de ingeniería que creará tu producto basándose en su diseño, la estructura alámbrica de alta fidelidad también puede servir como una excelente herramienta para realizar pruebas de usabilidad con tus usuarios reales.
Puedes utilizar la propia estructura alámbrica de alta fidelidad para la prueba o llevarla a otro nivel añadiéndole diseño de interacción y transformándola en un prototipo interactivo.
Es muy fácil confundir los términos de los que he hablado aquí (estructuras alámbricas de alta fidelidad, prototipos interactivos, etc.). Así que permíteme aclararlos y mostrarte un par de ejemplos.
Diferencias entre los tipos de estructuras alámbricas: maquetas visuales frente a estructuras alámbricas de alta fidelidad y prototipos en los que se puede hacer clic
Estos tres conceptos son bastante similares entre sí y, por desgracia, la gente los utiliza indistintamente, lo que crea confusión entre quienes son relativamente nuevos en el ámbito del producto y el diseño.
Esto es lo que significa cada término:
Estructura alámbrica de alta fidelidad: Ya hemos hablado de ella anteriormente. Así que, en su lugar, permíteme mostrarte cómo es.
Este atractivo diseño es para un servicio que te permite contratar a chefs privados para que cocinen platos de alta cocina para ti. Como podemos ver, este diseño incluye todo: desde las imágenes finales hasta los colores y las posiciones. También contiene un poco de texto de «lorem ipsum» para representar el testimonio de un chef profesional en la página.
Maqueta visual: A diferencia de su equivalente, la maqueta visual no solo incluye el diseño final, sino que también muestra el entorno en el que aparece dicho diseño. Los generadores de maquetas visuales de productos pueden ayudar a crear estas imágenes contextuales. Por ejemplo, si estás diseñando un membrete, una maqueta visual mostraría una hoja de papel sobre una mesa con tu diseño.
En el caso de una aplicación móvil, tu maqueta visual mostrará la silueta de un iPhone o un dispositivo Android con tu diseño en la pantalla.
Prototipo: El prototipo tiene el aspecto de una estructura alámbrica de alta fidelidad, pero, además del aspecto final, también intentará simular la funcionalidad del producto.
Con prototipos en los que se puede hacer clic o herramientas de creación de prototipos 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 quieres que funcionen tus características antes de desarrollarlas.
Además, puedes realizar pruebas con usuarios entregándoles tus prototipos de alta fidelidad y observando cómo interactúan con tu producto, resuelven sus problemas o intentan orientarse en tu diseño.
La creación de estructuras alámbricas es un proceso de pruebas e iteración
La naturaleza iterativa de las estructuras alámbricas te permite ahorrar muchísimo esfuerzo al corregir tus errores. Además, al seguir un proceso de creación de estructuras alámbricas como este, te aseguras de que tus usuarios reciben un producto que satisface sus necesidades de la mejor manera posible.
¿Utilizas un proceso diferente para crear estructuras alámbricas en tu empresa? Tengo curiosidad por conocerlo, así que ¡deja un comentario a continuación y cuéntanos cómo lo haces!
Espero que te haya gustado esta guía y que te haya resultado útil. No dejes de consultar otras guías sobre gestión de productos escritas por algunos de los mejores profesionales del sector, como:
- La diferencia entre la visión y la estrategia de producto, de Kerstin Exner.
- Las 3P del producto, de Benoit des Ligneris.
- Documentos de requisitos del producto, de Sarah Tolle.
Por último, puedes suscribirte a nuestro boletín y también te enviaremos contenido interesante a tu bandeja de entrada.