Asignatura: Arquitectura de la Información
Consultor y profesor: Anna Ripoll Bargunyó / Ferran Giménez Prado
Introducción
La Arquitectura de la Información (AI) es una disciplina que aúna ciencia, arte y práctica, relativamente joven, intangible, y con un elevado grado de complejidad, tanto para desarrollarla como para explicarla.
Quizá por ello resulte fundamental en esta asignatura el seguimiento de la evaluación continua, que nos lleva por una serie de prácticas encaminadas a realizar una propuesta de AI de un sitio web real, desde el análisis de la AI del sitio original, evaluando sus errores y haciendo un benchmarking de su competencia, al desarrollo de un nuevo árbol de contenidos y un wireframe completo de nuestra propuesta de solución.
Etapas y retos
El primer reto al que nos enfrentamos es la elección del sitio real sobre el que se va a trabajar de los 3 posibles. Conviene dedicar cierto esfuerzo a esta elección, dado que definirá el resto de trabajo a realizar. En mi caso, seleccioné el sitio de Bulevard Rosa como base de mi propuesta por las siguientes razones:
– El sitio presentaba ciertos errores graves sobre los que podía aportar una solución efectiva en base a experiencia previa.
– El sitio tenía potencialidad en ciertos aspectos que quería reforzar.
– El tamaño del sitio era reducido, por lo que podía centrarme en menos aspectos pero trabajarlos más a fondo.
Con esta decisión tomada, el primer paso era evaluar la AI del sitio de Bulevard Rosa, así como sus posibles errores. Lo más grave en este caso era el desarrollo del sitio íntegramente en Flash (i), además de por los problemas de accesibilidad y posicionamiento SEO inherentes a esta tecnología, por su incompatibilidad con multitud de dispositivos móviles (en especial iPhone y iPad). Esto tenía también como consecuencia otros errores que, aunque graves, eran fácilmente solventables. Otra carencia a solventar era la ausencia de un mecanismo de búsqueda. Como aspecto positivo, destacaba el árbol de contenidos original del sitio, simple , claro y funcional, que decidió mantenerse de manera íntegra.
En la comparativa con la competencia surgieron además posibles mejoras a incorporar en el sitio: integración con redes sociales, mejorar el directorio de tiendas, adaptación a dispositivos móviles,…
Poniendo todo en relación, aposté por hacer una propuesta basada en:
– Reforzar lo bueno del sitio original, manteniendo el árbol de contenidos, e incorporando una propuesta de mejora sobre el directorio de tiendas actual y en base a lo observado en la competencia.
– Solventar el principal problema del desarrollo del sitio en Flash, planteando la adaptación del sitio a tecnologías web universalmente accesibles[ii], lo que implicaba la solución de multitud de errores aparecidos en el análisis llevado a cabo.
– Adaptar el sitio para dispositivos móviles, entendiendo que el wireframe actual no funcionaba bien en este entorno.
– Por último, sobre el directorio de tiendas entendía que tenía sentido incorporar un mecanismo de búsqueda que ayudase al usuario siendo lo menos intrusivo posible.
Así, el árbol de contenidos original se mantuvo como el propuesto a lo largo de las diferentes propuestas.
El énfasis del trabajo se dedicó al desarrollo del wireframe de Bulevard Rosa, teniendo el horizonte de una implementación en tecnologías web universales, y contando como premisas la sencillez, la claridad y la escalabilidad.
Era también importante mostrar en el wireframe propuesto cómo serían las nuevas interacciones que sustituirían a las originales en Flash. Para ello, hice uso del “Wireframe Toolkit for Keynote”[iii], disponiendo cada fase de la interacción en una diapositiva, y haciendo los comentarios aclaratorios que fuesen necesarios.
De forma análoga, se planteó un wireframe para la versión para móvil del sitio, tomando como referencia el iPhone y su estética. En el wireframe se incluyó todos los modelos de las pantallas del sitio propuesto, tanto en versión escritorio como en versión móvil (pantalla en orientación vertical), así como el desarrollo de las interacciones con todas las fases como se veía en las imágenes anteriores. Un ejemplo de interacción en el sitio para móvil:
Conclusiones
Conectando los puntos hacia atrás[iv], se revela importante el hecho de dedicar a cada fase del proceso el esfuerzo necesario para esa fase en concreto, sin perder la perspectiva, pero con énfasis en no sobrepasar los objetivos de la fase del proyecto en la que estemos implicados. Como dicta el sentido común, primero andar para después correr.
Cuando a posteriori he revisado el trabajo, por ejemplo para articular esta experiencia, con ocasión para detenerme y reflexionar, he podido apreciar el esfuerzo dedicado a cada parte de la propuesta desarrollada, como cada paso siguiente era una consecuencia lógica del anterior.
También ha sido de gran importancia contar con las herramientas adecuadas: además de iWork [v] (Pages y Keynote fundamentalmente), he usado MindNode[vi] y el citado Wireframe Toolkit for Keynote, así como diversas utilidades de Mac OS (como Vista Previa o las herramientas de captura de pantalla) y mínimamente Adobe Photoshop.
Referencias y Derechos de Autor
Las imágenes usadas en este documento corresponden a capturas de pantalla realizadas en mi ordenador personal. Los logotipos y marcas comerciales que puedan aparecer corresponden a sus respectivos propietarios, y se usan en este documento en virtud del derecho de cita.
El árbol de contenidos de Bulevard Rosa es de elaboración propia.
[i] Flash es una tecnología de Adobe. Más información en la página web de Adobe[ii] Sin llegar a concretar, la propuesta recogía como tecnologías web universales XHTML + CSS2, un mix habitual en la mayoría de webs actuales.
[iii] Wireframe Toolkit for Keynote es una herramienta de desarrollo rápido de wireframes desarrollada por Travis Isaacs
[iv] Connecting the dots (“conectando los puntos”) es el lema de una conferencia impartida por Steve Jobs, CEO de Apple y Pixar, en la universidad de Stanford en Junio de 2005[v] iWork es la suite ofimática de Apple. Pages es el procesador de textos, mientras que Keynote es el programa para elaborar presentaciones.
[v1] MindNode es una herramienta gratuita de mapeo mental para Mac OS.
Cita recomendada: SIMÓN LÁZARO, Luis Joaquín. Más allá de la web. Rediseño de la Arquitectura de la Información de un sitio para web y para móvil. Mosaic [en línea], octubre 2011, no. 90. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n90.1142.