Tema 3 diseño centrado usuario (2013)

2,662
-1

Published on

Diseño Centrado en el usuario
tercer tema de la asignatura Diseño de Interfaces de Usuario
Grado de Ingeniería Informática. Universidad de Granada
Primera versión: 3 Nov 2013
Ultima act. Nov 2015

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,662
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
77
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tema 3 diseño centrado usuario (2013)

  1. 1. Tema 3: Diseño Centrado en el Usuario (DCU) DISEÑO DE INTERFACES DE USUARIO edición 2015 ! ! Miguel Gea (mgea@ugr.es) Dpt. Lenguajes y Sistemas Informáticos Grado en Ingeniería Informática Universidad de Granada http://utopolis.ugr.es/diu
  2. 2. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Indice DCU (parte I) Metodología de diseño Diseño centrado en el usuario Modelado de usuario Escenarios Tareas Prototipado 2
  3. 3. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu El personaje: Ben Shneiderman “The old computing was about what computer could do; the new computing is about what users can do. Successful technologies are those that in harmony with user's needs (2007) - Leonardo’s Laptop: Human needs and the new computing technology http://mitpress.mit.edu/main/ feature/leonardoslaptop/index.html - Recibe en 2003 el premio IEEE-USA Award for Distinguished Contributions Furthering Public Understanding of the Profession (explicar aspectos de ingeniería al público en general) - Profesor en Universidad de Maryland http://www.cs.umd.edu/hcil/ 3
  4. 4. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu DCU: Participantes 4 HCI Diseñador Usuario Computadora [THIM90]
  5. 5. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Introducción al DCU 5 Es el proceso de diseñar un producto teniendo en cuenta las necesidades concretas del usuario que lo vaya a usar, con el objeto de obtener la mayor satisfacción y experiencia de uso.. ..a philosophy based on the needs and interests of the user, with an emphasis on making products usable and understandable” [Norman86] Conocer usuario y tareas Diseño participativo (interdisciplinar) Diseño y prueba (prototipos) Proceso iterativo (test-test-test) D.C.U.
  6. 6. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Metodología DCU 6 Aproximaciones: - Ingeniería de la Usabilidad [MAYHEW99] - HCD Proceso diseño Centrado en Usuario [ISO13407] - Lean UX [GOTHELF13] Basados en etapas con diferentes métodos y entregables (del diseño del producto)
  7. 7. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Metodología: HCD - ISO 13407 7 Diseño centrado en Humano para Procesos Interactivos, parte de estándar ISO 13407 sobre planificación y gestión del proceso de diseño. Complemento de ISO 9421: “Ergonomic requirements for office work with visual display terminals (VDTs)” [SHARP11] [ISO13407] http://journal.code4lib.org/articles/561
  8. 8. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Metodología: Ingeniería de la usabilidad 8 [MAYHEW99] img: http://twobenches.files.wordpress.com/2008/06/47-01.jpg Modelo de ciclo de vida con tres pasos básicos: - análisis de requisitos (perfil usuario, análisis de tareas, principios de diseño, requisitos plataforma: plan de usabilidad) - diseño/test/desarrollo (modelo conceptual, mockup, wireframe, guias de estilo, evaluación, prototipo, test) - instalación (despliegue, test, feedback)
  9. 9. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Metodología: Lean UX 9 Procedente de la cultura StartUp: - obtener un producto lo antes posible para que sobreviva el proyecto. - Obtener conocimiento que sea la base para la iteración del producto Fundamentos: 1) design thinking: Pensamiento de diseño (IDEO) 2) desarrollo ágil centrado en individuos y sus interacciones, en el producto, en la colaboración con clientes/usuarios, dando respuesta a los cambios necesarios 3) lean startup: construye-evalúa-aprende [GOTHELF13]
  10. 10. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Métodos (Usabilidad+UX) 10 A/B testing, affinity diagram, analytics, brainstorming, card sorting, competitor analysis, context of use, contextual inquiry, cost-benefit analysis, design guidelines, experience canvas, experience journey map, focus groups, getting started, heuristic evaluation, interviews, minimum viable product (MVP), mockup, paper prototyping, patterns, performance testing, personas, planning usability, prototyping, questionnaires, remote testing, scenarios, sketches, stakeholder meeting, storyboarding, style guides, subjective evaluation, surveys, task analysis, usability testing, use cases, user observation (ethnography), user satisfaction, wireframe, wizard of oz
  11. 11. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Métodos: tipología 11 Según ámbito de aplicación Fase de Estrategia/Análisis/Investigación (THINK) Fase de Diseño /Desarrollo (MAKE) Fase de Pruebas / Lanzamiento (CHECK) Según tipo de datos usados Cuantitativos / Cualitativos
  12. 12. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu proceso UX 12 ref: http://uxmastery.com/resources/process THINK MAKE CHECK
  13. 13. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu proceso UX: THINK 13 ref: http://uxmastery.com/resources/process THINK MAKE CHECK competitor analysis, stakeholder meeting, contextual inquiry (ethnography), surveys, personas, context of use, cost- benefit analysis, experience journey map, interviews, questionnaires, scenarios, task analysis
  14. 14. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu proceso UX: MAKE 14 ref: http://uxmastery.com/resources/process THINK MAKE CHECK design guidelines, experience canvas, minimum viable product (MVP), mockup, paper prototyping, patterns, sketches, style guides, wireframe, storyboarding, use cases
  15. 15. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu proceso UX: CHECK 15 ref: http://uxmastery.com/resources/process THINK MAKE CHECK analytics, focus groups, heuristic evaluation, user satisfaction, wizard of oz, prototyping, questionnaires, remote testing, performance testing, usability testing, A/B testing,
  16. 16. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu FASE I: Escenario (scenario) 16 Narración describiendo “un día en la vida de una persona” y de su relación con artefactos (visión basada en la actividad humana). Se describe cómo se llevan a cabo las tareas en un contexto específico. La descripción consta de: - Usuarios - usando artefactos - para lograr un objetivo - bajo unas determinadas circunstancias - en un intervalo de tiempo Relacionado con experience journey map Aplicación de técnicas de etnografía (observación de campo) El escenario describe esos componentes como historias (John M. Carroll)
  17. 17. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu FASE I: Modelado de usuario 17 Proceso de identificación de las características del usuario para adaptar el sistema intelectivo a sus necesidades. a) Conocimiento que posee ★ ordenadores/ sistema / aplicación ★ de las tareas del trabajo ★ culturales (formación, idioma, etc.) b) Trabajo que realiza ★ Tipo de actividad ★ Frecuencia de Uso ★ Modo de Aprendizaje ★ Importancia c) Características personales ★ psicológicas (motivación, estrés, actitud..) ★ físicas (edad, discapacidad…) Relacionado con personas, experience journey map
  18. 18. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu FASE I: Análisis de tareas 18 Tarea: unidad significativa de trabajo en la actividad de una persona. Es el “estudio de lo que un usuario tiene que realizar en términos de acciones y/o procesos para conseguir un objetivo” a) Qué quiere realizar el usuario? b) Qué información es requerida? c) Qué acciones debe llevar a cabo? Relacionado con personas, experience journey map
  19. 19. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu FASE II: Prototipo 19 Es una representación limitada de un diseño que permite a los usuarios explorar sus posibilidades (desde las primeras fases poder expresar y evaluar ideas) Adecuados para validar: - Organización preliminar del diseño (layout) adecuado para saber donde encontrar la información - Navegación, para saber dónde estoy, y donde se puede ir. - Conceptos y terminología. Adecuados, comprensibles - Contenido adecuado para tomar decisiones. - Identificar preferencias de usuario - Analizar diferentes alternativas - Estudio de usabilidad Relacionado con mockup, paper prototyping, sketches, style guides, wireframe, storyboarding
  20. 20. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Recepción Multimedia 20 Crear una Recepción multimedia en una empresa. Tarea: Referencias [Granollers04] Atender a clientes Mostrar información relativa a su negocio Favorecer la familiaridad y cercanía Sorprender al cliente Imagen de modernidad Motivación caso estudio
  21. 21. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu caso estudio Escenario: Recepción Multimedia 21 Recepción multimedia Referencias [Granollers04]
  22. 22. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu caso estudio Prototipos: Recepción Multimedia 22Referencias [Granollers04]
  23. 23. Referencia: [Granollers04] caso estudio DCU: Recepción multimedia
  24. 24. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 24 Crear una cajero para videoclub Planteamiento - Atender a las necesidades del tiempo de ocio de usuarios - Ayudar a elegir películas - Valorar el grado de usabilidad del sistema Hipótesis: el diseño de un nuevo artefacto implica un nuevo proceso de aprendizaje caso estudio
  25. 25. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 25 Análisis etnográfico: Descripción Videoclub tradicional… caso estudio
  26. 26. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 26 Análisis etnográfico: Descripción Videoclub tradicional… - Servicios que oferta - Ubicación películas - Rotulación películas y estado - Tipos Usuarios - Formas de búsqueda - Asesoramiento - Satisfacción caso estudio
  27. 27. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 27 Análisis etnográfico: ubicación películas caso estudio
  28. 28. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 28 PRUEBA Análisis etnográfico videoclub tradicional: modo de uso Alquilar película: El usuario busca en los estantes, clasificados por categorías (novedades, cómicas). El usr. coge la carátula de la película y la lleva al estante. El usuario conoce de antemano que está disponible porque no tiene un identificativo de “alquilada”.
  29. 29. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 29 ¿y qué pasa con el formato de la película? ¿y otros tipos? Normas: Para poder alquilar una película, el cliente debe ser socio. En la inscripción de un nuevo socio, este debe pagar una cuota, que se destinara a un seguro El socio deberá pagar una multa en dos casos: retraso en la fecha de devolución y devolver la película en mal estado
  30. 30. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 30 Análisis Contexto de uso del nuevo escenario ¿Cómo se identifica al usuario? ¿Cómo paga el usuario? ¿Cómo recoge/devuelve películas? ****
  31. 31. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 31 Análisis Etnográfico del nuevo escenario Tipos de usuarios Acciones más frecuentes Opciones seleccionadas Frecuencia uso Tasa de éxito
  32. 32. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 32 Tipo de escenarios y capacidad cognitiva a desarrollar Tradicional • Búsqueda visual • Clasificación no consistente • (novedades/acción/españolas...) • Orden aleatorio dentro del estante • Que no tengan identificativo de “alquilada” Cajero • Selección por criterios (tipo, actor, año...) • Navegación por menús (adelante-atrás) • Normas de privacidad (tarjeta, cód..) • Sin asistencia de otro usuario • Uso secuencial (timing de uso – impaciencia del resto usuarios) Importancia de la imagen para el reconocimiento de una película
  33. 33. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 33 Al observar a distintos usuarios hemos visto deficiencias en el diseño del cajero automático de videoclub: • A determinados usuarios (niños, personas mayores), les cuesta familiarizarse con el funcionamiento del cajero debido a que no están acostumbrados a aplicaciones informáticas. • No hay recomendaciones “reales” (del boca a boca) • Confunde mucho el uso alternativo de pantalla táctil y teclado numérico • Cuando hay muchas películas es muy cansada la búsqueda • Las búsquedas no permiten combinaciones (aventuras Y Novedad Y Director==XX) • Zona especial para devoluciones (compartido para recoger/devolver películas) incómodo • Mucho tiempo para seleccionar película (colas de espera)
  34. 34. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 34 SOCIOS / NUEVOS SOCIOS (INSCRIPCION + TARJETA) / DUEÑO ALQUILAR (IDENTIFICAR, BUSCAR, SELECCIONAR, CONSULTAR SALDO, RECOGER) ASOCIADO: NO HABER VISTO ANTES, “GUSTAR” DEVOLVER PELICULA (IDENTIFICAR, MINORAR SALDO, ENTREGAR) RECARGAR TARJETA (IDENTIFICAR, SELECCIONAR RECARGA, ENTREGAR DINERO)
  35. 35. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 35 Permitir lectura banda ambas caras / Forzar un único modo Identificación por huella dactilar Acceso no autorizado / error? ANALISIS DE TAREAS (HTA)
  36. 36. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 36 Siempre poder anular acción Permitir búsquedas complejas ¿Cuánto tiempo es prudencial? ANALISIS DE TAREAS (HTA)
  37. 37. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Escenario: Cajero Videoclub 37
  38. 38. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Indice DCU (parte II) > Escenarios > Análisis de Tareas > Prototipos > Storyboard 38
  39. 39. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu I: Escenarios 39 Diferentes modos de Representación Textual (narrativo) Secuencia de pasos Narración particionada Diagramas (casos de uso...)
  40. 40. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu I: Escenarios 40 Ejemplo: Reintegro de un cajero El usuario se aproxima al cajero e inserta la tarjeta en la ranura. Para ello la debe insertar con la banda magnética hacia abajo. El cajero lee la tarjeta y solicita un código de 4 dígitos (PIN) y el usuario los introduce usando el teclado numérico. El cajero verifica el PIN y presenta diferentes opciones (...) de las cuales el usuario selecciona ‘retirada en efectivo’ en el botón que hay junto a la opción. A continuación, el cajero indica la cantidad a desembolsar, dando la opción de 10, 30 y 50€ u otra cantidad. El usuario elige otra cantidad, y la máquina solicita la cantidad, que el usuario introduce nuevamente con el teclado numérico y pulsa ‘aceptar’ para finalizar. El cajero verifica que hay suficiente cantidad para solicitar la petición. Si no hay, muestra un mensaje de ‘insuficiente fondos’. En caso contrario, devuelve la tarjeta, la cantidad solicitada y el comprobante. • Confuso (no hay clara distinción entre usuario/sistema) • Requisitos dispersos en la narración
  41. 41. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu I: Escenarios 41 Ejemplo: Reintegro de un cajero 1. El usuario se aproxima al cajero e inserta la tarjeta en la ranura. Para ello la debe insertar con la banda magnética hacia abajo. 2. El cajero lee la tarjeta y solicita un código de 4 dígitos (PIN), el usuario los introduce usando el teclado numérico. 3. El cajero verifica el PIN y presenta diferentes opciones (...) de las cuales el usuario selecciona ‘retirada en efectivo’ en el botón que hay junto a la opción. 4. El cajero indica la cantidad a desembolsar, dando la opción de 10, 30 y 50€ u otra cantidad. El usuario elige otra cantidad, y la máquina solicita la cantidad, que el usuario introduce nuevamente con el teclado numérico y pulsa ‘aceptar’ para finalizar. 5. El cajero verifica que hay suficiente cantidad para solicitar la petición. Si no hay, muestra un mensaje de ‘insuficiente fondos’. 6. Si hay fondos, el cajero devuelve la tarjeta, la cantidad solicitada y el comprobante. • Representación temporal
  42. 42. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu I: Escenarios 42 Verifica que hay suficiente cantidad. Si no hay, muestra un mensaje de ‘insuficiente fondos’. En caso contrario, devuelve la tarjeta, la cantidad solicitada y el comprobante. Usuario Sistema El usuario se aproxima al cajero e inserta la tarjeta en la ranura El cajero lee tarjeta y solicita un código de 4 dígitos (PIN) El usuario introduce el PIN usando el teclado numérico. El cajero verifica el PIN e indica la cantidad a desembolsar, dando la opción de 10, 30 y 50€ y otra cantidad. El usuario elige otra cantidad Solicita la nueva cantidad Introduce nuevamente con el teclado numérico y pulsa ‘aceptar’ para finalizar Narración particionada
  43. 43. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu II Análisis tareas: HTA 43 Objetivo del proceso de análisis 1. Identificar la actividad humana en el sistema (mentales, físicas) 2. Identificar usuarios del sistema 3. Establecer nivel de asistencia 4. Comprensión del dominio (objetos y relaciones) Modo de obtención Entrevistas Observación del usuario y su trabajo Estudio de la documentación Método de análisis: Descomposición de las tareas Notaciones (clásicas) HTA, GOMS, KLM, STN
  44. 44. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu II Análisis tareas: HTA 44 HTA: Análisis Jerárquico de Tareas • Descripción mediante operaciones y planes • Operaciones: actividades que se realizan para alcanzar un objetivo • Planes: descripción de las condiciones que se deben cumplir para realizar cada actividad • Uso de notación gráfica Se diseño originalmente para identificar las necesidades de aprendizaje y entrenamiento. Secuencia de Tareas Selección de Tareas * Iteración de Tareas Tarea Unitaria
  45. 45. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu II Análisis tareas: HTA 45 Preparar Té
  46. 46. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu II Análisis tareas: GOMS 46 GOMS (Goal Operators Methods and Selection Rules) [Card&Moran, 1983] • Goals : Son los objetivos del usuario, y describen lo que pretende conseguir. Se puede evaluar el grado de satisfacción (logro) obtenido. • Operaciones: Son las acciones básicas que se deben llevar a cabo para utilizar el sistema. Son dependientes del sistema • Métodos: Descripción de las diferentes alternativas para la consecución del objetivo marcado • Reglas Selección: Elección entre posibles alternativas para alcanzar un objetivo. Determinación de estrategias. Referencias: S. Card, T. P. Moran, A. Newell (1983). The Psychology of Human Computer Interaction. Lawrence Erlbaum, 1983 Usability body of Knowledge. http://www.usabilitybok.org/goms L. Hochstein: GOMS. http://www.cs.umd.edu/class/fall2002/cmsc838s/tichi/printer/goms.html
  47. 47. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu II Análisis tareas: GOMS 47 GOAL: CERRAR-VENTANA [select GOAL: USAR-METODO-CERRAR MOVER-RATON-A-CABECERA-VENTANA MENU-POPUP CLICK-SOBRE-OPCION-CERRAR GOAL: USAR-METODO-CERRAR-VENTANA-TECLADO PRESIONAR-TECLAS-ALT-F4 GOAL: USAR-CERRAR-APLICACION PRESIONAR CONTROL-ALT-DEL SELECCIONAR CERRAR-APLICACIÓN ] Rule 1: Usar METODO-CERRRAR mientras no se aplique otra regla Rule 2: Usar CERRAR-APLICACIÓN si se queda bloqueado el sistema
  48. 48. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu II Análisis tareas: GOMS 48 EJEMPLO GOAL: OBTENER-DINERO GOAL: USAR-CAJERO INSERTAR-TARJETA INTRODUCIR-PIN INTRODUCIR-CANTIDAD COGER-DINERO COGER-JUSTIFICANTE COGER-TARJETA **** 3.000$ 1.000 estrategiadediseño
  49. 49. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu II Análisis tareas: KLM 49 KLM (KeyStroke Level Model) • Modelo predictivo (medida de rendimiento) • Familia de GOMS • Medidas empíricas
  50. 50. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu II Análisis tareas: KLM 50 Operador Descripción Segundos K Pulsación de teclado: Buen mecanógrafo (135 ppm) Habilidoso (90ppm) Normal (40ppm) Malo 0.08 0.12 0.28 1.20 P Apuntar con el ratón 1.10 H Ubicar las manos en teclado 0.40 D(ND,ID) Dibujar un trazo (N: nº segmentos, I: longitud) 0.9ND+.016ID M Preparación mental 1.35
  51. 51. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu II Análisis tareas: KLM 51 Estimación de rendimiento de selección de un ítem (ej. de entre 16 posibles): a) Selección de un menú por teclado (16 opc). M + K (1er dígito) + 0.44K* (2º dígito) + K (Enter) 1.35 + 0.20 + 0.44(0.20) + 0.20 = 1.84 seg. * Usado para las opciones de la 10-16. Probabilidad 7/16 = 0.44 b) Selección de un menú por ratón (16 opc). M + P + K (click ratón) 1,35 + 1.10 + 0.20 = 2.65 seg.
  52. 52. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu II Análisis tareas: STN 52 Diagrama de transición de estado (STN) • Representa estados y transiciones • Muestra acciones sobre el sistema • Identificar autor de la interacción (U,S,T) I: Interruptor L: Lámpara I(on) L(encendida) I(off) L(apagada) U: I(off) U: I(on)
  53. 53. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu II Análisis tareas 53 inicio Portapapeles Vacio sin selección Portapapeles Lleno sin selección Portapapeles Vacío y objeto Seleccionado Portapapeles Lleno y objeto Seleccionado copia limpia portapapeles deselecc.Obj. selecc.Obj. Crearobj. borrarobj. vaciar portapapeles
  54. 54. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu III. Prototipos 54 Un prototipo es un modelo a escala para desarrollar, expresar y evaluar ideas. Adecuados para validar • Conceptos y terminología. Adecuados, comprensibles • Navegación, para saber dónde estoy, y donde se puede ir. • Contenido adecuado para tomar decisiones. • Layout de página. Adecuado para saber donde encontrar la información • Funcionalidad para realizar todas las tareas necesarias • Forma del producto Gama: Low-Fi: organización, estructura (layout) Hi-Fi: Apariencia casi definitiva, simulación de navegación
  55. 55. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu III. Prototipos para evaluación producto 55
  56. 56. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 56 iPod (2001) Referencias http://www.wired.com/wired/archive/14.11/ipod.html http://www.apple.com/pr/products/ipodhistory/ III. Prototipos para evaluación producto
  57. 57. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu IV. Storyboard 57 Cambio de foto de usr. Secuencia de acciones en escenario. checkin hotel [Granollers04]
  58. 58. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu IV. Storyboard: navegación 58 Referencias [Granollers04]
  59. 59. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Referencias [THIM90] H. Thimbleby: The User Interface Design. Addison-Weley 1990 [NORMAN86] D. Norman, S Draper. User centred system design. Erlbaum, 1986 [GOTH13] J. Gothelf. LEAN UX. Applying Lean principles to Improve User Experiences. O’Reilly, 2013 [MAYHEW99] D. Mayhew. The usability engineering lifecycle. Morgan Kauffman, 1999 [SHARP11] H. Sharp, Y. Rogers, J. Preece: Interaction Design: Beyond Human Computer interaction, 3ª ed. John Wiley & Sons, 2011 [DIX03] A. Dix, J. Finlay, G. Abowd, R. Beale: Human-Computer Interaction, 3ª ed. Prentice Hall, 2003. [BROWN08] Tim Brown. Design Thinking. Harvard Business Review, June 2008. Online: https://www.ideo.com/images/uploads/thoughts/IDEO_HBR_Design_Thinking.pdf [GRANOLLERS04] Granollers, A. (2004). MPIu+a. Una metodología que integra la ingeniería del software, la interacción persona-ordenador y la accesibilidad en el contexto de equipos de desarrollo multidisciplinares. Universitat de Lleida. Departament d'Informàtica i Enginyeria Industrial. ISBN: 9788469063781 http:// hdl.handle.net/10803/8120 , http://www.grihohcitools.udl.cat/mpiua/ Referencias métodos: http://uxdesign.cc/ux-methods-deliverables/ http://www.usabilitynet.org/tools/methods.htm http://austinknight.com/ux-design-guide/ http://www.usability.gov/how-to-and-tools/methods/ http://uxmastery.com/resources/techniques/ UsabilityNet - http://www.usabilitynet.org Usability Profesional Association, http://www.usabilityprofessionals.org/ Nosolousabilidad - http://www.nosolousabilidad.com/articulos/dcu.htm 59
  60. 60. Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Referencias [Lowde13] T. Lowdermilk: User-Centered Design, O’Reilly Media 2013 [GRANOLLERS04] Granollers, A. (2004). MPIu+a. Una metodología que integra la ingeniería del software, la interacción persona-ordenador y la accesibilidad en el contexto de equipos de desarrollo multidisciplinares. Universitat de Lleida. Departament d'Informàtica i Enginyeria Industrial. ISBN: 9788469063781 http:// hdl.handle.net/10803/8120 , http://www.grihohcitools.udl.cat/mpiua/ [DIX03] A. Dix, J. Finlay, G. Abowd, R. Beale: Human-Computer Interaction, 3ª ed. Prentice Hall, 2003. 60
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×