Quizá no había forma de evitarlo, pero si se hubiese utilizado la realización de wireframes en el proceso de diseño posiblemente se habría evitado. Pueden ser desde cuatro garabatos en una servilleta (sí, muy típico) a diseños elaborados con los que se puede interactuar con el ratón. Los hay de diferentes tipos, con sus ventajas y sus desventajas, así que vamos a hacer un repaso rápido.

Se pueden dividir en dos tipos: wireframes de baja fidelidad y wireframes de alta fidelidad, pese a que al final del artículo tocaremos el tema de la terminología.

Los de baja fidelidad los habrás visto en muchos sitios. Son esos diseños basados en líneas, cajas y etiquetas de texto, normalmente en blanco y negro. Se utilizan en las etapas tempranas del proyecto por su finalidad y su fácil realización. Puedes hacerlos con un bolígrafo y un papel, llevártelo a otro departamento y escribir encima. Pueden tener un aspecto tosco pero incitan a manipularlos y adaptarlos según es necesario.

Al ser de sencilla elaboración puedes hacer muchos y explorar las distintas posibilidades de un problema, enfocándolo desde varios ángulos y haciendo las valoraciones pertinentes. Porque es ahora y no luego cuando se tienen que tomar muchas decisiones, y la velocidad importa.

Obviamente no han de discutirse temas de acabados del diseño (para eso están los de alta fidelidad), sino para tratar temas como la composición, la estructura y la distribución de elementos, o su funcionalidad.

Todo sea dicho, tienen sus desventajas: pueden inducir a equivocaciones y confusiones por ser a veces muy ambiguos (las anotaciones nunca están de más), y de cara a un cliente, si no está familiarizado con ellos, pueden parecer poco profesionales o diseños vagos e inacabados. Si vas a mostrarle uno déjale claro con antelación que se trata de un wireframe, y coméntale qué es y cuál es su función.

Sobre los de alta fidelidad poco hay que añadir. Como su nombre indica, son más cercanos al producto final y muestran aspectos más detallados, dando la posibilidad de valorar cosas como el esquema de colores, efectos y tipografías. Su desventaja es que si no te lo montas bien, realizar cambios es más costoso. No es cuestión de redibujar una línea; quizá tengas que redistribuir varios elementos, ajustar tamaños de fuente y varias cosas más.

Herramientas

Escoge la que te sea más cómoda y con la que seas más rápido. Como he comentado antes, un bolígrafo y un papel es una opción más que viable y digna. Puedes tachar lo que quieras y si hace falta, arrugas y vuelves a empezar.

También dispones de varias aplicaciones, tanto de escritorio como web, gratuitas y de pago. Por ejemplo Hotgloo, Wireframe.cc o Balsamiq. Hay muchas, muchas. Experimenta y elige la que te sea más cómoda.

Terminología

Hay personas que utilizan otros términos para referirse al tema en cuestión. Puede que en lugar de wireframes de alta fidelidad se les llame mockups. Puede que si le añades una mínima funcionalidad o interacción se les llame prototipo. Los que estáis familiarizados con esta asignatura, cómo los diferenciáis? Porque creo que es importante dejar claro que no son lo mismo, y me gustaría conocer diferentes puntos de vista y que se me corrija si es necesario.