El documento trata sobre el tema de la usabilidad y la arquitectura de la información en el diseño de sitios web. Explica conceptos clave como qué es la usabilidad, dónde y por qué se aplica, objetivos de la usabilidad, evaluación de la usabilidad, estructuras de organización de la información, y diseño de páginas web considerando factores como el espacio de pantalla.

1. Usabilidad David Solanes [email_address] Seminario de Usabilidad

2. Usabilidad

3. ¿Qué es la Usabilidad? Seminario de Usabilidad – Crea® formación Disciplina que trata de aquellos métodos y recursos que permiten utilizar y gestionar un objeto, producto o sistema de información de forma fácil y con el mínimo de información previa. “ La usabilidad dirige la Web. Dicho de un modo sencillo, si el cliente no puede encontrar un producto, no lo podrá comprar. “ Jakob Nielsen

4. ¿Donde se aplica la Usabilidad? La Usabilidad significa facilidad de uso y se aplica a cualquier objeto con una función concreta, desde un sacacorchos hasta un móvil 3G, pasando por las páginas Web que es el área en donde más se aplica hoy en día. Se aplica generalmente a:

5. ¿Por qué la Usabilidad para la Web? En el diseño de productos y software , los usuarios pagan de antemano y experimentan la usabilidad después. En la Web , los usuarios experimentan primero la usabilidad y pagan después. Hoy en día, hay cerca de 60 millones de páginas Web, con un crecimiento mensual de 1 millón. Ahora más que nunca los usuarios tienen infinitas posibilidades para ir a un sitio y otro, ¿Por qué van a perder tiempo en algo que sea confuso , lento o que no satisfaga sus necesidades ?

8. Hay que entender a los usuarios . . . “ Han sido necesarios años hasta que los cajeros automáticos han cambiado el incomprensible término “Reintrego” por el término “Sacar Dinero” “ Eduardo Manchón

9. Proveedor - Usuario

10. ¿Contenido o Diseño?

11. Surgimiento de la Arquitectura de la Información La AI 1 es la respuesta técnica a la realidad mostrada en estos años de desarrollo Web, donde ha quedado evidenciado que los contenidos son la clave del éxito del servicio, y no la visión aislada del diseño gráfico. 1 AI : Arquitectura de la Información “ Al final, los usuarios visitan el sitio web por su contenido. Todo lo demás es accesorio. El diseño existe para permitir a la gente acceder al contenido “ Jakob Nielsen

12. Usabilidad

13. ¿Qué es la Arquitectura de la Información? Es la disciplina del conocimiento que persigue definir estructuras de información que sean fácilmente comprensibles por parte de sus destinatarios y, construir en torno a ellas herramientas de orientación y búsqueda que permitan una gestión satisfactoria de la información que se almacenan en dichas estructuras Definición general, pero hay que tener en cuenta el aspecto de la interacción persona-ordenador.

14. HCI ( Human- Computer Interaction)

15. Definición de Arquitectura de Información Aplicada a los medios digitales, es la disciplina del conocimiento que persigue definir estructuras de información que sean fácilmente comprensibles por parte de sus destinatarios, así como procesos usables de interacción entre estos y dichas estructuras y, construir en torno a ellos herramientas de navegación, búsqueda y orientación que permitan una gestión satisfactoria de la información “ El arte y la ciencia de estructurar y clasificar sitios Web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información “ Louis Rosenfeld

16. Objetivo de la Arquitectura de la Información La arquitectura de la información integra la organización de contenidos desde los primeros cimientos en la construcción de un Sitio Web, su objetivo es facilitar a la audiencia encontrar lo que desee y necesite en el mejor tiempo, creando las condiciones o facilidades necesarias para que el usuario regrese al Sitio.

17. El Arquitecto de la Información Una persona que crea la estructura o mapa de la información lo cual permite a otros encontrar sus caminos personales hacia el conocimiento. Dedicado a organizar las estructuras inherentes en datos, haciendo lo complejo en sencillo.

18. La Arquitectura de la Información en Diseño Web “ Generalmente se basa en la experiencia del usuario “

19. Arquitectura de la Información

20. Planificación estratégica del Sitio Web Misión Metas Timing Políticas Procedimientos Evaluación La razón de ser de la organización o producto Son los resultados que quieren ser logrados Se refiere a cumplir las metas especificas para la construcción del Sitio Se refiere a quién hará las cosas durante la construcción Se refiere a los pasos que hay que seguir para cumplir las tareas asignadas por las políticas Evaluación de cómo hemos sido capaces de crear el sitio y evaluación de los resultados de funcionamiento del Sitio

22. Planificación estratégica del Sitio Web Consiste en desarrollar un servicio o producto basados en obtener ventaja sobre el resto de los competidores, por un espacio de tiempo suficiente para obtener beneficios económicos Sin la ventaja competitiva del sitio, éste no puede ofrecer un valor añadido a sus productos, o servicios. “ Cuando se logra la ventaja competitiva se disfruta de ella en un periodo de tiempo muy limitado en Internet, cuando la competencia rompe la ventaja el ciclo se reinicia “ Michael Porter

23. Planificación estratégica del Sitio Web La carpeta del sitio busca facilitar la organización de los documentos que genera la AI y el acceso a la misma por parte de los involucrados en la construcción y mantenimiento del Sitio.

24. Planificación estratégica del Sitio Web La discusión de resultados entre el equipo dedicado a la construcción del Sitio se organiza cuando se van presentando los resultados que se reflejarán en la carpeta del sitio. La discusión facilita la retroalimentación del arquitecto acerca de lo que piensa el resto del equipo acerca de los resultados que aporta la arquitectura de la Información.

25. Esquema Planificación estratégica del Sitio Web Aspectos generales Estudio de la Audiencia INTRANET INTERNET Ventaja Competitiva Carpeta del Sitio Discusión de Resultados Misión Metas Timing Políticas Procedimientos Evaluación

26. Usabilidad

27. Estructuras de Organización Las estructuras de organización de los Sitios juegan un importante papel en el acceso de la audiencia a los contenidos que existes en estos, dado que definen las formas en las que los usuarios pueden navegar. Las estructuras no son posibles sino se considera la Web como estructura hipermedia , basada en el hipertexto. “ HIPERTEXTO : documento electrónico en el que la información Se estructura como una red de enlaces y nodos “ Maria Luisa Santos

28. Estructuras de Organización

29. Estructura Lineal Diagrama: La forma más sencilla de organizar la información es colocarla secuencialmente. Ideal para sitios de formación o educativos, o para sitios que el usuario tenga que pasar por una serie de contenidos. Su estructura es predecible, ideal para usuarios inexpertos

30. Estructura Paralela Diagrama:

31. Estructura Ramificada Diagrama:

32. Estructura Jerárquica Diagrama:

33. Estructura Jerárquica Es la mejor opción para organizar bloques de contenidos complejos. Es la más utilizada en la Web, puesto que ésta siempre se basa en una página principal o de inicio. El arquitecto o constructor debe hacer un análisis de los contenidos del Sitio, puesto que las jerarquías no funcionan si el material no esta bien organizado. Hay que tener en cuenta que el Sitio crecerá en un futuro, hay que plantearse la utilización de jerarquías anchas, en vez de altas.

34. Estructura Concéntrica

35. Estructura Telaraña A B C F G H E D

36. Estructura Mixta La estructura que más se ha implantado en los Sitios Webs, pero hay que tener en cuenta que su elaboración y su grado de complejidad puede afectar a la confunsión del usuario durante la navegación.

37. Se debe llegar a la información en 2 o 3 clics. Se recomienda estructura ancha, en vez de estructura alta. Recomendaciones para las estructuras

38. Recomendaciones para las estructuras Evitar Callejones sin salida en la medida de lo posible

39. Recomendaciones para las estructuras Evitar tener más de entre 6 o 10 opciones de acceso para el usuario en la página donde se encuentre.

40. Recomendaciones para las estructuras Hay que evitar estructurar el sitio para que refleje la forma en que la empresa está estructurada. En vez de ello, el sitio debe estar estructurado para reflejar las tareas de los usuarios y sus puntos de vista en el espacio informativo.

42. Interfaz

43. ¿ Qué es una Interfaz? Una interfaz es la parte de una herramientas o tecnología con la que el usuario interactúa y la manera en que ésta responde a la interacción. Generalmente se asocia la interfaz como intermediario entre la máquina y el usuario.

45. Interfaz por comandos La interfaz se caracteriza por ser rápida y flexible, pero los usuarios necesitan aprender todos los comandos y escribirlos correctamente << Interfaz de MS-DOS

46. Interfaz GUI La interfaz se caracteriza por ofrecer soluciones más intuitivas a base de iconos, gráficos … que facilitan la interacción con el usuario << Interfaz AQUA de MAC OS X 5 de enero de 2000

47. Interfaz Gráfica de Usuario - Evolución << Interfaz STAR de XEROX 1981

48. Interfaz Gráfica de Usuario - Evolución << Interfaz LISA de APPLE 1983

49. Interfaz Gráfica de Usuario - Evolución << Interfaz Windows de MS 1983

50. Interfaz Gráfica de Usuario - Evolución << Interfaz Macintosh de MS 1984

51. Interfaz Gráfica de Usuario - Evolución << Interfaz Windows 1.01 de MS 1985

52. Interfaz Gráfica de Usuario - Evolución << Interfaz Macintosh II de APPLE 1987

53. Interfaz Gráfica de Usuario - Evolución << Interfaz Windows 3.11 de MS 1992

54. Interfaz Gráfica de Usuario - Evolución << Interfaz Windows 98 de MS 1998

55. Interfaz Gráfica de Usuario - Evolución << Interfaz AQUA de APPLE 2000

56. Interfaz Gráfica de Usuario - Evolución << Interfaz Windows XP de MS 2001

57. Interfaz Gráfica de Usuario - Evolución << Interfaz Windows Vista BETA . . .

58. Experiencia del Usuario

59. Experiencia del Usuario 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. “ Como en Marketing, la UX no solo analiza los factores que influyen en la adquisición del producto, sino en como lo usan y la experiencia resultante de su uso “ Michael Porter

61. Experiencia del Usuario A tener en cuenta con la UX ( User eXperience) La experiencia del usuario se verá influida por expectativas y experiencias previas, y por tanto condicionará expectativas futuras. La fidelización de los clientes-usuarios es difícil Una buena experiencia de usuario hace que “corra la voz”

64. Usabilidad – Diseño de Sitios Web

65. Usabilidad – Diseño de Sitios Web

66. Diseño de Página

67. Espacio de la Pantalla Las páginas Web deben estar presididas por un contenido que despierte la atención del usuario. Por mala suerte muchos espacios destinan más espacio a la navegación que a la información que supuestamente hizo que el usuario lo visitara. Como norma de usabilidad el contenido debe ocupar al menos la mitad del diseño de una página, y preferiblemente hasta un 80%, mientras que el espacio destinado a navegación debe mantenerse por debajo de un 20%.

68. Espacio de la Pantalla – www.viamichelin.com

69. Publicidad Navegador y S.O. Navegación Interna Contenido Espacio de la Pantalla – www.viamichelin.com

72. Tiempos de respuesta “ Los mejores sitios son rápidos ” http://www.alexa.com/site/ds/top_500

74. Vinculación – Haga Clic Aquí Estos enlaces hay que evitarlos como texto asociado a un vínculo. Hay dos razones para ello: 1.- Sólo los visitantes que usan el ratón hacen clic, mientras que los usuarios discapacitados que tengan dispositivos especiales no hacen clic 2.- No aportan ninguna información de la página de destino En vez de decir: Para recabar información sobre la abeja de pico azul, haga clic aquí Es mejor decir: Tenemos información adicional sobre la abeja de pico azul

75. Vinculación – Más … Son especialmente problemáticos cuando en la página hay más de uno, ya que los usuarios les resultará difícil diferenciarlos. En vez de decir: Mas . . . Es mejor decir: Más Noticias o Análisis de libros archivados

77. Vinculación – Colorear los vínculos La mayoría de navegadores utilizan dos colores diferentes para mostrar los vínculos : para visitados el rojo o morado, y para los que no han sido visitados con azul. Es importante para la usabilidad del sitio mantener esta codificación en los colores de sus vínculos Aunque estudios marcan que solo el 16% ( de los factores que marcan que un usuario haga cosas en el sitio ) es acerca de los colores de los vínculos, hay que tenerlos en cuenta en la Usabilidad para sitios Web.

79. Vinculación – Vínculos externos Aunque la visión de algunos es que hay que conservar los usuarios en el sitio propio, hay que pensar que esto contradice la naturalidad de la Web, en donde el usuario controla su propio destino

80. Otras consideraciones del diseño de página

81. Conclusión La simplicidad debería ser el fin del diseño de páginas. Es importante asegurar que los diseños funcionan en una amplia gama de plataformas y a ellas puedan acceder usuarios con tecnologías antiguas

82. Diseño del Contenido

84. Escribir para la Web Los estudios marcan que leer en la Web es un 25% más lento que leer en papel. A los usuarios no les gusta desplazarse para leer texto; esto obliga a crear páginas breves. Es recomendable contratar “Editores Web”; un buen contenido requiere de un equipo que sepa escribir para la Web. Hay que hacer una “Revisión de los textos”, un corrector podrá detectar algunas pero en mayor dificultad las de tipo gramatical.

86. Facultad de Hojear – Ejemplo Nebraska está repleto de atractivos internacionalmente reconocidos que atraen un gran número de personas anualmente. En 1996, algunos de los lugares más visitados fueron el Parque Estatal de Fort Robinson(355.000 visitantes), el Monumento Nacional Scotts Bluff (132.166), el Museo y Parque histórico de Arbor Lodge(100.000), Carhenge(86.598), el Museo de la Pradera de Stuhr(60.002), y el Parque histórico del Rancho de Buffalo Bill(28.446). Escritura típica de sitios Web comerciales y/o de promoción

87. Facultad de Hojear – Ejemplo En 1996, seis de los lugares más visitados de Nebraska fueron el Parque Estatal de Fort Robinson, el Monumento Nacional Scotts Bluff, el Museo y Parque histórico de Arbor Lodge, Carhenge, el Museo de la Pradera de Stuhr, y el Parque histórico del Rancho de Buffalo Bill. Texto Conciso, cerca de la mitad del texto de referencia. 58 % MEJOR

89. Facultad de Hojear – Ejemplo Nebraska tiene varios atractivos. En 1996, algunos de los lugares más visitados fueron el Parque Estatal de Fort Robinson(355.000 visitantes), el Monumento Nacional Scotts Bluff (132.166), el Museo y Parque histórico de Arbor Lodge(100.000), Carhenge(86.598), el Museo de la Pradera de Stuhr(60.002), y el Parque histórico del Rancho de Buffalo Bill(28.446). Escritura con lenguaje objetivo, sin usar lenguaje subjetivo o exagerado como el de referencia. 27% Mejor

95. Imágenes y fotografías “ Una imagen vale más que mil palabras” “ Una imagen vale 2000 mil palabras de tiempo de descarga” En el mundo del diseño gráfico: En el mundo Web:

96. Aunque la cantidad de gráficos debe reducirse, hay ocasiones que no podemos descartar su uso. Hay que utilizar técnicas de recorte y escalado para el tratamiento de las imágenes. Hay que dar al usuario la posibilidad de ver el producto en grande, y si puede ser a diferentes vistas. Imágenes y fotografías

97. Imagen Original: Imágenes y fotografías

98. Técnica de Recortado: Imágenes y fotografías El recorte lleva a una pérdida del contexto de la fotografía si se excede su uso.

99. Técnica de Escalado: Imágenes y fotografías El escalado hace que se pierdan los detalles, dificultando la visión de lo que la imagen representa

100. Técnica de “Reducción de Imagen de Importancia Mejorada”: Imágenes y fotografías Se conserva el contexto y el detalle, incluso en tamaños pequeños

103. Animación Es conveniente reducir el uso de la animación Por instinto, es difícil concentrarse en un texto si hay un logo en movimiento, y más si este genera un bucle infinito y no se detiene nunca. La animación es considerada por el usuario como algo molesto, y como elementos que no aporta información útil. “ He dejado de leer este tipo de texto, porque la experiencia me ha enseñado que nunca encierra información útil” Usuario Web Anónimo

107. Audio El audio de buena calidad mejora sustancialmente la experiencia del usuario, aunque hay que dar la opción siempre de deshabilitarlo. Hay que tener en cuenta el tiempo de descarga al utilizar este media.

108. Conclusión El contenido es la razón por la que se conectan los usuarios y es su centro de atención. El contenido de “calidad” es uno de los factores más importantes de la Usabilidad. Entendemos por “calidad” a un contenido que satisface preguntas de usuario ( ¿Qué hay para mi?, ¿Cómo va a ayudarme a resolver los problemas?) que esta orientado a dar respuestas rápidas que a ser útil para el usuario.

109. Importante Comentado que el diseño del contenido de calidad es uno de los factores más importantes de la Usabilidad, el otro factor importante es si los usuarios pueden encontrar la página deseada . . . . . . Que es la base del “Diseño del Sitio”

110. Fin Seminario de Usabilidad