5. desarrollo aplicaciones interactivas (hci 1)
DESCRIPTION
Apuntes sobe el desarrollo de aplicaciones interativas, sus métodos y resultados.TRANSCRIPT
![Page 1: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/1.jpg)
1 Desarrollo de aplicaciones interactivas
Maestría en Medios InteractivosInteracción Humano-Computadora I
![Page 2: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/2.jpg)
Nueva tecnología en la oficina ...
![Page 3: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/3.jpg)
...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
![Page 4: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/4.jpg)
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
![Page 5: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/5.jpg)
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
![Page 6: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/6.jpg)
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
![Page 7: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/7.jpg)
7
Design
ExplorationEvaluate Execute
Proposal:Demos/
Lo Fi Prototypes(How)
Work together torealize the design
in detail.
Evaluate withCustomers
Design
Discovery
Customers, Products,Business, Marketing
Customers, Products,Business, Marketing
Customers, Products,Business, Marketing
Design Definition:- Design Problem Statement- Targeted User Roles (Who)- Targeted User Tasks (What)- Design Direction Statements
Specification:Hi Fidelity, Refined Design
- Based on customer feedback - Foundation in product reality - Refined Design description
Storyboard
Customers: - Roles (Who) - Tasks (What)
- Context (Stories)Marketing:
- Business Priorities - MessagesTechnology: - Products
- ArchitectureDesign:
- Leading/competing technologies
Review & Iterate
based on slide by Sara Redpath, IBM & Thyra
Trauch, Tivoli
Proceso de desarrollo de GUIs
![Page 8: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/8.jpg)
8
Iteraciones (en cada etapa)
diseño
prototiposevaluación
![Page 9: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/9.jpg)
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
![Page 10: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/10.jpg)
10
Representaciones para un diseño Web
Mapas del sitio
Contenidos Prototipos
Storyboards
![Page 11: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/11.jpg)
ISO 9126
“La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso”
ISO 9241
“Usabilidad es la efectividad, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico”
Usabilidad según ISO
![Page 12: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/12.jpg)
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
![Page 13: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/13.jpg)
Diseño Centrado al Usuario (UCD)
“Know thy user”
Habilidades cognitivas
• percepción
• manipulación física
• 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)
• no fijado en tecnología, basado en actividades
![Page 14: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/14.jpg)
Análisis de Tareas y análsis contextual
Observar las prácticas en el trabajo
Crear ejemplos y escenarios del uso real
Tratar nuevas ideas antes de construir software
![Page 15: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/15.jpg)
15
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
![Page 16: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/16.jpg)
16
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
![Page 17: 5. Desarrollo Aplicaciones Interactivas (HCI 1)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/557c4398d8b42a23598b505b/html5/thumbnails/17.jpg)
Programación (sin programar)
• Toolkits
• GUI Builders
• Event models
• Input / Output models
etc