# data[].attributes.body
En esta segunda etapa analizaremos los competidores, clasificaremos su tipología y empezaremos a establecer las categorías a incluir en nuestro sitio web. Se elaboran los cimientos de nuestro proyecto, estableciendo la arquitectura de la información y el diagrama de flujo.

# data[].attributes.body
¿Qué es un benchmarking?

# data[].attributes.attachment_link.description
Para iniciar tu negocio, necesitas analizar tu competencia para poder establecer tu estrategia y defender tu propuesta de valor único.

# data[].attributes.body
Sitio web de Figma para Figma Presentaciones

# data[].attributes.attachment_link.title
Figma Slides: crea presentaciones y diapositivas para todas las ocasiones

# data[].attributes.attachment_link.description
Crea presentaciones personalizadas para cualquier evento con Figma Slides. Diseña sin esfuerzo, personaliza, y comparte diapositivas visualmente atractivas para conectar con tu audiencia.

# data[].attributes.body
Consejos para hacer un buen Card Sorting

# data[].attributes.attachment_link.title
Guía completa de card sorting (UX): qué es, cómo hacerlo y herramientas

# data[].attributes.attachment_link.description
Descubre cómo implementar el card sorting para mejorar la arquitectura de la información y la experiencia de usuario en tu sitio web. Con ejemplos y herramientas.

# data[].attributes.body
Secuenciación del Sitio Web y estudio de la navegación.

# data[].attributes.attachment_link.title
Diagrama de flujo: aprende qué es y como aplicarlo al diseño UX

# data[].attributes.attachment_link.description
En este artículo aprenderás qué es un diagrama de flujo y cómo hacer uno paso a paso. Inclue ejemplos de diagramas, tipos de flujos y significado.

# data[].attributes.body
¿Qué es eso de la Arquitectura de la información?

# data[].attributes.attachment_link.readable_text
El contenido es una de las partes más importantes de una web o una app. Sin él, por mucho que el diseño sea "bonito", no tenemos nada que comunicar al usuario.

Se trata de uno de los pilares que nos permitirán construir un buen producto ... así que hay que prestarle mucha atención.

Aquí entra en acción el término arquitectura de la información (AI), una parte del proceso de diseño UX que nos ayudará a empezar el proyecto con una buena base.

A continuación te explico qué es la AI y cómo puedes aplicarlo a tus proyectos.

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

En pocas palabras, la arquitectura de la información es el arte de organizar la información de la forma más clara y lógica posible.

De este modo, el usuario podrá encontrar fácilmente lo que está buscando. Además, también nos permitirá poder añadir fácilmente nuevas funcionalidades y escalar el producto.

Podemos hacer una analogía con la construcción: para poder tener un buen bloque de pisos necesitamos un arquitecto y que los cimientos estén bien hechos, con una buena base. Si no lo están, a la larga aparecerán grietas y el edificio puede llegar a derrumbarse.

Con un producto digital pasará lo mismo: si no hay caminos bien definidos vamos a generar inconsistencias e incoherencias, el usuario se perderá y es muy posible que no vuelva (y, además, difícilmente conseguiremos nuestros objetivos, sean estos vender, conseguir suscriptores o ganar notoriedad).

¿Cómo definir la arquitectura de la información?

Para realizar bien un ejercicio de AI debes focalizarte esencialmente en organizar, estructurar y etiquetar correctamente todos los elementos.

Todo esto, sin perder de vista el objetivo: ayudar al usuario a encontrar la información y completar tareas.

Estos son los 3 pasos:

1. Realiza un inventario

El primer paso consiste en identificar todo aquello que queremos incluir en en el proyecto, partiendo del contenido y de las funcionalidades que queremos ofrecer.

Para decidir qué incluir nos basamos en la investigación y el conocimiento que hayamos obtenido sobre los usuarios, pero también sobre el sitio web o app actual (si se trata de un rediseño), en las demandas o expectativas del cliente que encarga el proyecto y en lo que está ofreciendo la competencia ( benchmarking) y, cómo no, en el plazo y el presupuesto.

Si el proyecto es pequeño pueden usarse post-its de diferentes colores, aunque si hablamos de grandes plataformas lo mejor es un Excel, porque es más manejable.

2. Agrupa las tarjetas

El segundo paso consiste en establecer relaciones entre los ítems inventariados, para decidir cuáles se deben agrupar en la arquitectura dentro de las distintas secciones o menús, y también dentro de cada página.

La clave es descubrir dónde esperan los usuarios encontrar los ítems cuando navegan persiguiendo un objetivo.

Por ejemplo, en una tienda online de muebles y productos para el hogar, ¿cómo preferirán los usuarios navegar para encontrar los productos que buscan?...

... ¿querrán un acceso por tipos de muebles (camas, mesas, sillas, armarios...)

...por uso y funciones (descansar, trabajar, cocinar...)

...por habitación (dormitorio, salón, despacho, cocina...)

... por un buscador

...o por todas esas formas?

Una buena técnica para contestar a estas preguntas es el card sorting o realizar entrevistas o encuestas a los usuarios para comprender cómo y por qué utilizan ese producto determinado.

Cómo hacer un ejercicio de card sorting

Si en el primer paso hemos utilizado tarjetas, podemos colocarlas sobre una mesa y pedir a nuestros usuarios que las ordenen y agrupen según lo que para ellos tenga sentido. Es sorprendente ver cómo a veces su esquema mental difiere completamente del que tiene el cliente que encarga el proyecto.

Hace unos años tuve que replantear la web de Volkswagen España y cada vez que realizamos el ejercicio nos sorprendimos con los resultados. Finalmente acabamos encontrando patrones comunes que nos permitieron agrupar el contenido de la mejor manera posible.

Si puedes realizar el card sorting con los usuarios, te recomiendo que simplemente utilices las tarjetas de papel, hagas una fotografía cuando el usuario finaliza y las desordendes para que el siguiente empiece de nuevo.

Si necesitas realizar el ejercicio a centenares de usuarios o en ciudades y países distintos, lo mejor es que utilices UsabiliTest o incluso Trello.

Los principios Gestalt ( en este artículo te los explico) también te pueden ayudar a comprender cómo el usuario relaciona mentalmente unos contenidos con otros.

3. Define el mapa

El tercer paso consiste en reflejar todos los datos anteriores en un mapa. Éste permitirá ver las relaciones y agrupaciones establecidas entre los contenidos.

En algunas ocasiones será necesario renombrar algunas categorías o incluso permitir el acceso a algún apartado desde distintas categorías.

Esta última parte la puedes realizar utilizando XMind, que hace muy sencillo realizar mappings y sesiones de brainstorming 😉

Ejemplos de Arquitectura de la Información

Apuntes finales sobre la AI

Cuando hablamos de Arquitectura de la Información no estamos hablando de sitemaps (solo es un listado que hace referencia a todas las páginas que hay) ni de la navegación, que solo guía el usuario mediante enlaces a todas las partes de la web o app.

En resumen, la Arquitectura de la Información es un documento en el que se definen la organización y relaciones entre todos los elementos. De ella dependen el resto, incluso (y obviamente) los wireframes, prototipos y diseño final.

Para que puedas profundizar todavía más, te recomiendo estos dos libros:

'Information Architecture': un libro exclusivamente orientado a la arquitectura de la información que describe todos los conceptos y los ejemplifica en productos digitales. Muy necesario.

'A project guide to UX': contiene todo lo que necesitas saber para desarrollar proyectos de diseño de experiencia de usuario, así como ejemplos y trucos.

Si quieres aprender más sobre experiencia de usuario, te recomiendo leer los artículos de la categoría de Diseño UX 🙂

Esto también te interesa 👇

# data[].attributes.attachment_link.title
Arquitectura de la información (UX): qué es y ejemplos

# data[].attributes.attachment_link.description
El contenido es una de las partes más importantes de una web o una app. Sin él, por mucho que el diseño sea "bonito", no tenemos nada que comunicar al usuario. Se trata de uno de los pilares que nos permitirán construir un buen producto ... así que hay que prestarle mucha atención.

# data[].attributes.body
Para profundizar en la materia

# data[].attributes.attachment_link.title
Diseño desde Marte – Ediciones Jardín de Monos

# data[].attributes.attachment_link.description
Pedir cita médica, gestionar la cuenta bancaria, monitorizar el ejercicio físico, identificar una canción..., cada día son más las tareas en las que recurrimos a la interacción con productos y servicios digitales. Por eso, el diseño de producto digital —con sus múltiples denominaciones: diseño UX/UI, diseño de interacción, etcétera— es la disciplina del diseño con un futuro más vibrante y complejo. En Diseño desde Marte, Cris Busquets explica, paso a paso y con un estilo fresco y didáctico, cómo se diseñan esos productos y servicios digitales. Con la mirada siempre puesta en quienes los usan pero sin perder de vista la parte de negocio, la autora analiza las metodologías utilizadas en el sector y nos propone una propia.

# data[].attributes.body
Breve tutorial para iniciarse en el software específico

# data[].attributes.attachment_link.title
Presentaciones Corporativas en #Figma para cualquier profesional

# data[].attributes.body
Curso con material de apoyo para volver a visionar contenidos explicados en clase.

# data[].attributes.attachment_link.title
Curso online - Figma de principio a fin (Samuel Hermoso (Elastic Heads))

# data[].attributes.attachment_link.description
Descubre la herramienta más potente y eficiente para diseñar de manera colaborativa y aprende a crear interfaces interactivas desde cero

# data[].attributes.body
1. Ideación. Idea, búsqueda de referentes motivacionales, investigación.

2. Desarrollo.

a) Benchamarking: Competidores directos, indirectos y tangenciales.

b) Card Sorting: Establecer categorías en tarjetas para estudiar las necesidades del sitio web.

c) Arquitectura de la información: Estructura inicial del prototipo + Diagrama de flujo.

3. Presentación interactiva. Presentación a modo de justificación y explicación del desarrollo.

4. Prototipado. Elaboración en Figma de un prototipo del sitio web.