Você está na página 1de 60

O que Design de Interao?

O que Design de Interao?


Design de produtos interativos que fornecem suporte s atividades cotidianas das pessoas, seja no lar ou no trabalho
Sharp, Rogers e Preece (2002)

O projeto de espaos para comunicao e interao humana


Winograd (1997)

Objetivos do design de interao


Desenvolver produtos com boa usabilidade
Usabilidade significa fcil de aprender, efetivo de se usar e proporciona uma experincia agradvel ao utilizar-se

Envolver os usurios no processo de design

Exemplos de um bom e mau design


Os botes do elevador e suas respectivas legendas na linha inferior so do mesmo tamanho e forma, induzindo o usurio a erros.

As pessoas no cometem os mesmos erros na linha de cima. Por qu?

Por qu esta mquina de vendas to ruim?


Precisa-se pressionar o boto para ativar o display; Normalmente necessrio inserir uma moeda antes de selecionar-se o produto Quebra toda e qualquer conveno

From: www.baddesigns.com

O que projetar
Devemos considerar:
Quem so os usurios Quais atividades eles desempenham Aonde a interao tem lugar

Necessidade de otimizar a interao que o usurio tem com o produto


Considerar como essa interao pode ajudar em suas tarefas e quais so as necessidades dos usurios

Entendendo as necessidades dos usurios


Considerar no que as pessoas so boas ou no; Considerar o que pode auxiliar as pessoas na sua atual maneira de fazer as coisas; Pensar o que pode proporcionar experincias de qualidade ao usurio; Ouvir o que as pessoas querem e envolv-las no design; Utilizar tcnicas baseadas no usurio testadas e aprovadas durante o processo de design.

Qual a diferena de fazer uma chamada usando-se:


um telefone celular um telefone pblico

Considere os tipos de usurio, o tipo de atividade e o contexto de uso

O que interface?

Evoluo das interfaces IHM


anos 50 - interface a nvel de hardware, com painel de chaves anos 60 a 70 - Interface a nvel de programador (Cobol, Fortran) anos 70 a 90s - Interface a nvel de terminal com linha de comando 80s - Interface a nvel de dilogo como interao (GUIs, multimdia) 90s - Interface a nvel de grupos de trabalhos e sistemas distribudos 00s - A interface torna-se pervasiva tags RF, tecnologia bluetooth, dispositivos mveis, telas interativas, tecnologia embarcada

IHM e o design da interao


Interface Homem-Mquina (IHM) : o design, a avaliao e a implementao de sistemas computacionais interativos para uso humano e com o estudo de fenmenos importantes que os rodeiam (ACM SIGCHI, 1992, p.6) Design da Interao (DI) : o projeto de espaos para comunicao e interao humana Winograd (1997) Uma equipe multidisciplinar significa muito mais idias sendo geradas, novos mtodos sendo desenvolvidos e designs mais criativos e originais sendo produzidos.

Relao entre DI, IHM e outros campos


Disciplinas acadmicas (cincia da computao, psicologia) Design da Interao Prticas de design (design grfico)

Campos interdisciplinares (IHM, trabalho cooperativo suportado por computador)

Relao entre DI, IHM e outros campos


Disciplinas acadmicas que contribuem para o DI:
Psicologia Cincias sociais Cincia da Computao Engenharia Ergonomia Informtica

Relao entre DI, IHM e outros campos


Prticas de design que contribuem para o DI:
Design grfico Design de produto Design artstico Design industrial Indstria cinematogrfica

Relao entre DI, IHM e outros campos


Campos interdiciplinares que fazem DI:
IHM Fatores humanos Engenharia cognitiva Ergonomia cognitiva Trabalho cooperativo suportado por computador Sistemas de informao

Quais as dificuldades ao trabalhar-se com equipes multidisciplinares?


Reunir tantas pessoas com formaes e treinamentos diferentes significa muito mais idias sendo geradas mas A maior dificuldade pode ser a comunicao e o desenvolvimento em uma nica direo diante de inmeros designs e propostas.

Design da interao em negcios


O design de interao agora um grande negcio: Grupo Nielsen-Norman: ajuda as companhias a entrarem na era do consumidor, projetando produtos e servios centrados no usurio Swim: proporciona uma viso detalhada da usabilidade e do design do produto feita por um especialista IDEO: criar produtos, servios e ambientes para as companhias uma forma pioneira de agregar valor aos seus clientes

O que os profissionais fazem no negcio de DI?


designers de interao - pessoas envolvidas em todos os aspectos interativos de um produto engenheiros de usabilidade - pessoas que avaliam produtos utilizando mtodos e princpios de usabilidade web designers - pessoas que desenvolvem e criam o design visual de websites arquitetos da informao - pessoas que tem idias de como planejar e estruturar produtos interativos, especialmente websites designers de novas experincias ao usurio pessoas que realizam todas as tarefas anteriores, mas que tambm podem realizar estudos de campo a fim de fomentar o design de produtos

O que est envolvido no processo de DI?


Identificar necessidades e estabelecer requisitos Desenvolver designs alternativos Construir verses interativas dos designs de maneiras que possam ser comunicados e analisados Avaliar o que est sendo construdo durante o processo

Caractersticas-chave em DI
Os usurios devem estar envolvidos no desenvolvimento do projeto A usabilidade especfica e as metas decorrentes da experincia do usurio devem ser identificadas, claramente documentadas e acordadas no incio do projeto A interao inevitvel

Metas de usabilidade
Ser Ser Ser Ser Ser Ser eficaz no uso (eficcia) eficiente no uso (eficincia) seguro no uso (segurana) der boa utilidade (utilidade) fcil de aprender como se usar fcil de lembrar como se usa

Usabilidade
Quanto de tempo deveria ser necessrio e quanto de tempo necessrio atualmente para:
usar um VCR para assistir um vdeo? Usar um VCR para gravar 2 programas? Usar um software de autoria para criar um website?

Metas decorrentes da experincia do usurio


Satisfatrios Agradveis Divertidos Interessantes teis Motivadores Compensadores Estticamente agradveis Icentivadores de criatividade Emocionalmente adequados

Metas de usabilidade e as decorrentes da experincia do usurio


Como as metas de usabilidade podem ser diferentes das decorrentes da experincia do usurio? Existe uma interao entre os 2 tipos?
e.g. pode um produto ser divertido e seguro?

possvel reconhecer e entender o equilbrio entre as metas de usabilidade e as decorrentes da experincia do usurio?

Princpios de design
Generalizar abstraes destinadas a orientar os designers a pensar sobre os aspectos diferentes de seus designs Orientar os designers o que utilizar e o que evitar em uma interface Derivado de um conjunto de conhecimentos baseados em um conjunto de teorias, experincia e senso comum

Visibilidade
Este um painel de controle de um elevador. Como ele funciona? Aperta-se o boto correspondente ao andar que voc deseja? Nada acontece. Aperta-se qualquer outro boto? Ainda nada! O que ns devemos fazer? No explicito o que devemos fazer!

www.baddesigns.c om

Visibilidade
voc deve inserir o seu crach com cdigo de barras ou tarja magntica para que o elevador funcione!

Como podemos tornar isso mais visvel?


tornar a leitora mais bvia

utilizar uma mensagem de alerta, a qual indica o que fazer (em qual linguagem?) disponibilizar uma etiqueta com cores de alerta com instrues de como utilizar o crach para acionar o elevador

tornar as partes mais relevantes visveis tornar bvio o que deve ser feito

Feedback
Retornar ao usurio a informao do que foi executado Inclui sons, brilhos, animaes e a combinao de todos esses elementos
exemplo: quando o boto clicado ele retorna um som ou apresenta uma borda vermelha ao redor:
ccclichhk

Restries
Restries que permitem apena que alguns tipos de aes possam ser executadas Ajuda para previnir que o usurio selecione opes incorretas 3 tipos de restries (Norman, 1999)
fsica cultural lgica

Restries fsicas
Refere-se como os objetos ou formas restringem o movimento
Exemplo: apenas um lado correto para inserir um disquete no drive ou um dispositivo na porta USB

Quantas formas possveis ns temos para inserir um CD ou um DVD no respectivo drive no computador? Qual a restrio fsica que existe? Qual a diferena entre o drive de CD e o disquete quanto s formas de inserir a mdia?

Restries lgicas

Dependem do senso comum dos indivduos a respeito das aes e suas conseqncias. Dependem do entendimento que as pessoas tem sobre a maneira que o mundo funciona

Design lgico ou ambguo?


Onde conectar o mouse? Onde conectar o teclado? Conector de cima ou o debaixo? www.baddesigns.com O cones coloridos ajudam?

Como projetar de forma mais lgica?


(A) Mapeamento direto entre a legenda e o conector (B) Cores so utilizadas para associar os conectores com as respectivas legendas

www.baddesigns.com

Design lgico ou ambguo?

Design lgico ou ambguo?

Restries culturais
Aprendemos convenes arbitrrias como por exemplo, um tringulo vermelho para alertas e avisos. Podem ser universais ou culturalmente especficas.

Quais so universais e quais so culturalmente especficos?

Mapeamento
Relao entre os controles, suas aes e o resultado no mundo real; Por qu o mapeamento dos botes abaixo pobre?

Mapeamento
Por qu o mapeamento abaixo melhor?

Os botes esto mapeados de acordo com a seqncia de aes

Mapeamento
Quais botes correspondem a quais queimadores?

Mapeamento

Por qu o design abaixo melhor?

Mapeamento

Mapeamento

Consistncia
Projete interfaces para ter operaes similares e utilizar elementos similares para tarefas similares; Por exemplo:
ctrl+C, ctrl+S, ctrl+O

O maior benefcio que as interfaces tornam-se fceis de se aprender de de se utilizar.

Quando a consistncia quebrada


O que acontece se houver mais de um comando comeando com a mesma letra?
exemplo: save, spelling, select, style

Temos que encontrar outras iniciais ou quebrar a consistncia encontrando outras combinaes de teclas.
Exemplo: ctrl+S, ctrl+Sp, ctrl+shift+L

Aumenta o esforo para o usurio aprender e aumenta a probabilidade de erros (CTRL + B negrito / salvar).

Consistncia interna e externa


Consistncia interna refere-se ao design de operaes que tero um comportamento padro na mesma aplicao;
Dificuldade de implementar em interfaces complexas;

Consistcia externa refere-se ao design de operaes, interfaces, etc., que sero as mesmas independentemente da aplicao
Caso muito raro por causa das preferncias pessoais do designer.

Layout do teclado numrico


Um caso de consistncia externa
(a) telefones e controles remotos 1 4 7 2 5 8 0 3 6 9 (b) calculadoras e teclados de computador 7 4 1 0 8 5 2 9 6 3

Consistncia

Consistncia

Affordances
Refere-se ao atributo de um objeto que permite s pessoas saber como utiliz-lo
exemplo: o boto do mouse convida a clicar, o trinco da porta convida a ser rotacionado, etc.

Norman (1988) definiu o termo como dar uma pista e introduziu o termo para falar sobre o design de objetos de uso dirio Desde ento, o conceito foi muito popularizado, sendo utilizado para descrever como objetos de interface deveriam ser projetados de maneira a tornar bvio o que se pode fazer com eles
exemplo: scrollbars, cones, etc.

O que affordance tem a oferecer ao design de interao?


Interfaces so virtuais e no possuem affordances como os objetos fsicos Norman diz que infelizmente o termo affordance tornou-se uma espcie de clich, perdendo muito de sua fora como princpio de design Ao invs de interfaces melhor conceitualizar como affordances percebidas
O mapeamento entre uma representao virtual e o seu comportamento arbitrrio e o usurio ter que aprender as convees estabelecidas Alguns mapeamentos so melhores que outros

Affordance

Affordance
Affordances fsicos:

Como o affordance dos objetos aqui apresentados? So bvios?

Affordance

Affordance
Affordance virtual

Quais dos seguintes objetos tem affordance? E se voc for um usurio novato? Voc saberia como utiliz-los?

Princpios de usabilidade
Similares aos princpios de design, porm mais prescritivos; So utilizados principalmente para a avaliao de sistemas; Fornecem um framework para a avaliao heurstica.
Os princpios de design quando usados na prtica, normalmente so conhecidos como heurstica.

Princpios de usabilidade

(Nielsen 2001)

Visibilidade do status do sistema; Compatibilidade do sistema com o mundo real; Controle do usurio e liberdade; Consistncia e padres; Ajuda os usurios a reconhecer, diagnosticar e recuperar-se de erros; Preveno de erros; Reconhecimento em vez de memorizao; Flexibilidade e eficincia de uso; Esttica e design minimalista; Ajuda e documentao.

Pontos principais
O DI preocupa-se com o projeto de produtos interativos que apiem os indivduos em sua vida diria e em seu trabalho; O DI multidisciplinar, envolvendo muitas contribuies de uma ampla variedade de disciplinas e reas; O DI um grande negcio. Muitas empresas o querem, mas poucas sabem como faz-lo!

Pontos principais
O DI requer que se leve em considerao vrios fatores interdependentes, incluindo o contexto de uso, o tipo de tarefa e o tipo de usurio; As metas decorrentes da experincia do usurio esto preocupadas em criar sistemas que melhorem esta experincia; Os princpios de design e de usabilidade constituem heursticas teis para analisar e avaliar aspectos de um produto interativo.