Interface Homem Mquina

Ingrid Maral
(ingr.marcal@gmail.com)

Recursos:
Pgina da Disciplina:
http://cafedoprogramador.com/ihc-fct-unesp/
Senha: ihc2015unesppp

Horrio de atendimento:
Toda quarta-feira, 14h 17h Lapesa

Email: ingr.marcal@gmail.com

Avaliaes
MA = (NP1 + 2*NP2)/3
MT = (NT1 + NT2 +...+ NTn) / n
MP = (0.8 * NP) + (0.2 * MT)
Mdia Final:
MF = (8*MA + 2*MP)/10 SE E SOMENTE SE (MP 5 E MT 5)
Caso contrrio (MA < 5 OU MP < 5)
MF = Menor das mdias MA e MP
Exame: (Exame*0,8 + MP*0,2)/2
Onde:
MF = Mdia Final.
MA = Mdia de Provas
NTi = Nota Trabalho/Projeto
MT = Mdia final dos trabalhos
NP = Nota de Projeto (Prtico)
MP = Mdias das atividades prticas e trabalhos

 No escolhemos o curso pensando:

Quero ser um designer de interface!!
Talvez nunca tenham pensado at hoje.

Porm...

 Humano/Usurio
Quem utiliza o sistema

Computador/dispositivo
Aquilo que
roda o sistema

Interao
Interface que representa
o sistema para o usurio

IHM ...

Design
Implementao
Avaliao

Interfaces de usurio

O que interface?

Interfaces ruins podem causar

desconforto e rejeio por parte
do usurio

Como criar interfaces eficientemente?

Ao comear um projeto de interface
No se sabe qual o problema a ser resolvido
Existe um problema?!

Processo Iterativo!

Falhe rpido para que possa ter sucesso mais rpido!

Design
No mundo real a fase
de design feita
por meio de
tentativas e
comparao entre
alternativas

Avaliao

Implementao

Foco em quem
vai usar o sistema!!

Design
No mundo real a fase
de design feita
de
Isso decorre das vrias alteraes de
por meio
tentativas
e
Foco em quemde um
escopo
ao longo do desenvolvimento
comparao entre
vai usar
sistema!!
produto (o que o sistema
deveofazer,
alternativas

qualidades que deve ter, solues que deve

prover)
Raramente se consegue especificar
Avaliao
completamente
o produto antes que parte do
trabalho de design tenha sido feito

Implementao

 Boas interfaces facilitam:

A execuo de tarefas

Interfaces ruins podem custar:

Vidas
Dinheiro
Tempo
Aparelhos mdicos
Usinas nucleares
Acidentes areos

Interface com o usurio mal feita

Erro de software

Impacto de interfaces ruins no dia a dia

Tempo gasto para entender o funcionamento
de um caixa eletrnico
Porqu o wifi no est funcionando?
Como alterar as configuraes da cmera
digital?
10 min X 300.000.000 de pessoas
3 bilhes de pessoas/minuto
18 bilhes pessoas/hora por ano

Um boa interface torna-se invisvel

Tecnologia de ponta Vs. D pa us isso tio?!
Quando uma interface se torna automtica
pela prtica, por causa do design ou por
uma combinao dessas duas coisas, nossa
ateno desviada da manipulao da
interface para a tarefa em execuo.

Interface Intuitiva

Requisitos para boas interfaces

Criatividade + Muito trabalho

Mas pode ser fcil se forem

empregados os mtodos e tcnicas
apropriados

Design for people bro!!

Desenvolvimento que leva em considerao as
tarefas, objetivos e valores de quem vai usar o
sistema
Trabalhar com o usurio ao longo do processo de
desenvolvimento
Avaliar as decises de projeto com base no ponto
de vista do usurio, o trabalho dele e o ambiente
de uso
Prestar ateno nas habilidades do usurio
Conversar com especialistas

Principais preocupaes de um
designer de sistemas
Como o design deve ser feito?
Quais as tecnologias que devem ser
utilizadas?
Inclui sistemas, produtos, dispositivos e
componentes interativos

Quem vai utilizar o sistema e a vida de quem

gostaramos de facilitar?
O que as pessoas querem fazer e em qual
contexto?

Habilidades de um designer de
interface
Entender as pessoas e as necessidades delas
Conhecer as solues que a tecnologia vigente
oferece
Pesquisar e projetar solues tecnolgicas que
satisfaam as necessidades das pessoas
Ser capaz de avaliar corretamente o design
criado e iterar at atingir a soluo

O poder da prototipao
O que ?
Criar uma aproximao da ideia de design para ganhar
feedback do usurio, aprender e iterar.
Rpido!

uma das atividades mais importantes no

processo de design
Teste hipteses e facilita feedback

Dilogo reflexivo com os materiais (Donald

Schon)
A prototipao permite explorar alternativas e
melhorar o design

Objetivo de um prottipo
Um prottipo no tem como objetivo ser uma
verso do artefato final.
O principal objetivo do prottipo facilitar o
feedback
Cria o prottipo Testa Refaz

uma pergunta feita com materiais!!

Nem sempre a conversa com o cliente fcil...

Exemplo de prottipo Kodak DC2010

Exemplo de prottipo Kodak DC2010

Real Vs. Prottipo

Tamanho
A rapidez com que o prottipo foi criado no
permitiu que tudo fosse miniaturizado
Cmeras so portteis. O prottipo criado era
ligado a um cabo que o conectava a um
computador que era responsvel pela simulao
de todas as possveis interaes com o dispositivo
O prottipo no era capaz de executar nenhum tipo de
operao computacional

No era possvel tirar fotografias com o prottipo

Real Vs. Prottipo

Exclusivamente feito para entender as
necessidades do usurio ao editar fotos
diretamente na cmera.
Prottipos so SEMPRE incompletos!!
A prototipao uma estratgia para lidar de
maneira eficiente com artefatos que so
difceis de entender ou de prever o
funcionamento
Ajuda a reconhecer o que voc no sabe
que no sabe!

 Ao criar um prottipo preciso focar nos

objetivos do design e no no design em si.
O que um prottipo prototipa?
Como vai se parecer?
Como vai funcionar?
Como ser a experincia do usurio?

Prottipos no servem apenas para

coisas pequenas

Quando a apple estava comeando a criar suas lojas, um galpo foi comprado
e uma loja falsa foi criada para testar a exeperincia de venda e inaugurao
antes da inaugurao real.
Foi descoberto que a loja poderia ser organizada de acordo com atividades
(ouvir msica) ao invs de por tipo de produto

 possvel comparar o processo de prototipao com um

arrefecimento simulado (Simulated annealing): Uma meta
heurstica para otimizao
Inicia com uma soluo inicial qualquer
Itera at chegar a soluo tima (mximo global)

Ao adotar uma estratgia de criao baseada e

prottipos importante considerar o custo das
alteraes ao longo do tempo O custo das alteraes aumentam

muito ao longo do tempo quando

se trata de produtos fsicos.
Principalmente se as alteraes
forem feitas aps a comercializao
do produto
Carros, TVs, Computadores...

O custo de alteraes em software

no aumenta to rapidamente ao
longo do tempo. Mas ainda alto
Websites ou Software as a service
so mais fceis de alterar ao longo
do tempo. Mas ainda assim, o
custo cresce ao longo do tempo.
O usurio acostuma com
determinado software e interface.
Mesmo que seja fcil alterar essa
interface, por exemplo, o usurio
iria rejeitar a mudana

Isso significa que...

preciso adotar um processo de design em
que as alteraes mais significativas ocorram
logo no incio do desenvolvimento.

Ento...
Prottipos podem substituir as perguntas que
no sabemos fazer ao usurio
Nos ajuda a descobrir a amplitude de nossa
ignorncia em relao ao que estamos criando
Pior do que no saber, no saber o que no se
sabe!

Para ter uma boa ideia, tenha vrias delas!

Avaliao de Design
O aspecto mais criativo, desafiador e odiado
do design de interao a avaliao do design
com o usurio
Porm...
Envolver pessoas reais na avaliao de sua criao
ajuda a:
Ter novas ideias
Fazer alteraes importantes
Corrigir erros

 Trabalhar com o design ajuda a responder de

maneira mais consistente questes como:
Como podemos medir o sucesso desse produto?

Avaliar a criao diretamente com o usurio

ajuda a obter respostas melhores do que:
O sucesso depende do interesse pessoal, ou...
Tem sucesso porque bom para o usurio

Diferentes mtodo de avaliao proporcionam

diferentes tipos de aprendizado sobre o que
est sendo criado.

 Porque avaliar design com pessoas?

Porque aprender sobre como as pessoas
utilizam sistemas interativos?
difcil chegar a uma concluso sobre o que
uma boa interface at que esta interface seja
testada com o principal interessado: O usurio!

O desenvolvedor pode saber muito sobre o

domnio da aplicao mas no sabe sobre as
tarefas que so executadas pelo usurio
dfcil predizer o que usurios reais faro com o
sistema

 Ao criar uma interface importante pensar

em:
O usurio ser capaz de interagir com a interface
sem o auxlio de um tutorial/manual/tutor?
Eles xingam ou do risada dessa interface?
Se algum aspecto da interface for alterado, como
essa mudana ir afetar o comportamento do
usurio?
Como o comportamento do usurio muda ao longo
do tempo?

 As respostas para cada uma dessas questes

so encontradas por meio de diferentes
mtodos de avaliao de interface
Conhecer e empregar diferentes tipos de
avaliao de interface especialmente
importante para as reas de:
Aplicaes para celulares
Redes sociais

Isso porque o comportamento do usurio ao

lidar com esse tipo de interface muito
dependente do contexto

Mtodos de avaliao de interface

1. Estudos de usabilidade
O desenvolvedor convida o usurio para o laboratrio e os
observa enquanto interagem com a interface criada

Facilita a descoberta de:

Erros
Hipteses falsas

O contexto de uso no fiel a realidade do usurio

Em um cenrio real de uso, o usurio pode ter diferentes
tarefas, objetivos, motivaes ou ambiente de trabalho

uma maneira comum e fcil de encontrar e corrigir

erros em software existentes

2. Questionrios
Feedback rpido de milhares de pessoas
Questionrios online

Relativamente fcil de comparar mltiplas

alternativas de design
No necessrio criar o design fsico
Mostrar apenas fotos ou desenhos

O principal problema:
O que as pessoas dizem fazer Vs. O que elas
realmente fazem
Quantas vezes voc se exercita por semana?

3. Grupo de foco
Reune pessoas para discutir um design ou ideia
Vrias opinies
Porm com diferentes razes
Assumir uma ideia como boa para ser educado

No recomendado para obter dados sobre

tpicos polmicos ou que envolvam questes
culturais.
Extremistas religiosos
Vs.
Melhor design para contedo adulto

4. Consulta a especialistas
Avaliadores
Um artigo submetido avaliado por pelo menos 3
especialistas na rea
Os trabalhos acadmicos so corrigidos pelos
professores

Dogfooding (Eating your own dog food)

Por exemplo, quando uma empresa passa a utilizar seu
prprio produto para aprimor-lo antes que sejam
lanados no mercado.
A Google disponibilizou milhares de celulares rodando
Android aos seus colaboradores antes de serem
vendidos no mercado.

 Avaliao Heurstica
Ajuda a identificar problemas de usabilidades em
um sistema interativo
Usa um pequeno grupo de avaliadores
especialistas (3-5)
Cada um avalia o sistema independentemente
As opinies so agrupadas posteriormente

Espera-se que problemas distintos

encontrados por cada avaliador

sejam

5. Experimentos comparativos
Confrontar a performance de duas ou mais opes
de design

As comparaes podem ser feitas de maneiras

diferentes:
Online
Laboratrio
Mundo real

Ajuda a reconhecer as variveis mais

importantes envolvidas na criao do design
que v proporcionar ao usurio a experincia
que voc quer

6. Observao de participantes
Observar o que as pessoas realmente fazem no
ambiente em que esto habituadas a trabalhar
Observao de mais longo prazo
Facilita a descoberta de caractersticas de interao
importantes que no seriam observadas em cenrios
controlados (laboratrio) e em um espao muito curto
de tempo.

7. Simulao e modelos formais

O que considerar ao aplicar um mtodo de

avaliao de design?
Confiabilidade e preciso
Se for feito novamente, o mesmo resultado ser obtido?

Generabilidade
Os resultados seriam os mesmo se a avaliao fosse aplicada a
pessoas com mais de 18 anos?

Realismo
Os resultados refletem o que seria observado em um ambiente
real?

Comparao
Os resultados obtidos so favorveis independente do tipo de
interface avaliada?

Trabalho envolvido
A avaliao requer muito esforo? Muito tempo? Muito
dinheiro?

Como surgiu a IHC?

Julho de 1945
Vannevar Bush escreveu
uma artigo para a revista
Atlantic Monthly, mais
conhecido pelo ttulo:
As We May Think
Ele preveu que a
tecnologia ajudaria a
melhorar as habilidades
intelectuais das pessoas

 O artigo foi escrito durante o final da Segunda

Guerra mundial.
O principal objetivo era questionar o que os
cientistas empregados pelo governo poderiam
fazer para criar um mundo melhor em tempos
de paz
Vannevar identificou os problema existentes
na poca relacionados com o armazenamento
e recuperao de informao:
O conhecimento no chegava at as pessoas que
poderiam se beneficiar dele

Sistema Memex
Um dispositivo em que as pessoas poderiam armazenar
todos os registros, livros e documentos pessoais
Os itens poderiam ser recuperados rapidamente por meio
de indexao de contedo, palavras-chave, referncias
cruzadas.
possvel fazer anotaes, marcar textos, etc
possvel fazer uma ligao entre os materiais
armazenados
Funciona como uma memria externa
Tudo isso foi dito em uma poca em que o primeiro
computador ainda estava sendo construdo!!
Hoje reconhecemos o uso e utilidade da Internet e do
Hypertexto (uso de links)

Logo surgiu o ENIAC, porm sua interface com o

usurio deixava muito a desejar...

 E desde ento s cresceu o

desejo de criar interfaces
mais fceis e efetivas
Grace Hopper inventou o
primeiro compilador
Melhorar os ambientes de
programao disponveis
poderia fazer com que muito
mais pessoas tivessem acesso
aos computadores

Ainda tinha muito trabalho a

ser feito at que fosse criada
a primeira interface grfica

Ivan Sutherland SketchPad - 1963

Suas ideias deram origem, mais tarde, a
muitos dos conceitos de manipulao direta
de interface usados hoje em dia:
Estruturas hierrquicas de arquivo
cones
Copia/cola
Tcnicas de entrada de dados
Operaes recursivas
Coordenadas

Douglas Engelbart
As pessoas estaro sentadas em frente a uma
tela CRT contendo todos os tipos de smbolos.
O computador poder ser manipulado, e
podero ser realizadas todos os tipos de
operaes no computador
Vrios computadores estaro conectados em
um
complexo
de
computadores
compartilhando
e
trabalhando
colaborativamente em seus trabalhos

Criao do mouse e do hypertexto

Angelbart:
Processamento de documentos
Processadores de texto

Dispositivos de entrada e sada

Trabalho colaborativo com o uso da tecnologia
Demonstrao do primeiro Mouse:
https://www.youtube.com/watch?v=hRYnloqYKGY

Alan Kay
Queria criar um computador
pessoal
Dynabook
Prottipo feito de papelo

A partir do prottipo criado Alan

Kay e um grupo de pesquisadores
comearam a trabalhar na criao
da primeira interface grfica
Demorou 10 anos para ficar pronta

Star Computing System, distribudo

pela Xerox em 1981 j contava com
cones, pastas, rede para internet,
servidores, servidores de
impresso e e-mail.
https://www.youtube.com/watch?
v=wOAm7EiFNu8

Dvidas?

Atividade I
Leitura do cap. 1 do livro Design de sistemas interativos (Biblioteca
tem verso online)
Exerccio 1: DUPLA
Encontre cinco produtos ou sistemas interativos que voc usa (cafeteira,
celular..). Escreva sobre as caractersticas do produto que voc gosta e que
voc no gosta. Pense na experincia de uso do produto como um todo, no
apenas nas funes que ele fornece. Pense no contedo que cada um deles
proporciona, discuta com sua dupla e responda:

o que voc quer? (Justifique)

agradvel de usar? (Justifique)
fcil de usar? (Justifique)
Em qu vocs concordam? Justifique. (voc e sua dupla)
Em qu vocs discordam? Justifique. (Voc e sua dupla)

Exerccio 2: Desafio 1.4 + Exe. 2 (pg. 14 do livro texto) - INDIVIDUAL

Instrues:

Manuscrito
Legvel
Entrega: prxima aula
Faz parte da nota de trabalhos