1. Escuela Superior de Arte y Espectáculos
Usabilidad
Navegabilidad y

2. Escuela Superior de Arte y Espectáculos
Conceptos estudiados
• Arquitectura de la información
• Navegabilidad
• Diseño gráfico de la información

3. Escuela Superior de Arte y Espectáculos
Información
Arquitectura de la

4. Escuela Superior de Arte y Espectáculos Arquitectura de la
información
• Definición
• Elementos Fundamentales
• Ejercicio

5. Escuela Superior de Arte y Espectáculos
Definición
La arquitectura de la información se encuentra íntimamente ligada
con la usabilidad, ya que determina la forma en la cual se
estructuran los contenidos y herramientas que
conforman el sitio (barras de navegación, motores de
búsqueda, sistemas de etiquetas, información en general, la forma
de realizar transacciones de comercio electrónico, entre otras
cosas).
Una arquitectura de información bien proyectada clarifica la misión
y visión del sitio, equilibrando las necesidades del cliente y los
usuarios; así como también contribuye a que el usuario tenga una
experiencia de navegación satisfactoria.

6. Escuela Superior de Arte y Espectáculos

7. Escuela Superior de Arte y Espectáculos

8. Escuela Superior de Arte y Espectáculos Elementos
Fundamentales
Paso 1: Investigación
•
Análisis de la industria
•
Determinación de la audiencia
•
Estudios de la competencia
•
Ideas iniciales sobre el sitio

9. Escuela Superior de Arte y Espectáculos Elementos
Fundamentales
Paso 2: Clasificar los contenidos
¿Hasta donde vamos?
¿Cual es la cantidad de contenidos?
Jerarquía y Arboles

10. Escuela Superior de Arte y Espectáculos
Jerarquía

11. Escuela Superior de Arte y Espectáculos
Arbol

12. Escuela Superior de Arte y Espectáculos
información?
¿Cómo organizar la

13. Escuela Superior de Arte y Espectáculos
•Amazon
Ejemplos

14. Escuela Superior de Arte y Espectáculos
•Amazon
Ejemplos

15. Escuela Superior de Arte y Espectáculos
•Imdb
Ejemplos

16. Escuela Superior de Arte y Espectáculos
•Imdb
Ejemplos

17. Escuela Superior de Arte y Espectáculos
Card Sorting
Preguntas que podemos contestar con esta
técnica:
•
¿Cuál es la manera más adecuada de
agrupar la información?
•
¿Los usuarios encontrarán la
información si la clasifico de esta
manera?
•
¿El nombre de las opciones del menú
se entienden correctamente?

18. Escuela Superior de Arte y Espectáculos
Categorías Tarjetas
Admisiones Programas de posgrado
Eventos
Actualidad Universitaria
Historia de la Universidad
Acerca de la Universidad Radio Universidad Estéreo 104.1 FM
Casos especiales de admisiones
Oferta Académica
Programas de educación a distancia
Filosofía de la Universidad
Admisiones a programas de pregrado
Admisiones a programas de posgrado
Noticias
Programas de pregrado

19. Escuela Superior de Arte y Espectáculos
Navegación

20. Escuela Superior de Arte y Espectáculos
Navegación
¿Por qué es más difícil que en la vida real?
2 perfiles principales de navegación:
• El buscador
• El que “echa un vistazo”

21. Escuela Superior de Arte y Espectáculos
Principios
• Nos ayuda a encontrar lo que estamos buscando
• Nos dice también el lugar donde nos encontramos.
• Nos ofrece un lugar donde no nos perdamos
• Nos dice lo que hay en cada lugar
• Nos enseña a usar el sitio
• Nos permite confiar en las personas que la han
creado

22. Escuela Superior de Arte y Espectáculos Elementos
Fundamentales
• D.N.I.
• Enlace página Principal
• Secciones/Sub-secciones
• Utilidades (ayuda, etc.)
• Búscador

23. Escuela Superior de Arte y Espectáculos
D.N.I + enlace a la home Buscador
Utilidades
Secciones, Sub-secciones

24. Escuela Superior de Arte y Espectáculos
D.N.I.
• Estar donde creemos que debería estar
• Debe tener el aspecto de un identificador de sitio.

25. Escuela Superior de Arte y Espectáculos
Secciones
• Las secciones (denominadas, con frecuencia,
navegación principal) son los vínculos a las
secciones principales del sitio: el nivel superior en
la jerarquía del sitio.
• En la mayoría de los casos, la navegación coherente
dispondrá, además, de un espacio para visualizar la
navegación secundaria: la lista de subsecciones de
la sección actual.

26. Escuela Superior de Arte y Espectáculos

27. Escuela Superior de Arte y Espectáculos
Utilidades
• Las utilidades son los vínculos a los elementos importantes del
sitio que realmente no forman parte de la jerarquía de contenidos.
• Menos prominentes
• Cuatro o cinco

28. Escuela Superior de Arte y Espectáculos
Botón “Inicio” ***
• Uno de los elementos más importantes.
Cómo en el Monopoly “Quedas libre de la
cárcel”
• ...Lamentablemente poco usado

29. Escuela Superior de Arte y Espectáculos
Buscador
• Fundamental (40% de los usuarios lo utilizan según
Jakob Nielsen)
• Diferentes modelos pero una regla: el más sencillo
posible. ¿Cómo lograrlo? Con una herramienta
potente

30. Escuela Superior de Arte y Espectáculos
Más alla
• Nombre de las páginas
• ¿Donde estoy?
• Etiquetas

31. Escuela Superior de Arte y Espectáculos
Nombre de las páginas
• Todas las páginas necesitan un nombre
• El nombre ha de estar en el lugar
adecuado
• El nombre ha de ser prominente.
• El nombre debe corresponderse con aquello
sobre lo que he hecho clic.

32. Escuela Superior de Arte y Espectáculos
¿Donde estoy?

33. Escuela Superior de Arte y Espectáculos
Foco: Migas de pan
• Póngalas en la parte superior.
• Utilice el signo > entre los distintos niveles.
• Utilice un tipo de letra pequeño.
• Utilice las palabras "Usted está aquí".
• Ponga en negrita el último término.
• No las utilice en lugar del nombre de la página.

34. Escuela Superior de Arte y Espectáculos
Etiquetas
• Son muy fáciles de entender.
• Son difíciles de perder de vista.
• ¿Cómo hacerlas?

35. Escuela Superior de Arte y Espectáculos

36. Escuela Superior de Arte y Espectáculos

37. Escuela Superior de Arte y Espectáculos
Prueba del Maletero

38. Escuela Superior de Arte y Espectáculos

39. Escuela Superior de Arte y Espectáculos

40. Escuela Superior de Arte y Espectáculos
Taller 1: Diseño gráfico
de la información

41. Escuela Superior de Arte y Espectáculos
¿Qué es?

42. Escuela Superior de Arte y Espectáculos
KIVA
http://www.kiva.org/