Usabilidad y experiencia de usuario

La usabilidad (U) y arquitectura de la información (AI)

 Usabilidad y experiencia de usuario
La usabilidad (U) y arquitectura de la información (AI)

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 2

 Escuela de Diseño, Arte y Comunicación

Director de Escuela / Hernán Garfia Arce

ELABORACIÓN

Experto disciplinar / Paola Pereira

Diseñador instruccional / Camila Palacios

VALIDACIÓN PEDAGÓGICA

Jefa de diseño instruccional y multimedia / Alejandra San Juan Reyes

Experto disciplinar / Fernanda Jerez

DISEÑO DOCUMENTO

Equipo de Diseño Instruccional AIEP

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 3

Contenido
Aprendizaje esperado de la semana ..................................................................................................................6
Ideas Clave ..................................................................................................................................................................6
1. Arquitectura de la información ........................................................................................................................7
1.1 Origen de la arquitectura de la información ............................................................................... 7
1.2 Beneficios de la arquitectura de la información .......................................................................... 8
1.3 Ambiente y espacios digitales...................................................................................................... 8
1.3.1 Ambientes interactivos ......................................................................................................... 9
2. Arquitectura de la información en el diseño web .....................................................................................9
2.1 Relación entre contenido, contexto y usuarios ......................................................................... 10
3. Errores recurrentes en arquitectura de la información ......................................................................... 11
4. Métodos, estrategia, fases y técnicas para la arquitectura de la información ............................... 12
4.1 Card sorting................................................................................................................................ 12
4.1.2 Card sorting abierto ............................................................................................................ 13
4.1.2 Card sorting cerrado ........................................................................................................... 13
4.2 Organización .............................................................................................................................. 14
4.2.1 Organización exacta ............................................................................................................ 14
4.2.2 Organización subjetiva ........................................................................................................ 14
4.3 Navegación ................................................................................................................................ 15
4.4 Rotulado..................................................................................................................................... 16
5. Distribución de información en las plataformas ...................................................................................... 16
5.1 Contenido estacional ................................................................................................................. 16
5.2 Contenido evergreen ................................................................................................................. 16
5.3 Jerarquías de información ......................................................................................................... 16
6. Herramientas para la construcción de arquitectura de la información ........................................... 17
6.1 Diagrams.net .............................................................................................................................. 18
6.2 XMIND ........................................................................................................................................ 19
6.3 SMARTDRAW ............................................................................................................................. 19
6.4 CMAPTOOLS ............................................................................................................................... 20
6.5 ADOBE ILLUSTRATOR ................................................................................................................. 20

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 4

7. Plataformas escalables .................................................................................................................................... 24
Conclusiones ........................................................................................................................................................... 25
Bibliografía ............................................................................................................................................................... 25
Enlaces y material multimedia ........................................................................................................................... 26

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 5

Aprendizaje esperado de la semana
Utilizan herramientas específicas para realizar propuesta o análisis de la Arquitectura de
Información (AI), considerando la navegación y la experiencia de usuario en el diseño web

Ideas Clave

Arquitectura de
la información

Métodos, Distribución de
Origen y Errores Plataformas
estrategias, fases información en
beneficios recurrentes escalables
y técnicas plataformas

Contenido
Card sorting
estacionario

Contenido
Organización
evergreen

Jerarquías de
Navegación
información

Rotulado

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 6

1. Arquitectura de la información
La arquitectura de información es un proceso bastante amplio y que se utiliza de forma indistinta
en variadas disciplinas enfocadas en el diseño, considerando siempre al usuario como foco del
proceso. Cuando realizamos arquitectura de información, debemos tener claro que nos sirve
para diseñar, distribuir y organizar el contenido y la información que va a componer el producto
digital que estamos desarrollando, esa es su principal función, y obtendremos como resultado
un organigrama gráfico que nos demostrará esta distribución tras seguir los pasos para su
creación.

1.1 Origen de la arquitectura de la información

El término de “arquitectura de información” nace cerca del año 1976, a manos de Richard Saul
Wurman, quien trabajó estructurando la información de diversos sistemas, principalmente
informáticos y de variadas publicaciones.

A partir de ahí, el uso de concepto se ha masificado en distintas publicaciones y disciplinas,

siempre relacionada con medios digitales, llegando a existir incluso un perfil laboral que tiene
que ver con una persona encargada de generar arquitecturas para diferentes medios
informativos.

Este término puede ser difícil de definir, ya que tiene que ver con la planificación de lo que va a
ser la experiencia del usuario frente a un sistema o producto digital con el fin de que se obtengan
de forma rápida, sencilla y natural toda la información y los datos que se están requiriendo en
un producto.

Arquitectura de información básica del home de Google

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 7

1.2 Beneficios de la arquitectura de la información
Los beneficios de la arquitectura de información son múltiples y tienen que ver directamente
con el impacto en la experiencia de usuario y la usabilidad de los productos que realizamos,
cuando organizamos correctamente y de forma planificada la distribución de los contenidos y
de la información dentro de una plataforma. Dentro de los principales beneficios, encontramos:

• Disminución en los tiempos de búsqueda de información de nuestros usuarios, ya que

tendrán los contenidos de forma muy natural ubicados donde ellos podrían
intuitivamente buscar. La disminución en los tiempos de búsqueda ayuda a la generación
de experiencia de usuario y la buena usabilidad.

• Ahorro de tiempo y recursos por posibles reestructuraciones posteriores de contenidos

o información, es decir, si organizamos de forma correcta nuestro producto inicialmente,
reduciremos el margen de error y por lo tanto futuras correcciones.

• Cuando jerarquizamos correctamente la información, nuestros usuarios pueden ser

filtrados y derivados a donde cada uno quiere llegar de forma más rápida y oportuna, lo
que nos ayudará a atender a cada usuario de forma correcta.

1.3 Ambiente y espacios digitales

Cuando hablamos de ambientes y espacios digitales, podemos tomar el ejemplo de un espacio
físico en donde establecemos una conversación con un amigo, nos cuenta algunas anécdotas,
nos da cierta información e interactuamos con él. Ahora, extrapolemos ese ejemplo a un sitio
web y podremos encontrar una similitud con la situación de interacción en la que nosotros los
usuarios utilizamos un sitio web, buscamos y obtenemos cierta información y finalmente
logramos o no concretar ciertas tareas.

En pocas palabras, el ambiente digital es aquel donde nos desenvolvemos como usuarios. Hoy
en día, tenemos que considerar los aspectos técnicos de la web al momento de pensar en el
espacio digital ya que contamos con una web interactiva y relacionada a los datos. Se habla hoy
en día de la web 3.0, en donde los usuarios nos entregan datos importantes sobre su navegación
y sobre sus preferencias en todo momento en el ciberespacio.

Es importante considerar los aspectos técnicos relacionados a la web, ya que determinan si el

usuario accederá a nuestro sitio web a través de qué tecnologías, con qué intereses y buscando
qué tipo de interacción.

Si habilitamos, por ejemplo, un chat instantáneo dentro de nuestro sitio web, debemos saber
que el usuario en ese ambiente digital esperará una atención inmediata, y que de no obtenerla
generará una frustración o un punto de fricción con el producto digital que se le está
presentando.

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 8

1.3.1 Ambientes interactivos
El mundo actual está lleno de experiencias enriquecidas con la tecnología, teniendo ambientes
interactivos en general. Tenemos productos digitales que deben ser usables en todo nuestro
entorno como, por ejemplo, pantallas táctiles, refrigeradores inteligentes con los cuales
interactuar, televisores, mesas. Existen empresas que se dedican a tecnologizar nuestros
ambientes y esto representa un reto para los diseñadores de experiencia de usuario, ya que no
se trata solo de diseñar un producto digital tradicional, como una página web que funcione en
el ordenador, sino que cada vez avanzamos a pasos agigantados a la necesidad de que esos
productos sean multiplataformas. Oblong, por ejemplo, es una empresa que presenta espacios
digitalizados y cuenta con un equipo de diseñadores encargados de minimizar la fricción entre
estos espacios y sus usuarios, creando ambientes digitales, usables e inteligentes. En este
momento, estamos preparándonos para el reto de organizar la información para distribuirla por
productos digitales con distintas salidas, considerando la evolución de la arquitectura de la
información y la navegación en distintas plataformas una navegación en 360°.

2. Arquitectura de la información en el diseño web

La arquitectura de información en el diseño web tiene la función de facilitar la navegación de los
usuarios a través de los contenidos ofrecidos en un determinado sitio. Específicamente, permite
facilitar el uso y comprensión del producto a los usuarios, para que de esa forma su adopción
sea efectiva y en un tiempo prudente.

Normalmente, la arquitectura de información va a generar interés o frustración en el usuario

dependiendo de su ejecución. Si hemos trabajado correctamente la distribución de los
contenidos, el usuario que visita el sitio web se puede interesar y realizar una navegación
descubriendo el producto. Por el contrario, al no realizar un buen trabajo de arquitectura de
información, podemos frustrar al usuario al momento de buscar contenido o información
relevante. Se dice que un usuario debe poder llegar a donde quiere en un sitio web en tres clics.
De esa manera, estaremos seguros de que el arquitecto de la información hizo un buen trabajo
y que el producto digital es usable y amigable.

Uno de los puntos en donde vemos representada la arquitectura de información en el diseño

web es el menú de navegación. Hoy en día, es un estándar en el diseño web proveer al usuario
de un sitio con un menú principal de navegación que le permita ubicarse constantemente dentro
del sitio web y también que pueda acceder de forma rápida y sencilla a los contenidos y/o
funcionalidades más importantes de la plataforma.

Ejemplo de un menú principal de navegación en un sitio web

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 9

Los menús tradicionales también mutaron y una de las tendencias que facilitan en gran medida
la navegación se trata de los conocidos como mega menús, que permiten al usuario navegar y
llegar a la categoría de su interés de manera sencilla, siendo un interesante avance para la
navegabilidad y sobre como mostrar la arquitectura de la información de un sitio.

Ejemplo de un mega menú de navegación en un sitio web

2.1 Relación entre contenido, contexto y usuarios

En el año 2015, los autores Louis Rosenfeld, Peter Morville y Jorge Arango presentan la
arquitectura de información como la relación que se genera entre el contenido de un sitio web,
el usuario al que está dirigido el sitio web y con contexto de la empresa, los usuarios y el
proyecto.

Esta relación la describen y se profundiza en su libro “Information Architecture for the World
Wide Web”, en que se entregan las directrices para poder realizar una arquitectura de
información que sea la intersección de estos puntos y en que hablan sobre el concepto de
ecología de información, refiriéndose a la unión y el desarrollo de cada concepto dependiendo
los unos de los otros.

Esto se traduce en simples palabras como la dependencia que tiene cada uno de estos conceptos
con los otros dos para desarrollarse de forma correcta en post de facilitar el acceso a la
información de un producto digital.

Cada uno de los conceptos propuestos en este análisis considera ciertos elementos:

• Para el contenido
Es importante considerar la cantidad de información, la taxonomía de los elementos,
las etiquetas o “nombres” de cada elemento de información, los textos que están
involucrados en el diseño (títulos, párrafos, etc.), los elementos audiovisuales, la
estructura, etc.

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 10

 • Para el usuario
Debemos considerar las características personales, su perfil, las necesidades que tiene
respecto de nuestro producto o sitio web, el nivel de conocimiento de la herramienta o
sus similares, su experiencia en cuanto al uso de esta, etc.

• Sobre el contexto
Es necesario considerar los objetivos que busca la marca o la empresa con este sitio
web, como se relaciona éste con su plan de negocios o de marketing, la cantidad de
recursos que se han invertido, las capacidades del usuario de acceder al mismo, etc.

3. Errores recurrentes en arquitectura de la información

Existen muchos problemas que se pueden generar con una arquitectura de información y, como
hemos mencionado antes, los errores en esta parte del diseño pueden significar frustración en
el usuario debido a problemas evidentes de navegación o de estructura de los contenidos.

Jakob Nielsen, estudioso de la usabilidad y experiencia de usuario, ha definido aspectos

relevantes a considerar en este proceso y ha evidenciado cuáles podrían ser algunos de los
problemas más relevantes en el desarrollo de una arquitectura de información. Dentro de su
análisis, podemos encontrar:

• No utilizar una estructura: existen sitios web en donde los contenidos no se organizan,
no se ordenan ni se relacionan entre sí, es decir que la información está aislada o
separada del contenido audiovisual, las categorías no se condicen con productos, el
menú de navegación no refleja todo el contenido, etc.

• Opciones de navegación invisibles: se refiere a contenidos que no se encuentran visibles

en los menús de navegación, enlaces o botones. Pudiera parecer difícil que se genere
este problema, pero es más común de lo que se cree. Cuando no visibilizamos un
contenido de forma evidente, simplemente no existe para el usuario.

• Navegación compleja: Cuando mostramos un sitio web a un usuario debemos facilitar lo

más posible su experiencia, haciéndolo sentir cómodo con los contenidos y estructura
que le hemos propuesto. Si por el contrario dificultamos su navegación, generaremos
experiencias complejas para el usuario. Si un menú de navegación está oculto o si un
contenido requiere de descifrar algo o tiene requisitos para visualizarlo, podemos
generar frustraciones innecesarias.

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 11

4. Métodos, estrategia, fases y técnicas para la
arquitectura de la información
4.1 Card sorting
Uno de los primeros métodos o herramientas que tenemos para comenzar con el diseño
propiamente tal de nuestro producto es el card sorting o método de clasificación de tarjetas. Es
una herramienta que va muy de la mano con la posterior realización de la arquitectura de
información de nuestro producto y ahora veremos por qué.

Este método nos permite generar una agrupación y organización de contenidos e información
de la propia mano del usuario, lo que nos asegura una correcta estructuración tanto en la
información, menús y jerarquía de navegación.

Pero no es tan simple como pedirle al usuario que organice los contenidos del sitio web ya que,
para realizar un proceso de card sorting, deberemos definir distintas categorías que componen
nuestro producto y ciertos conceptos que se relacionan con el contenido y la información que
tienen el mismo, para posteriormente ser organizados de forma natural por el usuario. Con esto,
buscaremos patrones comunes en la organización de los conceptos y lograremos definir de
forma más certera la estructura que presentaremos a los usuarios en nuestro producto final.

Proceso de card sorting

Esté método es bastante beneficioso para el proceso de diseño y no es complejo de realizar, ya

que basta con disponer de un panel para la organización de los conceptos, que puede ser una
pizarra, una mesa u otra superficie amplia, y las tarjetas que debemos entregar a los usuarios,
con los distintos conceptos a asociar, las cuales pueden ser de cartulina u otro material similar.
Es importante también recalcar que en este proceso podremos generar una validación de la
terminología o específicamente de las palabras que utilizaremos para generar la comunicación
con el usuario en nuestro producto, es decir, podemos validar si es mejor referirnos por ejemplo
en un formulario de contacto en un sitio web al botón de suscripción como “Suscríbete” o
“Quiero suscribirme”.

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 12

Existen dos tipos de métodos de card sorting que tienen pequeñas diferencias y que nos servirán
en uno u otro momento dependiendo del momento en que nos encontremos con respecto al
diseño de nuestro producto o al tipo de información que se requiera sobre el usuario.

4.1.2 Card sorting abierto

Es una versión más libre del proceso de ordenación de tarjetas, en que el usuario va a tener la
capacidad de nombrar ciertas categorías o subcategorías dentro de la organización que está
realizando. Se le entregará, de todas formas, estipulados los contenidos y la cantidad de
agrupaciones que deberá realizar, es decir, se le darán las pautas para la realización del ejercicio,
pero él podrá nombrar los grupos o subgrupos que genere con la organización que decida
realizar.

Como vimos en su definición, el card sorting nos puede servir en ciertas ocasiones para validar
terminología y saber que palabras o conceptos son más amigables y cercanos a los usuarios
para utilizar en nuestro producto. Esta forma de realizar el proceso es la más adecuada para este
objetivo, ya que tendremos una terminología entregada por el propio usuario para diferentes
sectores en nuestro producto digital. Por ejemplo, en el caso hipotético de que estemos
diseñando un sitio web donde vamos a disponer mucha información para el usuario, pero
además muchos productos a la venta de forma online, podemos darnos cuenta si el usuario, al
agrupar los productos que tenemos disponibles para la venta en nuestro sitio web, prefiere
nombrar la tienda online como “PRODUCTOS”, “TIENDA”, “STORE” o algún otro concepto que
él nos indique. A su vez podemos pedirle que genere categorías y subcategorías para esta tienda
online. De esta forma, tendremos una organización hecha por el usuario y podremos buscar
patrones comunes para la organización definitiva de los contenidos.

4.1.2 Card sorting cerrado

Esta forma de realizar el proceso es más limitada para el usuario, ya que le entregaremos tarjetas
con distintos contenidos, pero además delimitaremos cuales son las categorías y subcategorías
en las que debe organizar la información. Esto nos ayudará a validar un trabajo previo que
hayamos realizado de organización de información o al menos de estructuración, por lo que el
card sorting cerrado es ideal para realizar en procesos más adelantados del diseño.

Como hemos visto a lo largo del estudio del proceso de diseño centrado en el usuario, todos
los métodos y herramientas que tenemos disponibles son flexibles y sus etapas también, por lo
que no siempre realizaremos un card sorting de forma estricta en esta fase del proceso de
diseño, pudiendo haber generado un card sorting abierto mucho antes y teniendo la posibilidad
de realizar uno cerrado más adelante.

La arquitectura de la información tendrá un aspecto de organigrama, en que definiremos la

organización, navegación y rotulado de los distintos elementos que la componen. A
continuación, vemos en detalle cada una de sus partes, teniendo en cuanto que es preciso definir
de forma correcta cada una de ellas ya que son fundamentales para la generación de una buena
usabilidad en nuestro producto.

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 13

4.2 Organización
Existen diversas formas en las que podemos organizar el contenido e información que tiene
nuestro producto digital. Cuál de ellas será la más adecuada para utilizar va a depender de los
objetivos de nuestra organización. Esta parte de la arquitectura de información se define de
diversas formas y se dividen también por categorías.

4.2.1 Organización exacta

Es aquella que no poseen interpretaciones o que se pueden definir de una sola forma, por
ejemplo, una organización alfabética, en que dispondremos el contenido ordenado por letras y
esta no puede ser de otra forma (este tipo de organización podría llegar a utilizarse en productos
que tengan contenidos como directorios, listado de diferentes elementos, etcétera).

Otro ejemplo de organización exacta puede ser un ordenamiento cronológico o por calendario,
es decir, cierto contenido en la plataforma se ordena por fechas. Este tipo de organización puede
ser utilizado por un blog de noticias, por ejemplo, donde las publicaciones, ya sea diarias,
semanales o mensuales, se ordenarán de forma cronológica para la lectura de los usuarios.

En definitiva, la organización exacta tiene que ver con distribuir el contenido de forma ordenada
según un criterio preestablecido que tiene que ver con un ordenamiento natural para los
usuarios.

4.2.2 Organización subjetiva

La organización subjetiva, a diferencia de la exacta, tiene que ver con distribuir los contenidos e
información con criterios que no tienen un orden cronológico, numeral o lógico, sino más bien
con elementos más aleatorios o relativos a un rubro en específico, distintas funcionalidades u
otros elementos.

Una organización subjetiva, por ejemplo, puede ser una tienda en línea, que ordena sus
categorías y subcategorías de productos según los productos más vendidos o por temporadas,
por ofertas o por lo que se necesite comercialmente vender antes, es decir, el orden va a
depender de distintos factores y no tiene una lógica correlativa.

Otro tipo de organización subjetiva es, por ejemplo, una distribución funcional de los elementos
de la plataforma, que podemos encontrar en portales con públicos específicos que entrar a
buscar elementos específicos.

Un ejemplo de esto puede ser por ejemplo un portal como Airbnb (www.airbnb.cl), que lo
primero que ofrece a los usuarios es un buscador de locaciones para arriendo, que es la principal
funcionalidad que buscan los usuarios en el portal.

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 14

4.3 Navegación
La navegación es un elemento de suma importancia para la experiencia de usuario y la usabilidad
de nuestro producto. Cuando hablamos de navegación, nos referimos a la posibilidad que
tendrá el usuario de visitar un contenido u otro y de qué forma llegará a ellos, ya sea a través
de un menú principal siempre visible, una barra lateral, desplegable, banners, etc. En este punto,
estableceremos los menús y sus ubicaciones y dónde podrá ir el usuario desde la ventana
principal de nuestro producto y hacia donde no. Definiremos entonces cuanto esfuerzo deberá
hacer nuestro usuario para llegar a sus contenidos más relevantes o a los que no lo son tanto.
Como comentamos, se dice que para que un producto como un sitio web tenga una buena
navegación, el usuario debe ser capaz de llegar a cualquier contenido dentro de la plataforma
con solamente tres clics. Obviamente, los contenidos principales deberán estar disponibles
según jerarquía, de forma inmediata o rápidamente accesibles.
La navegación de un producto digital puede ser transversal o vertical. En la navegación
transversal, podemos navegar por las distintas categorías o subcategorías en el mismo nivel y
de forma lateral. Cuando tenemos, por ejemplo, un menú principal en un sitio web con distintos
enlaces internos, tenemos una distribución transversal de esos contenidos.
La navegación vertical a diferencia, se refiere a la navegación por los contenidos internos,
navegando por distintas páginas internas y cambiando de nivel. Cuando ingresamos, por
ejemplo, a una categoría o subcategoría de publicaciones en un blog de noticias, tenemos una
navegación vertical.

Diferencia entre navegación transversal y navegación vertical

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 15

4.4 Rotulado
El rotulado también es una parte importante de la definición de la arquitectura de información
y, por lo tanto, de la experiencia de usuario y usabilidad. El rotulado es una forma de representar
o presentar al usuario el contenido que tenemos para él.
En este proceso, se definen los nombres de botones, enlaces, títulos, encabezados, etc. Esta
epata nos recuerda al trabajo de card sorting abierto, en que los usuarios que apoyan el proceso
definen los nombres de las categorías o subcategorías donde agrupan los diferentes conceptos,
y es precisamente aquí donde utilizaremos esa información, definiendo de forma más específica
cada rótulo que tendrá nuestro producto en sus diferentes niveles.
El rotulado es el elemento que invitará a los usuarios a interactuar con nuestro producto y a
navegar por él, ya que, del correcto rotulado o etiquetado de los elementos interactivos como
botones o enlaces, depende que el usuario se sienta atraído a generar una interacción con
nuestro producto.

5. Distribución de información en las plataformas

Tenemos que considerar que los contenidos se pueden distribuir de distinta forma según su tipo
dentro de una plataforma web. En este caso, conoceremos dos tipos de contenido que
normalmente se utilizan en un sitio web.

5.1 Contenido estacional

Este tipo de contenido normalmente se refiere a información temporal o específica de algún
evento o espacio de tiempo. Se publica dentro de una plataforma y suele caducar o quedar sin
valor al cabo de un tiempo. Se puede referir a alguna promoción de un evento. Por ejemplo,
“Toda la información que necesitas para acudir a esta versión del Festival de Diseño 2020”.

5.2 Contenido evergreen

A diferencia del contenido estacional, el tipo de contenido no caduca dentro de un sitio web y
que es atemporal. Estará disponible de forma constante para los usuarios del sitio web y no
pierde valor con el tiempo. Hablamos, en este caso, de contenido del tipo: “¿Qué es el diseño?”

5.3 Jerarquías de información

Cuando desarrollamos la arquitectura de información, tenemos que determinar qué tipo de
jerarquía utilizaremos para distribuir la información.

Dentro de un sitio web, normalmente partiremos desde el “Home”, el “Inicio” o la “Raíz”, para ir
luego hacia todos los contenidos de la web, abordando todos los productos, artículos, categorías
y subcategorías que componen toda la información del sitio y que ya deberíamos tener
estructurados. Definiremos, entonces, si utilizaremos una jerarquía horizontal o una jerarquía
vertical.

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 16

 Diferencia entre navegación transversal y navegación vertical

La jerarquía vertical normalmente genera menos categorías principales y distribuye el contenido

a través de subcategorías o contenidos que actúan como hijos. Puede representar una visión
inicial más limpia y estructurada, pero puede llegar a entorpecer la navegación o la ubicación
de ciertos elementos en caso de tener demasiadas subcategorías o contenidos que queden
“escondidos”.

En cambio, la jerarquía horizontal provee mayor cantidad de información en primera instancia,

lo que puede facilitar la navegación y la adopción del producto de un usuario, pero podría llegar
a abrumar y generar confusión si el contenido es demasiado extenso.

6. Herramientas para la construcción de arquitectura de

la información
La creación de la arquitectura de información se puede realizar de distintas formas. Lo principal
es haber definido correctamente cada elemento, organización, navegación y rotulado. Teniendo
claro y documentado estos ítems, podemos comenzar con la creación gráfica del organigrama
que nos definirá nuestra arquitectura de información. Para esto, disponemos de variadas
herramientas digitales, programas para distintos sistemas operativos e incluso herramientas
online para la realización correcta de este proceso.
Técnicamente, la herramienta que nos permitirá realizar este proceso nos debe permitir la
creación de distintos cuadros y líneas que los interconecten, a la vez que nos permiten ordenar
y rotular cada uno de los cuadros que dispongamos.
A pesar de que el documento definitivo se realiza de manera formal en una de las tantas
herramientas digitales disponibles, aconsejamos partir con papel y lápiz para realizar los
primeros bocetos sobre la distribución de contenidos que posteriormente llevaremos a digital.

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 17

 Arquitectura de información con papel y lápiz

Para armar el organigrama mencionado, se puede utilizar herramientas indicadas para la

construcción de mapas mentales o conceptuales, así como programas de diseño como Adobe
Illustrator. En el mercado, existen un sinfín de herramientas que pueden ser pagas o gratuitas.
Detallaremos algunas a continuación.

6.1 Diagrams.net
Disponible en https://www.diagrams.net/

Esta herramienta gratuita puede usarse con una cuenta de Gmail, el repositorio de contenido
realizado con esta se encontrará dentro de Google Drive, se puede descargar como una
extensión). Esta app de diagramación gratuita de Google Drive (TM) permite dibujar:

• Diagramas de flujo
• Lenguaje Unificado de Modelado
• Diagrama Entidad-Relación
• Diagramas de red
• Modelos de proceso de negocios
• Organigrama
• Circuitos electrónicos
• Wireframes y maquetas

Esquemas con diagramas de Google Drive

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 18

6.2 XMIND
Disponible en https://www.xmind.net/

Programa para hacer organigramas de software libre que puede ser instalado en Windows, Linux
y Mac OS X. En este, se pueden desarrollar mapas conceptuales. Está diseñado para trabajar en
equipo, ya que tiene una opción para compartir el mapa con tus colegas, de manera que puedan
añadir comentarios a tu trabajo en vez de modificarlos directamente, por lo cual puedes tener
una retroalimentación de lo realizado.

Tiene una opción particular de multi impresión que permite imprimir el mapa conceptual en
varias páginas, a fin de poder juntarlas fácilmente y que cada detalle pueda ser percibido en
forma clara. Además, permite crear diagramas de Gantt, mapas mentales, espinas de pescado,
líneas de tiempo y exportar tus creaciones a distintos formatos, por lo cual este programa
también está orientado a un uso profesional, específicamente para realizar presentaciones
académicas o laborales orientadas al planteamiento de proyectos.

6.3 SMARTDRAW
Disponible en https://www.smartdraw.com

Software orientado a la creación de mapas conceptuales, diagramas de procesos y

presentaciones. Dependiendo de la necesidad del usuario, permite crear mapas sencillos o
complejos. Su procesador virtual hace prácticamente todo el trabajo, ya que, al ingresar la
información, el usuario solo deberá elegir el orden, debido a que el programa alinea y reorganiza
automáticamente todos los componentes y conectores y establece plantillas con acabado
profesional.

El archivo se puede guardar y compartirlo en aplicaciones como Google Drive, Dropbox y

OneDrive, y exportarlo a PDF, Microsoft Word, Excel o Power Point.

Interfaz gráfica de SmartDraw

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 19

6.4 CMAPTOOLS
Disponible en https://cmap.ihmc.us

Esta completa plataforma fue desarrollada por el Instituto de Cognición Humano y de Máquina
de Florida. Permite a los usuarios construir, navegar, compartir y evaluar mapas conceptuales de
otros usuarios. Es un programa para computadora de escritorio, laptop, o Tablet. A su vez, puede
ser descargada como una aplicación para Apple que permitirá crearlos desde un Ipad y
compartirlos en la nube o conectarlos con mapas conceptuales de diferentes usuarios. Incluso,
se pueden añadir recursos multimedia y modificar fondos, colores y fuente, así como enviarlos
a páginas web y editarlos en tiempo real en un servidor que incorpora el programa.

Este software es empleado en colegios, universidades, organismos gubernamentales,

corporaciones y pequeñas empresas, de forma individual o grupal, para estimular el
conocimiento, la educación, gerencia y la lluvia de ideas.

Interfaz gráfica de CMap Tools

6.5 ADOBE ILLUSTRATOR

Esta herramienta tiene como principal característica trabajar con vectores, lo que permite
generar elementos lineales de forma rápida y sencilla. Como desventaja, es necesario contar con
una licencia de uso paga.

A continuación, veremos un paso a paso para la generación de los elementos básicos necesarios
para la digitalización de nuestra arquitectura de información en Illustrator.

Como primer paso, abriremos el programa en un ordenador para comenzar con la creación del
documento que contendrá nuestro organigrama. Al abrir la aplicación, nos arrojará una primera
ventana que nos permitirá crear un nuevo documento. Aquí, definiremos de forma rápida si
queremos un lienzo para formato digital o para formato impreso, además de establecer sus
medidas en centímetros, milímetros o pixeles, sus márgenes, modo de color y su resolución.

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 20

Cuando realizamos un documento que va a ser impreso, lo recomendable es que escojamos un
formato preestablecido de impresión, como tamaño carta, A4 u otro similar. De forma
predeterminada, la herramienta nos asignará un tamaño en milímetros, el modo de color en
CMYK y una resolución de 300dpi.

Creación de nuevo documento de Ilustrator

Habiendo creado ya un lienzo para comenzar a trabajar, deberemos identificar las herramientas
que utilizaremos para la creación de los objetos básicos que utilizaremos. Estas serán la
herramienta de Rectángulo (M), la herramienta de Eclipse (L), la herramienta Pluma (P), la
herramienta de Texto (T) y los paneles de Alineación y de Color.

Sin duda, para una terminación mucho más acabada podemos, utilizar muchas más
herramientas que nos permitirán generar más detalles sobre nuestro documento, pero con estas
herramientas básicas, lograremos crear un organigrama completo de lo que necesitamos.

Lienzo de Illustrator

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 21

Lo primero que haremos al tener nuestro lienzo listo y las herramientas identificadas es crear los
rótulos para los distintos enlaces y contenidos que hemos definido en nuestra arquitectura. Para
esto, seleccionaremos la herramienta de texto y comenzaremos a escribir las diferentes etiquetas
que hayamos seleccionado para representar la arquitectura de nuestro producto. En este
proceso, escribiremos los nombres de nuestra ventana de inicio, los nombres de los distintos
botones y enlaces, categorías, subcategorías, títulos y todos los elementos que compongan la
estructura de nuestro producto.

Rótulos o etiquetas utilizados en la arquitectura de la información

En esto, un ejemplo sencillo de la distribución de un menú de navegación principal de una

empresa proveedora de insumos de impresión. Aquí, hemos establecido los rótulos de los
elementos o enlaces que van a componer nuestro menú, aún no tienen un orden o navegación
establecida, pero comenzaremos a darle forma.

En el siguiente paso, crearemos los cuadros que contendrá cada módulo. Para esto, utilizaremos
la herramienta de rectángulo (M), la seleccionaremos y, haciendo clic dentro de nuestro cuadro
de trabajo y arrastrando, generaremos un cuadro del tamaño que nos acomode. Para este caso,
utilizaremos rectángulos horizontales, para asegurar la comodidad de la lectura y la distribución
del organigrama.

Podemos asignarles un color de fondo o un color de borde a los cuadros que generemos, ya
que podrían servir para delimitar distintos niveles de navegación dentro del producto. Para esto,
seleccionaremos cada cuadro y utilizaremos las herramientas de Color, seleccionando y
definiendo los colores más adecuados según nuestro criterio.

A continuación, agruparemos cada concepto en un cuadro para tener un orden y manejo

completo de cada cuadro. Para realizar este proceso, seleccionaremos un rótulo o concepto en
conjunto con un cuadro y los alinearemos al centro, en sus ejes X e Y. Finalmente, los
agruparemos desde el menú Objeto / Agrupar.

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 22

 Conceptos con cuadros delimitadores y orden de rótulos para arquitectura de información

Ahora, tenemos control completo sobre los cuadros y están agrupados a cada concepto, por lo
que, al mover cada cuadro, podremos distribuir los conceptos de manera ordenada dentro de
nuestro lienzo. Comenzaremos entones a establecer la navegación transversal y vertical y
agruparemos los elementos según categorías o subcategorías, ordenando de manera correcta
nuestra arquitectura.

Habiendo definido un orden básico y distintos niveles, podemos establecer las líneas que
conectarán y definirán los flujos de navegación de nuestro usuario por los distintos niveles de
navegación que hemos establecido. Junto con esto, podemos definir un color distinto para los
diferentes niveles, tal como habíamos acotado anteriormente.

Realizaremos Las líneas que unirán nuestros cuadros con la herramienta de pluma,
seleccionando como punto inicial el cuadro que queremos conectar y como punto final el
destino. De esa forma, el programa realizará un vector de un lugar a otro. Debemos definir un
contorno y dejar sin relleno para que se visualice correctamente. Habiendo realizado este
proceso, debiésemos verlo de la siguiente forma:

En este ejemplo, hemos visto cómo realizar parte de la arquitectura de información de un

producto digital para una empresa distribuidora de productos e insumos de impresión. Hemos
desarrollado la parte que corresponde al menú principal de navegación, definiendo niveles de
navegación y agrupando categorías y subcategorías con sus respectivos rótulos.

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 23

7. Plataformas escalables
La escalabilidad de las plataformas web es muy importante al momento de diseñar y está
relacionado con la capacidad que tiene un sitio web de crecer de forma proporcional, junto con
los usuarios y sus requerimientos.

La escalabilidad de una plataforma suele estar asociada a su hardware, pero también es un

concepto que se aplica a la estructura de la información dispuesta en el diseño de un sitio web.
Por ejemplo, cuando implementamos el diseño de una tienda online, puede crecer con el tiempo
en cuanto a información, cantidad de categorías y productos, de forma que el diseño que
implementemos debe tener la capacidad de crecer de forma proporcional con el contenido.

La escalabilidad debe formar parte del proceso de desarrollo porque esta no es una característica
separada que se pueda agregar después durante la fase de “estabilización” del proyecto. Las
decisiones que se tomen durante las primeras fases de diseño y codificación determinarán en
gran medida la escalabilidad de la aplicación. Es recomendable tener idea de cómo va a crecer
el producto digital para que las estructuras que se agreguen después crezcan de manera natural,
evitando así que nuestro producto digital sea caótico, con muchas partes que no armonizan
entre sí.

Pirámide de escalabilidad

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 24

Conclusiones
Esta semana, revisamos todo lo relacionado a la arquitectura de la información, siendo un punto
fundamental en el diseño de experiencia de usuario. Este proceso es el que permite determinar
la estructura del sitio y su navegabilidad, que se trata de la práctica de organizar el contenido y
mostrar sus interpelaciones para que el usuario se mantenga orientado y encuentre lo que busca.

Todas las actividades relacionadas con esta importante rama del diseño de UX son
responsabilidad del arquitecto de la información, quien se encuentra encargado de proyectar,
estructurar y enlazar los diferentes contenidos dentro de del grupo de información que hay en
el sitio. Para esto, estructura un árbol de contenido o site-map. Este mapa contendrá, de manera
jerarquizada, las categorías y secciones de un sitio web y puede ser desarrollado en una serie de
herramientas gratuitas o pagas. Además, el arquitecto definirá el tipo de navegación del sitio
(transversal o vertical) y el rotulado de este, entendiéndose esto último como los textos de
categorías o de call to actions del sitio.

Dentro del proceso, también está contemplado considerar las últimas tecnologías para la
navegación en productos digitales, para entregar una interacción adecuada, y considerar la
escalabilidad del sitio, definiendo e indicando dónde se agregarán nuevas estructuras o
categorías que podrían ser necesarias de incluir en el futuro.

Bibliografía
• Krug, Steve., No me hagas pensar. Editorial Anaya Multimedia. Estados Unidos, 2000.
• Nielsen, Jakob., Usabilidad, diseño de sitios web. Editorial Pearson Alhambra. Estados
unidos. 2000.
• Mario Pérez-Montoro Gutiérrez., Arquitectura de información en entornos web, 2010.
• Jamie Teresuk., Diseñando Para Ambientes Interactivos y Espacios Inteligentes. Toptal
Design Blog. https://www.toptal.com/designers/interactive/disenando-para-ambientes-
interactivos-y-espacios-inteligentes
• Samuel Artigas., Megamenús para una buena navegación. Recuperado 2017.
https://www.torresburriel.com/weblog/2017/03/31/mega-menus-una-buena-
navegacion/

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 25

Enlaces y material multimedia

Unidad: La usabilidad (U) y la arquitectura

MÓDULO: Usabilidad y Experiencia de Usuario
de la información (AI)
Recurso Descripción
▪ Un vocabulario visual para describir arquitectura de información y diseño de
interacción de Jesse James Garret.
http://www.jjg.net/ia/visvocab/spanish.html
▪ Olga Carreras nos introduce a los fundamentos de la arquitectura de
información (AI), es decir, los principios y cimientos de la disciplina.
https://olgacarreras.blogspot.com/2011/07/arquitectura-de-informacion-
Lecturas fundamentos.html
complementarias
▪ Yusef Hassan, junto con Ana Núez nos explica e Diseño de Arquitecturas de
Información: Descripción y Clasificación, las distintas etapas y conceptos en
la organización de contenidos, así como su impacto en las opciones de
interacción para el usuario.
http://www.nosolousabilidad.com/articulos/descripcion_y_clasificacion.htm

Usabilidad y experiencia de usuario (UX) / La usabilidad (U) y arquitectura de la información (AI) 26