La Experiencia de Usuario y Usabilidad

2,027 views

Published on

Presentation used for a conference at the Universidad Tecnologica de Panama

Published in: Technology, Design
1 Comment
4 Likes
Statistics
Notes
  • Buenos días León, interesante presentación, muchas gracias por compartir. Después de leerla quisiera aprovechar consultarte tu punto de vista sobre cual es la problemática actual de la experiencia del usuario relacionada con la usabilidad y si esto es posible resolverlo mediante alguna tecnología actual, si pudieras comentarme te lo agradeceré mucho y me ayudaras a tener claridad sobre el tema. Saludos
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,027
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
60
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

La Experiencia de Usuario y Usabilidad

  1. 1. La Experiencia del Usuario y Usabilidad
  2. 2. La Experiencia del Usuario • Conjunto de factores y elementos que determinan una interacción satisfactoria del usuario con un entorno o dispositivo concretos. • En ella influyen desde el diseño gráfico, la éstetica, hasta la articulación de la interfaz, la funcionalidad definida por el diseño de interacción y la extrapolación de principios del mundo del marketing, la psicología etc
  3. 3. Culminación Concepción http://www.jjg.net/ia Necesidades del usuario Objetivos del sitio Estrategia Especificaciones funcionales Requerimientos de contenido Alcance Diseño de la interacción Arquitectura de información Estructura Diseño de la interfaz Diseño de la navegación Diseño de la información Esqueleto Diseño visualSuperficie Web como interfaz de software Web como sistema de hipertexto Autor: Jesse James Garrett
  4. 4. Sistemas Complejos
  5. 5. Manejo de Proyectos
  6. 6. Lo que NO es la UX • UX Design no funciona en cada situacion. • No puede ser asesorado por metricas tradicionales • No es lo mismo que Usabilidad
  7. 7. Lo que debe ser
  8. 8. Tareas en UX Design • Evaluación del Sistema Actual • Pruebas A/B • Encuesta a los Usuarios • Creación de Prototipos/Wireframes • Diagramas de Flujo • Storytelling • Patrones de Diseño • Personas/Audiencia • Inventarios de Contenido • Guias de Estilo
  9. 9. La Arquitectura de Información 1. La organización, etiquetado y los esquemas de navegación 2. El diseño estructural del espacio donde se ubica la informaciòn facilita el desarrollo de tareas de manera intuitiva y completa, directamente con el acceso al contenido del sitio web. 2. El arte y la ciencia de estructurar BIEN y clasificar BIEN los sitios web y sus intranets, ayudan a las personas a manejar la información fácilmente. 3. Una disciplina emergente en una comunidad de prácticas enfocadas en traer los principios del diseño y arquitectura del paraìso digital.
  10. 10. Arquitectura de Información • Wireframes
  11. 11. Usabilidad • Se define coloquialmente como facilidad de uso, ya sea de una página web, una aplicación informática o cualquier otro sistema que interactue con un usuario. – Eduardo Manchon http://www.alzado.org • "La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso“ -ISO/IEC 9126e.
  12. 12. El Término “Usabilidad” • Proviene del inglés : Usability • Facilidad o Nivel de Uso • Grado en el que el diseño de un objeto facilita o dificulta su manejo • Desde hace mucho tiempo se maneja en base a criterios como facilidad de uso, amistoso con el usuario
  13. 13. Datos Curiosos • La usabilidad demuestra reducciones del ciclo de desarrollo de los productos de 33-50% (Bosert 1991). • 63% de todos los proyectos de desarrollo de software sobrepasan su presupuesto, siendo las cuatro causas más importantes relacionadas con usabilidad. (Lederer y Prassad 1992). • El porcentaje de código que se dedica al desarrollo de la interfaz con los usuarios ha ido aumentando a lo largo de los años hasta un promedio 47-60% del conjunto de la aplicación. (MacIntyre et al. 1990). • La empresa Ricoh descubrió que el 95% de los usuarios encuestados nunca utilizaban las tres características claves diseñadas para hacer más atractivo el producto, bien por desconocer su existencia, no saber cómo utilizarlas o no entenderlas. (Nussbaum y Neff 1991).
  14. 14. Aspectos de la Usabilidad 1. Facilidad de Aprendizaje 2. Flexibilidad 3. Robustez
  15. 15. ¿Para quién diseñamos? • ¿Quiénes son los usuarios? • ¿Qué quieren o necesitan hacer los usuarios? • ¿Cuál es la educación de los usuarios? • ¿Qué debe hacer el usuario y qué debe hacer el sistema ?
  16. 16. El Usuario • Conversar • Observar • Preguntar • Investigar:  Sus Características  Qué tareas efectuan  Lo Actual vs. Lo Deseado o Ideal  Funciones Críticas vs No-Críticas • Flujo de Desarrollo de Tareas (cómo lo hacen) • Ambiente en que la desarrollan
  17. 17. Juego de Escenarios
  18. 18. ¿Qué Investigar? Características  Edad  Conocimientos de Informática  Dominio del conocimiento  Métodos de Acceso  Browsers (o navegadores)  Ambientes de Trabajo  Impedidos o Discapacitados Obtén la Información mediante  Encuestas / Cuestionarios  Visitas al Ambiente de Trabajo
  19. 19. Audiencia
  20. 20. Planificación / Tareas de los Usuarios ¿Por qué los usuarios visitarán tu Web?  ¿Qué hay allí para ellos?  La mejor forma de saberlo es conversando !  Crear Escenarios Ejemplo de Tareas de Usuarios:  Encontrar información de un productoparticular  Aprender sobre nuevos proyectos  Informarse de futuras presentaciones  Descargar documentos  Contactar empleados de una organización  Proveer comentarios o feedback
  21. 21. Escenarios
  22. 22. Estructura • Una buena estructura debe permitir, aplicada a un grupo de páginas web, permite al lector ver todos los contenidos fácil y claramente. • Una mala estructura, produce la sensación de no encontrar información, estar perdida y terminará por ABANDONAR el sitio Web.
  23. 23. ¿Cómo se crea la estructura? • Planificar • Esquematizar • Estudiar el Contenido
  24. 24. Estructura Jerárquica • Es la estructura del árbol…, en el que la raíz es la página inicial, esta página se puede también sustituir por la página de contenido, en la que se exponen las diferentes secciones que contendrá nuestro sitio. La selección de una sección nos conduce asimismo a una lista de subtemas que pueden o no dividirse. • Permite al visitante conocer en qué lugar de la estructura se encuentra, además de saber que, a medida que se adentra en la estructura obtiene información más específica y que la información más general se encuentra en los niveles superiores.
  25. 25. Estructura Lineal • Navegarla es como leer un libro, de manera que estando en una página, podemos ir a la siguiente página o a la anterior. • Útil cuando queremos al visitante siguiendo un patrón fijo de navegación evitando distracciones con enlaces a otras páginas. • Por otra parte podemos causar a lector la sensación de estar encerrado si el camino es muy largo o poco interesante. • Este tipo de estructura sería válido para tutoriales de aprendizaje o tours de visita guiada.
  26. 26. Estructura Lineal con Jerarquía • Este tipo de estructura es una mezcla de la dos anteriores, los temas y subtemas están organizados de una forma jerárquica, pero uno puede leer todo el contenido de una forma lineal si se desea. • Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la información de una manera lineal como si estuviésemos leyendo un libro. Esta guía sigue básicamente este tipo de estructura.
  27. 27. Estructura de Red • La estructura de red es una organización en la que aparentemente no hay ningún orden establecido, las páginas pueden apuntarse unas a otras sin ningún orden aparente. • Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al lector de en dónde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar a ver lo que le queremos mostrar. Por eso es muy recomendable asociar la estructura de las páginas con alguna estructura conocida, como por ejemplo la de una ciudad.
  28. 28. Navegación • Duplicar navegación (si es necesario) • Enlace para el Inicio de la página • No detenga la navegacion • Estructura Clara • Mapa del Sitio o Índice de Contenidos • Si utiliza navegación gráfica, añadir textos para soporte del usuario
  29. 29. Tamaño de las Páginas • Las personas no les gusta el Scroll Down • Útilice páginas de 1 pantalla y media • Páginas largas para documentos grandes
  30. 30. En Cada Página • Firmar Documentos • Contacto con el Autor • Utilizar fechas en los documentos • Cuidado con los formatos de fecha
  31. 31. Enlaces o Links • Escribir como si no existieran enlaces de texto   Juan Perez ha desarrollado un nuevo lenguaje de programación.  El nuevo lenguaje de programación de Juan Perez está aquí.  • Usar palabras significativas en los enlaces • Longitud adecuada de los enlaces • El usuario debe conocer la información a la que va acceder antes de salir. • Los enlaces modifican el énfasis de las frases
  32. 32. Enlaces o Links • Enfatizar los textos diferentes: • Libros sobre Economía. • Libros sobre Medicina. • Libros sobre Historia. • Libros sobre Educación. • Libros sobre: • Economía. • Medicina. • Historia. • Educación.
  33. 33. Enlaces o Links • No cambia el color de los enlaces • No deje enlaces rotos o sin contenido Compatibilidad entre Browsers • Estándares Web Html Css • Probar entre Browsers • Resolución de Pantallas
  34. 34. Consejos Prácticos • Sin faltas ortográficas • Páginas en Contexto • ¿Qué? ¿Quién? ¿Cómo? ¿Cuándo? • Responda a sus lectores, aunque sea sólo por cortesía
  35. 35. Tipografía Utilizar estilos con moderación El texto pierde fuerza si todas las palabras están resaltadas. El texto pierde fuerza si todas las palabras están resaltadas. Tamaños de las Letras en diferentes plataformas
  36. 36. Tipografía No todos poseen los mismos “fonts”
  37. 37. Tipografía • Serif : son aquellas tipografías cuyas letras se apoyan como con una especie de pie • Sans Serif: carecen de este detalle.
  38. 38. Gráficos en el Web • Incluir “ALT” tag en el HTML para las imágenes. • Indicar el tamaño de las imágenes que se van a descargar • Evite el uso de backgrounds o imágenes de fondo , y si decide utilizar alguna, que tenga poca información visual • Limite el uso de Gráficos Decorativos • Limite el tamaño de las imágenes • Utilice atributos height y width en html • Utilice la misma imagen tantas veces sea posible (aceleración de carga)
  39. 39. Formatos Gráficos Número de colores: 2, 4 , 8, 16, 32, 128 ó 256 de una paleta de 24 bits. Compresión basada en el algoritmo de compresión LZW. Formato de compresión sin pérdida. Características añadidas en la versión 89a: Carga progresiva. Máscara de trasparencia de 1 bit. Animación simple. GIF JPG Número de colores: 24 bits color o 8 bits B/N Muy alto grado de compresión. Formato de compresión con pérdida. No permite trasparencia, ni canal alfa. No permite animación. Color indexado hasta 256 colores y TrueColor hasta 48 bits por pixel. Mayor compresión que el formato GIF (+10%) Compresión sin pérdida. Visualización progresiva en dos dimensiones. Canal alfa. (Transparencia variable) Detección de errores. No permite animación.. PNG
  40. 40. Consejos sobre BANNERS • Utilizar palabras que VENDAN • Si el usuario ha visto el banner 3 veces y no accesa, no lo hará nunca. • Utilice preguntas en el banner (interacción) • Animar un banner aumenta visibilidad 15%
  41. 41. ¡Esto no es todo !
  42. 42. Referencias • Information Architecture Institute • • Jakob Nielsen • www.useit.com • Alzado.Org • www.alzado.org • Infotectura • www.infotectura.com • Usability First • www.usabilityfirst.com • Usable Web • www.usableweb.com
  43. 43. Encuentre los Errores de Usabilidad
  44. 44. León Kadoch H. UX Designer / Information Architect www.leon-kadoch.com Slideshare.net/kadoch Twitter.com/leonkadoch

×