interface homem computador - aula02 - principios de design em ihc

40
Interface Homem-Computador Aula 02 – Princípios de design em IHC PROF. MAIGON NACIB PONTUSCHKA [email protected] Semestre 2016 Adaptado de material do Prof. Márcio D. Cavalcante - UFRA

Upload: ceuljiulbra-centro-universitario-luterano-de-ji-parana

Post on 12-Apr-2017

727 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Interface Homem Computador - Aula02 - Principios de design em IHC

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

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

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

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

PRINCÍPIOS DE DESIGN – VISIBILIDADE

Page 6: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – VISIBILIDADE

Page 7: Interface Homem Computador - Aula02 - Principios de design em IHC

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

PRINCÍPIOS DE DESIGN – FEEDBACK

Page 9: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – FEEDBACK

Page 10: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – FEEDBACK

Page 11: Interface Homem Computador - Aula02 - Principios de design em IHC

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

PRINCÍPIOS DE DESIGN – RESTRIÇÕES

Page 13: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – RESTRIÇÕES

Page 14: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – RESTRIÇÕES

Page 15: Interface Homem Computador - Aula02 - Principios de design em IHC

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

PRINCÍPIOS DE DESIGN – MAPEAMENTO

Page 17: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – MAPEAMENTO

Page 18: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – MAPEAMENTO

Page 19: Interface Homem Computador - Aula02 - Principios de design em IHC

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

PRINCÍPIOS DE DESIGN – CONSISTÊNCIA

Page 21: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – CONSISTÊNCIA

Page 22: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – CONSISTÊNCIA

Page 23: Interface Homem Computador - Aula02 - Principios de design em IHC

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

PRINCÍPIOS DE DESIGN – AFFORDANCE

Page 25: Interface Homem Computador - Aula02 - Principios de design em IHC

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

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

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

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

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

PRINCÍPIOS DE DESIGN – AFFORDANCE

Page 31: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – APARÊNCIA

Page 32: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – APARÊNCIA

Page 33: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – APARÊNCIA

Page 34: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – APARÊNCIA

Page 35: Interface Homem Computador - Aula02 - Principios de design em IHC

PRINCÍPIOS DE DESIGN – APARÊNCIA

Page 36: Interface Homem Computador - Aula02 - Principios de design em IHC

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

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

Parte 2PR INCÍPIO S DE DE SIGN

Page 39: Interface Homem Computador - Aula02 - Principios de design em IHC

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

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