• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Tema 3 diseño centrado usuario (2013)
 

Tema 3 diseño centrado usuario (2013)

on

  • 907 views

Diseño Centrado en el usuario

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

Statistics

Views

Total Views
907
Views on SlideShare
573
Embed Views
334

Actions

Likes
0
Downloads
18
Comments
0

2 Embeds 334

http://utopolis.ugr.es 330
http://webcache.googleusercontent.com 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Tema 3 diseño centrado usuario (2013) Tema 3 diseño centrado usuario (2013) Presentation Transcript

    • Diseño de Interfaces de Usuario edición 2013 Miguel Gea (mgea@ugr.es) Dpt. Lenguajes y Sistemas Informáticoss Grado en Ingeniería Informática Universidad de Granada http://utopolis.ugr.es/diu http://www.slideshare.net/mgea/tema-3-diseo-centrado-usuario-2013
    • Tema 3. Diseño centrado en el Usuario Introducción Metodología de diseño Diseño centrado en el usuario Modelado de usuario Escenarios Tareas Prototipado
    • Introducción al DCU Tema 3. Diseño Centrado en el usuario “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” Ben Shneiderman Univ. Maryland http://www.cs.umd.edu/hcil/ 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)
    • Introducción al DCU: Participantes Tema 3. Diseño Centrado en el usuario Diseñador HCI Usuario Referencia: H. Thimbleby: “The User Interface Design”. Addison-Weley 1990 Computadora
    • Introducción al DCU Tema 3. Diseño Centrado en el usuario 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... ..basado en el conocimiento del dominio del trabajo y el papel que las personas desempeñan cuando interactúan con las computadoras Conocer al Usuario D.C.U. Diseño Participativo Análisis etnográfico Referencias: - Usability Profesional Association, http://www.usabilityprofessionals.org/. Nosolousabilidad - http://www.nosolousabilidad.com/articulos/dcu.htm
    • Introducción al DCU: aproximación Tema 3. Diseño Centrado en el usuario Ingeniería Software DCU Centrado Software Usuario Modelo Modelos Proceso Iterativo Interés Flujo Información Tareas Objetivo Software Correcto Usabilidad
    • Metodología de diseño Tema 3. Diseño Centrado en el usuario Conocer al usuario y las actividades que realiza Objetivo:  Escenario Entorno físico (objetos)Entorno social (reglas, protocolos)  Modelado de usuarios Peculiaridades (habilidades y conocimiento) Funciones a desempeñar Dominio Trabajo Dominio Sistema  Análisis tareas Objetivos a conseguirModo de obtenerlos  Prototipado
    • Metodología Centrada en Usuario Tema 3. Diseño Centrado en el usuario Escenarios: Visión basada en la actividad humana  Descripción que consta de: Usuarios usando artefactos para lograr un objetivo bajo unas determinadas circunstancias en un intervalo de tiempo El escenario describe esos componentes como historias (John M. Carroll)
    • Metodología Centrada en Usuario Tema 3. Diseño Centrado en el usuario Modelado de usuario: análisis info. sobre el usuario  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, sexo, discapacidad…)
    • Metodología Centrada en Usuario Tema 3. Diseño Centrado en el usuario Análisis de tareas: unidad significativa de trabajo en la actividad de una persona. Definición: 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?
    • Metodología Centrada en Usuario Tema 3. Diseño Centrado en el usuario Prototipado: Es una representación limitada de un diseño que permite a los usuarios explorar sus posibilidades (desde las primeras fases) Objetivos: a) Organización preliminar del diseño b) Identificar preferencias de usuario c) Analizar diferentes alternativas d) Detectar problemas en fases tempranas e) Estudio de usabilidad
    • Modelo proceso de Diseño Centrado en Usuario Tema 3. Diseño Centrado en el usuario Referencia: The Usability engineering lifecycle. D. Mayhew http://twobenches.files.wordpress.com/2008/06/47-01.jpg Referencia: Modelo de Proceso de la Ingeniería de la usabilidad y de la accesibilidad. MPIu+a. T: Granollers http://www.grihohcitools.udl.cat/mpiua/index.html
    • Modelo proceso de Diseño Centrado en Usuario Tema 3. Diseño Centrado en el usuario Conocer: Usuarios y sus tareas Diseño participativo Refinado Psicología cognitiva Escenarios Etnografía Diseño Evaluar tareas Descripción Tareas Diseño conceptual y Metaforas Diseño gráfico Recorridos escenario de tareas Prototipos de boceto Descripción de usuarios y tareas Prototipos desechables Interfaces y guías Guías de estilo Diseño completo Pruebas usabilidad Pruebas Evaluación Heurística en campo Prototipos alta fidelidad Prototipos evaluable Sistema preliminar Referencia: S. Greenberg: “interface design / usability engineering process”. http://pages.cpsc.ucalgary.ca/~saul/481/process_diagram.html
    • Modelo proceso de Diseño Centrado en Usuario Objetivos: Tema 3. Diseño Centrado en el usuario 1 Conocer: Usuarios y sus tareas Métodos: Producto: Descripción Tareas Análisis etnográfico Escenarios Escenarios Etnografía Sistema Actual Evaluar tareas Identificación de roles y tareas Análisis de tareas Descrípción de usuarios y tareas
    • Modelo proceso de Diseño Centrado en Usuario 2 Diseño participativo Psicología cognitiva Diseño conceptual y Metaforas Tema 3. Diseño Centrado en el usuario Diseño conceptual (modelo) Metáforas y estilo Recorridos escenario de tareas Psicología Ergonomía Perfil usuario Apariencia Prototipos de boceto Prototipos desechables Boceto (papel) Nueva Propuesta
    • Modelo proceso de Diseño Centrado en Usuario 3 Diseño Refinado Diseño gráfico Interfaces y guías Pruebas usabilidad Tema 3. Diseño Centrado en el usuario Nuevo Diseño Diseño gráfico Evaluación Heurística Guías de estilo Prototipos alta fidelidad Prototipos evaluable Interacción Guías estilos Componentes Color/codificación Eventos... Prototipo (funcionalidad limitada) Nueva Propuesta
    • Modelo proceso de Diseño Centrado en Usuario 4 Diseño completo Tema 3. Diseño Centrado en el usuario Prototipo (funcional) Evaluación Laboratorios Usabilidad Pruebas en campo Test Usuarios Prototipo (Validado) Sistema preliminar Evaluación
    • MCU. I Escenarios Tema 3. Diseño Centrado en el usuario Modos de Representación Textual (narrativo) Secuencia de pasos Narración particionada Diagramas (casos de uso...)
    • MCU. I Escenarios Método narrativo Tema 3. Diseño Centrado en el usuario 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
    • MCU. I Escenarios Secuencia de pasos Tema 3. Diseño Centrado en el usuario 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. El cajero lee la tarjeta y solicita un código de 4 dígitos (PIN), 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. 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’. Si hay fondos, el cajero devuelve la tarjeta, la cantidad solicitada y el comprobante. • Representación temporal
    • MCU. I Escenarios Narración particionada Tema 3. Diseño Centrado en el usuario Usuario El usuario se aproxima al cajero e inserta la tarjeta en la ranura El usuario introduce el PIN usando el teclado numérico. El usuario elige otra cantidad Sistema El cajero lee tarjeta y solicita un código de 4 dígitos (PIN) El cajero verifica el PIN e indica la cantidad a desembolsar, dando la opción de 10, 30 y 50€ y otra cantidad. Solicita la nueva cantidad Verifica que hay suficiente cantidad. Si Introduce nuevamente con el no hay, muestra un mensaje de teclado numérico y pulsa ‘aceptar’ ‘insuficiente fondos’. En caso contrario, para finalizar devuelve la tarjeta, la cantidad solicitada y el comprobante.
    • MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario 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 Análisis de tareas (ontología)
    • MCU. II Análisis tareas HTA Tema 3. Diseño Centrado en el usuario 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.
    • HTA MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario Secuencia de Tareas Selección de Tareas * Iteración de Tareas Tarea Unitaria
    • MCU. II Análisis tareas HTA Tema 3. Diseño Centrado en el usuario Ejemplo: Té
    • GOMS MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario 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
    • MCU. II Análisis tareas GOMS Tema 3. Diseño Centrado en el usuario 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
    • GOMS MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario EJEMPLO GOAL: OBTENER-DINERO GOAL: USAR-CAJERO INSERTAR-TARJETA INTRODUCIR-PIN INTRODUCIR-CANTIDAD COGER-DINERO COGER-JUSTIFICANTE COGER-TARJETA **** 3.000$ 1.000
    • KLM MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario KLM (KeyStroke Level Model) Modelo predictivo (medida de rendimiento) Familia de GOMS Medidas empíricas
    • KLM MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario 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
    • MCU. II Análisis tareas KLM Tema 3. Diseño Centrado en el usuario 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.
    • STN MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario 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) U: I(off) U: I(on) I(off) L(apagada)
    • STN MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario inicio copia limpia portapapeles Portapapeles Lleno y objeto Seleccionado borrar obj. Crear obj. selecc. Obj. deselecc. Obj. Portapapeles Vacío y objeto Seleccionado Portapapeles vaciar Portapapeles Vacio sin portapapeles Lleno sin selección selección
    • Ontología MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario GTA (Groupware Task Analisys) • Descripción de la tarea en el contexto de un modelo conceptual Referencia: Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/
    • Ontología MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario Tareas Es una actividad realizada por un agente (a través de un rol) para alcanzar un objetivo. - Produce un cambio en el entorno- Requiere un periodo de tiempo para realizarlo - Se puede descomponer en subtareas - Puede ocurrir ante un acontecimiento (evento) Objetos Elementos que intervienen en el sistema: - Pueden ser físicos o lógicos Poseen atributos - Se puede aplicar acciones (borrar, copiar...) Referencia: Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/
    • Ontología MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario Rol Define un comportamiento humano dentro del sistema: agente - Es responsable de una serie de tareas - Lo desempeña un Agente Entidad activa Tipo: humano, grupo, agente inteligente.. desempeñar uno o varios roles Referencia: Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/ Pueden
    • Ontología MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario Descripción de tareas • Descripción en detalle de las tareas. Posee herramienta: Euterpe Referencia: S. Lauesen. User Interface Design: A Software Engineering Perspective. Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/
    • Ontología MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario Análisis sobre el modelo de tareas Identificar problemas sobre la ejecución de tareas: En la estructura de tareas (secuencia de acciones)Inconsistencias (tareas que no realiza nadie)Carga de trabajo (actividades por rol)verificar (permisos/autorizaciones) Identificar aspectos del diseño Tareas complejas (suministrar información) Tareas frecuentes (necesidad de atajos) Tareas peligrosas (diálogos de advertencia) Referencia: S. Lauesen. User Interface Design: A Software Engineering Perspective. Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/
    • Ontología MCU. II Análisis tareas Tema 3. Diseño Centrado en el usuario Análisis sobre el modelo de tareas Referencia: Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/
    • MCU. III Prototipos Tema 3. Diseño Centrado en el usuario Prototipos 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
    • MCU. III Prototipos Tema 3. Diseño Centrado en el usuario Prototipos •Gama • baja (fidelidad) Bocetos Storyboard Gama alta (fidelidad) Simulación (Facade tools) Hypercard, Powerpoint, html Generadores de IU Jbuilder, Visual Basic, Delphi
    • MCU. III Prototipos Bocetos Tema 3. Diseño Centrado en el usuario Bocetos (Lo-Fi) • Identifica conceptos relevantes de la interfaz Propone su ubicación y apariencia menú Barra tareas (siempre accesible) Area dibujo Acciones usuario (validar)
    • MCU. III Prototipos Bocetos Tema 3. Diseño Centrado en el usuario Bocetos (Lo-Fi) • No permite contemplar el diálogo (estático)
    • MCU. III Prototipos Bocetos Tema 3. Diseño Centrado en el usuario Bocetos Analizar metáforas, iconos, integración…
    • MCU. III Prototipos Bocetos Tema 3. Diseño Centrado en el usuario
    • MCU. III Prototipos Bocetos Tema 3. Diseño Centrado en el usuario Imagen: http://micketoh.blogspot.com.es/
    • MCU. III Prototipos Bocetos Tema 3. Diseño Centrado en el usuario iPod (2001) Referencias http://www.wired.com/wired/archive/14.11/ipod.html http://www.apple.com/pr/products/ipodhistory/
    • MCU. III Prototipos • Storyboards Tema 3. Diseño Centrado en el usuario Secuencia del escenario
    • MCU. III Prototipos • Storyboards Tema 3. Diseño Centrado en el usuario Diseño de Navegación Referencias [Granollers04]
    • MCU. III Prototipos Gama Baja (LoFi) Tema 3. Diseño Centrado en el usuario • Secuencia de escenas Evaluar diálogo Comportamiento (estudiar) Una/múltip Acciones usuario (transiciones)
    • MCU. III Prototipos Gama Baja (LoFi) Tema 3. Diseño Centrado en el usuario • El diálogo “transcurre” sobre ventanas ventana Transición (por acción) Diálogo o mensaje Diálogo compuesto (tab)
    • MCU. III Prototipos Gama alta (HiFi) Tema 3. Diseño Centrado en el usuario Uso de componentes interactivos Sin funcionalidad buttons menu alert box combo box tabs list box entries
    • MCU. III Prototipos Gama alta (HiFi) Tema 3. Diseño Centrado en el usuario Diseño del boceto y componentes comunes Muestra apariencia (final) Añadir selectivamente funcionalidad (comportamiento) Limitado a librería de componentes Difícil realizar modificaciones del diseño Imagen: [http://www.crunchbase.com/product/balsamiq-mockups]
    • Referencias Tema 3. Diseño Centrado en el usuario ‣ S. Greenberg: “interface design / usability engineering process”. http://pages.cpsc.ucalgary.ca/~saul/481/process_diagram.html. ‣ S. Greenberg website: http://saul.cpsc.ucalgary.ca/ ‣ D. Mayhew The usability engineering lifecycle: A practitioner's handbook for user interface design. Morgan Kauffmann, ISBN 1-55860-561-4. (1999) ‣ S. Lauesen. User Interface Design: A Software Engineering Perspective. Addison-Wesley, ISBN 0-32118143-3. (2005) ‣ J. Nielsen. Usability Engineering, Academic Press. (1993). Website: http://www.nngroup.com/ ‣ ISO 9241-210:2010. Ergonomics of human-system interaction. Part 210: Human-centred design for interactive systems ‣ 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/ ‣ http://www.paperprototyping.com/ ‣ Usability Profesional Association: http://www.usabilityprofessionals.org/ ‣ nosolousabilidad. http://www.nosolousabilidad.com/articulos/dcu.htm