Metodología de Diseño Centrada en el Usuario

  • 7,131 views
Uploaded on

Presentación de AyerViernes a cargo de Darcy Vergara, Per Arellano y Maximiliano Martin sobre tres de las cinco principales etapas de la Metodología desarrollada en AyerViernes

Presentación de AyerViernes a cargo de Darcy Vergara, Per Arellano y Maximiliano Martin sobre tres de las cinco principales etapas de la Metodología desarrollada en AyerViernes

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • buenisimo
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,131
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
1
Likes
22

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. (av) Ayer Viernes ®2008 Ayerviernes S.A. Metodología de Diseño Centrado en el Usuario Darcy Vergara - Pedro Arellano - Maximiliano Martin AyerViernes Marzo - 2008 Arquitectura de Inforación - Estudios de Usuarios - Accesibilidad
  • 2. (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 3. Diseño centrado en las personas
    • El valor de la investigación en los procesos de diseño en medios digitales
    (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 4. (av) Ayer Viernes ®2008 Ayerviernes S.A. Investigación aplicada al diseño No se trata de “ cientificar” el diseño sino establecer guías estratégicas, fundadas en la investigación de usuarios y en dinámicas colaborativas De manera de tener un encuadre metodológico que delimite los objetivos del proyecto y permita no salirse de este marco referencial. ¿Cómo funciona?
  • 5. (av) Ayer Viernes ®2008 Ayerviernes S.A. Identificar la necesidad de un DCU El diseño satisface las especificaciones de la organización y de los usuarios Entender y especificar el contexto de uso Especificar los requerimientos de los usuarios y de la organización Evaluar diseño a partir de los requerimientos Producir soluciones de diseño The interdependence of human-centered design activities Prototyping Social Action Esko Kurvinen
  • 6. (av) Ayer Viernes ®2008 Ayerviernes S.A. Arhippainen, Tähti, 2003 Entender la interacción...
  • 7. (av) Ayer Viernes ®2008 Ayerviernes S.A. ¿Cuál es el valor de integrar a personas (usuarios) dentro de los procesos de diseño?
  • 8. (av) Ayer Viernes ®2008 Ayerviernes S.A. El valor del codiseño con los usuarios en etapas tempranas del proyecto, radica en que ellos son los que introducen innovaciones, detectan fallos... en fin, los usan ¿Pero, cómo sacarles provecho? Stand By
  • 9. (av) Ayer Viernes ®2008 Ayerviernes S.A. ¿Cuantos usuarios testear?
  • 10. (av) Ayer Viernes ®2008 Ayerviernes S.A. ¿Cuantitativo o Cualitativo? ¿Cómo nos aproximamos a ellos?
  • 11. (av) Ayer Viernes ®2008 Ayerviernes S.A. Triangular las fuentes Integración metodología cuanti y cuali
  • 12. (av) Ayer Viernes ®2008 Ayerviernes S.A. ¿Qué triangular?
    • Palabras clave
    • Buscador interno
    • Hablar con las personas que hablan con las personas
    • Escucha
    • Entrevistas
    • Observación
    • Eyetracking
    • Encuestas
  • 13. (av) Ayer Viernes ®2008 Ayerviernes S.A. ¿Pero, cómo sacarles provecho?
  • 14. (av) Ayer Viernes ®2008 Ayerviernes S.A. Por el contrario de lo que se pueda creer , no hay que escucharlos , sino que hay que observarlos ... Los focus groups, no son pruebas de usabilidad Los usuarios no son diseñadores ni los diseñadores no son usuarios
  • 15. (av) Ayer Viernes ®2008 Ayerviernes S.A.
    • Aprovecharnos de todo lo que nos puedan decir y mostrar los usuarios, no sólo verbalmente, sino que que también no verbalmente ; gestos, actitudes, frustraciones y sus ojos (integración cuali-cuanti).
    Entonces...
  • 16. (av) Ayer Viernes ®2008 Ayerviernes S.A.
    • Oportunidad :
    • Entender el comportamiento del usuario digital
    • Crear nuevas fuentes de conocimiento
    • Innovar
    • Liderar y no estar supeditado a los Alertbox de Nielsen
  • 17. (av) Ayer Viernes ®2008 Ayerviernes S.A. Pero... ¿qué hacer si no tengo laboratorio, ni usuarios? sólo casos extremos Agudizar el sentido común y tomar un genérico... ! no leo, hojeo Casi nunca tomo decisiones óptimas Me las arreglo como puedo Odio los banners
  • 18. (av) Ayer Viernes ®2008 Ayerviernes S.A. Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies Aprovecharnos de las convenciones No hay nada más claro y efectivo que un link azul subrayado
    • No tratar de reinventar la rueda
            • Al menos, no sin usuarios
    NO sacar conclusiones fuera de contexto
  • 19. (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 20. (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 21. (av) Ayer Viernes ®2008 Ayerviernes S.A. ¿Qué y cuando probar con usuarios?
    • Indagaciones estratégicas
    • Card Sorting
    • Prueba de Wireframes
    • Testeo de Maquetas
    • Producto final
  • 22. (av) Ayer Viernes ®2008 Ayerviernes S.A. ¿Qué y cuando probar con usuarios?
    • Indagaciones estratégicas
    • Card Sorting
    • Prueba de Wireframes
    • Testeo de Maquetas
    • Producto final
  • 23. (av) Ayer Viernes ®2008 Ayerviernes S.A. ¿Qué y cuando probar con usuarios?
    • Indagaciones estratégicas
    • Card Sorting
    • Prueba de Wireframes
    • Testeo de Maquetas
    • Producto final
  • 24. (av) Ayer Viernes ®2008 Ayerviernes S.A. ¿Qué y cuando probar con usuarios?
    • Indagaciones estratégicas
    • Card Sorting
    • Prueba de Wireframes
    • Testeo de Maquetas
    • Producto final
  • 25. (av) Ayer Viernes ®2008 Ayerviernes S.A. ¿Qué y cuando probar con usuarios?
    • Indagaciones estratégicas
    • Card Sorting
    • Prueba de Wireframes
    • Testeo de Maquetas
    • Producto final
  • 26. Arquitectura de la Información (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 27. Proceso vs Producto (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 28. ¿Arquitectura de la Información? Orden de la información Beneficio para los usuarios Encontrabilidad de los contenidos Calidad de los contenidos Convertir datos en contenidos digitales. (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 29. Pero... Conjugar muchas y diferentes visiones (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 30. Funcionalidad y contenido. Necesidades de la organización. Necesidades del público (usuarios). Sistemas de organización. Navegación. Rotulado. Búsqueda. ¿Cómo? (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 31. investigar la organización (cuáles son los objetivos de la organización) (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 32. investigación de usuarios empatía = modelos mentales (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 33. resultados de las investigaciones... técnicas índices de contenido card sorting definir jerarquías (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 34. índices de contenido card sorting definir jerarquías (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 35. índices de contenido card sorting definir jerarquías (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 36. índices de contenido card sorting definir jerarquías Capa superior - interfaz Capa intermedia - contenido - interacciones Capa inferior - base de datos (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 37. Capa superior - interfaz Capa intermedia - contenido - interacciones Capa inferior - base de datos Contenido fundamental Opciones necesarias Agrupación por tema por función por jerarquía Etiquetado o rotulaciones (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 38. Resultado... (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 39. (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 40. Capa superior - interfaz Capa intermedia - contenido - interacciones Capa inferior - base de datos (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 41. (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 42. Capa superior - interfaz Capa intermedia - contenido - interacciones Capa inferior - base de datos (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 43. recursos La biblia de la AI, Information Architecture for the World Wide Web Information Architecture Glossary (Whitepaper) de Kat Hagedorn. Information Architecture: Blueprints for the Web (Paperback) de Christina Wodtke. The Elements of User Experience: User-Centered Design for the Web de Jesse James Garrett . No me hagas pensar de Steve Krug. Designing Web Usability: The Practice of Simplicity de Jakob Nielsen. (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 44. (av) Ayer Viernes ®2008 Ayerviernes S.A.
  • 45. (av) Ayer Viernes Es para las personas
  • 46. (av) Ayer Viernes Foto de asferic Flick Principios de Accesibilidad - Directrices de Accesibilidad para el Contenido Web 1.0 - Para las personas (Usuarios) - Derechos Humanos (Declaración Universal Art. 27.1 1984) - Distintos niveles de Accesibilidad - Acceso Universal o Acceso para Todos - Desarrolladores (AIs, Psicologos, Periodistas, Diseñadores, Profesores de Castellano, Publicistas, etc.) - Capacidad de entregar Alternativas
  • 47. (av) Ayer Viernes ¿Por qué una Web Accesible?
    • - Baja los costos de mantenimiento
    • - Tecnologías probadas integradas a estándares
      • (W3C, HTTP, HTML, CSS, SVG)
    • - Desafío constante
    • - Reduce la responsabilidad Legal
    • - Incrementa la cuota de mercado y alcance de la audiencia
    • - Mejora la usabilidad de no-discapacitados
    • - Mejora la encotrabilidad (SEO)
    • - Soporte para la Web Semántica o Web 3.0
  • 48. (av) Ayer Viernes ¿Qué es crear Web Accesible? - Implementar las 14 Pautas de accesibilidad , normativa que explica como hacer accesibles los contenidos - Revisar los puntos de verificación según el nivel de accesibilidad a cumplir - Concientizar a los desarrolladores
  • 49. (av) Ayer Viernes ¿Cuándo implementarla? En desarrollos completos siempre En desarrollos terminados caso por caso :) ;) Estrategia AI Contenidos Diseño Front
  • 50. (av) Ayer Viernes Desarrollando accesiblemente Estrategia AI Contenidos Diseño Front :) Definir el nivel A AA AAA Prioridad 1 = tiene Prioridad 2 = debe Prioridad 3 = puede
  • 51. (av) Ayer Viernes ¿Cómo evaluarla? Definir el nivel
      • Verificación de los puntos
    A Prioridad 1 14 (65) ;)
  • 52. (av) Ayer Viernes Tipos de Verificación Automática
      • Manual
    - TAW - HERA - Examinator - Titles - Contrastes - Textos de Vínculos - Contrastes y Color - Ver sin CSS - Ver sin imágenes - HTML semántico - Tamaños relativos - Correcta Degradación - WebDeveloper - WAVE - Accesibility
  • 53. (av) Ayer Viernes Validemos Automática - Varios - Sin imágenes - Sin CSS - Verificar HTML - Verificar CSS
  • 54. (av) Ayer Viernes Validemos Automática - Varios :( - Sin imágenes - Sin CSS - Verificar HTML - Verificar CSS
  • 55. (av) Ayer Viernes Validemos Automática - Varios :( - Sin imágenes - Sin CSS - Verificar HTML - Verificar CSS
  • 56. (av) Ayer Viernes Validemos Automática - Varios :( - Sin imágenes - Sin CSS - Verificar HTML - Verificar CSS
  • 57. (av) Ayer Viernes Validemos Automática - Varios :( - Sin imágenes :( - Sin CSS - Verificar HTML - Verificar CSS
  • 58. (av) Ayer Viernes Validemos Automática - Varios :( - Sin imágenes :( - Sin CSS :) - Verificar HTML - Verificar CSS
  • 59. (av) Ayer Viernes Validemos Automática - Varios :( - Sin imágenes :( - Sin CSS :) - Verificar HTML :( - Verificar CSS
  • 60. (av) Ayer Viernes Validemos Automática - Varios :( - Sin imágenes :( - Sin CSS :) - Verificar HTML :( - Verificar CSS :(
  • 61. (av) Ayer Viernes Validemos Manual Pauta 1 Proporcione alternativas equivalentes para el contenido visual y auditivo - Proporcione un contenido que, presentado al usuario, cumpla esencialmente la misma función o propósito que el contenido visual o auditivo. 1.1 Proporcione un texto equivalente para todo elemento no textual Por ejemplo, en HTML: 1.2 Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor. [Prioridad 1] 1.3 Hasta que las aplicaciones de usuario puedan leer automáticamente el texto equivalente de la banda visual, proporcione una descripción auditiva de la información importante de la pista visual de una presentación multimedia [Prioridad 1] 1.4 Para toda presentación multimedia tempodependiente (Por ejemplo, una película o animación) sincronice alternativas equivalentes (Por ejemplo, subtítulos o descripciones de la banda visual) con la presentación. [Prioridad 1] 1.5 Hasta que las aplicaciones de usuario interpreten el texto equivalente para los vínculos de los mapas de imagen de cliente, proporcione vínculos de texto redundantes para cada zona activa del mapa de imagen de cliente. [Prioridad 3] - Ejemplos - Técnicas HTML - Técnicas CSS Verificar punto por punto ¿Aplica? Aplicar :) Ejemplo
  • 62. (av) Ayer Viernes Recursos Información oficial - W3C España http://www.w3c.es / - Introducción a la Accesibilidad http://www.w3c.es /Traducciones/es/WAI/intro/accessibility - SIDAR http://w ww.sidar.org/que/ge/cs.php - Accesibilidad e Internet www.inclusio ndigital.net/albergue/accesibilida d.pdf - http://www.discapnet.es/web_accesible/wcag10/WAI-WEBCO NTENT-19990505_es.html - http://usuarios.discapnet. es/disweb2000/PautaWAI/LPVWCAG10.htmTAW Extenciones d e FireFox - WebDeveloper - WAVE - Accesibility Validadores - HERA http://ww w.sidar.org/ - Examinator http://www.accesible.com.ar/examinator - Validador d e HTML http://validator.w3.org/ - V alidador de CSS http://jigsa w.w3.org/css-validator/ - TAW Test de Accesiblidad Web http://www.tawdis.net/
  • 63. (av) Ayer Viernes Desarrollado por personas
  • 64. (av) Ayer Viernes ®2008 Ayerviernes S.A. Muchas Gracias :) Darcy Vergara - Pedro Arellano - Maximiliano Martin AyerViernes Marzo - 2008 Ayer Viernes www.darcy.cl - pedroarellano.wordpress.com - www.maximili ano.cl www.ayerviernes.com