Módulo 2 - Prototipado

En diseño web, un wireframe (en español se puede traducir por esquema de la página o plano de la pantalla, aunque no se suelen usar estos términos), es un dibujo o esquema que representa el esqueleto o estructura visual de un sitio web (un conjunto de páginas web) o de una página web concreta. El wireframe suele carecer de aspectos visuales como estilo tipográfico, colores e imágenes, ya que su propósito es servir de apoyo para discutir el contenido, funcionalidad y comportamiento de un sitio web o de una página web.

La responsabilidad de un arquitecto de la información es:

·       Identificar los objetivos del proyectos

·       Identificar las necesidades de los usarios

·       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.

·       Prototipar la aplicación web

La responsabilidad final es que los usuarios puedan encontrar y gestionar la información de una manera efectiva.

Planos
Los planos son diagramas de organización y funcionamiento.
Se pueden denominar Blueprint, diagramas de contenido o flujo o mapa web

Lo más importante de un diagrama es que sea comprensible. Que explique con claridad la estructura, el flujo de navegación y la relación entre los elementos.

Jesse James Garret describió "Vocabulario visual para describir arquitectura de información y diseño de interacción". Acuño el termino Ajax en el año 2005.

http://www.jjg.net/ia/visvocab/spanish.html

Maquetas

La 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.

En ningún caso debe contener diseño gráfico, que irá en etapas posteriores.

Se divide en prototipos de baja fidelidad y de alta fidelidad.

·       Prototipos de baja fidelidad SketchingSon dibujos estáticos creados de forma rápida en informal con lápiz y papel para transmitir una idea o concepto con rapidez y claridad.

Útil en primeras reuniones con el cliente o en sesiones internas con el equipo de trabajo.

·       Prototipos de baja fidelidad Wireframes
Un  Wireframe es más elaborado e incluye el inventariado de contenido. Es decir:
- que contenido se incluye en cada página.
- Los elementos de las mismas como cabeceras, enlaces, listas, formularios, etc.
- El etiquetado de los vínculo, títulos.
- Ubicación, colocación y agrupación de los elementos de la página
- Estrategia de navegación y priorización de contenidos dentro de la página.
- Comportamiento mediante notas asociadas a los elementos, para indicar como deben mostrase o para definir su comportamiento funcional
Storyboard es una secuencia de Wireframes

·       Prototipos funcionales prototipos de alta fidelidad
Permite detallar el proceso interactivo de una o varias tareas.
Son prototipo o maquetas dinámicas normalmente en HTML que simulan o tienen implementadas partes del sistema final.

Nunca se debe empezar a prototipar sin haber definido previamente los objetivos del cliente, necesidades de los usuarios, los requisitos del proyecto y la arquitectura de la 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.
Primero

1.     El equipo y el cliente se centran en el diseño de contenidos e interacción y no en el diseño visual.

2.     El cliente ve y comprende una aplicación, mucho mejor que si se ofrece descrita en un documento.

3.     Evita malentendidos entre el proveedor y el cliente o entre miembros del equipo.

4.     Ayuda a especificar los requerimientos y a detectar inconsistencias o falta de funcionalidad.

5.     Es un complemento de gran valor en el análisis.

Segundo

·       El prototipo se modifica con facilidad y rapidez.

·       Se evitan modificaciones posteriores mucho mas costosas cuando la aplicación ya se está implementando.

·       Se reducen costes y tiempo.

Tercero

·       Permite realizar pruebas de usabilidad, como test con usuarios, en etapas tempranas del proyecto.

·       Se detectan y solucionan los problemas antes de 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.

Los beneficios de prototipar justifican con creces el tiempo que se invierte:

·       Menor tiempo de desarrollo posterior.

·       Mayor calidad de resultado final.

·       Mayor satisfacción del cliente y usuario final.

Consejos para realizar un buen prototipo:

·       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 accesibilidad

·       Sobre todo diseña para los usuarios

Resumen

·       Importancia de prototipar antes de comenzar la implementación de la aplicación

·       El prototipado no debe comenzarse sin haber recibido primero

o   Los objetivos del sitio

o   Las necesidades de los usuarios

o   Los requisitos del proyecto

o   Arquitectura de la información de la aplicación Web