La guía completa de arquitectura de la información

Escucha la versión en audio de este artículo

Como parte estándar del proceso de UX, los diseñadores crean arquitectura de información al crear productos. Al definir cada vía y camino que los usuarios pueden tomar a través de una aplicación o sitio web, la arquitectura de la información es mucho más que un simple mapa del sitio para mostrar qué página lleva a dónde.

Al igual que los arquitectos de edificios que utilizan un plano para construir cada parte de una casa, desde las estructuras físicas hasta el funcionamiento interno más complejo, como la electricidad y la plomería, la arquitectura de la información describe la jerarquía, la navegación, las funciones y las interacciones de un sitio web o una aplicación. Y así como los planos son el documento más valioso que un arquitecto puede utilizar en la construcción de un edificio, la arquitectura de la información puede ser la herramienta más poderosa en el arsenal de un diseñador.

Sin embargo, desarrollar uno no es tan simple como juntar una lista de funciones y trazar un mapa de cómo funcionan; investiguemos el proceso.

¿Qué es la arquitectura de la información y por qué es importante?

La arquitectura de la información (IA) es, como un plano, una representación visual de la infraestructura, las funciones y la jerarquía del producto. El nivel de detalle depende del diseñador, por lo que IA también puede incluir navegación, funciones y comportamientos de la aplicación, contenido y flujos. No hay un límite establecido para el tamaño o la forma de IA; sin embargo, debe abarcar la estructura generalizada del producto para que cualquier persona (teóricamente) pueda leerlo y comprender cómo funciona el producto.

Usaremos la referencia del modelo a menudo porque el propósito de ambos documentos es casi idéntico. Al igual que un modelo, IA proporciona a los diseñadores (así como a los equipos de ingeniería y desarrollo de productos) una vista panorámica de todo el producto. Tener un único documento que brinde una representación simple y comprensible de cómo funciona la aplicación o el sitio web es vital para desarrollar nuevas funciones, actualizar las existentes y ver qué es posible considerando el producto existente.

Con IA disponible, se vuelve significativamente más fácil tomar decisiones clave para nuevas funciones e implementaciones, comprender los plazos para los cambios de productos y seguir el comportamiento del usuario a través de múltiples procesos.

Sumerjámonos en un video básico para ver cómo se construye un IA.

Cómo diseñar arquitectura de la información

Como parte del proceso de UX, el diseño de IA sigue patrones muy similares a los diagramas de flujo: agregue formas y conéctelas con líneas de manera organizada en un solo documento. El desafío al crear IA es comprender cómo funciona realmente su aplicación o sitio web desde la perspectiva del usuario y cómo organizar esa información en un formato legible y legible.

Hay dos requisitos principales para construir IA: organizarlo a través de una jerarquía visual (es decir, una jerarquía de características, funciones y comportamiento) y crear una leyenda para mostrar diferentes tipos de características, interacciones y flujos. Con un diagrama de flujo estándar, las formas siguen requisitos específicos (los rectángulos son procesos, los rombos son puntos de decisión, etc.); sin embargo, seguir esa nomenclatura no es un requisito.

En otras palabras, los factores más importantes para construir su IA son dónde se colocan los componentes individuales de la arquitectura (jerárquicamente) y cómo se etiquetan y muestran.

Comprender y mostrar la jerarquía visual

El aspecto más desafiante de la creación de una nueva arquitectura de información es casi siempre construirla jerárquicamente. Es un error común pensar que IA debe construirse "desde arriba hacia abajo". Eso casi siempre es más difícil de hacer a menos que sea un producto existente, como en el video de arriba.

Al crear IA desde cero, a menos que su sitio web o aplicación siga un formato estándar, dibujar cualquier cosa después del nivel superior es muy difícil. Es como pedirle a un mecánico que construya un automóvil de arriba hacia abajo en lugar de hacerlo por partes. Cada pieza debe construirse de antemano con su propia investigación, tiempo para el diseño y desarrollo. Lo mismo ocurre con IA.

Mostrar la jerarquía visual es un activo valioso para IA, no solo porque proporciona un mejor contexto para el lector, sino que también generaliza las regiones clave del producto. Si la característica más importante de su aplicación es pedir un viaje (al estilo de Uber o Lyft) que se puede hacer desde la página de inicio, entonces esa página tendrá la mayor cantidad de puntos de contacto y el mayor valor para el producto. Lo mismo será cierto para la jerarquía visual.

Los mapas del sitio son útiles para comprender la jerarquía, ya que organizan las páginas numéricamente (como 1.0 Inicio, 2.0 Pago, 2.1 Agregar método de pago, etc.). O considere el ejemplo en la imagen a continuación para el sitio web de la biblioteca de la Universidad de Duke, donde la navegación superior no solo está en la parte superior, sino que también está resaltada para que sea visible en toda la aplicación.

Jerarquía de formas, colores y otros elementos visuales

Aparte de la jerarquía, la arquitectura anterior hace otra cosa bien: muestra cada punto de compromiso de forma única según sea necesario a través de una leyenda simple y algunas frases clave. La leyenda denota la página y el tipo de contenido, y significa variaciones entre los colores de las formas. Esto es importante porque, aunque el sitio de Duke parece bastante simple, el IA solo tiene tres niveles de profundidad. Cada rectángulo amarillo denota una aplicación, por lo que los procesos dentro de cada uno de esos cuadros no están incluidos en este documento.

Incluso sin esas partes disponibles, la estructura es tal que podemos entender cómo navegar por el sitio web solo a través del IA. Eso se detiene cuando llegamos a una aplicación dentro del sitio web, no es necesario.

El IA a continuación es para un juego. Usando cuatro formas, sin color y fragmentos de texto colocados de forma inteligente, cada interacción importante es comprensible sin prototipos y, lo que es más importante, puede ser entendida por cualquier persona que trabaje en ella.

Este modelo no es perfecto, pero organiza claramente la jerarquía de aplicaciones y delinea lo que el usuario ve o hace en un momento dado.

Las mejores herramientas de arquitectura de la información

Hay muchas aplicaciones de software que permiten construir una IA, pero pocas son lo suficientemente simples y rápidas para hacer que la experiencia sea agradable. O al menos, fácil de manejar.

Draw.io, utilizado en el video anterior, es completamente gratuito para uso personal y profesional y se conecta automáticamente a Google Drive. También tiene integraciones con Confluence y JIRA, que son de pago. Draw.io es excelente para diagramas de flujo, creación de flujos de usuario y arquitectura de información, y con la funcionalidad de Drive, varias personas pueden trabajar en el mismo documento y ver los cambios en vivo. También hay una versión gratuita sin conexión.

Lucidchart es otra gran herramienta que brinda una experiencia ligeramente mejor que Draw.io y tiene beneficios adicionales como plantillas prediseñadas, muchas más integraciones, una aplicación móvil (calificada con 2.5 estrellas en la App Store) y soporte para empresas.

Omnigraffle y Visio son pilares de la industria desde hace mucho tiempo y funcionan de manera excelente para crear y mantener un diseño de IA, aunque Visio solo está en línea (la versión anterior sin conexión es solo para Windows), mientras que Omnigraffle es solo para Mac y requiere compras por separado para MacOS e iOS. versiones. OmniGraffle tiene una ventaja sobre los principales competidores, ya que proporciona automatización de JavaScript y AppleScript, lo que para la mayoría de los diseñadores puede ser innecesario, pero, por lo general, los arquitectos de información de tiempo completo lo aprecian.

Todas las herramientas enumeradas anteriormente están diseñadas para ser rápidas y fáciles de usar, específicamente en torno a los diagramas de flujo, que siguen principios casi idénticos a la arquitectura de la información. Otras aplicaciones como Balsamiq, MindMeister, MindManager o XMind ofrecen un comportamiento de estilo similar, pero están diseñadas para otros propósitos importantes, como la creación de prototipos o el mapeo mental.

Prácticas recomendadas de la arquitectura de la información

Si bien existen pocas reglas definidas sobre lo que constituye la arquitectura de la información, al pasar por el proceso, tenga en cuenta lo siguiente:

No te enfoques en la jerarquía, enfócate en la estructura

La jerarquía es ajustable. La página de inicio siempre será la página de inicio, pero a dónde conduce, cómo llegan los usuarios a esos lugares y todo lo demás se determina más adelante.

Todos los procesos deben ser lógicos

Aunque la IA en el proceso de UX es para las interacciones del usuario, cada paso del camino debe tener sentido. Las pantallas de registro no deben conducir a la configuración, una función de cámara no debe saltar a una vista de mapa... y la lista continúa.

Recuerda el proceso UX

Un error común es simplemente hacer IA, sin recursos, investigación u otros activos o trabajo. Eso es como decirle a un autor que escriba un libro sin un esquema, oa un programador que codifique una aplicación sin prototipos.

Eres el cartógrafo

Los cartógrafos tienen en cuenta todo lo relacionado con un mapa, desde cadenas montañosas hasta fronteras estatales. Al igual que los creadores de mapas, los diseñadores determinan lo que se incluye en el diseño de IA. Páginas individuales, comportamientos de usuarios específicos, contexto para puntos de decisión... y así sucesivamente.

En última instancia, el cartógrafo decide qué va en el mapa en función de las necesidades del usuario. Lo mismo es cierto para los diseñadores, así que construya la IA para el usuario final, es decir, los equipos de diseño y desarrollo de productos.

La arquitectura de la información está en constante cambio y evolución

Para profundizar en el punto de origen una vez más, todos los IA están diseñados para el cambio. Los productos evolucionan, los diseños cambian, los usuarios se adaptan y el ciclo continúa una y otra vez. No se lo tome demasiado en serio y sepa que siempre habrá margen de mejora. No apuntes a la perfección; construya un IA simple y adaptable.

Mi arquitectura de la información está lista... ¿y ahora qué?

Es una concepción común que cualquier trabajo de diseño nunca se termina realmente , y ese es ciertamente el caso de la arquitectura de la información. Crecen, se encogen y cambian como lo hacen nuestros productos. A diferencia de un plano para un edificio, IA siempre evolucionará en función de cualquier cosa, desde las necesidades del usuario hasta las nuevas funciones o la revisión de un producto. Gran parte de la estructura puede permanecer igual y brindar consistencia entre las versiones para que los usuarios no se confundan.

Y eso es algo bueno. Saber que IA es un documento fluido, que probablemente cambia semanalmente y, a veces, incluso a diario, es una forma poderosa de mantener la estructura general de su aplicación o sitio web sin tocar el código ni crear nuevos prototipos. Cuanto mejor conozca el IA todo el equipo de desarrollo de productos, más rápido sabrán todos qué es y qué no es posible, y qué tan serio es realmente cualquier supuesto "trabajo fácil".

Lo que nos lleva a la verdadera belleza de la arquitectura de la información: no hay un punto de partida predefinido. Si bien el proceso de diseño de UX tradicional dicta que la IA se crea después de completar suficientes flujos de usuarios; Armado con mucha investigación de usuarios y de la competencia, también puede ser lo primero que se haga... o lo último. El proceso de creación de prototipos a menudo brinda información sobre cómo deben ocurrir ciertos comportamientos o acciones que serían difíciles de imaginar desde una IA lógica o poco imaginativa.

Como práctica en constante evolución, el diseño de IA es tanto un arte como una habilidad, razón por la cual las grandes corporaciones tienen puestos de arquitectos de la información. Estos diseñadores son los guardianes de los sistemas masivos y, con su comprensión del crecimiento del producto a lo largo del tiempo, ayudan a impulsar a los equipos de productos, diseño e ingeniería para que tomen las decisiones correctas a lo largo de los años . Esa escala de organización no es para todos los diseñadores, pero cada diseñador puede construir una arquitectura de información simple y comprensible.

• • •

Lectura recomendada sobre arquitectura de la información

IA para la web y más allá

Cómo entender cualquier desorden: arquitectura de la información para todos

Conceptos básicos de la arquitectura de la información

La diferencia entre la arquitectura de la información y el diseño UX

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas