2.4. Prototipado: wireframes, mockups y prototipos
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.
Existen diferentes propuestas para realizar la diagramación de una aplicación web. Un vocabulario muy utilizado y que os recomiendo conocer es el "Vocabulario visual para describir arquitectura de información y diseño de interacción" de James Garrett" , uno de cuyos libros os recomendaba anteriormente. Garret es un destacado arquitecto de información, muy conocido también por acuñar el término AJAX en el año 2005.
El diagrama que veis abajo es un ejemplo de diagramación de Garret de la aplicación web Yahoo Mail.
Pero como he dicho, 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, os recomiendo el artículo “La diagramació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.
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.
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.
Os recomiendo la lectura de mi artículo “Arquitectura de 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:
1º.- 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.
2º.- 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.
3º.- 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.
Os recomiendo mi artículo “Wireframes”, donde se incluyen referencias de interés, entre las que os recomiendo el artículo ”Prototipado” de la Fundación Sidar y el blog “Wireframes” donde encontraréis ejemplos, plantillas, herramientas y otros recursos.
También puede seros útil el “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.
https://www.slideshare.net/nickf/wireframes-for-the-wicked
https://www.slideshare.net/hiteshmehta/importance-of-wireframe-in-web-design
Para terminar me gustaría daros cinco consejos básicos para realizar un buen prototipo, y que se resumen en:
1º.- Sencillez y claridad.
2º.- Hazlo en blanco y negro.
3º.- Representa los tamaños y proporciones de los bloques de contenido.
4º.- Ten en cuenta las pautas de usabilidad y accesibilidad.
5º.- Diseña para tus usuarios. IMPORTANTE.
En resumen, en este artículo 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.
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.
Fuente: https://www.youtube.com/watch?v=51qwXIQlTg4
Blog de Olga Carreras
http://google.es/activate
ACTIVIDAD 4 - Herramientas de Prototipado
"En esta actividad debes evaluar el funcionamiento de varias herramientas de dibujado de prototipos y debes seleccionar la que creas que ofrece las mejores características. Publica en el foro los resultados de tu investigación, indica cuál es la mejor herramienta de dibujado según tu opinión."
La arquitectura de la información es todo un mundo y desde mi punto de vista este capítulo debería abordarse en varios capítulos. Creo que es muy denso, y a mí personalmente me ha llevado muchas horas de investigación y actualización, debido al desfase temporal de la realización del curso hasta la fecha (Mayo 2018)evidentemente la tecnología ha evolucionado y han aparecido nuevas aplicaciones que facilitan enormemente tanto la diagramación (blueprints) como la maquetación, wireframes y mockups, estos últimos con herramientas muy potentes, que incluso eliminan el proceso de diseño en Photoshop o Gimp, ya que exportan el diseño directamente a HTML 5.
Conceptos como arquitectura de la información, que según Jesse James Garrett, fundamental para 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, son tareas que requieren un estudio mucho más detallado y en profundidad.
Centrándome en la propuesta del ejercicio, existen una innumerable cantidad de herramientas, imposible de evaluar todos, para todos los gustos, que satisfarán las necesidades de cada usuario.
El resultado de mi investigación son las herramientas y artículos siguientes:
Interesante articulo sobre como planificar un pequeño sitio web en pocos pasos:
https://www.sitepoint.com/wire-frame-your-site/
Recursos de diagramación para el diseñador web:
http://desarrolloparaweb.blogspot.com.es/2010/04/recursos-de-diagramacion-para-el.html
http://pencil.evolus.vn/ Sencilla aplicación para escritorio disponible para Windows, Mac y Linux. Permite diseñar rápida y fácilmente documentos de propuesta para clientes; todo un website en un mismo archivo exportable a PNG, html o PDF, principalmente.
Características de pencil project:
Diseño de plantillas y creación de prototipos.
Documento de múltiples páginas, todo tu website en un solo archivo.
Vínculos y enlaces internos entre tus páginas.
Edición de texto enriquecido.
Instalación de plantillas definidas por el usuario.
Operaciones estándar de dibujo: alineación, z-orden, escalado, rotación, dimensiones, etc.
Acciones para objetos (random de textos, por ejemplo)
La exportación a HTML, PNG, documento de Openoffice.org, documento de Word y PDF.
Aplicaciones para la diagramación:
Dia alternativa Open Source a Visio. https://wiki.gnome.org/Apps/Dia
https://www.smartdraw.com/ (online)
Microsoft Visio
Mindmanager https://www.mindjet.com/ (online)
Freemind http://freemind.sourceforge.net/wiki/index.php/Main_Page
OmniGraffle (OSX) https://www.omnigroup.com/ Apps para Mac, iPad, and iPhone.
0 comentarios:
Publicar un comentario