Diseño de la información centrada en el usuario. Caso práctico

La arquitectura de la información es el sistema de organización, estructuración y ordenación de los contenidos, para que los usuarios que interactúan con un producto físico o en este caso digital – un periódico digital-  puedan encontrar la información de la manera más sencilla e intuitiva posible.

La arquitectura de la información mejorará directamente la experiencia del usuario, ya que al encontrar de forma fácil lo que busca, reduciremos el nivel y tiempo de incertidumbre. La arquitectura de la información no solo contempla el orden de las cosas, sino que también conceptos como la navegación y refactorización. La AI de un sitio debe ser como un mapa de carreteras y responder a preguntas como;

  • ¿En qué punto de la web nos encontramos?
  • ¿Cómo hemos llegado?
  • ¿Cómo regresamos?

La arquitectura se considera el esqueleto del sitio web y se define en las primeras etapas del ciclo del diseño. Según el informe APEI ver informe  sobre la usabilidad, para referirse al grado en que una AI satisface a sus usuarios lo denomina  como ‘findability’ o ‘encontrabilidad’.

Un ejemplo que nos facilita Google Adwords ver tip sobre los conceptos básicos sobre la experiencia de las páginas de destino, es facilitar las navegación en los distintos dispositivos Organice y diseñe bien su página, para que los usuarios no tengan que buscar la información que necesitan.’

A continuación se hace un estudio del periódico El Mundo ir al periódico, dónde se analizará su arquitectura de la información dividiéndolos por componentes como el menú, cabecera, pie, áreas dedicadas a publicidad, redes sociales, breadcrumbs etc..

 

Análisis del periódico digital El Mundo.

Análisi arquitectura de información del periódico el mundo

Fig. 1 Fold de un monitor 1280 x 600 con aviso de cookies.

 

>>Cantidad de información que vemos cuando aterrizamos en www.elmundo.es

Dependiendo del dispositivo en el que estemos navegando veremos una cantidad de información u otra. Recordemos que el consumo de la información puede realizarse en distintos dispositivos y dependiendo del espacio que se dispone para la lectura la arquitectura puede cambiar.

Por ejemplo, en la figura 1 se muesta la  captura de pantalla de un monitor de 1280×600 px, en esta area no se puede leer un gran volumen de información ya que parte de ella está dedicada a la publicida, al aviso de que el sitio web esta utilizando cookies y un resumen en el pie de la última noticia.

>> La ventana de aviso del uso de cookies, no dispone de un botón de cerrar, en muchas ocasiones en un intento de cerrar esta se puede dar al enlace informativo y sacarnos de la navegación. Si se hace uso del sistema intuitivo y no del sistema racional lo más probable es que se pulse en el enlace ya que en muchas páginas este aviso se cierra en la parte derecha del componente.

En el caso de que se pulsara este enlace, la información se carga en la misma página y no hay ninguna ayuda para poder regresar de dónde venimos.

 

Cabecera, ‘Header’.

menu-macro-arquitectura-de-informacion

Fig. 2 Cabecera

 

En un primer nivel  de izquierda a derecha encontramos;

  1. La fecha. Elemento importante cuando se trata de contenido condicionado por el tiempo y el ámbito.
  2. El logotipo de la marca del periódico digital El Mundo. Situado en la parte superior central.
  3. Enlaces de navegación superior.
  • España
  • América
  • Suscríbete
  • Iniciar sesión.

Todos ellos contienen microinteracciones, como son los efectos de ‘on mouse hover y ‘on-press’, ayudando a una navegación más comprensible para el usuario. El primer nivel de navegación hace una organización geográfica, dividiendo todo el árbol de contenidos que cuelga de él en dos grandes grupos, España y América.

A continuación, aparecen los botones de suscribirse  e iniciar sesión.

En un segundo nivel.

  • Menú de navegación secundario. Lo menús cumplen el principio de organización perceptual por proximidad, siendo agrupados como una misma cosa o conjunto.
  • Buscador

>> Cada uno de los apartados de navegación de segundo nivel muestran un desplegable al pasar el puntero del ratón por encima ‘on mouse hover’, menos en el último apartado, ‘Más’ dónde aparece una flecha hacia abajo, al pulsar esta aparece un submenú macro.

En última estancia el buscador,  cuyo ‘place holder’ informa de la acción que debe realizar el usuario para buscar. Para realizar la búsqueda hay que presionar la lupa de búsqueda o pulsar ‘enter’. En mi opinión este buscador podría mejorar facilitando acciones de borrar.

El buscador es un elemento sine qua non dentro de la arquitectura, ya que ayuda al usuario a buscar lo que no encuentra y nos ayuda a saber a los miembros del equipo DCU qué es lo que está buscando el usuario y por qué lo está buscando.

  • Puede que el usuario no encuentre un apartado específico
  • Nos ayuda a saber si un contenido no existe enfocarlo a la demanda de los usuarios.

 

Contenido

Bajo la cabecera, en unos de los espacios de más visibilidad dentro de la página, se reserva un espacio para la publicidad.

La maquetación de este periódico se centra en el uso de 2 columnas siendo la primera mayor que la segunda y tres o cuatro en los casos que la información se quiera mostrar de una forma más visual. La primera noticia ocupa gran parte de espacio de la página, como característica principal se trata de un video.

Para tratar la arquitectura de información del contenido se hace valer de los típicos elementos:

  • Jerarquía de tamaños de Proporcionando simplicidad visual, ya que se enfatizan aquellos elementos más importantes del sitio.
  • Jerarquía de colores para reforzar la importancia del contenido. Además estos se respetan en todas las interacciones y microinteracciones cumpliendo con el principio de similitud de la organización perceptual.
  • Espacios en blanco para separar la información que fortalecen las relaciones visuales lógicas y facilitan de este modo al usuario relacionar y diferenciar elementos automáticamente. El correcto uso de la ley de la Gestalt, hace que el diseño de un aspecto visual organizado, claro e intuitivo, repercutiendo favorablemente en la usabilidad.
  • Elementos gráficos como líneas para separar la información.
  • Elementos iconográficos para informar que existe más información. Por ejemplo en el pie de cada una de las noticias aparece un icono de un bocadillo y un número refiriéndose al número de comentarios que se han realizado en ese artículo.
  • Uso de ‘labels’ o ‘etiquetas’ para reforzar visualmente el contenido.
  • Enumeraciones, para dar prioridades de los elementos.

>> Aunque existe mucha información, no llega a saturar al usuario ya que el diseño hace uso de agrupaciones y le da énfasis a la información más importante

pie del periódico El mundoFig. 3 Pie de página

El pie de la página muestra distintos bloques informativos representados con diferente estilos gráficos para ser diferenciados y agrupados unos de otros.

  • Box de contenidos de otras webs de la unidad editorial. Te sugiere información complementaria de otros sitios para que el usuario pueda seguir navegando. Esto puede ser uno de los ejemplos de innovaciones de consumo digital, uno de los pioneros en sugerencias de compras fue Amazon incorporando ‘upseling’ y ‘crosseling’ al e-commerce.
  • Logo del periódico. Reforzando la imagen de marca.
  • Términos y condiciones, política de privacidad, certificado OJD (dando confianza al contenido a consumir), contacto, publicidad y venta de contenidos.
  • Cierra con la iconografía de las redes sociales y de las tecnologías empleadas para la creación del sitio.

>>No existe un site map, que haga un esquema de la estructura de la web. Este elemento ayuda hacer una visión global de la web al usuario, así como mejorar su accesibilidad.

 

Área de redes sociales.

En última estancia se encuentran las redes sociales.

  • Se ha tenido en cuenta los elementos ‘alt’ y ‘title’ para mejorar el posicionamiento SEO y la accesibilidad web.
  • Uso de iconos. El uso de estos hace reconocible de un golpe de vista de qué se trata, ayuda al usuario a focalizar la atención. Hacer reconocible aquello que es importante es uno de los principios de la simplicidad visual.

 

Segunda página.

segunda-pagina

Fig. 4 Segunda página

Al entrar en un segundo nivel de navegación o segunda página, encontramos que emplea el componente ‘migas de pan’ o ‘breadcrumbs’ para facilitar la navegación del usuario.

Este componente es muy útil para informar al usuarios de:

  • Dónde se encuentra.
  • Sitios por los que ha pasado.
  • Libertad para poder acceder a cualquier punto de la navegación.

 

Conclusiones

>> Los elementos que podrían mejorar la experiencia de uso mediante la AI, desde mi punto de vista serían;

  • La mejora del buscador a nivel de interacción
  • La implementación de un ‘site map’.
  • Botón de cerrar en el aviso de cookies.

 

No Comments

Leave a Comment