Disciplina: Hipermídia e Interação Humano Computador

Período: 4º

Carga Horária: 80h/a

Pré-requisitos:

 Fundamentos de Banco de Dados

 Técnicas de Programação

Objetivos:

Compreender os conceitos, características e desafios inerentes ao desenvolvimento de

interfaces para usuários.
Projetar e desenvolver interface gráfica de usuários para diversas plataformas.
Elaborar protocolos para avaliação de interface gráfica de usuários, considerando
critérios ergonômicos, características da usabilidade (inteligibilidade, apreensibilidade,
operacionalidade, atratividade e conformidade), acessibilidade, segurança, efetividade,
produtividade e satisfação.
Avaliar interface gráfica de usuário, conforme protocolos estabelecidos.
Elaborar relatórios com recomendações técnicas para melhoria da interface gráfica de
usuário, considerando os resultados de avaliação.

Ementa:

Evolução e características das interfaces de usuário; princípios da ergonomia;

usabilidade, acessibilidade, segurança, efetividade, produtividade e satisfação; restrições das
interfaces de usuário para aplicações desktop, web e mobile; HTML, XML e XHTML; CSS e
Javascript; recomendações W3C e avaliação de interfaces de usuário.

Conteúdo Programático:

1. INTRODUÇÃO A INTERAÇÃO HUMANO COMPUTADOR

1.1. Evolução
1.2. Características das interfaces gráficas de usuário (clara, concisa, familiar, responsiva,
consistente, atrativa, eficiente, revertível)
1.3. Interfaces e interação
1.4. Tipos de dispositivos e componentes de software e hardware (gerenciador de janelas,
controles, interfaces multitoque e 3D, realidade virtual).
1.5. Conceitos básicos: affordances, GUI, UX, UI, IA, IxD
1.6. Importância do projeto de interface de usuário.
2. ENGENHARIA COGNITIVA

2.1. Fatores humanos e aspectos afetivos

2.2. Psicologia afetiva

2.3. Teoria das cores

2.4. Comunicação e colaboração

2.5. Processo de construção do conhecimento

2.6. Teoria da ação

3. ENGENHARIA SEMIÓTICA

3.1. Projeto de linguagens de interface (código e cores)

3.2. Teoria da informação semiótica (símbolo, signo e significado)

3.3. Metacomunicação

3.4. Modelos de comunicação e modelos sociais (cultura e organização)

4. ERGONOMIA

4.1. Conceitos e características (conforto, segurança, saúde e eficiência)

4.2. Estruturação do ambiente de trabalho.

4.3. Multidisciplinaridade (anatomia, fisiologia, antropometria, biomecânica, psicologia,

engenharia, informática e administração)

4.4. Fatores do ambiente (iluminação, ruído, temperatura).

4.5. Tipos de problemas ou incidentes (fadiga, postura, lesões por esforço repetitivo,
irritação ocular).

5. PROCESSO DO PROJETO DE INTERFACE DE USUÁRIO

5.1. Análise do ambiente para identificar necessidade do produto, objetivos dos usuários
ou problemas.

5.2. Pesquisa de campo (técnicas de observação , entrevistas, surveys, etnografia, testes).

5.3. Esboço de interface (sketches, brainstorming, mapas mentais, storboards).

5.4. Projeto de interação (projeto conceitual, metáforas, arquitetura da informação,

wireframes, cenários, modelagem de tarefas, protótipo rápido, estudos de usabilidade).

5.5. Projeto visual (iconografia, tipografia, mockups, guia de estilos).

5.6. Diretrizes e padrões de projeto de interação.

5.7. Desenvolvimento (programação, testes e validação do usuário).

5.8. Papéis dos usuários, pesquisadores, designers e programadores.

5.9. Ferramentas de apoio (sketch, Pencil, Inkscape, Blender).

6. DESENVOLVIMENTO DE INTERFACE DE USUÁRIO

6.1. Características e restrições das interfaces de usuário para aplicações desktop, web e
móbile.

6.2. XML (eXtensible Markup Language)

6.3. HTML (HyperText Markup Language)

6.4. XHTML (eXtensible Hypertext Markup Language)

6.5. Regras CSS (Cascding Style Sheets)

6.6. Páginas estáticas e dinâmicas (Javascript e restrições)

6.7. Recomendações de acessibilidade W3C (validator XHTML e CSS)

6.8. Layout e posicionamento de elementos para navegadores de diversos dispositivos.

7. VALIDAÇÃO DE INTERFACE GRÁFICA DE USUÁRIO

7.1. Conceito e características de usabilidade (inteligibilidade, apreensibilidade,

operacionalidade, atratividade e conformidade).

7.2. Critérios para avaliação da ergonomia, segurança, efetividade, produtividade e

satisfação.

7.3. Técnicas de avaliação (heurísticas, regras de memorização, testes, experimentos e

pesquisa de opinião)

7.4. Modelos de avaliação e indicadores

7.5. Método para análise dos resultados.

7.6. Relato dos resultados e proposição de melhorias.

Bibliografia Básica:

BARBOSA, S.D.J.; SILVA, B.S. Interação Humano Computador. Editora Campus-Elsevier,

2010.

W3C, ISSO/IEC 40500:2012 e Web Content Acessibility Guidelines (WCAG), versão 2.1.

NILSEN, Jacob. Projetando websites. São Paulo: Editora Campus, 2000.

Bibliografia complementar:

GUERIN, F., LAVILLE, A., DANIELLOU, François, DURAFFOURG, J. & KERGUELEN, A.

Compreender o trabalho para transformá-lo. A prática da Ergonomia. (tradução de L.
Sznelwar et al.). São Paulo: Edgar Blucher, 2001.

PRATES, R. O.; FILGUEIRAS, L. V. L. Usability in Brazil. Ins: Global Usability. (eds.) Douglas,
I.; Liu, Z. Springer, pp 91-110, 2011.

ROCHA, Heloisa e BARANAUSKAS, M. Cecília. Design e Avaliação de Interfaces Humano-

Computador. São Paulo: Escola de Computação da USP, 2000.

BRASIL. Ministério do Planejamento, Orçamento e Gestão. Secretaria de Logística e

Tecnologia da Informação e MAG Modelo de Acessibilidade em Governo
Eletrônico/Ministério do Planejamento, Orçamento e Gestão, Secretaria de Logística e
Tecnologia da Informação – Brasília: MP, SLTI, 2014. 92p.

W3C Working Draft. 19 April 2017. Disponível em https://www.w3.org/TR/2017/WD-

WCAG21-20170419/

Ferramentas de apoio:

Sketch, Pencil, Inkscape, Blender e validadores W3C (https://validator.w3c.org,

https://jigsaw.w3.org/css-validator/ )