¿Qué es un wireframe en UX?
Lo primero es lo primero: el anglicismo wire-frame es, traducido de forma literal: «estructura de alambre» y en UX (Experiencia de Usuario), el nombre «wireframe» se emplea para definir un tipo de representación esquematizada de una interfaz.
Para este tipo de representaciones, habitualmente se emplean líneas simples, formas planas y representaciones esquemáticas de los componentes que la conforman.
Quizás es más fácil de entender si extrapolamos el concepto al arte. En arte, un boceto es a un cuadro, como un wireframe a una interfaz. En un wireframe se representan componentes, jerarquías, configuración básica del espacio, e incluso algunas funcionalidades.
Casi nada.
¿Para qué sirve un wireframe?
La creación de wireframes tiene utilidad en diferentes contextos. Uno de los usos más extendidos, es en las fases iniciales de un proyecto de diseño de interfaz o de definición de UX en un producto digital.
En estas fases tempranas y dependiendo del proceso creativo u objetivos de negocio, es frecuente usar wireframes para representar la estructura base sobre la que se construirá el diseño.
Para ello, se recogen las necesidades de negocio, utilidades de cada pantalla, necesidades de usuario y flujos y objetivos que se quieren satisfacer, y se emplean estos bocetos para representarlos sin más distracciones.
Es frecuente que, cuando trabajamos empleando colores, contrastes y recursos estilísticos, sea fácil que nos desprendamos de la parte más estratégica de un diseño.
Esta técnica de crear bocetos previos nos permite abstraernos del diseño en su capa más visual, para poder centrarnos en resolver las necesidades y objetivos de cada pantalla y componente «sin distracciones».
Así, si la web, app, o producto digital fuera una estantería, un wireframe representaría las baldas y estructura y ayudaría a entender qué tipo de libros o de objetos habrá en cada lugar.
Por lo tanto, los wireframes o prototipos sirven para ayudar a representar los objetivos de negocio y usabilidad de un producto digital.
Si te interesa el proceso de experiencia de usuario en su conjunto, puedes leer en detalle lo que te contábamos en esta entrada sobre las etapas del proceso de UX. Enjoy! 🔥
Formas de usar prototipos o wireframes
Los prototipos son herramientas de definición y como tal, juegan un papel crucial en procesos de diseño de interfaz. Dentro de un proyecto de diseño UI, los wireframes no solo sirven para mostrar los elementos de forma coherente y ordenada, también son una herramienta brutal de comunicación entre equipos y profesionales.
Cuando tratamos de definir una idea abstracta, aunque estemos acostumbrados a comunicarnos y trabajemos en entornos de equipo profesionales, es muy fácil que quien lanza el mensaje o la idea y quienes la reciben no acaben creando la misma imagen mental.
El error está servido.
Para solventar estos errores, crear un wireframe y acompañar las palabras de un esquema de lo que se está tratando es de gran ayuda.
El problema, es que, en el lado opuesto, una definición demasiado profunda del boceto, puede ofrecer un punto de vista demasiado acotado para un equipo profesional.
Este equipo, que posteriormente elaborará un diseño visual o estudiará cómo resolver los problemas representados en ese boceto, podría verse condicionado si la representación de la solución está demasiado definida.
Curioso ¿no?. Ni tanto ni tan poco.
Este es uno de los motivos por los que un wireframe es muy útil empleado de la forma correcta, pero muy traicionero si no le damos la importancia correcta.
Una lectura súper interesante al respecto, no solo de proceso de prototipado sino que comprende todo lo que tiene que ver con la definición y ejecución de proyectos digitales, es «Shape Up«.
Es un libro disponible también en PDF para leer en línea y creado por el equipo de Basecamp, una conocida herramienta de gestión de proyectos.
En él, nos cuenta la importancia de trabajar los wireframes de fases tempranas con el modelo que llaman «de rotulador de punta ancha«.
Un tipo de técnica que impide que se ataquen detalles, pero que a nivel estructural y general permite mostrar una aproximación a la solución muy equilibrada.
A priori, estará suficientemente acotada para que el equipo no se salga del marco de trabajo, y suficientemente abierta para que cada profesional pueda aportar lo mejor de sus habilidades y creatividad.
Cuestión de equilibrio, como la vida misma 🙂
Tipos de Wireframes
Hay muchas maneras de crear wireframes y ninguna es la buena. Depende del contexto y su utilidad, enfrentaremos el proceso de creación de un wireframe de una forma u otra.
Wireframes por su nivel de definición
Por su nivel de definición, podemos encontrar dos tipos de prototipados, aunque entre ellos habrá múltiples variantes.
- Wireframes o prototipos de bajo nivel: son aquellos que presentan un bajo grado de detalle. Solo líneas y representaciones muy básicas y centradas en la parte funcional y de jerarquía de la información con cero o muy bajo componente visual. Son muy comunes en estadios iniciales de proyecto, en fases de definición. Los realizados con «rotulador de unta ancha» que citabamos antes, son de este tipo.
- Wireframes o prototipos de alto nivel: estos son bocetos más trabajados, posiblemente una evolución de los anteriores, en los que se ha aplicado una mayor capa visual en la que ya se aprecian algunos estilos o componentes de diseño que acercan el prototipo a un estadio más realista de lo que será finalmente la interfaz. Son muy empleados en estadios más avanzados en los que se trabaja para obtener algún tipo de aprobación o para ser sometidos a test para validar su funcionamiento.
Tipos de wireframes según su enfoque
Los bocetos habitualmente se emplean para resolver tres tipos de problemas.
- Cómo se jerarquiza y prioriza la información. Esta es la llamada arquitectura de información.
- Flujos de usuario y navegación. Responden a los diferentes caminos y objetivos que tendrá el usuario en el producto digital que estamos bocetando.
- Funcionalidad y usabilidad de la interfaz. Toda interfaz tiene una serie de componentes gráficos y funcionales destinados a generar una óptima experiencia de uso y brindar diferentes funcionalidades.
Así, los wireframes podrían enfocar resolver estos tres puntos, o centrarse en alguno de ellos por encima de otros.
Wireframe plano básico o con anotaciones
Este tipo de wireframes es la mejor expresión de prototipo de bajo nivel que comentábamos en el punto anterior. Esquemas simples en monocromo o escala de grises.
No es exactamente un tipo de wireframe, pero es una práctica muy extendida (y recomendable) ampliar lo que se representa con algunas notas o aclaraciones que aumenten el contexto o significado.
Es muy habitual al diseñar una interfaz que haya condicionantes tecnológicos o funcionalidades que debamos tener en cuenta. Los bocetos son el sitio perfecto para incñuirlas.
Así, desde le principio, el boceto irá acompañado de la información necesaria para ser interpretado correctamente.
Wireframe de flujo de usuarios o storyboard
Este es el tipo de wireframe que recoge con especial atención los flujos de navegación de los usuarios.
Un flujo de usuario es el conjunto de pasos que da ese usuario para conseguir algo. Habitualmente, ese algo serán objetivos claros de negocio como generar una venta, o también acciones significativas como completar un registro.
No es que sea un modelo diferente al anterior, pues también suele tener el detalle de cada pantalla y sus componentes, pero presta especial atención a las interconexiones entre pantallas y a esos pasos.
Al final, es tan importante lo que ves en pantalla, como el contexto en el que te enfrentas a ella. Esto, en interfaces, vienen influenciado, entre otras cosas, por la pantalla previa y la que seguirá según la acción que ejecutemos.
Pues esto es lo que se representa en un flujo de usuarios y es verdaderamente interesante a la hora de plantear un proyecto de creación de un producto digital, pues es uno de los puntos donde confluye la experiencia del usuario con los objetivos de negocio.
Técnicas de creación de wireframes
Si en lugar de atender al nivel de definición atendemos a la metodología de creación, distinguiremos algunos tipos diferentes de bocetos.
A mano. También conocido como Sketching o Sketches
Imagina que estás en una reunión de equipo trabajando en entender qué objetivos tendrá el producto digital y qué proceso vivirá el usuario para abordarlo. O que estáis barajando qué elementos debe tener cada pantalla y cuál es la jerarquía del contenido según la navegación.
En este punto, es muy habitual que, ya sea sobre papel o con alguna tableta gráfica o ipad, alguien esté dibujando a mano un boceto que permita traducir las ideas en una imagen base.
Este es el tipo de wireframes llamados sketches, que es lo mismo que decir «bocetos» en inglés. Son muy habituales y aquí en bisiesto los empleamos mucho
No solo en esta fase de ideación y definición, sino incluso en partes más avanzadas del proceso, cuando estamos trabajando en definir flujos de usuario o bajando a tierra algunas formas de aplicar recursos a la interfaz, el dibujo a mano es una magnífica forma de conseguir alinear al equipo en una dirección y encontrar soluciones.
Con plantillas imprimibles
No hay más que poner «wireframe plantilla» en Google o «printable sketch wireframe» para encontrar infinidad de recursos descargables y listos para imprimir. Usar plantillas pre-hechas es una buena opción.
Realmente es una opción híbrida porque no nos elimina la parte del dibujo a mano, pero permite a los equipos centrarse en el contenido y no en representar las pantallas o diferentes dispositivos.
Estas plantillas son muy útiles para generar múltiples versiones de forma ágil.
Programas profesionales de diseño
Ya sea por la necesidad de presentar estos bocetos al cliente o porque, aunque haya quien le parezca mentira, no todas las personas que se dedican al diseño saben o se sienten cómodas dibujando a mano alzada, hay múltiples formas de abordar un boceto de interfaz.
No solo están los programas de diseño «tradicionales» como Photoshop o los especializados para crear diseños para productos digitales como XD, Figma o Sketch entre otras (y cada vez más) opciones.
También han proliferado los programas específicos para crear wireframes.
Aquí van algunos de esos programas para crear bocetos:
- OmniGraffle: no solo permite crear wireframes planos, sino que se enfoca a la creación de flujos. Es una funcionalidad muy extendida en este tipo de herramientas.
- Miro: es una herramienta colaborativa que va mucho más allá, pero que es muy empleada para crear wireframes y prototipos e incluso para design thinking y estrategia.
- LucidChart: es una de las más empleadas por su plan gratuito y facilidad de uso. Igual que las anteriores, la posibilidad de crear wireframes básicos es solo la punta del iceberg.
- Aunque no sean programas específicos para prototipado, es un clásico el pensar que sin un programa «X» no podremos hacer el trabajo. Bueno, pues aunque hay a quien le sangren los ojos, Power Point o Excel son más empleados para la creación de prototipos y conceptos de lo que cabría imaginar.
Mucho más que cuadraditos y líneas
Ya ves que un wireframe es mucho más que un conjunto de cuadraditos y líneas rectas.
Es, quizás, una de las mejores expresiones de diseño como conjunto de técnicas empleadas para resolver un problema o mejorar algo.
Aunque, como hemos visto, tiene algunas aproximaciones con mayor desarrollo a nivel estético y visual, en general es una forma de abstraerse y enfocar directamente el problema que queremos resolver.
Pero no solo eso, son una herramienta de comunicación que debe ser empleada con criterio y buscando el equilibrio imposible entre la mínima definición del problema y el aporte de las soluciones suficientemente acotadas.
Todo un reto y mucho atractivo para estos wireframes, grandes aliados de la experiencia de usuario y el diseño de interfaces. 🙂
¿Preguntas?¿Dudas?¿Aclaraciones?
Escríbenos y comentamos, que si eres la mitad de friqui que nosotr@s con estos temas, seguro que nos llevaremos bien 🙂
