Apresentação de alguns conceitos do primeiro capítulo do livro "Design de interação: além da interação homem-computador". Uma introdução aos fundamentos do design de interface, exposta na aula de Projeto de Interfaces Multimídia, no curso de Desenho Industrial da Universidade Federal de Santa Maria.

1. O que é Design de Interação?
lipedal@gmail.com Felipe Estêvão Dal Molin
amariliadeabreu@gmail.com Marília Nascimento de Abreu
Acadêmicos do curso de Desenho Industrial - Programação Visual
Projeto de Interfaces Multimídia
Professor Marcos Brod Jr.

2. O que é Design de Interação?
PREECE, Jennifer et al.
Design de interação:
Além da interação homem-computador.
Porto Alegre : Bookman, 2005.

3. O que é Design de Interação?
“Design de produtos interativos que fornecem suporte às
atividades cotidianas das pessoas, seja no lar ou no trabalho.”
3/43

4. O que é Design de Interação?
Winograd (1997) descreve o design de interação como
“o projeto de espaços para a comunicação e interação humana”.
4/43

5. O que é Design de Interação?
Para Gitta Salomon: “o design de interação é o design de
produtos que se revelam com o tempo.”
5/43

6. O que é Design de Interação?
Objetivo do Design de Interação:
trazer a usabilidade para dentro
do processo de Design.
6/43

7. Sobre a Usabilidade

8. Sobre a Usabilidade
Produtos interativos e cazes, agradáveis ao usuário, de fácil
utilização, fáceis de aprender.
Ter o usuário em mente.
Considerar onde e por quem o produto será utilizado.
Atividade que estão realizando ao utilizar o produto.
Considerar no que as pessoas são boas ou não.
8/43

9. Sobre a Usabilidade
Considerar o que pode auxiliar as pessoas na sua atual maneira
de fazer as coisas.
Pensar no 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.
9/43

10. Uma breve história

11. Uma breve história
No princípio os engenheiros projetavam sistemas de hardware
para eles próprios.
Fim dos anos 70 e início dos anos 80, monitores de estações
de trabalho pessoais.
11/43

12. Uma breve história
Nos anos 80 surgiram novas tecnologias de computação.
Educação e treinamento.
12/43

13. Uma breve história
Anos 90 nova onda de desenvolvimento tecnológico.
Nos anos 2000, capacidades emergentes de hardware, software
e eletrônica – middleware.
13/43

14. A equipe
multidisciplinar

15. A equipe
multidisciplinar
Psicólogos Designers industriais
Animadores Sociólogos Especialistas em treinamento
Fotógrafos Designers grá cos Antropólogos
Especialistas de cinema Artistas Dramaturgos
Designers de produto Engenheiros de software Pro ssionais de mídia
Psicólogos do desenvolvimento Cientistas da computação Especialistas em educação
15/43

16. A equipe
multidisciplinar
Vantagens: maior número de idéias, novos métodos e designs
mais criativos e originais.
Desvantagens: custo, comunicação, diferenças de pensamento,
linguagem e percepção do mundo.
16/43

17. O processo de Design
de Interação

18. O processo de Design
de Interação
Atividades básicas Identi car necessidades e estabelecer requisitos;
Desenvolver designs alternativos que preencham
esses requisitos;
Construir versões interativas dos designs, de maneira que
possam ser comunicados e analisados;
Avaliar o que está sendo construído durante o processo.
18/43

19. O processo de Design
de Interação
Características-chave Os usuários devem estar envolvidos no desenvolvimento
do projeto;
A usabilidade especí ca e as metas decorrentes da experiência
do usuário devem ser identi cadas, claramente documentadas
e acordadas no início do projeto;
A iteração em todas as quatro atividades é inevitável.
19/43

20. O mundo dos negócios

21. O mundo dos negócios
Grande negócio.
Deve-se dizer que seu produto é e caz e fácil de utilizar.
Presença ou a ausência de um bom design de interação
= sucesso ou não da companhia.
Crescente demanda por design de interação.
Empresas de consultoria, como IDEO (http://www.ideo.com/)
e Swim Studio (http://www.swimstudio.com/)
21/43

22. As metas do Design
de Interação

23. As metas do Design
de Interação
Metas de usabilidade E cácia
E ciência
Segurança
Utilidade
Aprendibilidade
Capacidade de memorização
23/43

24. As metas do Design
de Interação
Metas de usabilidade E cácia – O sistema é bom em fazer o que se espera dele?
Exemplos: site de vendas em que não se compra,
telefone que é ruim para chamadas.
24/43

25. As metas do Design
de Interação
Metas de usabilidade E ciência – O sistema facilita a produtividade na realização
das tarefas?
Exemplos: 1-Click Order da Amazon,
busca no Google Chrome.
25/43

26. As metas do Design
de Interação
Metas de usabilidade Segurança – O sistema previne o usuário de cometer erros?
Ele fornece formas de recuperação, caso erros sejam cometidos?
Exemplos: “você deseja mesmo sair?”,
opção de desfazer do GMail.
26/43

27. As metas do Design
de Interação
Metas de usabilidade Utilidade – O sistema proporciona as funcionalidades
adequadas aos seus usuários?
Exemplos: calculadora do Windows, Wolfram Alpha.
27/43

28. As metas do Design
de Interação
Metas de usabilidade Aprendibilidade – É fácil aprender a usar as funções básicas do
sistema? Há a possibilidade de, querendo o usuário, passar para
funções avançadas?
Exemplos: atalhos do sistema, Dwarf Fortress.
28/43

30. As metas do Design
de Interação
Metas de usabilidade Capacidade de memorização – O sistema facilita que o usuário
lembre de como usá-lo?
Exemplos: reconhecimento vs lembrança,
linha de comando vs ícones.
30/43

31. 31/43

32. As metas do Design
de Interação
Metas na experiência Satisfatório Esteticamente apreciável
do usuário
Agradável Incentivador de criatividade
Divertido Compensador
Interessante Emocionalmente adequado
Útil
Motivador
32/43

33. Princípios de
Usabilidade e Design

34. Princípios de
Usabilidade e Design
Princípios comuns Visibilidade
de design
Feedback
Restrições
Mapeamento
Consistência
A ordance
34/43

35. Princípios de
Usabilidade e Design
Princípios comuns Visibilidade – As funções importantes devem estar visíveis,
de design ao alcance do usuário.
Exemplos: operações básicas em um carro,
Microsoft Word 2007
35/43

36. Princípios de
Usabilidade e Design
Princípios comuns Feedback – Para cada ação do usuário, deve haver uma resposta
de design de forma a con rmá-la.
Exemplos: telefone, controlador de volume, haptics.
36/43

37. Princípios de
Usabilidade e Design
Princípios comuns Restrições (física, lógica e cultural) – Restringir as opções do
de design usuário de acordo com o contexto reduz a possibilidade de erro.
Exemplo: sombreamento dos menus.
37/43

38. Princípios de
Usabilidade e Design
Princípios comuns Mapeamento – Deve haver uma relação lógica entre a
de design disposição dos controles, e seus efeitos no sistema.
Exemplos: controle remoto de DVD, WASD em jogos.
38/43

39. Princípios de
Usabilidade e Design
Princípios comuns Consistência – O sistema deve seguir padrões, e usar elementos
de design semelhantes para tarefas semelhantes.
Exemplos: convenções de interface,
disposição dos menus em processadores de texto.
39/43

40. Princípios de
Usabilidade e Design
Princípios comuns A ordance – Os elementos da interface devem ser desenhados
de design de forma a deixar claro como interagir com eles.
Exemplos: scroll do mouse, ícones no Photoshop...
e o efeito 3D nos botões?
40/43

41. Princípios de
Usabilidade e Design
10 heurísticas 1. Visibilidade do status do sistema – O sistema mantém os
de usabilidade usuários informados sobre o que está acontecendo.
de Nielsen 2. Compatibilidade com o mundo real –A linguagem utilizada
na relação entre usuário e sistema deve ser a do usuário.
3. Controle do usuário e liberdade – O usuário deve poder sair
de onde está, ou voltar para onde deseja, com facilidade.
4. Consistência e padrões – Não utilize palavras diferentes se
você quer dizer a mesma coisa.
5. O sistema ajuda os usuários a reconhecer, diagnosticar e
recuperar-se de erros – A linguagem nestes casos deve ser
simples e o sistema deve orientar o usuário a resolver o erro.
41/43

42. Princípios de
Usabilidade e Design
10 heurísticas 6. Prevenção de erros – Prevenir os erros é ainda melhor
de usabilidade do que orientar o usuário corretamente quando eles surgirem.
de Nielsen 7. Reconhecimento em vez de memorização – Reconhecer
elementos é mais fácil do que memorizar comandos.
8. Flexibilidade e e ciência de uso – O uso da interface é feito
em camadas, permitindo que se possa aprofundar.
9. Estética e design minimalista – Evita o uso de informações
irrelevantes (alta relação sinal/ruído).
10. Ajuda e documentação – Caso se faça necessária, a ajuda
existe e é clara.
42/43

43. Obrigado!
Felipe Estêvão Dal Molin
Marília Nascimento de Abreu