Diseñando árboles de contenido

El diseño de árboles de contenido es una de las tareas fundamentales en el diseño de productos digitales, pero puede resultar una de las más ingratas para los diseñadores, sobre todo para aquellos que han llegado al diseño desde lugares diferentes a la ingeniería de software. Luce mucho menos que el diseño visual, está claro, pero puede suponer la diferencia entre vivir en paz o desencadenar el infierno en la tierra (sobre todo, al llegar a la fase de producción, y todos sabemos lo que puede ocurrir cuando llegamos a producción).

Diseñar un árbol de contenido y un flujo de navegación no son tareas complicadas; solo requieren que seamos metódicos y que fijemos unos marcos claros sobre cuál es el objeto de diseño en cada uno de los casos, qué queda dentro y fuera de cada uno de ellos.

 

Todo producto digital, ya sea una web, una aplicación desktop o una app en nuestro smartphone, trabaja con un conjunto de datos (textos, fotografías, archivos, …). No importa si estos datos están almacenados en la memoria de nuestro teléfono, en el disco duro del portátil o en la nube. Las aplicaciones deben poder acceder a ellos rápida y fácilmente para realizar las tareas deseadas (ordenarlos, visualizarlos, compartirlos, …).

Podemos imaginar esos datos como tarjetas que se almacenarán en los cajones de un mueble archivador. Nuestro trabajo, a la hora de diseñar un árbol de contenido, será definir cuántos tipos de tarjetas vamos a utilizar, hacer que el archivador tenga el número de cajones necesario para poder almacenarlas, y definir cómo estarán colocados estos cajones para que no nos volvamos locos cada vez que vayamos a buscar algo. Tendremos que preocuparnos, por ejemplo, de que tarjetas relacionadas entre sí estén guardadas en un mismo archivador para no tener que dar paseos innecesarios, o evitar tener que guardar copias de una misma tarjeta en lugares diferentes.

 

Los beneficios de diseñar buenos árboles de contenido y flujos de navegación son claros:

  • Mejor comprensión del producto. Esos procesos de diseño no van a ser estancos, y muchas veces modificaremos uno de ellos a medida que el otro avanza. En el mejor de los casos, servirán para mejorarse mutuamente, ya que habrá cuestiones que no saldrán a la luz hasta que nos pongamos a definir detalles.
  • Ahorro. Si planteamos bien el sistema de archivo, nuestros datos ocuparán poco espacio y el bibliotecario tardará poco tiempo en acceder a la información. Traducido al entorno digital, ocuparemos menos memoria en nuestro smartphone, utilizaremos menos ancho de banda para acceder a la nube, nuestras aplicaciones serán más rápidas, … Y espacio y tiempo son dinero.
  • La paz en el mundo. Un pequeño cambio en la ubicación de un cajón puede parecernos irrelevante durante la fase de diseño, pero puede suponer muchas horas de trabajo o grandes dificultades para el equipo de desarrollo. Es por ésto que es fundamental hablar con ellos, pedirles opinión o consultar cualquier duda que podamos tener. Ellos conocen la tecnología que dará soporte al diseño, así que todos nos beneficiaremos de ese diálogo.

Entonces, ¿cómo comenzar el diseño de un árbol de contenido?

Es habitual que los diseñadores planteemos productos y servicios como una conversación con el usuario. Este símil es perfecto a la hora de acotar árboles y flujos:

Flujo de navegación = Qué vamos a hacer

Árbol de contenido = Con qué lo vamos a hacer

Así, al plantear el diálogo que vamos a establecer con el usuario, el flujo de navegación serán los verbos que definirán las acciones a realizar, y el árbol de contenido serán los sustantivos asociados a esos verbos.

Esta simple diferenciación entre sustantivos y verbos nos puede ser de gran ayuda durante el diseño, pues algunas veces los equipos encallan en discusiones sobre qué debe formar parte de cada una de estructuras.

 

Imaginemos que vamos a diseñar una aplicación de listín telefónico. Los elementos que nos vienen a la cabeza en un primer momento serán, por ejemplo:

  • Número de teléfono
  • Añadir nuevo número
  • Nombre del contacto
  • Apellidos del contacto
  • Editar número
  • Tipo de teléfono (fijo o móvil, personal o profesional, …)
  • Compartir contacto
  • Eliminar contacto

Al repasar estos elementos salta a la vista que hemos creado una lista de cosas diferentes. Por un lado, tenemos datos (número de teléfono, nombre y apellidos del contacto, tipo de teléfono) y, por otro, acciones (añadir, editar, compartir, eliminar). No tiene sentido, por tanto, mezclarlos en una misma estructura así que, separando sustantivos de verbos, tendremos una nueva ordenación, mucho más clara:

Arbol de contenidos (Sustantivos)
  • Número de teléfono
  • Nombre del contacto
  • Apellidos del contacto
  • Tipo de teléfono
Flujo de navegación (Verbos)
  • Añadir contacto
  • Editar contacto
  • Compartir contacto
  • Eliminar contacto

El listín telefónico es un ejemplo muy sencillo, con muy pocos datos y acciones, pero diseñar aplicaciones de mayor complejidad puede parecernos una tarea abrumadora. ¿Por dónde empezar?

Según mi experiencia, la mejor forma de afrontarlo es ir de lo general a lo específico. Comenzaremos pensando en las funcionalidades del producto a un nivel de abstracción muy alto, pero teniendo en cuenta el ciclo de uso completo del producto, de principio a fin. Planteado este primer paso dividiremos ese ciclo en partes e iremos desmenuzando cada una de ellas, definiendo esos flujos de interacción y los datos con los que se trabajará en cada paso. Profundizaremos sucesivamente hasta que hayamos definido a la perfección cada uno de los procesos: qué acciones se realizarán y qué datos estarán implicados en las mismas.

Muchas veces ocurre que estamos tentados de ponernos a dibujar pantallas desde el primer momento. En algunas ocasiones puede ser útil, pero en mi opinión es preferible hacer estos dibujos únicamente cuando sea necesario para resolver dudas sobre el flujo de interacción. Deberíamos ser capaces de definir la evolución de los procesos basándonos únicamente en los datos que se manejarán en cada momento.

En un próximo post explicaré un caso concreto: cómo construimos el árbol de contenido de Camaeleon, la app que desarrollamos como parte del TFM del Máster de Usabilidad y Experiencia de Usuario de KSchool.