Seminario Usabilidad

  • 7,208 views
Uploaded on

Seminario de Usabilidad

Seminario de Usabilidad

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,208
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
0
Likes
19

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 ?
  • 6. Objetivos de la Usabilidad “ La buena usabilidad es invisible porque de tan simple y evidente pasa desapercibida “ Eduardo Manchón
    • Que sea efectivo
    • Que sea eficiente
    • Que sea pueda aprender su forma de uso
    • Que sea fácil de recordar cómo se usa
  • 7. Evaluación de la Usabilidad No podríamos evaluar la usabilidad de un sitio, sino disponemos de pruebas o test para identificar aquellos elementos que impiden que los sitios no cumplan con los objetivos de usabilidad. Normalmente, las pruebas de usabilidad consisten en:
    • Investigar, identificar y documentar las necesidades de los usuarios con test de usabilidad
    • Revisar los “logs” del servidor y/o buscadores
    • Técnica de análisis “eyetracking”
  • 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
  • 21. Planificación estratégica del Sitio Web Hay que identificar a los usuarios potenciales del Sitio Web para poder estructurar el diseño y los contenidos en función de sus expectativas y necesidades. Existen dos grandes bloques de Audiencia para la Web:
    • INTERNET
    • INTRANET
  • 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.
  • 41. La importancia de estructuras funcionales
    • Si no se puede utilizar, no sirve
    • Para poder comprender la utilidad de una información hay que saber como acceder a ella
    • Los usuarios no tienen por que poseer ningún conocimiento previo
    • Nuestra visión del sitio no tiene por que coincidir con la del usuario
    • El usuario viene a cumplir unas expectativas no a aprender un programa informático
    • Los usuarios no leen, miran
  • 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.
  • 44. HCI Se define como la disciplina relativa al diseño, evaluación e implementación de sistemas informatizados interactivos para el uso humano, y al estudio de los principales fenómenos entorno suyo.
    • Existen dos tipos de interacciones de humano con la interfaz:
    • Por comandos
    • Por GUI ( Graphical User Interface )
  • 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
  • 60. Experiencia del Usuario
    • Es el resultado de un fenómeno interactivo en el que intervienen multitud de factores
    • Individuales ( personalidad, motivación, expectaciones, emociones, valores …)
    • Sociales ( presión en el tiempo, presión general por conocimientos . . . )
    • Culturales ( Moda, Sexo, hábitos, normas, lenguaje, religión . . . )
    • Contextuales ( Sitio, acompañantes, temperatura, estado del tiempo . . . )
    • Propios del Producto ( tamaño, estética, funciones, usabilidad , altura . . . )
    “ Estos son las variables que condicionan y modelan la experiencia del usuario “ Arhippainen y Tähti
  • 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”
  • 62. Experiencia del Usuario
    • Como potenciar una buena experiencia de Usuario:
    • Facilitar la adquisición del producto o servicio
    • Dar comodidad en la navegación
    • Dar a conocer las ventajas frente a otros medios
    • Ofrecer el tan “valioso” Valor Añadido
  • 63. Evaluación de la Experiencia del Usuario
    • La experiencia del usuario se mide en base a 3 factores:
    • Efectividad: se mide si los usuarios alcanzan sus metas
    • Eficiencia: se miden los recursos desplegados para efectuar una tarea
    • Satisfacción: se mide la reacción afectiva de los usuarios respecto al comportamiento de la aplicación
    Herramienta no-verbal donde cada dibujo representa una emoción Test PrEMO - Hekkert
  • 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
  • 70. Diseño de Plataforma Cruzada A diferencia del diseño de software donde el diseñador controla los gráficos, fuentes . . . . . . En la Web hay factores a tener en cuenta, que pueden resultar conflictivos para nuestro proyecto
    • De donde vienen los usuarios (motores de búsqueda . . .)
    • La resolución de las pantallas de los usuarios
    • Las tecnologías Web a utilizar (ASP, PHP, XHTML . . .)
    • Nuevas versiones de Navegadores
    • Utilizar normas en vez de crear para presentación
    • Colores seguros para la Web
  • 71. Tiempos de respuesta Todos los usuarios nos imploran que aceleremos las descargas de las páginas
    • Un segundo es el límite que hay para que el usuario piense que no hay interrupción, aunque éste se dé cuenta de la demora
    • Diez segundos es el límite máximo para mantener la atención del usuario centrada.
    • Hay que recordar que la satisfacción del usuario viene dada por sus expectativas y por el rendimiento real del tiempo de respuesta
  • 72. Tiempos de respuesta “ Los mejores sitios son rápidos ” http://www.alexa.com/site/ds/top_500
  • 73. Vinculación
    • Constituyen la parte más importante de una estructura basada en hipertexto. Existen tres tipos principales de vínculos:
    • Vínculos de navegación estructural
    • Vínculos asociativos del contenido de la página
    • Vínculos de referencia o de tipo “véanse también”
  • 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. Vinculación – Títulos de vínculos
    • Poner títulos a los vínculos permiten que el usuario sepa que puede esperar si sigue el vinculo. Sobretodo para aquellos enlaces que generan llamadas a aplicaciones ( mail, PDF . . . )
    • Directrices de que incluir en ellos:
    • El nombre del sitio al que va a llevarnos el vínculo
    • El nombre de la subsección al que va a llevarnos el vínculo
    • Detalles añadidos acerca del tipo de información que se va a encontrar en la página de destino
    • Aviso de problemas que pueda haber al otro lado del vínculo
  • 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. Vinculación – Sus extremos
    • Un vínculo de hipertexto posee dos extremos:
    • La página de salida
    • Hay que explicar de forma clara a los usuarios la razón por la que deben abandonar el contexto actual y qué van a obtener en el otro extremo del vínculo
    • La página de la llegada
    • Hay que situar a los usuarios en el nuevo contexto que aparece y ofrecerles valores relativos a sus puntos de origen
  • 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
  • 83. Escribir para la Web
    • Las 3 directrices para escribir en la Web son las siguientes:
    • Escribir no más de la mitad del texto que se habría usado para cubrir el mismo material en una publicación impresa.
    • Escribir para poder encontrar las cosas. Utilizar párrafos cortos, listas con viñetas, subencabezados . . .
    • Utilizar hipertexto para dividir la información extensa en múltiples páginas
  • 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. Facultad de Hojear El usuario no lee, “HOJEA”.
    • Directrices para escribir texto en base a facilitar el hojeado:
    • Estructurar los artículos con dos o tres niveles de títulos y subtítulos.
    • Encabezados Significativos en vez de atractivos
    • Utilizar viñetas y elementos de diseño similares para tener bloques de texto uniformes.
    • Utilizar resaltado y énfasis para hacer que las palabras importantes retengan la atención del usuario.
  • 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. 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:
    • Parque Estatal de Fort Robinson(355.000 visitantes)
    • Monumento Nacional Scotts Bluff (132.166)
    • Museo y Parque histórico de Arbor Lodge(100.000)
    • Carhenge(86.598)
    • Museo de la Pradera de Stuhr(60.002)
    • Parque histórico del Rancho de Buffalo Bill(28.446).
    Diseño con facultad de hojeado, es el mismo texto que el de referencia. 47% 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
  • 90. Facultad de Hojear – Ejemplo
    • En 1996, algunos de los lugares más visitados de Nebraska fueron:
    • Parque Estatal de Fort Robinson
    • Monumento Nacional Scotts Bluff
    • Museo y Parque histórico de Arbor Lodge
    • Carhenge
    • Museo de la Pradera de Stuhr
    • Parque histórico del Rancho de Buffalo Bill
    Versión combinada. Utiliza texto conciso, objetivo y con facultad para hojearlo. 124% MEJOR
  • 91. Escribir para la Web
    • Aspectos a tener en cuenta:
    • Lenguaje Claro
    • Fragmentación de las páginas
      • Hay que estructurar correctamente el contenido para aplicar la fragmentación ( uso ideal de niveles de títulos)
      • Los enlaces deben ser claros, y deben aportar información de lo que el usuario se va a encontrar al clicar.
    http://www.hotwired.com
  • 92. Titulares
    • Directrices para escribir links de titulares en línea:
    • Explicar de que va el artículo en términos que se relacionan con el usuario y con lenguaje claro
    • Evitar los artículos en los títulos, mejora la indexación posterior ( ejemplo: artículos ordenador por E , se mezclan los de “empresas” con los de “el noticiario”
    • Convertir la primera palabra en algo importante
    • Evitar que los títulos empiecen por la misma palabra
  • 93. Legibilidad Diseño, Velocidad y Contenido falla si los usuarios no pueden leer el texto
    • Directrices de legibilidad:
    • Utilizar colores que tengan mucho contraste entre el texto y el fondo. Mejor contraste positivo ( Texto negro > Fondo Blanco) que el contraste negativo ( Texto blanco > Fondo Negro)
    • Utilizar fondos de colores claros o fondos de imagen sútiles.
    • Utilizar fuentes suficientemente grandes ( sans-serif VS serif)
  • 94. Redacción del Contenido
    • A tener en cuenta:
    • No utilizar jerga de marketing que confunda a los usuarios
    • Evitar repetir contenido de texto o elementos
    • Utilizar lenguaje imperativo sólo para tareas obligadas
    • En caso de abreviaturas o acrónimos, añadir su significado inmediatamente detrás. Excepto los generales ( DVD . . . )
    • Evitar uso de mayúsculas por que reducen la legibilidad y porque para algunos usuarios significa alzar la voz
    • Evitar los signos de exclamación. Todos los elementos son importantes
  • 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
  • 101.
    • Algunas directrices a tener en cuenta:
    • Utilizar las imágenes para mostrar el contenido real, no sólo para decorar la página
    • Etiquetar las imágenes a partir de textos alternativos o pies con información complementaria
    • Publicar las imágenes al tamaño apropiado para visualizarlos
    • Evitar marcas de agua. ( crean confusión y reducen visibilidad)
    Imágenes y fotografías
  • 102. Imágenes 3D
    • Casi siempre es mejor utilizar 2D frente a 3D por las siguientes razones:
    • La pantalla y el ratón son dispositivos 2D, por lo que no se obtiene verdadero 3D
    • Es difícil para el usuario controlar espacios 3D con las técnicas de interacción que se suelen usar, porque estas son 2D ( arrastrar y desplazarse)
    • El software necesario para 3D no suele ser estándar y requiere descarga adicional
  • 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. Animación
    • Siete motivos para usar una animación:
    • Mostrar continuidad en las transiciones [ http://www.solucionesinformaticas.net/ ]
    • Indicar la dimensionalidad en las transiciones [ http://www.leoburnett.ca/ ]
    • Ilustrar el cambio en el tiempo [ Ver swf ]
    • Multiplicar la pantalla [ http://www.guru.it ]
    • Enriquecer las representaciones gráficas ( iconografía )
    • Visualizar estructuras tridimensionales [ http://www.apple.com/es/macbookpro/gallery/qtvr.html ]
    • Atraer la atención [ http://www.jkrowling.com/ ]
    “ Muchas veces una animación se hace desde el punto de vista del diseñador, no del target, eso puede confundir tremendamente al usuario final” David Solanes
  • 105.
    • Algunas directrices a tener en cuenta:
    • No emplear las animaciones con el único fin de atraer la atención
    • No dotar la animación con los elementos importantes de la página. ( el usuario generalmente pasa por alto las animaciones)
    • Permitir a los usuarios elegir si desean ver la introducción animada, y en el caso que acepten, que puedan saltar la introducción en cualquier momento.
    Animación
  • 106. Vídeo
    • Actualmente el vídeo no es muy común por las restricciones del ancho de banda.
    • El video sirve y se utiliza para:
    • Promocionar Shows de televisión, películas u otros medios. [ http://harrypotter.warnerbros.com/ ]
    • Ofrecer a los usuarios la personalidad de un orador [ http://www.communicationresponsable.com/ ]
    • Mostrar cosas en movimiento. [ http://www.biceberg.es/ ]
  • 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