Diseño centrado en el usuarioCajero de un VideoClub
o Diseño centrado en el usuario o Escenarioso Usuarios y Análisis de tareaso Prototipado
Diseño de Interfaces de Usuario
SEMINARIO
http://www.slideshare.net/mgea/seminario-04-dcu-caso-videoclub-2013
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Planteamiento
o Atender a las necesidades del tiempo de ocio de usuarios
o Ayudar a elegir películaso Valorar el grado de usabilidad del sistema
1. Videoclub – Diseño centrado en Usuario
el diseño de un nuevo artefacto implica un nuevo proceso de
aprendizaje
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Análisis etnográfico: Descripción Videoclub tradicional...
2. Videoclub – Escenario
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Análisis etnográfico: Videoclub tradicional
o Servicios que ofertao Ubicación películaso Rotulación películas y estadoo Tipos Usuarios o Formas de búsquedao Asesoramiento o Satisfacción
2. Videoclub – Escenario
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Análisis etnográfico: ubicación películas
2. Videoclub – Escenario
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
2. Videoclub – Escenario
Análisis etnográfico: modo de uso
• Alquilar película (establecimiento)
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”.
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
2. Videoclub – Escenario
Análisis etnográfico: modo de uso
• Alquilar película (establecimiento)
¿y qué pasa con el formato de la película?
¿y otros tipos?
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
2. Videoclub – Escenario
Análisis etnográfico: modo de uso
• 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
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Análisis etnográfico
¿Cómo se identifica al usuario? ¿Cómo paga el usuario? ¿cómo recoge/devuelve películas?
2. Videoclub – Escenario
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Análisis etnográfico ¿Cómo se identifica al usuario? ¿Cómo paga el usuario? ¿cómo recoge/devuelve películas?
2. Videoclub – Escenario
****
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Análisis etnográfico: Cajero
o Tipos de usuarioso Acciones más frecuenteso Opciones seleccionadaso Frecuencia uso o Tasa de éxito
2. Videoclub – Escenario
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Análisis etnográfico: modo de uso
2. Videoclub – Escenario
1. Insertar Tarjeta 2) PIN
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Análisis etnográfico: modo de uso
2. Videoclub – Escenario
3. Seleccionar acción 4. (alquiler) Seleccionar película
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Análisis etnográfico: modo de uso
2. Videoclub – Escenario
6. (alquiler) Coger película7. Coger tarjeta5. (alquiler) Informar precios
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Análisis etnográfico: Cinebank
2. Videoclub – Escenariohttp://www.cinebank.es/
“Todos nuestros videocajeros, sea cual sea la gama y el modelo, están diseñados para que sean fáciles de usar tanto por quién lo gestiona, como para el consumidor final”
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Análisis etnográfico: Cinebank
2. Videoclub – Escenariohttp://www.cinebank.es/
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Análisis etnográfico: Prototipos
2. Videoclub – Escenario
Sin tarjeta2 bocas entrega1 de devolución
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Análisis etnográfico: Prototipos
2. Videoclub – Escenario
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
2. Videoclub – Análisis etnográfico: COMPARATIVA
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)
Importancia de la imagen para el reconocimiento de una
película
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
2. Videoclub – representación visual
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Al observar a distintos usuarios hemos visto deficiencias en el diseño del cajero:
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)
2. Videoclub – Análisis etnográfico: Observación de campo
Devolución rápidaModo normal
común
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
3. Videoclub – Usuarios y Tareas
Conocer: Usuarios y sus
tareas
Descripción de usuarios y tareas
Objetivos:
Métodos:
Producto:
Evaluartareas
Escenarios
Etnografía
DescripciónTareas
Usuarios:o Usuario del cajero (socio)
Personas jóvenes y cinéfilas Son socios del videoclub Uso frecuente + Alquiler: Búsquedas por temas y
novedades + Devolución + Recargar tarjeta
o Administrador + Supervisión funcionamiento del cajero + Explicar uso de tarjeta al usuario
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
3. Videoclub – Usuarios y Tareas
o Nuevos clientes (primeras veces) Explicar el funcionamiento del cajero Normalmente no lo han usado anteriormente Clientes del videoclub
o Socios (clientes experimentados) Uso frecuente Perfiles:
• Niños menores (de entre 8 y 16 años)• Estudiantes • Personas adultas y padres
SOCIOS:
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
3. Videoclub – Tareas
1. ALQUILAR:
AltaFrecuenciaAltaImportanciaPantalla (Táctil)Artefactos
Buscar
Seleccionar película
Consultar saldo
Gustar la películaRequisitosNo haberla visto antes
Subtareas Identificación
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
3. Videoclub – Tareas
2. DEVOLVER:
AltaFrecuenciaMedia (mecánica)ImportanciaRanura películasArtefactos
IdentificaciónSubtareas
Introducir película
Actualizar Saldo
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
3. Videoclub – Tareas
3. RECARGAR:
BajaFrecuenciaMedia (mecánica)ImportanciaRanura billetesArtefactos
Ver saldo
Subtareas
Insertar Importe
Identificación
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
3. Videoclub – Requisitos
FACTORES DE USABILIDAD:
EFICIENCIA
APRENDIZAJE
FIABILIDAD
CLARO/SIMPLE
RECORDAR:
SATISFACCIÓN
bajo normal alto Muy alto
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
3. Videoclub – Análisis de Tareas
Conocer: Usuarios y sus
tareas
Descripción de usuarios y tareas
Objetivos:
Métodos:
Producto:
Evaluartareas
Escenarios
Etnografía
DescripciónTareas
Tareas: hta
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Conocer: Usuarios y sus
tareas
Descripción de usuarios y tareas
Objetivos:
Métodos:
Producto:
Evaluartareas
Escenarios
Etnografía
DescripciónTareas
Tareas: hta
Permitir lectura banda ambas caras / Forzar un único modo
Identificación por huella dactilar
Acceso no autorizado / error?
3. Videoclub – Análisis de Tareas
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Permitir búsquedas complejas
¿Cuándo se comprueba el saldo?
Siempre poder anular acción
hta: alquiler
¿Cuánto tiempo es prudencial?
3. Videoclub – Análisis de Tareas
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
¿está defectuosa o no es correcta?
hta: devoluciónDevolución Películas (0)
Introducir Tarjeta (1)
Introducir Película (2)
Devolver Tarjeta (5)
Cobrar (4)
ActualizarSaldo (1)
Introducir Película (2)
Plan 0: hacer 1,2,3,4,5
Plan 4: hacer 3.1,3.2
¿y si el saldo está agotado?
3. Videoclub – Análisis de Tareas
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
4. Videoclub – Modelo conceptual
1. CONCEPTOS:
PelículaBuscar, Alquilar, Devolver, Ver informacion
SaldoConsultar, Actualizar,
UsuarioPeliculas vistas,
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
5. Videoclub – Bocetos
PresentaciónOrganización (layout)RealimentaciónInteracción
Datos Usuario Logotipo Portada
Acciones
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
5. Videoclub – Bocetos
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
5. Videoclub – Estilo de interacción
Menú: pantalla táctil
Teclado
- Ordenes (consultas complejas)
- Lenguaje natural (+ tipos usuarios)
Menú- Cantidad de películas (tiempo acceso)- modos selección (menú diferente)- comparativa de películas
Importancia de la imagen para el reconocimiento de una película
mapping!
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Diseño Iconos
Reconocibles
VIDEOCLUB
B25
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
V2002
VIDEOCLUB
C5
Comportamiento
Desabilitar opciones
Acciones de usr.
insertar tarjeta
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
V2002
VIDEOCLUB
C5
Información:
Layout
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
V2002
VIDEOCLUB
C5
RealimentaciónEstado actual
Información ayuda
Acciones disponibles
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
VIDEOCLUBRealimentación
Iconografía
Diálogo
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
V2002
VIDEOCLUB
C5
BúsquedaVarios modos
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
V2002
VIDEOCLUB
C5
BúsquedaConfirmación
Mostrar todos datos
Pago previo...
(no coincide con HTA)
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
V2002
VIDEOCLUB
C5
Confirmar accionesVerificar decisión
Informar al usuario
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Dialogo Borrar socio
Confirmación
1) Comprobación
2) Aceptación
Significado
de las opciones?
CASO 2 -VIDEOGEST
VIDEOCLUB
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Formulario préstamo
Selección modal
Desactivación
Selecc. tarifa
VIDEOCLUB
A11
CASO 1 -GESTVIDEO
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
CASO 1 -GESTVIDEO
VIDEOCLUB
A11
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Diálogo nuevo usuario
Control errores (dni correcto)
Obligatorio (sin opción cancelar)
VIDEOCLUB
A11
CASO 1 -GESTVIDEO
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Organización menú
Nombre opciones
Anidamiento
CASO 3 –V. MANAGER
VIDEOCLUB
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Organización opciones
Minimalista
Icónica
VIDEOCLUB
C3
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
Acciones Usuario
Comprensibles
Utilidad
VIDEOCLUB
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
http://www.nubeox.com/VIDEOCLUB ONLINE
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
http://www.nubeox.com/Estrenos
VIDEOCLUB ONLINE
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
http://www.nubeox.com/
Promociones
VIDEOCLUB ONLINE
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
http://www.veocine.es/VIDEOCLUB ONLINE
Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada
--
CASO DE ESTUDIO: Cajero Videoclub
http://www.videoclubsonline.com/VIDEOCLUB ONLINE