Información general sobre la arquitectura de la contenidos de un sitio web

1. Arquitectura de la
información Web
M.C. Christian Fernando Bonner Barbosa
christian.bonner@gmail.com
linkedin.com/in/bonnermx
@christianbonner

2. Arquitectura de la
Información Web
@christianbonner

3. Arquitectura de la información Web
¿Qué es? (1/3)
El estudio de la organización de la información con el
objetivo de permitir al usuario encontrar su vía de
navegación hacia el conocimiento y la comprensión de
la información.
- Richard Saul Wurman (1975)
@christianbonner

4. Arquitectura de la información Web
¿Qué es? (2/3)
El arte y la ciencia de estructurar y clasificar sitios
web e intranets con el fin de ayudar a los usuarios a
encontrar y manejar la información.
- Louis Rosenfeld y Peter Morville (1998)
@christianbonner

5. Arquitectura de la información Web
¿Qué es? (3/3)
Es la disciplina y arte encargada del estudio, análisis,
organización, disposición y estructuración de la
información en espacios de información, y de la
selección y presentación de los datos en los sistemas
de información interactivos y no interactivos.
- Wikipedia
@christianbonner

6. Arquitectura de la Información Web
¿Quién la desarrolla?
El arquitecto de información es quien se encarga de
organizar grandes cantidades de contenidos con el
objetivo de que el usuario pueda manejarlos, navegar
por ellos fácilmente y satisfacer sus necesidades de
información.
- Yusef Hassan Montero Yusef y Ana Núñez Peña
.
@christianbonner

7. Arquitectura de la información Web
¿Para qué sirve?
Ayuda al desarrollo y producción de espacios de
información en sitios web, con el fin de que la
asimilación de contenidos por parte del usuario sea
eficiente y efectiva, y para que el sitio sea accesible y
usable.
- Wikipedia
@christianbonner

8. Arquitectura de la información Web
Objetivos Internos
Objetivos Externos
Accesibilidad:
Posicionamiento en buscadores:
• Múltiples dispositivos (pc, tablets y
móviles)
• Ser encontrado rápidamente.
• Contenidos claros y simples
• Generación de leads
• Mecanismos sencillos de navegación
• Audiencia relevante
Usabilidad
Branding
• Organización de contenidos consistente
• Mayor alcance.
• Facilidad de uso.
• Reforzamiento de la marca
• Rapidez para encontrar contenidos
• Interacción con la audiencia
@christianbonner

9. Aquí
Arquitectura de la información Web
¿Cuándo iniciar?
Arquitectura de
la información
Diseño visual
Diseño de la
información:
navegación
Requerimientos
de contenido
Objetivos del
sitio basado en
necesidades
Brief del sitio web
Mapa del sitio web
Bocetos/Wireframes
Diseño del sitio web
Entregables
Diagrama Basado en: Los Elementos de la Experiencia de Usuario – Jesse James Garrett
@christianbonner

10. Arquitectura de la información Web
¿Cómo?
1. Agrupar y
Etiquetar el
Contenido
2. Identificar
Requerimientos
Funcionales
3. Análisis de
Sitios Similares
(Benchmark)
R. Arquitectura de
Contenidos:
Mapa del Sitio
Documentos de referencia:
• Brief del sitio web
• Personas y Escenarios (buyer persona)
• Pauta de comparación de sitios web
@christianbonner

11. Arquitectura de la información Web
1
Agrupar y Etiquetar el contenido (1/2)
Una de las técnicas más
populares utilizadas por los
arquitectos de información, es la
conocida como card sorting u
ordenamiento de tarjetas.
Mapa del Sitio
Se
generan
tarjetas
con
categorías, subcategorías y
contenidos individuales de las
distintas secciones que tendría
el sitio web.
@christianbonner

12. Arquitectura de la información Web
1
Agrupar y Etiquetar el contenido (2/2)
• La técnica de 'card sorting' se basa en la 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.
• De esta forma, partiendo del comportamiento de los propios
usuarios, es posible organizar y clasificar la información de un
sitio web conforme a su modelo mental.
Producto de trabajo:
Mapa del sitio preliminar
@christianbonner

13. Arquitectura de la información Web
2
Identificar los requerimientos funcionales
Definición de lo que se busca que el sitio haga, es decir, los tipos de interacción
que se busca incluir, tales como:
• Formulario de Contacto para envío de mensajes electrónicos
• Sistema de envío de una noticia por mail a un amigo o compartir en redes sociales
• Chat
• Registro de usuarios
• Galerías fotográficas
• Descarga de archivos
Producto de trabajo:
Lista de requerimientos funcionales
• Carrito de compras y pagos en línea
• Etc.
@christianbonner

14. Arquitectura de la información Web
3
Análisis de Sitios Similares: Benchmark
Buscar sitios en Internet que sean
similares en contenidos, funcionalidad o
incluso de nuestra competencia, con el
fin de revisar de qué manera han resuelto
los mismos problemas que deberemos
atender.
Documento:
Pauta de comparación de sitios web
@christianbonner

15. Arquitectura de la información Web
R
Mapa del sitio
Buscar sitios en Internet que sean
similares en contenidos, funcionalidad o
incluso de nuestra competencia, con el
fin de revisar de qué manera han resuelto
los mismos problemas que deberemos
atender.
Documento:
Mapa del sitio web consolidado
@christianbonner

16. Bibliografía
- Yusef Hassan Montero y Francisco J. Martín Fernández. - Qué es la Arquitectura de la Información
Ref: http://www.nosolousabilidad.com/articulos/ai.htm
- Yusef Hassan Montero y Ana Núñez Peña. - Diseño de Arquitecturas de Información: Descripción y Clasificación
Ref: http://www.nosolousabilidad.com/articulos/descripcion_y_clasificacion.htm
- Wikipedia – Arquitectura de la información, Accesibilidad Web
Ref: http://es.wikipedia.org/wiki/Arquitectura_de_la_informaci%C3%B3n
Ref: http://es.wikipedia.org/wiki/Accesibilidad_web
- Jesse James Garrett – Los Elementos de la Experiencia de Usuario
Ref: http://www.jjg.net/elements/translations/elements_es.pdf
- Peter Morville & Louis Rosenfeld - Information Architecture for the World Wide Web 3rd Edition, O'Reilly Media
- Guía digital del gobierno de Chile - Definición de Contenidos del Sitio
Ref: http://www.guiadigital.gob.cl/articulo/definicion-de-contenidos-del-sitio
- Iconografía
Ref: http://icons8.com/download-windows-8/
@christianbonner

17. Gracias!