o que o design de interaco?

o que o design de interaco?

Designing interactive products to support people in their everyday
and working lives
Sharp, Rogers and Preece (2002)

The design of spaces for human communication and interaction

Winograd (1997)

objectivos do design de interaco

desenvolver produtos usveis
Usabilidade significa: fcil de aprender, com um uso efectivo e
que proporcione uma experincia agradvel

envolver os utilizadores no processo de design

que design
Que tenha em ateno :
quem so os utilizadores
que actividades iro ser desempenhadas
onde a interaco acontecer

que tente optimizar as interaces que as pessoas tm com um

produto
de modo que correspondam s necessidades e actividade
do utilizador

compreender as necessidades da pessoas

necessrio ter em conta em que que as pessoas tm um
bom ou mau desempenho
Pensar no que poder ajudar as pessoas, relativamente ao
modo como realizam correntemente qualquer coisa
Ouvir o que as pessoas querem e conseguir o seu
envolvimento
Usar mtodos (user-based) experimentados e testados

actividade
O que torna diferente fazer uma chamada telefnica, quando se usa:
um telemvel?
um posto pblico?

considere os tipos de utilizador, tipo de actividade e contexto de uso

o que uma interface?

evoluo das interfaces HCI

50s - Interface ao nvel do hardware para engenheiros painis de

interruptores
60-70s - interface ao nvel da programao - COBOL, FORTRAN
70-90s - ao nvel do terminal - linguagens de comandos
80s - Interface ao nvel do dilogo de interaco - GUIs, multimdia
90s - Interface no ambiente de trabalho - networked systems, groupware
00s - Interface penetra os objectos

tecnologia Bluetooth, dispositivos mveis, electrnica de

consumo, ecrs interactivos, tecnologia embebida

da HCI at
ao design de interaco
Human-computer interaction (HCI) :
concerned with the design, evaluation and implementation of
interactive computing systems for human use and with the study of
major phenomena surrounding them (ACM SIGCHI, 1992, p.6)

Interaction design (ID) :

the design of spaces for human communication and interaction
Winograd (1997)

crescentemente, mais reas de aplicao, mais tecnologias e

mais questes no design de interfaces

relao entre DI, HCI e outros campos

disciplinas
acadmicas
(ex. Cincias da
computao,
psicologia)

prtica do design
(ex. design grfico)

design de
interaco

Campos interdisciplinares
(ex. HCI, CSCW)

relao entre DI, HCI e outros campos

disciplinas acadmicas contribuindo para o design de interaco:

psicologia
cincias sociais
cincias da computao
engenharia
ergonomia
informtica

relao entre DI, HCI e outros campos

Prtica de design contribuindo para o design de interaco:

Design grfico
Design de produto
....
Indstria cinematogrfica

relao entre DI, HCI e outros campos

campos interdisciplinares que fazem design de interaco:

HCI
Human Factors
Cognitive Engineering
Cognitive Ergonomics
Computer Supported Co-operative Work
Information Systems
design

 fcil trabalhar numa equipa

multidisciplinar?
quantas mais pessoas envolvidas a fazer design de interaco,
mais ideias e mais design geradomas

mais difcil se torna a comunicao e o progresso na criao de

solues geradas para resolver um problema

design de interaco e negcio

Cresce o nmero consultores em DI, exemplos conhecidos:
Nielsen Norman Group: help companies enter the age of
the consumer, designing human-centered products and
services
Swim: provides a wide range of design services, in each
case targeted to address the product development needs at
hand
IDEO: creates products, services and environments for
companies pioneering new ways to provide value to their
customers

que profissionais no negcio de DI?

designers de interaco- pessoas envolvidas no design dos aspectos
interactivos de um produto

engenheiros de usabilidade - pessoas cuja ateno se centra na

avaliao de produtos, usando mtodos e princpios de usabilidade.

web designers - pessoas que desenvolvem e criam websites,

nomeadamente layouts

designers de informao - pessoas que desenvolvem ideias sobre

planeamento e estrutura de produtos
interactivos.

user experience designers - pessoas que fazem tudo o que est

acima, mas que fazem estudos de campo para informar o design de
produtos

o que est envolvido no processo de design

interaco

identificar necessidades e estabelecer requisitos

desenvolver designs alternativos
construir prottipos interactivos que possam ser comunicados e
acedidos

avaliar o que est a ser construdo atravs do processo

caractersticas principais do design

interaco
Os utilizadores devem ser envolvidos no desenvolvimento do
projecto

Objectivos especficos em usabilidade e experincia de utilizao

precisam de ser identificados, claramente documentados e
acordados no incio do projecto

iterao necessria ao longo das principais actividades do

projecto

objectivos em usabilidade

eficcia no uso
eficincia no uso
segurana no uso
ter utilidade
fcil de aprender
fcil de lembrar como se usa

actividade sobre usabilidade

Quanto devia demorar e quanto demora a:
usar um VCR para visualizar um vdeo?
usar um VCR para pr-gravar dois programas?
usar um programa de autoria para criar um website?

objectivos dos utilizadores sobre as suas

experincias

satisfatrias
divertidas
agradveis
entretm
que ajude
motivadoras
esteticamente agradveis
.....

- que recompensem
- suporte criatividade
- emocionalmente ricas
e mais

usabilidade e objectivos dos utilizadores

sobre as suas experincias
Como diferem objectivos em usabilidade dos objectivos dos
utilizadores sobre as suas experincias?

existem trade-offs entre os dois tipos de objectivos?

ex. pode um produto ser simultaneamente divertido e
seguro?

ser fcil medir usabilidade versus objectivos dos utilizadores

sobre as suas experincias?

princpios de design
abstraces generalizveis para pensar acerca de diferentes
aspectos do design

os fazeres e os no fazeres do design de interaco

o que disponibilizar e o que no disponibilizar numa interface
tudo derivado de uma mistura de um conhecimento baseado em
teoria, experincia e senso comum

visibilidade
isto um painel de controlo para um elevador.
como funciona?
que boto carregar para um determinado andar?
nada acontece. Carregue noutro boto? Ainda nada.
Que ser necessrio fazer?
no visvel o que fazer!

www.baddesigns.com

visibilidade
necessrio inserir o carto do quarto na ranhura ao p
dos botes para pr o elevador a funcionar!

como tornar esta aco mais visvel?

tornar o leitor de cartes mais bvio

disponibilizar uma mensagem audvel, que diga o que fazer

(em que lngua?)
disponibilizar uma grande etiqueta perto do leitor de
cartes que pisque quando algum entra
tornar partes relevantes mais visveis
tornar o que h para fazer mais bvio

feedback
enviar informao de retorno para o utilizador acerca do que foi
feito

inclui som, nfase, animao e todas as suas combinaes

ex. quando um boto no ecr accionado o sistema
responde com um som ou/e um bordo vermelho como
feedback:

ccclichhk

constrangimentos
restringem as aces possveis que podem ser realizadas
ajudam a prevenir a seleco de opes incorrectas
Trs tipos principais (Norman, 1999)
fsicos
culturais
lgicos

restries fsicas
Referem-se maneira como os objectos fsicos restringem
movimentos
ex. s possvel inserir a chave numa fechadura de uma
maneira

De quantas maneiras se pode inserir um CD ou DVD num

computador?

fisicamente muito restritiva esta aco?

Como difere da aco de inserir uma disquete no leitor do
computador?

restries lgicas
Exploram o senso comum sobre a maneira como o mundo
funciona

um exemplo a relao lgica entre o layout fsico de um

dispositivo e a maneira como ele funciona

design lgico ou ambguo?

Onde ligar o mouse?
Onde ligar o teclado?
Os cones coloridos ajudam?

www.baddesigns.com

como fazer um design mais lgico

(i) A aposta num mapeamento
directo entre o cone e o
conector
(ii) B usa uma codificao pela
cor para associar os
conectores com as etiquetas

www.baddesigns.com

restries culturais
Convenes fixadas por aprendizagem, como:
tringulo vermelho para aviso de perigo

Podem ser universais ou especficas de uma

cultura

quais so universais e quais so

culturalmente especficas?

Mapeamento
relao entre os controlos os seus movimentos e os resultados
porque que este um mapeamento pobre dos botes de
controlo?

Mapeamento
porque que este mapeamento melhor?

Actividade sobre mapeamento

Como esto associados os controlos aos discos do fogo?

porque que este melhor design?

Consistncia
Design de interfaces que tenham operaes similares e usar
elementos similares para tarefas similares.
por exemplo:
Usar sempre a tecla ctrl mais a primeira inicial do command
for an operation ctrl+C, ctrl+S, ctrl+O

o principal benefcio : interfaces consistentes so fceis de

aprender e usar

Quando a consistncia desaparece

O que que acontece se existir mais do que um comando
comeado pela mesma letra?
ex. save, spelling, select, style

Arranjam-se outras iniciais ou combinaes de teclas, quebrando

a regra da consistncia
ex. ctrl+S, ctrl+Sp, ctrl+shift+L

Incrementa-se o esforo de aprendizagem, tornando o utilizador

mais sujeito a errar

Consistncia interna e externa

consistncia interna refere-se ao design de operaes de modo a
terem um comportamento idntico dentro da mesma aplicao
difcil de conseguir em interfaces complexas

consistncia interna refere-se ao design de operaes, interfaces,

etc., de modo a terem um comportamento idntico em vrias
aplicaes e diferentes dispositivos
acontece muito raramente, normalmente dependentes das
preferncias dos designers

Layout de teclados numricos

Um caso de inconsistncia externa

(a) telefones,
controlos remotos

(b) calculadoras,
computadores

1
4

2
5

3
6

1
0

Affordances: umas pistas

(disponibilidades, providencialidades)

Refere-se a um atributo de um objecto que permite a uma

pessoa perceber como us-lo
ex. O boto do rato convida a carregar, o puxador de uma
porta

Norman (1988) usou o termo para discutir o design of everyday

objects

Desde a popularizou-se em interaco, na discusso do design

de objectos de interface
ex. scrollbars to afford moving up and down, icons to afford
clicking on

o que que as affordances tm a ver com o design de interaco?

As interfaces so virtuais e no tm affordances como os

objectos fsicos

Norman sublinha que no faz sentido falar de interfaces em

termos de affordances reais

Pelo contrrio, as interfaces so melhor conceptualizadas como

affordances percepcionadas
Convenes aprendidas sobre mapeamentos arbitrrios
entre aco e efeito ao nvel da interface
alguns mapeamentos so melhor do que outros

actividade
affordances fsicas:
que affordances nestes objectos? Sero bvias?

actividade
affordances virtuais
Que affordances nestes objectos de ecr?
e se fosse um utilizador novato? saberia o que fazer com
eles?

Princpios de usabilidade
Idnticos a alguns princpios de design, mas mais prescritivos
Usados fundamentalmente como base para avaliar sistemas
Fornecem um quadro de referncia para uma avaliao
heurstica

Princpios de usabilidade (Nielsen 2001)

Visibilidade do estado do sistema
Ajuste entre o sistema e o mundo real
Controlo e liberdade do utilizador
Consistncia e standards
Ajuda aos utilizadores para reconhecerem, diagnosticarem e
recuperarem de erros

Preveno de erros
Reconhecimento em vez de lembrana
Flexibilidade e eficincia no uso
Esttica e design minimalistas
ajuda e documentao

Pontos chave
DI liga-se ao design de produtos interactivos que apoiam as
pessoas no seu dia-a-dia e no trabalho

DI multidisciplinar envolvendo contributos de um largo campo

de disciplinas e reas

DI continua a ser um bom negcio apesar do dot.com crash!

Pontos chave
DI implica levar em linha de conta um nmero de factores
interdependentes incluindo o contexto de uso, tipo de tarefa, e
tipologia de utilizador

Requer um esforo orientado para a usabilidade e os objectivos

de utilizao

Os princpios de design e usabilidade so heursticas teis para

analisar e avaliar produtos interactivos