Saltar a contenido

Órbita 1: Diseñar para que funcione Introducción

3. Arquitectura de la información: ordenar para entender

Cuando una persona entra en una web o app, no espera tener que explorar a ciegas. Necesita encontrar lo que busca con rapidez y saber dónde está en todo momento. Para que esto sea posible, el contenido debe estar bien estructurado. Esa estructura lógica, jerárquica y funcional es lo que llamamos arquitectura de la información (IA).

Diseñar una interfaz no es sólo decidir cómo se ve una pantalla, sino cómo se relacionan entre sí las distintas pantallas, cómo se agrupa el contenido y qué rutas puede seguir el usuario para llegar a su objetivo.

¿Qué es exactamente la arquitectura de la información?

La arquitectura de la información es la disciplina que se encarga de organizar, etiquetar y jerarquizar los contenidos de un sistema para facilitar su uso y comprensión. Se aplica tanto a webs como a apps, e incluso a sistemas físicos como museos o supermercados.

En el diseño web, la arquitectura de la información responde a preguntas como:

  • ¿Cuántas secciones principales hay?
  • ¿Qué subsecciones dependen de cada una?
  • ¿Dónde colocamos ciertas funcionalidades o tipos de contenido?
  • ¿Qué estructura de navegación es la más clara para este producto?

Una buena arquitectura de la información no siempre se nota, pero una mala se sufre al instante: el usuario se pierde, no encuentra lo que busca o repite pasos innecesarios.

Elementos clave en la arquitectura de información

Hay muchos recursos y técnicas que se usan para representar y planificar la arquitectura de la información de un producto digital. Algunos de los más habituales son:

1. Mapa de navegación o sitemap

Es un esquema que muestra cómo se relacionan todas las pantallas o secciones. Permite ver de un vistazo la jerarquía de contenidos. En Figma o Miro, se puede representar con cajas y líneas.

2. Agrupación por categorías

El contenido debe estar organizado por bloques coherentes. Por ejemplo, en una app de viajes: “vuelos”, “hoteles”, “actividades” y “mi cuenta”. Si las categorías no están claras, el usuario se confunde.

3. Breadcrumbs o migas de pan

Permiten mostrar al usuario en qué punto exacto está dentro de la jerarquía. Por ejemplo: Inicio > Productos > Electrónica > Portátiles.

4. Menús y sistemas de navegación

La arquitectura también define cómo se accede a cada sección: ¿desde un menú lateral? ¿con iconos inferiores? ¿mediante pestañas?

Principios de Dan Brown para la Arquitectura de la Información.

El experto Dan Brown propuso siete principios que ayudan a construir una buena arquitectura de información:

  1. Objetividad: no diseñar para nosotros, sino para el usuario.
  2. Organización: los elementos deben agruparse según su lógica, no su estética.
  3. Navegabilidad: el usuario siempre debe saber dónde está y cómo volver.
  4. Contexto: cada sección debe tener sentido por sí misma.
  5. Trazabilidad: permitir al usuario seguir el rastro de su navegación.
  6. Consistencia: usar el mismo tipo de estructura y lenguaje en todo el sistema.
  7. Economía: no abrumar con opciones innecesarias; menos es más.

Ejemplo práctico: una app de gestión de tareas

Imaginemos una app que permite al usuario crear tareas, organizarlas por proyectos y hacer seguimiento del progreso.

  • Las secciones principales podrían ser: “Inicio”, “Proyectos”, “Tareas”, “Calendario” y “Cuenta”.
  • Dentro de “Proyectos” habría una lista de proyectos y, al entrar en uno, las tareas correspondientes.
  • La navegación incluiría un menú inferior con iconos y un botón flotante para crear una nueva tarea desde cualquier parte.
  • El usuario debería poder ver fácilmente en qué proyecto está y volver atrás sin perderse.

Diseñar esta estructura antes de hacer wireframes evita improvisaciones y facilita la coherencia del producto.

Recursos de referencia

Actividad práctica en clase

Título: “Construye tu mapa de navegación”

  1. Cada grupo trabajará sobre la app que están diseñando en el proyecto práctico.

  2. Deberán elaborar un mapa de navegación que incluya:

  3. Secciones principales

  4. Subpantallas o funcionalidades internas

  5. Relaciones entre páginas

  6. Usarán papel o Figma para representarlo visualmente.

  7. Como extensión, deberán justificar por escrito:

  8. Por qué han agrupado así el contenido

  9. Qué flujo principal sigue el usuario
  10. Cómo se evita que el usuario se pierda

Esta actividad nos va a servir como paso previo obligatorio antes de crear wireframes, que será el siguiente punto que veamos.