presentación de powerpointhci-collab.com/wp-content/uploads/2018/12/webinar_josepmajunoy… · el...
TRANSCRIPT
![Page 1: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/1.jpg)
Red Colaborativa para soportar los procesos
de enseñanza-aprendizaje en el área de
Interacción Humano - Computador a nivel
Iberoamericano
UN AÑO DE WEBINARS SOBRE HCI EN ESPAÑOL
Modelo mental eImagen del sistema
Conceptos clave en el diseño de interfaces de usuario
![Page 2: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/2.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 2
Modelo mental
![Page 3: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/3.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 3
Características relevantes
Modelo mental
![Page 4: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/4.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 4
Diseño Uso
Modelo conceptual del diseñador
Imagen del sistema
Modelo mental del usuario
Imagen del sistema
Modelo mental, Modelo conceptual e Imagen del sistema
Modelo mental
![Page 5: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/5.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 5
Modelo mental
El Modelo conceptual determina la Imagen del sistema
Metro de Londres
Sólo líneas:
• Horizontales
• Verticales
• A 45 grados
Líneas a escala geográfica
Mapa de Harry Beck(1931)
![Page 6: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/6.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 6
¿Por qué es importante el Modelo mental?
La usabilidad se basa en la coincidencia entre:
el Modelo mental del usuario
el Modelo conceptual del diseñador
Modelo mental
![Page 7: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/7.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 7
Modelo mental
Diseñar consiste en:
1. Comprender el Modelo mental del usuario
2. Diseñar un Modelo conceptual que encaje en el Modelo mental del usuario
Si no coinciden, el sistema será difícil de:
usar
aprender
![Page 8: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/8.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 8
Modelo mental
¿Cómo debemodelar un diseñador?
![Page 9: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/9.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 9
Modelo mental
¿Qué modelo mental se ha implementado: el del usuario o
el del diseñador?
Sentencia judicial
Cabina de un avión
Código identificativo de las carreteras
![Page 10: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/10.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 10
Modelo conceptual del diseñador
Imagen del sistema
Modelo mental del usuario
Modelo mental
Problemas al confeccionar un Modelo mental
Fragmentado Incorrecto
![Page 11: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/11.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 11
Modelo mental
Cómo solucionar los desajustes del Modelo mental
Ajustar el Modelo conceptual al Modelo mental del usuario
Mejorar el Modelo mental del usuario
![Page 12: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/12.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 12
¿Cómo construye el usuario su Modelo mental?
A. Partes visibles del dispositivo
B. Experiencias con sistemas y situaciones similares
C. Prestaciones (affordances): posibilidades de acción percibidas por el usuario
D. Limitaciones: todo aquello que el sistema no le deja hacer al usuario
E. Mapeo: la relación entre las acciones del usuario y los resultados que obtiene
![Page 13: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/13.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 13
¿Cómo construye el usuario su Modelo mental?
A. Partes visibles del sistema
¿Observáis algoespecial en esta
imagen?
![Page 14: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/14.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 14
¿Cómo construye el usuario su Modelo mental?
B. Experiencias con sistemas y situaciones similares
![Page 15: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/15.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 15
¿Cómo construye el usuario su Modelo mental?
Qué nos invita a hacer el objeto con él:
Su función
Cómo usarlo
Está condicionado por:
Relación entre forma y función
Contexto
Punto de vista del usuario
C. Prestaciones (affordances)
![Page 16: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/16.jpg)
16
¿Cómo construye el usuario su Modelo mental?
Ejemplo de prestaciones
Estoy trabajando
Estoy disponible
Puedes“clicar”
Puedes moverlo
Modelo mental e Imagen del sistema, por Josep M. Junoy
![Page 17: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/17.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 17
¿Cómo construye el usuario su Modelo mental?
D. Limitaciones
Toda acción que el sistema impide realizar
Física: tamaño, forma, …
Semántica
Cultural
Lógica
Tiq
uetde p
árq
uin
g
OK Incorrecto
![Page 18: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/18.jpg)
18
¿Cómo construye el usuario su Modelo mental?
Ejemplo de buen diseño a base de limitaciones
Física
Semántica
Cultural
Lógica:• usar todas la piezas• sin huecos• …
Modelo mental e Imagen del sistema, por Josep M. Junoy
![Page 19: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/19.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 19
¿Cómo construye el usuario su Modelo mental?
E. Mapeo
La relación entre:
el control y su función
la acción y su resultado
OK
Incorrecto
![Page 20: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/20.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 20
¿Cómo construye el usuario su Modelo mental?
Condiciones de un buen Modelo mental
Mostrar cómo funciona el sistema
Coherencia entre las acciones que se pueden realizar y los resultados obtenidos
Mostrar el estado actual del sistema
![Page 21: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/21.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 21
Conclusiones
Los modelos mentales son claves en el diseño de un sistema:
Pantallas
Mensajes de error
Manuales
etc.
El diseñador tiene que ponerse en el lugar del usuario
Test de usuario en voz alta
![Page 22: Presentación de PowerPointhci-collab.com/wp-content/uploads/2018/12/Webinar_JosepMaJunoy… · El Modelo conceptual determina la Imagen del sistema Metro de Londres Sólo líneas:](https://reader033.vdocumento.com/reader033/viewer/2022042415/5f307d707d49b247157a6074/html5/thumbnails/22.jpg)
Modelo mental e Imagen del sistema, por Josep M. Junoy 22
Gracias