Aula: Princípios de design de interfaces
-
Upload
janynne-gomes -
Category
Technology
-
view
944 -
download
1
Transcript of Aula: Princípios de design de interfaces
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
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
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
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
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?