Cómo se organiza, se nombra y se recorre el contenido de una app o de un sitio web, y un cuaderno de trabajo para hacerlo con un proyecto propio.
Luis E. Maldonado Gil
«La arquitectura de información es la disciplina que se ocupa de que la información sea fácil de encontrar y de entender. Incluye buscar, navegar, clasificar y presentar información relevante y en contexto, para ayudar a las personas a entender su entorno y a encontrar lo que buscan, en línea y en el mundo real.»
«Information architecture (IA) is the discipline of making information findable and understandable. It includes searching, browsing, categorizing and presenting relevant and contextual information to help people understand their surroundings and find what they’re looking for online and in the real world.» Interaction Design Foundation«La práctica de organizar, etiquetar y diseñar sistemas de búsqueda y navegación que permite dar estructura, encontrar el camino, completar objetivos y dar sentido a la información en ambientes digitales.»
Andrea CantúCómo se agrupa el contenido.
Cómo se llama cada cosa.
Por dónde se pasa de una pantalla a otra.
Cómo se pide algo con palabras.
Trayecto es la app ficticia del transporte público de una ciudad. Es domingo y hace falta saber a qué hora sale el último tren de la Línea 1.
La información es la misma en las dos versiones; cambia cómo está organizada y cómo se llama cada cosa.
Sin arquitectura, la app abre con doce enlaces en el orden en que se publicaron y con los nombres internos del organismo: el horario está en «Corridas L1 — sábados, domingos y festivos». Con arquitectura, el camino es Viajar › Horarios: dos toques.
La estructura se decide con tres cosas a la vista: para quién es, qué hay y en qué situación se usa.
¿Quién lo va a usar? ¿Qué busca y con qué palabras lo pide?
¿Qué información hay? ¿Cuánta es y cada cuánto cambia?
¿Para qué existe el proyecto? ¿Dónde y cuándo se usa? ¿Qué lo limita?
Ficha del proyecto: nombre; si es app, sitio web o los dos; y una o dos frases para usuario, contenido y contexto. En el ejemplo, Trayecto es la app y el sitio web del transporte público de una ciudad. Lo usan estudiantes, personas mayores y visitantes, y se consulta en la calle, con prisa.
Es la lista de todo el contenido que tiene o tendrá un producto, una fila por página o por pieza, con sus datos.
Después se revisa: de cada fila se decide si se conserva, se actualiza o se quita. A esa revisión se le llama auditoría.
| Nombre | Responsable | Formato | Actualizado | Decisión |
|---|---|---|---|---|
| Conservar | ||||
| Actualizar | ||||
| Conservar | ||||
| Quitar | ||||
| Actualizar |
El inventario de Trayecto tiene doce contenidos: planear un viaje, mapa de la red, horarios, avisos de servicio, tarifas, recargar la tarjeta, consultar saldo, puntos de venta, objetos perdidos, quejas y sugerencias, accesibilidad y preguntas frecuentes.
Cada contenido del inventario va en una tarjeta. Varias personas las agrupan como les parece lógico y le ponen nombre a cada grupo.
Así se descubre la lógica de quien va a usar el producto, y con qué palabras nombra cada cosa. Con quince personas los grupos ya casi no cambian aunque se sumen más.
Cada persona agrupa según un esquema. Los esquemas exactos —orden alfabético, fecha, lugar— sirven cuando se sabe qué se busca. Los esquemas ambiguos —tema, tarea, público— ayudan a explorar, y son los que más hay que probar.
Las doce tarjetas de Trayecto se agrupan en tres: Viajar (planear un viaje, mapa de la red, horarios, avisos de servicio), Pagar (tarifas, recargar la tarjeta, consultar saldo, puntos de venta) y Ayuda (objetos perdidos, quejas y sugerencias, accesibilidad, preguntas frecuentes).
Una etiqueta avisa de lo que hay detrás. Si promete otra cosa, o no promete nada, la persona no entra; o entra y se va.
Etiquetas son los nombres del menú, los encabezados, los enlaces dentro del texto y los iconos. En inglés, la pista que deja una etiqueta se llama information scent.
En el ejemplo, las secciones llegan con los nombres del organismo: «Derroteros» (Viajar), «Medios de pago» (Pagar) y «Atención ciudadana» (Ayuda), y dos páginas con jerga: «Corridas» (Horarios) y «Afectaciones al servicio» (Avisos de servicio). Además se avisa de los nombres genéricos, largos o repetidos.
Es el dibujo de la estructura completa: cada página, su nivel y de qué depende.
Un árbol puede quedar profundo, con muchos niveles, o ancho, con muchas opciones en cada nivel. Lo profundo esconde el contenido; lo muy ancho obliga a leer listas largas.
Además del árbol, hay estructuras en secuencia (pasos en orden), por facetas (filtros) y en red (enlaces entre lo relacionado).
El archivo sitemap.xml es otra cosa: la lista de direcciones que leen los buscadores.
Se arma solo: los grupos del paso 3 son las secciones, y sus tarjetas, las páginas.
El mapa de sitio de Trayecto: Inicio, con tres secciones de cuatro páginas cada una. Viajar: planear un viaje, mapa de la red, horarios y avisos de servicio. Pagar: tarifas, recargar la tarjeta, consultar saldo y puntos de venta. Ayuda: objetos perdidos, quejas y sugerencias, accesibilidad y preguntas frecuentes.
La navegación es la parte visible de la arquitectura de información; la estructura de fondo se decide antes (Cardello, 2014).
Las secciones del mapa forman la navegación global; las páginas de cada una, la local.
Elige una secciónEn Trayecto, la navegación global del sitio lleva a Viajar, Pagar y Ayuda; en la app, la barra de pestañas tiene Inicio, Viajar, Pagar y Ayuda. Dentro de Viajar, la navegación local muestra sus cuatro páginas y las migas de pan dicen Inicio › Viajar › Horarios.
Se busca cuando se sabe qué se quiere y se puede decir; se navega cuando hay que explorar. Hacen falta las dos vías, porque no todos llegan sabiendo cómo se llama lo que buscan.
Las palabras de quien busca, con sus abreviaturas y sus errores de dedo.
Cada nombre oficial con sus sinónimos y sus nombres populares.
Todo lo que se puede encontrar, y en qué campos se busca.
Ordenados, con filtros, y con una salida cuando no hay ninguno.
En el ejemplo, «Horarios» también se busca como «corridas» o «a qué hora pasa»; «Recargar la tarjeta», como «poner saldo»; «Objetos perdidos», como «perdí» u «olvidé»; «Accesibilidad», como «elevador» o «silla de ruedas».
Una faceta es un dato que comparten todos los elementos de una colección, como el precio, la fecha o el lugar. Combinando facetas, cada quien arma su propio filtro.
Ocho rutas con cuatro facetas: tipo, zona, si es accesible en silla de ruedas y si da servicio de noche.
Ocho rutas: dos líneas de tren y seis de autobús, en tres zonas. Con números, los filtros que dejarían la lista vacía se apagan antes de elegirlos; sin números, hay que probar para descubrirlo. Por ejemplo, no hay ningún tren nocturno.
El mapa de sitio dice qué hay. El diagrama de flujo dice cómo se recorre para terminar una tarea: pantallas, acciones y decisiones, en orden.
El flujo de recargar la tarjeta en Trayecto: abrir la app; ¿hay sesión iniciada? (si no, iniciar sesión); elegir la tarjeta; elegir el monto; pagar; ¿se aprobó el pago? (si no, aviso del error y volver a pagar); saldo actualizado.
Un wireframe es el plano de una pantalla: qué lleva, en qué orden y con qué peso, sin color ni imágenes finales.
Las decisiones de arquitectura se toman en el wireframe, cuando moverlas todavía cuesta poco.
La portada de Trayecto: el buscador «¿A dónde vas?», cuatro atajos (planear un viaje, horarios, recargar la tarjeta y avisos de servicio) y, abajo, la barra con las secciones del mapa de sitio.
Se prueba el árbol de nombres, sin diseño. Se da una tarea —encontrar algo concreto— y se observa por dónde baja cada persona.
Suele hacerse después del card sorting, para comprobar la estructura que salió de él.
Tres tareas sobre el árbol de Trayecto: dónde reportar una mochila olvidada (Ayuda › Objetos perdidos), cuánto paga una persona de 68 años (Pagar › Tarifas) y si la Línea 1 tiene desvío hoy (Viajar › Avisos de servicio). Por cada tarea se anota si se llegó, si fue sin regresar y cuántos clics hicieron falta.
El resultado reúne la ficha, el inventario, el mapa de sitio con sus nombres, la navegación, el vocabulario, el flujo de la tarea principal, la portada y los resultados del tree testing, con una lista de revisión antes de entregar. Se descarga como documento de texto.
Esta presentación está pensada para pantalla horizontal.
Qué es, cómo se trabaja y cómo se hace la de un proyecto propio