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 delos 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, que es lo que vamos a tratar en este vídeo).
La responsabilidad final de un
arquitecto de información es asegurar que los usuarios podrán encontrar y
gestionar la información de manera efectiva.
De la misma forma que un
arquitecto realiza los planos y la maqueta de un edificio antes de
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. Es decir, también realizan planos y
maquetas del sitio antes de que este comience a construir. Los planos, son
diagramas de organización y funcionamiento, que se suelen denominar blueprint,
diagramas de contenido o flujo o mapa web (Según su autor tendrá una
denominación u otra, no es una terminología claramente asentada).
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.
Existen
diferentes propuestas para realizar la diagramación de una aplicación web. Un
vocabulario muy utilizado y que se recomienda conocer es "Vocabulariovisual para describir arquitectura de información y diseño de interacción"
de James Garrett (en
español).
Garret es un destacado arquitecto
de información, muy conocido también por acuñar el término AJAX en el año 2005.
En el siguiente diagrama vemos un ejemplo de diagramación de Garret de la
aplicación web Yahoo Mail.
En
su artículo podréis descargar librerías para aplicar su vocabulario con
diferentes aplicaciones como PowerPoint o Visio:
Pero
no es la única propuesta que existe. 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. Además de estos libros, se recomienda el artículo “Ladiagramación en la arquitectura de información” de Ronda León, en el que
recopila diferentes propuestas de vocabularios, entre ellos el suyo propio.
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. Vamos a ver que hay diferentes
tipos y que distinguimos entre prototipos de baja fidelidad y alta fidelidad.
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.
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. Os recomiendo como
libro de referencia "Sketching User Experience" de Bill Buxton.
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, etc.; 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, así como 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.
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. Se recomienda la lectura del artículo de la autora de este
temario (Olga Carreras) “Arquitecturade información. Fundamentos” y el libro “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 además ve y comprende cómo será la aplicación, mucho mejor que sí se ofrece descrita en un documento.
- Evita malentendidos entre el proveedor y el cliente o incluso entre los propios miembros del equipo.
- Ayuda a especificarlos 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.
Nos explica Olga Carreras que su
experiencia le dice que los beneficios de prototipar una aplicación web
justifican con creces el tiempo que se invierte en él, pues se reduce en gran
medida el tiempo de desarrollo posterior y aumenta considerablemente la calidad
del resultado y la satisfacción del cliente y el usuario final.
Lecturas de interés:
- “Wireframes”, de Olga Carreras
- ”Prototipado” de la Fundación Sidar
- “Wireframes” blog donde encontraréis ejemplos, plantillas, herramientas y otros recursos.
- “Glosario de usabilidad y accesibilidad” para consultar aspectos terminológicos.
Aquí tenéis también otras dos
presentaciones sobre prototipado que os pueden ser de utilidad y donde podéis
ver más ejemplos.
- Presentación “Wireframes forthe Wicked”
- Presentación “Importance of Wireframes in WebDesign”
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 hemos 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. Hemos 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. Hemos visto también que se distingue entre
prototipos de baja fidelidad, que son estáticos, y prototipos de alta
fidelidad, que son dinámicos. Hemos 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. Hemos visto que la terminología es muy variada y
no siempre unívoca, pues todavía no está claramente asentada. Y por ello, al
consultar la bibliografía y las referencias, os recomiendo que no os centréis
en aspectos terminológicos sino en las recomendaciones para realizar buenos
diagramas y prototipos de vuestras aplicaciones web.