Ciencia, Divulgación y Belleza: Diseño de la Interfaz y Arquitectura de la Información en Cibermedios

cienciaDivulgacionBelleza
El mejor periodismo científico en la Web une ciencia, divulgación y belleza

Galería ilustrada de soluciones de Arquitectura de la Información de dos de los mejores sitios dedicados al Periodismo Científico y la Difusión de la Ciencia: The Verge y Nautilus. Estamos ante periodismo de calidad. Alta cultura, pero sin elitismo y siempre con un diseño de la Interfaz elegante y funcional a la vez. Dos modelos para tomar ideas. No para copiarlos, pero si para aprender y recibir inspiración. En resumen: dos sitios con algunas de las mejores soluciones para sitios intensivos en contenidos. Y una demostración en imágenes de que Ciencia, Divulgación y Diseño van muy de la mano en la Web. A continuación, un análisis principalmente gráfico de sus soluciones respectivas.


theverge
Parte superior de la página principal de The Verge

1. The Verge

Cómo se presenta a sí misma:

The Verge was founded in 2011 in partnership with Vox Media, and covers the intersection of technology, science, art, and culture. Its mission is to offer in-depth reporting and long-form feature stories, breaking news coverage, product information, and community content in a unified and cohesive manner. The site is powered by Vox Media’s Chorus platform, a modern media stack built for web-native news in the 21st century.

1.1. Navegación Principal

theverge-Nav
The Verge Navegación

Podemos observar cómo en un espacio limitado tenemos una gran cantidad de información y de opciones, unidas de un forma muy elegante:

  • El menú constante (10 secciones principales del medio)
  • Acceso al perfil del usuario (en caso de darse de alta)
  • Noticia destacada y acceso a las publicaciones más recientes
  • Acceso a las cuentas del medio en la web social
  • Acceso al buscador

1.2. Navegación al pie

theverge-Pie
The Verge – Pie

En este caso, vemos las opciones habituales de esta clase de navegación: repetición de las principales secciones del menú principal, a modo de mapa del sitio, navegación corporativa, incluyendo la página de créditos y datos de contacto, y web social.

1.3. Enlaces directos – Vídeo

theverge-NavDir
The Verge – Navegación directa

Casi todos los cibermedios dedican la mayor parte de su página principal a incluir enlaces directos que, por su naturaleza no son estructurales, sino temporales. Denominamos así a estos enlaces porque proporcionan un acceso desde la primera página que, en algún momento futuro, en cambio, requerirán diversos clics para acceder a la noticia respectiva.

 1.4. Página de Resultados (Búsqueda)

theverge-SERP
The Verge – SERP

Vemos el término de búsqueda (moon, en este caso) como título de la página de resultados, el número total de noticias encontradas, una distribución por categorías y dos opciones de ordenación de los mismos (por fechas, por relevancia).

1.5. Titular de noticia y navegación secuencial

theverge-noticia
The Verge – Titular

Una nueva muestra de la elegancia de las soluciones de Arquitectura de la Información y de Interfaz de Usuario de The Verge: en un reducido espacio tenemos el títular, una navegación secuencial a las noticias anterior y siguiente, acceso a la sección principal (Ciencia), a la página del autor

1.6. Navegación semántica asociada a una noticia

theverge-NavSemantica
The Verge – Navegación semántica

En este caso, la opción de la revista consiste en un listado laterial de artículos relacionados.

2. Nautilus

nautilus
Vista parcial de la versión online de la revista Nautilus

Cómo se presenta a sí misma:

We are here to tell you about science and its endless connections to our lives. Each month we choose a single topic. And each Thursday we publish a new chapter on that topic online. Each issue combines the sciences, culture and philosophy into a single story told by the world’s leading thinkers and writers. We follow the story wherever it leads us. Read our essays, investigative reports, and blogs. Fiction, too. Take in our games, videos, and graphic stories. Stop in for a minute, or an hour. Nautilus lets science spill over its usual borders. We are science, connected.

 

2.1. Navegación principal

nautilus-Nav
Nautilus – Navegación principal

La navegación principal de Nautilus es enormemente sobria. No incluye secciones del sitio y por tanto es, en realidad, una clase de navegación utilitaria, una opción poco habitual para el menú principal.

2.2. Navegación al pie

nautilus-pie
Nautilus – Pie

La navegación al pie de Nautilus no incluye tampoco las secciones principales del sitio, sino el acceso a la navegación corporativa. Tampoco incluye acceso a las cuentas de la web social del medio.

2.3. Enlaces directos

nautilus-directos
Nautilus – Enlaces directos

En el caso de Nautilus, los accesos directos actúan como sumarios del número corriente de la publicación.  

2.4. Página de resultados (Búsqueda)

nautilus-serp
Nautilus – SERP

La página de resultados no incluye el término de búsqueda ni opciones de ordenación. Incluye en cambio opciones de paginación al pie.

2.5. Titular de noticia e interacción social

nautilus-Titular
Nautilus – Titular

La solución en este caso, mantiene la sobriedad característica de la revista, sin perjuicio de incluir accesos a la sección principal (Ideas), categoría (Philosophy) y una navegación utilitaria que entre otras cosas incluye opciones de la web social.

2.6. Navegación local (un número de la revista)

nautilus-NavLocal
Nautilus – Navegación local

La navegación local se refiere en este caso a las opciones correspodientes a un  número determinado de la publicación, dando acceso a los artículos que lo componen.

3. Conclusiones

El diseño de la interfaz y de la experiencia de usuario en la navegación de sitios intensivos en contenidos, como son los medios de comunicación, ha adquirido un excelente nivel. En este caso, hemos presentado una galería visual de soluciones a problemas comunes en cibermedios aprovechando la gran calidad funcional y estética de dos de los mejores medios actuales dedicados al periodismo científico, en el caso de Nautilus, o que contemplan la ciencia como una de sus secciones principales, como es el caso de The Verge. El análisis comparado, aunque sea de una forma tan ligera como el que hemos aplicado aquí, y con una mínima teoría (nos hemos basado en las categorías de Navegación Web de James Kalbach, ver referencia), ya es capaz de rendir resultados. Vemos ejemplos de soluciones a patterns de navegación y vemos, cómo, por ejemplo, uno de los medios (Nautilus), pese a la calidad general de su diseño no está algunas opciones muy útiles; como la navegación semántica o una navegación principal con acceso a las secciones temáticas principales. Es la razón por la cual las capturas 1.6 y 2.6 no se corresponden exactamente. Nautilus no aplica esa capa de navegación a sus noticias. Tampoco utiliza a fondo las posibilidades de la navegación principal (2.1). En nuestra opinión se trata de un error y, en caso de estar en lo cierto, indica que a los responsables de Nautilus les vendría bien practicar esta clase de análisis de benchmarking que nuestro grupo defiende. Naturalmente, esto no tiene nada que ver, afortunadamente, con la calidad periodística del medio, pero sin duda puede hacerles perder visibilidad y, por tanto, tráfico, que el bien más preciado para un cibermedio.

4. Para saber más

  • Para las categorías de análisis, nos hemos basado (parcialmente) en la obra de James Kalbach. Designing web navigation. O’Reily, 2007. Enlace en Amazon.
  • Hemos usado también ideas de la obra seminal sobre Arquitectura de la Información de Mario Pérez-Montoro. Arquitectura de la información en entornos web. Trea, 2010. Enlace del libro en la editorial.
  • Diagrama interactivo sobre Sistemas de Navegación Web.
  • Diagrama interactivo sobre Arquitectura de la Información.
  • Página (de este mismo sitio) sobre métodos y sistemas de análisis de sitios web, Útiles para llevar a cabo estudios de benchmarking completos y de mayor alcance del que hemos mostrado aquí.
  • Más Diagramas interactivos sobre temas relacionados (página de este mismo sitio)