A la hora de afrontar un proyecto, nos es necesario poder enseñar el producto final lo antes posible a nuestro cliente. Cada vez más, el cliente forma parte de todo el proceso de desarrollo y es necesario ir alineados, hablar el mismo idioma y visualizar aquello de lo que estamos hablando.

En el campo del desarrollo informático, herramientas como wireframes y mockups son buenas para acabar produciendo un prototipo. Aunque el proceso que voy a redactar a continuación está enfocado a este campo, lo podemos traducir perfectamente a otros campos como la arquitectura o la ingeniería del automóvil.

Los conceptos ‘wireframe’ y ‘mockup’ suelen confundirse y no hay un consenso claro sobre qué realmente alcanza un concepto y otro. Los conceptos que desarrollo a continuación son los que más me encuentro entre clientes y proveedores. Te recomiendo que, cuando hables sobre ellos, primero establezcas qué significa cada uno y qué alcance tienen. Es por ello que no he enlazado los conceptos a wikipedia ni a otros blogs.

Aterrizar conceptos de forma económica

A lo largo de las primeras reuniones con el cliente, desarrollamos los bocetos de nuestro producto. Estos bocetos, llamados habitualmente “sketches”, intentan aterrizar las ideas en algo tangible. Nos permiten abordar diferentes ideas, estableciendo los principios básicos de aquello que debe contener el producto. Son baratos, nos sirven para alinear a todo el equipo y hablar el mismo idioma.

Qué, cómo y dónde

Con las ideas negro sobre blanco, pasamos a establecer el espacio que ocuparán los elementos y la estructura en la que se distribuirán. Después de realizar un estudio sobre los públicos objetivo, analizamos qué elementos necesitamos, cómo se usarán y dónde los ubicaremos. Para hacer esto, usamos la técnica del wireframing.

Un ‘wireframe’ proporciona una diseño de baja resolución, con las áreas bien definidas.

 

Alta fidelidad

A partir de los wireframes pasamos a realizar el diseño de “alta fidelidad”, también llamados por algunos “mockups”. Este diseño define la tamaños de los elementos, posiciones concretas, interacciones de las pantallas, etc. Suele incluir la dirección de arte y el diseño gráfico de las piezas (look and feel, color, tipografías, etc). Es la versión previa al desarrollo.

Un ‘mockup’ proporciona una diseño de alta fidelidad, con la disposición de todos los elementos y sus interacciones. Incluso puede tener textos y diseño incluidos.

 

Mi producto tangible

Una vez realizado el mockup, podemos pasar al desarrollo básico. En el mundo de la programación informática, pasamos a codificar. Al producto final de resultante se le llama prototipo.
El prototipo es el producto mínimo viable que permite al cliente interactuar con la primera versión de lo que acabará siendo el producto final. Este prototipo debe estar preparado para poderse probar, tanto en el mercado como con clientes internos. A partir de las pruebas y su correspondiente evaluación mediante métricas adecuadas, podemos empezar a pivotar para seguir desarrollándolo.

Herramientas

Papel y lápiz. Estas son las básicas. Elimina cualquier dispositivo con pantalla (a no ser que tengas una tablet con un pen de alta precisión y una buena aplicación). Luego existen en el mercado multitud de herramientas que te permiten hacer desde el wireframe hasta el mockup.

De las herramientas específicas, entre las más conocidas tenemos: Axure, Balsamiq , Gomockingbird, Gliffy, Lumzy, Mockflow y mi preferida, uxpin.

Si buscas herramientas no tan específicas y más ofimáticas, puedes usar keynote, powerpoint o Dreamweaver. ¡Tu creatividad al poder!

Si quiero visualizar y manipular mi producto aún más rápido…

Y si tu cliente es pragmático, experimental, del que le gusta tocar las cosas casi antes que pensar sobre su definición… si el producto tiene mucha incertidumbre… si este proceso no se adecúa a tus necesidades o no puedes ajustarlo… no hay problema. Se llama “pretotipado” y lo explica muy bien Alberto Savoia en su pretotipo de libro “Pretotipar esto”. La técnica del pretotipado te ayuda a tener el producto sin tener en cuenta los detalles que, a menudo, hacen el producto interminable. Aquí te dejo el pretotipo de libre descarga y aquí su libro entero.

Hagas lo que hagas, sé ágil y no esperes al final a ver el resultado. Un proyecto con un enfoque ágil hace que todo el mundo trabaje mejor, y mantiene al cliente bien cerca del resultado, además de que le incluye en el proceso de definición, cosa que después es de agradecer. Te dejo esta imagen donde puedes ver gráficamente a qué me refiero. No planifiques más de la cuenta, pero tampoco caigas en la trampa de no planificar nada. Trabaja de forma ágil pero sin pasarte de rosca.

screenshot 8

¿Y tú qué dices?

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.