Slides da aula 01

Transcrição

Slides da aula 01

INF751 – Interação Humano-Computador
Aula 01: Interação Humano-Computador (IHC)
Introdução, Conceitos básicos, exemplos...
Roberto Pereira
[email protected]
www.inf.ufpr.br/rpereira/teaching
Roberto Pereira
Professor no Departamento de Informática, UFPR

Graduação em Sistemas de Informação (UNISEP), Mestrado em CC (UEM);

Doutorado e Pós-Doutorado em CC pela UNICAMP (2012, 2016)

Pesquisador visitante na Universidade de Reading, Reino Unido (2014-2015)

Professor da Especialização em Engenharia de Software, IC/UNICAMP (2013-2017)

Pesquisador Colaborador: InterHAD (UNICAMP), GSII (UEM), NEPP (UNICAMP), IHC (UFPR)
Áreas de atuação:

Interação Humano-Computador (IHC)

Engenharia de Software (ES)

Sistemas de Informação (SI)

Informática na Educação (IE)
– Educação Inclusiva
– Formação Continuada por meio de TICs
– Construção participativa de Políticas Públicas
IHC ES
SI
IE
2
News…
 Impede(ia) o uso de CEP genérico
 Considera inválido e-mail com hífen
 Mensagens de erro do Banco de
Dados
 Telefone de contato que não
funciona
 Informar dados já informados
 Obrigatório gerar a guia e parar no
início de cada mês
 Março 2016: ainda não é possível
excluir um empregado cadastrado
Arndt von Staa, PUC-Rio: Erros Grosseiros, O Globo (05/11/2015).
Multa para quem pagar
atrasado ;)
http://oglobo.globo.com/opiniao/erros-grosseiros-17966613
3
...tecnologia e seus impactos
-
Do telefone fixo ao smart phone:
Diferenças?
Mudanças?
Impactos?
4
...tecnologia e seus impactos
-
Jogos, Realidade Aumentada:
Diferenças?
Mudanças?
Impactos?
5
News…
6
Computação – era digital
 questões éticas
 efeitos emocionais
 aspectos formais e
normativos
 questões técnicas
7
Computação – era digital
normativos
Tem alguma coisa faltando no nosso currículo de CC/TI?
8
Agenda

Objetivos, organização e estrutura da disciplina

Definição para Interação Humano-Computador

Conceitos básicos: Interface, Interação, Affordance

Qualidade em IHC: Usabilidade, Acessibilidade,
Comunicabilidade


Exemplos de Bad Designs...
Histórico: e um novo momento para a área de IHC

Práticas em Cenários Brasileiros
9
A disciplina CI751
Objetivos

Noção básica dos conceitos e práticas em IHC

Conhecimento da área em diferentes focos

Desenvolver uma visão sistêmica e crítica sobre o design de tecnologias
computacionais interativas

Exercitar a capacidade de entendimento de problemas, propostas de
solução, desenvolvimento e avaliação a partir de uma perspectiva de IHC

Fazer sentido de questões de IHC no contexto dos trabalhos de
pesquisa individuais.
-
Progredir nos trabalhos de doutorado (amadurecimento da proposta; elaboração de uma
proposta)
Trabalhos/Avaliações
1. Entregas Individuais (Peso 30). Prazo 22/10/16.
2. Artigo Individual (Peso 50). Prazo 05/12/16.
3. Seminário (Peso 20). Datas: 28 e 29/11/16.
10
Página da disciplina
11
A disciplina CI751
1º Bloco: Bases Teóricas e Metodológicas (05 a 09/09)
- Introdução à Interação Humano-Computador (IHC)
- Uma visão socialmente consciente em IHC
- Prototipação e Design Participativo
- Avaliação em IHC
- Revisão Sistemática de Literatura
2º Bloco: Temas adicionas e Tópicos em IHC (29/10 a 01/11)
- Design Universal e Design Centrado no Usuário
- Avaliação de Acessibilidade
- IoT, Smart Cities, etc.
- Fatores Humanos e Curiosidades
3º Bloco: Tópicos de Pesquisa (28 e 29/11)
- Seminários e discussões voltadas aos Projetos individuais
12
UNICAMP
Definição
O que é Interação Humano-Computador (IHC)?
...ou, o que não é IHC?
Alguns mitos em IHC:
- É só fazer uma telinha bonita
- É um plus (deixa pra depois... e se der tempo)
- É excessivamente subjetivo
- É caro e inviabiliza o projeto
14
IHC como área: definição
• Definição da ACM: “Interação Humano-Computador é uma
disciplina preocupada com o design, avaliação e
implementação de sistemas computacionais para uso
humano e com o estudo dos principais fenômenos que os
rodeiam.” (http://old.sigchi.org/cdg/cdg2.html#2_1)
“O valor especial e a contribuição de IHC é que ela deve
investigar, desenvolver e aproveitar essas novas áreas de
possibilidade não apenas como tecnologias ou projetos, mas
como um meio para melhorar a atividade, a experiência e a
vida humana.” (Carroll, 2013)
15
IHC como área: definição
•
Definição da ACM: “Interação Humano-Computador é uma
disciplina preocupada com o design, avaliação e implementação
de sistemas computacionais para uso humano e com o estudo
dos principais fenômenos que os rodeiam.”
•
Design de Interação (Interaction Design): cobre apenas uma
parte da IHC e se preocupa com “moldar/modelar objetos/coisas
digitais para as pessoas usarem.”
•
Experiência do Usuário (User Experience, UX): aspectos
relacionados a emoção, motivação, afeto, etc., envolvidos na
IHC.
16
UNICAMP
Conceitos básicos
Interface e Interação
•
Interface: “uma 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 poder e controle”
•
Interação: toda ação executada com/sob/por meio da interface.
(Laurel apud Rocha e Baranauskas, 2003)
18
Interface e Interação
•
“A interface de um sistema interativo compreende toda a porção
do sistema com a qual o usuário mantém contato físico (motor ou
perceptivo) ou conceitual durante o uso do sistema, sendo o
único meio de contato entre o usuário e o sistema”
•
“Interação usuário-sistema é um processo de manipulação,
comunicação, conversa, troca, influência (...), etc.”
(Barbosa e Silva, 2010)
19
Affordance
•
As possíveis ações que podem ser executadas sobre um objeto do ponto
de vista do sujeito que o observa.
•
•
•
Affordance de Gibson
Affordance de Norman
Affordance de Stamper
20
Affordance
•
Exemplos...
21
Affordance
•
Affordance Social de Stamper
22
Qualidade em IHC
•
•
•
Usabilidade
Acessibilidade
Comunicabilidade
23
Usabilidade
24
Usabilidade: definições
•
Norma ISO 9126 (1991) “Software Engineering Product Quality” :
usabilidade é “um conjunto de atributos relacionados ao esforço
necessário para o uso, e a avaliação individual de tal uso, por um
conjunto explícito ou implícito de usuários”.
•
ISO 9241-11 (1998) “Guidance on Usability”: usabilidade é “a extensão
na qual um produto pode ser usado por um grupo específico de usuários
para alcançar objetivos específicos com eficácia, eficiência e satisfação
em um contexto de uso específico”.
•
Norman (1993) define usabilidade como um conjunto de cinco fatores
que qualificam quão bem uma pessoa pode interagir com um sistema
interativo:
•
•
•
•
•
Facilidade de Aprendizado
Eficiência de Uso
Facilidade de retorno/lembrança
Segurança no uso
Satisfação subjetiva do usuário
25
Acessibilidade
26
Acessibilidade: não impor barreiras
•
Melo e Baranauskas (2006): “Flexibilidade proporcionada para o acesso à
informação e à interação, de maneira que usuários com diferentes
necessidades possam acessar e usar esses sistemas”
•
W3C: “Acessibilidade Web significa que pessoas com deficiência podem
usar a internet. Mais especificamente, a acessibilidade Web significa que
pessoas com deficiência podem perceber, compreender, navegar e
interagir com a Web, e que podem contribuir para a web. A acessibilidade
Web também beneficia outros, incluindo pessoas idosas com capacidades
em mudança devido ao envelhecimento”.
27
Comunicabilidade
28
Comunicabilidade
•
Souza (2005): “capacidade da interface de um sistema em comunicar ao
usuário a lógica de design concebida pelo designer que projetou o
sistema”.
Objetivo da comunicabilidade: “permitir que o usuário, através de sua
interação com a aplicação, seja capaz de compreender as premissas,
intenções e decisões tomadas pelo projetista durante o processo de
design”
Mensagem do Designer:
“Este é o sistema que projetei
para você.
É a minha interpretação sobre :
- quem você é,
- o que você quer ou precisa
fazer,
- de que formas prefere fazê-lo
-e porquê.”
29
UNICAMP
Design... designs e designs
Design (http://dictionary.cambridge.org/us/dictionary/english/design)
- to make or draw plans for something that will be produced;
- to intend for a particular purpose;
- the way in which something is planned and made;
- a drawing or set of drawings showing how a building or product is to be made and
how it will work - and look;
- intentionally;
- to intend a result;
Design estranho...
31
Design estranhos
32
Problema de Design?
33
Péssimas escolhas de logo, ou de sinais...
34
...e de nome!
35
...e de nome!
36
...e de nome!
37
Bad design
Norman, Donald A. The design of everyday things: Revised and
expanded edition. Basic books, 2013.
38
Bad design
O problema está na:
(a) Interface
(b) Interação
(c) Affordance
39
Bad design
(a) Interface
(b) Interação
(c) Affordance
É um problema de:
(a) Usabilidade
(b) Acessibilidade
(c) Comunicabilidade
40
Problema de Design
...
41
Problema de Design
(a) Interface
(b) Interação
(c) Affordance
É um problema de:
(a) Usabilidade
(b) Acessibilidade
...
42
Problema de Design
(a) Interface
(b) Interação
(c) Affordance
É um problema de:
(a) Usabilidade
(b) Acessibilidade
...
43
Problema de Design
(a) Interface
(b) Interação
(c) Affordance
É um problema de:
(a) Usabilidade
(b) Acessibilidade
...
44
Problema de Design
(a) Interface
(b) Interação
(c) Affordance
É um problema de:
(a) Usabilidade
(b) Acessibilidade
...
45
Problema de Design 09
(a) Interface
(b) Interação
(c) Affordance
É um problema de:
(a) Usabilidade
(b) Acessibilidade
46
Problema de Design
(a) Interface
(b) Interação
(c) Affordance
É um problema de:
(a) Usabilidade
(b) Acessibilidade
...
47
Problema de Design
...
48
UNICAMP
Evolução/Histórico da área
Linha do Tempo
1822
• Máquina Analítica
1940
• Cartões Perfurados
1960
• Linhas de Comando
• Mouse, outros dispositivos
1980
• Interfaces Gráficas
1980/90
• Interfaces Multitouch
2000
• Interfaces “Naturais” (NUI)
20??
• Brain-Computer Interface?
Fonte: http://neurogadget.com/2011/04/28/infographic-of-human-computer-interface-evolution/2010
50
Linha do Tempo
1822
1940
1960
1980
1980/90
2000
20??
51
Linha do Tempo
1822
1940
1960
1980
1980/90
2000
20??
52
Linha do Tempo
1822
1940
1960
1980
1980/90
2000
20??
53
Linha do Tempo
1822
1940
1960
1980
1980/90
2000
20??
54
Linha do Tempo
1822
1940
1960
1980
1980/90
2000
20??
55
Linha do Tempo
1822
1940
1960
1980
1980/90
2000
20??
56
Linha do Tempo
1822
1940
1960
1980
1980/90
2000
20??
• Internet das Coisas?
57
Tecnologia Computacional...
Xerox Star, 1981
Eniac, 1943: IBM Archives
www.amazom.com 2015
https://codific.eu/internet-of-things
UNICAMP
Linha do Tempo das Transformações em IHC
UNICAMP
Mainframe
1950
PC
IoT
Internet
1980
Tool for
Cognitive Tool
automating
human tasks
extending the
human capacity
2010
Technology in
people's
homes, lives
and culture
“anytime,
anywhere,
anymedia,
anything”
communication
Transformações na Interação...
UNICAMP
1. The End of Interface Stability
The blurring boundary between C&H in the
everyday world
2. The Growth of Techno-Dependency
Living in a technology-reliant world
3. The Growth of Hyper-Connectivity
Living in a more socially connected world,
being part of a digital crowd
4. The End of the Ephemeral
Leaving digital footprints in an increasingly
monitored world
5. The Growth of Creative Engagement
New forms of human reasoning
By Sellen, A., Rogers, Y.,
Harper, R., Rodden, T.
Reflecting Human Values in
the Digital Age, Comm. ACM
2009, vol 52, n.3
Transformações na perspectiva do Mercado...
UNICAMP
 “Please evaluate our user
interface, and make it easy to
use.”
 “Please help us design this
user interface so that it is easy
to use.”
 “Please help us find what the
users really need so that we
know how to design this user
interface.”
 “Look at this area of life, and
find us something interesting!”
By Liam Bannon, Reimagining
HCI: toward a more Humancentered perspective,
Interactions. July+August 2011
UNICAMP
3 Momentos da área de IHC
Os 3 momentos da área de IHC
 Três Paradigmas de IHC (Harisson et al., 2007)
 Três ondas (Bodker, 2006)
 IHC em 2020 (Sellen et al., 2009)
Grandes Desafios em IHC no Brasil — 2012-2022
(Baranauskas et al., 2012)
1. Futuro, Cidades Inteligentes e Sustentabilidade
2. Acessibilidade e Inclusão Digital
3. Ubiquidade, Multiplos Dispositivos e Tangibilidade
4. Valores Humanos
5. Formação em IHC e Mercado
63
Os 3 momentos...
 Primeiro momento: ergonomia – ser humano vs. máquina
64
Os 3 momentos...
 Segundo momento: fatores cognitivos – ser humano como
processador de informações.
65
Os 3 momentos...
 Terceiro momento: interação situada – cultura, valores,
aspectos emocionais e afetivos, pragmática...
66
Design criativo...
“As veces el maltrato infantil solo es visible para el niño que lo sufre. “
(Madrid, 2013)
67
Design criativo...
68
Novo momento…
normativos
Tem alguma coisa faltando no nosso currículo de CC/TI?
69
Novo Momento
Design “necessarily involves an ethical dimension which
is tied into the obvious question of good versus bad
design” -- materiality and morality cannot be
disassociated.
(Latour, 2009, A cautious Prometheus? A few steps toward a philosophy of design)
“Designers are not free of responsibility regarding
the products they create and deliver in the world”
(Papanek, 1971, Design for the real world)
70
Dúvidas?







IHC: definição, propósitos, abrangência
Interface
Interação
Affordance
Usabilidade
Acessibilidade
Comunicabilidade
 3 Momentos em IHC
 Design – Projeto, Intencionalidade
71
Práticas em Cenários Brasileiros
TNR – Todos Nós em Rede
Formação continuada em rede de professores da Educação Inclusiva
Terra da Gente
Design de aplicações para a TVDI
72
Projeto para promover a formação continuada de professores do
Atendimento Educacional Especializado.
Oferecer aos professores um ambiente para:
a) Busca por expertise para resolver os problemas de suas práticas
profissionais diáras
b) Compartilhar ideias e informação sobre casos de sucesso e casos
não resolvidos
c) Estabelecer uma dinâmica continuada de estudos e formação
mediada pelas TICs
Participantes (1º estágio)

28 professores

5 Pesquisadores da Educação

5 Pesquisadores da Computação
Contribuições: Técnicas, Teóricas, Metodológicas e Sociais
73
74
75
Estudo de Caso -TNR: Resultados
Consentimento Informado:
Privacidade, Segurança
Acessibilidade
76
Estudo de Caso - TNR: Resultados
Valores no sistema TNR
Página inicial do Sistema TNR
77
iDTV: design dentro da emissora
• Objetivo: Criar a primeira aplicação para o Programa Terra da
Gente
• Onde: dentro da emissora EPTV (afiliada da Rede Globo)
• Duração: 4 Workshops de aproximadamente 3 horas cada
• Participantes:
– Mais de 7 participantes com papéis diferentes na EPTV
• Editor chefe, Designer, Gerente de Engenharia, Produtor, Estagiário...
• Nenhum possuía experiência prévia com aplicações para TV Digital Interativa
– 3 pesquisadores em Ciência da Computação
Contribuições: Técnicas, Teóricas, Metodológicas
78
Workshop 1
Clarificando o
Problema
•
•
Análise de
Stakeholders
Identificação,
clarificação
do problema
Workshop 2
Propondo Soluções
•
•
Identificação
de Requisitos
Cartões de
Padrões
Participativo
Workshop 4
Avaliando
Workshop 3
Prototipando
•
•
Brainwriting
Pattern-guided
Braindrawing
•
•
Avaliação
participativa
situada
Resultado da
Avaliação com
usuários
79
Organização de requisitos
Identificação de Stakeholders
80
Discussão de Problemas e Soluções
Seleção de Padrões
Geração de Propostas para a Interface
Síntese das Propostas
81
82
Highlights
 Focar na clarificação do
problema ANTES de propor uma
solução
 Participar: participantes ativos
em vez de sujeitos sendo
observados
 Construir um entendimento
compartilhado (problema,
solução) em vez de um único
ponto de vista
 Via de mão-dupla: contribuir e
aprender
 Lidar com tensões
 Sentimento de Pertencimento,
apropriação
 Cada contexto de design é único
 Entender (fazer sentido) dos artefatos
e seus métodos é mais importante
que o “modo correto” de utilizá-los
83
“… Technology is not given. It’s not like the sun or
the moon or the stars. It was made by people like us. If
it’s not doing for us what we want, we have a right and
a responsibility to change it.”
Mike Cooley, Right Livelihood Award Speech, 1981
"...for designing and promoting the theory and practice of
human-centred, socially useful production."
84
Atividade para a próxima aula

Ler a página da disciplina


Materiais complementares e links para leitura


Dúvidas serão esclarecidas na próxima aula
Leituras recomendadas para as próximas aulas
Próxima aula: Projeto em IHC (pré-design)


Pensar em algum projetinho simples (e.g., um app)
Aula articulará a exposição teórica com atividades práticas em sala
85
Referências
Barbosa, Simone, and Bruno Silva. Interação Humano-Computador. Elsevier Brasil, 2010.
Bødker, S. (2006) “When second wave HCI meets third wave challenges”. In: 4th Nordic
conference on Human-Computer Interaction: changing roles, Norway. p.1-8.
Carroll, John M. (2013): Human Computer Interaction - brief intro. In: Soegaard, Mads and
Dam, Rikke Friis (eds.). "The Encyclopedia of Human-Computer Interaction, 2nd Ed.".
Aarhus, Denmark: The Interaction Design Foundation. Available online at
http://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html
Connell, Bettye Rose, et al. "The principles of universal design." Retrieved January 11 (1997):
2005.
De Souza, Clarisse Sieckenius. The semiotic engineering of human-computer interaction. The
MIT press, 2005.
Gibson, J. J. "The concept of affordances." Perceiving, acting, and knowing (1977): 67-82.
Harrison, S., Tatar D., Sengers, P. The three paradigms of HCI, In: Proceedings of ACM
AltCHI’07, 2007, pp.1-21.
Melo, Amanda Meincke, and M. Cecília C. Baranauskas. "An inclusive approach to cooperative
evaluation of web user interfaces." Proceedings of the 8th International Conference on
Enterprise Information Systems, Paphos, Cyprus. 2006.
Nielsen, Jakob. "Usability inspection methods." Conference companion on Human factors in
computing systems. ACM, 1994.
Rocha, Heloísa Vieira da, and Maria Cecília Calani Baranauskas. Design e avaliação de interfaces
humano-computador. Unicamp, 2003.
Sellen, A., Rogers, Y., Harper, R., Rodden, T. (2009) “Reflecting Human Values in the Digital
Age”. Communications of the ACM, Vol 52, p.58-66.
86

Slides da aula 01

Transcrição

Documentos relacionados

COMPANY SNAPSHOT

Arte Ebanista - Arte de embutir a madeira

Aula 01 - Interfaces Web - Introdução à IHC

BRUNA MESSAGE MIGLIAVACCA

32. valcucine 33. schiffini 34. bugatti 35. marchi cucine

CURSO PROFISSIONAL DE DESIGN GRÁFICO

RoqueGomes - Rock Gomes

CV - Matheus Barros

IHM - Grou.ps

Aula 4

Corporate Information MAKENOTES

MAIS/SEE MORE - Burel Factory

A inovação baseada no design - CATÓLICA

Plano de Trabalho Pereira R