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.
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 ?
6.
7.
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
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
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.
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 “
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
21.
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
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
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
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.
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
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.
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.
44.
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
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
60.
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”
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%.
69. Publicidad Navegador y S.O. Navegación Interna Contenido Espacio de la Pantalla – www.viamichelin.com
70.
71.
72. Tiempos de respuesta “ Los mejores sitios son rápidos ” http://www.alexa.com/site/ds/top_500
73.
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
76.
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.
78.
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
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
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.
85.
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
88.
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
90.
91.
92.
93.
94.
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
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
101.
102.
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
104.
105.
106.
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”