Arquitectura de la Información 02

Define la base para tu proyecto web

Julio de 2013

ÍndiceOrganizació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).

ACTIVIDADProceso de diseño de la arquitectura de información II.

01Algunos conceptos fundamentales

● 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.

Patrones de búsqueda de informaciónSabe lo quiere

Sabe lo que quiere y cómo encontrarlo

Tiene una pistaSabe lo que es pero no el nombre exacto o cómo encontrarlo

Navega…A ver qué encuentra…

!

?

¿¿??

02Sistemas de clasificación de contenidos

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

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

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.

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.

○ 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.

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.

Estructuras de organización

Definen los tipos de relaciones que hay entre los elementos de contenido y los grupos.

Jerárquicas Lineales / Secuenciales Hipertextuales

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 “entienden” y se

encuentran a gusto con este tipo de estructura.

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.

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.

Reducido y profundo(6 clics para ir de A a B)

Extenso y superficial(3 clics para ir de A a B)

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.

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.

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.

03Sistemas de navegación

¿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ónTodo 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.

● 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.

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.

Tipos de sistemas de navegaciónIntegrados: 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.

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.

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.

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."

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.

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íaAcceso a ítems no usados de forma general pero proporcionados por comodidad, como por ejemplo formulario de sugerencias, mapa del sitio, aviso legal, etc.

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.

04Folksonomias y AI 2.0

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

"

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.

Folk (gente, pueblo) + Taxonomy (taxonomía, clasificación)"

Social Bookmarking in plain english - Subtitulado al español

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.

05Actividades

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

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.

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).

Árbol de contenidos (blueprints)

Prototipado (wireframes)

Fase 1Investigación y análisis● 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.

● Detección necesidades: encuestas online / focus / entrevistas…

● Evaluación experto sitio web.

● Consultoría SEO.

● Catalogación contenidos y servicios.

Fase 2Concepto y diseño● E-branding: posicionamiento

y objetivos.

● Definición estrategia de construcción de ident. digital.

● Nuevo contenidos, servicios y funcionalidades sitio web.

● Actualización catalogación contenidos.

● Card sorting.

● Árbol de contenidos.

● Prototipado navegable de baja fidelidad.

● Test de usuario sobre prototipo de baja fidelidad.

● Diseño visual.

Fase 1Desarrollo e implantación● Desarrollo sitio web,

Seguimiento UX.

● Test de usuario sobre sitio en desarrollo / producción + ajustes.

● Implantación.

Ajustes Monitorización

Implantación

Ejemplo de metodología práctica

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…

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 +.