n&u curso 5 y 6
TRANSCRIPT
![Page 1: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/1.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Navegabilidad y Usabilidad
![Page 2: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/2.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Conceptos estudiados
• Arquitectura de la información
• Navegabilidad
• Diseño gráfico de la información
![Page 3: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/3.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Arquitectura de la Información
![Page 4: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/4.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Arquitectura de la
información
• Definición
• Elementos Fundamentales
• Ejercicio
![Page 5: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/5.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
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.
![Page 6: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/6.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
![Page 7: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/7.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
![Page 8: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/8.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos 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
![Page 9: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/9.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Elementos
Fundamentales
Paso 2: Clasificar los contenidos
¿Hasta donde vamos? ¿Cual es la cantidad de contenidos?Jerarquía y Arboles
![Page 10: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/10.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Jerarquía
![Page 11: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/11.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Arbol
![Page 12: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/12.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos ¿Cómo organizar la
información?
![Page 13: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/13.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Ejemplos
• Amazon
![Page 14: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/14.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Ejemplos
• Amazon
![Page 15: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/15.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Ejemplos
• Imdb
![Page 16: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/16.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Ejemplos
• Imdb
![Page 17: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/17.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
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?
![Page 18: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/18.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Admisiones
Actualidad Universitaria
Acerca de la Universidad
Oferta Académica
Programas de posgradoEventosHistoria de la UniversidadRadio Universidad Estéreo 104.1 FMCasos especiales de admisionesProgramas de educación a distanciaFilosofía de la UniversidadAdmisiones a programas de pregradoAdmisiones a programas de posgradoNoticiasProgramas de pregrado
TarjetasCategorías
![Page 19: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/19.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Navegación
![Page 20: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/20.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
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”
![Page 21: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/21.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
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
![Page 22: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/22.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Elementos
Fundamentales
• D.N.I.
• Enlace página Principal
• Secciones/Sub-secciones
• Utilidades (ayuda, etc.)
• Búscador
![Page 23: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/23.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos D.N.I + enlace a la home
Secciones, Sub-secciones
Buscador
Utilidades
![Page 24: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/24.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
D.N.I.
• Estar donde creemos que debería estar
• Debe tener el aspecto de un identificador de sitio.
![Page 25: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/25.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
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.
![Page 26: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/26.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
![Page 27: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/27.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
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
![Page 28: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/28.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Botón “Inicio” ***
• Uno de los elementos más importantes. Cómo en el Monopoly “Quedas libre de la cárcel”
• ...Lamentablemente poco usado
![Page 29: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/29.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
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
![Page 30: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/30.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Más alla
• Nombre de las páginas
• ¿Donde estoy?
• Etiquetas
![Page 31: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/31.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
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.
![Page 32: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/32.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
¿Donde estoy?
![Page 33: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/33.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
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.
![Page 34: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/34.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Etiquetas• Son muy fáciles de entender.
• Son difíciles de perder de vista.
• ¿Cómo hacerlas?
![Page 35: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/35.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
![Page 36: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/36.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
![Page 37: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/37.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Prueba del Maletero
![Page 38: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/38.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
![Page 39: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/39.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
![Page 40: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/40.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Taller 1: Diseño gráfico de la información
![Page 41: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/41.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
¿Qué es?
![Page 42: N&U Curso 5 Y 6](https://reader030.vdocuments.co/reader030/viewer/2022020116/55b4a85dbb61ebce738b469c/html5/thumbnails/42.jpg)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
KIVAhttp://www.kiva.org/