Escuela Superior de Arte y Espectáculos




               Usabilidad
             Navegabilidad y
Escuela Superior de Arte y Espectáculos
                                          Conceptos estudiados

                  ...
Escuela Superior de Arte y Espectáculos




               Información
             Arquitectura de la
Escuela Superior de Arte y Espectáculos      Arquitectura de la
                                               información...
Escuela Superior de Arte y Espectáculos
                                                           Definición
             ...
Escuela Superior de Arte y Espectáculos
Escuela Superior de Arte y Espectáculos
Escuela Superior de Arte y Espectáculos              Elementos
                                                   Fundamen...
Escuela Superior de Arte y Espectáculos              Elementos
                                                   Fundamen...
Escuela Superior de Arte y Espectáculos
                                Jerarquía
Escuela Superior de Arte y Espectáculos
                               Arbol
Escuela Superior de Arte y Espectáculos
                               información?
                            ¿Cómo orga...
Escuela Superior de Arte y Espectáculos




              •Amazon
                               Ejemplos
Escuela Superior de Arte y Espectáculos




              •Amazon
                               Ejemplos
Escuela Superior de Arte y Espectáculos




             •Imdb
                               Ejemplos
Escuela Superior de Arte y Espectáculos




             •Imdb
                               Ejemplos
Escuela Superior de Arte y Espectáculos
                                          Card Sorting

                          ...
Escuela Superior de Arte y Espectáculos

                                          Categorías                     Tarjetas...
Escuela Superior de Arte y Espectáculos




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

               ...
Escuela Superior de Arte y Espectáculos
                                                         Principios
              ...
Escuela Superior de Arte y Espectáculos            Elementos
                                                 Fundamentale...
Escuela Superior de Arte y Espectáculos
                                                  D.N.I + enlace a la home        ...
Escuela Superior de Arte y Espectáculos
                                                              D.N.I.


           ...
Escuela Superior de Arte y Espectáculos
                                                          Secciones

             ...
Escuela Superior de Arte y Espectáculos
Escuela Superior de Arte y Espectáculos
                                                               Utilidades
        ...
Escuela Superior de Arte y Espectáculos
                                              Botón “Inicio” ***

                ...
Escuela Superior de Arte y Espectáculos
                                                          Buscador
               ...
Escuela Superior de Arte y Espectáculos
                                                     Más alla

                   ...
Escuela Superior de Arte y Espectáculos
                                          Nombre de las páginas

                 ...
Escuela Superior de Arte y Espectáculos
                               ¿Donde estoy?
Escuela Superior de Arte y Espectáculos
                                               Foco: Migas de pan

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




                                          Taller 1: Diseño gráfico
            ...
Escuela Superior de Arte y Espectáculos




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




                                 KIVA
              http://www.kiva.org/
Próxima SlideShare
Cargando en…5
×

N&U Curso 5 Y 6

477 visualizaciones

Publicado el

0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
477
En SlideShare
0
De insertados
0
Número de insertados
60
Acciones
Compartido
0
Descargas
10
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

N&U Curso 5 Y 6

  1. 1. Escuela Superior de Arte y Espectáculos Usabilidad Navegabilidad y
  2. 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. 3. Escuela Superior de Arte y Espectáculos Información Arquitectura de la
  4. 4. Escuela Superior de Arte y Espectáculos Arquitectura de la información • Definición • Elementos Fundamentales • Ejercicio
  5. 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. 6. Escuela Superior de Arte y Espectáculos
  7. 7. Escuela Superior de Arte y Espectáculos
  8. 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. 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. 10. Escuela Superior de Arte y Espectáculos Jerarquía
  11. 11. Escuela Superior de Arte y Espectáculos Arbol
  12. 12. Escuela Superior de Arte y Espectáculos información? ¿Cómo organizar la
  13. 13. Escuela Superior de Arte y Espectáculos •Amazon Ejemplos
  14. 14. Escuela Superior de Arte y Espectáculos •Amazon Ejemplos
  15. 15. Escuela Superior de Arte y Espectáculos •Imdb Ejemplos
  16. 16. Escuela Superior de Arte y Espectáculos •Imdb Ejemplos
  17. 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. 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. 19. Escuela Superior de Arte y Espectáculos Navegación
  20. 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. 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. 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. 23. Escuela Superior de Arte y Espectáculos D.N.I + enlace a la home Buscador Utilidades Secciones, Sub-secciones
  24. 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. 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. 26. Escuela Superior de Arte y Espectáculos
  27. 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. 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. 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. 30. Escuela Superior de Arte y Espectáculos Más alla • Nombre de las páginas • ¿Donde estoy? • Etiquetas
  31. 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. 32. Escuela Superior de Arte y Espectáculos ¿Donde estoy?
  33. 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. 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. 35. Escuela Superior de Arte y Espectáculos
  36. 36. Escuela Superior de Arte y Espectáculos
  37. 37. Escuela Superior de Arte y Espectáculos Prueba del Maletero
  38. 38. Escuela Superior de Arte y Espectáculos
  39. 39. Escuela Superior de Arte y Espectáculos
  40. 40. Escuela Superior de Arte y Espectáculos Taller 1: Diseño gráfico de la información
  41. 41. Escuela Superior de Arte y Espectáculos ¿Qué es?
  42. 42. Escuela Superior de Arte y Espectáculos KIVA http://www.kiva.org/

×