La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS ARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS.

Presentaciones similares


Presentación del tema: "FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS ARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS."— Transcripción de la presentación:

1 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS ARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS UNIVERSIDAD POLITÉCNICA DE MADRID UNIVERSIDAD CARLOS III DE MADRID SEDIC FRANCISCO TOSETE HERRANZ

2 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS La WWW es interacción: movimiento, acción, toma de decisiones y asimilación. De nada sirve ofrecer los mejores contenidos de la biblioteca si los usuarios no los encuentran en el sitio. VEMOS LA TELEVISIÓN NAVEGAMOS POR LA WEB 4. SISTEMAS DE NAVEGACIÓN Sesión II

3 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS El diseño del sistema de navegación gira en torno a la resolución de los dos problemas fundamentales del hipertexto (herencia en la WWW): a)La desorientación o pérdida de contexto: Ausencia de referencias físicas en un espacio virtual ¡Creación de contexto! ¡Consistencia! b)El desbordamiento cognoscitivo: Gran cantidad de operaciones y decisiones que el usuario enfrenta a la vez. No es posible (ni deseable) mostrar toda la información al usuario – ¡Enmascar! – ¡Plegar información! - ¡Simplificar interfaz! - ¡Consistencia! 4. SISTEMAS DE NAVEGACIÓN

4 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS La World Wide Web carece de referencias físicas. Únicamente existen aquellas que el diseñador aporte al usuario. Es necesario por tanto que este disponga: De un punto de partida u origen al que pueda volver siempre (logotipo). De una indicación del lugar en el que se encuentra. 4.SISTEMAS DE NAVEGACIÓN: CREACIÓN DE CONTEXTO

5 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS La función de la navegación: crear contexto. 4.SISTEMAS DE NAVEGACIÓN: CREACIÓN DE CONTEXTO ¿Donde estoy?¿Dónde he estado?¿Dónde puedo ir?

6 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.SISTEMAS DE NAVEGACIÓN: CREACIÓN DE CONTEXTO Creación de contexto. El color, el tamaño de fuente y los rótulos nos ayudan a crear contexto. ¿Existe suficiente contraste en la barra de la izquierda en cuanto a la sección en la que nos encontramos respecto de las demás?

7 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Para reducir la desorientación del usuario el sistema de navegación tiene que ser consistente lo que significa que: La navegación ha de estar situada siempre en el mismo lugar. La barra de navegación ha de tener siempre la misma apariencia. La barra de navegación ha de tener siempre las mismas opciones y en el mismo orden. 4.SISTEMAS DE NAVEGACIÓN: CONSISTENCIA

8 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.SISTEMAS DE NAVEGACIÓN: CONSISTENCIA Un ejemplo ¿Se mantiene la consistencia de la barra de navegación…? veámoslo en la web

9 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.SISTEMAS DE NAVEGACIÓN: CONSISTENCIA

10 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS El color ayuda a marcar la sección en la que se encuentra el usuario y dotar de consistencia visual 4.SISTEMAS DE NAVEGACIÓN: CONSISTENCIA

11 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.SISTEMAS DE NAVEGACIÓN: DESBORDAMIENTO COGNOSCITIVO El diseño de una retícula permite la organización de los bloques de información de la página. Asimismo hemos de realizar una presentación progresiva de la información

12 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS ¿Cuál es la barra de navegación principal? ¿Cuánto has tardado en darte cuenta de ello? 4.SISTEMAS DE NAVEGACIÓN: DESBORDAMIENTO COGNOSCITIVO

13 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Es necesario agrupar los elementos comunes de navegación. La navegación ha de reconocerse como tal (barras y vínculos).

14 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.SISTEMAS DE NAVEGACIÓN: TIPOS DE NAVEGACIÓN Garret distingue además otro tipo de navegación, la suplementaria que trata de dar acceso a los contenidos que no son fácilmente accesibles por cualquiera de las tres anteriores. horizontal (anchura) jerárquica (profundidad) directa semidirecta (facetas)

15 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS NAVEGACIÓN GLOBAL NAVEGACIÓN LOCAL NAVEGACIÓN CONTEXTUAL 4.SISTEMAS DE NAVEGACIÓN: TIPOS DE NAVEGACIÓN

16 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS a)Navegación global siempre visible. Mostramos en todo momento las principales partes de las que consta el sitio. b)Navegación local (subsecciones): Sólo se muestra al usuario una parte de la navegación. ¿La mejor? Como siempre, depende del propósito que se quiera conseguir. ¿Son mutuamente excluyentes las categorías? ¿Es conveniente que estén siempre visibles todas las opciones o sólo determinadas? 4.SISTEMAS DE NAVEGACIÓN: PERSPECTIVAS DIFERENTES

17 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Veamos en la Web (y comentemos) algunos ejemplos de sistemas de navegación… 4.SISTEMAS DE NAVEGACIÓN: PERSPECTIVAS DIFERENTES práctica

18 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.SISTEMAS DE NAVEGACIÓN: BARRA DE NAVEGACIÓN SUPERIOR

19 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.SISTEMAS DE NAVEGACIÓN: BARRA DE NAVEGACIÓN LATERAL

20 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS La barra de navegación lateral enfatiza la anchura de la web (del árbol jerárquico). 4.SISTEMAS DE NAVEGACIÓN: BARRA DE NAVEGACIÓN LATERAL

21 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.SISTEMAS DE NAVEGACIÓN: NAVEGACIÓN EN L INVERTIDA

22 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS ¿Navegación al centro?

23 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.SISTEMAS DE NAVEGACIÓN: NAVEGACIÓN EN U INVERTIDA

24 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.SISTEMAS DE NAVEGACIÓN: ETIQUETAS

25 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Comenzaron a popularizarse en torno al 2000 y sobre todo a partir de su introducción en Amazon. Son una metáfora acertada como la del escritorio de Windows. Es la idea de las carpetas archivadoras del colegio. Son intuitivas y se reconocen rápidamente como navegación. 4.SISTEMAS DE NAVEGACIÓN: ETIQUETAS

26 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Si funciona… ¿Por qué no imitarlo? Unas dosis de imaginación y unas pizcas de creatividad… Se trata de identificar y aplicar patrones usuales de diseño. 4.SISTEMAS DE NAVEGACIÓN: ETIQUETAS

27 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Para que den resultado: Tiene que existir un buen contraste entre el fondo, el color activo y el de segundo plano. La etiqueta activa tiene que estar por delante de las demás. 4.SISTEMAS DE NAVEGACIÓN: ETIQUETAS

28 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Al entrar en el sitio tiene que haber una etiqueta seleccionada por defecto. 4.SISTEMAS DE NAVEGACIÓN: ETIQUETAS

29 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Una discusión sobre las etiquetas: ¿Si yo estoy interesado en una sección determinada qué sentido tiene mostrar todas las demás? 4.SISTEMAS DE NAVEGACIÓN: ETIQUETAS

30 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Desventajas de las etiquetas: Son muy rígidas. Son muy difíciles de modificar para añadir nuevas secciones. Ocupan y desaprovechan mucho espacio de pantalla. Si el espacio en una barra de navegación normal es limitado en las etiquetas lo es todavía más. Los rótulos de las categorías principales han de ser excepcionalmente cortos y significativos. Riesgo de ambigüedad o de escasa significación. Por ello es necesario plantearse muy seriamente estos inconvenientes antes de utilizarlas. 4.SISTEMAS DE NAVEGACIÓN: ETIQUETAS

31 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.SISTEMAS DE NAVEGACIÓN: ETIQUETAS

32 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS ¿Cómo podemos mostrar más de tres subniveles de navegación? ¿más sugerencias?

33 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.SISTEMAS DE NAVEGACIÓN: BREADCRUMB

34 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS La barra de navegación jerárquica (breadcrumb): Disminuye la desorientación del usuario al mostrar la ruta que ha seguido para llegar a un punto determinado. Permite volver rápidamente a cualquier punto anterior de la misma. Enfatiza la jerarquía de una determinada rama del árbol. Quizá el mejor resultado sea combinarlas con otro tipo de sistema de navegación. Son muy adecuadas cuando se tiene más de tres subniveles jerárquicos (ocupa poco espacio). 4.SISTEMAS DE NAVEGACIÓN: BREADCRUMB

35 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Desventajas: Únicamente muestran una rama o subsección a la vez. La home se convierte en el punto de referencia obligado para ir a cualquier otro punto de la web. No existe navegación horizontal, sólo vertical. Desvirtúan los archivos logs (como por ejemplo, antiguamente El País o Useit). 4.SISTEMAS DE NAVEGACIÓN: BREADCRUMB

36 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Algunas recomendaciones (a): Suelen estar situadas en la parte superior de la página como la barra de navegación global. Lo mejor es emplear > entre los términos de cada categoría antes que :: I o cualquier otro carácter. El mayor que sugiere sensación de movimiento (profundizamos en la web). Es mejor emplear un tipo de letra pequeña para los términos de la barra. 4.SISTEMAS DE NAVEGACIÓN: BREADCRUMB

37 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Algunas recomendaciones (b): Una buena práctica es resaltar el último término en negrita. No se han de utilizar en lugar del nombre de la página (en la barra de título del navegador). KRUG, Steve. No me hagas pensar. Madrid: Pearson Educación, 2001, p SISTEMAS DE NAVEGACIÓN: BREADCRUMB

38 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS La barra de navegación jerárquica (breadcrumb) enfatiza la profundidad de la web (del árbol jerárquico). 4.SISTEMAS DE NAVEGACIÓN: BREADCRUMB

39 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.SISTEMAS DE NAVEGACIÓN: BARRA DE NAVEGACIÓN INFERIOR es una práctica recomendable añadir un enlace a la parte superior de la página

40 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Son los vínculos a los elementos importantes del sitio que no forman parte de la jerarquía de contenidos. KRUG, Steve. No me hagas pensar: una aproximación a la usabilidad en la web. Madrid: Prentice Hall, SISTEMAS DE NAVEGACIÓN: UTILIDADES

41 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS El logotipo: Es uno de los elementos más importantes del sistema de navegación y del sitio. Refleja la marca y la identidad de la organización. El usuario identifica el nombre con el logotipo. Ha de estar presente en todas las páginas del sitio. Ha de enlazar siempre con la página de inicio para que el usuario siempre disponga de un punto de referencia al que volver. Ha de estar situado… ¿en dónde? ¿Ejemplos? 4.OTROS ELEMENTOS DE LA NAVEGACIÓN: EL LOGOTIPO

42 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.OTROS ELEMENTOS DE LA NAVEGACIÓN: EL LOGOTIPO

43 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Lema breve y descriptivo que se asocia de forma inequívoca al web. Está conectado visualmente al logotipo. Informa sobre la naturaleza del sitio. Refuerza la imagen de marca. Transmite los valores asociados de la organización. Parece que últimamente está cayendo en desuso. 4.OTROS ELEMENTOS DE LA NAVEGACIÓN: LA TAGLINE

44 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.OTROS ELEMENTOS DE LA NAVEGACIÓN: LA TAGLINE

45 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS En la página es necesario mostrar bien claro lo que es un enlace y lo que no lo es. ¿Qué es un enlace? 4.OTROS ELEMENTOS DE LA NAVEGACIÓN: LOS VÍNCULOS

46 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS Entre otras convenciones, a la hora de realizar hipervínculos: El texto del enlace aparecía subrayado para destacarlo visualmente de las palabras de su alrededor. Se empleaba el color: Azul para los no visitados. Morado para los visitados. 4.OTROS ELEMENTOS DE LA NAVEGACIÓN: LOS VÍNCULOS

47 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS 4.OTROS ELEMENTOS DE LA NAVEGACIÓN: LOS VÍNCULOS

48 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS No obstante estos estándares hace tiempo que dejaron de serlo. Lo fundamental es elegir un color único para los enlaces y respetarlo en todo el web. ¿Cómo sabemos aquí qué es un enlace? El texto que lleva el pequeño icono + señala lo que es un enlace. El color no ayuda. Aunque pueda parecerlo no es un enlace. 4.OTROS ELEMENTOS DE LA NAVEGACIÓN: LOS VÍNCULOS

49 FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS


Descargar ppt "FRANCISCO TOSETE HERRANZARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS ARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS."

Presentaciones similares


Anuncios Google