Interface Humano Computador

Aula 1- Introduo ao IHC

por

Diogo Silveira Mendona

Diogo Silveira Mendona

Mestre em Informtica pelo PUC-Rio

Graduado em Cincia da Computao pela UFRJ
Certificado PMP, ITIL Fondation e Cobit 4.1
Atua a mais de 9 anos na rea de desenvolvimento
de sistemas web
Desenvolveu e coordenou projetos para empresas
como Petrobras, Embratel, Fiocruz, Aeronautica,
Vivo, Ita-Unibanco entre outras
scio fundador da Vitaljob Software LTDA desde
2010 onde atualmente Diretor Tcnico
O Curso

Acessar o Moodle
Apresentao do Mdulo
Critrio de Avaliao
Referncia Bibliogrficas
Aula 1

Motivao
Histrico
Processo de Design
Levantamento de Necessidades - Tcnicas de
observao
IHC - Motivao

Interface Humano Computador

Imagem retirada de: http://marjan.fesb.hr/~mcagalj/HCI/

IHC - Motivao

Interao com o computador pode proporcionar

Frustrao
Perda de tempo e tambm dinheiro
Perda de vidas

Exemplos
Web sites mal projetados
Interfaces de aeronaves
Equipamento hospitalar
IHC - Motivao

Interao com o computador pode proporcionar

Alegria e prazer na utilizao da interface
Economia de tempo e dinheiro
Ajuda a conectar as pessoas e faz-las

Exemplos
Web sites fceis de usar
Interface touch screen
Comandos de voz e com os olhos
IHC Histrico

Vannevar Bush
Em 1945 publica artigo As We May Think
sobre a idealizao de uma mquina chamada
Memex
Esta seria capaz de de armazenar todos os
seus livros, fotos, jornais, revistas,
correspondncias e etc
Seria como uma extenso de sua memria
Conceito de ligao entre arquivos utilizando
memria associativa. Precursor do hipertexto.
IHC Histrico

Memex

http://www.youtube.com/watch?v=c539cK58ees
IHC Histrico

Primeiro Computador 1946 ENIAC

Interao direta com o hardware
Realizava clculos balsticos
IHC Histrico

Grace Hopper
Primeiro compilador A-0 inicio dos anos 50
IHC Histrico

Ivan Sutherland
1963 - Sketchpad - Primeira interao input-on-
output (IO)
IHC Histrico

Doug Engelbart
1968 - Mouse
IHC Histrico

Alan Kay e Xerox SPARC Team

1981 Interface grfica como conhecemos

http://www.youtube.com/watch?v=Cn4vC80Pv6Q
IHC Histrico

Interfaces nos dias atuais

Touch Screen
Comandos de voz
Eye Tracking
Face Recognition
IHC Processo de design

Como produzir boas interfaces?

Design

Avaliao Implementao
IHC - Processo de design

Como produzir boas interfaces?

Descobrir e entender as necessidades

Design Gerar mltiplas alternativas

Tcnicas Avaliao Implementao Prottipos

IHC - Design

Design resolver problemas

Ex: Construir um web site de notcias
Dependendo das restries uma tarefa
simples, porm:
Precisa ser fcil de usar
Ser diferente
Ser inovador

Podem existir infinitas possibilidades

Exige criatividade
Exige gerar alternativas
IHC - Design

rea de design bastante extensa:

Design Thinking
Imerso, Anlise e Sntese, Ideao,
Prototipagem

User-centred design
Processo de criao centrada no usurio

Design de Interao
Foco em artefatos interativos (sites,
softwares, dispositivos mveis, etc)
IHC - Prototipagem

Prottipos:
Fceis de criar
Devem ser incompletos
Descartveis
IHC - Prototipagem

Exemplo
IHC - Prototipagem

Prottipos:
Ajudam na explorao de possibilidades
So ferramenta de comunicao (feedback)
Prototipagem uma estratgia rpida para
descobrir coisas difceis de prever
IHC - Avaliao

Como avalio o sucesso?

Levar as pessoas para o laboratrio e
observar elas realizando o trabalho
Pesquisas
Focus Groups
Opinio de expert
Etc...
IHC - Aprendizado

A melhor forma de aprender fazendo

Aprender as tcnicas de avaliao e melhores
padres de usabilidade
Elaborar prottipos de interface para
problemas especficos
Avaliar e melhorar utilizando algumas tcnicas
IHC - Aprendizado

Maior parte do curso voltado para interfaces web

Maior familiaridade
Maior criticidade
Maior contedo
Maior probabilidade
Algumas tcnicas e conceitos so reaproveitveis para
outros tipos de interface (tablets, smartphones, etc)
IHC - Dvidas
Dvidas at aqui?
IHC Levantamento de Necessidades

O levantamento de necessidades o primeiro passo

para projeto de design do curso
Dado um objetivo levantar quais so as
necessidades do usurio
Necessidades nem sempre so explcitas e precisam
ser descobertas
Tcnicas que vamos aprender:
Observao
Entrevistas
Experience Sampling
Dirios
IHC Levantamento de Necessidades
Observando as pessoas
Descobrir as necessidades, objetivos e valores
Cria oportunidades para um bom design
Ajuda a ver do ponto de vista dos outros e no
do seu
Observar realmente o que as pessoas fazem no
lugar do que elas dizem *ou dizem que fazem
Exemplos:
Primeira experincia com o Windows 8
http://www.youtube.com/watch?v=oyc1RVCXvAk
http://www.youtube.com/watch?v=hxmIsv88xO4
IHC Levantamento de Necessidades

5 pontos principais
O que as pessoas sabem ou no? Conhecimento
a priori.
Quais so os valores e objetivos das pessoas?
O Ecosistema em que as atividades em particular
esto inseridas.
Semelhanas e diferenas das pessoas
Outros tipos de contexto como clima no dia e
outros fatores externos
IHC Levantamento de Necessidades
Aprendizado
Participar do dia-a-dia das pessoas em parceria
Ver na prtica como funciona
Fazer o passo-a-passo
Validar o que foi observado
Voc consegue observar os Hacks e Workarounds
Preste ateno em tudo, nos hacks, workaraounds,
os erros so realmente a mina de ouro.
Material para aprofundamento:
Observing the User Experience, Kuniavsky
Contextual Design, Beyer & Holtzblatt
IHC Levantamento de Necessidades
Exerccio Observao
Observar em pares a primeira utilizao de um
web site
Ver moodle.