Aula 01 Apresentação e Introdução

Prévia do material em texto

Prof. Ricardo Resende de Mendonça 
ricardo.mendonca@prof.uscs.edu.br 
Fevereiro / 2018 
2 
Agenda 
2 Horário de Aula e Importância da Disciplina 
1 Apresentação do Professor 
3 Conteúdo Programático 
4 Metodologia 
5 Bibliografia 
6 Sistema de Avaliação 
Apresentação do Professor 
3 
Prof. Esp. Ricardo Resende de Mendonça 
 
Mestrado – FACCAMP – Faculdade Campo Limpo Paulista 
Mestrado em Ciência da Computação (Cursando) 
 
Pós-Graduação - UFABC - Universidade Federal do ABC 
Especialização em Tecnologias e Sistemas de Informação (Março de 2012) 
 
Graduação - UNIP - Universidade Paulista 
Análise de Sistemas (Abril de 2003) 
4 
Agenda 
2 Horário de Aula e Importância da Disciplina 
1 Apresentação do Professor 
3 Conteúdo Programático 
4 Metodologia 
5 Bibliografia 
6 Sistema de Avaliação 
Horário da Aula 
 
5 
 
 
Aulas às Quartas 
das 21:00 as 22:50 
 
IMPORTANTE: A frequência na disciplina é obrigatória e 
controlada (Frequência mínima – 75%). 
 
Calendário 
6 
Disciplina 
7 
Fatores Humanos em Software Interativo: Teoria, 
Princípios e Regras Básicas; Estilos Interativos; 
Linguagens de Comandos; Manipulação Direta; 
Dispositivos de Interação; Padrões para Interface; 
Usabilidade; Definição e Métodos de Avaliação. 
 
Disciplina 
Disciplina 
O que é uma aplicação 
responsiva? 
 
Disciplina 
Responsivo? 
 
11 
Agenda 
 1 Horário de Aula e Importância da Disciplina 
2 Apresentação do Professor 
3 Conteúdo Programático 
4 Metodologia 
5 Bibliografia 
6 Sistema de Avaliação 
Conteúdo Programático 
12 
• Princípios e regras básicas 
• Padrões de interfaces 
• Interfaces Responsivas 
• Impacto do Design Visual na experiência do usuário 
• Usabilidade 
• Acessibilidade 
• UX - User Experience 
• UI - User Interface 
• Métodos de avaliação 
 
 
13 
Agenda 
 1 Horário de Aula e Importância da Disciplina 
2 Apresentação do Professor 
3 Conteúdo Programático 
4 Metodologia 
5 Bibliografia 
6 Sistema de Avaliação 
Metodologia 
14 
• Serão utilizados recursos didáticos como: 
– a exposição da matéria pelo professor; 
– exercícios em classe e extraclasse; 
– outros meios que se façam adequados e oportunos. 
• Para obter sucesso nesta disciplina é necessário 
interesse. 
 
15 
Agenda 
 1 Horário de Aula e Importância da Disciplina 
2 Apresentação do Professor 
3 Conteúdo Programático 
4 Metodologia 
5 Bibliografia 
6 Sistema de Avaliação 
• Básica: 
 
Bibliografia 
16 
Básica: 
• SANDERS, Bill. Smashing HTML5: Técnicas para a Nova Geração da Web. Bookman, 01/2012 
• MILETTO, Evandro Manara, BERTAGNOLLI, Silvia Castro. Desenvolvimento de Software II: 
Introdução ao Desenvolvimento Web com HTML, CSS, JavaScript e PHP, 1st edição. Bookman, 
01/2014. VitalSource Bookshelf Online. 
• MEYER, Eric A. Smashing CSS: Técnicas profissionais para um layout moderno. Bookman, 
01/2012. VitalSource Bookshelf Online. 
• BREITMAN, Karin Koogan. Web Semântica - A Internet do Futuro. LTC, 10/2005. VitalSource 
Bookshelf Online. 
• KALBACH, James. Design de Navegação Web: Otimizando a Experiência do Usuário, 1st edição. 
Bookman, 01/2009. VitalSource Bookshelf Online. 
Bibliografia 
17 
Complementar: 
• HTML5 Cookbook, Christopher Schmitt, Kyle Simpson. O'Reilly Media 2011; 
• HTML5 and CSS3, Brian P. Hogan. The Pragmatic Programmers 2011; 
• Pro HTML5 Programming, 2nd Edition, Peter Lubbers, Frank Salim, Brian Albers. 
Apress 2011; 
• CSS3: The Missing Manual, 3rd Edition, David Sawyer McFarland. O'Reilly Media 
2012; 
• Beginning CSS3, David Powers. Apress 2012. 
Bibliografia 
18 
19 
Agenda 
 1 Horário de Aula e Importância da Disciplina 
2 Apresentação do Professor 
3 Conteúdo Programático 
4 Metodologia 
5 Bibliografia 
6 Sistema de Avaliação 
Sistema de Avaliação 
20 
• Conforme o regimento interno da instituição 
– P1 (Prova Regimental); 
– P2 
• Prova Regimental 70% 
• Atividades, participação, trabalhos 30% 
– P3 (Substituição da P1 ou P2) 
 
Aprovação: Média aritmética simples 
das duas maiores notas >= 6 
 
Como anda seu 
preconceito? 
21 
22 
Mercado de Trabalho 
 
Evolução 
IHC - até os anos 70 
IHC - até os anos 70 
IHC - 70-90 
IHC - 70-90 
IHC - 70-90 
IHC - 70-90 
IHC - 70-90 
IHC - 70-90 
IHC - 70-90 
IHC - 70-90 
IHC - 70-90 
IHC - 70-90 
IHC - 70-90 
IHC - 70-90 
IHC - Século XXI 
IHC - Século XXI 
IHC - Século XXI 
IHC - Século XXI 
IHC - Século XXI 
42 
IHC - Século XXI 
43 
IHC - Século XXI 
44 
IHC - Século XXI 
45 
IHC - Século XXI 
46 
IHC - Século XXI 
47 
IHC - Futuro? 
48 
https://www.youtube.com/watch?v=BzMLA8YIgG0 
Preocupações inerentes a construção de interfaces 
→ MAIOR NÚMERO DE FUNCIONALIDADES 
vs 
USABILIDADE ← 
O que é interface? 
“lugar onde o contato entre duas entidades 
ocorre” 
torneira, Ex.: tela de computador, maçaneta, 
câmbio de carro, alça da bolsa, etc. 
O que é interface? 
“lugar onde o contato entre duas entidades 
ocorre” 
 
Ex.: tela de computador, maçaneta, torneira, 
câmbio de carro, alça da bolsa, etc. 
O que é interface? 
câmbio de carro → feito para destros e canhotos? 
O que é interface? 
● 
● 
A forma da interface reflete o que pode ser 
feito com ela 
Ex.: diversos formatos de maçanetas → 
formas distintas de se abrir portas 
O que é interface? 
Abrir uma porta: 
Humano (agente) (...) Porta (paciente) 
O que é interface? 
Abrir uma porta: 
Humano (agente) Maçaneta (interface) Porta (paciente) 
O que é interface? 
Assim, podemos definir interface como: 
 
“superfície de contato que reflete as 
propriedades físicas das partes que interagem, 
as funções a serem executadas e o balanço 
entre o poder e controle (Laurel, 1993)” 
Computador para o Usuário 
● 
● 
● 
Melhoria no aspecto físico da interface do 
software → maior chance de sucesso no 
mercado! 
Oferecer ao mercado softwares com 
interfaces user-friendly... 
… mas, será que todos os softwares são tão 
user-friendly como seus criadores afirmam? 
IHC 
“é a disciplina preocupada com o design, 
avaliação e implementação de sistemas 
computacionais interativos para uso humano e 
com o estudo dos principais fenômenos ao 
redor deles (Rocha & Baranauskas, 2003)” 
DESAFIOS 
59 
Boas notícias! 
● 
● 
O mundo tecnológico não para de lançar 
novidades na área de dispositivos 
computacionais inteligentes e user-friendly! 
A cada dia mais e mais pessoas usam 
dispositivos computacionais em seu dia a dia, 
tendo assim a informática não apenas como 
uma aliada, mas também como parte 
integrante de suas atividades rotineiras! 
Más notícias... 
● 
● 
Como dar conta da rápida evolução 
tecnológica? 
Como garantir que os designs de interfaces 
ofereçam uma boa interação 
homem máquina ao mesmo tempo que 
exploram o potencial e funcionalidade da nova 
tecnologia? 
OBJETIVOS 
62 
Objetivos 
● 
● 
● 
● 
Produzir sistemas usáveis, seguros e funcionais 
Ou seja, desenvolver ou melhorar a segurança, 
utilidade, efetividade e usabilidade de sistemas 
que incluem computadores 
Sistema → hardware + software + todo ambiente 
que usa ou é afetado pelo uso da tecnologia 
computacional 
O sistemaimplementado deve atingir a 
aceitabilidade geral 
Aceitabilidade Social 
● As pessoas gostam de utilizar o sistema? 
Aceitabilidade Prática 
● 
● 
● 
Envolve parâmetros de custo, confiabilidade e 
compatibilidade com sistemas existentes, 
além de parâmetros de usefulness 
Usefulness → refere-se ao sistema pode ser 
utilizado para atingir um objetivo 
Usefulness = Utilidade + Usabilidade 
Aceitabilidade Geral 
Aceitabilidade social + Aceitabilidade prática 
PRINCÍPIOS DE DESIGN 
67 
Problema 
Se analisarmos a complexidade de se desenvolver 
um sistema computacional, vemos que a chance de 
se ter uma IHM precária é bastante alta! 
Assim, alguns autores definem alguns princípios básicos 
que ajudam a garantir uma boa IHM 
• Visibilidade; 
• Affordance; 
• Modelo Conceitual; 
• Mapeamento; 
• Feedback. 
Visibilidade 
● Apenas coisas necessárias ao usuário 
devem estar visíveis a ele 
→ indicar quais partes podem ser 
operadas e como, além de indicar como o 
usuário interage com um dispositivo. 
Affordance 
● 
● 
● 
Refere-se ao quão perceptível é a forma a 
qual um objeto/interface deve ser utilizado, 
sem que haja confusões 
Ex.: ao se olhar um botão de campainha, o 
que imaginamos fazer com ele? 
Ex.: ao se olhar um painel de um boeing, o 
que imaginamos fazer com ele? 
Affordance 
“When affordances are taken advantage of, the user knows what to do just by 
looking: no picture, label, or instruction needed” — Don Norman 
Affordance is influenced by the physical characteristics of an object. The door handle 
appears to be something you can grab and pull, while the push plate appears to be 
something you can push. The door handle affords pulling and the push 
plate affords pushing. This door exemplifies good affordance because how you think 
the door opens (perception) matches how the door actually opens (function). 
Products with good affordance enable users to intuitively understand how it should 
be used. 
Bom modelo conceitual 
● Permite prever ações 
Bons mapeamentos 
● 
● 
Mapeamento → denota o relacionamento entre duas 
entidades 
No contexto de interfaces, indica o relacionamento 
entre os controles e seus movimentos e os resultados 
no mundo 
Feedback 
● 
● 
Retornar ao usuário informação sobre as 
ações que foram feitas 
Exemplos: o documento foi salvo; o 
documento foi enviado para impressão na 
impressora HP Deskjet; houve um erro ao 
tentar realizar o seu cadastro. 
Bibliografia 
Human Computer Interaction (HCI). Disponível em http://tinyurl.com/dz2wfy. 
Acessado em 11 de abril de 2013. 
LAUREL, B. Computer as a Theatre. Reading, Mass, Addison-Wesley. 1993. 
ROCHA, H. V.; BARANAUSKAS, M. C. C. Design e Avaliação de Interfaces 
Homem Máquina. Instituto de Computação, UNICAMP, pgs. 3-45. 
Campinas, 2003.