2. Reto. El diseño de interfaces web

2.4. Estructura y navegación

A la hora de estructurar la información de una interfaz, es importante que la arquitectura refleje los objetivos del producto y las necesidades del usuario. La estrategia nos indica cuáles son las necesidades del usuario y el ámbito (scope plane) indica qué información es más relevante para cubrir esas necesidades.

Existen varios tipos de arquitecturas o estructuras de información:

  • Estructuras jerárquicas: también llamadas árboles, se componen de nodos (unidades de información) asociados a nodos padres y nodos hijos, estableciendo así relaciones de dependencia.
  • Matrices: permiten una navegación estructurada de nodo a nodo en dos o más dimensiones.
  • Estructuras orgánicas: no siguen un patrón concreto. Los nodos se conectan individualmente según evolucionen sus relaciones, y no contienen secciones diferenciadas.
  • Estructuras secuenciales: las más comunes, a menudo las encontramos en soportes fuera de línea, como por ejemplo un libro de texto.
Figura 6. Estructura de datos
Fuente: https://www.oscarblancarteblog.com/2014/08/22/estructura-de-datos-arboles/.

Para representar la arquitectura de la información podemos utilizar los diagramas (ved figura 7). Este tipo de representación visual también es especialmente útil para comunicar las ramificaciones, secciones e interrelaciones entre los componentes de la interfaz. No es necesario que represente cada enlace o cada conexión entre secciones, sino que debe comunicar un patrón estructural que pueda ser aplicable a la totalidad del contenido previsto.

Figura 7. Diagrama de la estructura jerárquica de un sitio web
Fuente: https://wiseseo.guru.

A este nivel es determinante que la organización de la información esté contextualizada y utilice la metáfora de forma efectiva, facilitando una navegación intuitiva y libre de indicaciones explícitas. El diseño de navegación tiene tres objetivos:

  1. Permitir al usuario trasladarse de un punto a otro punto de la página o aplicación (wayfinding).
  2. Comunicar la relación entre elementos o unidades de información.
  3. Comunicar la relación entre los contenidos y el espacio de la interfaz (como la página) en la que se encuentra el usuario.

La clave de un buen diseño de interfaz de navegación es seleccionar los elementos de interacción más adecuados para cada caso. Algunos de los elementos de control convencionales son:

  • Checkboxes: para la selección de opciones múltiples.
  • Botones radio: para la selección de opciones exclusivas.
  • Campos de texto: para la introducción de texto.
  • Menús desplegables: una versión compacta de los botones radio.
  • Listado de cajas: una versión compacta de los checkboxes.
  • Botones de acción: suelen usarse para aplicar un cambio de opciones, pero pueden controlar cualquier tipo de acción.

Como comentábamos anteriormente, la mayoría de páginas web combinan diferentes estructuras de información; asimismo, también hacen uso de múltiples sistemas de navegación según el rol particular del usuario y las circunstancias. Algunos de los diseños más habituales son:

  • La navegación global: proporciona acceso al amplio barrido de todo el sitio.
  • La navegación local: proporciona a los usuarios acceso a lo que está «cerca» en la arquitectura.
  • La navegación suplementaria: proporciona accesos directos a contenido relacionado que puede no ser fácilmente accesible a través de la navegación global o local.
  • La navegación contextual (in-line): está incrustado en el contenido de la página en sí.
  • La navegación de cortesía: proporciona acceso a elementos que los usuarios no necesitan de manera regular, pero que comúnmente se proporcionan como una conveniencia.