Prototipado: wireframes, mockups y prototipos

Según Jesse James Garret, en su libro "Los Elementos de la Experiencia de Usuario", un Arquitecto de Información es el encargado de:

• Identificar los objetivos del proyecto.
• Identificar las necesidades de los usuarios.
• Especificar los requerimientos y las funcionalidades de la aplicación web.
• Definir y diseñar los sistemas de navegación, organización, etiquetado y búsqueda.
• Generar un prototipo de la aplicación web.

Los Arquitectos de Información se apoyan en la diagramación y prototipado para especificar la organización, estructura, navegación y funcionamiento de la aplicación o sitio web.

Los planos elaborados por los Arquitectos de Información se les llama blueprint, diagramas de contenido o flujo o  mapa web.

La diagramación de una aplicación web, debe ser clara, precisa y comprensible. Debe reflejar la estructura, el flujo de navegación y la relación entre los elementos que componen la página o sitio web. Existen diferentes propuestas de lenguajes o vocabularios de diagramación.

Otro elemento utilizado en el diseño web son las Maquetas. Las Maquetas son diagramas de presentación, cuya finalidad es crear una referencia visual de la estructura, organización e interacción a nivel de página. Pueden ser: Prototipos de baja fidelidad y Prototipos de alta fidelidad.

Los prototipos de baja fidelidad son dibujos estáticos. Se denomina Sketching a la técnica que usamos para elaborar un boceto rápido e informal con lápiz y papel con la intención de mostrar o transmitir una idea o concepto con rapidez y claridad. Se utiliza en las reuniones iniciales con el cliente, en reuniones o tormentas de ideas con el equipo de trabajo. Con el sketching podemos rápidamente proponer varias ideas o alternativas sin gastar muchos recursos y tiempo.

Los Wireframes son diagramas más elaborados y especifican cuál es el contenido que debe tener cada página. Se muestran cabeceras, títulos, enlaces, listas, formularios, etiquetado de los títulos, el layout de la página (ubicación, distribución o agrupación de los elementos de la página, estrategia de navegación y priorización de contenidos en la página. En los wireframes también se colocan notas asociadas a los elementos para indicar ´como deben mostrarse o definir su comportamiento funcional. Una secuencia de Wireframes se conoce como StoryBoard.

Los prototipos funcionales son prototipos de alta calidad que permiten detallar el proceso interactivo de una o varias tareas. También denominados como Mockups. Son prototipos o maquetas dinámicas en HTML que simulan funciones del sitio. Tienen implementados o simulan parte de la página web a desarrollar.

Es importante el prototipado y tiene las siguientes ventajas:

• El equipo y el cliente se centran en el diseño de contenidos e interacción.
• El cliente ve y comprende cómo será su aplicación.
• Evita confusiones y malos entenidos entre el Proveedor y el cliente y entre los mismos miembros del equipo.
• Ayuda a especificar los requerimientos 
• Es un complemento de gran valor en el análisis.
• El prototipo se puede modificar con facilidad y rápidez.
• Con el prototipo se busca detectar problemas con anticipación y evitar modificaciones que serían mucho más costosas cuando la aplicación se esté o haya sido implementada.
• Se reducen costos y tiempos de desarrollo.
• Permiten hacer pruebas de usabilidad y test con usuarios.
• Se busca obtener aplicaciones web más fáciles de entender y usar que se ajustan a las necesidades de los usuarios

En resumen, con el prototipado se busca:

• Menor tiempo de desarrollo posterior.
• Mayor calidad del resultado final.
• Obtener mayor satisfacción del cliente y del usuario final.

Caracteríticas de un buen prototipo:

• Deben ser Sencillos y claros.
• No usuar colores llamativos, preferiblemente en blanco ynegro.
• Representa los tamaños y proporciones de los bloques de contenido.
• Tomar en cuenta las pautas de accesibilidad y usabilidad.
• El prototipo debe estar orientado hacia los usuarios.

Para mayor información puede consultar el siguiente vídeo: