Prototipado: wireframes, mockups y prototipos
En el siguiente vídeo se explican las diferencias que existen entre los wireframes, los mockups y los prototipos, se explica la importancia de prototipar una aplicación, o sitio web, antes de implementarla y se muestran los diferentes tipos de diagramas que se emplean para representar la navegación, la estructura y el funcionamiento de una aplicación o sitio web.
La responsabilidad de un arquitecto de información, es, tal y como la explica Jesse James Garrett en su conocido libro “Los elementos de la experiencia de usuario”:
- identificar los objetivos del proyecto
- identificar las necesidades de los usuarios,
- especificar las funcionalidades y requerimientos de la aplicación web,
- definir y diseñar los sistemas de navegación, organización, etiquetado y búsqueda
- realizar el prototipado de la aplicación.
La responsabilidad final es asegurar que los usuarios podrán encontrar y gestionar la información de manera efectiva.
De la misma manera que un arquitecto realiza los planos y la maqueta del edificio antes de que este comience a construirse; los arquitectos de información se valen de la diagramación y el prototipado para especificar cuál será la organización, estructura, navegación y funcionamiento de la aplicación web.
Los Planos
Los planos, son diagramas de organización y funcionamiento, que se suelen denominar blueprint, diagramas de contenido o flujo o mapa web.A la hora de realizar la diagramación de una aplicación web lo más importante es que sea comprensible y refleje con claridad la estructura, el flujo de navegación y la relación entre los elementos.
Un vocabulario muy utilizado y que se recomienda conocer es el "Vocabulario visual para describir arquitectura de información y diseño de interacción" de James Garrett. Garret es un destacado arquitecto de información, muy conocido también por acuñar el término AJAX en el año 2005.
Lo más importante es que la diagramación sea clara y compresible, y por ello es muy recomendable incluir una leyenda con los símbolos utilizados.
Las Maquetas
En ningún caso se debe incluir diseño gráfico en un prototipo, que se realiza en etapas posteriores, y que es importante aclararle al cliente cuando se le presenta el prototipo.
No se deben utilizar colores salvo los estrictamente necesarios, y por ello usamos gamas de grises.
Sketching.
Los prototipos de baja fidelidad son dibujos estáticos. Hablamos de sketching cuando realizamos bocetos de forma rápida e informal, con lápiz y papel, para transmitir una idea o concepto con rapidez y claridad.Es una técnica muy útil en las entrevista iniciales con el cliente, para comunicar conceptos o proponerle alternativas a un problema, durante un brainstorming o en las reuniones internas con el equipo de trabajo.
Antes de comenzar un prototipo más elaborado es conveniente comenzar con este tipo de bocetos para trabajar ágilmente con varias ideas, ir esquematizando las páginas y definiendo las diferentes zonas de las mismas.
Se recomienda como libro de referencia "Sketching User Experience" de Bill Buxton.
Wirerfame
Un wireframe es más elaborado e incluye el inventariado de contenido, es decir, qué contenido debe estar presente en cada página. Los elementos de la misma como:
- cabeceras.
- enlaces.
- listas.
- formularios.
- el etiquetado de los vínculos o de los títulos.
- el layout, es decir, la ubicación, colocación y agrupación de los elementos de la página.
- la estrategia de navegación y
- la priorización de contenidos dentro de la misma.
Un wireframe, asimismo, debería incluir el comportamiento mediante notas asociadas a los elementos para indicar cómo deben mostrarse o para definir su comportamiento funcional.
Cuando tenemos una secuencia de wireframes hablamos de un storyboard.
Prototipos funcionales, maquetas o mockups
Los prototipos funcionales son prototipos de alta fidelidad, también llamados a menudo maquetas o mockups, que permiten detallar el proceso interactivo de una o varias tareas.Son prototipos o maquetas dinámicas, normalmente en HTML, que simulan o tienen implementadas partes del sistema final a desarrollar como observamos en este ejemplo.
Nunca se debe comenzar a prototipar sin haber definido primero los objetivos del cliente, las necesidades de los usuarios, los requisitos del proyecto y la arquitectura de información de la aplicación web.
Libros y artículos recomendados:
- “Arquitectura de información. Fundamentos” de Olga Carreras
- “Arquitectura de información en entornos web” de Mario Pérez-Montoro Gutiérrez.
La importancia de prototipar una aplicación antes de comenzar el diseño gráfico y su implementación es vital.
En primer lugar:
- el equipo y el cliente se centran en el diseño de contenidos e interacción y no en el diseño visual.
- el cliente ve y comprende cómo será la aplicación, mucho mejor que sí se ofrece descrita en un documento.
- el prototipado evita malentendidos entre el proveedor y el cliente o incluso entre los propios miembros del equipo,
- ayuda a especificar los requerimientos, a detectar inconsistencias o falta de funcionalidad,
- es un complemento de gran valor en el análisis.
En segundo lugar:
- el prototipo se modifica con facilidad y rapidez,
- se evitan así modificaciones posteriores mucho más costosas cuando la aplicación ya se está implementando
- se reducen costes y tiempos.
Y en tercer lugar:
- permite realizar pruebas de usabilidad, como test con usuarios, en etapas tempranas del proyecto
- se detectan y solucionan los problemas antes de comenzar su implementación
- el resultado son aplicaciones web más fáciles de entender, de usar y que se ajustan mejor a las necesidades de los usuarios.
Beneficios de prototipar una aplicación web:
- Menor tiempo de desarrollo posterior
- Mayor calidad del resultado
- Mayor satisfacción del cliente y el usuario final.
Otras referencias:
- Artículo “Wireframes”, de Olga Carreras, donde se incluyen referencias de interés
- Artículo ”Prototipado” de la Fundación Sidar
- Blog “Wireframes” donde encontraréis ejemplos, plantillas, herramientas y otros recursos.
- “Glosario de usabilidad y accesibilidad” para consultar aspectos terminológicos.
- Presentación "Wireframes for the wicked"
- Presentación "Importance of wireframes in Web Design"
Para terminar me gustaría daros cinco consejos básicos para realizar un buen prototipo, y que se resumen en:
- sencillez y claridad;
- hazlo en blanco y negro;
- representa los tamaños y proporciones de los bloques de contenido;
- ten en cuenta las pautas de usabilidad y accesibilidad;
- diseña para tus usuarios.
En resumen, en este vídeo se ha hablado de la importancia de prototipar una aplicación web antes de realizar su diseño gráfico o comenzar su implementación, y como, a su vez, el prototipado no debe comenzarse sin haber definido primero los objetivos del sitio, las necesidades de los usuarios, los requisitos del proyecto y la arquitectura de información de la aplicación web.
Se ha visto que se distingue entre planos y maquetas.
Los planos o blueprints, diagramas de contenido o flujo, o mapa web, sirven para mostrar la estructura de la aplicación y su flujo de navegación.
Por su parte, las maquetas son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e interacción a nivel de página.
Se ha visto también que se distingue entre prototipos de baja fidelidad, que son estáticos, y prototipos de alta fidelidad, que son dinámicos.
Se ha recomendado comenzar con un sketch, es decir, un boceto rápido e informal con lápiz y papel. Y después un wireframe representará con más detalle la aplicación, incluyendo notas asociadas a los elementos sobre cómo se deben mostrar o su comportamiento funcional.
Por último, los prototipos funcionales son maquetas dinámicas, normalmente en HTML, que simulan o tienen implementadas partes del sistema final a desarrollar.
