- La combinación de la organización, etiquetado y los esquemas de navegación dentro de un sistema de información.

Transcripción

1

2 En el libro básico sobre este tema, Information Architecture for the World Wide Web (1998) sus autores, Rosenfeld y Morville, la definen como: - La combinación de la organización, etiquetado y los esquemas de navegación dentro de un sistema de información. - El diseño estructural de un espacio de información para facilitar las tareas de acabado y acceso intuitivo a los contenidos. - El arte y ciencia de estructurar y clasificar sitios web para ayudar a los usuarios a encontrar y administrar su información. - Una disciplina emergente y una comunidad práctica enfocada en traer los principios de diseño y arquitectura a los entornos digitales.

3 El Instituto Asilomar para la Arquitectura de Información ( la define como: El diseño estructural de ambientes de información compartidos. Es el arte y la ciencia de organizar y etiquetar sitios web, intranets, comunidades en línea y programas computacionales, para apoyar las capacidades de uso y búsqueda del usuario.

4 La arquitectura de información define estructuralmente la organización de los contenidos en el sitio web, con el objetivo de que sus usuarios puedan navegar y satisfacer sus necesidades de información con el menor esfuerzo posible. Es la actividad inicial en la construcción del sitio web y de la que dependerán otras etapas como el diseño gráfico y la programación.

5

6 El primer paso es la planificación estratégica del sitio web. Consiste en establecer las bases para la construcción de los contenidos y servicios interactivos del sitio, su misión, visión, tiempo de realización de las actividades orientadas, equipo de trabajo y responsabilidades. Algunas preguntas generales en torno a la creación del sitio web: - Cuáles deben ser sus propósitos generales? - Cuáles son los principales recursos de información disponibles para la creación y desarrollo del sitio web? - Qué contenidos y servicios serán más útiles para mis usuarios? - Qué frecuencia de actualización deben tener los contenidos? - Quiénes deben ser parte del equipo de trabajo y cuáles serán sus responsabilidades? - Quiénes forman parte del control final del sitio web y cómo pueden asesorarme?

7 La propuesta de los contenidos que formarán parte del sitio web debe estar en correspondencia con los objetivos del mismo y sus usuarios principales. Es importante conocer, las necesidades de información de los usuarios para los que será diseñado el sitio, de manera que la relación entre ambos (usuario y sitio) sea positiva y satisfactoria. Los tres círculos de Rosenfeld y Morville. Este no es un proceso que se realiza una sola vez. Los usuarios, sus necesidades y el contexto varían. Por lo tanto, conocer las principales necesidades de información o inquietudes de los usuarios respecto al sitio, debe ser un proceso cíclico que garantice su efectividad.

8 Los prototipos o maquetas en papel son ideales para la etapa inicial de definición y conceptualización de las funcionalidades del sitio web. Son una forma de crear una primera aproximación de lo que será el futuro sitio web. qué contenidos revistas, bases de datos, guías cómo se verá el sitio. cómo va a funcionar?

9 Una actividad previa a la organización de los contenidos es su clasificación, esta consiste en separar, diferenciar o delimitar elementos del mismo tipo de acuerdo a sus atributos, propiedades comunes o rasgos diferenciales. Ejemplo: Clasificar los distintos elementos que conformarán el sitio web permite establecer una distribución adecuada en grupos homólogos, garantizando al usuario una navegación ordenada y lógica en el sitio.

10 A partir del proceso inicial de clasificación y antes de establecer una ubicación de los contenidos en la página, es necesario precisar la sección a la que pertenecen de acuerdo los siguientes grupos: Grupo de identidad del sitio: Incluye la información que explica los propósitos del sitio, ofrece una visión general de lo que es y lo que el usuario puede encontrar en él. Se identificará con el nombre Acerca de. Ejemplo de sección Acerca de, correspondiente a tres tipos de sitios:

11 Grupo de secciones principales: Incluye las secciones principales del sitio y poseen un nivel superior de jerarquía informativa. Son secciones fijas, su contenido no se actualiza frecuentemente. Ejemplo de secciones principales: Subespecialidades, Temas, Recursos de información (Revistas, Bases de datos, Guías clínicas, Herramientas), Sitios relacionados, etc. Grupos de secciones complementarias: Aquellas que no forman parte de las secciones principales y complementan la información en el sitio. Ejemplo de secciones complementarias: Artículos destacados, Artículos recomendados, Caso diagnóstico, Caso interesante, Investigaciones, Noticias, Eventos, Sabías qué?, etc. Grupo de secciones utilidades: No forman parte de la jerarquía de contenidos y están relacionadas a Ayuda, Preguntas Frecuentes, Contactos, Mapa de sito, etc.

12 El nombre de las secciones es una forma de representar la información en el sitio web. Su objetivo es transmitir información de manera eficiente, es decir, sin ocupar demasiado espacio en una página o espacio cognitivo del usuario. La manera de decir o representar la información en su sitio dice mucho acerca su organización y de usted. Rosenfeld y Morville (1998) Requerimientos: Los nombres de las secciones deben describir el contenido que representan y ser familiares para el usuario. Hacer uso moderado de las abreviaturas y de las mayúsculas. Los nombres de las secciones deben estar ubicados a la izquierda de la caja.

13 Requerimientos: Evitar la personalización de los nombres de las secciones más frecuentes. ( Ejemplo incorrecto : Notibreve, para nombrar la sección de Noticias) Todas las páginas de segundo nivel deben tener un nombre que las identifique, el cual deberá estar escrito en negrita y ser exactamente igual al nombre de la sección que le corresponde. Los nombres de las secciones, subtítulos y textos en la página principal deben contener tan solo la idea esencial. Se deben omitir las palabras innecesarias.

14 Se refiere al nivel o grado de descomposición en que pueden ser divididos los contenidos. Todas las secciones deben mostrar de manera específica la estructura de sus contenidos. Siempre que exista una cantidad y variedad de elementos relacionados a una misma sección, se delimitan las subsecciones y categorías convenientes hasta llegar a conocer la unidad de información, es decir, el contenido final. Para ello se toman en cuenta los siguientes niveles de jerarquía: Sección > subsección > categoría> unidad de información.

15 Se refiere al nivel o grado de descomposición en que pueden ser divididos los contenidos. Ejemplo 1: Acerca de --- (sección) Qué es la Cardiología --- (categoría) enlace a texto completo --- (unidad de información)

16 Se refiere al nivel o grado de descomposición en que pueden ser divididos los contenidos. Ejemplo 2: Recursos de Información --- (sección) Guías clínicas --- (subsección) Guía de Hipertensión Arterial --- (categoría) enlace a texto completo --- (unidad de información) Revistas --- (subsección) The Lancet --- (categoría) enlace a sitio web --- (unidad de información)

17 Cuando se concibe una organización adecuada de la información, la jerarquía entre las secciones es evidente y se distinguen con claridad los distintos niveles de subordinación. Esto permite al usuario enfocar con mejor precisión su búsqueda de información y ofrecer mayores opciones para su navegación. Los sitios web emplearán un modelo de organización de información de tipo jerárquica, estableciendo niveles de prioridad entre sus secciones y contenidos, de acuerdo su importancia, necesidad de los usuarios e intereses del sitio.

18 Corresponden a los espacios en la página donde serán ubicados los distintos elementos que la conforman: cabecera, columnas y pie de página. cabecera Columna lateral izquierda (columna 1) Columna lateral derecha (columna 3) Bloque central (columna 2) Pie de página

19 Cabecera. Compuesta por dos elementos esenciales: 1. Cabecera de Infomed (Barra de 30 px de alto ubicada en la parte superior de la página) Incluye el identificador de Infomed en el extremo izquierdo (con enlace al Portal de Infomed) y enlace a mapa de sitio y contacto del sitio. El empleo de estos últimos elementos, sólo es posible para sitios creados en la herramienta Drupal. 2. Cabecera de identidad del sitio Incluirá el nombre del sitio y una imagen representativa de su contenido. Ejemplo cabecera sitio web de Hipertensión Arterial (herramienta Drupal):

20 Columnas Lateral izquierda o (columna 1): muestra la navegación principal del sitio. Central (columna 2) y Lateral derecha (columna 3): muestran los contenidos temporales o de frecuente actualización Las secciones de ambas columnas deberán estar organizadas de forma jerárquica. Las secciones pueden aumentar sus contenidos, de acuerdo, a las necesidades de los usuarios e intereses del sitio.

21 Ejemplo de secciones Las secciones varían de acuerdo al tipo de sitio. Columna 1 Columna 2 Columna 3 Acerca de Anuncio de bienvenida Noticias Subespecialidades Avisos Eventos y Cursos Columna 1 muestra Temas Artículos destacados Listas de Discusión secciones principales. Estas son fijas, no se actualización frecuentemente. Recursos de Información Guías, Bases de datos, Libros, Revistas, Herramientas Sitios relacionados Docencia Caso diagnóstico Discusión diagnóstica Clínica patológica Medicina en imágenes otras Columna 2 y 3 muestran otras otras contenidos temporales. Se actualizan continuamente.

22 Sobre la columna 2 Se divide en secciones informativas. Estas incluyen: título de sección, titular del artículo y resumen del artículo. Los titulares tendrán enlace al texto completo del artículo o sitio web, como corresponda. Sobre el uso de imágenes para las columnas 2 y 3 Las imágenes a incluir deben ser representativas del contenido de su sección. Las imágenes deben respetar los requisitos de calidad establecidos por el Departamento Web y las siguientes dimensiones: Ancho: 50 px 140px Alto: 50 px 140px

23 Sobre el uso de imágenes para las columnas 2 y 3 Las imágenes deben tener un enlace al contenido y brindar la posibilidad de ampliarse en una nueva ventana. Se aconseja evitar el empleo de imágenes sobredimensionadas (para casos como un ícono, un símbolo). De igual forma, se recomienda evitar el empleo de imágenes muy reducidas que afecten su compresión. Las imágenes deberán estar justificadas a la izquierda con una separación de 10 px del texto.

24 La navegación principal de los sitios se ubica en la columna latera izquierda. A partir de una jerarquía visible de las secciones, la navegación muestra el contenido al usuario, lo conduce a través del sitio. Al emplear un sistema de navegación superior para la navegación principal, se corre el riesgo de limitar el número de secciones a incluir, debido a la extensión de sus nombres o ancho de la página.

25 Se empleará la navegación superior para sección de identidad y secciones de utilidad, fundamentalmente. El uso de la navegación superior es posible para sitios creados en la herramienta Drupal. Existen secciones que por su función pueden ser incluidas en la navegación superior. Estas secciones no deben forman parte de las secciones principales del sitio.

26 A Common Sense Approach to Web Usability Sitio Web

27 Bibliografía Patrick L, Sara H (2008). Web Style Guide: Basic Desing Pincipl es for Creating Web Sites. Available at: [Accedido Abril 1, 2010]. Rosenfeld L, Morville P (1998). Information architecture for th e World Wide Web. Introduction to Information Architecture. Cambridge (Massachusetts): O'Reilly. Steve Krug (2006). Dont make me tihk A Common Sense Approach to Web Usability. 2º ed., España. Yale web style guidelines Web Publishing. Available at: [Accedido Abril 1, 2010].