Aula: Princípios de design de interfaces

28
IHM – INTERFACE HOMEM-MÁQUINA Disciplina

Transcript of Aula: Princípios de design de interfaces

IHM – INTERFACE HOMEM-MÁQUINADisciplina

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

2

UNIDADE DE APRENDIZAGEM

Fundamentos de interface homem-máquina

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

3

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

ROTEIRO DA AULA

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

4

TÓPICO

Princípios de design

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

5

Princípios de design

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.

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

6

Princípios de design

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

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

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.

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

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.

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

9

Má visibilidade

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

10

Má visibilidade

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

11

Má visibilidade

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

12

boa visibilidade

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

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.

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

14

affordances

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

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

15

affordances

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

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

16

affordances

Fácil estilização

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

17

Bom modelo conceitual

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.

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

18

Bom modelo conceitual

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.

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

19

Bom modelo conceitual

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.

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

20

Bom modelo conceitual

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.

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

21

Bom modelo conceitual

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

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.

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

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

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

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.

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

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.

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

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.

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

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?

IHM - Interface Homem MáquinaProfª. Janynne L. S. Gomes

28

Exemplo de feedback

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