1. Desarrollo de aplicaciones interactivas
Maestría en Medios Interactivos
Interacción Humano-Computadora I
Thursday, April 15, 2010

2. Nueva tecnología en la oficina ...
Thursday, April 15, 2010

3. ...una nueva capa de complejidad
En 1997, un estudio de Harris Research mostró que los empleados que utilizan una PC pueden perder
hasta tres semanas al año resolviendo problemas de tecnología. Por qué?
TCO: Total Cost of Ownership, aproximadamente 4 veces el valor inicial de tecnología de información al
año, eg aprendizaje, actualizaciones, consumibles, etc
Cada empleado pierde al menos 100 minutos a la semana en el primer mes en que un nuevo sistema se
ha introducido
Malfuncionamiento o mal uso de hardware o software
Thursday, April 15, 2010

4. Por qué es importante HCI?
Malas interfaces cuestan
• dinero
• 5% de mejor satisfacción = 85% de aumento de ganancias
• problemas en etapas posteriores cuestan cuatro veces que al inicio
• prestigio de la organización (lealtad del cliente)
• vidas
Thursday, April 15, 2010

5. Desarrollo de aplicaciones interactivas
Un grupo de especialistas (idealmente)
• diseñadores gráficos
• diseñadores de interacción / interface
• arquitectos de información
• escritores técnicos
• mercadólogos
• ingenieros de pruebas
• ingenieros de usabilidad
• ingenieros de software
• usuarios
Thursday, April 15, 2010

6. Diseño y desarrollo de aplicaciones interactivas
✓Proceso de desarrollo de GUIs
✓Metas de usabilidad
✓Diseño Centrado al Usuario (UCD)
✓Análisis de Tareas y análisis contextual
✓Prototipos rápidos
✓Evaluación
✓Programación
Thursday, April 15, 2010

7. Thursday, April 15, 2010

8. Proceso de desarrollo de GUIs
Customers, Products, Customers, Products, Customers, Products,
Business, Marketing Business, Marketing Business, Marketing
Design Design
Evaluate Execute
Discovery Exploration
Work together to
Customers: realize the design
- Roles (Who) in detail.
- Tasks (What)
- Context (Stories) Evaluate with
Marketing: Customers
- Business Priorities
- Messages
Technology:
- Products Storyboard Review & Iterate
- Architecture
Design:
- Leading/competing
technologies
Design Definition: Proposal: Specification:
- Design Problem Statement Demos/ Hi Fidelity, Refined Design
- Targeted User Roles (Who) Lo Fi Prototypes - Based on customer feedback
based on slide by Sara Redpath, - Targeted User Tasks (What) (How) - Foundation in product reality
IBM & Thyra Trauch, Tivoli - Design Direction Statements - Refined Design description 8
Thursday, April 15, 2010

9. Proceso de desarrollo de GUIs
Customers, Products, Customers, Products, Customers, Products,
Business, Marketing Business, Marketing Business, Marketing
Design Design
Evaluate Execute
Discovery Exploration
Customers:
- Roles (Who) Work together to
- Tasks (What) realize the design
- Context (Stories) in detail.
Marketing:
- Business Priorities Evaluate with
- Messages Customers
Technology:
- Products
- Architecture
Design:
- Leading/competing Storyboard Review & Iterate
technologies
Design Definition: Proposal: Specification:
- Design Problem Statement Demos/ Hi Fidelity, Refined Design
- Targeted User Roles (Who) Lo Fi Prototypes - Based on customer feedback
based on slide by Sara Redpath, - Targeted User Tasks (What) (How) - Foundation in product reality
IBM & Thyra Trauch, Tivoli - Design Direction Statements - Refined Design description 9
Thursday, April 15, 2010

10. diseño
evaluación prototipos
Iteraciones
(en cada etapa)
10
Thursday, April 15, 2010

11. Diseño
El diseño está guiado por los requerimientos
• para qué es la aplicación?
• cómo será implementada?
El diseño representa el artefacto
• para GUIs estas representaciones incluyen:
• sketches y/o storyboards
• diagramas de flujo que muestren la estructura
• prototipos funcionales
Representaciones simplificadas
Thursday, April 15, 2010

12. Representaciones para un diseño Web
Mapas del sitio Storyboards
Contenidos Prototipos
12
Thursday, April 15, 2010

13. Metas de usabilidad
Fijar metas al inicio para medir el progreso
Las metas pueden ser muchas, así que hay que ordenarlas en prioridad
• Aprendizaje (más rápido en su utilización la segunda vez)
• Memorable (de sesión a sesión)
• Flexible (varias formas de lograr lo mismo)
• Eficiente (realiza las tareas de manera óptima)
• Robusto (sin errores, buena retroalimentación para recuperarse)
• Placentero (alta satisfacción del usuario)
• Divertido
Thursday, April 15, 2010

14. Diseño Centrado al Usuario (UCD)
“Know thy user”
Habilidades físicas
• percepción
• manipulación física
Habilidades cognitivas
• memoria
Habilidades organizacionales / laborales
Mantener a los usuarios involucrados en el proceso de desarrollo
• desarrolladores trabajando con usuarios claves
• entender el proceso de trabajo (estudio contextual)
Thursday, April 15, 2010

15. Análisis de Tareas y análisis contextual
Observar las prácticas en el trabajo
Crear ejemplos y escenarios del uso real
Tratar nuevas ideas antes de construir software
Thursday, April 15, 2010

16. Prototipos rápidos
Un prototipo que probar
Prototipos de baja fidelidad
• prototipos de papel
• cut, copy, paste
Herramientas para prototipos
• HTML, Visual Basic, HyperCard, Director,
Flash, DENIM, etc.
Constructores de GUIs
16
Thursday, April 15, 2010

17. Evaluación
Pruebas con usuarios reales
•con prototipo interactivo
•con papel o Mago de Oz
Construir modelos
•GOMS
Técnicas de bajo costo
•evaluación experta
•walkthroughs
•pruebas en línea
17
Thursday, April 15, 2010

18. Programación (sin programar)
• Toolkits
• GUI Builders
• Event models
• Input / Output models
etc
Thursday, April 15, 2010