Unidad 1.10. El prototipado en la arquitectura de la información
En esta unidad, el alumno estudiará el prototipado de la arquitectura de la información, que no es otra cosa que la representación gráfica de los diversos componentes de la estructura arquitéctonica básica, que va a ayudar a garantizar la utilidad de un sitio web.
El prototipado es un componente fundamental para el diseño y desarrollo de la futura arquitectura de la información del sitio web, que cuenta con dos funciones básicas: una representacional y otra comunicativa.
Los prototipos representan todos los aspectos básicos de los elementos arquitectónicos del sito web, como los componentes de cada uno de los sistemas que conforman la anatomía de la arquitectura del sitio, la estructura de los contenidos que conforman ese sitio y las relaciones existentes entre éstos.
Además, el prototipado cumple una función estratégica de comunicación entre el equipo de diseño y los responsables que aprueban el proyecto. Normalmente, para que un proyecto salga adelante tienen que trabajar juntos el arquitecto de la información, los diseñadores, los desarrolladores, los autores de contenido, los gestores del proyecto, etc.
Existen dos tipos de prototipado:
- Los blueprints
- Los wireframes
El blueprint es un esquema donde se representa la estructura arquitectónica del sitio web con todas sus páginas, señalando las distintas relaciones existentes entre ellas y sus contenidos. Indican los aspectos esenciales de los sistemas de organización, etiquetado y navegación. Es lo que se conoce como “mapa del sitio”.
Podemos encontrar dos tipos de blueprints:
- Los blueprints utilizados en la arquitectura general.
- Los buelprints utilizados en la arquitectura detallada.
Los wireframes son prototipos arquitectónicos de cada tipo de página que conforman un sitio web, representando sus contenidos y arquitectura, pero no sus signos gráficos. Se muestra el aspecto de una página y la forma en que se agrupan y ordenan sus componentes.
En los wireframes sólo se representan aquellos aspectos que sean relevantes desde el punto de vista arquitectónico, como la posición del sistema de navegación, los enlaces, la estructura de la página, etc., pero deja fuera aspectos visuales o de diseño, como el tipo y el tamaño de la letra, los colores, etc.
Dependiendo de la granularidad que presentan, se distinguen tres tipos:
- Los wireframes de baja fidelidad.
- Los wireframes de granularidad intermedia
- Los wireframe de alta fidelidad.
Herramientas de prototipado
Existen numerosas herramientas informáticas que nos ayudan a crear tanto los blueprints como los wireframes. Éstas pueden ser tanto herramientas de escritorio, como herramientas en línea.
Entre las herramientas de escritorio podemos encontrar:
- OmniGraffle (https://www.omnigroup.com)
- Denim (https://dub.washington.edu:2007/projects/denim)
- Conceptdraw (https://www.conceptdraw.com)
- Smartdraw (https://www.smartdraw.com)
- Pencil Project (https://www.evolus.vn/pensil)
- Axure (https://www.axure.com)
- Visio (https://office.microsoft.com/eses/visio/default.aspx)
Respecto a las herramientas en línea, podemos encontrar:
- Pidoco (https://pidoco.com/en)
- Lovely Chart (https://www.lovelycharts.com/)
- MockingBird (https://gomockingbird.com/)
- Mockflow (www.mockflow)
- iPlotz (https://iplotz.com/)
- Gliffy (https://www.gliffy.com/)
Nosotros en la unidad nos familiarizaremos con las herramientas Gliffy y MockFlow, la primera para realizar blueprints y la segunda para los wireframes.
Para más información consultar:
Bibliografía:
- Brown, D. (2007). Communicating design: developing web site documentation and planning. Berkeley: New Riders.
- Hassan, Y. (et al.) (2004). "Diseño web centrado en el usuario: usabilidad y arquitectura de la información". [En línea]. En: Hipertext.net (2). https://www.hipertext.nethttps://www.hipertext.net[Consulta: 18 febrero de 2015]]
- Houde, S. y Hill, C. (1997). “What Do Prototypes Prototype?”. EN: Helander, M.; Landauer, T. y Prabhu, P. (eds.) (1997). Handbook of HumanComputer Interaction. Elsevier Science B. V.
- Garrett, J. J. (2002). The Elements of User Experience: UserCentered Design for the Web. Indianapolis: New Riders Publishing
- Morville, P. y Rosenfeld, L. (2006). Information Architecture for the World Wide Web. 3rd Edition. Sebastopol (CA): O'Reilly Media Inc.
- PérezMontoro Gutiérrez, M. (2010a). Arquitectura de la Información en entornos web. Gijón: Trea.
- PérezMontoro Gutiérrez, Mario (2010b). "Arquitectura de la Información en entornos web". EN: El profesional de la información, v. 19, nº 4, págs. 333337. ISSN 13866710.
- PérezMontoro, Mario y Codina, Lluis (2010). "Sotfware de prototipado para la arquitectura de la información: funcionalidad y evaluación". En: El profesional de la información, v. 19, nº 4, págs. 417424.
- Rittel, H. y Webber, M. (1973). “Dilemmas in a General Theory of Planning”. EN: Policy Sciences, v. 4, nº 2, págs. 155169.
- Tohidi, M.; Buxton, W.; Baecker, R. y Sellen, A. (2006). “Getting the Right Design and the Design Right: Testing Many Is Better Than One”. EN: CHI 2006: ACM Conference on Human Factors in Computing Systems, págs. 12431252.
- Wodtke, Cristina (2002). Information Architecture: Blueprints for the Web. Boston: New Riders Publishing.