HCI01- FUNDAMENTOS

8/15/2019 HCI01- FUNDAMENTOS

1/45

HCI: FUNDAMENTOS


2/45

Objetivos

Entender que en HCI

Explicar la diferencia entre un buen y mal diseño

Entender que es Diseño Interactivo

Introducir los conceptos de usabilidad

Describir que está involucrado en el proceso dediseños interactivos

Ejemplos de productos Interactivos


3/45


4/45

¿QUÉ ES HCI?


5/45

¿Qué expresiones equivalentes conocen enespañol?


6/45

¿Qué expresiones equivalentes conocen enespañol?

Interfaz hombre – máquina

Interacción usuario – computador

Factores humanos en computación


7/45

DEFINICIÓN HCI

Sub-área de la Ciencia de la Computaciónpreocupada con el diseño, evaluación,implementación de sistemas computacionalesinteractivos para uso humano y con el estudio de losprincipales fenómenos que abarcan esas etapas.

ACM-SIGCHI

(Association for Computing Machinery – SpecialInterest Group on Computer Human Interaction)


8/45

MOTIVACION


9/45

¿Cuántos productos interactivos usan cadadía?

Smart


10/45

¿Cuántos productos interactivos usan cadadía?

3G Mobile Phones

iTV

iPod

Smart

Auto Mobile

Cooking Arrangement

http://www.lexicle.com/smartfridge/images/photo1large.jpghttp://www.sonystyle.com/sonystyle/4784/5626/5627/6088.homeland.html


11/45

Motivación

Las nuevas tecnologías dan poder a las personas quelas usan.

El desempeño del usuario con la tecnología es un

área de creciente investigación. ¿Qué logra esta tecnología? Diagnósticos médicos.

Niños expanden su aprendizaje.

Pilotos que tengan más seguridad. Algunos cambios son perturbadores y desastrosos.


12/45

Film: Miniroty Report http://www.youtube.com/watch?v=NwVBzx0LMNQ

Iron Man 2

https://www.youtube.com/watch?v=-KPhqy7ZwHU

https://www.youtube.com/watch?v=YAXsZphpiu8

Videos

http://www.youtube.com/watch?v=NwVBzx0LMNQhttp://www.youtube.com/watch?v=NwVBzx0LMNQ


13/45

¿Para qué estudiar HCI?

Existen muchos sistemas que no presentan buenausabilidad y por eso no son utilizables.

Pero la culpa no es del usuario Y sí de quien construyó el sistema


14/45

Por ejemplo:


15/45

Ejemplo: Media Cubeshttps://www.youtube.com/watch?v=j5Zs9F3wyUM


16/45

Buen y Mal Diseño

Preocupación en desarrollar productos interactivosque sean usables: Fácil de aprender

Efectivo de usar Satisfacción del usuario


17/45

Buen y Mal Diseño

Un buen diseño estimula una interacción fácil,natural, atractiva entre un usuario y un sistema,permitiendo que los usuarios lleven a cabo una

tarea.


18/45

¿Qué Diseñar?

Productos interactivos usables.

Considerar: ¿Quiénes los usarán? (usuarios)

¿Cómo ellos serán usados? (actividades) ¿Dónde ellos serán usados? (lugar).

Necesidad:Optimizar la interacción que el usuario tiene con el

producto: Actividades y necesidades.


19/45

¿Qué se quiere lograr?

¿Qué se quiere lograr?Mejorar las relaciones entre el objeto diseñado y su

uso.

¿Cómo los sistemas son seleccionados y adaptados? ¿Cómo los usuarios mejoran la rutina del sistema?

¿Cómo el sistema se adaptan al usuario?

¿Cómo los usuarios se adaptan al sistema ?


20/45

Actividad 1

¿Cómo realiza una llamada telefónica usando: Un teléfono público

Un teléfono celular?

Definir:Qué tipo de usuario?

Qué tipo de actividad

Contexto?


21/45

Actividad 1

¿Cómo realiza una llamada telefónica usando: Un teléfono público

Un teléfono celular?

¿Cómo estos dispositivos han sido diseñados paratomar en cuenta: El tipo de usuario

El tipo de actividad que soporta

El contexto de uso?


22/45

¿QUÉ ES DISEÑO INTERACTIVO?


23/45

Diseño Interactivo

Diseñar productos interactivos para apoyar a laspersonas en el desempeño de su vida cotidiana ytrabajo

Crear experiencias de usuario (UX).


24/45

Areas de Estudio


25/45

Objetivos del Diseño Interactivo

Desarrollar productos usables:

Usabilidad significa fácil de aprender, efectivo de usar

y proveer de satisfacción. Envuelve al usuario en el proceso de diseño.

Calidad de la experiencia del usuario (agradables,divertidos, entretenidos, motivadores, emocionantes)


26/45

Usabilidad vs. Experiencia de Usuario


27/45

Proceso de Diseño Interactivo27

Análisis de Tareas

Reunión derequerimientos

Design andstoryboarding

Prototypeimplementation

Evaluation

Installation

Observación desistemas existentes

Guias de Usabilidad& heuristicas

Definición delproblema

RestriccionesTécnicas & legal etc.

HTA

Declaración de

requerimientos

- Funcionales- No funcionales

Storyboard

Prototype

Transcript &

evaluation report

Final

implementation


28/45

LA INTERFAZ DEL USUARIO ESIMPORTANTE

La interfaz del usuario fuertemente afecta lapercepción del software Software usable vende mejor

Sitios web no usables son abandonados.

La percepción es algunas veces superficial

Los usuarios se culpan por los fallos en UI. Las personas que toman la decisión de compra no

siempre son los usuarios finales.


29/45

USER INTERFACE (UI) HALL OF SHAME


30/45

USER INTERFACE HALL OF SHAME


31/45

REDISEÑO DEL EJEMPLO


32/45

LA INTERFAZ DEL USUARIO ESIMPORTANTE

La interfaz del usuario fuertemente afecta lapercepción del software Software usable vende mejor

Sitios web no usables son abandonados.

La percepción es algunas veces superficial

Los usuarios se culpan por los fallos en UI. Las personas que toman la decisión de compra no

siempre son los usuarios finales.


33/45

T Gl (A i )

http://audiomap.tuneglue.net/http://audiomap.tuneglue.net/


34/45

TuneGlue (Artistas)

Di i i M i M ( lb )

http://audiomap.tuneglue.net/http://audiomap.tuneglue.net/http://www.dimvision.com/musicmap/http://www.dimvision.com/musicmap/http://www.dimvision.com/musicmap/http://www.dimvision.com/musicmap/


35/45

Dimvision MusicMap (albums)

TuneGlue

TuneGlue

G i M i M (A i )

http://www.dimvision.com/musicmap/http://audiomap.tuneglue.net/http://audiomap.tuneglue.net/http://audiomap.tuneglue.net/http://audiomap.tuneglue.net/http://www.dimvision.com/musicmap/http://www.dimvision.com/musicmap/http://www.dimvision.com/musicmap/http://www.music-map.com/http://www.music-map.com/http://www.music-map.com/http://www.music-map.com/http://www.music-map.com/http://www.music-map.com/


36/45

Gnoosic Music Map (Artistas)

Li l )

http://www.music-map.com/http://www.music-map.com/http://www.music-map.com/http://www.music-map.com/http://www.music-map.com/http://www.music-map.com/http://www.musicplasma.com/http://www.musicplasma.com/


37/45

Liveplasma (Artistas-recomendaciones)

M i h ( lb )

http://www.musicplasma.com/http://www.musicplasma.com/http://www.musicmesh.net/http://www.musicmesh.net/


38/45

Musicmesh (album)

JSVi

http://www.musicmesh.net/http://www.musicmesh.net/http://www.kylescholz.com/projects/speaking/tae2006/music/http://www.kylescholz.com/projects/speaking/tae2006/music/


39/45

JSViz

A d

http://www.kylescholz.com/projects/speaking/tae2006/music/http://www.kylescholz.com/projects/speaking/tae2006/music/http://amaznode.fladdict.net/http://amaznode.fladdict.net/


40/45

Amaznode

T h h

http://amaznode.fladdict.net/http://amaznode.fladdict.net/http://www.touchgraph.com/TGAmazonBrowser.htmlhttp://www.touchgraph.com/TGAmazonBrowser.html


41/45

Touchgraph

http://www.touchgraph.com/TGAmazonBrowser.htmlhttp://www.touchgraph.com/TGAmazonBrowser.html


42/45

Referencia: Visualización de música

http://rocketsurgeon.squarespace.com/articles/2007/6/11/music-discovery-visualization-tools.html

http://musicmachinery.com/2009/10/22/using-

visualizations-for-music-discovery-2/

http://rocketsurgeon.squarespace.com/articles/2007/6/11/music-discovery-visualization-tools.htmlhttp://rocketsurgeon.squarespace.com/articles/2007/6/11/music-discovery-visualization-tools.htmlhttp://rocketsurgeon.squarespace.com/articles/2007/6/11/music-discovery-visualization-tools.htmlhttp://rocketsurgeon.squarespace.com/articles/2007/6/11/music-discovery-visualization-tools.htmlhttp://rocketsurgeon.squarespace.com/articles/2007/6/11/music-discovery-visualization-tools.htmlhttp://rocketsurgeon.squarespace.com/articles/2007/6/11/music-discovery-visualization-tools.htmlhttp://rocketsurgeon.squarespace.com/articles/2007/6/11/music-discovery-visualization-tools.htmlhttp://rocketsurgeon.squarespace.com/articles/2007/6/11/music-discovery-visualization-tools.htmlhttp://rocketsurgeon.squarespace.com/articles/2007/6/11/music-discovery-visualization-tools.htmlhttp://rocketsurgeon.squarespace.com/articles/2007/6/11/music-discovery-visualization-tools.html


43/45

ASIGNACION 1

Ejemplo de un buen y mal diseño de una “appmobile”

Elige una app:

Que pienses que tiene un buen diseño y explica larazón porqué crees que es un buen diseño.

Que pienses que tiene un mal diseño y explica la razónporqué crees que es un mal diseño.


44/45

ASIGNACION 2: Usabilidad UX

Qué Usabilidad y Experiencia de Usuario – ventajas, desventajas, similitudes, diferencias.

Elige una actividad en la que se propongan varias

interfaces: Definir el tipo de usuario

El contexto

Las tareas (actividades) que soporta Establecer si cumple con los criterios de usabilidad y

experiencia de usuario


45/45

BIBLIOGRAFIA

Interaction Design: beyond human-computer interaction, 2nd Edition, by Preece, Sharp & Rogers, John Wiley & Sons,2007.

Human-Computer Interaction, Dix, A, Finlay, J., Abowd, G.,Beale, R., Second Edition, Prentice-Hall Europe, 1998.

Ejemplos interaccion http://www.officelabs.com/Pages/Envisioning.aspx Cubos magicos http://www.interactiondesignblog.com/2008/06/when-

poor-usability-services-the-user-experience/ http://www.mattiasandersson.com/
http://www.wiley.com/WileyCDA/WileyTitle/productCd-0470018666.htmlhttp://www.wiley.com/WileyCDA/WileyTitle/productCd-0470018666.htmlhttp://www.officelabs.com/Pages/Envisioning.aspxhttp://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.mattiasandersson.com/http://www.mattiasandersson.com/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.interactiondesignblog.com/2008/06/when-poor-usability-services-the-user-experience/http://www.officelabs.com/Pages/Envisioning.aspxhttp://www.wiley.com/WileyCDA/WileyTitle/productCd-0470018666.htmlhttp://www.wiley.com/WileyCDA/WileyTitle/productCd-0470018666.htmlhttp://www.wiley.com/WileyCDA/WileyTitle/productCd-0470018666.htmlhttp://www.wiley.com/WileyCDA/WileyTitle/productCd-0470018666.htmlhttp://www.wiley.com/WileyCDA/WileyTitle/productCd-0470018666.htmlhttp://www.wiley.com/WileyCDA/WileyTitle/productCd-0470018666.htmlhttp://www.wiley.com/WileyCDA/WileyTitle/productCd-0470018666.htmlhttp://www.wiley.com/WileyCDA/WileyTitle/productCd-0470018666.html

HCI01- FUNDAMENTOS

Documents

Transcript of HCI01- FUNDAMENTOS