Usabilidad  David Solanes [email_address] Seminario de Usabilidad
Usabilidad
¿Qué es la Usabilidad? Seminario de Usabilidad – Crea® formación  Disciplina que trata de aquellos métodos y recursos que ...
¿Donde se aplica la Usabilidad? La Usabilidad significa facilidad de uso y se aplica a cualquier objeto con una función co...
¿Por qué la Usabilidad para la Web? En el diseño de productos y software , los usuarios pagan de antemano y experimentan l...
Objetivos de la Usabilidad “  La buena usabilidad es invisible porque de tan simple  y evidente pasa desapercibida   “  Ed...
Evaluación de la Usabilidad No podríamos evaluar la usabilidad de un sitio, sino disponemos de pruebas o test para identif...
Hay que entender a los usuarios . . .  “  Han sido necesarios años hasta que los cajeros automáticos han cambiado el incom...
Proveedor - Usuario
¿Contenido o Diseño?
Surgimiento de la Arquitectura de la Información  La AI 1  es la respuesta técnica  a la realidad mostrada en estos años d...
Usabilidad
¿Qué es la Arquitectura de la Información?  Es la disciplina del conocimiento que persigue definir estructuras de informac...
HCI ( Human- Computer Interaction)
Definición de Arquitectura de Información  Aplicada a  los medios digitales, es la disciplina del conocimiento que persigu...
Objetivo de la Arquitectura de la Información La arquitectura de la información integra la  organización de contenidos  de...
El Arquitecto de la Información Una persona que crea la estructura o mapa de la información lo cual permite a otros encont...
La Arquitectura de la Información en Diseño Web “  Generalmente se basa en la experiencia del usuario   “
Arquitectura de la Información
Planificación estratégica del Sitio  Web  Misión Metas Timing Políticas Procedimientos Evaluación La razón de ser de la or...
Planificación estratégica del Sitio  Web  Hay que identificar a los usuarios potenciales del Sitio Web para poder estructu...
Planificación estratégica del Sitio  Web  Consiste en desarrollar un servicio o producto basados en obtener ventaja sobre ...
Planificación estratégica del Sitio  Web  La carpeta del sitio busca facilitar la organización de los documentos que gener...
Planificación estratégica del Sitio  Web  La discusión de resultados entre el equipo dedicado a la construcción del Sitio ...
Esquema Planificación estratégica del Sitio  Web  Aspectos generales Estudio de la Audiencia INTRANET INTERNET Ventaja Com...
Usabilidad
Estructuras de Organización Las estructuras de organización de los Sitios juegan un importante papel en el acceso de la au...
Estructuras de Organización
Estructura Lineal Diagrama: La forma más sencilla de organizar la información es colocarla secuencialmente. Ideal para sit...
Estructura Paralela  Diagrama:
Estructura Ramificada Diagrama:
Estructura Jerárquica  Diagrama:
Estructura Jerárquica  Es la mejor opción para organizar bloques de contenidos complejos.  Es la más utilizada en la Web, ...
Estructura Concéntrica
Estructura Telaraña A B C F G H E D
Estructura Mixta La estructura que más se ha implantado en los Sitios Webs, pero hay que tener en cuenta que su elaboració...
Se debe llegar a la información en 2 o 3 clics. Se recomienda estructura ancha, en vez de estructura alta. Recomendaciones...
Recomendaciones para las estructuras Evitar Callejones sin salida en la medida de lo posible
Recomendaciones para las estructuras Evitar tener más de entre 6 o 10 opciones de acceso para el usuario en la página dond...
Recomendaciones para las estructuras Hay que evitar estructurar el sitio para que refleje la forma en que la empresa está ...
La importancia de estructuras funcionales <ul><li>Si no se puede utilizar, no sirve </li></ul><ul><li>Para poder comprende...
Interfaz
¿ Qué es una Interfaz?  Una interfaz es la parte de una herramientas o tecnología con la que el usuario interactúa y la ma...
HCI  Se define como la disciplina relativa al diseño, evaluación e implementación de sistemas informatizados interactivos ...
Interfaz por comandos La interfaz se caracteriza por ser rápida y flexible, pero los usuarios necesitan aprender todos los...
Interfaz GUI La interfaz se caracteriza por ofrecer soluciones más intuitivas a base de iconos, gráficos … que facilitan l...
Interfaz Gráfica de Usuario - Evolución <<  Interfaz STAR de XEROX 1981
Interfaz Gráfica de Usuario - Evolución <<  Interfaz LISA de APPLE 1983
Interfaz Gráfica de Usuario - Evolución <<  Interfaz Windows de MS 1983
Interfaz Gráfica de Usuario - Evolución <<  Interfaz Macintosh de MS 1984
Interfaz Gráfica de Usuario - Evolución <<  Interfaz Windows 1.01 de MS 1985
Interfaz Gráfica de Usuario - Evolución <<  Interfaz Macintosh II de APPLE 1987
Interfaz Gráfica de Usuario - Evolución <<  Interfaz Windows 3.11 de MS 1992
Interfaz Gráfica de Usuario - Evolución <<  Interfaz Windows 98 de MS 1998
Interfaz Gráfica de Usuario - Evolución <<  Interfaz AQUA de APPLE 2000
Interfaz Gráfica de Usuario - Evolución <<  Interfaz Windows XP de MS 2001
Interfaz Gráfica de Usuario - Evolución <<  Interfaz Windows  Vista BETA . . .
Experiencia del Usuario
Experiencia del Usuario La sensación, sentimiento, respuesta emocional, valoración y satisfacción del usuario respecto a u...
Experiencia del Usuario <ul><li>Es el resultado de un fenómeno interactivo en el que intervienen multitud de factores </li...
Experiencia del Usuario A tener en cuenta con la UX ( User eXperience) La experiencia del usuario se verá influida por exp...
Experiencia del Usuario <ul><li>Como potenciar una buena experiencia de Usuario: </li></ul><ul><li>Facilitar la adquisició...
Evaluación de la Experiencia del Usuario <ul><li>La experiencia del usuario se mide en base a  3  factores: </li></ul><ul>...
Usabilidad – Diseño de Sitios Web
Usabilidad – Diseño de Sitios Web
Diseño de Página
Espacio de la Pantalla Las páginas Web deben estar presididas por un contenido que despierte la atención del usuario. Por ...
Espacio de la Pantalla – www.viamichelin.com
Publicidad Navegador y S.O. Navegación Interna Contenido Espacio de la Pantalla – www.viamichelin.com
Diseño de Plataforma Cruzada A diferencia del diseño de software donde el diseñador controla los gráficos, fuentes . . .  ...
Tiempos de respuesta Todos los usuarios nos imploran que aceleremos las descargas de las páginas <ul><li>Un segundo es el ...
Tiempos de respuesta “  Los mejores sitios son rápidos ” http://www.alexa.com/site/ds/top_500
Vinculación <ul><li>Constituyen la parte más importante de una estructura basada en hipertexto. Existen tres tipos princip...
Vinculación – Haga Clic Aquí Estos enlaces hay que evitarlos como texto asociado a un vínculo. Hay dos razones para ello: ...
Vinculación – Más … Son especialmente problemáticos cuando en la página hay más de uno, ya que los usuarios les resultará ...
Vinculación – Títulos de vínculos <ul><li>Poner títulos a los vínculos permiten que el usuario sepa que puede esperar si s...
Vinculación – Colorear los vínculos  La mayoría de navegadores utilizan dos colores diferentes para mostrar los vínculos :...
Vinculación – Sus extremos  <ul><li>Un vínculo de hipertexto posee dos extremos: </li></ul><ul><li>La página de salida </l...
Vinculación – Vínculos externos  Aunque la visión de algunos es que hay que conservar los usuarios en el sitio propio, hay...
Otras consideraciones del diseño de página
Conclusión La simplicidad debería ser el fin del diseño de páginas.  Es importante asegurar que los diseños funcionan en u...
Diseño del Contenido
Escribir para la Web <ul><li>Las 3 directrices para escribir en la Web son las siguientes: </li></ul><ul><li>Escribir no m...
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 g...
Facultad de Hojear El usuario no lee, “HOJEA”. <ul><li>Directrices para escribir texto en base a facilitar el hojeado: </l...
Facultad de Hojear – Ejemplo  Nebraska está repleto de atractivos internacionalmente reconocidos que atraen un gran número...
Facultad de Hojear – Ejemplo En 1996, seis de los lugares más visitados de Nebraska fueron el Parque Estatal de Fort Robin...
Facultad de Hojear – Ejemplo <ul><li>Nebraska está repleto de atractivos internacionalmente reconocidos que atraen un gran...
Facultad de Hojear – Ejemplo  Nebraska tiene varios atractivos. En 1996, algunos de los lugares más visitados fueron el Pa...
Facultad de Hojear – Ejemplo <ul><li>En 1996, algunos de los lugares más visitados de Nebraska fueron: </li></ul><ul><li>P...
Escribir para la Web <ul><li>Aspectos a tener en cuenta: </li></ul><ul><li>Lenguaje Claro </li></ul><ul><li>Fragmentación ...
Titulares <ul><li>Directrices para escribir links de titulares en línea: </li></ul><ul><li>Explicar de que va el artículo ...
Legibilidad Diseño, Velocidad y Contenido falla si los usuarios no pueden leer el texto <ul><li>Directrices de legibilidad...
Redacción del Contenido <ul><li>A tener en cuenta: </li></ul><ul><li>No utilizar jerga de marketing que confunda a los usu...
Imágenes y fotografías “  Una imagen vale más que mil palabras” “  Una imagen vale  2000  mil palabras de tiempo de descar...
Aunque la cantidad de gráficos debe reducirse, hay ocasiones que no podemos descartar su uso. Hay que utilizar técnicas de...
Imagen Original: Imágenes y fotografías
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 ...
Técnica de Escalado: Imágenes y fotografías El escalado hace que se pierdan los detalles, dificultando la visión de lo que...
Técnica de “Reducción de Imagen de Importancia Mejorada”: Imágenes y fotografías Se conserva el contexto y el detalle, inc...
<ul><li>Algunas directrices a tener en cuenta: </li></ul><ul><li>Utilizar las imágenes para mostrar el contenido real, no ...
Imágenes 3D <ul><li>Casi siempre es mejor utilizar 2D frente a 3D por las siguientes razones: </li></ul><ul><li>La pantall...
Animación Es conveniente reducir el uso de la animación Por instinto, es difícil concentrarse en un texto si hay un logo e...
Animación <ul><li>Siete motivos para usar una animación: </li></ul><ul><li>Mostrar continuidad en las transiciones  [  htt...
<ul><li>Algunas directrices a tener en cuenta: </li></ul><ul><li>No emplear las animaciones con el único fin de atraer la ...
Vídeo <ul><li>Actualmente el vídeo no es muy común por las restricciones del ancho de banda. </li></ul><ul><li>El video si...
Audio El audio de buena calidad mejora sustancialmente la experiencia del usuario, aunque hay que dar la opción siempre de...
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 “cali...
Importante Comentado que el diseño del contenido de calidad es uno de los factores más importantes de la Usabilidad, el ot...
Fin Seminario de Usabilidad
Upcoming SlideShare
Loading in...5
×

Seminario Usabilidad

7,375

Published on

Seminario de Usabilidad

Published in: Education, Technology

Seminario Usabilidad

  1. 1. Usabilidad David Solanes [email_address] Seminario de Usabilidad
  2. 2. Usabilidad
  3. 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. 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. 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. 6. Objetivos de la Usabilidad “ La buena usabilidad es invisible porque de tan simple y evidente pasa desapercibida “ Eduardo Manchón <ul><li>Que sea efectivo </li></ul><ul><li>Que sea eficiente </li></ul><ul><li>Que sea pueda aprender su forma de uso </li></ul><ul><li>Que sea fácil de recordar cómo se usa </li></ul>
  7. 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: <ul><li>Investigar, identificar y documentar las necesidades de los usuarios con test de usabilidad </li></ul><ul><li>Revisar los “logs” del servidor y/o buscadores </li></ul><ul><li>Técnica de análisis “eyetracking” </li></ul>
  8. 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. 9. Proveedor - Usuario
  10. 10. ¿Contenido o Diseño?
  11. 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. 12. Usabilidad
  13. 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. 14. HCI ( Human- Computer Interaction)
  15. 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. 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. 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. 18. La Arquitectura de la Información en Diseño Web “ Generalmente se basa en la experiencia del usuario “
  19. 19. Arquitectura de la Información
  20. 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. 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: <ul><li>INTERNET </li></ul><ul><li>INTRANET </li></ul>
  22. 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. 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. 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. 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. 26. Usabilidad
  27. 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. 28. Estructuras de Organización
  29. 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. 30. Estructura Paralela Diagrama:
  31. 31. Estructura Ramificada Diagrama:
  32. 32. Estructura Jerárquica Diagrama:
  33. 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. 34. Estructura Concéntrica
  35. 35. Estructura Telaraña A B C F G H E D
  36. 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. 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. 38. Recomendaciones para las estructuras Evitar Callejones sin salida en la medida de lo posible
  39. 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. 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. 41. La importancia de estructuras funcionales <ul><li>Si no se puede utilizar, no sirve </li></ul><ul><li>Para poder comprender la utilidad de una información hay que saber como acceder a ella </li></ul><ul><li>Los usuarios no tienen por que poseer ningún conocimiento previo </li></ul><ul><li>Nuestra visión del sitio no tiene por que coincidir con la del usuario </li></ul><ul><li>El usuario viene a cumplir unas expectativas no a aprender un programa informático </li></ul><ul><li>Los usuarios no leen, miran </li></ul>
  42. 42. Interfaz
  43. 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. 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. <ul><li>Existen dos tipos de interacciones de humano con la interfaz: </li></ul><ul><li>Por comandos </li></ul><ul><li>Por GUI ( Graphical User Interface ) </li></ul>
  45. 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. 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. 47. Interfaz Gráfica de Usuario - Evolución << Interfaz STAR de XEROX 1981
  48. 48. Interfaz Gráfica de Usuario - Evolución << Interfaz LISA de APPLE 1983
  49. 49. Interfaz Gráfica de Usuario - Evolución << Interfaz Windows de MS 1983
  50. 50. Interfaz Gráfica de Usuario - Evolución << Interfaz Macintosh de MS 1984
  51. 51. Interfaz Gráfica de Usuario - Evolución << Interfaz Windows 1.01 de MS 1985
  52. 52. Interfaz Gráfica de Usuario - Evolución << Interfaz Macintosh II de APPLE 1987
  53. 53. Interfaz Gráfica de Usuario - Evolución << Interfaz Windows 3.11 de MS 1992
  54. 54. Interfaz Gráfica de Usuario - Evolución << Interfaz Windows 98 de MS 1998
  55. 55. Interfaz Gráfica de Usuario - Evolución << Interfaz AQUA de APPLE 2000
  56. 56. Interfaz Gráfica de Usuario - Evolución << Interfaz Windows XP de MS 2001
  57. 57. Interfaz Gráfica de Usuario - Evolución << Interfaz Windows Vista BETA . . .
  58. 58. Experiencia del Usuario
  59. 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. 60. Experiencia del Usuario <ul><li>Es el resultado de un fenómeno interactivo en el que intervienen multitud de factores </li></ul><ul><li>Individuales ( personalidad, motivación, expectaciones, emociones, valores …) </li></ul><ul><li>Sociales ( presión en el tiempo, presión general por conocimientos . . . ) </li></ul><ul><li>Culturales ( Moda, Sexo, hábitos, normas, lenguaje, religión . . . ) </li></ul><ul><li>Contextuales ( Sitio, acompañantes, temperatura, estado del tiempo . . . ) </li></ul><ul><li>Propios del Producto ( tamaño, estética, funciones, usabilidad , altura . . . ) </li></ul>“ Estos son las variables que condicionan y modelan la experiencia del usuario “ Arhippainen y Tähti
  61. 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. 62. Experiencia del Usuario <ul><li>Como potenciar una buena experiencia de Usuario: </li></ul><ul><li>Facilitar la adquisición del producto o servicio </li></ul><ul><li>Dar comodidad en la navegación </li></ul><ul><li>Dar a conocer las ventajas frente a otros medios </li></ul><ul><li>Ofrecer el tan “valioso” Valor Añadido </li></ul>
  63. 63. Evaluación de la Experiencia del Usuario <ul><li>La experiencia del usuario se mide en base a 3 factores: </li></ul><ul><li>Efectividad: se mide si los usuarios alcanzan sus metas </li></ul><ul><li>Eficiencia: se miden los recursos desplegados para efectuar una tarea </li></ul><ul><li>Satisfacción: se mide la reacción afectiva de los usuarios respecto al comportamiento de la aplicación </li></ul>Herramienta no-verbal donde cada dibujo representa una emoción Test PrEMO - Hekkert
  64. 64. Usabilidad – Diseño de Sitios Web
  65. 65. Usabilidad – Diseño de Sitios Web
  66. 66. Diseño de Página
  67. 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. 68. Espacio de la Pantalla – www.viamichelin.com
  69. 69. Publicidad Navegador y S.O. Navegación Interna Contenido Espacio de la Pantalla – www.viamichelin.com
  70. 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 <ul><li>De donde vienen los usuarios (motores de búsqueda . . .) </li></ul><ul><li>La resolución de las pantallas de los usuarios </li></ul><ul><li>Las tecnologías Web a utilizar (ASP, PHP, XHTML . . .) </li></ul><ul><li>Nuevas versiones de Navegadores </li></ul><ul><li>Utilizar normas en vez de crear para presentación </li></ul><ul><li>Colores seguros para la Web </li></ul>
  71. 71. Tiempos de respuesta Todos los usuarios nos imploran que aceleremos las descargas de las páginas <ul><li>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 </li></ul><ul><li>Diez segundos es el límite máximo para mantener la atención del usuario centrada. </li></ul><ul><li>Hay que recordar que la satisfacción del usuario viene dada por sus expectativas y por el rendimiento real del tiempo de respuesta </li></ul>
  72. 72. Tiempos de respuesta “ Los mejores sitios son rápidos ” http://www.alexa.com/site/ds/top_500
  73. 73. Vinculación <ul><li>Constituyen la parte más importante de una estructura basada en hipertexto. Existen tres tipos principales de vínculos: </li></ul><ul><li>Vínculos de navegación estructural </li></ul><ul><li>Vínculos asociativos del contenido de la página </li></ul><ul><li>Vínculos de referencia o de tipo “véanse también” </li></ul>
  74. 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. 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. 76. Vinculación – Títulos de vínculos <ul><li>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 . . . ) </li></ul><ul><li>Directrices de que incluir en ellos: </li></ul><ul><li>El nombre del sitio al que va a llevarnos el vínculo </li></ul><ul><li>El nombre de la subsección al que va a llevarnos el vínculo </li></ul><ul><li>Detalles añadidos acerca del tipo de información que se va a encontrar en la página de destino </li></ul><ul><li>Aviso de problemas que pueda haber al otro lado del vínculo </li></ul>
  77. 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. 78. Vinculación – Sus extremos <ul><li>Un vínculo de hipertexto posee dos extremos: </li></ul><ul><li>La página de salida </li></ul><ul><li>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 </li></ul><ul><li>La página de la llegada </li></ul><ul><li>Hay que situar a los usuarios en el nuevo contexto que aparece y ofrecerles valores relativos a sus puntos de origen </li></ul>
  79. 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. 80. Otras consideraciones del diseño de página
  81. 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. 82. Diseño del Contenido
  83. 83. Escribir para la Web <ul><li>Las 3 directrices para escribir en la Web son las siguientes: </li></ul><ul><li>Escribir no más de la mitad del texto que se habría usado para cubrir el mismo material en una publicación impresa. </li></ul><ul><li>Escribir para poder encontrar las cosas. Utilizar párrafos cortos, listas con viñetas, subencabezados . . . </li></ul><ul><li>Utilizar hipertexto para dividir la información extensa en múltiples páginas </li></ul>
  84. 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. 85. Facultad de Hojear El usuario no lee, “HOJEA”. <ul><li>Directrices para escribir texto en base a facilitar el hojeado: </li></ul><ul><li>Estructurar los artículos con dos o tres niveles de títulos y subtítulos. </li></ul><ul><li>Encabezados Significativos en vez de atractivos </li></ul><ul><li>Utilizar viñetas y elementos de diseño similares para tener bloques de texto uniformes. </li></ul><ul><li>Utilizar resaltado y énfasis para hacer que las palabras importantes retengan la atención del usuario. </li></ul>
  86. 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. 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. 88. Facultad de Hojear – Ejemplo <ul><li>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: </li></ul><ul><li>Parque Estatal de Fort Robinson(355.000 visitantes) </li></ul><ul><li>Monumento Nacional Scotts Bluff (132.166) </li></ul><ul><li>Museo y Parque histórico de Arbor Lodge(100.000) </li></ul><ul><li>Carhenge(86.598) </li></ul><ul><li>Museo de la Pradera de Stuhr(60.002) </li></ul><ul><li>Parque histórico del Rancho de Buffalo Bill(28.446). </li></ul>Diseño con facultad de hojeado, es el mismo texto que el de referencia. 47% MEJOR
  89. 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. 90. Facultad de Hojear – Ejemplo <ul><li>En 1996, algunos de los lugares más visitados de Nebraska fueron: </li></ul><ul><li>Parque Estatal de Fort Robinson </li></ul><ul><li>Monumento Nacional Scotts Bluff </li></ul><ul><li>Museo y Parque histórico de Arbor Lodge </li></ul><ul><li>Carhenge </li></ul><ul><li>Museo de la Pradera de Stuhr </li></ul><ul><li>Parque histórico del Rancho de Buffalo Bill </li></ul>Versión combinada. Utiliza texto conciso, objetivo y con facultad para hojearlo. 124% MEJOR
  91. 91. Escribir para la Web <ul><li>Aspectos a tener en cuenta: </li></ul><ul><li>Lenguaje Claro </li></ul><ul><li>Fragmentación de las páginas </li></ul><ul><ul><li>Hay que estructurar correctamente el contenido para aplicar la fragmentación ( uso ideal de niveles de títulos) </li></ul></ul><ul><ul><li>Los enlaces deben ser claros, y deben aportar información de lo que el usuario se va a encontrar al clicar. </li></ul></ul>http://www.hotwired.com
  92. 92. Titulares <ul><li>Directrices para escribir links de titulares en línea: </li></ul><ul><li>Explicar de que va el artículo en términos que se relacionan con el usuario y con lenguaje claro </li></ul><ul><li>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” </li></ul><ul><li>Convertir la primera palabra en algo importante </li></ul><ul><li>Evitar que los títulos empiecen por la misma palabra </li></ul>
  93. 93. Legibilidad Diseño, Velocidad y Contenido falla si los usuarios no pueden leer el texto <ul><li>Directrices de legibilidad: </li></ul><ul><li>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) </li></ul><ul><li>Utilizar fondos de colores claros o fondos de imagen sútiles. </li></ul><ul><li>Utilizar fuentes suficientemente grandes ( sans-serif VS serif) </li></ul>
  94. 94. Redacción del Contenido <ul><li>A tener en cuenta: </li></ul><ul><li>No utilizar jerga de marketing que confunda a los usuarios </li></ul><ul><li>Evitar repetir contenido de texto o elementos </li></ul><ul><li>Utilizar lenguaje imperativo sólo para tareas obligadas </li></ul><ul><li>En caso de abreviaturas o acrónimos, añadir su significado inmediatamente detrás. Excepto los generales ( DVD . . . ) </li></ul><ul><li>Evitar uso de mayúsculas por que reducen la legibilidad y porque para algunos usuarios significa alzar la voz </li></ul><ul><li>Evitar los signos de exclamación. Todos los elementos son importantes </li></ul>
  95. 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. 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. 97. Imagen Original: Imágenes y fotografías
  98. 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. 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. 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. 101. <ul><li>Algunas directrices a tener en cuenta: </li></ul><ul><li>Utilizar las imágenes para mostrar el contenido real, no sólo para decorar la página </li></ul><ul><li>Etiquetar las imágenes a partir de textos alternativos o pies con información complementaria </li></ul><ul><li>Publicar las imágenes al tamaño apropiado para visualizarlos </li></ul><ul><li>Evitar marcas de agua. ( crean confusión y reducen visibilidad) </li></ul>Imágenes y fotografías
  102. 102. Imágenes 3D <ul><li>Casi siempre es mejor utilizar 2D frente a 3D por las siguientes razones: </li></ul><ul><li>La pantalla y el ratón son dispositivos 2D, por lo que no se obtiene verdadero 3D </li></ul><ul><li>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) </li></ul><ul><li>El software necesario para 3D no suele ser estándar y requiere descarga adicional </li></ul>
  103. 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. 104. Animación <ul><li>Siete motivos para usar una animación: </li></ul><ul><li>Mostrar continuidad en las transiciones [ http://www.solucionesinformaticas.net/ ] </li></ul><ul><li>Indicar la dimensionalidad en las transiciones [ http://www.leoburnett.ca/ ] </li></ul><ul><li>Ilustrar el cambio en el tiempo [ Ver swf ] </li></ul><ul><li>Multiplicar la pantalla [ http://www.guru.it ] </li></ul><ul><li>Enriquecer las representaciones gráficas ( iconografía ) </li></ul><ul><li>Visualizar estructuras tridimensionales [ http://www.apple.com/es/macbookpro/gallery/qtvr.html ] </li></ul><ul><li>Atraer la atención [ http://www.jkrowling.com/ ] </li></ul>“ 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. 105. <ul><li>Algunas directrices a tener en cuenta: </li></ul><ul><li>No emplear las animaciones con el único fin de atraer la atención </li></ul><ul><li>No dotar la animación con los elementos importantes de la página. ( el usuario generalmente pasa por alto las animaciones) </li></ul><ul><li>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. </li></ul>Animación
  106. 106. Vídeo <ul><li>Actualmente el vídeo no es muy común por las restricciones del ancho de banda. </li></ul><ul><li>El video sirve y se utiliza para: </li></ul><ul><li>Promocionar Shows de televisión, películas u otros medios. [ http://harrypotter.warnerbros.com/ ] </li></ul><ul><li>Ofrecer a los usuarios la personalidad de un orador [ http://www.communicationresponsable.com/ ] </li></ul><ul><li>Mostrar cosas en movimiento. [ http://www.biceberg.es/ ] </li></ul>
  107. 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. 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. 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. 110. Fin Seminario de Usabilidad

×