O que é Design de Interação?

O que é Design de Interação?

• 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 espaços para comunicação e interação humana

– Winograd (1997)

Objetivos do design de interação

• Desenvolver produtos com boa usabilidade– Usabilidade significa fácil de

aprender, efetivo de se usar e proporciona uma experiência agradável ao utilizar-se

• Envolver os usuários no processo de design

Exemplos de umbom e mau design

– Os botões do elevador e suas respectivas legendas na linha inferior são do mesmo tamanho e forma, induzindo o usuário a erros.

– As pessoas não cometem os mesmos erros na linha de cima. Por quê?

Por quê esta máquina de vendas é tão ruim?

• Precisa-se pressionar o botão para ativar o display;

• Normalmente é necessário inserir uma moeda antes de selecionar-se o produto

• Quebra toda e qualquer convençãoFrom: www.baddesigns.com

O que projetar

• Devemos considerar:– Quem são os usuários– Quais atividades eles desempenham– Aonde a interação tem lugar

• Necessidade de otimizar a interação que o usuário tem com o produto– Considerar como essa interação pode ajudar

em suas tarefas e quais são as necessidades dos usuários

Entendendo as necessidades dos usuários

– Considerar no que as pessoas são boas ou não;

– Considerar o que pode auxiliar as pessoas na sua atual maneira de fazer as coisas;

– Pensar o que pode proporcionar experiências de qualidade ao usuário;

– Ouvir o que as pessoas querem e envolvê-las no design;

– Utilizar técnicas baseadas no usuário “testadas e aprovadas” durante o processo de design.

• Qual é a diferença de fazer uma chamada usando-se:– um telefone celular– um telefone público

• Considere os tipos de usuário, o tipo de atividade e o contexto de uso

O que é interface?

Evolução das interfaces IHM• anos 50 - interface a nível de hardware, com

painel de chaves• anos 60 a 70 - Interface a nível de

programador (Cobol, Fortran)• anos 70 a 90s - Interface a nível de terminal

com linha de comando• 80s - Interface a nível de diálogo como

interação (GUIs, multimídia)• 90s - Interface a nível de grupos de trabalhos

e sistemas distribuídos • 00s - A interface torna-se pervasiva

– tags RF, tecnologia bluetooth, dispositivos móveis, telas interativas, tecnologia embarcada

IHM e o design da interação

• Interface Homem-Máquina (IHM) é: “o design, a avaliação e a implementação de sistemas computacionais interativos para uso humano e com o estudo de fenômenos importantes que os rodeiam” (ACM SIGCHI, 1992, p.6)

• Design da Interação (DI) é: “o projeto de espaços para comunicação e interação humana”

– Winograd (1997)

• Uma equipe multidisciplinar significa muito mais idéias sendo geradas, novos métodos sendo desenvolvidos e designs mais criativos e originais sendo produzidos.

Relação entre DI, IHM e outros campos

Campos interdisciplinares (IHM, trabalho cooperativo suportado por computador)

Práticas de design(design gráfico)

Disciplinasacadêmicas(ciência da computação,psicologia)

Design daInteração

• Disciplinas acadêmicas que contribuem para o DI: – Psicologia– Ciências sociais– Ciência da Computação– Engenharia– Ergonomia– Informática

Relação entre DI, IHM e outros campos

Relação entre DI, IHM e outros campos

• Práticas de design que contribuem para o DI:– Design gráfico– Design de produto– Design artístico– Design industrial– Indústria cinematográfica

Relação 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 informação

Quais as dificuldades ao trabalhar-se com equipes

multidisciplinares?

• Reunir tantas pessoas com formações e treinamentos diferentes significa muito mais idéias sendo geradas… mas…

• A maior dificuldade pode ser a comunicação e o desenvolvimento em uma única direção diante de inúmeros designs e propostas.

Design da interaçãoem negócios

• O design de interação é agora um grande negócio:– Grupo Nielsen-Norman: “ajuda as companhias a

entrarem na era do consumidor, projetando produtos e serviços centrados no usuário”

– Swim: “proporciona uma visão detalhada da usabilidade e do design do produto feita por um especialista”

– IDEO: “criar produtos, serviços e ambientes para as companhias é uma forma pioneira de agregar valor aos seus clientes”

O que os profissionais fazem no negócio de DI?

• designers de interação - pessoas envolvidas em todos os aspectos interativos de um produto

• engenheiros de usabilidade - pessoas que avaliam produtos utilizando métodos e princípios de usabilidade

• web designers - pessoas que desenvolvem e criam o design visual de websites

• arquitetos da informação - pessoas que tem idéias de como planejar e estruturar produtos interativos, especialmente websites

• designers de novas experiências ao usuário - pessoas que realizam todas as tarefas anteriores, mas que também 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 versões interativas dos designs de

maneiras que possam ser comunicados e analisados

• Avaliar o que está sendo construído durante o processo

Características-chave em DI

• Os usuários devem estar envolvidos no desenvolvimento do projeto

• A usabilidade específica e as metas decorrentes da experiência do usuário devem ser identificadas, claramente documentadas e acordadas no início do projeto

• A interação é inevitável

Metas de usabilidade

• Ser eficaz no uso (eficácia)• Ser eficiente no uso (eficiência)• Ser seguro no uso (segurança)• Ser der boa utilidade (utilidade)• Ser fácil de aprender como se usar• Ser fácil de lembrar como se usa

Usabilidade

• Quanto de tempo deveria ser necessário e quanto de tempo é necessário atualmente para:– usar um VCR para assistir um vídeo?– Usar um VCR para gravar 2

programas?– Usar um software de autoria para

criar um website?

Metas decorrentes da experiência do usuário

– Satisfatórios– Agradáveis– Divertidos– Interessantes– Úteis– Motivadores– Compensadores– Estéticamente agradáveis– Icentivadores de criatividade– Emocionalmente adequados

Metas de usabilidade e asdecorrentes da experiência do

usuário

• Como as metas de usabilidade podem ser diferentes das decorrentes da experiência do usuário?

• Existe uma interação entre os 2 tipos?– e.g. pode um produto ser divertido e seguro?

• É possível reconhecer e entender o equilíbrio entre as metas de usabilidade e as decorrentes da experiência do usuário?

Princípios de design

• Generalizar abstrações 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, experiência e senso comum

Visibilidade• Este é um painel de

controle de um elevador. • Como ele funciona?• Aperta-se o botão

correspondente ao andar que você deseja?

• Nada acontece. Aperta-se qualquer outro botão? Ainda nada! O que nós devemos fazer?

Não é explicito o que devemos fazer!

www.baddesigns.com

…você deve inserir o seu crachá com código de barras ou tarja magnética para que o elevador funcione!

Como podemos tornar isso mais visível?

• 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 instruções de como utilizar o crachá para acionar o elevador

• tornar as partes mais relevantes visíveis• tornar óbvio o que deve ser feito

Visibilidade

Feedback

• Retornar ao usuário a informação do que foi executado

• Inclui sons, brilhos, animações e a combinação de todos esses elementos– exemplo: quando o botão é clicado ele

retorna um som ou apresenta uma borda vermelha ao redor:

“ccclichhk”

Restrições

• Restrições que permitem apena que alguns tipos de ações possam ser executadas

• Ajuda para previnir que o usuário selecione opções incorretas

• 3 tipos de restrições (Norman, 1999)– física– cultural– lógica

Restrições físicas• 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 possíveis nós temos para inserir um CD ou um DVD no respectivo drive no computador?

• Qual é a restrição física que existe?• Qual a diferença entre o drive de CD e o

disquete quanto às formas de inserir a mídia?

Restrições lógicas

• Dependem do senso comum dos indivíduos a respeito das ações e suas conseqüências. Dependem do entendimento que as pessoas tem sobre a maneira que o mundo funciona

Design lógico ou ambíguo?

• Onde conectar o mouse?

• Onde conectar o teclado?

• Conector de cima ou o debaixo?

• O ícones coloridos ajudam?

www.baddesigns.com

Como projetar de forma mais lógica?

(A) Mapeamento direto entre a legenda e o conector

(B) Cores são utilizadas para associar os conectores com as respectivas legendas

www.baddesigns.com

Design lógico ou ambíguo?

Design lógico ou ambíguo?

Restrições culturais• Aprendemos

convenções arbitrárias como por exemplo, um triângulo vermelho para alertas e avisos.

• Podem ser universais ou culturalmente específicas.

Quais são universais e quais são culturalmente específicos?

Mapeamento

• Relação entre os controles, suas ações e o resultado no mundo real;

• Por quê o mapeamento dos botões abaixo é pobre?

Mapeamento

• Por quê o mapeamento abaixo é melhor?

• Os botões estão mapeados de acordo com a seqüência de ações

Mapeamento

– Quais botões correspondem a quais queimadores?

A B C D

Mapeamento

Por quê o designabaixo é melhor?

Mapeamento

Mapeamento

Consistência

• Projete interfaces para ter operações similares e utilizar elementos similares para tarefas similares;

• Por exemplo:– ctrl+C, ctrl+S, ctrl+O

• O maior benefício é que as interfaces tornam-se fáceis de se aprender de de se utilizar.

Quando a consistênciaé quebrada

• O que acontece se houver mais de um comando começando com a mesma letra?– exemplo: save, spelling, select, style

• Temos que encontrar outras iniciais ou quebrar a consistência encontrando outras combinações de teclas.– Exemplo: ctrl+S, ctrl+Sp, ctrl+shift+L

• Aumenta o esforço para o usuário aprender e aumenta a probabilidade de erros (CTRL + B negrito / salvar).

Consistência interna e externa

• Consistência interna refere-se ao design de operações que terão um comportamento padrão na mesma aplicação;– Dificuldade de implementar em interfaces

complexas;

• Consistêcia externa refere-se ao design de operações, interfaces, etc., que serão as mesmas independentemente da aplicação– Caso muito raro por causa das preferências

pessoais do designer.

Layout do teclado numérico

• Um caso de consistência externa

1 2 3

4 5 6

7 8 9

7 8 9

1 2 3

4 5 6

0 0

(a) telefones e controles remotos

(b) calculadoras e teclados de computador

Consistência

Consistência

Affordances

• Refere-se ao atributo de um objeto que permite às pessoas saber como utilizá-lo– exemplo: o botão 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 diário

• Desde então, 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 aoferecer ao design de interação?• Interfaces são virtuais e não possuem

affordances como os objetos físicos

• Norman diz que infelizmente o termo affordance tornou-se uma espécie de clichê, perdendo muito de sua força como princípio de design

• Ao invés de interfaces é melhor conceitualizar como affordances percebidas– O mapeamento entre uma representação virtual e o

seu comportamento é arbitrário e o usuário terá que aprender as conveções estabelecidas

– Alguns mapeamentos são melhores que outros

Affordance

Affordance– Affordances físicos:

Como é o affordance dos objetos aqui apresentados? São óbvios?

Affordance

Affordance

– Affordance virtualQuais dos seguintes objetos tem affordance?E se você for um usuário novato?Você saberia como utilizá-los?

Princípios de usabilidade

• Similares aos princípios de design, porém mais prescritivos;

• São utilizados principalmente para a avaliação de sistemas;

• Fornecem um framework para a avaliação heurística.– Os princípios de design quando usados na prática,

normalmente são conhecidos como heurística.

Princípios de usabilidade (Nielsen 2001)

• Visibilidade do status do sistema;• Compatibilidade do sistema com o mundo real;• Controle do usuário e liberdade;• Consistência e padrões;• Ajuda os usuários a reconhecer, diagnosticar e

recuperar-se de erros;• Prevenção de erros;• Reconhecimento em vez de memorização;• Flexibilidade e eficiência de uso;• Estética e design minimalista;• Ajuda e documentação.

Pontos principais• O DI preocupa-se com o projeto de

produtos interativos que apóiem os indivíduos em sua vida diária e em seu trabalho;

• O DI é multidisciplinar, envolvendo muitas contribuições de uma ampla variedade de disciplinas e áreas;

• O DI é um grande negócio. Muitas empresas o querem, mas poucas sabem como fazê-lo!

Pontos principais

• O DI requer que se leve em consideração vários fatores interdependentes, incluindo o contexto de uso, o tipo de tarefa e o tipo de usuário;

• As metas decorrentes da experiência do usuário estão preocupadas em criar sistemas que melhorem esta experiência;

• Os princípios de design e de usabilidade constituem heurísticas úteis para analisar e avaliar aspectos de um produto interativo.