Técnicas de Arquitectura de la información Lenguaje del mapa de AI según Jesse J. Garrett
Competencias 1. Identifica formatos de especificaciones y estudios de arquitectura de la información, de acuerdo a los requerimientos de un proyecto web. 2. Traduce especificaciones y estudios e arquitectura de información, de acuerdo a los requerimientos del proyecto web. 3.Identifica criterios de distribución de elementos de interfaz, según los requerimientos del proyecto web.
1ra unidad
Diagnóstico de requerimientos de un proyecto web 1.Arquitectura de la información: Tipologías de necesidades de información, Comportamientos de usuario en la búsqueda de información, Principios y componentes básicos de la AI. 2.Desarrollo de proyectos basados en AI: Definición de proyectos y metas, Contexto/medios/usuario/diseño, Investigación de usuarios, Inventario de contenidos, Tipología de proyectos web. 3.Técnicas de organización de metas y contenidos: Entrevistas/encuestas, Benchmarking, Cardsorting, Mapa AI (J.J. Garret)
Lenguaje de la AI componentes grรกficos para visualizar un mapa de AI
“Los mapas son una herramienta esencial para comunicar arquitectura de información y diseño de interacción en equipos de desarrollo Web.”
Jesse James Garrett, www.jjg.net/ia/visvocab/spanish.html
El vocabulario visual de Garrett se puede usar en la Arquitectura de la Informaciรณn para describir la estructura o flujo de la experiencia de usuario en un sitio web.
¿Quién y para qué?
Diseñadores de interfaz gráfica
Diseñadores de AI
Usan los mapas para identificar y establecer cuántos diseños de página únicos deben ser producidos y obtener un sentido inicial de los requerimientos de navegación e interfaz para estos diseños.
Usan los mapas para desarrollar requerimientos detallados de navegación e interfaz para cada página.
Mapa de Arquitectura de la Información
Wireframes
“El mapa se enfoca en lo que llamamos la macro-estructura, entregando sólo el detalle suficiente para permitir a los miembros del equipo ver la ‘gran foto’. La tarea del arquitecto es determinar el nivel apropiado de detalle para lograr este objetivo. El detalle específico a nivel de página o micro-estructura, es detallado en otros documentos de los cuales el arquitecto puede no ser directamente responsable de desarrollar.”
Mapa de Arquitectura de la Información
Mapa de flujo, tarea o navegación.
“El diagrama debiera enfatizar la estructura conceptual y organización del contenido. (…) La estructura conceptual no es lo mismo que la organización de navegación. El objetivo del mapa de arquitectura de información no es entregar una especificación de navegación completa; este detalle es mejor puesto en otros documentos, donde cauce menos riesgo de confundir y distraer.”
Modelo conceptual
1 – El sistema presenta caminos al usuario. 2 – El usuario se mueve a través de estos caminos mediante acciones. 3 – Estas acciones conducen al sistema a generar resultados.
Elementos simples
Pรกgina Pila de pรกginas Documento Pila de documentos
Pรกgina y documento
Pila de pรกginas y pila de documentos
Relación de contenido
Líneas Conectores Flechas
Estructura de árbol
Estructura libre
Movimiento hacia adelante –o descendente– para realizar una tarea
Movimiento descendente que no permite volver atrás
El uso de múltiples direcciones deja en claro la dirección
Etiqueta simple en conector:
Etiqueta útil en conector:
Referencia al pié de página:
nos habla de la acción existente para llegar de una página a otra.
es más de contexto y deja en claro la acción tomada.
se utiliza cuando la explicación de relación entre ambas páginas o página y documento es compleja o necesita ser especificada.
Relación simultánea
Una acción desencadena dos o más resultados a la vez.
Conjunto concurrente: al mismo tiempo que la acción de descarga se produce, el resultado es una página nueva y un pop–up de instalación o aviso de descarga.
Separación
Cuando una acción nos da como resultado algo que se escapa del espacio que disponemos
Continúa en X nos referencia otra parte del mapa.
Continúa desde X nos referencia desde donde venimos.
Elementos comunes
Cuando un “área” de navegación se presenta y hablamos de una página nueva o de un elemento interno o externo (pop–up).
Área de interacción especial
Área de interacción especial de múltiples posibles resultados
Elementos reutilizables
Cuando una acciรณn requiere de ser visualizada como flujo; entre una pรกgina y otra existe una tarea que debe especificarse.
Si la acciรณn requiere de una tarea de muchas acciones dentro de una pรกgina, se puede recurrir a la separaciรณn para darle un espacio determinado y no agobiar el mapa.
Elementos condicionales
La navegación varía según atributos (usuario, sesión, lugar real en el mundo); estos tienen un valor; la asociación entre estos últimos se llama condición; estas son evaluadas por el sistema.
Punto de decisión
Cuando una acción puede generar diversos resultados
Una acción nos puede llevar a un resultado final, suecuencial o adverso. Debe acompañarse de una flecha para saber la dirección de la acción.
Conectores y flechas condicionales
Cuando una acciรณn puede llevar a un usuario a otro camino o mantenerlo donde estรก.
Un conector condicional
Una direcciรณn condicional
Ramas condicionales
Cuando la dirección está relacionada con la condición evaluada por el sistema.
De la página A, la acción sólo nos puede llevar a una de las siguientes páginas, dependiendo de las condiciones que reúna el usuario.
Selectores condicionales
Cuando la dirección está relacionada con la condición evaluada por el sistema, pero ésta, no es excluyente.
De la página A, la acción nos puede llevar a una o varias de las siguientes páginas, dependiendo de las condiciones que reúna el usuario.
Racimos
Cuando una dirección condicionada nos ofrece múltiples resultados que a su vez, pueden ser también diversos.
De la página A, la acción nos puede llevar a otra página o a una opción múltiple de páginas.
Áreas condicionadas
Cuando una o más condiciones se aplican a un número diverso de páginas relacionadas.
En esta área se requiere de una conexión segura para realizar la navegación entre las páginas.
Ejemplo Mapa de AI aplicado
Encargo No3
Ensayo de mapa 1. Pensar en un sitio top–down de ventas simple, con 4 botones en el menú global, tres de los cuales nos ofrecen un menú local de 4 botones cada uno. El sitio cuenta con un login de usuario simple (la única condición es el poder comprar en el sitio) y una página de contacto. 2. Seleccionar y aplicar un elemento condicional no descrito anteriormente; por ejemplo: una rama condicional (el usuario loggeado puede ver dos botones más en el menú que cuentan con sus propias sub–páginas). 3. Diagramar la navegación del sitio según sus componentes. 4. Traer el mapa impreso en hoja carta.
Pauta de evaluación Consta de 6 puntos que dan un total de 100% (100%= 7.0 / 0%= 1.0), variando en sus proporciones. Cada punto, a su vez, tiene una escala de valoración de 4 puntos: sobresaliente, logrado, semilogrado e insuficiente. a. [20%] Presentación: factura y cuidado en la entrega. b. [20%] Conceptualización: comprensión del encargo (uso de los conceptos y materia asociada a la asignatura). c. [20%] Análisis gráfico: uso adecuado de los elementos visuales propios de la arquitectura de la información. d. [15%] Profundización: aplicación correcta y deliberada de conceptos relativos a la Conceptualización y Análisis gráfico del encargo. e. [15%] Plasticidad: uso adecuado del material. f. [10%] Concreción: realizar el trabajo dentro del tiempo asignado y de la forma en que se asignó.
Insuficiente
Semilogrado
Presentación
0–5
6–10
11–15
16–20
Conceptualización
0–5
6–10
11–15
16–20
Análisis gráfico
0–5
6–10
11–15
16–20
Plasticidad
0
1–5
6–10
11–15
Profundización
0
1–5
6–10
11–15
Concreción
0
0
5
10
15%
40%
70%
100%
máximo posible
Calificaciones
Logrado
Sobresaliente
0%
1.0
25%
2.5
50%
4.0
75%
5.5
5%
1.3
30%
2.8
55%
4.3
80%
5.8
10%
1.6
35%
3.1
60%
4.6
85%
6.1
15%
1.9
40%
3.4
65%
4.9
90%
6.4
20%
2.2
45%
3.7
70%
5.2
95%
6.7
Bibliografía Morville, Rosenfeld. “Information architecture for the world wide web” / COD: 741.6 B141I Spencer, Donna. “A parctical guide to information design” Nielsen, Jacob. “Usabilidad: prioridad en el diseño web” / COD: 005.72 N554U