Está en la página 1de 45

HCI: FUNDAMENTOS

Objetivos

Entender que en HCI


Explicar la diferencia entre un buen y mal diseo
Entender que es Diseo Interactivo
Introducir los conceptos de usabilidad
Describir que est involucrado en el proceso de
diseos interactivos
Ejemplos de productos Interactivos

Referencias

Sharp, H., Rogers, Y., & Preece, J. (2007).


Interaction Design: beyond human-computer
interaction.
Chapter

1: What is Interaction design?

Stone, D., (2005)User Interface Design and


Evaluation.
Chapter

1: Introducing User Interface Design

QU ES HCI?

Qu expresiones equivalentes conocen en


espaol?

Qu expresiones equivalentes conocen en


espaol?
Interfaz

hombre mquina
Interaccin usuario computador
Factores humanos en computacin

DEFINICIN HCI

Sub-rea
de la Ciencia de la Computacin
preocupada
con el diseo, evaluacin,
implementacin
de
sistemas
computacionales
interactivos para uso humano y con el estudio de los
principales fenmenos que abarcan esas etapas.
ACM-SIGCHI
(Association for Computing Machinery Special
Interest Group on Computer Human Interaction)

MOTIVACION

Cuntos productos interactivos usan cada


da?

Smart

Cuntos productos interactivos usan cada


da?

iTV

Auto Mobile

3G Mobile Phones

iPod

Cooking Arrangement

Smart

Motivacin

Las nuevas tecnologas dan poder a las personas que


las usan.
El desempeo del usuario con la tecnologa es un
rea de creciente investigacin.
Qu logra esta tecnologa?
Diagnsticos mdicos.
Nios expanden su aprendizaje.
Pilotos que tengan ms seguridad.

Algunos cambios son perturbadores y desastrosos.

Videos

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

Para qu estudiar HCI?

Existen muchos sistemas que no presentan buena


usabilidad y por eso no son utilizables.
Pero la culpa no es del usuario
Y

s de quien construy el sistema

Por ejemplo:

Ejemplo: Media Cubes


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

Buen y Mal Diseo

Preocupacin en desarrollar productos interactivos


que sean usables:
Fcil

de aprender
Efectivo de usar
Satisfaccin del usuario

Buen y Mal Diseo

Un buen diseo estimula una interaccin fcil,


natural, atractiva entre un usuario y un sistema,
permitiendo que los usuarios lleven a cabo una
tarea.

Qu Disear?

Productos interactivos usables.


Considerar:
Quines

los usarn?
Cmo ellos sern usados?
Dnde ellos sern usados?

(usuarios)
(actividades)
(lugar).

Necesidad:
Optimizar

la interaccin que el usuario tiene con el

producto:
Actividades

y necesidades.

Qu se quiere lograr?

Qu se quiere lograr?
Mejorar

las relaciones entre el objeto diseado y su

uso.
Cmo

los sistemas son seleccionados y adaptados?


Cmo los usuarios mejoran la rutina del sistema?
Cmo el sistema se adaptan al usuario?
Cmo los usuarios se adaptan al sistema ?

Actividad 1

Cmo realiza una llamada telefnica usando:


Un

telfono pblico
Un telfono celular?

Definir:
Qu

tipo de usuario?
Qu tipo de actividad
Contexto?

Actividad 1

Cmo realiza una llamada telefnica usando:


Un

telfono pblico
Un telfono celular?

Cmo estos dispositivos han sido diseados para


tomar en cuenta:
El

tipo de usuario
El tipo de actividad que soporta
El contexto de uso?

QU ES DISEO INTERACTIVO?

Diseo Interactivo

Disear productos interactivos para apoyar a las


personas en el desempeo de su vida cotidiana y
trabajo

Crear experiencias de usuario (UX).

Areas de Estudio

Objetivos del Diseo Interactivo

Desarrollar productos usables:


Usabilidad

significa fcil de aprender, efectivo de usar


y proveer de satisfaccin.
Envuelve

al usuario en el proceso de diseo.

Calidad de la experiencia del usuario (agradables,


divertidos, entretenidos, motivadores, emocionantes)

Usabilidad vs. Experiencia de Usuario

Proceso de Diseo Interactivo


27
Definicin del
problema

Observacin de
sistemas existentes

Anlisis de Tareas

Guias de Usabilidad
& heuristicas

Reunin de
requerimientos

Restricciones
Tcnicas & legal etc.

Design and
storyboarding

Prototype
implementation

HTA

Declaracin de
requerimientos
- Funcionales
- No funcionales

Storyboard

Prototype

Evaluation

Transcript &
evaluation report

Installation

Final
implementation

LA INTERFAZ DEL USUARIO ES


IMPORTANTE

La interfaz del usuario fuertemente afecta la


percepcin del software
Software

usable vende mejor


Sitios web no usables son abandonados.

La percepcin es algunas veces superficial


Los

usuarios se culpan por los fallos en UI.


Las personas que toman la decisin de compra no
siempre son los usuarios finales.

USER INTERFACE (UI) HALL OF SHAME

USER INTERFACE HALL OF SHAME

REDISEO DEL EJEMPLO

LA INTERFAZ DEL USUARIO ES


IMPORTANTE

La interfaz del usuario fuertemente afecta la


percepcin del software
Software

usable vende mejor


Sitios web no usables son abandonados.

La percepcin es algunas veces superficial


Los

usuarios se culpan por los fallos en UI.


Las personas que toman la decisin de compra no
siempre son los usuarios finales.

Ejemplos
Visualizacin de msica
Interfaz (buena mala)

TuneGlue (Artistas)

Dimvision MusicMap (albums)

TuneGlue

Gnoosic Music Map (Artistas)

Liveplasma (Artistas-recomendaciones)

Musicmesh (album)

JSViz

Amaznode

Touchgraph

Referencia: Visualizacin de msica

http://rocketsurgeon.squarespace.com/articles/200
7/6/11/music-discovery-visualization-tools.html
http://musicmachinery.com/2009/10/22/usingvisualizations-for-music-discovery-2/

ASIGNACION 1

Ejemplo de un buen y mal diseo de una app


mobile
Elige una app:
Que

pienses que tiene un buen diseo y explica la


razn porqu crees que es un buen diseo.
Que pienses que tiene un mal diseo y explica la razn
porqu crees que es un mal diseo.

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

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/whenpoor-usability-services-the-user-experience/
http://www.mattiasandersson.com/