lunes, 15 de febrero de 2016

Prototipado 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 y 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, y finalmente realizar el prototipado de la aplicación.

Nuestra 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 nos valemos 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, al igual que ellos, realizamos planos y maquetas
del sitio antes de que este comience a construirse.

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.

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.

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.

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.

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, y se convierte en 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, de modo que
se reducen costes y tiempos.

Y en tercer lugar, también permite realizar pruebas de usabilidad, como test con usuarios, en
etapas tempranas del proyecto. De este modo se detectan y solucionan los problemas antes de
comenzar su implementación y el resultado son aplicaciones web más fáciles de entender, de
usar y que se ajustan mejor a las necesidades de los usuarios.

Mi experiencia me 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.

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; y sobre todo, diseña para tus usuarios.



Muchas gracias por tu atención.


AVISO IMPORTANTE
Este documento, su texto y gráficos e imágenes, puede ser utilizado bajo una licencia Creative Commons de tipo
Atribución, NoComercial.
En caso de utilizarse este material o de la creación de un derivado, la atribución se debe
respetar citando la fuente como Actívate, Google España 2016 y expresamente, si es posible, mediante un enlace

activo a http://google.es/activate . Revisado, enero 2016.

No hay comentarios:

Publicar un comentario