Curso: Interacción Humano-Computadora

Descripción y objetivos

Al finalizar este curso el alumno será capaz de: desarrollar sistemas interactivos siguiendo las etapas de diseño de interacción y evaluar la usabilidad de la interacción humano-computadora a través de la recopilación de datos y del análisis de información de los requerimientos.

Este curso implica el estudio de conceptos, nociones y modelos de interactividad entre usuarios y objetos técnicos, tanto físicos como digitales, tanto datos como medios. La intención es adquirir conocimientos para el análisis y el desarrollo de interfaces gráficas eficientes e innovadoras, adecuadas para cumplir sus objetivos planteados en la etapa de planeación.

Temario general

HCI: introducción, repaso histórico, conceptos, nociones y epistemología
Sistemas de información y representación de la información
Procesos y modelos del diseño de la interactividad
Evaluación de productos interactivos y tendencias a futuro

HW + SW

Este curso incluye sesiones prácticas con software y hardware: computadoras, teléfonos móviles, consolas de videojuegos, Adobe PhotoShop, Adobe Illustrator, Adobe Flash, Apple Interface Builder y lenguajes Web: HTML, CSS, JavaScript, ActionScript, XML, SMIL, SVG, PHP, MySQL.

Evaluación del curso

Proyecto 1: 10%
Proyecto 2: 10%
Proyecto 3: 10%
Quizes parciales: 10%
Tareas: 20%
Realización y exhibición de proyecto final: 30%
Documento escrito del proyecto: 10%

Actividades del curso [tags]

Proyecto Tarea Quiz Slides Práctica Lectura Extra

Proyecto final

El proyecto final de la materia consiste en la realización y exhibición de un producto interactivo. Este producto debe hacer uso complementario de dos ambientes: online y offline. Igualmente, debe estar soportado por un documento escrito en donde se detalla: objetivos, arquitectura de la información, diseño gráfico, diseño de la GUI, diseño de la interactividad. Este proyecto podrá ser desarrollado por equipos de máximo 3 personas. La exhibición será pública, en algún lugar dentro o fuera del Campus y será coordinada por los propios alumnos de la materia.

Bibliografía de referencia [por orden alfabético]

De Souza, Clarisse (2005). The Semiotic Engineering of Human-Computer Interaction. Cambridge, MA: MIT Press.
Fuller, Matthew (ed) (2008). Software Studies: a lexicon. Cambridge, MA: MIT Press.
Manovich, Lev (2008). Software Takes Command. San Diego: SSI.
Nielsen, Jakob (1993). Usability Engineering. San Diego, CA: Academic Press & Morgan Kaufmann.
Norman, Donald (1988). The Psychology of Everyday Things. New York: Basic Books.
Raskin, Jef (2000). The Humane Interface: New Directions for Designing Interactive Systems. New York: ACM Press & Addison-Wesley.
Sharp, Helen, Yvonne Rogers, & Jenny Preece (2007). Interaction Design: Beyond Human-Computer Interaction. New York: Wiley.
Winograd, Terry & Fernando Flores (1987). Understanding Computers and Cognition: A New Foundation for Design. New York: Addison-Wesley.
Winograd, Terry (1996). Bringing Design to Software. New York: ACM Press.

Recursos digitales [por orden alfabético]

Nota: excepto si se indica lo contrario, los artículos de investigación pueden ser descargados desde la Biblioteca Digital del ITESM, en la base de datos del ACM.

HiperWiki, portal wiki de soporte a la materia.
Shneiderman, Ben (1997). "Direct Manipulation for Comprehensible, Predictable and Controllable User Interfaces" in Proceedings of the 2nd International Conference on Intelligent user interfaces. New York: ACM Press. pp. 33 - 39.
Reyes, Everardo (2009). "Hypermedia as Media" in Proceedings of the 20th International Conference on Hypertext and Hypermedia. New York: ACM Press.

Plan de sesiones

Sesión	Tema	Actividades + materiales
1 [Ago. 13]	Introducción al curso, contexto, repaso histórico, nociones, conceptos, personajes, áreas	Slides Presentación 01: HTML \| PPT \| KEY Práctica Análisis de casos prominentes + discusión Lectura Raskin, Jeff. "Definition of a Humane Interface". Extras HCI en Wikipedia Tarea con base en la primera sesión y la lectura de Raskin, tomar fotos de casos de poor y good design [1 sw y 1 device]. Enviar antes de la próxima clase vía Web [no e-mail] [JPG + breve explicación]. Estos casos serán material de presentación y discusión de la clase siguiente.
2 [Ago. 20]	Generaciones de GUI Elementos de la GUI Ideología de uso y función	Slides Presentación 02: HTML \| PPT \| KEY Práctica Terminal Práctica Interface Builder Lectura Apple Human Interface Guidelines Lectura Kay, Alan & Adele Goldberg (1977). "Personal Dynamic Media" in Computer 10(30). Extra Guidebook, portal dedicado a la GUI. Extra asiste a la ponencia visual de Romain Greco: "Creación visual y los Publívoros" teniendo en mente las siguientes cuestiones: ¿qué habría que tomar en cuenta para diseñar sistemas interactivos para la publicidad? y ¿es pertinente la información y diseño del sitio Web de los Publívoros con sus usuarios finales o más bien segmenta su público meta?
3 [Ago. 27]	Software y diseño Introducción a los “software studies” La política del software "Affective interfaces" Tendencias de productos interactivos	Slides Presentación 03: HTML \| PPT Lectura Winograd, Terry & Fernando Flores. Understanding Computers and Cognition. pp. 3 - 7. Podcast Norman, Donald (2004). "Emotional Design" in O'Reilly Media Emerging Technology Conference. podcast [47 min, 10.8 Mb]
4 [Sep. 3]	Introducción a los hipertextos: sistemas y modelos	Slides Presentación 04: HTML \| PPT Práctica HTML: creación de un pequeño hipertexto monolítico. Tarea diseña 3 formas diferentes de navegar tu hipertexto. Enviar antes de la próxima clase vía Web [no e-mail] en formato de imagen digital: JPG, PNG, etc. Lectura Nelson, Ted (2007). "Hypertext the Way It Used To Be". Extra Bush, Vannevar (1945). "As We May Think". Quiz Quiz del Parcial 01 vía SurveyMonkey Hora límite: 15:30 hrs. Proyecto Entrega de Proyecto 01. Hora límite: 15:30 hrs.
5 [Sep. 10]	Representación y diseño de la información	Práctica HTML: práctica con div, span, tablas: Menú \| Capas \| Tabla The Matrix Práctica CSS: práctica con estilos border, margin, padding, float, position, z-index, opacity: ver archivo CSS Referencia caracteres especiales en HTML
6 [Sep. 17]	Manejo de la información	Práctica HTML: práctica con formularios, iframe, tipos de ligas: Formulario \| iFrame \| Página diseñada con tablas Práctica JavaScript: sintaxis, elementos generales, práctica con funciones document: `alert()`, `prompt()`, `confirm()` y window: `open()`, `close()`, `resizeBy()`: Página que usa Alert \| Página que usa Window
7 [Sep. 24]	Diseño gráfico para HCI	Slides Presentación 07: HTML \| PPT \| KEY Extra Generador de colores Práctica JavaScript: Prácticas con objeto `Document`: - control de estilos: `style.bgColor`, `style.fontColor`, `style.fontSize`, `style.display`, `style.visibility` - eventos del mouse: `onclick, onmouseover, onmouseout` - cambiar estilo + `prompt()` + `confirm()` - cambiar estilo `zIndex` con 2 parámetros - archivos de la clase: jsbgcolor.html \| jsDisplay.html Tarea Hacer un campo de texto y un botón. Si el usuario oprime el botón y no hay texto, aparece un mensaje rojo que indica el error y el campo de texto se marca en amarillo. Cuando el usuario inserta texto y vuelve a dar click, el campo se pone blanco y el mensaje de error desaparece. Solución tarea: inputColor.html
8 [Oct. 1]	Proceso del diseño de la interactividad	Proyecto Entrega de avance de proyecto: 1. Descripción y nombre del proyecto; 2. Diseño de la interfaz; 3. Tabla de colores y tipografía; 4. Arquitectura de la información. Práctica JavaScript: - Animación de texto, colores, estilo, posición: uso de `window.setInterval`, `window.clearInterval`, funciones imbricadas, variables globales - Caso de galería de imágenes - jQuery: efectos visuales y ajax simple - archivos de la clase: jsNumeros.html \| jsColores.html \| jsGaleria.html \| jqEfectos.html Tarea Crea una página con tres botones al centro, estos botones son elementos div. Cada div refiere a una galería de imágenes diferente, por ejemplo: discos, libros y dvd. Cuando el usuario oprime click en algún botón, se abre [con efecto animado] un div sobrepuesto a la mitad de la pantalla, de color negro y con transparencia. Este div muestra la galería con dos modos de navegación: 1) mediante flechas hacia la izquierda o a la derecha; 2) mediante una función automática que anima las imágenes. Publica tu tarea vía FTP y mándame el URL antes de la próxima clase para que se considere en los puntos extra finales.
9 [Oct. 8]	Estructura de la información	Slides Presentación: HTML \| PPT \| KEY Práctica ActionScript 2.0: - Frame events - Mouse events - Clip events - Visibilidad - Texto dinámico - archivos de la clase: asControl.fla \| asControl.swf \| simpsons.jpg Tarea Crear el siguiente ejemplo en tarea1.swf Extras • Actionscript Dictionary • Flash Documentation
10 [Oct. 15]	Cultural Analytics Profesor invitado: Dr. Jeremy Douglass	Práctica ContextFree, Fiji, StructureSynth
11 [Oct. 22]	Usabilidad + user-centered design	Slides Presentación: HTML \| PPT \| KEY Práctica ActionScript 2.0: - Control de teclado - Objeto Color - Objeto Array - Objeto Date - Objeto Movie Clip - Comando fscommand - archivos de la clase: colores.fla \| colores.swf \| arrayDate.fla \| arrayDate.swf \| arrayDate.fla \| arrayDate.fla \| mask.fla \| mask.swf \| fscommand.fla \| fscommand.swf Tarea Crea un escenario en donde el fondo se muestre con base a la hora del usuario. Es decir, si el usuario accesa durante el día, la ambientación es soleada; si es de tarde, la ambientación es opaca; si es de noche, el ambiente es oscuro. Nota: no dudes añadir animaciones, e.g. estrellas, nubes, soles, etc.
12 [Oct. 29]	Interfaces complejas + hibridación de medios	Proyecto Entrega de avance de proyecto. Práctica ActionScript 2.0 + XML: - Objeto Sound - Objeto Math - archivos de la clase: sonido.fla \| sonido.swf \| playlist.fla \| playlist.swf \| playlist.xml Extras • ID3 Tags: metadatos para archivos MP3
13 [Nov. 5]	Evaluación de productos interactivos	Práctica PHP + MySQL:
14 [Nov. 12]	Distribución y difusión de productos interactivos	Práctica SMIL:
15 [Nov. 19]	Tendencias de la HCI	.
[por confirmar]	Exhibición de proyectos finales	Proyecto Entrega y presentación de Proyecto Final.