Aula: Princípios de design de interfaces

download Aula: Princípios de design de interfaces

of 28

  • date post

    23-Jan-2018
  • Category

    Technology

  • view

    937
  • download

    1

Embed Size (px)

Transcript of Aula: Princípios de design de interfaces

  1. 1. IHM INTERFACE HOMEM-MQUINA Disciplina
  2. 2. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 2 UNIDADE DE APRENDIZAGEM Fundamentos de interface homem- mquina
  3. 3. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 3 Princpios de Design Visibilidade e Affordance Bom modelo conceitual Bons mapeamentos Feedback ROTEIRO DA AULA
  4. 4. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 4 TPICO Princpios de design
  5. 5. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 5 Princpios de design Muitas vezes, pela complexidade de determinados sistemas, a interface homem- mquina tende-se a se tornar precria. Por esse motivo alguns princpios bsicos foram definidos por estudiosos da rea, de maneira a garantir uma boa interao homem-computador.
  6. 6. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 6 Princpios de design Os princpios estudados sero: Visibilidade e Affordances Bom modelo conceitual Bons mapeamentos Feedback
  7. 7. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 7 visibilidade Apenas as coisas necessrias tm que estar visveis, indicando quais as partes podem ser operadas e como o usurio interage com um dispositivo. Visibilidade indica o mapeamento entre aes pretendidas e aes reais, alm de indicar tambm distines importantes. A visibilidade do efeito da operao mostra se esta foi executada como pretendida.
  8. 8. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 8 visibilidade O que torna muitos dispositivos difceis de serem operados justamente a falta de visibilidade. Designers devem prover sinais que claramente indiquem ao usurio como proceder diante de uma determinada situao.
  9. 9. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 9 M visibilidade
  10. 10. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 10 M visibilidade
  11. 11. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 11 M visibilidade
  12. 12. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 12 boa visibilidade
  13. 13. IHM - Interface Homem Mquina Prof. 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 predominncia da affordance, o usurio sabe que ao tomar somente olhando, sem a necessidade de figuras, rtulos ou instrues.
  14. 14. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 14 affordances Ex.: Cada controle tem uma maneira de proporcionar a interao do usurio
  15. 15. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 15 affordances Exemplo de mal affordance. Os checkboxes vo fazer as pessoas quererem clicar nos dois.
  16. 16. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 16 affordances Fcil estilizao
  17. 17. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 17 Bom modelo conceitual Um bom modelo conceitual permite prever o efeito das aes. Sem este modelo bem definido o usurio efetua as operaes solicitadas e no sabe que efeito esperar ou, o que fazer caso acontea algo errado. O modelo conceitual portanto claro, e at bvio, e exige um efetivo uso de affordances.
  18. 18. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 18 Bom modelo conceitual Exemplo: Consideremos o exemplo da tesoura. Mesmo que nunca tenhamos visto uma anteriormente, claro seu limitado nmero de funes possveis. Os buracos deixam claro que algo deve ser colocado neles, e a nica coisa lgica de se colocar e que podem ser encaixados so os dedos.
  19. 19. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 19 Bom modelo conceitual Os buracos possuem affordance que possibilita que os dedos sejam inseridos. O tamanho dos buracos provm restries que limitam quais dedos podem ser usados: os dedos so sugeridos e outras restringidos pelos buracos.
  20. 20. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 20 Bom modelo conceitual Consegue-se entender a tesoura e seu funcionamento porque suas partes so visveis e as implicaes claras. O modelo conceitual , portanto, claro e at bvio e existe um efetivo uso de affordance.
  21. 21. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 21 Bom modelo conceitual
  22. 22. IHM - Interface Homem Mquina Prof. 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.
  23. 23. IHM - Interface Homem Mquina Prof. 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 tambm para a direita. O usurio identifica dois mapeamentos: o controle que afeta a direo o volante que precisa ser virado em uma das duas direes
  24. 24. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 24 Exemplo de Bons mapeamentos Ambos so arbitrrios, mas a roda e o sentido horrio so escolhas naturais: visveis, muito relacionado ao resultado esperado, e provm um feedback imediato. O mapeamento facilmente aprendido e sempre lembrado.
  25. 25. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 25 Bons mapeamentos Mapeamentos naturais levam ao entendimento imediato, desde que aproveitem analogia fsica e padres culturais. Um objeto fcil de ser usado quando existe um conjunto visvel de aes possveis, e os controles exploram mapeamentos naturais.
  26. 26. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 26 feedback princpio bsico de sistemas computacionais o retorno ao usurio sobre as aes que foram executadas e seus resultados obtidos. Sem um feedback o usurio sente-se perdido, sem a certeza de que sua solicitao foi executada, se ocorreu algum erro, se h a necessidade da execuo de outro procedimento para continuidade do processo. de grande importncia a preocupao com o retorno da ao ao utilizador do sistema, transmitindo confiana, segurana e transparncia do sistema.
  27. 27. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 27 Exemplo de feedback A um tempo atrs, ao imprimir documentos em impressoras de rede nos deparvamos com alguns problemas clssicos como: qual foi mesmo a impressora? a impresso j terminou ou no? o documento foi mesmo impresso ou houve algum problema?
  28. 28. IHM - Interface Homem Mquina Prof. Janynne L. S. Gomes 28 Exemplo de feedback Atualmente conseguimos visualizar essas informaes e at mesmo reverter algumas aes atravs do spool de impresso.