TAI 04

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