Este documento trata sobre el diseño de la información y la navegación. Explica que un buen diseño de la información ayudará al usuario a encontrar fácilmente lo que busca y que se debe evitar la sobrecarga informativa. También describe elementos clave del diseño de la navegación como la arquitectura de la información, los enlaces y menús de navegación e interfaces.

1. Diseño de la Información

2. Patricio Rodríguez M.
Arquitectura de la
Información
Diseño de la Información + Diseño de la Navegación

3. Patricio Rodríguez M.
INFORMACION
El usuario, ante un nodo (por ejemplo, una página web),
realiza un barrido visual de éste, ojeando "a saltos" la
pantalla, discriminando automáticamente la información
que no le interesa y centrando su atención en la que si.

4. Patricio Rodríguez M.

5. Un buen diseño de la información, desde el
punto de vista organizativo y de su
usabilidad, será aquel que ayude al usuario a
encontrar la información que busca de la
forma más fácil, rápida y cómoda posible.

6. Patricio Rodríguez M.

7. Patricio Rodríguez M.
No lo hagas!
Uno de los aspectos más importantes en el diseño de la
información es evitar la sobrecarga informativa:
demasiada información (textual, visual...) en un mismo
nodo confunde y agota al usuario.

8. Patricio Rodríguez M.

9. La redacción de los contenidos debe realizarse
en un lenguaje entendible fácilmente por los
potenciales usuarios del sistema, huyendo de
tecnicismos complejos, abreviaturas
innecesarias o acrónimos poco comunes.

10. Patricio Rodríguez M.

11. Patricio Rodríguez M.
Para facilitar la
exploración de la
información por parte del
usuario debemos
jerarquizarla:

12. * Aumentando el tamaño de los
textos de mayor importancia
(títulos, subtítulos...)

14. * Agrupando la
información que esté
relacionada

16. * Utilizando efectos tipográficos
(negrita, cursiva...) para enfatizar
contenidos

18. * Utilizando el contraste en
el color para discriminar y
distribuir informaciones

20. * Posicionando la información más relevante en
zonas visuales superiores. Si el usuario no se
ve obligado a utilizar la barra de
desplazamiento para encontrar la
información que busca (o el enlace que le
lleve hacia ella), ahorrará tiempo en su
búsqueda y tendrá más probabilidades de
encontrarla.

22. Patricio Rodríguez M.
NAVEGACION
El diseño de la navegación consiste en definir la
arquitectura de nuestro hipermedia: elementos de
interacción entre el usuario y el sistema, enlaces y tipos
de enlaces entre los nodos, agrupación de los nodos por
categorías o propiedades, y respuestas del sistema ante
peticiones del usuario.

24. Para diseñar la navegación podemos usar el
vocabulario gráfico propuesto por Jesse
James Garrett para la descripción de la
arquitectura de la información y el diseño
de la interacción:
http://www.jjg.net/ia/visvocab/spanish.html

26. Una vez definida la arquitectura, debemos
implementar los elementos de interacción
en nuestro hipermedia: enlaces, opciones
o menús de navegación, componentes de
interacción (botones, cajas de texto, ....),
etc.

28. esto es a lo que
denominamos INTERFAZ

29. ¿Qué es la interfaz?
Cuando uno usa una herramienta, o accede e
interactúa con un sistema, suele haber “algo”
entre uno mismo y el objeto de la interacción.
En un auto, ese “algo” son los pedales y el
tablero. En una puerta, es el picaporte. En
una máquina expendedora o un ascensor, los
botones.

32. Este “algo” nos informa qué
acciones son posibles, el estado
actual del objeto y los cambios
producidos, y nos permite actuar
con o sobre el sistema o la
herramienta.

34. Dado que las interfaces no son nuestro
objetivo, sino un medio de llegar a él, la
mejor interfaz es aquella que no se ve. Sin
embargo, muchas de ellas, por nuevas y
desconocidas, o por conocidas pero mal
diseñadas, son visibles.

36. ¿Cuántas veces no encuentran lo
que buscan o no saben cómo
hacer lo que quieren? Esa
situación resulta de una mala
interfaz, que a su vez genera un
problema de usabilidad.

38. aquí es donde se
aplica la arquitectura
de la información
(primera parte)

39. Jesse James Garrett (www.jjg.net)
Define como las personas procesan la
información y construye relaciones entre
sus diferentes elementos.
“Usar un sitio web por primera vez, es tan penoso
como salir con una niña que no conoces”

41. Louis Rosenfeld
Usa herramientas, técnicas y
experiencias de disciplinas que ven la
información como algo importante y
valioso por si mismo.

43. ¿cómo transformar
la información en
comunicación?

44. Elementos de AI
Sistemas de
navegación

45. Elementos de AI
Sistemas de
navegación
Sistemas de
etiquetado

46. Elementos de AI
Sistemas de
navegación
Sistemas de
etiquetado
Sistemas de
organización

47. Elementos de AI
Sistemas de
navegación
Sistemas de
Sistemas de búsqueda
etiquetado
Sistemas de
organización

48. Mapa de Navegación
Un mapa de navegación es la representación gráfica
de la organización de la información de una
estructura web. Expresa todas las relaciones de
jerarquía y secuencia y permite elaborar
escenarios de comportamiento de los usuarios.

50. Hipertexto
Enriquecer un contenido por medio del uso de
etiquetas que otorguen un valor semántico a la
información.

51. Escritura hipertextual
<html>
<h1>esto es un título principal</h1>
<p>esto es un párrafo</p>
<a href=”http://www.google.cl”>esto
es un link</a>
</html>

52. Wireframes
Un wireframe es un bosquejo de la ubicación de
elementos en una pantalla.

54. Wireframes
Un wireframe grafica básicamente:
Elementos de navegación: menús, accesos directos e
hipervínculos.
Elementos de información: contenidos de texto e imágenes.
Elementos de interacción: herramientas o funcionalidades
que el usuario puede realizar.
Elementos de apoyo: ítems de ayuda y orientación, como
mapas de navegación o faqs.
Elementos promocionales: espacio dedicado a banners
publicitarios o a destacados internos del propio producto.

57. Sistema de búsqueda
Involucra todas las relaciones causa/efecto,
identifica las variables relevantes que intervienen
y permite anticipar escenarios y controlar su
ejecución, previo al desarrollo de un producto.