Tecnologías y Aplicaciones Web 2 versión 2.pptx

curso Tecnologías y Aplicaciones Web

1. Tecnología y Aplicaciones Web Fernando Osorno Gutiérrez

2. Diseño arquitectónico y experiencia de usuario Unidad 2

3. Efectos de la interacción con los sistemas “Los productos tecnológicos que no funcionan de la manera que las personas esperan las hace sentir estúpidas -aún cuando efectivamente hayan logrado lo que se propusieron”, Jesse James Garett Imagina que una empresa vende por internet. Si es mala experiencia: Pérdida de ventas (e- commerce ) Disminución de la productividad Frustración del usuario Si es buena experiencia Usuarios más fieles Más usuarios se vuelven clientes Más tiempo de navegación Mejora la imagen

4. ¿Qué es la Experiencia de Usuario? “la manera como un producto se comporta y es utilizado por el usuario” Se centra en el usuario y en lo que experimenta antes, durante y después de interactuar con el sistema. Intervienen diferentes elementos, algunos son la arquitectura de la información, el diseño de interacción, la usabilidad, la accesibilidad, el diseño gráfico, entre otros. Podemos definir la Experiencia del Usuario como la sensación, sentimiento, respuesta emocional, valoración y satisfacción del usuario respecto a un producto, resultado del fenómeno de interacción con el producto y la interacción con su proveedor .

5. Una buena experiencia de usuario Peter Morville propuso cualidades que son indispensables para construir una buena experiencia de usuario

6. Una buena experiencia de usuario Útil. Aplicar conocimientos y soluciones innovadoras para hacer productos útiles. Usable. Facilidad de uso es vital, pero no suficiente. Deseable. Nuestra búsqueda de la eficiencia debe tener en cuenta la imagen, identidad, marca y otros elementos del diseño emocional. Localizable. Los objetos fáciles de encontrar. Accesible. Así como los edificios, los sitios deben ser accesibles para personas con discapacidad. Creíble. Elementos de diseño que influyen en la confianza del usuario. Valioso. La experiencia de usuario debe contribuir a generar valor para los patrocinadores o al creador.

7. Ejemplos de buenos y malos diseños Grupo 1 https://mx.godaddy.com/ http://www.venablesbell.com/latest http://www.nationalgeographic.com/ Grupo 2 http://www.chestertourist.com/ http://www.sphere.bc.ca/test/sruniverse.html http://www.rushbiddies.com/

8. Interacción Humano-Computadora (IHC) La IHC es un área de estudio centrada en el fenómeno de interacción entre usuarios y sistemas informáticos, cuyo objetivo es proporcionar bases teóricas, metodológicas y prácticas para el diseño y evaluación de productos interactivos que puedan ser usados en forma eficiente, eficaz, segura y satisfactoria. La IHC es interdisciplinaria, ya que en la interacción intervienen diversos factores como la sociología cognitiva y de la conducta, ergonomía, antropología, sociología y ciencias de la computación.

9. ¿Cómo evaluar la Experiencia de Usuario? Usabilidad (de una aplicación). El término es un anglicismo que significa facilidad de uso, su definición formal se refiere al grado de eficacia, eficiencia y satisfacción con la que los usuarios específicos pueden lograr objetivos específicos, en contextos de uso específicos. Efectividad: la medida en la cual los usuarios pueden alcanzar sus metas de tareas. Eficiencia: mide los recursos usados para realizar la tarea. Satisfacción: mide la reacción afectiva de los usuarios respecto a la aplicación.

10. Proceso de diseño centrado en el Usuario Adivinar lo que quieren las personas y construir un sitio para ellos es caro ; si adivinas mal, hay que volver a hacer todo. Christina Wodtke

11. Diseño centrado en el usuario Pasos básicos Averigua para quién es el sitio. Habla con esas personas. Diseña el sitio para ellos. Prueba un prototipo del sitio con ellos. Cambia el diseño de acuerdo a lo aprendido. Prueba el sitio final con ellos. Christina Wodtke 2002

12. Principios de diseño (1) Ben Schneiderman desarrolló 8 principios de diseño que han sido ampliamente aceptados. Son llamadas reglas de oro. * Esforzarse por conseguir consistencia. Usar terminología consistente en apuntadores, menús, ayudas, etc. Usar secuencias consistentes de acciones en situaciones similares. Ser consistente en el color, diseño, uso de mayúsculas, fuentes, etc. Es comprensible usar excepciones, como la confirmación para borrar algo, pero deben ser limitadas. * Shneiderman , B., Plaisant , C., Designing the User Interface: Strategies for Effective Human-computer Interaction, 4/E. 2005. p. 74

13. Principios de diseño (2) Atender a la usabilidad universal. Hay que reconocer las necesidades distintas de diversos usuarios y diseñar favoreciendo la plasticidad . Los requerimientos son variados, ya que se tienen usuarios novatos, usuarios de diferentes edades, usuarios con discapacidades, y tecnologías con diferentes características. El diseño se puede enriquecer añadiendo elementos para novatos ( e.g ., explicaciones), y elementos para expertos ( e.g ., atajos). * Shneiderman , B., Plaisant , C., Designing the User Interface: Strategies for Effective Human-computer Interaction, 4/E. 2005.

14. Principios de diseño (3) Ofrecer retroalimentación informativa. Debe haber retroalimentación del sistema por cada acción del usuario. Las acciones frecuentes y poco importantes pueden tener retroalimentación modesta. Pero las acciones poco frecuentes e importantes deben tener retroalimentación substancial. La presentación visual de los objetos de interés provee un entorno conveniente para mostrar los cambios explícitamente. * Shneiderman , B., Plaisant , C., Designing the User Interface: Strategies for Effective Human-computer Interaction, 4/E. 2005.

15. Principios de diseño (4) Diseñar diálogos para conducir a la finalización. Las secuencias de acciones se deben organizar en grupos con un comienzo, un intermedio y un final. La retroalimentación informativa al completar las acciones dan al usuario alivio, y lo preparan para las siguientes tareas. Por ejemplo, una secuencia de acciones en una compra en línea termina con una página con información clara de confirmación. * Shneiderman , B., Plaisant , C., Designing the User Interface: Strategies for Effective Human-computer Interaction, 4/E. 2005.

16. Principios de diseño (5) Prevenir errores. En lo posible, diseñar el sistema tal que los usuarios no puedan hacer errores graves. Por ejemplo, no permitir letras en campos numéricos. La interfaz debe detectar el error y ofrecer instrucciones para corregirlo. * Shneiderman , B., Plaisant , C., Designing the User Interface: Strategies for Effective Human-computer Interaction, 4/E. 2005.

17. Principios de diseño (6) Permitir deshacer acciones fácilmente. En lo posible, las acciones deben ser reversibles. Esto da alivio y libera la ansiedad, pues el usuario sabe que los errores se pueden deshacer. Esto alienta al usuario explorar acciones nuevas. * Shneiderman , B., Plaisant , C., Designing the User Interface: Strategies for Effective Human-computer Interaction, 4/E. 2005.

18. Principios de diseño (7) Dar soporte a la sensación de control interno. Los usuarios experimentados desean fuertemente sentir que tienen el control de la interfaz y que la interfaz responde a sus acciones. El usuario puede sentir ansiedad e insatisfacción si se presentan acciones inesperadas de la interfaz, entradas tediosas de datos y dificultad en obtener información necesaria. * Shneiderman , B., Plaisant , C., Designing the User Interface: Strategies for Effective Human-computer Interaction, 4/E. 2005.

19. Principios de diseño (8) Reducir la carga a la memoria de corto plazo. Como regla general, los humanos pueden retener en memoria 7 (± 2) temas al mismo tiempo. Esto requiere que la interfaz se mantenga simple, diseños con múltiples páginas se consolide, el cambio de ventanas se reduzca, y se dedique tiempo suficiente para entrenar al usuario a usar códigos, comandos y secuencias de acciones. * Shneiderman , B., Plaisant , C., Designing the User Interface: Strategies for Effective Human-computer Interaction, 4/E. 2005.

20. Ejercicio en clase (Diseño web en libreta) Diseñar una aplicación de software para ordenar comida en línea tomando en cuenta los 8 principios de diseño de Ben Schneiderman . Debe diseñar y dibujar la interfaz de la aplicación. Debe señalar en el dibujo mediante flechas, el número de principio de diseño que se está tomando en cuenta en los objetos de su interfaz, y explicar cómo se están tomando en cuenta.

21. Uso de texto en Interfaces Visuales (1) Los humanos procesan la información visual más fácil que la información textual. Por lo tanto, el texto debe ser corto, fácil de reconocer y fácil de recordar. Evita usar PURAS MAYÚSCULAS, son más difíciles de leer. Reconocer palabras no cuenta como leer (ej., copiar, pegar). Se debe minimizar el texto para leer, usar imágenes para dar contexto. Se debe leer sobre algo, sólo si el usuario cree que es importante y lo seleccionó visualmente. Ej., información pop-up.

22. Uso de texto en Interfaces Visuales (2) Si se debe leer, seguir lo siguiente: Asegurarse que el texto tiene alto contraste con el fondo. Escoger un tipo de letra apropiado, tamaño apropiado (menor a 10p es difícil de leer). Texto corto texto sans-serif como Arial. Texto largo texto serif como Times. Parafrasea tu texto para hacerlo entendible, usa el mínimo número de palabras para transmitir el significado. Clarifica y evita abreviaturas o usa abreviaturas estándar.

23. Uso del color en Interfaces Visuales El color es una importante herramienta visual y de diseño que puede crear un gran efecto, pero su uso también puede ser fácilmente abusado. El color debe integrarse con otros objetos como símbolos, íconos, texto. El color llama la atención. Retroalimentación visual, resaltar info . Mejora navegación y velocidad. Uso consistente puede ayudar a navegar y encontrar información. Muestra relaciones. El color puede agrupar objetos relacionados entre sí.

24. Uso inapropiado del color (1) Muchos colores. Más de 7 colores quita valor y dificulta desempeño. Uso de colores complementarios. Son colores inversos, que puestos juntos son difíciles de percibir ( chromostereopsis ). Ej., texto rojo en fondo azul es en extremo difícil de leer. Saturación excesiva. Llaman mucho la atención, puede causar chromostereopsis . Contraste inadecuado. Cuando el objeto y el fondo varían solo en matiz, es difícil de percibir. Deben variar en brillo o saturación, además de matiz. Texto y fondo de colores se deben evitar.

25. Colores cálidos y fríos (1) Los amarillos, rojos y sus familias recuerdan la idea del sol, calor y fuego. Los azules, verdes y muchos violetas tienen similitudes con la frescura, la profundidad, la humedad, el agua y el hielo. Un color puede parecer frío o caliente según la proporción de otros que lleve en su mezcla y también según los que tenga a su alrededor. http://www.eartvic.net/~mbaurierc/materials/20%20Selectivitat/Psicologia%20del%20color.pdf

26. Colores cálidos y fríos (2) El verde-amarillo se ve cálido, pero el verde-azul se ve frío. El gris-amarillo se ve cálido, pero el gris-azul se ve frío.

27. Colores cálidos y fríos (3) Los cálidos producen el efecto de expansión, avanzan hacia el observador. Los colores fríos absorben la luz, son entrantes y se alejan. ¿Las imágenes de abajo son del mismo tamaño?

28. Colores cálidos y fríos (4) Los colores cálidos dan la impresión de tener más tamaño, mientras que las superficies con colores fríos se ven más pequeñas. Cuando se pasa de tonalidades frías a cálidas, el efecto es de apertura y alargamiento. Cuando se pasa de tonalidades cálidas a frías, parece que las formas se encogieran y se redujeran sobre sí mismas.

29. Colores cálidos y fríos (5) Los colores fríos evocan tranquilidad, calma, pasividad, y elementos pasivos y poco vitales como el invierno. Los colores cálidos generan vivacidad, movimiento, alegría, excitación, energía, entusiasmo, se relacionan con el verano.

30. Códigos de color El color provoca un efecto consciente o inconsciente en el observador, y representan un código visual. Por ejemplo, en el tráfico el rojo simboliza peligro o prohibición, el amarillo, precaución, y el verde es utilizado para permitir la circulación. En topografía, los distintos signos que se utilizan en planos y mapas siguen un código de color que impide la confusión. Los arquitectos, de igual forma, identifican con color la fontanería, el gas o esquemas eléctricos. Los códigos de color son usados por diseñadores, publicistas, arquitectos, etc., para su trabajo.

31. Algunas aplicaciones Publicidad: usan colores verdes, azules y en general aquellos que están relacionados con el medio ambiente, aire puro, agua. Diseño para niños: Colores puros, saturados y llamativos. Máquinas con las que se está mucho tiempo: colores fríos y pálidos, porque despiertan indiferencia y no molestan visualmente. Movimientos políticos: Verde-ecologistas, rojo-socialistas o comunistas, azul-conservadores, etc. Ambientes laborales: rojo-peligro, violeta-energía, verde-paso libre.

32. Tabla del Color Color Significado Su uso aporta El exceso produce

33. Amarillo Color de la luz y oro, se relaciona con riqueza, abundancia, acción, poder y la fuerza. En exceso también provoca lecturas negativas como envidia, ira, traición, irritabilidad.

34. Naranja Simboliza entusiasmo y acción. Se relaciona con religiones orientales, y algunos significados se relacionan con lo terrenal (lujuria, sensualidad), y lo divino (exaltación).

35. Rojo El más vigoroso, demuestra alegría, fiesta, es impulsivo. Simboliza la sangre, el fuego, la pasión, la fuerza y la revolución. Se relaciona con la destrucción, la crueldad y la violencia.

36. Azul Color del espacio, la lejanía y el infinito. Se relaciona con limpieza y frescura, tranquilidad, afecto, frío e inteligencia.

37. Verde El color de la naturaleza y humanidad. Representa esperanza y equilibrio emocional. Tiene significados negativos como el veneno, lo demoniaco, y su relación con los reptiles.

38. Otros colores Violeta: pasión, sufrimiento, muerte, tristeza, penitencia. Su variante el purpura: realeza, dignidad, melancolía, delicadeza. Marrón: masculino, severo, confortable, otoñal, peso, equilibrio, realista tal vez porque es el color de la tierra que pisamos. Blanco: pureza, limpieza, paz, virtud. Negro: tinieblas, ceguera, muerte, luto, elegancia. Gris: colores pasivos, sin energía, neutrales, resignación.

39. Interfaz gráfica de usuario (GUI) Interfaz de usuario. Es el medio con que el usuario puede comunicarse con una dispositivo, y se compone de todos los puntos de contacto entre el usuario y el equipo. Interfaz gráfica de usuario. La GUI es un programa que actúa como interfaz de usuario, usando imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz. Proporciona un entorno visual sencillo para la comunicación con el modelo de la aplicación. *https://es.wikipedia.org/wiki/Interfaz_gr%C3%A1fica_de_usuario **https://es.wikipedia.org/wiki/Interfaz_de_usuario

40. La Arquitectura de la Información *Hay necesidad de una estructura lógica* La arquitectura de la información es el diseño, organización, etiquetado, navegación y sistemas de búsqueda que ayudan a los usuarios a encontrar y gestionar la información de manera eficaz. Se refleja en: Diseño estructural de entornos de información compartida. Combinación de sistemas de organización, rotulado, búsqueda y navegación en sitios web e intranets. Louis Rosenfeld , Peter Morville

41. Diagrama de la Arquitectura de la Información Navegación intuitiva, que toma en cuenta lo que espera el usuario. El arquitecto de la información verifica el proceso de diseño. Tres elementos en la Arquitectura de la Información: Contexto (objetivo, políticas, cultura, recursos, tecnología, limitaciones). Usuarios (audiencia, tareas, necesidades, comportamiento, experiencia, expectativas). Contenido (tipo de documentos o datos, objetivos, volumen, estructura existente).

42. Qué podemos hacer? ¿Dónde estoy? ¿Qué puedo encontrar en este sitio? Sé lo que quiero, ¿cómo lo busco en este sitio? ¿Dispongo de otro canal de comunicación con esta empresa? ¿Qué me ofrece esta empresa? ¿Esta empresa tiene algún contenido especialmente interesante? ¿Cómo vuelvo a la pantalla principal? Sé lo que busco porque ya navegué por la web en otra ocasión, ¿cuál es el camino más corto para llegar?

43. Principios de la Arquitectura de la Información Sistemas de organización Clasificación exacta Alfabético, cronológico, geográfico b. Clasificación ambigua Temática, por tareas, por perfiles. c. Estructura organizativa Jerárquica Hipertextual Bases de datos Secuencial 2. Sistemas de etiquetaje 3. Sistemas de navegación

44. Principios de la Arquitectura de la Información Sistemas de organización Clasificación exacta Alfabético, cronológico, geográfico b. Clasificación ambigua Temática, por tareas, por perfiles. c. Estructura organizativa Jerárquica Hipertextual Bases de datos Secuencial 2. Sistemas de etiquetaje 3. Sistemas de navegación

45. Principios de la Arquitectura de la Información Sistemas de organización Clasificación exacta Alfabético, cronológico, geográfico b. Clasificación ambigua Temática, por tareas, por perfiles. c. Estructura organizativa Jerárquica Hipertextual Bases de datos Secuencial 2. Sistemas de etiquetaje 3. Sistemas de navegación

46. Clasificación exacta: Alfabético Es el método de organización primario que proporciona un índice alfabético de un dominio o área de conocimiento. En este caso de un sitio web completo o de alguna de sus secciones.

47. ¿Cuándo usar un esquema alfabético? Se puede usar para cualquier tipo de información que tenga un título que se pueda incluir en el esquema A-Z. Pero funcionan mejor cuando la gente sabe qué está buscando , sabe cómo describirlo y el título contiene las palabras que están buscando. Considerar lo siguiente: Sí se puede poner las cosas dos veces, si tienen dos o más títulos. ¿Debo usar títulos con las palabras correctas (técnicamente) o con las palabras que la gente conoce? Si sabes que la gente va a usar sus propias palabras, hay que usarlas. Pero se pueden incluir las palabras correctas para que la gente se acostumbre a ellas. A veces no es necesario incluir todos los temas en la lista A-Z, dependiendo del contenido y de la estructura. http://www.uxbooth.com/articles/classification-schemes-and-when-to-use-them/

48. Clasificación exacta: Alfabético http://www.uxbooth.com/articles/classification-schemes-and-when-to-use-them/

49. Clasificación exacta: Cronológico Cuando la información se sucede en el tiempo tiene su razón de ser una recuperación por cotas temporales. Suele ser de habitual aplicación en noticias de prensa, titulares y canales de sindicación o cuyo flujo de información se sucede de manera continua. http://ccdoc-arquitecturainformacionweb.blogspot.mx/2011/10/04-sistemas-de-organizacion-de.html

50. Clasificación exacta: Cronológico

51. Clasificación exacta: Geográfico La organización geográfica permite limitar la información según su origen o ámbito de aplicación, lo que permite una discriminación de los contenidos que ayuda a la recuperación y búsqueda del usuario. Por ejemplo, distinguir la geolocalización de fotografías, los medios de comunicación de cada país o los servicios prestados por una empresa para cada región. http://ccdoc-arquitecturainformacionweb.blogspot.mx/ 2011/10/04-sistemas-de-organizacion-de.html

52. ¿Cuándo usar un esquema geográfico? Este esquema es exitoso cuando: Los usuarios tienen el deseo de usar el esquema geográfico. Los usuarios entienden la Geografía que se está usando, y usualmente se necesitan muchos detalles.

53. Geográfico http://www.uxbooth.com/articles/classification-schemes-and-when-to-use-them/

54. Principios de la Arquitectura de la Información Sistemas de organización Clasificación exacta Alfabético, cronológico, geográfico b. Clasificación ambigua Temática, por tareas, por perfiles. c. Estructura organizativa Jerárquica Hipertextual Bases de datos Secuencial 2. Sistemas de etiquetaje 3. Sistemas de navegación

55. Clasificación ambigua: Temática Es un método muy común. En cada sección debería tener una presentación de novedades (artículos, noticias, anuncios, etc.). Este esquema ayuda a enseñar al usuario el tipo de información que contiene cada tema. 1. http://ccdoc-arquitecturainformacionweb.blogspot.mx/2011/10/04-sistemas-de-organizacion-de.html

56. Clasificación ambigua: Temática Páginas amarillas

57. Clasificación ambigua: por Tareas Se definen los servicios o actividades que el usuario puede desempeñar, se puede combinar con la organización temática 1 . Organiza el contenido dentro de un conjunto de procesos, funciones o tareas 2 . 2. https://esalas.wordpress.com/2008/09/16/esquemas-de-organizacion-de-la-informacion/ 1. http://ccdoc-arquitecturainformacionweb.blogspot.mx/2011/10/04-sistemas-de-organizacion-de.html

58. Clasificación ambigua: por Tareas

59. Clasificación ambigua: por Perfiles Cuando hay una clara segmentación de la audiencia y transmite personalización del contenido 1 . Hay varios tipos de usuarios. Por ejemplo, domésticos, profesionales, investigadores y educadores 2 . También se conoce como por Audiencia o para un Público Específico . Por ejemplo: Particulares, Empresa, Organización Social. 2. http://ccdoc-arquitecturainformacionweb.blogspot.mx/2011/10/04-sistemas-de-organizacion-de.html

60. Clasificación ambigua: por Perfiles

61. Principios de la Arquitectura de la Información Sistemas de organización Clasificación exacta Alfabético, cronológico, geográfico b. Clasificación ambigua Temática, por tareas, por perfiles. c. Estructura organizativa Jerárquica Hipertextual Bases de datos Secuencial 2. Sistemas de etiquetaje 3. Sistemas de navegación

62. Estructuras organizativas: Jerárquicas Proporcionan un método simple de clasificación y organización de la información, permitiendo enfocar la consulta del usuario desde el plano general hasta el más específico. Equilibrio entre profundidad y amplitud Escalabilidad: plantear categorías genéricas para incluir nuevos ítems a futuro.

63. Jerárquica http://www.observatoriodelainfancia.es/oia/comun/tesauro/tesauro_jerarquico.aspx?idTermino=1591#1591

64. Estructuras organizativas: Hipertextual No siguen un modelo mental. La relación entre dos elementos no puede tener sentido para otros elementos. Es flexible. Permite el descubrimiento de nuevos elementos. Ejemplo: redes sociales.

65. Hipertextual

66. Estructuras organizativas: Bases de Datos Determina de qué manera los datos pueden ser organizados y manipulados. Permite estructurar y homogeneizar el contenido web, que es por naturaleza heterogéneo y desestructurado. Esquema de metadatos.

67. Estructuras organizativas: Bases de Datos

68. Bases de datos

69. Estructuras organizativas: Secuencial Se da en contextos off-line, como en películas, un programa de radio, un cuento…

70. Secuencial

71. Principios de la Arquitectura de la Información Sistemas de organización Clasificación exacta Alfabético, cronológico, geográfico b. Clasificación ambigua Temática, por tareas, por perfiles. c. Estructura organizativa Jerárquica Hipertextual Bases de datos Secuencial 2. Sistemas de etiquetaje 3. Sistemas de navegación

72. Sistemas de Organización: Etiquetaje Son aquellas palabras que se utilizan para agrupar bloques de información. Se deben utilizar términos cortos y concisos, ayudando al usuario a encontrar lo que quiere. El usuario se guía por íconos e indicaciones textuales, por ello si tenemos dispuesto un mal sistema de etiquetas provocará mala navegación por la web y dificultad para conseguir nuestros objetivos. Debe hablar el mismo lenguaje que los usuarios y reflejar el contenido. http://ccdoc-arquitecturainformacionweb.blogspot.mx/2011/10/04-sistemas-de-organizacion-de.html

73. Algunos errores del etiquetaje Usar etiquetas ambiguas (que no se entienden bien), con significados muy comunes. Ejemplos: “trámites”, “servicios”, “software”. Uso de dos o más etiquetas simultáneamente para la misma sección. “productos y servicios”. Adecuar la etiqueta a la realidad. “ superofertas ”, “paquetazo”. Usar lenguaje que no es familiar al usuario. Por ejemplo, lenguaje corporativo (“sinergias”). http://ccdoc-arquitecturainformacionweb.blogspot.mx/2011/10/04-sistemas-de-organizacion-de.html

74. Etiquetaje El sistema de etiquetaje se encuentra en los siguientes elementos. Títulos. Describen el contenido que encabezan. Enlaces contextuales. Texto enlazado a otros recursos (links externos) y contenidos en la misma página. Opciones del sistema de navegación. Representan las opciones de navegación del sistema o que están integradas dentro de él. Deben tener consistencia. Se recomienda ofrecer retroalimentación de estas etiquetas. http://ccdoc-arquitecturainformacionweb.blogspot.mx/2011/10/04-sistemas-de-organizacion-de.html

75. Principios de la Arquitectura de la Información Sistemas de organización Clasificación exacta Alfabético, cronológico, geográfico b. Clasificación ambigua Temática, por tareas, por perfiles. c. Estructura organizativa Jerárquica Hipertextual Bases de datos Secuencial 2. Sistemas de etiquetaje 3. Sistemas de navegación

76. Opciones del sistema de navegación (continuación) Algunos ejemplos son: página principal, inicio = main page, home buscar, explorar, navegar = search , find , browse contactar = contact us ayuda, FAQ = help , FAQ noticias, eventos = news , announcements acerca de, sobre nosotros, quienes somos = about , about us , who we are http://ccdoc-arquitecturainformacionweb.blogspot.mx/2011/10/04-sistemas-de-organizacion-de.html

77. Sistemas de Organización: Sistema de Navegación Debe informar claramente a los usuarios dónde están y dónde pueden ir. Navegación global (menú principal) Navegación local (submenú) Navegación complementaria (mapas de sitio, índice, demos) Navegación contextual (enlaces en el contenido)

78. Sistema de Navegación Global Local Complementaria Contextual

79. Sistemas de Organización: Sistema de Navegación Jennifer Flemming , autora del libro “Web navigation : designing the user experience ” comenta que una navegación que funcione bien debería: Ser fácilmente aprendida Mantenerse consistente a lo largo de todo el interactivo Dar (retroalimentación) feedback Aparecer en contexto (¿en qué sitio web me encuentro?) Ofrecer alternativas Usar etiquetas claras y entendibles Ser adecuada a los objetivos del sitio Apoyar en los objetivos y comportamientos de los usuarios