Interação Humana com o Computador

Objectivos

Nesta unidade curricular serão estudados conceitos inerentes à interação homem-máquina, quer a um nível mais conceptual e teórico quer a um nível mais prático. Começando com uma análise dos dois principais intervenientes - homem e computador - prosseguir-se-á para o estudo de modelos subjacentes à representação design e implementação de sistemas facilitadores desta interação. Serão analisados os aspetos estéticos e funcionais mais relevantes e relacionados com o design e implementação de sistemas interativos.

Tendo presente o paradigma WIMP e sendo as interfaces gráficas (GUI) ainda uma das principais formas de interação com um computador, pretende-se que os alunos ganhem competências no domínio da implementação de software dotado destes facilitadores da interação. Assim, serão exploradas técnicas e ferramentas que permitam o desenho e a implementação de interfaces gráficas, em sistemas informáticos. Neste processo serão necessariamente considerados os conceitos e elementos mais teóricos, apreendidos ao longo do semestre.

"(...) When simple things need pictures, labels, or instructions, the design has failed (...)"

[Don Norman, "The Design of Everyday Things", 1988]

Aulas Teóricas

2023/02/28 — Apresentação e definição das condições gerais de funcionamento da UC. Critérios de Avaliação. Programa. Noções e motivações introdutórias. Porquê IHC? Os conceitos chave de "Forma" e "Função". Visão geral dos conteúdos programáticos da unidade. [PDF]
2023/03/07 — O Ser Humano como "unidade de processamento de informação", segundo a perspetiva da IHC. O olho humano. A visão como combinação da receção do estímulo e sua interpretação. Demonstração da criação de um pequeno projeto em JavaFX, no Intellij IDEA e usando o SceneBuilder integrado. [PDF]
2023/03/14 — Visão, audição e perceção do mundo real e sua importância no processo de interação. A Lei de Fitts e a lei de Hick. Memória sensorial, memória de curta duração e memória de longa duração. Agrupamento (chunking) de informação e o conceito de "closure". A memória humana. Memória sensorial, de curta (STM) e longa (LTM) duração. [PDF]
2023/03/21 — O raciocínio humano e seus mecanismos mais básicos: dedução, indução e abdução. O raciocínio na resolução de problemas complexos. Os comportamentalistas e o "Modelo Gestalt". O "Problem Solving" através da "tentativa e erro", reprodução, analogia e introspeção (insight). O errar humano. Erros e modelos mentais. O papel das emoções no processo da interação. A noção de "Affect" e sua implicação na interação. [PDF]
2023/03/28 — O processo de interação entre um sistema e o seu utilizador. Um pouco de história da interação, em particular alguns marcos relevantes na história das interfaces gráficas. Novas tecnologias e paradigmas de interação. Modelos, estilos e contexto da interação. As sete fases do Modelo de Norman. O semi-ciclo de execução e o semi-cíclo de avaliação. [PDF]
2023/04/11 — O processo de interação homem-máquina. Modelos, estilos e contexto da interação. As sete fases do Modelo de Norman. O ciclo da execução / avaliação e os "golfos" de avaliação e de execução. Interação em contexto "office" versus contexto industrial. Conceitos avançados de POO com aplicação na programação em JavaFX, nomeadamente: Interface e sua aplicação nos listeners de eventos; os Java lambdas e suas aplicações; pares de classes observador-observado. Ligações dinâmicas entre propriedades. [PDF]
2023/04/18 — Noções básicas no design da interação Homem-Máquina. O processo de design; Os utilizadores. Perfis e personagens representativas. Organização das views de uma aplicação. Navegação entre views. [PDF]
2023/05/02 — Introdução ao estudo dos princípios de "Web Design" e suas especificidades estéticas, funcionais e de usabilidade. Breve abordagem aos princípios estéticos. A "proporção de ouro" e o número Phi. Aplicações na criação de layouts. Breve abordagem aos princípios estéticos. A "proporção de ouro" e o número Phi. Aplicações na conceção de layouts. Noções de "Teoria da Cor"; o modelo RYB e as rodas de cor. O contexto e a combinação de cores com objetivos estéticos. O impacto psicológico da cor. [PDF]
2023/05/09 — Conclusão do estudo da Teoria da Cor. Recursos online para exolha de cor. Alguns princípios estéticos da Teoria da Cor: Harmonia, Contraste, Repetição, Equilíbrio e Domínio. O impacto psicológico da cor. Regras de Design para a modelação da interação homem-máquina. Princípios, Standards, Guidelines e Patterns. Estudo os Princípios de Aprendizagem e de Flexibilidade. Princípios de Robustez; os "Standards" e os "Guidelines"; Guidelines específicos para Java GUI; As 10 heurísticas de Nielsen; Os 7 princípios de Norman e as 8 regras de ouro de Shneiderman. Padrões de design da interação. [PDF]
2023/05/16 — Modelos cognitivos para modelação do utilizador em paradigma interativo. GOMS - Modelação conceptual, ao nível da tarefa. Modelação ao nível sintático e uso de BNF e TAG. Modelação física e motora: Os 3 estados de Buxton e a modelação "Keystroke" ou KLM. A lei de Fitts conjugada com o modelo KLM. O conceito de "diálogo" na IHC. Introdução ao estudo da modelação de diálogo. [PDF]
2023/05/23 — O conceito de "diálogo" na IHC e a notação STN no design e concepção de diálogo homem-máquina. Notações para representação de diálogo da interação: STN, Redes de Petri e Fluxogramas. Utilidade destas ferramentas, na análise prospetiva de limitações e erros de interação. [PDF]
2023/05/30 — Métodos de avaliação de sistemas na ótica da IHC: Passeio Cognitivo e Avaliação Heurística; Avaliação envolvento os utilizadores. Avaliação em laboratório e no terreno. Teste de Hipóteses. Técnicas de observação de interação, no processo de avaliação da interação. [PDF]

Aulas Práticas

2023/03/01 — Realização de exercícios de programação envolvendo a leitura de dados, manipulação e apresentação da informação: [Folha Prática 1]. Ficheiro de dados com informações nutricionais: [nutrition.txt].
2023/03/08 — Primeiro exercício com interfaces gráficas. A arquitetura MVC. Ilustração da implementação de um pequeno formulário em JavaFX, com Scene Builder e FXML. Implementação de um programa para o cálculo da área do triângulo. Tudo isto está compreendido na [Folha Prática 2] [Worksheet 2]. Nota: como ponto de partida deste e de futuros exercícios, pode usar o código do projeto "Template JavaFX", em baixo na secção "Recursos Relevantes".
2023/03/23 — Dois exercícios envolvendo novas componetes de interface gráfica, em JavaFX: TextArea, CheckBox, Slider e Pane. Gestão dinâmica da geometria da interface, através da combinação de diferentes "containers" . Nesta aula trabalharemos com os painéis: AnchorPane, BorderPane, FlowPane e GridPane. Siga as indicações da [Folha Prática 3] [Worksheet 3]. Alguma ajuda Webliográfica: JavaFX 8 Event Handling Examples. Folha de estilo (CSS) aplicada à TextArea: [textarea.css]
2022/04/13 — Criação de uma calculador do tipo registadora, com interface dinamicamente ajustável. Siga as indicações da [Folha prática 4] [Worksheet 4]. Alguma ajuda Webliográfica extra, relativa ao design de UI com o JavaFX Scene Builder: Designing UI with the Library Panel.
2023/04/27 — Estilização rica da interface gráfica. Desenho de primitivas gráficas em componentes de interface [Folha Prática 5].
2023/05/11 — Navegação entre views com passagem de parâmetros. Apresentação e manipulação de dados tabulares em JavaFX. As componentes TableView e TableColumn e programação do controlo associado. Apresentação e manipulação de páginas web. A componente WebView. Ajuda webliográfica: Tables in JavaFX. [Folha Prática 6]

Recursos Relevantes

The helpful Java API Documentation: [Java 8], [OpenJDK].
The JEDI "Introduction to Programming I": [JEDI I]
The JEDI "Introduction to Programming II": [JEDI II]
2023/03/09 — Configuração do JavaFX nos IDEs NetBeans. Tendo em conta as recentes alterações do NetBeans e a sua "transferência" da Oracle para a Apache, existem algumas incompatibilidades exigindo alguns cuidados específicos na instalação e configuração do NetBeans. Os dois vídeos indicados a seguir permitem perceber de forma sintética os principais passos nesta configuração. Não esquecer que o SceneBuilder deve também ser instalado e ligado com o IDE que for escolhido.
1. Uma forma de resolver o problema rapidamente e que nos permite ter o NetBeans pronto para todo o trabalho que vamos realizar nesta disciplina, é manter uma Plataforma JDK na versão 1.8, independentemente de termos uma versão mais recente do NetBeans. Para configurar desta forma, veja este pequeno [vídeo].
2. No entanto, se pretende usar uma versão mais recente do Java (e.g.,JDK 19), terá de proceder a uma configuração mais cuidadosa, que envolve descarregar o JavaFX, criar a biblioteca correspondente no NetBeans, adicioná-la ao projeto e definir o caminho para o carregamento dos módulos JavaFX, em runtime. Tudo isto está bem exemplificado neste [vídeo].
2023/03/09 — Template JavaFX. Para facilitar a criação de novos projetos, é disponibilizado um projeto modelo, criado no NetBeans, servindo assim como ponto de partida: Projeto Modelo em JavaFX (NetBeans). Esta solução será útil numa primeira aula, para quem optar pela segunda configuração, anteriormente indicada.

Bibliografia

Introdução ao Design de Interfaces; 3ª Edição; Fonseca, M., Campos, P., Gonçalves, D.; FCA, Outubro 2017; ISBN 978-972-722-870-6.
Human Computer Interaction, A. Dix, J. Finlay, G.D. Abowd and R. Beale, 3rd Edition, Prentice Hall, 2003, ISBN 0130461091.
Learn JavaFX 8: Building User Experience and Interfaces with Java 8. Kishori Sharan, Apress 2015.
Readings in Human-Computer Interaction: Toward the Year 2000, R. M. Baecker, J. Grudin, W. A. S. Buxton and S. Greenberg, Morgan-Kaufmann Publishers, 1995. ISBN 1-55860-246-1.
Handbook of Human-Computer Interaction, M. Helander, T. Landauer and P. Prabhu, Amsterdam: North-Holland, 1997. ISBN 0-444-81862-6.
Interaction Design: Beyond Human-Computer Interaction, Sharp H., Rogers Y., Preece J., 2nd Edition, Wiley, 2007. ISBN: 978-0-470-01866-8.
Your Brain, The Missing Manual. M. MacDonald. Pogue Press, O'Reilly 2008. ISBN 978-0-596-51778-6