10 buenas prácticas para crear wireframes más eficientes
Es un proceso simple y básico pero requiere seguir unas pautas para que sea realmente efectivo, si quieres saber cómo conseguirlo aquí tienes la respuesta.
¿Qué es un wireframe?
Empecemos por el principio, los wireframes son esquemas de pantallas que sirven para definir la información, la estructura y el comportamiento de una interfaz. Nunca va a tener la intención de mostrar características visuales y de hecho, se llama wireframe porque se basa en el principio de usar líneas simples para comunicar.
Su objetivo es permitir la visualización de los contenidos y reflejar todas las funcionalidades disponibles y sirven como herramienta de comunicación y traspaso entre research, diseño UX, diseño UI, desarrollo y el cliente.
También es la forma más efectiva de relacionar la arquitectura de la información (AI) con el diseño de producto.
La principales ventajas de realizar wireframes antes del diseño visual son:
- Con menor tiempo y por tanto menores costes se pueden definir decisiones de estructura, contenidos, funcionalidades…
- Todas las iteraciones van a seguir teniendo las ventajas del punto anterior.
- Permite una comunicación mucho más eficiente entre los involucrados.
- Con ellos se pueden visualizar las interacciones y los flujos.
- Se pueden detectar posibles problemas de usabilidad con un impacto mucho menor que si se detectaran en una fase más avanzada del proyecto.
Las 10 claves para generar wireframes más eficientes
Para aprovechar todas las ventajas que nos ofrece la creación de wireframes y así cumplir tus objetivos te recomiendo seguir los siguientes consejos.
1. No te saltes los pasos previos
Empezar a generar wireframes no tiene sentido si no tienes información de valor con la que empezar a trabajar. ¿Tienes el informe del equipo de research sobre las necesidades de los usuarios? ¿Y una toma de requisitos? ¿Has hecho diagramas con los flujos de los usuarios? ¿Has pensado en hacer una sesión de co-creación?
Como muchos procesos, empezar a realizar wireframes requiere un trabajo previo de recopilación de información, arquitectura de la información y reflexión sobre las necesidades del proyecto.
2. Usa la herramienta que más se ajuste a tus necesidades
Puedes hacer tus wireframes con la herramienta que quieras, analógica o digital. Sin embargo, se recomienda en papel en las fases más tempranas, en wireframes lo-fi (wireframes de bajo nivel que definen con mucho menos detalle la información).
Para una fase un poco más avanzada que pueda requerir iteraciones o traspasos a otros compañeros es mucho más práctico el uso de herramientas digitales que se adecuen al resto del equipo. No importa que sea Figma, Sketch, Adobe XD, … pero sí es altamente recomendable tener una librería de componentes preparada para reducir tiempos y ganar en consistencia.
3. Usa tamaños lo más parecidos a la realidad
Durante la fase de Research o por los requisitos del cliente vas a poder empezar tus wireframes con una resolución lo más parecida a las necesidades de los usuarios, eso permitirá que la estructura sea más realista con los tamaños que lucirá la propuesta final. Es importante también tener en cuenta el contexto, por ejemplo contemplando el espacio vertical que ocupa un navegador concreto en la pantalla.
Además del tamaño de la pantalla y de todos los componentes, es esencial revisar los tamaños de tipografías para que no sean imposibles de leer y que los pesos entre diferentes estilos de texto tengan sentido según su jerarquía.
4. Usa contenidos realistas
Lo ideal es tener los copies finales y todos los contenidos de muestra lo más ajustados a la realidad posible. Así evitaremos usar campos kilométricos con Lorem ipsum cuando el texto real puede ser más corto o al revés. También evitaremos que por ejemplo una tabla pueda generar un falso efecto de encaje perfecto entre toda la información que se va repitiendo en cada fila.
5. No añadas decisiones estéticas
Se puede añadir información visual pero se recomienda que solo sea cuando tenga una relación con la funcionalidad, por ejemplo usando el rojo para mostrar un error o redondeando una caja para que se vea como algo más clickable.
6. Muestra las interacciones de todos los elementos
Ten en cuenta todos los estados y posibles pasos de la interacción, incluso los errores y los empty states, esto ayudará también al equipo de diseño visual a cubrir todas esas casuísticas.
7. Comenta todo aquello que pueda generar dudas del diseño
Dejar un apartado con comentarios numerados relacionados con la pantalla puede ser muy útil para explicar el funcionamiento, la idea es hacer del wireframe un documento entregable que no genere dudas al equipo de desarrollo.
8. Deja todas las opciones y será más fácil tomar decisiones
Si no tienes claro con qué solución quedarte deja las opciones reflejadas para que sea más fácil tomar la decisión, y si no te queda clara te puede servir para verlo con tu equipo y valorar mejor las propuestas. Podríamos decir que el momento de definir los wireframes es un buen momento para arriesgar.
9. Asegúrate que el cliente entienda qué es un wireframe
Hay muchos clientes que no van a entender qué es un wireframe, puedes tomar la introducción de este artículo para que lo entienda y pueda entender el valor que aporta y que no lo confunda con el diseño visual de la interfaz.
10. Usa una nomenclatura para las pantallas
El orden y el nombre de las pantallas es muy importante para que se entiendan bien los flujos. Además si los usas bien vas a poder crear las pantallas en diseño UI siguiendo esa misma nomenclatura.
Conclusión
Espero que estos consejos te puedan servir para aportar más valor en los entregables y que esto contribuya al éxito del proyecto.
Si necesitas ayuda con tu proyecto puede contar con nuestros servicios, te podemos acompañar durante cada una de las fases de diseño estratégico, desde el research inicial hasta hacer realidad tu producto digital.
