MODULO 2 - Lección 4 PROTOTIPADO, WIREFRAMES, MOCKUPS Y PROTOTIPOS
El arquitecto de información es el responsable de:
- Identificar los objetivos del proyecto
- Identificar las necesidades de los usuarios
- Especificar las funcionalidades y requerimientos de la aplicación web
- Define y diseña los sistemas de navegación, organización, etiquetado y búsqueda
- Prototipa la aplicación web
La responsabilidad final es asegurar que los usuarios podrán encontrar y gestionar la información de manera efectiva.
Los arquitectos de información, se valen de la diagramación y el prototipado para especificar cual será la organización, estructura, navegación y funcionamiento de la aplicación web.
Los PLANOS son diagramas de organización y funcionamiento y se suelen denominar Blueprint, diagramas de contenido o flujo o mapa web.
Jesse James garret, nos explica el vocabulario visual para describir arquitectura de información y diseño de interacción:
Un vocabulario visual para describir arquitectura de información y diseño de interacción
MAQUETAS: Prototipado de baja fidelidad, sketching, wireframes, storyboard y prototipos funcionales.
En un prototipo, no se debe incluir diseño gráfico y no se deben utilizar colores. Se trabaja con una escala de grises.
SKETCHING: Bocetos de forma rápida e informal hecho en lápiz y papel para transmitir una idea o concepto con rapidez y claridad.
Es una técnica muy útil en las entrevistas iniciales con el cliente.
WIREFRAMES: Es más elaborado y incluye el inventariado de contenidos (que 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 títulos, el layout (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.
Incluye el comportamiento mediante notas asociadas a los elementos para indicar como deben mostrarse o para definir su comportamiento funcional.
STORYBOARD: Secuencia de Wireframes.
Los PROTOTIPOS FUNCIONALES, son prototipos de alta fidelidad, también llamados maquetas o mockouts, que permiten detallar el proceso interactivo de una o varias tareas.
Son prototipos, maquetas dinámicas, normalmente en HTML, que simulan o tienen implementadas partes del sistema final a desarrollar.
Para empezar a prototipar, hay que tener definidos:
Los arquitectos de información, se valen de la diagramación y el prototipado para especificar cual será la organización, estructura, navegación y funcionamiento de la aplicación web.
Los PLANOS son diagramas de organización y funcionamiento y se suelen denominar Blueprint, diagramas de contenido o flujo o mapa web.
Jesse James garret, nos explica el vocabulario visual para describir arquitectura de información y diseño de interacción:
Un vocabulario visual para describir arquitectura de información y diseño de interacción
MAQUETAS: Prototipado de baja fidelidad, sketching, wireframes, storyboard y prototipos funcionales.
En un prototipo, no se debe incluir diseño gráfico y no se deben utilizar colores. Se trabaja con una escala de grises.
SKETCHING: Bocetos de forma rápida e informal hecho en lápiz y papel para transmitir una idea o concepto con rapidez y claridad.
Es una técnica muy útil en las entrevistas iniciales con el cliente.
WIREFRAMES: Es más elaborado y incluye el inventariado de contenidos (que 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 títulos, el layout (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.
Incluye el comportamiento mediante notas asociadas a los elementos para indicar como deben mostrarse o para definir su comportamiento funcional.
STORYBOARD: Secuencia de Wireframes.
Los PROTOTIPOS FUNCIONALES, son prototipos de alta fidelidad, también llamados maquetas o mockouts, que permiten detallar el proceso interactivo de una o varias tareas.
Son prototipos, maquetas dinámicas, normalmente en HTML, que simulan o tienen implementadas partes del sistema final a desarrollar.
Para empezar a prototipar, hay que tener definidos:
- Los objetivos del cliente
- Los objetivos de los usuarios
- Los requisitos del proyecto
- La arquitectura de información de la aplicación web.
La importancia de prototipa una aplicación antes de comenzar el diseño gráfico y su implementación es vital:
- 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 si se ofrece descrita en un documento.
- Evita malentendidos entre el proveedor y el cliente e incluso entre los propios miembros del equipo.
- Ayuda a especificar los requerimientos y a detectar inconsistencias o falta de funcionalidad.
- Es un complemento de gran valor en el análisis.
- El prototipo se modifica con facilidad y rapidez.
- Se evitan modificaciones posteriores mucho más costosas cuando la aplicación ya se está implementando.
- Se reducen costes y tiempos.
- Permite realizar pruebas de usabilidad, como tests 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.
Los beneficios de prototipar una aplicación web, justifican con creces el tiempo que se invierte en él.
Se reduce en gran medida el tiempo de desarrollo posterior y aumenta considerablemente la calidad del resultado y el grado de satisfacción del cliente y del usuario final.
CONSEJOS PARA REALIZAR UN BUEN PROTOTIPO:
- Sencillez y claridad.
- Hacerlo en blanco y negro
- Representar los tamaños y proporciones de los bloques de contenido.
- Tener en cuenta las pautas de accesibilidad y usabilidad.
- Sobre todo diseñar para los usuarios.
Existen multitud de herramientas en la Web que se pueden emplear para la creación de todo tipo de diagramas, incluidos los diferentes tipos de prototipos que se han explicado (wireframes, mockups)
Algunas son gratuitas como Pencil Project
Comentarios
Publicar un comentario