18/08/2010

1

Diseño y Evaluación de Sistemas InteractivosCOM-14112-001

Introducción al Curso, IHC, y DSI12 de Agosto de 2010

Dr. Víctor M. González y Gonzálezvictor.gonzalez@itam.mx

Agenda

1. Proyecto y Organización de equipos 2. HCI Bloopers

18/08/2010

2

Proyecto del Curso

• El propósito del proyecto de diseño y evaluación es lograr que los alumnos adquieran experiencia de primera mano en cuanto a lo que significa diseñar y evaluar sistemas interactivos

• Dos opciones:– A) Competencia de Estudiantes – MexIHC 2010– B) Sistemas de Visualización para Ahorro de Energía

• Equipos de 4 estudiantes• Reporte y presentación

Proyecto (plan A)

• Es un concurso donde lo que se intenta es que los estudiantes presenten un diseño conceptual (prototipo) para resolver un problema con impacto social.

• Se manda un documento (resumen extendido) a más tardar el 18 de Septiembre (notifican 15 Oct).

• Si los equipos no son seleccionados continuarán con el proyecto, de su fase conceptual (prototipo) a sus faces de implementación y evaluación.

• De ser seleccionados el énfasis en la evaluación puede ser menor para dar tiempo a preparar la presentación en Mty a principios de Noviembre.

• Requiere trabajo intensivo en los próximos 30 días.

18/08/2010

3

El sistema Eco-Eye• El sistema muestra el uso en tiempo real

de energía eléctrica en Kilowatts-hora (KWh), y presionando un botón, presenta información del costo proyectado para el día, la semana, el mes o el año.

• Eco-eye proporciona también información de la emisiones de CO2 equivalente para generar ese energía eléctrica y permite al usuario conservar información histórica de uso y costos.

• La unidades son inalámbricas. Usan un sensor que es colocado sobre la línea de corriente en el suministro eléctrico y que se conecta a una unidad de transmisión que se comunica con la pantalla.

Proyecto(plan B)

Proyecto (plan B)

• Es un proyecto que comienza con una implementación real del sistema en una casa habitación.

• Requiere el reclutamiento y participación de una familia que use el aparato por al menos un par de semanas (iniciando la semana del 23 de Agosto).

• El proyecto se centra en el sistema basado en USB que permite recibir información en la computadora. Se cuenta con el apoyo de la compañía para mejorar un sistema que ellos actualmente tienen.

• El proyecto enfatizará el diseño de un sistema interactivo y de visualización y su evaluación con un grupo de usuarios (familias).

18/08/2010

4

Plan de trabajo general para ambos proyectos

1. Investigación de campo: entrevistas, uso de sistema2. Investigación bibliográfica: definir el estado del arte3. Diseño conceptual: interacción e interfaces4. Costeo e y plan implementación 5. Prototipo 6. Evaluación7. Análisis de Resultados

Presentaciones – Pioneros de HCI

Randy PauschPausch recibió su título de grado en Ciencias de la Computación en la Universidad Brown y su PhD en Ciencias de la Computación por la Universidad Carnegie Mellon. Fue cofundador, junto con Don Marinelli, de CMU's Entertainment Technology Center (ETC) y comenzó el curso de Construcción de Mundos Virtuales en el CMU y lo enseñó durante 10 años. Pausch fue profesor en el Departamento Ciencias de la Computación en la Universidad de Virginia desde 1988 hasta 1997. Trabajó para Walt Disney Imagineering y para Electronic Arts (EA). Pausch fue el autor o coautor de 5 libros y 70 artículos, y el fundador del proyecto de software Alice.

– The Last Lecture

18/08/2010

5

What is HCI?• HCI is Human-Computer Interaction

– a discipline concerned with • the design• the evaluation • the implementation

– of interactive computing systems for human use and with

– the study of major phenomena surrounding them

ACM SIGCHI curricula

Why do we study HCI? • We want to design interactive systems that are:

– enjoyable to use, that do useful things and that enhance the lives of the people that use them.

– accessible, usable and engaging. • In the past, ‘normal’ users cannot use

interactive systems because designers are:– Programmers who use computers every day. – Mainly young males.– Expert computer gamers.

18/08/2010

6

HCI/Usability • Understanding digital products• Cognitive Psychology as a foundation for HCI

– Human Information Processing Model– Attention, Memory and Visual Perception

• User-Centered Design– User participation – Requirements, Prototyping, Conceptual Design, – Evaluation as a central element

More than Usable The term “usable” means more than just easy to learn. Ease of learning is an important component of usability, but it is the least important of three components. To be usable, a product also has to be quick to use and relatively error-free. Most importantly, it must do what the user wants.

Usability refers to three different components: the product does what you need it to do, it does that quickly and safely, and, last, it is easy to learn. Violins are hard to learn, but they have survived for hundreds of years with little change because they supply the other two more important components of usability.

18/08/2010

7

HCI Bloopers

• GUI Bloopers 2.0 (2007): Jeff Johnson, SecondEdition. Morgan Kaufmann

• “Bloopers” are mistakes that software developers frequently make when designing graphical user interfaces– Not just specific examples but mistakes that

developers make over and over– Goal is to give examples of mistakes AND help

designers and developers learn to produce better GUIs

Developer watching video of usability test

18/08/2010

8

HCI Bloopers

• Blooper 1: Confusing checkboxes and radio buttons

HCI Bloopers

• Blooper 1: Confusing checkboxes and radio buttons– Variation A: Single Radio Button: a lone radio button—a

radio button misused as a checkbox.

18/08/2010

9

HCI Bloopers

• Blooper 1: Confusing checkboxes and radio buttons– Variation A: Single Radio Button: a lone radio button—a

radio button misused as a checkbox.– Sometimes The number of options in the choice varies

depending on circumstances. The software does not treat the “one option” case as special.

– Online travel agency Travelocity.com exhibits this reason. If customers book a flight too near the departure date to allow confirmation to be mailed to them, Travelocity offers only one ticketing option, electronic, but still presents it as a “choice” of one option

HCI Bloopers

• Blooper 1: Confusing checkboxes and radio buttons– Variation B: Checkboxes as radio buttons

18/08/2010

10

Avoiding Blooper 1

• Use radio buttons– When only one option may be selected– In sets of at least two– Ensure enough space is available to see all options– The number of options is fixed and small (2-8)

• Consider dropdown or scrolling menus which requires less space

• Checkboxes represent ON/OFF conditions that are independent of each other

HCI Bloopers

• Blooper 5: Too Many Tabs

• Intended to save space but too many uses more space – usually doesn’t scale beyond a handful

• Never use dancing tabs; change position based upon which tab is selected– Unavoidable with multi-rows of tabs

HCI Bloopers

18/08/2010

11

• Blooper 5: Too Many Tabs

• Windows Media Player Dancing Tabs

HCI Bloopers

18/08/2010

12

Multi-Row Tabs

Solutions: Widen panel, make tabs narrower, or use another controlinstead of tabs

HCI Bloopers

Avoiding Blooper 5: NetScanTools. Version 8 (2003)

HCI Bloopers

18/08/2010

13

Avoiding Blooper 5: NetScanTools. Version 10 (2006)

HCI Bloopers

HCI Bloopers

• Blooper 11: Poor Defaults

18/08/2010

14

HCI Bloopers

• Blooper 11: Poor Defaults

HCI Bloopers

• Blooper 11: Poor Defaults: MS Office Mac OS X

18/08/2010

15

HCI Bloopers

• Avoiding Blooper 11:Poor Defaults1. Common sense2. Experience and site data3. Arbitrary choice

Dilbert on GUI Bloopers

DILBERT © Scott Adams/Dist. by United Feature Syndicate, Inc.

18/08/2010

16

Resumen

1. Próxima semana : a) “metidas de pata” – GUI Bloopersb) Percepción y Estructura Visual

Dudas: victor.gonzalez@itam.mx