interface homem computador - aula02 - principios de design em ihc
TRANSCRIPT
![Page 1: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/1.jpg)
Interface Homem-ComputadorAula 02 – Princípios de design em IHC
P R O F. M A I G O N N AC I B P O N T U S C H K Am a i g o n p @ g m a i l . c o m1 ° S e m e s t r e 20 1 6
A d a p t a d o d e m a t e r i a l d o P r o f. M á r c i o D. C a v a l c a n t e - U F R A
![Page 2: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/2.jpg)
PRINCÍPIOS DE DESIGN
“...são derivados de uma mistura de conhecimento baseado em teoria, experiência e senso comum [...] conjunto de itens que devem ser assegurados”
(PREECE, 2005)
![Page 3: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/3.jpg)
Princípios de design que norteiam o design de interação
1. Visibilidade
2. Feedback
3. Restrições
4. Mapeamento
5. Consistência
6. Affordance
• (PREECE) Design de Interação Cap. 1 - pag 42 a 53
• (NORMAN) Design do dia-a-dia Cap.7 - pag 221 a 25
![Page 4: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/4.jpg)
PRINCÍPIOS DE DESIGN – VISIBILIDADE
Visibilidade
“...O sistema deve fornecer indicações do estado do sistema, que sejam prontamente perceptíveis e interpretáveis e correspondam às intenções e às expectativas.” (NORMAN, 2006)
![Page 5: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/5.jpg)
PRINCÍPIOS DE DESIGN – VISIBILIDADE
![Page 6: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/6.jpg)
PRINCÍPIOS DE DESIGN – VISIBILIDADE
![Page 7: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/7.jpg)
PRINCÍPIOS DE DESIGN – FEEDBACK
Feedback
“O feedback se refere ao retorno de informações a respeito da ação que foi feita e do que foi realizado, permitindo a pessoa continuar a atividade.” (PREECE, 2005)
![Page 8: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/8.jpg)
PRINCÍPIOS DE DESIGN – FEEDBACK
![Page 9: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/9.jpg)
PRINCÍPIOS DE DESIGN – FEEDBACK
![Page 10: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/10.jpg)
PRINCÍPIOS DE DESIGN – FEEDBACK
![Page 11: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/11.jpg)
PRINCÍPIOS DE DESIGN – RESTRIÇÕES
Restrições
“... refere-se às formas de delimitar o tipo de interação que pode ocorrer [...] para impedir o usuário de selecionar a opção incorreta e reduzir as chances de erro...” (PREECE, 2005)
![Page 12: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/12.jpg)
PRINCÍPIOS DE DESIGN – RESTRIÇÕES
![Page 13: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/13.jpg)
PRINCÍPIOS DE DESIGN – RESTRIÇÕES
![Page 14: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/14.jpg)
PRINCÍPIOS DE DESIGN – RESTRIÇÕES
![Page 15: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/15.jpg)
PRINCÍPIOS DE DESIGN – MAPEAMENTO
Mapeamento
“... refere-se a relação entre controles e seus efeitos no artefato” (PREECE, 2005)
![Page 16: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/16.jpg)
PRINCÍPIOS DE DESIGN – MAPEAMENTO
![Page 17: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/17.jpg)
PRINCÍPIOS DE DESIGN – MAPEAMENTO
![Page 18: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/18.jpg)
PRINCÍPIOS DE DESIGN – MAPEAMENTO
![Page 19: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/19.jpg)
PRINCÍPIOS DE DESIGN – CONSISTÊNCIA
Consistência
“... refere-se a projetar interfaces de modo que tenham operações semelhantes e que utilizem elementos semelhantes para a realização de tarefas similares” (PREECE, 2005)
![Page 20: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/20.jpg)
PRINCÍPIOS DE DESIGN – CONSISTÊNCIA
![Page 21: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/21.jpg)
PRINCÍPIOS DE DESIGN – CONSISTÊNCIA
![Page 22: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/22.jpg)
PRINCÍPIOS DE DESIGN – CONSISTÊNCIA
![Page 23: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/23.jpg)
PRINCÍPIOS DE DESIGN – AFFORDANCE
Affordance
“É um atributo do objeto que permite ao usuário saber como utilizá-lo” (PREECE, 2005)
“É uma ‘dica’ de como devemos interagir com o objeto.”
![Page 24: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/24.jpg)
PRINCÍPIOS DE DESIGN – AFFORDANCE
![Page 25: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/25.jpg)
PRINCÍPIOS DE DESIGN – AFFORDANCE
Affordance
“É um atributo do objeto que permite ao usuário saber como utilizá-lo” (PREECE, 2005)
![Page 26: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/26.jpg)
PRINCÍPIOS DE DESIGN – AFFORDANCE
Affordance
“É um atributo do objeto que permite ao usuário saber como utilizá-lo” (PREECE, 2005)
![Page 27: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/27.jpg)
PRINCÍPIOS DE DESIGN – AFFORDANCE
Affordance
“É um atributo do objeto que permite ao usuário saber como utilizá-lo” (PREECE, 2005)
![Page 28: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/28.jpg)
PRINCÍPIOS DE DESIGN – AFFORDANCE
Affordance
“É um atributo do objeto que permite ao usuário saber como utilizá-lo” (PREECE, 2005)
![Page 29: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/29.jpg)
PRINCÍPIOS DE DESIGN – AFFORDANCE
Affordance
“É um atributo do objeto que permite ao usuário saber como utilizá-lo” (PREECE, 2005)
![Page 30: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/30.jpg)
PRINCÍPIOS DE DESIGN – AFFORDANCE
![Page 31: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/31.jpg)
PRINCÍPIOS DE DESIGN – APARÊNCIA
![Page 32: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/32.jpg)
PRINCÍPIOS DE DESIGN – APARÊNCIA
![Page 33: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/33.jpg)
PRINCÍPIOS DE DESIGN – APARÊNCIA
![Page 34: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/34.jpg)
PRINCÍPIOS DE DESIGN – APARÊNCIA
![Page 35: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/35.jpg)
PRINCÍPIOS DE DESIGN – APARÊNCIA
![Page 36: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/36.jpg)
Princípios de design que norteiam o design de interação
1. Visibilidade
2. Feedback
3. Restrições
4. Mapeamento
5. Consistência
6. Affordance
• (PREECE) Design de Interação Cap. 1 - pag 42 a 53
• (NORMAN) Design do dia-a-dia Cap.7 - pag 221 a 25
![Page 37: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/37.jpg)
Tarefa
1. Forme grupos
2. Analise os celulares, smartphones e tablets pessoais
3. Procure Identificar alguns princípios de design
4. Apresente à turma
5. Tempo:30min pesquisa
10min apresentação
![Page 38: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/38.jpg)
Parte 2PR INCÍPIO S DE DE SIGN
![Page 39: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/39.jpg)
Princípios de design que norteiam o design de interação
1. Proximidade
2. Alinhamento
3. Repetição
4. Contraste
• WILLIAMS, Robin Design para quem não é designer: noções básicas de planejamento visual. 2ed. São Paulo: Callis, 1995
![Page 40: Interface Homem Computador - Aula02 - Principios de design em IHC](https://reader034.vdocuments.net/reader034/viewer/2022051318/58ed61c81a28abcc0f8b4779/html5/thumbnails/40.jpg)
Bibliografia da aula
• CAVALCANTE, Marcio D. L. Introdução à Usabilidade. Belém do Pará: UFRA, 2014. Disponível em <http://www.slideshare.net/mdarlen/ihc-slide-2-usabilidade-e-princpios-de-design> Acessado em 10/3/2016.
• PREECE, J.; ROGERS, Y.; SHARP, H. Design de Interação: além da interação homem-computador, Porto Alegre: Bookman, 2005.
• NORMAN,D. O Design do dia-a-dia. São Paulo: Rocco, 2006
• WILLIAMS, Robin. Design para quem não é designer: noções básicas de planejamento visual. 2ed. São Paulo: Callis, 1995