Arquitectura de la Informacin

1
Arquitectura de la Información
/ Roberto Eskenazi A. reskenazi_at_terra.cl

• Octubre de 2003

2
/ Julio / 03
3
Qué es la Arquitectura de la Información?
La arquitectura de la información involucra el
diseño de sistemas de navegación para ayudar y
manejar bien la información. En Internet, esto
puede ser visto como la estructura y organización
del contenido de un website o aplicación hacia
categorías definibles apoyadas en un sistema de
navegación lógico e intuitivo. Es la
construcción de la estructura o de la
organización de la información. En el Web, IA es
la combinación de la organización del contenido
de un sitio en categorías y la creación de una
interfaz para apoyar estas categorías. El nombre
deriva del concepto de arquitectura tradicional,
que implica la programación y la planificación
arquitectural.
4
Cuál es la Importancia de la Arquitectura de la
Información?

• El objetivo principal de estos profesionales es
  generar una solución estratégica a partir de la
  interpretación del requerimiento del cliente,
  para integrar las necesidades de los usuarios con
  los objetivos de la Organización/Empresa.
• La AI es la base para un buen diseño web es en
  esta etapa que todos los otros aspectos serán
  construidos forma, función, metáfora, navegación
  y diseño visual.
• Iniciar el proceso de IA debería ser el primer
  paso para diseñar un sitio.
• El trabajo IA se traduce en
• Mejorar la experiencia de los usuarios al
  convertir la aplicación en un sistema fácil de
  navegar
• Optimizar la aplicación eliminando pasos
  innecesarios que cansan y aburren
• Aumentar las posibilidades de éxito de la
  aplicación, sistema o sitio al convertirlo en un
  espacio atractivo

5
Quiénes son Arquitectos de la Información?

• Diseñadores Gráficos crean relaciones entre
  elementos visuales y determinan su integración
  efectiva como un todo
• Bibliotecólogos entrenados para trabajar con
  búsquedas y tecnología
• Ingenieros de Usabilidad más científicos en su
  visión
• Ingenieros en Informática tienen un conocimiento
  profundo del funcionamiento de los sistemas y de
  las bases de datos
• Periodistas entrenados para organizar
  información

6
Zoológico de Londres - Ejercicio

• Ejercicio Zoológico (Individual) 15 minutos
• El zoológico de Londres le ha encargado construir
  su nuevo sitio web. Para tal efecto le entrega
  una lista con los animales que debe considerar.
  Agrúpelos siguiendo cualquier orden lógico.
• Imprimir y fotocopiar el archivo!!

7
Esquemas de Organización
Exactos
Ambiguos

• Alfabético
• Cronológico
• Geográfico

• Temático
• Tareas / Procesos
• Audiencias Específicas
• Metáforas

8
Esquemas de Organización
Exacto / Alfabético
9
Esquemas de Organización
Exacto / Cronológico
10
Esquemas de Organización
Exacto / Geográfico
11
Esquemas de Organización
Ambiguo / Temático
12
Esquemas de Organización
Ambiguo / Tareas - Procesos
13
Esquemas de Organización
Ambiguo / Audiencias Específicas
14
Esquemas de Organización
Ambiguo / Metáforas
15
Esquemas de Organización
Ambiguo / Metáforas

• Metáforas Organizacionales
• Se apoyan en la ya existente estructura de un
  grupo, sistema u organización.
• Un ejemplo de esto es cuando usted está
  construyendo un sitio para vender abarrotes. En
  este caso, su metáfora podría ser un
  supermercado, lugar en el que los productos están
  organizados de manera lógica por tipo. Sin
  embargo, copiar la jerarquía organizacional de la
  compañía de su cliente puede no ser una buena
  idea.

16

• Metáforas Funcionales
• Relaciona las tareas que se pueden realizar
  dentro del sitio con las tareas que se pueden
  hacer en otro entorno. Un ejemplo de esto es el
  programa de diseño Photoshop, que, de manera
  figurativa permite cortar, copiar y pegar
  gráficos en un computador como si estuviera
  utilizando tijera y goma de pegar reales.

17
Esquemas de Organización
Ambiguo / Metáforas

• Metáforas Visuales
• Se basan en elementos comunes gráficos que
  resultan familiares para la mayoría de las
  personas en nuestra cultura.
• Si usted está diseñando un sitio de música que
  permite a los usuarios escuchar canciones, usted
  puede utilizar las tradicionales íconos start,
  stop y pause que se encuentran en los equipos
  de música.
• Ojo Es importante comprender que el sitio
  completo no puede ser expresado mediante una
  metáfora, pero tal vez el sistema de navegación
  sí.

18
Definición de Objetivos y Audiencias

• La importancia del Relevamiento
• Link a Documentos Pauta y Guía de Relevamiento

19
Conocer el Negocio y los Procesos

• Para pensar en una buena interfaz, es necesario
  tener absoluta claridad de los procesos que se
  van a estar reflejando en la pantalla.
• La estructura de los contenidos, el uso de
  colores, una rotulación adecuada y la aplicación
  de los recursos indicados (combo boxes, radio
  buttons, check lists, etc.), dependen
  exclusivamente del nivel de comprensión que se
  tenga del negocio y de los procesos.

20
Conocer el Negocio y los Procesos

• Qué es un proceso?
• Conjunto de actividades enlazadas entre sí que,
  partiendo de uno o más inputs (entradas) los
  transforma, generando un output (resultado).
• Es una actividad de transición en la cual se
  produce una transformación de materia o valor

21
Conocer el Negocio y los Procesos
Ejemplo Definición de procesos para la
construcción de interfaz de sitio de pago de
cuentas y facturas en línea. Sacar
transparencias y fotocopias
22
Conocer el Negocio y los Procesos - Ejercicio

• Grupos
• Han sido nombrados como AI de un nuevo sitio que
  vende y alquila películas, CDs y libros.
• También ofrecen snacks, bebidas, cigarrillos,
  hielo y otros productos asociados.
• Tienen un sistema de despacho inmediato.
• Definir el proceso desde que el usuario ingresa
  al sitio, hasta que se inicia el despacho y luego
  representarlo en pantallas.
• 30 minutos

23
Etapas del IA en la Construcción de un Sitio
Usabilidad
24
Etapas del IA en la Construcción de un Sitio

• Relevamiento
• Es el primer paso en el proceso de construcción
  de un sitio o aplicación.
• Para qué sirve?
• Para entender el negocio del cliente.
• Para comprender los objetivos que tiene el
  cliente.
• Para saber quiénes serán los stakeholders o
  involucrados en el proyecto.
• Para conocer a las audiencias target del
  sitio.
• Para conocer requerimientos especiales que el
  cliente pueda tener.
• Para acordar el tono, el tipo de contenido y la
  periodicidad de actualización.

25
Etapas del IA en la Construcción de un Sitio

• Conceptualización
• A partir de la información obtenida en la etapa
  de relevamiento, se construye el marco de
  referencia que otorga al sitio su identidad y
  singularidad conceptual.
• Definición y justificación del tipo de sitio, de
  acuerdo a los requerimientos del cliente y a la
  organización de la información. (Institucional,
  portal vertical, portal horizontal, e-commerce,
  mix)
• Delimitación y desarrollo conceptual del rubro
  del sitio, en función del área de negocio o de
  los públicos a los que está dirigido.
• Delimitación del público objetivo del sitio.
• Definición de los objetivos del proyecto.
• Definición de los contenidos.
• Análisis de comparables. (Documento de Análisis
  de Comp.)

26
Etapas del IA en la Construcción de un Sitio

• Definicíón de Contenidos y Funcionalidades
• En esta etapa se deben responder 2 preguntas
• Qué piezas de contenido necesita el sitio?
• Qué tipo de funcionalidades serán requeridas?
• Para contestar estas dos preguntas es necesario
  crear una lista del contenido y de los
  requerimientos funcionales (Inventario de
  Contenidos y Funcionalidades)
• Cuando el inventario esté listo, trabaje con el
  equipo de tecnología y producción para determinar
  la viabilidad de cada requerimiento.
• Los contenidos no sólo se refieren a los textos,
  sino también a todas las piezas que componen un
  sitio (banners, gifs, imágenes, etc.)

27
Etapas del IA en la Construcción de un Sitio

• Mapa de Sitio
• Ahora que ya cuenta con la información de las 3
  etapas anteriores, es hora de darle estructura al
  contenido y a las funcionalidades.
• Piense en la estructura del sitio como un
  esqueleto que une al cuerpo y lo mantiene armado.
  Sin esto, el sitio será muy confuso y difícil de
  navegar.
• Una buena estructura de sitio facilita la
  creación del sistema de navegación y esto, a su
  vez, facilita la programación del sitio.
• No existe software específico para Arquitectos
  de Información. Visio (Microsoft) es una buena
  herramienta.

28
Etapas del IA en la Construcción de un Sitio
Home Page
Formulario
Accesos Directos
Carro de Compras
Sección / No Página
Navegación Secundaria
29
Etapas del IA en la Construcción de un Sitio

• Storyboard
• Al igual que en una película, el Storyboard es
  un layout de lo que será el sitio página por
  página.
• Una vez aprobado por el cliente, el Storyboard
  será la biblia del proyecto, que todo el resto
  del equipo utilizará como guía.
• El storyboard no es, necesariamente, un reflejo
  de lo que debe ser la diagramación de las
  páginas. Ésta debe ser definida por los
  diseñadores gráficos.
• Los contenidos pueden ser maqueteados.
• Los mensajes de confirmación, bienvenida, error,
  etc., deben escribirse tal cuál como aparecerán
  en el sitio.

30
Etapas del IA en la Construcción de un Sitio
ID de Página
Explicación deLinks y Funcionalidades
Referencia
Zona de Contenido
31
Experiencia de Usuario - Usabilidad
La Usabilidad es la medida de la calidad de la
experiencia del usuario cuando interactúa con un
Sitio Web... J. Nielsen Podemos definir la
usabilidad como la medida en la cual un producto
puede ser usado por usuarios específicos para
conseguir objetivos específicos con efectividad,
eficiencia y satisfacción en un contexto de uso
especificado. Los AIs son los responsables por
hacer que la usabilidad sea sencilla y de crear
productos teniendo al usuario como centro de sus
diseños. La facilidad de uso se mide por la
rapidez en la realización de las tareas para las
que está pensado el producto, los errores
producidos por el usuario al realizar esas
tareas, la facilidad de aprendizaje del sistema,
el número de recursos utilizados y, finalmente,
el grado de satisfacción final del usuario.
32
Estilos de Redacción para la Web
Criterios Básicos

• Existen muchos criterios para ordenar y
  jerarquizar la presentación de la información.
• El lenguaje que se utiliza para la web está en
  proceso de definición. El mejor sistema de
  redacción hasta ahora, es el que deriva del
  periodismo norteamericano, basado en las 5 Ws y
  en la pirámide invertida.
• Las 5 Ws
• What (qué)
• When (cuándo)
• Who (quién)
• Where (dónde)
• Why (por qué)
• How (cómo) - Interpretación

33
Estilos de Redacción para la Web
La Pirámide Invertida Es un recurso que permite
evaluar la importancia de la información para
disponerla luego de mayor a menor dentro de la
estructura interna de una noticia. Así en la
cabeza de la información (primer párrafo) deberán
ubicarse los aspectos más importantes que derivan
de las 5 W.
5W
34
Estilos de Redacción para la Web
Conceptos a Considerar

• Claridad
• Escribir con claridad significa utilizar un
  lenguaje llano que pueda ser rápidamente
  entendido y no genere interpretaciones erróneas o
  produzca en el lector la necesidad de volver
  hacia atrás en la lectura para interpretar lo que
  se quiso decir.
• Utilizar sólo la cantidad justa de palabras para
  expresar lo que se quiere decir.
• Eliminar la utilización de metáforas.
• Ejemplo
• - Un terremoto grado 7 afectó esta mañana a la
  Región Metropolitana.
• - La capital se remeció entre fuertes estruendos
  salidos del fondo de la tierra, cuando el alba
  comenzaba a apoderarse de la ciudad.

35
Estilos de Redacción para la Web
Precisión La información que se presenta debe ser
fiel a la realidad, de ningún modo falsa o
confusa. Ello exige una búsqueda atenta y lo más
amplia posible de datos precisos, un uso
disciplinado del lenguaje y de las técnicas de
producción, incluidos los elementos
gráficos. Concisión Este concepto tiene que ver
con una correcta utilización del lenguaje, lo que
a su vez implica la correcta elección de cada uno
de los verbos que forman parte de una nota con el
objetivo de que la información sea eficiente, es
decir, logre informar con el máximo
aprovechamiento del tiempo.
36
Estilos de Redacción para la Web
Integridad La integridad se refiere al respeto
que es necesario tenerle a la realidad, de manera
tal de presentarla tal como ésta se reproduce en
cada uno de los ámbitos, sin distorsionarla por
intereses particulares o impericias en el proceso
de redacción.
37
Estilos de Redacción para la Web
Elementos componentes de un texto periodístico
Epígrafe
Título
Bajada
38
Estilos de Redacción para la Web

• Cómo Leen los Usuarios en la Web?
• Los usuarios no leen palabra por palabra en la
  Web sino que escanean las páginas en busca de
  palabras o frases importantes.
• Prefieren un lenguaje objetivo al lenguaje
  promocional .
• Los usuarios no realizan prolongados scrolls
  para acceder a todo el texto desplegado en una
  página.
• Los usuarios necesitan sentirse activos ante la
  pantalla y realizar clicks, por lo que es raro
  que permanezcan ante una misma página largos
  minutos para leer una nota entera.

39
Estilos de Redacción para la Web

• Por qué escanean los usuarios?
• Leer en pantalla es cansador para la vista y
  cerca del 25 más lento que leer en papel
• Los usuarios sienten que tienen que moverse y
  hacer click en las cosas. La gente desea sentirse
  activa en la Web.
• Los Cada página tiene que competir con millones
  de otras páginas para atraer la atención del
  usuario. Los usuarios no saben si esta es la
  página que necesitan o si otra página sería
  mejor.

40
Estilos de Redacción para la Web

• Hipertextualidad
• Se trata de una serie de bloques de texto
  conectados entre sí por vínculos que forman
  diferentes itinerarios para el usuario.
• Para utilizarlos es importante tener en cuenta
  una serie de criterios
• Ser descriptivos para que el usuario pueda saber
  dónde los conducirán.
• No usar términos ambiguos para los usuarios.
• Utilizar pocos links en una misma página.
• Establecer varias puertas de entrada para que los
  usuarios encuentren las páginas.
• Usar elementos de programación que permitan
  cambiar el puntero del mouse cuando el usuario se
  posiciona sobre un link.
• Cambiar los colores de los links una vez que
  estos hayan sido visitados.
• Estar marcados en otro color (azul) y subrayados
  para distinguirse del resto de los elementos que
  componen la página.

41
Estilos de Redacción para la Web

• Ejercicio
• Terra le encarga la redacción de una noticia para
  su sitio web.
• Invente una noticia sobre un tema de su interés y
  redáctela pensando en el usuario, en el tipo de
  sitio y en los criterios revisados (5 Ws,
  Precisión, Concisión, Corte de Páginas,
  Hipertextualidad, etc.)
• Individual - 20 mins.

42
Estilos de Redacción para la Web - Rotulación

• Existen algunos estándares para rotular.
• La recomendación es utilizar títulos cortos y no
  rebuscados.

43
Buenas Prácticas
De dónde vengo / Dónde estoy
Número de Registros
44
Navegación Principal Siempre Presente
Claridad en el carro de compras
Sugerencias
45
Etapas del Proceso
Claridad y Facilidad de uso de cupones y
descuentos
46
Cuentas claras
47
Taxonomía con buen nivel de detalles
48
Buen sistema de registro, con opción de ingreso
de datos
49
Indicación con referencia de ubicación dentro del
sitio, reforzada por el título.
50
Indicación con referencia de ubicación dentro del
sitio, reforzada por el título.
Explicación del significado del asterisco