Anna Ripoll, Tona Monjo, Cristina Fàbregas y Javier Aurea han participado en la renovación de Mosaic, cada uno de ellos trabajando aspectos diferentes. Anna Ripoll se ha encargado de la arquitectura de la información; Tona Monjo y Cristina Fábregas del diseño gráfico; y Javier Aurea del desarrollo web.
Desde el punto de vista de la arquitectura de la información, ¿qué se ha buscado mejorar en la nueva versión?
Anna Ripoll: Al inicio del proyecto de rediseño de Mosaic nos marcamos como objetivo que el nuevo Mosaic fuera mucho más atractivo y usable. Se trataba de conseguir una revista digital que invitara al lector a navegar por sus contenidos, a encontrar fácilmente la información que necesitaba (en el caso que estuviera buscando un tema concreto) o bien ayudarle a descubrir nuevos contenidos de una forma fluida, simple y agradable.
Partiendo de estas premisas y teniendo en cuenta que Mosaic es una revista compleja y con contenidos muy técnicos, la tarea de definición de la arquitectura de la información pasaba a ser un eje básico de todo el proyecto.
Empecé mi trabajo haciendo un pequeño estudio de benchmarking centrándome en las buenas prácticas de otras revistas del sector, pero pronto me di cuenta que la especificidad de Mosaic hacía difícil la comparación y adaptación de las buenas prácticas encontradas. A pesar de todo, las conclusiones que saqué de este breve ejercicio, juntamente con los resultados del análisis heurístico que hice con la colaboración de los responsables de Mosaic y de personas representantes del público objetivo, me ayudaron a fijar las bases y a listar todos los aspectos que debía tener en cuenta a la hora de empezar a trabajar en la arquitectura de la información:
- Facilitar el acceso a los contenidos: incorporando una navegación temática; etiquetando los contenidos; mejorando el buscador, etc.
- Hacer evidente el dinamismo de la información: En este sentido se añadió una fecha al lado de cada contenido y se introdujo el concepto de “En este número” para destacar los contenidos más recientes y ayudar a transmitir la idea de renovación periódica de los contenidos.
- Incorporar nuevas funcionalidades y promocionar la interacción del usuario: enviar comentarios, compartir, RSS.
- Plantear unas pantallas más visuales: usando imágenes y recursos gráficos para aligerar el peso de la página y evitar pantallas demasiado cargadas de contenidos.
Una vez definidas estas bases, profundicé en la definición de la audiencia y en sus necesidades y empecé a trabajar en la arquitectura de la información definiendo el árbol de contenidos y los wireframes de cada una de las pantallas.
¿Qué criterios se han seguido para establecer la organización de los contenidos?
Anna Ripoll: La manera de organizar los contenidos fue un elemento clave que generó más de una reflexión y debate entre el equipo. Finalmente se eligió la opción más continuista de conservar un menú de navegación basado en las diferentes tipologías/formatos de los contenidos (artículos, entrevistas, etc.), complementado por una navegación temática representada en la home por una nube de tags (“De qué hablamos”) y etiquetando cada uno de los contenidos para que el usuario encontrar información relacionada y/o complementaria con lo que acaba de leer.
¿Cómo se resolvió la definición de la home y la jerarquización de contenidos?
Anna Ripoll: La home es una de las páginas más importantes de una web, pero no es la única. En el caso de Mosaic, la tarea de jerarquización y ubicación de los contenidos de la home debía responder a algunas decisiones que se habían tomado previamente:
- Buscar un mecanismo para que el equipo de Mosaic pudiera hacer su labor editorial mediante un apartado destacado: “Esta semana destacamos”.
- Seguir dando visibilidad a la información de actualidad: “Noticias” y “Agenda”.
- Incorporar el concepto de “En este número” para facilitar el acceso a los contenidos más recientes.
- Eliminar la referencia directa al “Graduado Multimedia” que hasta este momento siempre había estado presente en la home de Mosaic.
Mosaic también pretendía crear una nueva imagen, ¿cuál ha sido su proceso de creación?
Tona Monjo/Cristina Fàbregas: Antes de empezar a desarrollar la línea gráfica hicimos un breve proceso de benchmarking en el que analizamos algunos sites y e-magazines con temáticas y targets afines. Detectamos dos tendencias diferenciadas en cuanto a estética: una formal y neutra en el caso de contenidos de cariz técnico y otra más original y llamativa en el ámbito del diseño y la comunicación.
En el caso de Mosaic los contenidos que se manejan y el target son diversos: el multimedia es un campo amplio que está en contacto con muchos otros, del mismo modo nuestro target proviene de ámbitos distintos que convergen en el multimedia. Para llegar a todos ellos a través de Mosaic el diseño debía ser apropiado para una tipología amplia de públicos.
Otra cuestión que incidió en el diseño fue el carácter divulgativo de la publicación. El diseño debía ser atractivo pero el foco de atención debía recaer en el contenido. También el tratamiento del texto debía favorecer la lectura, dada la extensión de algunos textos.
Teniendo todo esto en cuenta se empezó a trabajar en el rediseño de Mosaic, tomando como base el site anterior y la nueva estructura.
¿En algún momento surgió debate entre continuar o romper con la imagen anterior?
Tona Monjo/Cristina Fàbregas: Se realizaron dos propuestas distintas, una continuista y otra con una estética más neutra y formal, más en la línea de los e-magazines estudiados en el benchmarking. De buen principio apostamos por la primera opción, que era una evolución de la versión anterior. En esta explotábamos aún más la imagen de marca: se diseñó partiendo de la estética del logotipo y del concepto de Mosaic (mosaico).
En los procesos de creación web suele aparecer momento de tensión entre el lenguaje visual y la programación. ¿Hay algún ejemplo ilustrativo?
Tona Monjo/Cristina Fàbregas: Los bordes redondeados de los bloques, el uso de degradados, etc., complicaban la implementación del diseño. Éramos conscientes de esta complejidad aunque intentamos en todo momento que la propuesta fuera realizable a nivel de maquetación y programación. En este sentido, tuvimos que cambiar el diseño de la primera versión, dónde los laterales de los bloques de contenido eran ligeramente curvilíneos y tuvimos que hacerlos rectos para que los bloques pudieran crecer verticalmente.
¿Qué idea hay detrás de la interfaz en relación al color, tipografía y distribución visual de espacios?
Tona Monjo/Cristina Fàbregas: La paleta de colores se escogió en función de los cuadros del logotipo. Se había definido previamente en los wireframes que cada tipología de contenido debía ir asociada a un icono cuando se listaran en la portada o en los destacados laterales. Finalmente se optó por utilizar colores como iconos. Puesto que los tipos de contenido coincidían con las secciones del site, se aprovechó este mismo código de colores los fondos y títulos de las secciones. Así, se mantenía el recurso de diferenciar las secciones por colores que ya se utilizó en la versión anterior de Mosaic, muy útil para situarse y hacer la navegación menos monótona.
Para ordenar visualmente los elementos en el espacio se optó por utilizar pastillas blancas, que permitían diferenciar claramente los bloques de contenido y separarlos del fondo de color. Para estas pastillas se utilizó una estética acorde con las formas redondeadas y orgánicas del logotipo, a la vez que se extendía el concepto de mosaico al diseño.
En cuanto a los textos, se escogió la fuente de sistema Arial en lugar de la Helvética del logotipo por razones de accesibilidad y usabilidad. Además se trata de una tipografía de palo seco con una correcta legibilidad, algo que debíamos tener muy en cuenta. También se optó por un cuerpo de letra mediano para facilitar la lectura, y con el objetivo de enfatizar la jerarquía de los contenidos textuales se utilizaron colores y distintos cuerpos de letra, especialmente para destacar titulares y hipervínculos.
Partimos de la estructura como esqueleto sobre el que realizar el diseño, y nos ajustamos a ella. Pudimos aprovechar el hecho que las distintas tipologías de contenido coincidían con los apartados del site, para asignar un color a cada sección y usar el mismo código de colores para los iconos de la home.
Mosaic ha pasado a estar en un gestor de contenidos como WordPress. ¿Cuáles han sido las mayores dificultades que se han tenido que resolver al adaptar WordPress a las necesidades de Mosaic?
Javier Aurea: Una de las mayores dificultades ha sido llevar a cabo la maquetación XHTML/CSS de un diseño un poco complejo, debido principalmente a las numerosas formas curvadas, múltiples colores de fondo y otros recursos gráficos empleados. A partir de aquí la dificultad radicaba en encontrar un alto grado de compatibilidad entre navegadores.
Otra dificultad ha sido la planteada por la escalabilidad. He optado por usar la versión mejorada del conocido “porcentaje mágico” y así establecer el tamaño de fuente en unidades relativas, con ello busco que el texto sea relativamente flexible y muy parecido al planteado en el diseño gráfico inicial.
Me ha parecido también algo complicado el empleo de unidades no fijas para que tanto el layout como los múltiples contenedores internos fuesen relativamente escalables, teniendo en cuenta las imposiciones dadas por el diseño gráfico, su compatibilidad entre navegadores y el no excedernos en el número de imágenes para la interfaz.
Un claro ejemplo lo tenemos con el menú de navegación, sus secciones y sus formas redondeadas. Todo ello lo hay que simular a través de imágenes, pero esto presenta problemas de escalabilidad puesto que no podemos combinar algo flexible como el texto con imágenes (de dimensiones fijas). Para conseguirlo he descompuesto las zonas clave de las imágenes implicadas y he usado técnicas de posicionamiento en CSS.
Todas las imágenes del interfaz de Mosaic son en formato PNG, aquellas que corresponden con las curvaturas de contenedores llevan transparencia para que se fusionen correctamente con el fondo, el cual puede variar de color en función de la categoría donde nos encontramos.
Los ficheros PNG con factor de transparencia presentan problemas de compatibilidad con algunas versiones de Internet Explorer. Para solucionarlo existen varias técnicas, en este caso me he decantado por el uso del filtro Directx AlphaImageLoader.
Otro problema fue que este filtro presentaba un conflicto con los enlaces que se encontraban en el interior de un contenedor bajo su influencia, para evitarlo he usado un posicionamiento relativo y la propiedad z-index de dichos enlaces.
Respecto a la programación del theme en WordPress (PHP/MySQL), de entre todas las funciones personalizadas hubo alguna que me parecio más compleja, como establecer y gestionar los datos necesarios para un número magazine o recoger los ficheros adjuntos en base a unos criterios y tipos MIME.
¿Cómo se ha resuelto el tema de los estándares?
Javier Aurea: El desarrollo lo he afrontado en XHTML (eXtensible Hypertext Markup Language) en su versión estricta, un cambio respecto a la versión transicional anterior. He pretendido que el sitio web se adapte mejor al usuario, que mejore la compatibilidad y que exista una separación más clara entre estructura, estilo y comportamiento.
- Use UTF como sistema de codificación de caracteres.
- Evite el uso de Javascript y CSS en linea o en para mejorar la abstracción (estilo CSS – estructura XHTML – comportamiento DOM).
- Busque en todo momento la semántica del marcado.
- He optimizado las reglas y CSS.
- Existe también una versión CSS destinada a la impresión.
¿Y la accesibilidad?
Javier Aurea: La accesibilidad no es un valor booleano (accesible o no accesible), sino que me parece un grado (más o menos accesible). En este sentido he intentado mejorar la accesibilidad de Mosaic respecto a su anterior versión.
- Un mayor grado de accesibilidad conlleva también una mejora en la usabilidad de Mosaic.
- La nueva versión de Mosaic al ser más accesible se aumenta la escalabilidad, puesto que todo deriva en un desarrollo más simple, estándar y flexible.
- En accesibilidad me gusta pensar que “el contenido es el rey”, esto conlleva que los buscadores indexan mejor y más rápido los sitios web accesibles.
- He revisado las directrices WCAG para comprobar la accesibilidad general. También se ha probado el sitio web bajo JAWS.
- Se han incluido algunos roles (landmarks) de WAI-ARIA. Más información en: http://www.nosolousabilidad.com/articulos/wai_aria.htm
Anna Ripoll es consultora de usabilidad y arquitectura de la información. En el 2007 fundó la empresa Intuitiva (www.intuitiva.com) especializada en ayudar a empresas y a organizaciones a pensar y diseñar páginas web y aplicaciones sencillas, intuitivas y usables. Ha hecho proyectos para diferentes instituciones públicas y empresas privadas como el Ayuntamiento de Barcelona, la Generalitat de Catalunya, IESE Business School, Gas Natural, Banco de España, Enciclopèdia Catalana, Universitat Oberta de Catalunya, etc.
Cita recomendada: GIMÉNEZ, Ferran y GUERRERO, David. Rediseño de Mosaic. Mosaic [en línea], noviembre 2009, no. 74. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n74.0917.