O que é Design de Interação?

Apresentação em tema: "O que é Design de Interação?"— Transcrição da apresentação:

1 O que é Design de Interação?

2 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)

3 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

4 Exemplos de um bom 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ê?

5 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ção From:

6 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

7 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.

8 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

9 O que é interface? 

10 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

11 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.

12 Relação entre DI, IHM e outros campos
Disciplinas acadêmicas (ciência da computação, psicologia) Práticas de design (design gráfico) Design da Interação Campos interdisciplinares (IHM, trabalho cooperativo suportado por computador)

13 Relação entre DI, IHM e outros campos
Disciplinas acadêmicas que contribuem para o DI: Psicologia Ciências sociais Ciência da Computação Engenharia Ergonomia Informática

14 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

15 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

16 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.

17 Design da interação em 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”

18 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

19 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

20 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

21 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

22 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?

23 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

24 Metas de usabilidade e as decorrentes 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?

25 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

26 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!

27 Visibilidade • tornar as partes mais relevantes visíveis
…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

28 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”

29 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

30 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?

31 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

32 Design lógico ou ambíguo?
Onde conectar o mouse? Onde conectar o teclado? Conector de cima ou o debaixo? O ícones coloridos ajudam?

33 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

34 Design lógico ou ambíguo?

35 Design lógico ou ambíguo?

36 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.

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

38 Mapeamento Relação entre os controles, suas ações e o resultado no mundo real; Por quê o mapeamento dos botões abaixo é pobre?

39 Mapeamento Por quê o mapeamento abaixo é melhor?
Os botões estão mapeados de acordo com a seqüência de ações

40 Mapeamento Quais botões correspondem a quais queimadores? A B C D

41 Mapeamento

42 Por quê o design abaixo é melhor?

43 Mapeamento

44 Mapeamento

45 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.

46 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).

47 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.

48 Layout do teclado numérico
Um caso de consistência externa (a) telefones e controles remotos (b) calculadoras e teclados de computador 1 2 3 7 8 9 4 5 6 4 5 6 7 8 9 1 2 3

49 Consistência

50 Consistência

51 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.

52 O que affordance tem a oferecer 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

53 Affordance

54 Affordance Affordances físicos:
Como é o affordance dos objetos aqui apresentados? São óbvios?

55 Affordance

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

57 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.

58 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.

59 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!

60 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.