Al diseñar una nueva app o proyecto web es habitual cometer el error de empezar a trabajar sin una arquitectura de la información clara y definida. Esto suele traducirse en problemas de usabilidad fácilmente evitables con una herramienta muy sencilla: los wireframes.
Qué es un wireframe
Un wireframe es un boceto donde se representa esquemáticamente la estructura de una página web. Podríamos llamarlo, en cierto modo, prototipo. El objetivo de un wireframe es definir la posición de los diversos bloques de contenido de la web y del resto de elementos que la componen: encabezado, menús, botones… Además, un wireframe también permite ver cómo estos elementos interactúan entre sí.
Al crear wireframes debes obviar usar colores, tipografías o elementos gráficos de cualquier clase. El foco debe estar en la funcionalidad del sitio y en la experiencia de usuario que estamos creando. Al priorizar una representación visual del contenido web, podrás crear diferentes versiones con rapidez y aplicar cambios o nuevas ideas de una forma ágil. Así, tendrás una estructura clara y sólida antes de empezar con la programación en HTML o CSS.
Cómo hacer el wireframe perfecto
Existe una gran variedad de métodos para diseñar wireframes: hay diseñadores que prefieren abordar esta tarea con papel y boli, mientras que otros prefieren utilizar herramientas específicamente diseñadas para esta tarea.
Entre las más habituales encontramos:
- Wireframe.CC. Herramienta on-line de estética minimalista, perfecta para aquellos diseñadores que prefieren reducir cada idea a su mínima expresión. Su interfaz es muy simple y libre de elementos que puedan distraerte a la hora de preparar tus wireframes.
- InVision Freehand. Su estilo de pizarra blanca y la filosofía colaborativa es lo que hace de esta herramienta una de las mejor valoradas por los usuarios. Permite integración con Sketch y Photoshop, así que poco más tenemos que añadir sobre ella. Si no la conoces todavía, ¡pruébala!
- Sketch. Una plataforma que te permite importar tus elementos UI preferidos o incluso diseñarlos directamente en su propia interfaz. Cuenta con un diseño intuitivo que contrarresta su única pega: no permite el trabajo colaborativo, aunque esto puede subsanarse con extensiones como Abstract.
- Moqups. La plataforma perfecta para diseñar interacciones y flujos de navegación. Cuenta con una herramienta que te permite crear marcas en el wireframe con las que saber dónde estará cada clic del usuario, por ejemplo. Muy útil para prevenir problemas de usabilidad durante la navegación.
- Balsamiq. Ideal tanto para páginas web como para apps. Esta herramienta tiene un estilo sketchy perfecto para plasmar tus ideas de forma rápida y simple. Es muy eficaz para conceptualizar ideas y flujos de trabajo sin detenerse en detalles más estéticos.
Diseña la usabilidad de tu web usando wireframes
Uno de los problemas más comunes a los que se enfrentan las páginas webs es que, cuando ya se tiene una versión prácticamente definitiva y se realiza un user test, aparecen fallos de usabilidad que no se habían detectado.
Trabajar con wireframes en una fase inicial del proyecto permite resolver problemas de usabilidad en estadios en los que resolverlos todavía es muy fácil. En tus diseños puedes incluir el flujo de navegación que tendrá que seguir el usuario para realizar tal o cual acción, o para avanzar entre las diferentes pantallas.
De una forma muy simple, podrás detectar si el proceso es demasiado largo o si hay lagunas. Así que, cuando diseñes los wireframes de tu próximo proyecto, no te centres únicamente en colocar los bloques de contenido. Presta especial atención a la usabilidad y a la experiencia de usuario, y te ahorrarás mucho trabajo en fases posteriores. Quizá al principio se te hace complejo trabajar con conceptos tan esquemáticos, ¡pero, cuando te acostumbres, notarás una gran diferencia en todos tus proyectos!
