Construcción de Servicios de

Información Digital

Tema 2. Arquitectura de Información

Estructura del tema CSID

1. Experiencia de usuario y diseño

centrado en el usuario.
2. Arquitectura de la información para la
web
3. Introducción al posicionamiento en
buscadores
4. Resumen: proyecto de AI

Tema 2 2
La Experiencia de usuario CSID

● Jesse James Garret: “la manera como un producto se comporta y es utilizado por
el usuario” (http://www.jjg.net)
– “Los productos tecnológicos que no funcionan de la manera que las personas esperan
las hace sentir estúpidas –aun cuando efectivamente hayan logrado lo que se
propusieron”
● Wikipedia: “el conjunto de factores y elementos que determinan la interacción
satisfactoria del usuario con un entorno o dispositivo concretos y son capaces de
generar en él un conjunto de emociones positivas sobre el sitio y su uso”.
● En la Experiencia de Usuario intervienen diversas disciplinas:
– Arquitectura de la Información, Diseño de Interacción, Usabilidad, la Accesibilidad,
Diseño gráfico, Estética, Psicología, extrapolación de principios del mundo del
Márquetin, etc.
• Los límites entre unas disciplinas y otras no siempre están bien delimitados y podemos hablar
de zonas grises en las que distintas disciplinas se mezclan.

Tema 2 3
¿Para qué sirve la experiencia de usuario? CSID

● Buena experiencia de usuario (EU / UX, User eXperience) en el sitio web:

– Diseñar una buena experiencia de usuario es clave para ayudar a los usuarios de un sitio
web a encontrar lo que necesitan, y a realizar las acciones necesarias que logren los
objetivos de la organización o negocio (por ej., leer un artículo o realizar una compra).
– Los fundamentos de la EU en un sitio web se integran en la arquitectura de información.
● Desventajas de una EU no adecuada:
– pérdida de ventas (e-commerce)
La ratio de conversión es una
– disminución de la productividad (intranet) forma de medir la efectividad de la
– frustración por parte del usuario (web) EU.

● Ventajas de una EU satisfactoria: Mide los porcentajes de visitantes

– aumento de la fidelización de usuarios que realizan una acción
previamente planificada:
– aumento de la ratio de conversión (usuarios a clientes) subscribirse a un boletín, comprar
– aumento del tiempo de navegación de los usuarios un producto, personalizar la interfaz,
enviar un formulario,…
– mejora de imagen de marca

Tema 2 4
El panal de la experiencia de usuario CSID

● El panal de la experiencia de usuario es un modelo explicativo elaborado por el

conocido consultor Peter Morville, que resume las cualidades fundamentales,
desde el punto de vista del usuario, para que un producto o servicio consiga
construir una buena experiencia de usuario:
(http://semanticstudios.com/publications/semantics/000029.php )
– Es un diagrama para explicar a sus clientes
la importancia de la experiencia de usuario útil
y la necesidad de ir más allá de la usabilidad.
– El panal acierta al abarcar varios propósitos usable deseable
de la experiencia de usuario simultáneamente
(visión global e integrada). valioso
– Necesidad de definición de prioridades con los
clientes: ¿qué es más importante para el encontrable accesible
cliente, que su web sea deseable o accesible?.
– Es siempre más barato construir una web creible
usable y accesible desde el principio,
que hacerlo después.
Tema 2 5
El panal de la experiencia de usuario CSID

¿Nuestros productos y sistemas son

Interfaz centrada en
los métodos y las
perspectivas de la
interacción
humano-ordenador.
Usabilidad necesaria
pero no suficiente.
útiles?; definir soluciones
innovadoras que sean más útiles.
útil
La búsqueda de la eficiencia
debe tener en cuenta la
importancia y valor de la
imagen, identidad, marca, y
otros elementos de diseño
emocional.

usable deseable
Sitios web
navegables y objetos Ha de ofrecer valor a los
localizables; valioso patrocinadores; debe
encontrar lo que se contribuir a los resultados,
necesita. así como mejorar la
satisfacción del cliente.
encontrable accesible

creible
Los elementos de
diseño influyen en la Para las personas con
confianza de los limitación tecnológica o
usuarios versus lo debido a algún tipo de
que les decimos. discapacidad.
Tema 2 6
Elementos de la experiencia de usuario CSID

● Desde el punto de vista del diseñador, modelo que explica cómo construir webs
y aplicaciones para que la EU sea positiva
• Los Elementos de la EU (Jesse James Garret): “The Elements of User Experience”,
http://www.jjg.net/elements/pdf/elements_ch02.pdf

● Es una metodología de diseño centrada en el usuario

– la única manera de conseguir una experiencia de uso satisfactoria es tener al usuario
como centro de todo el proceso de conceptualización y desarrollo del producto o
servicio
– el proceso de implementación de la experiencia de usuario no debe dejar nada al azar.
– cinco etapas que contemplen las posibles acciones del usuario así como sus
expectativas.
– diferenciación crucial: la web orientada a la información y la web orientada a las tareas.

Tema 2 7
Etapas de la Experiencia de Usuario CSID

● El proceso de implementación de la experiencia de usuario

– Las decisiones que se toman en una etapa determinada del proceso afectan el resultado final del mismo.
Superficie como el resultado final gráfico y visual del
Concreto
producto o servicio. ¿Qué aspecto queremos que tenga
el producto final?
Esqueleto o Esquema como concreción de la ubicación
de elementos en pantalla (botones, imágenes, textos…)
¿Qué componentes permitirán al usuario utilizar el sitio?
Estructura como forma de visualizar la relación que los
diferentes elementos del sitio tienen entre ellos y como se
comportarán. ¿Cómo se mantienen juntas las piezas y
como se comportarán?
Alcance como concreción de la estrategia en requisitos:
¿de qué tipo de sitio web hablamos y cuáles serán sus
características, funcionalidades y requerimientos?.
Estrategia como la base de todo: ¿Qué se persigue al
Abstracto crear el sitio? ¿Qué quieren nuestros usuarios?.
Tema 2 8
Elementos de la experiencia de usuario CSID

Fuente: http://www.jjg.net/elements/translations/elements_es.pdf Tema 2 9

Etapas de la EU: Estrategia CSID

● Definir y formular con claridad y concisión las necesidades de los usuarios y

los objetivos del producto o servicio.
– comprender aquello que los usuarios necesitan, cómo piensan, y cómo se comportan, e
incorporar este conocimiento en todos los aspectos del proceso.
• Necesidades y Objetivos: determinarán la toma de decisiones a lo largo de todo el proceso de
diseño de la experiencia de usuario.

– Objetivos del producto / servicio

• Entender objetivos de la organización y el contexto en que el producto/servicio debe funcionar:
documentación disponible (organigramas, estudios, etc.), reuniones y entrevistas con equipos (directivo,
técnico, contenido) y personas implicadas.
– Necesidades del usuario
• ¿Quiénes son los usuarios del producto o servicio?, ¿Hay un único usuario o hay más de un tipo de usuario?,
¿Qué necesidades tienen?, ¿Cuáles son sus prioridades? ,
• ¿Qué objetivos buscará conseguir el usuario en nuestro sitio web?, ¿En qué contexto consumirá el
producto/servicio?,
• ¿Cuáles son sus modelos mentales? ¿Qué comportamiento de búsqueda tendrá?, ¿Qué lenguaje usa?

Tema 2 10
Etapas de la EU: estrategia CSID

Necesidades del usuario, pasos…

1. Segmentación de audiencia para entender mejor sus necesidades.
– dividir la audiencia en grupos que comparten características y necesidades: criterios
demográficos; en función de la actitud ante un tema determinado o nuestro producto; actitud
ante la tecnología y el conocimiento del usuario sobre el tema en cuestión.
2. Averiguar sus necesidades (métodos de investigación de usuarios)
– encuestas, entrevistas o grupos focales: recopilar información más genérica sobre las actitudes y
percepciones generales de los usuarios
– estudios de campo o tests de usuarios: entender aspectos específicos del comportamiento de los
usuarios y su manera de interactuar con el sitio web (análisis de logs de búsqueda, test de
usuario de búsqueda de información o realización de tareas) .
3. Diseñar el sitio para los tipos de usuarios identificados
4. Probar un prototipo (pruebas de usuario)
5. Hacer cambios y pruebas de usuario hasta que los usuarios se sientan cómodos en tu producto y lo
encuentran sencillo de utilizar.

Tema 2 11
Etapas de la EU: alcance CSID

● Requerimientos específicos que describen el contenido, las características y

las funcionalidades que ofrecerá el sitio web a los usuarios.
– especificaciones funcionales: qué debe tener y qué podrán hacer los usuarios con él
– requerimientos de contenido: de qué producto estamos hablando y qué características
tendrá.
● Benchmarking: estudiar los productos y servicios de la competencia para conocer
lo que se está haciendo en estos momentos en el sector y tomar ideas.
● Diferenciar entre webs orientadas a tareas (interfaz de software) y webs
orientadas a información (sistema hipertextual).

● Especificaciones funcionales: listado priorizado de las funcionalidades y características

que tendrá el producto o servicio.
– Los diagramas de casos de uso son una técnica del campo de la ingeniería del software que se
usa para capturar los requisitos potenciales de un sistema.
– Cada caso de uso proporciona uno o más escenarios que indican cómo debería interactuar el
sistema con el usuario para conseguir un objetivo específico.
Tema 2 12
Etapas de la EU: alcance CSID

● Requisitos de contenido:
– nuevo sitio: qué contenido incluir, de qué disponemos, qué generar y quién, diferentes media
disponibles,...
– rediseño de un sitio: naturaleza, organización, volumen, velocidad de crecimiento del contenido
existente.
• Categoría y subcategoría a las que la página pertenece
• Título de la página y URL
• Tipo de documento
• Otros elementos presentes (pdf’s, vídeos, etc.)
• Breve descripción del contenido de la página
• Autor y persona responsable de la página
• Fecha de creación, revisión y expiración de la página (si existe)
• Status: mantener, eliminar, revisar, redactándose...
• Notas: cualquier dato relevante que se quiera añadir

– Aproximación de abajo a arriba: 2 o 3 muestras de cada tipo de contenido y ver relaciones que
puedan surgir, jerarquías, grupos, criterios de búsqueda que se pueden usar para localizar el
contenido,...

Tema 2 13
Etapas de la EU: Estructura CSID

● De qué manera se articularán los diferentes elementos entre ellos para crear un sitio
web consistente y coherente.
– ¿cómo piensan y trabajan los usuarios?: buscar modelos y secuencias, pautas de comportamiento
de los usuarios, para…

– Diseño de la interacción
• presentar las diferentes opciones a los usuarios con el objetivo de ayudarles a realizar las tareas
(anticipar como se comportará el usuario ante la interfaz de software para definir cómo se
adaptará y responderá el sistema al comportamiento del usuario).
– Arquitectura de la información
• diseñar, organizar, etiquetar y crear sistemas de navegación y búsqueda que ayudan los usuarios
a encontrar y gestionar la información.
● Diagramas de flujos (Blueprints, Architecture Map).
– marcar los flujos o itinerarios posibles del usuario en la aplicación.
– mostrar de una manera visual y fácilmente entendedora la estructura y el funcionamiento.
• especificación de categorías temáticas, niveles, enlaces, procesos que se realizan en la aplicación o los
servicios que se ofrecen al usuario.

Tema 2 14
Etapas de la EU: estructura y Blueprints CSID

● Jesse James Garret

– "vocabulario visual para describir arquitectura de información y diseño de interacción"
– Representación de los diferentes componentes arquitectónicos (páginas, menús,
botones,...) y especificación de las relaciones entre ellos.
– notación gráfica concebida para realizar un diseño de lo general a lo concreto, ya que
sigue el principio de la simplificación de representación a partir de cajas y flechas.
– se ha convertido en un estándar para el desarrollo de prototipos
– (http://www.jjg.net/ia/visvocab/spanish.html)

Alternativa:
http://www.nosolousabilidad.com/
articulos/diagramacion.htm

Tema 2 15
Etapas de la EU: Esquema o Esqueleto CSID

● Aspectos específicos de la interfaz, navegación y diseño de la información que

permiten concretar la abstracción de la estructura antes de pasar a la etapa definitiva
y última del diseño visual.

– la etapa del esquema define qué forma tendrá la funcionalidad definida en la estructura
en cada una de las pantallas principales.
– pantallas concretas, mostrando cómo presentaremos la información y cómo
navegaremos a través del sistema (diseño de la navegación) o realizaremos las tareas en
la aplicación (diseño de la interfaz).

● Diseño de la interfaz:
– conseguir que la interacción del usuario con la aplicación sea lo más intuitiva y eficiente
posible para poder lograr sus objetivos.
• diferentes elementos (desplegables, casillas, botones,...); el usuario es capaz de entender su
significado y funcionamiento; facilitan completar la tarea al usuario.

Tema 2 16
Etapas de la EU: esquema CSID

● Diseño de la navegación:
– conseguir que el usuario pueda acceder a todas las pantallas del sitio de una forma
sencilla mediante los elementos necesarios (menús, botones, enlaces,...).
– comunicar la relación existente entre los elementos de navegación (grupos,
jerarquías,...) así como entre los elementos de navegación y la pantalla que el usuario
está consultando.

● Diseño de la información:
– pensar de qué manera se debe presentar la información para que el usuario la pueda
entender y usar de manera sencilla y efectiva.
– datos o información presentada de la forma que tenga más significado para el usuario y
comunique mejor: un listado, una gráfica, etc.
– agrupar y organizar los diferentes elementos informativos

Tema 2 17
Etapas de la EU: esquema y wireframes CSID

● Wireframes
– (mockup, prototype; diagrama esquemático, maqueta, prototipo)
– Los wireframes son prototipos de la arquitectura de una página concreta,
dónde se presenta de forma esquemática la disposición, agrupación y orden de
los elementos y de los contenidos de la página.

– esquema visual, muestra el layout organizativo de la interfaz que será la base para que
diseñadores y programadores trabajen cada pantalla principal.
– pantallas tipos o pantallas principales:
• aquellas pantallas que hacen de “plantilla” o modelo, es decir, son la base para generar nuevas
pantallas en que sólo cambiará el contenido.
– la ficha final de un producto: una vez diseñada esta pantalla se generarán muchas (el catálogo de
productos) en que solamente cambiará la información.
• el sistema debe mantener una coherencia interna, y ajustarse a las convenciones existentes en
Internet (facilitaremos al usuario la comprensión de nuestro producto).

Tema 2 18
Etapas de la EU: esquema y wireframes CSID

● Tres tipos de wireframes.

– Baja fidelidad: aspectos más básicos – navegación y estructura – sin incluir aspectos
gráficos ni contenido real.
– Fidelidad intermedia: elementos gráficos y algunos elementos de contenido real.
– Alta fidelidad: en html incluyendo parte de la interactividad de la página con todos los
elementos para poder testear la página con usuarios reales.

● Nivel de detalle:
– depende de lo que se quiera representar en el esquema y de lo avanzada que esté la
arquitectura de la información.
• mucho detalle: empezará a parecerse al aspecto visual (look and feel) definitivo de la interfaz;
puede servir para aprobar la distribución de elementos en pantalla así como empezar a explorar
los gustos del cliente a nivel gráfico
• http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/

Tema 2 19
Etapas de la EU: Superficie CSID

● Tratamiento gráfico consistente y atractivo a los diferentes elementos de la

interfaz.

– Consistencia interna entre las diferentes pantallas para que el usuario sepa en todo
momento que continúa en el mismo sitio y que todo lo que ha aprendido hasta el
momento del sitio es válido.
– El diseñador gráfico puede darle el tratamiento gráfico que considere e introducir
cambios en el wireframe, pero el estilo y la gráfica final de la interfaz deben ser
coherentes con el usuario del producto y los objetivos de la empresa.
– El diseño visual es lo primero que todo el mundo juzga de un producto o servicio porque
es lo primero que vemos, y nos causa una impresión positiva, negativa o neutra.

● Maqueta: propuesta gráfica de la inferficie.

– A veces se presenta únicamente la pantalla principal, y en otras la pantalla principal y
alguna interior.

Tema 2 20
Estructura del tema CSID

1. Experiencia de usuario y diseño

centrado en el usuario.
2. Arquitectura de la información
para la web
3. Introducción al posicionamiento en
buscadores
4. Resumen: proyecto de AI

Tema 2 21
Caos VS Orden CSID

Tema 2 22
Usuarios vs Contenidos
La Arquitectura de la Información
parte del diseño estructural del
sitio (organización, navegación,
rotulación, búsqueda) tomando
decisiones para equilibrar...
El diseño centrado en el
usuario que aporta el marco
para diseñar el modo en el
que el usuario accede a los
contenidos, los consulta y Usuario Contenido
los utiliza.
Tema 2
CSID
El diseño centrado en
el contenido, que
estructura los elementos
de información en una
web diseñada con lógica
y con coherencia
23
Arquitectura de la Información para la Web CSID

● La Arquitectura persigue distribuir los espacios de la manera más armónica posible

para su mejor aprovechamiento y comodidad del usuario.
● La Arquitectura de la Información para la Web pretende lo mismo: crear espacios
llenos de contenidos de acceso sencillo e interrelacionados entre sí, de manera que el
usuario localice rápidamente lo que busca, le sea de utilidad y lo encuentre agradable
y atractivo de consultar.

• Rosenfeld y Morville la definen en una triple vertiente:

– Objeto: Estructurar y organizar los sitios web para ayudar a los
usuarios a encontrar información y a los gestores del sitio a
mantener los contenidos.
– Estructura: Combinar organización, etiquetado y esquemas de
información dentro de un sistema de navegación.
– Función: Diseñar la estructura de la información para facilitar la
finalización de tareas basadas en información mediante un
acceso intuitivo a los contenidos.
Tema 2 24
AI: ¿Para qué sirve y como se hace? CSID

Tema 2 25
Los 8 principios sobre AI de Dan Brown (1/2) CSID

Objetos (Objects): el contenido debe tratarse como algo en evolución con su

propio ciclo de vida. Para utilizar mejor un contenido deben reconocerse sus
diferentes atributos y comportamientos. Cada proyecto debe comenzar
identificando los tipos de contenido tanto a escala general como detallada.
Elecciones (Choices): Se debe ofrecer a los usuarios opciones significativas y
centradas en algo específico sin llegar a abrumarlo y afectar negativamente a su
experiencia. La información debe organizarse en jerarquías, evitando largas
listas de opciones. Categorizar y subcategorizar el contenido es mucho más
efectivo.
Revelación (Disclosure): Identificar y ofrecer la información que necesita el
usuario, así como aquella que precise para tener una idea de lo que encontrarán a
medida que profundizan en su sitio, ni más ni menos (revelación progresiva).
Ofrecer información de forma limitada permite al usuario asimilar y recordar mejor lo
que está viendo sin sobrecargas.
Ejemplos (Exemplars): La descripción del contenido en cada categoría con
ejemplos de la misma facilitar a los usuarios comprender lo que está viendo. Por
ejemplo, al navegar por categorías en Amazon, a menudo muestran productos que
entran dentro de esa categoría.
Tema 2 26
Los 8 principios sobre AI de Dan Brown (2/2) CSID

Puertas principales (Front-Doors): Muchos visitantes llegan a un sitio desde un

punto distinto a su página de inicio (motores de búsqueda, redes sociales, etc.) Por
ello, las páginas deben incluir información básica sobre su ubicación, así como la
navegación al nivel superior, páginas relacionadas, etc.
Clasificación múltiple (Multiple classification): Debe haber diferentes maneras
para que los usuarios naveguen por el contenido de un sitio, puesto que las
personas pueden usar diferentes métodos y rutas de navegación para encontrar la
información.
Navegación enfocada (Focused navigation): Los menús de navegación no se
deben definir por donde aparecen, sino por lo que contienen. En muchos casos,
puede haber más de un menú de navegación en el sitio para proporcionar
diferentes formas de acceder al contenido.
Crecimiento (Growth): En muchos sitios, la cantidad de contenido crece con el
tiempo por lo que debe organizarse considerando este hecho. Los menús de
navegación y arquitectura de información general deberían poder escalar
contemplando dicho crecimiento sin volverse engorroso o difícil de manejar.

https://doi.org/10.1002/bult.2010.1720360609
https://www.slideshare.net/brownorama/eight-principles-of-information-architecture
Tema 2 27
Aplicación de la Arquitectura de la Información CSID

● Organizar la información: crear esquemas de organización de la información

(alfabéticas, cronológicas, geográficas, funcional, perfiles, etc.) y definir las estructuras de
acceso a la misma (jerárquicas, bases de datos, hipertexto).
● Definición de los vocabularios controlados: se usan para describir el contenido y
normalizar terminología utilizada para la descripción de los metadatos de los contenidos
(temas, personas, lugares, eventos….)
● Diseñar los sistemas de navegación: a partir de las estructuras y esquemas de la
organización de la información se crean los sistemas de navegación (globales, locales, ad-
hoc) para orientar y permitir al usuario desplazarse.
● Modelado de contenido, wireframing y rotulación (etiquetado): usados para
ordenar, disponer y representar la información mediante modelos que posteriormente se
implementarán en páginas concretas.
– Sistemas de rotulación: para representar la información a través de un lenguaje
adecuado al sitio web, en función de su contenido y tipologías.
● Sistemas de búsqueda: cuya presencia es complementaria a la navegación. Permiten
localizar información rápidamente en grandes sitios web que albergan una gran cantidad
de contenidos.
Tema 2 28
Organización = Evitar la sensación de “estar perdido”... CSID

● No sabe dónde está al desconocer su

situación actual en relación a la estructura
?+?
?
global del sitio Web y no percibe la relación
que hay entre la página actual y el resto de +? ?
páginas. +
● No sabe dónde ha estado puesto que
desconoce la ruta de navegación que ha
?+
seguido hasta la posición actual y por
consiguiente no es capaz de identificar las
páginas ya visitadas.
● No sabe a dónde puede ir al no poder
identificar los enlaces que contienen
información relacionada con la página
actual.

Tema 2 29
Dificultades para organizar la información en la Web CSID

● La ambigüedad del léxico: derivado de la propia ambigüedad del lenguaje

natural.
● Dificultad en asociar elementos a categorías: algunos contenidos no son
susceptibles de clasificarse bajo una única categoría.
● Hetereogeneidad de las Web: su granularidad (nivel de detalle) y diversidad de
formatos dificulta el uso de sistemas de organización estructurados (un artículo y
una revista a texto completo deben manejarse de modo diferente).
● Diferentes perspectivas entre diseñadores y usuarios: los sitios web se suelen
organizar replicando la estructura corporativa de la organización a la que
pertenecen, sin considerar que el usuario de nuestro sitio puede tener una visión
basada en sus necesidades.
● Decisiones políticas a nivel interno: la estructura interna y la competencia
departamental hace que se decida (sin una justificación objetiva) que unos
contenidos tengan más preponderancia que otros. Esto hace que el
mantenimiento del sitio sea complejo.
Tema 2 30
Sistemas de organización CSID

● Se encargan de estructurar y organizar los contenidos de un sitio web.

– Acostumbran a construirse mediante la clasificación, a partir de uno o varios criterios
concretos (por ejemplo el tema sobre el que versan, la fecha de creación o la audiencia
a la cual van dirigidos), de los contenidos que alberga esa página.
● Suelen encontrarse formados por dos componentes:
–Los esquemas de organización dividen y clasifican los ítems de
información o contenidos que alberga un sitio web en grupos a partir de
un criterio. Los ítems de cada grupo comparten unas características
definitorias que pueden ser consideradas como el aspecto crítico del
esquema. Los criterios más utilizados son los alfabéticos, los cronológicos
y los temáticos.
–las estructuras de organización sistematizan los grupos de ítems de
información o contenidos resultantes de los esquemas, mostrando las
dependencias lógicas que existen entre estos grupos.

Tema 2 31
Esquemas de organización CSID

● El ser humano sigue cada día esquemas de organización casi sin darse cuenta:
localiza un nº telefónico en una guía, encuentra las bebidas en un supermercado,
etc.

≠
Otras veces se encuentra verdaderamente
perdido, basta cambiar de supermercado
habitual, por ejemplo.
Esto se debe a que cada esquema es,
esencialmente, diferente. El de la guía
telefónica es exacto (organización alfabética
dentro de una población) y el del
supermercado es ambiguo (híbrido de lugar y
función).
Tema 2 32
Organizar: Tipos de esquemas CSID

● Exactos: Dividen la información en secciones bien definidas y excluyentes entre

sí. El usuario sabe lo que busca y debe de encontrarlo en su sitio definido, no en
otro. Exigen al usuario conocer el nombre exacto del servicio o producto que
busca (la guía de teléfonos para personas no sirve si buscamos por servicios, para
eso se inventaron las páginas amarillas).
– Alfabético: un directorio de una organización
– Cronológico: los archivos de comunicados de prensa de una organización
– Geográfico: páginas de turismo

● Ambiguos: Dividen la información en categorías. Son complejos porque a priori

no siempre se sabe lo que se busca. La búsqueda de información se hace iterativa
e interactiva.
– Temático: un directorio organizado por materias (páginas amarillas)
– Funcional: típico de aplicaciones Web (en el Aula Virtual los contenidos y aplicaciones se
agrupaban por función en el menú principal)

Tema 2 33
Esquemas de organización CSID

Esquema de
organización exacto
geográfico

Esquema de
organización
ambiguo temático

http://www.milanuncios.com

Tema 2 34
Estructuras de Organización CSID

● Aunque todos los días nos enfrentamos con estructuras organizativas, rara vez
pensamos en ellas: las películas son lineales por naturaleza si bien su trama no
tiene por qué serlo.
● La estructura de la información define las formas primarias en que los usuarios
pueden navegar por una Web, con sus propias ventajas e inconvenientes y que
suelen combinarse en estructuras híbridas:

Secuencial

Jerárquica

Hipertexto Base de datos

Tema 2 35
Estructuras de Organización CSID

● Esquemas jerárquicos: comunes en nuestra experiencia (libros, organigramas de empresas); de fácil

entendimiento para la mayoría de los usuarios.
– Si estamos ante un esquema de organización ambiguo es difícil dividir el contenido en categorías excluyentes:
colocar los elementos más ambiguos en más de una categoría, pero evitando que la categorización pierda su
sentido.
– Equilibrio entre amplitud (número de elementos en cada nivel) y profundidad (número de niveles) del árbol
jerárquico generado.
● Hipertexto: nodos y vínculos entre esos elementos.
– Los nodos pueden estar vinculados entre sí en forma jerárquica, sin jerarquía alguna, o combinadas (unos
elementos conectados jerárquicamente y otros no).
– Gran flexibilidad; problemas de complejidad y confusión para el usuario: raras veces es utilizada como
estructura principal de organización.
– Se utiliza para partes del contenido del sitio, en relación con estructuras de otro tipo (jerárquicas o de base de
datos), como complemento de la funcionalidad de éstas.
● Base de datos: archivos organizados en registros, cada uno de los cuales está formado por uno o más campos,
relacionados entre sí.
– Estructuras rígidas en sus formatos: a veces es difícil su utilización en sitios con contenidos muy heterogéneos
o muy grandes.
– utilizado en subsitios o conjuntos estructurados de información homogénea, por ejemplo: directorios de
personal; catálogos de productos;...

Tema 2 36
Ejemplo de estructura de organización hipertextual CSID

https://es.wikipedia.org/wiki/Guerra_de_Corea
Tema 2 37
Organizar: Modelos de organización CSID

Combinan diferentes estructuras y esquemas de organización:

● Página única: Todo el contenido está en una sola página. Funciona bien en sitios con contenido
limitado y propósito específico. Comunes en sitios web personales, productos individuales, etc.
● Plano: Sitios pequeños (una docena de páginas). Solo hay un nivel de navegación. Común en sitios
de agencias, sitios de comercio electrónico con solo un puñado de productos, etc. Los sitios planos
se vuelven significativamente menos utilizables a medida que crecen en tamaño.
● Índice: Similares a los sitios planos, pero con una lista de todas las páginas del sitio en una página
central. Útil para sitios con un propósito específico: comercio electrónico, portafolios profesionales,
etc.
● Margarita: Los usuarios regresan a una página central tras realizar una acción específicas. Ejemplo:
en un gestor de tareas, los usuarios regresan a la lista de tareas pendientes tras finalizar una de
ellas.
● Jerárquica estricta: Solo se puede acceder a los contenidos desde una página principal para guiar a
los usuarios a través de la información de una manera muy específica. Estos modelos funcionan
bien en sitios educativos, donde una lección se basa en la última.
● Jerarquía multidimensional: Proporciona más de una forma de acceder a un contenido en
particular. Este es uno de los patrones organizacionales más comunes, en parte debido a su
facilidad de implementación. Complicadas de lograr y mantener.
Estos diversos métodos para organizar el contenido pueden adaptarse e hibridarse para satisfacer las
necesidades o aspectos concretos de un proyecto.
Tema 2 38
Metadatos y Vocabularios Controlados CSID

● Los metadatos contienen información descriptiva sobre algunos aspectos

de los contenidos: título, fechas de edición/modificación, autores,
materias, descripción, etc.
● Los vocabularios controlados aportan homogeneidad al contenido de
aquellos metadatos que hacen referencia a objetos individuales: materias,
autores, temas, etc. Intentan normalizar el lenguaje natural para evitar
ambigüedades, al tiempo que se definen relaciones semánticas entre los
elementos del vocabulario.
– Anillos de sinónimos: agrupa estructuras formadas por términos con significado
equivalente.
– Ficheros de autoridades: contiene valores permitidos para hacer referencia a personas,
lugares, eventos en el tiempo, etc.
– Esquemas de clasificación: clasificaciones jerárquicas o taxonomía que organizan los
temas en clases excluyentes.
– Tesauros: términos entre los que se establecen relaciones semánticas (jerárquicas y
asociativas), así como de equivalencia para el control de la sinonimia.
Tema 2 39
Ejemplo de uso de vocabulario controlado CSID

Tema 2 40
Sistemas de navegación CSID

● Los sistemas de navegación se basan en el proceso de aprendizaje asociativo con

los contenidos.
– Son un factor clave para el éxito de una web y han de diseñarse cuidadosamente para
evitar la desorientación del usuario y teniendo en cuenta las características de
exploración del navegador.
● Funciones:
– Desplazarse por la estructura del sitio web.
– Ayudar al usuario a conocer su localización en la estructura del sitio ya que ha podido
llegar a la página directamente desde un motor de búsqueda.
– Ofrecer una visión global del contenido del sitio.
● Equilibrio entre profundidad y amplitud, usando enlaces transversales como
complemento.
● Los elementos de los sistemas de navegación pueden ser diversos:
– Algunos, como las barras de desplazamiento y los menús desplegables se encuentran en
las mismas páginas del contenido.
– Otros, como las tablas de contenidos y mapas del sitio proporcionan acceso a otras
páginas dentro de la estructura de la Web.
Tema 2 41
Tipos de Elementos en los sistemas de navegación CSID

• Barras de navegación: conjunto de enlaces de texto o imágenes con sofisticados efectos que realizan
las funciones de vínculos. No se recomienda usar barras gráficas.
Ejemplo: http://www.apple.com

• Pestañas: permiten varios paneles con información contenidos dentro de una sola area principal, usando
pestañas (verticales u horizontales) para alternar entre ellos.
Ejemplo: http://library.harvard.edu

• Menús desplegables: ofrecen de forma compacta muchas opciones de navegación. Deben usarse
con cautela y no agrupar un demasiados de enlaces para que no resulten confusos.
Ejemplo: http://www.uniovi.es

• Tabla de contenido: permite mostrar los niveles de una jerarquía para dar una visión general del
contenido y facilitando su acceso. Muy útil en sitios Web con jerarquías profundas.
Ejemplo: http://pespmc1.vub.ac.be/toc.html

• Índice: son una alternativa a la tabla de contenido. Pueden presentar palabras clave o frases en orden
alfabético sin indicar jerarquía alguna. Tampoco representan mucha profundidad.
Ejemplo: http://www.w3.org/Consortium/siteindex.html#technologies

• Mapa Web: representación gráfica de las principales páginas de un sitio web. Están en desuso por
razones de accesibilidad para usuarios y motores de búsqueda, puesto que en formato textual las tablas de
contenido y los índices cumplen con el mismo cometido.
Ejemplo: http://www.zonacolon.com/principal2.htm
Tema 2 42
Alcance de los sistemas de navegación CSID

● Jerárquicos: desglosan el sitio Web desde el inicio mediante categorías

excluyentes a modo de directorio.
● Globales: presente en todo el sitio web, dotándolo de gran capacidad de
desplazamiento vertical.
– El más simple es una barra de navegación ubicada en la parte superior o inferior
del sitio y que da acceso a las páginas cabecera del resto de áreas con un
vínculo de vuelta a página principal (Inicio).
● Locales: relacionados con la idea de “subsitio Web”. Si en la Web de una
empresa es interesante consultar un catálogo de productos, cuando el usuario
accede al mismo encontrará un sistema de navegación específico del catálogo,
distinto del global de la Web, ‘subsitio’ con sistema propio de navegación ‘local’.
Cuando finalice la consulta, el usuario debe volver a manejar el sistema global.
● ‘Ad hoc’: a veces necesitamos remitir al usuario a otra fuente informativa para
ampliar información sobre lo que está leyendo antes de seguir adelante (es un
enlace para ampliar información como usamos en Wikipedia para definir o
presentar un concepto enlazando con otra página del wiki).

Tema 2 43
Sistema de búsquedas
● Consideraciones
– Complementa al resto de elementos de la AI e
incrementa posibilidades de éxito para recuperar
información.
– Hay que tener en cuenta el tamaño y contenidos del – ¿Cómo deben ordenarse los documentos obtenidos?
sitio y los perfiles y necesidades del usuario.
● Interfaz de búsqueda:
– Grado de aptitud para buscar por parte de los
usuarios.
– Clase de información que desean los usuarios.
– El tipo de información que se busca.
– Cuanta información se busca.
● Ayuda en los sistemas de búsqueda:
– Qué es lo que se puede buscar.
– Cómo se pueden plantear sus consultas.
– Opciones para personalizar los resultados
obtenidos.
– Qué hacer si el usuario no encuentra la información
correcta: por obtener demasiados resultados, por no
obtener nada, por no obtener nada útil.
Tema 2
CSID
● Resultados:
– ¿Qué información debe mostrarse por cada
documento obtenido?
– ¿Cuántos documentos obtenidos deben mostrarse?
(Cronológicamente, Alfabéticamente, por
relevancia).
– Facilitar la posibilidad de que el usuario repita una
consulta, emprender una nueva o filtrarla.
– Dejar que el usuario conozca dónde se encuentra
dentro del conjunto de resultados que se le muestra.
– Mostrar el contexto de cada resultado (sección o
categoría a la que pertenece el contenido
recuperado).
– Permitir que el usuario sepa cuántos documentos se
obtuvieron con la consulta.
– Repetir el texto de la consulta de modo notorio en la
página de resultados.
44
Sistemas de etiquetado o rotulación CSID

● Rotulación: forma de representar la información tanto para los contenidos como

para la navegación y basada en la imagen corporativa que quiere transmitir la
organización.
• Los rótulos son una consecuencia natural de la creación de sistemas de organización y
navegación dentro de los sitios web.
• El sistema de rotulación determina los términos utilizados para nombrar las categorías,
opciones y enlaces utilizados.
● Rótulos en el diseño de sistemas de navegación: sensación de coherencia textual, visual
y funcional de todos los sistemas de navegación del sitio.
– Aplicación coherente: los elementos de navegación aparecen en todo el sitio web.
– Aporta familiaridad y contexto coherente.
– Hay que tener cuidado con la polisemia y la sinonimia de los rótulos lo cual se puede resolver
utilizando textos aclaratorios (notas).
● Rótulos como términos de indización: metadatos.
– Mejoran la posibilidad de que una página sea hallada mediante un motor de búsqueda. Etiquetas
<META> y <TITLE>.
– Apoyan y mejoran la exploración del sitio web de forma complementaria a los sistemas de
organización y navegación.
Tema 2 45
Sistemas de etiquetado o rotulación CSID

● Rótulos como enlaces: uso adecuado en el contexto descriptivo del texto que rodea a los
enlaces.
– Se utilizan con naturalidad dentro del cuerpo de una parte de la información.
– Es necesaria una coherencia entre estos rótulos y el contenido informativo al que conducen. Son
difíciles de visualizar por parte del usuario.
● Rótulos como encabezados: los encabezados describen la información a la que preceden.
– Coherencia terminológica.
– Coherencia en la granularidad: en cada nivel los rótulos deben tener la misma importancia
informativa y los niveles de rótulos no varían mucho en la profundidad con que abarcan partes de
un sitio.
● Sistemas de rotulación gráfica: iconos, imágenes, fondos, motivos, etc.
– Lenguaje más limitado que el textual por la dificultad de representar ciertos conceptos.
– Recomendable utilizar pequeños rótulos textuales junto con los iconos.
– Aportan identidad gráfica coherente y se prestan a visualización y uso de forma coherente.

● Rotulación estructural: define el estilo visual de los elementos estructurales de un

contenedor.
Tema 2 46
Estructura del tema CSID

1. Experiencia de usuario y diseño

centrado en el usuario.
2. Arquitectura de la información para la
web
3. Introducción al posicionamiento en
buscadores
4. Resumen: proyecto de AI

Tema 2 47
Posicionamiento: Usabilidad, Ubicuidad y Visibilidad CSID

● Muchos autores intentan responder la pregunta: “¿qué es más importante,

la forma o el contenido?”
–Sería el contenido pero en realidad no importa mucho si no podemos llegar a él.
Un sitio es usable, sólo si lo podemos encontrar.
● La ubicuidad de un sitio Web se apoya en la buscabilidad y la
visibilidad, esto es, la capacidad de un sitio web de encontrarse en
Internet y ser fácilmente localizado.
–En este sentido, la usabilidad presta atención a tres factores: organización del
contenido, aspectos estéticos y fidelización del usuario
● Ligado a la visibilidad de un sitio web se encuentra su capacidad de
aparecer bien posicionado en los resultados que devuelven los
buscadores de Internet a una consulta o pregunta planteada por el usuario
(posicionamiento web)

Tema 2 48
Posicionamiento en buscadores CSID

● ¿Qué es?
– Técnicas para modificar el puesto en el que aparece una página web en Los usuarios
el resultado de un motor de búsqueda. normalmente no van
● Utilidad más lejos de la
– El uso de dichas técnicas pueden ayudar a mejorar el posicionamiento segunda página de
del recurso y por lo tanto a que los usuarios lo localicen mejor y resultados del
accedan más a él. buscador, lo cual
dificulta el acceso a
● Factores Directos: aquél que el buscador utiliza de forma directa
los recursos que se
para ordenar los resultados. encuentran en las
– El listado e importancia de los factores varía de un buscador a otro y no páginas de resultados
es público (aunque se sabe cuáles son los principales): no visualizadas
– Tipología: contenido del recurso, ubicación, temporalidad, términos de
consulta (palabras clave, cuáles y ubicación en la página), enlaces, Son factores que
visitas al recurso, tipografía utilizada y URL del recurso. influyen en el
● Factores Indirectos: aquellos factores que influyen en un factor número de visitas y
directo. enlaces que
– Tipología: Contenido de calidad, Credibilidad, Interoperabilidad del puedan realizarse al
recurso, Usabilidad, Accesibilidad recurso.
Tema 2 49
Posicionamiento: Factores Directos CSID

● Ubicación Términos de Consulta (palabras clave):

– Aparición de los términos en el título de la página
– Aparición de los términos de consulta en la URL de la página.
– Aparición en las etiquetas META (description).
– Aparición en el body y sobre todo en encabezamientos.
– Nombres de ficheros con términos de consulta.
– Aparición de los términos al comienzo del cuerpo del documento.
● Tipografía
– Uso en los términos de consulta de etiquetas HTML para resaltar la relevancia
(mayúsculas, negrilla, encabezados (Hn), etc).
● Términos de consulta en cuerpo del documento.
– Alta frecuencia de aparición de los términos de consulta.
– Frecuencia de aparición de términos no frecuentes.
– Proximidad de los términos en el texto (consultas con más de una palabra).
● Contenidos:
– Riqueza de documentos del sitio (pdf, doc, etc).
Tema 2 50
Posicionamiento: Factores Directos CSID

● Enlaces:
– Número de enlaces entrantes y salientes (negativo).
– Texto de los enlaces entrantes (coincidencia con términos de consulta).
– Prestigio de las páginas que contienen los enlaces entrantes.
● URL:
– Proximidad a la raíz de la URL del término de búsqueda.
– Prestigio del dominio de la URL (org, edu, um.es,…)
● Criterios temporales:
– Frecuencia de actualización de la página.
– Antigüedad del sitio en el índice del buscador.
● Ubicación:
– Situación Geográfica o IP e idioma de la página.
● Visitas
– Visitas que recibe una página mostrada en los resultados que ha sido recuperada por los
términos de consulta.
Tema 2 51
Posicionamiento: Palabras clave CSID

● En esencia, una web no es más que información textual.

– Los buscadores indizan una web fijándose en el contenido del título de la página, de la
descripción de la página y en el contenido de la página de inicio (suele ser un resumen
de todo lo que el usuario va a encontrar en el sitio),...
– A continuación, los buscadores buscarán la navegación (índice) y saltarán de enlace en
enlace por las distintas secciones del sitio web (capítulos) repitiendo el proceso de
análisis: título, descripción, encabezamientos, contenido…
● Palabras Clave (“conceptos clave” o “keywords”)
– una palabra o una combinación de palabras con las que los algoritmos de los buscadores
clasifican una web dentro de su base de datos.
• recomendable usarlas en URLs, títulos, descripciones, encabezados,…
– Estas palabras clave serán las mismas que teclean los usuarios cuando utilizan los
buscadores para encontrar información de su interés.
– Palabras claves de mayor valor: uso frecuente en los buscadores por parte de los
usuarios, bajo número de competidores por esa palabra y con estrecha relación con la
temática y objetivo del sitio web.

Tema 2 52
Palabras clave: proceso de elección CSID

1. Búsqueda de palabras clave

– programas “sugeridores” de palabras clave: muestran lista de palabras clave
relacionadas con un concepto clave
– opinión personal o de un departamento comercial o de marketing,...
– observación de la competencia (código de sus páginas)
2. Análisis de la calidad
– La relación palabra clave vs. temática / objetivo de mi Web
– La popularidad de uso
– La competencia existente por esa palabra clave
3. Selección del grupo más adecuado
– ordenación de mayor a menor relevancia
– número de palabras clave relacionado de forma directa con el tamaño de la página Web
y con la temática de la misma
– [SEM: presupuesto, el tiempo disponible para invertir y nichos de mercado]

Tema 2 53
Estructura del tema CSID

1. Experiencia de usuario y diseño

centrado en el usuario.
2. Arquitectura de la información para la
web
3. Introducción al posicionamiento en
buscadores
4. Resumen: proyecto de AI

Tema 2 54
Modelado, wireframing y rotulación CSID

• Modelado de contenido: determinar tipos de contenido

estructurado que representan las necesidades del
usuario, la lógica y los requisitos del negocio, y las
prácticas editoriales internas. También puede resultar en la
creación de tipos de contenido documentado, o plantillas
de contenido, para que los estrategas de contenido o
redactores utilicen a medida que crean contenido.

• Wireframing: representar conexiones entre páginas e y

funcionamiento del sitio. A partir de la información
recopilada durante la investigación y las decisiones
tomadas durante la creación de la jerarquía, una AI
diseñará ciertos bocetos clave para demostrar cómo un
usuario interactuará con la información disponible. Los
wireframes son útiles tanto para los diseñadores (que
tienden a pensar visualmente) como para los clientes.

• Rotulación (Etiquetado): Elección de elementos

(textuales, simbólicos, visuales) para identificar y
representar determinados elementos como secciones,
enlaces, opciones de navegación, metadatos de
indización, párrafos, objetos destacados, listas, etc.

Tema 2 55
Componentes de una página web CSID

Tema 2 56
Componentes de una página web CSID

● Cabecera:
– Ubicado en la parte superior de la página
– Información básica de la organización o marca.
– Es consistente (se repite en cada página del
sitio)
– Suele incluir: logotipo, menú de navegación,
buscador, breve descripción
● Cuerpo del contenido:
– Alberga el contenido principal.
– Diferente en cada página del sitio.
● Pié de página:
– Ubicado en la parte inferior.
– Suele contener información de contacto,
botones de redes sociales, logotipo, política de
privacidad.

Tema 2 57
Contenidos del sitio CSID

● Inicio (home):
– La página más importante con información relevante de la organización y alojada en
el dominio principal.
– Proyecta la marca, diferencias con la competencia, porque deberían elegir los
productos o servicios de la organización, resumen de productos, servicios, ofertas,
etc.
● Productos y servicios
– Productos organizados en un catálogo.
– Se muestra descripción, precio, imágenes, gastos de envío, llamada a la acción (añadir
a la cesta, reservar, etc).
● Blog:
– Contenidos dinámicos de actualidad.
– Incluye archivo, buscador, suscripción.
– Organizado por categorías y etiquetas.
● Contacto:
– Teléfono, dirección, horarios, email, formulario de contacto
● Política de privacidad
– Página obligatoria, generalmente enlazada desde el pie de página. Debe incluir
información sobre uso de cookies del sitio.
Tema 2 58
Proyecto de Arquitectura de la información (1/2) CSID

● Decidir orientación del sitio:

– web corporativa, tienda online, blog, etc.
● Análisis de los usuarios y del mercado:
– Investigar para conocer a fondo la importancia de los productos o contenidos del sitio a
través de keyword research, analizar el mercado (Google Analytics, Encuestas,
Entrevistas). Hay que centrarse en el usuario para obtener una comprensión exhaustiva
de sus expectativas y organizar el sitio de forma eficiente para ellos.
● Perfil del usuario y casos de uso:
– Identificar la audiencia y grupos de usuarios específicos para conocer sus objetivos,
motivaciones, características y comportamiento.
● Mapeo del flujo de las tareas del usuario:
– Intentar definir las acciones que realizará el usuario en el sitio web (navegación,
interacción, compra, etc) y su secuenciación.
● Taxonomía y metadatos:
– La taxonomía de clasificación de los contenidos (categorías y etiquetas) y los metadatos
de descripción de los tipos de contenidos son indispensables para la organización del
sitio.
Tema 2 59
Proyecto de Arquitectura de la información (2/2) CSID

● Modelar datos (o contenido):

– Identificar los tipos de contenidos, su estructura. Hay que definir bien las necesidades del usuario
en cada tipo de contenido, las acciones que puede realizar el usuario y los procesos de gestión
editorial.
● Estructura interna de cada página:
– modelado de cada tipo de contenido, identificando los diferentes elementos, disposición y
significado de los mismos.
● Esquema jerárquico de las páginas:
– Implica la organización de las páginas en niveles. Es recomendables que desde la página principal
el usuario no deba activar más de tres o cuatro enlaces para llegar a cualquier contenido del sitio.
● Navegación: muestra como acceder al sitio web.
– Es necesario trabajar bien su ubicación en la página (siempre en el mismo sitio y con los mismos
elementos), niveles jerárquicos, el etiquetado de los enlaces y la claridad/coherencia del menú en
relación al contenido del sitio y estilo visual.
● Planificar la implantación:
– establecer procesos, calendario de desarrollo del proyecto y reparto de tareas del equipo.
Elaborar un informe ejecutivo. Evaluaciones periódicas de los resultados.

Tema 2 60