Aula: Princípios de design de interfaces

IHM – INTERFACE HOMEM-MÁQUINA
Disciplina

IHM - Interface Homem Máquina
Profª. Janynne L. S. Gomes
2
UNIDADE DE APRENDIZAGEM
Fundamentos de interface homem-
máquina

3
• Princípios de Design
●
Visibilidade e Affordance
●
Bom modelo conceitual
●
Bons mapeamentos
●
Feedback
ROTEIRO DA AULA

4
TÓPICO
Princípios de design

5
Muitas vezes, pela complexidade de
determinados sistemas, a interface homem-
máquina tende-se a se tornar precária. Por esse
motivo alguns princípios básicos foram definidos
por estudiosos da área, de maneira a garantir
uma boa interação homem-computador.

6
Os princípios estudados serão:
●
Visibilidade e Affordances
●
●
Bons mapeamentos
●
Feedback

7
visibilidade
Apenas as coisas necessárias têm que estar visíveis, indicando quais as partes
podem ser operadas e como o usuário interage com um dispositivo.
Visibilidade indica o mapeamento entre ações pretendidas e ações reais,
além de indicar também distinções importantes. A visibilidade do efeito da
operação mostra se esta foi executada como pretendida.

8
visibilidade
O que torna muitos dispositivos difíceis de
serem operados é justamente a falta de
visibilidade. Designers devem prover sinais que
claramente indiquem ao usuário como proceder
diante de uma determinada situação.

9
Má visibilidade

10
Má visibilidade

11
Má visibilidade

12
boa visibilidade

13
affordances
Affordances é o termo definido para se referir às
propriedades percebidas e propriedades reais de
um objeto, que deveriam determinar como ele
pode ser usado. Quando em um sistema se tem a
predominância da affordance, o usuário sabe que
ação tomar somente olhando, sem a necessidade
de figuras, rótulos ou instruções.

14
affordances
Ex.: Cada controle tem uma maneira de
proporcionar a interação do usuário

15
affordances
Exemplo de mal affordance. Os checkboxes vão fazer as pessoas quererem clicar nos
dois.

16
affordances
Fácil estilização

17
Um bom modelo conceitual permite prever o
efeito das ações. Sem este modelo bem definido
o usuário efetua as operações solicitadas e não
sabe que efeito esperar ou, o que fazer caso
aconteça algo errado. O modelo conceitual é
portanto claro, e até óbvio, e exige um efetivo
uso de affordances.

18
Exemplo: Consideremos o exemplo da tesoura.
Mesmo que nunca tenhamos visto uma
anteriormente, é claro seu limitado número de
funções possíveis. Os buracos deixam claro que
algo deve ser colocado neles, e a única coisa
lógica de se colocar e que podem ser encaixados
são os dedos.

19
Os buracos possuem affordance
que possibilita que os dedos sejam
inseridos. O tamanho dos buracos
provêm restrições que limitam quais
dedos podem ser usados: os dedos
são sugeridos e outras restringidos
pelos buracos.

20
Consegue-se entender a tesoura e
seu funcionamento porque suas
partes são visíveis e as implicações
claras. O modelo conceitual é,
portanto, claro e até óbvio e existe
um efetivo uso de affordance.

21

22
Bons mapeamentos
O relacionamento entre duas entidades é
denominado de mapeamento. Especificamente
em interfaces computacionais, indica o
relacionamento entre os controles e seus
movimentos e os resultados.

23
Exemplo de Bons mapeamentos
Vamos recorrer ao exemplo dos carros e os mapeamentos
envolvidos em dirigir um carro. Quando queremos ir para a
direita, deveremos virar o volante também para a direita.
O usuário identifica dois mapeamentos:
●
o controle que afeta a direção
●
o volante que precisa ser virado em uma das duas direções

24
Exemplo de Bons mapeamentos
●
Ambos são arbitrários, mas a roda e o sentido
horário são escolhas naturais: visíveis, muito
relacionado ao resultado esperado, e provêm
um feedback imediato.
●
O mapeamento é facilmente aprendido e
sempre lembrado.

25
Bons mapeamentos
Mapeamentos naturais levam ao entendimento
imediato, desde que aproveitem analogia física
e padrões culturais.
Um objeto é fácil de ser usado quando existe
um conjunto visível de ações possíveis, e os
controles exploram mapeamentos naturais.

26
feedback
É princípio básico de sistemas computacionais o retorno ao usuário sobre as ações
que foram executadas e seus resultados obtidos. Sem um feedback o usuário sente-se
“perdido”, sem a certeza de que sua solicitação foi executada, se ocorreu algum erro,
se há a necessidade da execução de outro procedimento para continuidade do
processo. É de grande importância a preocupação com o retorno da ação ao utilizador
do sistema, transmitindo confiança, segurança e transparência do sistema.

27
Exemplo de feedback
A um tempo atrás, ao imprimir documentos em
impressoras de rede nos deparávamos com alguns
problemas clássicos como:
●
qual foi mesmo a impressora?
●
a impressão já terminou ou não?
●
o documento foi mesmo impresso ou houve algum
problema?

28
Exemplo de feedback
Atualmente conseguimos visualizar essas informações e até
mesmo reverter algumas ações através do spool de impressão.

Aula: Princípios de design de interfaces

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Aula: Princípios de design de interfaces

Similar to Aula: Princípios de design de interfaces (20)

More from Janynne Gomes

More from Janynne Gomes (19)

Aula: Princípios de design de interfaces

Editor's Notes