Define la fase para tu proyecto web.

1. Arquitectura de la
Información 02
Define la base para tu proyecto web
Julio de 2013

2. Índice
Organización de la información y prototipados.
●
Algunos conceptos fundamentales.
●
Sistemas de clasificación de contenidos.
●
Sistemas de navegación.
●
Folksonomías y AI 2.0 (Arquitectura de la información).
ACTIVIDAD
Proceso de diseño de la arquitectura de información II.

3. 01
Algunos conceptos
fundamentales

4. ●
Contenidos:
Todos aquellos “trozos” de información y objetos informativos
que deberemos organizar, estructurar y clasificar: textos, imágenes, vídeos, etc.
●
Categoría:
Tema principal bajo el que se engloban las unidades de contenido.
●
Sistema de clasificación:
Define las características comunes de los elementos del contenido e influye en el modo
en el que se agrupan esos contenidos de manera lógica.
Definir un sistema de clasificación es elegir en base a qué atributos vamos a agrupar los
contenidos y cómo vamos a organizar estos atributos.
●
Taxonomía = ciencia de la clasificación:
El objetivo de la taxonomía es organizar los contenidos de manera lógica utilizando
diversos criterios. Esto permite ordenar los contenidos en un sistema estructurado y
relacionado (jerárquico).
La taxonomía de contenidos es la organización del conjunto de categorías bajo las que
clasificar las unidades de contenido.

5. Patrones de búsqueda de
información
!
Sabe lo quiere
Sabe lo que quiere y cómo encontrarlo
?
Tiene una pista
Sabe lo que es pero no el nombre exacto o cómo encontrarlo
Navega…
A ver qué encuentra…
¿¿??

6. 02
Sistemas de clasificación
de contenidos

7. Los sistemas de clasificación de contenidos están conformados por:
●
Esquemas de clasificación / estructura de contenidos:
Definen las características comunes de los elementos del contenido e influyen en el modo
en el que se agrupan esos contenidos de manera lógica.
●
Estructuras de navegación:
Definen los tipos de relaciones que hay entre los elementos de contenidos y los grupos.
Dos esquemas de clasificación idénticos pueden tener estructuras de navegación diferentes:
Jerárquica
Jerárquica - lineal

8. Esquemas de organización
(Estructura de contenidos)
Definen las características comunes de los elementos del contenido e influyen en el modo en el
que se agrupan esos contenidos de manera lógica:
●
Exactos
●
Alfabéticos
●
Cronológicos
●
Geográficos
●
Ambiguos / inexactos
●
Temáticos / por tópicos
●
Funcionales / por tareas
●
Por Público Objetivo / audiencias
●
Metafórica
●
Híbridos
●
Combinan esquemas diferentes

9. Esquemas de clasificación exactos
○
Alfabéticos:
Enciclopedias, diccionarios, directorios...
○
Cronológicos:
Archivos históricos, prensa, diarios, guías televisivas, histórico, agendas, blogs...
○
Geográficos:
Notas climatológicas, guías de turismo, temas político económicos, regionales...
Características:
●
●
●
●
Dividen la información en secciones definidas, las que son mutuamente excluyentes.
Requiere que el usuario conozca el nombre específico de lo que está buscando = muy útiles
para usuarios que saben exactamente lo que están buscando.
Limpios. Fácil de diseñar y mantener.
Fáciles de usar.

10. Esquemas de clasificación inexactos
o ambiguos
○
Temáticos:
Organizan los contenidos por materia o tema. Es uno de los diseños más útiles y en su diseño es
muy importante definir hasta qué nivel de profundidad abarcarán. Ej. páginas amarillas.
○
Por tareas / funcionales:
Organizan el contenido en torno a un conjunto de procesos, funciones o tareas. Son apropiados
cuando es posible anticipar una cantidad limitada de tareas que los usuarios desearán realizar. Ej.
comprar, contactar.
○
Por audiencias / PO:
Cuando existen dos o más audiencias claramente definidas. También es útil cuando el usuario
puede “personalizar” parte del contenido. Ej. particulares, empresas... bancos, aseguradoras,
etc.

11. ○
Metafóricos:
Su objetivo es hacer familiar, comprensible e intuitivo aquello que es novedoso o desconocido
para el usuario.
Ejemplos:
●
“Metáfora del escritorio“ de los sistemas operativos.
- Facilitar la familiarización del usuario con el uso de directorios, ficheros y aplicaciones.
- En el escritorio, las herramientas y contenidos se organizan en carpetas;
- cuando un documento no es útil, lo "tiramos" a la papelera de reciclaje;
●
Entornos de e-learning / campus virtual:
- Cafetería.
- Secretaría.
- Etc.
Características:
●
Dividen la información en categorías que carecen de una definición unívoca, basándose en la
ambiguedad del lenguaje, la organización y la subjetividad humana.
̈
●
Difíciles de diseñar, mantener y usar, muchas veces son más útiles que los sistemas exactos.
Ello ocurre porque los usuarios no siempre saben exactamente que vienen a buscar = útiles para
este tipo de usuarios.
●
El éxito de este sistema depende de su diseño inicial y de su adaptación a la evolución temporal
en lo referente a la creación de nuevas subcategorías.

12. Esquemas de clasificación híbridos
Combinan elementos de distintos esquemas.
Debe hacerse con criterio y cuidado ya que pueden confundir al usuario, al no poder aplicar
conceptos claros para comprender bajo qué sistema se organiza la información.
Uno de los ejemplos más claros, son los video clubs que permiten buscar la información por
categoría (sistema ambiguo – temático) o por orden alfabético (sistema exacto).
Otras veces primero optamos por la categoría, en una o más páginas, hasta llegar a una última
donde los contenidos están ordenados alfabéticamente.

13. Estructuras de organización
Definen los tipos de relaciones que hay entre los elementos de contenido y los grupos.
Jerárquicas
Lineales / Secuenciales
Hipertextuales

14. Estructuras de organización
jerárquicas
Estructura más común:
○
○
Popularización por grandes portales y directorios temáticos.
El orden jerárquico presente en nuestra vida cotidiana los usuarios
encuentran a gusto con este tipo de estructura.
“entienden” y se
Se recomienda comenzar la construcción de una arquitectura de la información a partir de este
modelo.
La organización en forma de árbol es:
○
○
Flexible y escalable: organización de grandes cantidades de páginas.
Muy orientativa para el usuario en su navegación.
Normalmente, la estructuras jerárquicas se utilizan junto a las hipertextuales, permitiendo al usuario
una vez llegado a una página de una rama 'saltar' hacia páginas de otras ramas pero relacionadas
temáticamente con la página actual.

15. Anchura y profundidad de las estructuras de organización jerárquica.
Se recomienda mantener un equilibrio entre el ancho y la profundidad de la estructura.
●
Ancho: cantidad de opciones que tendrá cada jerarquía.
●
Profundidad: número de niveles que contendrá la arquitectura.
●
Si la arquitectura es muy angosta y profunda: cantidad de clicks para encontrar la información
que buscan. Se recomienda que la profundidad del sitio nunca supere los cinco niveles, y esto ya
perjudica la experiencia de navegación del sitio.
●
Si la arquitectura es muy ancha y poco profunda: demasiadas opciones en cada nivel puede
crear confusión sobre qué contenidos contiene cada categoría y a dónde deben dirigirse para
buscar la información que necesitan. Además, es desagradable para el visitante encontrar los
escasos contenidos que contendrán cada sección al ser una estructura poco profunda.

16. Reducido y profundo
(6 clics para ir de A a B)
Extenso y superficial
(3 clics para ir de A a B)

17. Como regla general se recomienda que los sitios, en cuanto a ancho, no superen las siete opciones
teniendo en cuenta que una mayor cantidad podrían abrumar y confundir a los usuarios.
En los sitios en los que se espera un crecimiento:
●
Optar por un sistema jerárquico ancho y poco profundo.
●
Permite añadir contenidos sin grandes reestructuraciones ya que es más sencillo agregar
elementos a niveles secundarios de la jerarquía que a la página principal.

18. Estructuras de organización lineales
/ secuenciales
Los páginas se encuentran interrelacionadas de forma lineal.
Esta estructura se utiliza en:
○
○
Tareas de navegación o interacción en las que el usuario debe completar cada uno de los
pasos ordenadamente (carrito de compra, registro como usuario,...)
Para la segmentación de bloques de información de naturaleza secuencial (artículos,
comics, diapositivas...).
Se trata de un tipo de estructura muy sencilla por lo que no provoca desorientación alguna al
usuario en la navegación.

19. Estructuras de organización
hipertextuales o reticulares
No existen jerarquías, y todo está potencialmente conectado con todo.
El hipertexto es la base sobre la que se asienta la Web.
Son muy flexibles pero presentan problemas de navegación al usuario.
El usuario difícilmente llega a construirse un modelo mental de la estructura, por lo que puede llegar a
perderse y desorientarse.
Páginas = enlazadas por similitud o relación directa entre los contenidos, permitiendo al usuario
que se encuentra visualizando una página 'saltar' hacia otras que le puedan interesar por contener
información relacionada.
No conviene comenzar el diseño de una arquitectura de la información a partir de este modelo: lo
mejor es crear una estructura jerárquica básica y en una segunda fase construir los links
transversales necesarios.

20. 03
Sistemas de navegación

21. ¿Qué son los sistemas de navegación?
Una vez decidido el esquema y la estructura de un sitio: habilitar lo que vendrían a ser los
elementos que permiten conectar los distintos sitios (escaleras, puertas, ventanas, atajos, saltos
al vacío electrónico...) y que son los que permiten encontrar la información.
Los sistemas de navegación son los elementos de una interfaz que permiten la navegación por
las diferentes secciones y páginas que componen el sitio web.
Generalmente se presentan como menús formados por diferentes opciones, con las que el usuario
puede interaccionar.
Ejemplos de elementos de navegación: menús, barras de navegación, migas de pan, mapas de
navegación, índices, visitas guiadas...
Características de un buen sistema de navegación
Todo buen sistema de navegación debe satisfacer al menos los siguientes objetivos:
●
Establecer un modo de ir de un sitio a otro dentro de la web.
La navegación debe ser clara, concisa, consistente y fácilmente identificable dentro de la
página.

22. ●
Comunicar al usuario la relación entre el contenido que está visualizando y la navegación
del sitio.
Debemos permitir que el usuario sepa en todo momento dónde se encuentra, hacia dónde
puede ir desde este punto y que partes del sitio ha visitado ya.
●
Reflejar la arquitectura del sitio que subyace al sistema de navegación.
Debemos diferenciar la navegación global, la navegación local o subsecciones y la navegación
contextual.
●
Permitir volver a la página de inicio rápidamente.
En un sitio web la página de inicio sirve como punto de partida y como lugar al que volver
cuando nos encontramos perdidos, por eso debe ser sencillo ir a este punto desde cualquier
parte del sitio.

23. 3 preguntas a las que un buen sistema de navegación debe ayudar a los usuarios a responder
(Nielsen)
¿Dónde estoy?
Es la pregunta más importante que hay que responder. Si los usuarios no saben dónde están
no podrán entender la estructura del sitio.
Hay que identificar la página en relación a la estructura del sitio.
¿Dónde he estado?
El usuario debe conocer en qué páginas ha estado, esta funcionalidad está presente en los
navegadores con el cambio de color de los enlaces incrustados.
¿Dónde puedo ir?
Los sistemas de navegación deben proporcionar los enlaces necesarios para permitir el
desplazamiento de los usuarios.

24. Tipos de sistemas de navegación
Integrados: corresponden a la navegación estructural del sitio.
●
●
●
●
●
●
●
Jerárquicos.
Globales.
Locales.
Específicos.
Contextuales.
Sociales.
Auxiliares / de cortesía.
Suplementarios: añaden capas adicionales de navegación, corresponden a servicios auxiliares:
mapa del sitio, etc.
Los motores de búsqueda: complemento a los sistemas de navegación.
●
●
Mismo objetivo: posibilitar que los usuarios encuentren la información que buscan.
2 aproximaciones distintas y complementarias para lograr un mismo objetivo.

25. Sistemas de navegación jerárquicos (integrado)
●
●
●
Sistema más tradicional.
Ofrece acceso a los diferentes niveles
jerárquicos inferiores a partir de la página inicial.
Inconvenientes para la navegación horizontal
por lo que se recomienda combinarlo con otros
sistemas = NAVEGACIÓN VERTICAL.

26. Sistemas de navegación globales (integrado)
●
●
Generalmente complementa a uno jerárquico.
Posibilidad de navegación tanto a lo profundo como a lo largo del sitio = NAVEGACIÓN
VERTICAL Y HORIZONTAL.
Los más utilizados son los basados en una barra de navegación que permite el acceso a las
principales secciones, cada sección en su interior se complementa con otras barras o menús laterales
relativos a estas.

27. Sistemas de navegación locales (integrado)
Tradicionalmente unidos al diseño de navegación de sitios web complejos
complementar el
sistema global de navegación con la inclusión de uno o más sistemas locales de navegación (SNL).
= concepto de subsede o subsitio acuñado por Jacob Nielsen para identificar las situaciones en
las que una colección de páginas web de un sitio muy grande sugiere un mecanismo de navegación
y estilo propio exclusivo de ellas.
Eje.: catálogo de productos. Las páginas relativas a esta categoría contendrán vínculos entre ellas
como pueden ser "Buscar productos por categorías, marcas, etc."

28. Sistemas de navegación específicos (integrado)
Se utiliza principalmente cuando no es posible clasificar las relaciones entre las páginas web en
algunos de los sistemas de navegación anteriores.
Ejemplo más ilustrativo: enlaces dentro de un texto hacia otro documento relacionado, esté o no en
el sitio. Wikipedia
esquema hipertextual.

29. Sistemas de navegación contextual
●
●
●
●
Preguntarse en cada página ¿qué otra información de nuestro sitio es de interés para un usuario
que esté en esta página concreta?
Buscar esas relaciones entre páginas del sitio y enlazar unas con otras.
Los enlaces deben ser directos de una a otra, no a través de una categoría que las contiene.
Acceso a información complementaria, resultados relacionados, venta cruzada, etc.
Sistemas de navegación “social”
●
●
●
●
●
●
Lo que compran otros usuarios.
Lo que visitan otros usuarios.
Lo que leen otros usuarios.
Lo que marcan otros usuarios.
Lo que valoran otros usuarios.
Etc.
Sistemas de navegación auxiliares o de cortesía
Acceso a ítems no usados de forma general pero proporcionados por comodidad, como por ejemplo
formulario de sugerencias, mapa del sitio, aviso legal, etc.

30. Mapas o tablas de contenido (suplementario)
Son listas de texto que representan la jerarquía de un sitio web.
Se deben representar sólo los cuatro o cinco niveles de jerarquía superior, para permitir un
acceso directo al contenido.
Índices (suplementario)
Se utilizan cuando la información a representar no está tan estructurada o no tiene una organización
jerárquica. El índice normalmente representa el contenido del sitio web a través de una lista de
palabras claves organizadas alfabéticamente o por fechas.
Normalmente son planos y presentan sólo uno o dos niveles de profundidad. Los índices funcionan
bien cuando los usuarios conocen el nombre del ítem que buscan y por ello al usuario se le pueden
ofrecer listas relativamente largas de opciones. Ejemplo: Glosarios.

31. 04
Folksonomias y AI 2.0

32. "
Folcsonomía o folksonomía es una indexación social, es decir, la clasificación colaborativa
por medio de etiquetas simples en un espacio de nombres llano, sin jerarquías ni relaciones
de parentesco predeterminadas. Se trata de una práctica que se produce en entornos de
software social…
Wikipedia

33. "
Folk (gente, pueblo) + Taxonomy (taxonomía, clasificación)
Thomas van der Wal
Folksonomia= sistema de organización subyacente.
“Clasificación realizada por la gente“
La folksonomía surge cuando varios usuarios colaboran en la descripción de un mismo material
informativo.

34. Social Bookmarking in plain english - Subtitulado al español

35. El etiquetado social de los contenidos web / Etiquetado colaborativo
●
Concepto de la web 2.0: los usuarios pueden ahora también organizar o clasificar los contenidos
en categorías mediante la asignación de etiquetas (tags): palabras claves para su descripción =
metadato.
●
Etiquetado semántico: aporta significado a los datos y a menudo creado en colaboración,
permite el acceso a la información de la web mediante etiquetas o palabras clave previamente
asignadas a los contenidos.
●
No pertenece a un sistema formal de clasificación, difiere de las taxonomías y esquemas de
clasificación formales, donde hay varias clases de relaciones explícitas entre los términos.
○ Etiquetas añadidas por el usuario como un elemento organizativo fundamental.
○ Palabras clave permiten a los usuarios organizar los contenidos según un vocabulario de su
elección.
●
Importancia del “etiquetado” en medios sociales: recuperación de información, SEO,
visibilidad.

36. 05
Actividades
_ Proceso de diseño de la arquitectura de información de un sitio web II.

37. Técnica “personas”
Personaje = descripción detallada de los usuarios de una aplicación y sus metas.
●
●
Creación de arquetipos a través de entrevistas a usuarios y especialistas en producto.
Concepto "usuario“ = demasiado amplio, a un usuario se le puede presuponer todo tipo de
conocimientos, aptitudes y comportamientos, a una persona, no.
Escenario = la descripción de un personaje en una situación de uso de la aplicación con una meta
concreta
poner a los personajes en acción. Gran ayuda en la planificación del diseño porque
proporciona una persona y un entorno real para los que crear el producto.
Diseñar para lo más probable y no para todo lo posible.
Descarte de elementos que aunque posibles, no sean de probable uso.

38. Card sorting
●
●
●
●
Los usuarios agrupan un número de tarjetas por categorías (abiertas o cerradas) de tal manera
que la AI del sitio refleje las clasificaciones hechas por los propios usuarios.
Observación de cómo los usuarios agrupan y asocian entre sí un número predeterminado de
tarjetas etiquetadas con las diferentes categorías temáticas del sitio web.
Categorización de contenidos siguiendo la lógica marcada por los usuarios.
Técnica presencial o remota (internet).

39. Árbol de contenidos (blueprints)

40. Prototipado (wireframes)

41. Ejemplo de metodología práctica
Fase 1
Fase 2
Fase 1
Investigación y análisis
Concepto y diseño
Desarrollo e implantación
●
●
E-branding: posicionamiento
y objetivos.
●
Desarrollo sitio web,
Seguimiento UX.
●
Definición estrategia de
construcción de ident. digital.
●
Test de usuario sobre sitio en
desarrollo / producción +
ajustes.
●
Nuevo contenidos, servicios y
funcionalidades sitio web.
●
Implantación.
●
Entrevistas internas
stakeholders: diagnóstico
situación, necesidades,
objetivos internos, etc.
Sector: Benchmarking
competencia, buenas
prácticas y tendencias.
●
Definición PO / segmentos y
priorización.
●
Actualización catalogación
contenidos.
●
Detección necesidades:
encuestas online / focus /
entrevistas…
●
Card sorting.
●
Árbol de contenidos.
●
Evaluación experto sitio web.
●
Prototipado navegable de
baja fidelidad.
●
Consultoría SEO.
●
Test de usuario sobre
prototipo de baja fidelidad.
●
Diseño visual.
Implantación
●
Catalogación contenidos y
servicios.
Ajustes
Monitorización

42. Diagnóstico de situación: Investiga!
Conocimiento de la marca, el consumidor, el mercado y el entorno:
●
Públicos objetivo: quiénes son, dónde están, …
●
Competencia: que presencia tiene en internet, en redes sociales.
●
Reputación online: se habla de mi en Internet, en positivo o en negativo, etc.
●
Seo/Keywords: haz un estudio de las palabras clave con las que quieres posicionarte.
●
Conclusiones sobre riesgos, oportunidades, insights de mercado, demandas de usuarios…

43. Herramientas
●
●
●
●
●
●
●
●
●
Google Alerts: monitorización de resultados sobre un determinado tema.
Google Trends: tendencias de búsqueda.
Google Blogs: blogs.
Technorati: blogs.
Touchgraph seo: relaciones en google.
Samepoint: monitorización SSMM.
How sociable: monitorización SSMM.
Addict-o-matic: monitorización SSMM.
Topsy: Monitorización twitter y Google +.