Asignatura: Arquitectura de la información
Consultor y profesor: Francesc Puig Mascaró
Introducción
La arquitectura de la información tiene como propósito estructurar, organizar y etiquetar los contenidos de un sitio Web. En este caso, debíamos elaborar una propuesta de arquitectura para de la página de Norma Editorial.
La primera fase en el diseño de una arquitectura es la de investigación. Nosotros habíamos comenzado en la (PEC2), dónde analizamos las principales deficiencias de la página y sus posibles soluciones. Además, se realizó un estudio de buenas prácticas de la competencia (benchmarking). Esta fase inicial fue de gran ayuda para la realización de la práctica final. Cuanto más tiempo dediquéis a la fase de investigación y análisis de contenido más sencillo resultará el trabajo final.
En la (PEC3) a partir de un análisis del contenido de la página de Norma Editorial. En mi caso, hice una lista con todos los contenidos que ya existían y aquellos que aunque no aparecían en la página me parecían interesantes que estuvieran. Se elabora una primera versión del árbol de contenidos donde se muestra gráficamente la estructura, organización y navegación de la página.
Para la elaboración del árbol utilicé el software on line y gratuito gliffy. Además del árbol de contenidos, realizamos un primer wireframe de una de las páginas más significativas. Para ello, utilicé el software Balsamiq Mockups muy intuitivo y con una gran cantidad de recursos.
La práctica que tratamos a continuación no es más que el desarrollo de las dos PEC anteriores.
Etapas y retos
En la práctica final debíamos desarrollar los wireframes de las páginas más significativas y rediseñar, si se producían cambios, el árbol de contenidos de la (PEC3). Para la realización de los wireframes lo primero que hice fue, sobre el papel, establecer que contenidos debían aparecer en cada página y cuales dentro de cada página eran más importantes y, por tanto, debían ocupar una posición más visible.
A continuación, muestro algunos de los wireframes más representativos con las mejoras que se introdujeron respecto a la página original.
1) Sistema de navegación:
Los siguientes wireframes muestran la propuesta de navegación del sitio Web de Norma Editorial basada en un esquema de organización por orden alfabético. Además, para situar al usuario se añadió a la navegación un sistema de breadcrums. Este esquema será similar para todas las secciones de esta página aunque con algunas diferencias en las secciones de próximamente, superventas y novedades. En la sección de próximamente y superventas, al tener menos contenido que otras las otras secciones, se ha optado por mostrar iconos en lugar de link de textos. Por último, en la sección de novedades se ha añadido un sistema de navegación por fechas para facilitar la localización del contenido.
1) Sistema de búsqueda:
El sistema de búsqueda de Norma Editorialera uno de los elementos de la arquitectura de la información con más deficiencias. Para subsanar estos errores, reduje el espacio que utilizaba en la página original y aumenté las posibilidades de filtrado mediante el uso de un menú desplegable. Además, añadí sistemas de búsqueda locales en las páginas índice de diferentes secciones. Parte de los errores de la página original eran la forma de presentar los resultados (se mostraban sin un orden aparente) y la imposibilidad de redefinir la búsqueda. En el siguiente wireframe se muestra la solución que di a estos problemas.
Otro de los problemas que presentaba el sistema de búsqueda era que si no se encontraban resultados no ofrecía ningún tipo mensaje, frustrando así al usuario que no sabía como continuar. La solución a este problema es mostrar un mensaje al usuario que indique que no se han encontrado resultados que coincidan con la búsqueda, sugerirle trucos y consejos sobre cómo mejorar la búsqueda y ofrecerle la posibilidad de redefinir su búsqueda.
3) Carrito de la compra:
Uno de los aspectos que se valoraba en la práctica era la introducción de nuevas funcionalidades, en mi caso, la posibilidad de comprar cómic desde la misma página de Norma Editorial, ya que antes no existía esta posibilidad.
Estos son los wireframes que muestran el proceso de compra en el nuevo sitio web. Los principales factores que tuve en cuenta fueron que el usuario siempre fuera consciente de en que parte del proceso se encontraba, que pudiera volver atrás en cualquier momento y que tuviera de forma clara y concisa toda la información necesaria para concluir con éxito el proceso de compra.
Para terminar realicé, con estos prototipos, diferentes pruebas de navegación con usuarios que determinaron la ineficacia de algunas etiquetas y una organización deficiente de algunos de los contenidos. Con estos datos, rediseñé el árbol de contenidos y los wireframes que afectaban estos cambios.
La versión definitiva del árbol de contenidos fue ésta:
Utilicé diferentes colores para los diferentes niveles de navegación y distintos iconos dependiendo del elemento que se tratase. Esta es la leyenda que muestra a que corresponde cada icono y color.
Conclusiones
Durante el trascurso de la asignatura ha cambiado mucho mi visión sobre la misma. En un principio, para ser sincero, pensé que la organización del contenido y el etiquetado de un sitio web eran una cuestión de sentido común. A medida que avanzaba la asignatura y me enfrentaba a las diferentes prácticas, sobretodo a las dos últimas, comencé a darme cuenta de la complejidad de la disciplina.
Teniendo en cuenta que en estas prácticas nos hemos enfrentado a una cantidad de contenido razonable, me ha sorprendido el número de veces que he tenido que rediseñar el árbol de contenido o los wireframes. En ocasiones, estos cambios se producían al mover un contenido de sitio o al profundizar más en el sistema de navegación o en el contenido.
Imagino que con la experiencia, un arquitecto de la información, es capaz de observar ciertos aspectos que yo descubría demasiado tarde, lo que me obligaba a rediseñar parte de lo que ya había hecho. Desde mi punto de vista, creo que debía haber dedicado mucho más tiempo a la fase de análisis del contenido.
Otro aspecto de la arquitectura de la información que me ha llamado la atención es la sensación de inseguridad e incertidumbre que provoca el no saber si estas tomando las decisiones correctas. Existen muchas formas de organizar el contenido y etiquetarlo pero ¿cuál es la mejor forma?. Existen ciertas normas y reglas que debes seguir, pero al final la sensación que tengo es que lo podría haber hecho de otra forma, y quizá hubiera sido mejor.
Documentación
MORVILLE, Peter y ROSENFELD, Louis (2006): Arquitectura de la información para la World Wide Web, Sebastopol (California): O’Reilly Media Inc
GIL, Eva Patricia, DE LERA TATJER, Eva y MONJO PALAU, Antonia: Usuarios y sistemas interactivos: UOC
RIPOLL, Anna: Arquitectura de la información de la v3 de Mosaic: UOC
http://www.pebbleroad.com/downloads/organizing-digital-information-for-others-v1.pdf
http://olgacarreras.blogspot.com/2007/02/wireframes.html
http://thinkvitamin.com/design/20-steps-to-better-wireframing/
http://blog.fuzzymath.com/2011/07/12/how-to-read-a-wireframe/
http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm
http://www.mordecki.com/ebusiness/aifacetada/aifacetada.shtml
http://www.princeton.edu/communications/services/docs/IAguide2.pdf
http://iainstitute.org/tools/download/blueprint.pdf
http://boxesandarrows.com/story/index/date/1
http://www.fatpurple.com/2010/03/04/web-site-wireframes-samples-examples/
Cita recomendada: DE LA CALLE MUÑOZ, Ernesto. Propuesta de arquitectura de la información de un sitio web. Mosaic [en línea], octubre 2012, no. 100. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n100.1230.