licenciatura em engenharia informática sistemas gráficos e ...jpp/sgrai/interaccao...
TRANSCRIPT
![Page 1: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/1.jpg)
Licenciatura em Engenharia Informática
Sistemas Gráficos e Interacção
DEI-ISEP
![Page 2: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/2.jpg)
Plano da Apresentação
• Introdução– Definição de Sistema Interactivo
– Importância da Interface com o Utilizador
01-03-2007 2
– Importância da Interface com o Utilizador
– Definição de Usabilidade
– Domínios de Desenvolvimento
• Princípios Orientadores– Linhas de Orientação
![Page 3: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/3.jpg)
Sistema Interactivo
Acção
01-03-2007 3
• Sistema:– funcionamento– comunicação (interface com o utilizador - UI)
SistemaUtilizador
Reacção
![Page 4: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/4.jpg)
Importância da UI
• Para o utilizador, a interface é o sistema• A comunicação com o sistema é pelo menos tão
importante como a computação realizada pelo mesmo
01-03-2007 4
mesmo• O sucesso de uma aplicação depende da qualidade
da interface com o utilizador• 48% (valor médio) a quase 100% (valor máximo)
do código de um sistema interactivo está relacionado com o suporte da interface
![Page 5: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/5.jpg)
Importância da UI
• Custos associados à aquisição de Sistemas Interactivos:
01-03-2007 5
Interactivos:– hardware
– software
– personware (formação, utilização)
![Page 6: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/6.jpg)
Definição de Usabilidade
• “If your computer were a person, how long ‘til you punch it in the nose?”(Tom Carey, c. 1989)
• Combinação de características centradas no
01-03-2007 6
utilizador:– facilidade de aprendizagem
– rapidez na execução de tarefas
– taxa de erros reduzida
– satisfação subjectiva do utilizador
– retenção ao longo do tempo (Shneiderman, 1992)
![Page 7: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/7.jpg)
Desenvolvimento da Interacção
• Necessidades especiais não partilhadas com o desenvolvimento de software
• Conflito não susceptível de ser evitado:
01-03-2007 7
• Conflito não susceptível de ser evitado:– o que é melhor para o utilizador raramente é
fácil de levar à prática pelo programador
• Especialistas de IPM versus Engenheiros de Software e Programadores
![Page 8: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/8.jpg)
Domínios de Desenvolvimento da UI
Comportamental EstruturalObjecto de
desenvolvimento
Interacção Software que suporta a interacção
Ponto de vista adoptado Utilizador Sistema
01-03-2007 8
Objecto de
descrição
Acções do utilizador, percepções e tarefas
Reacções do sistema face às acções do utilizador
Aspectos
envolvidos
Factores humanos, cenários, representações detalhadas,
especificações de usabilidade, avaliação
Algoritmos, estruturas de dados, programação, widgets, callbacks
Teste Procedimentos efectuados pelo
utilizador
Procedimentos efectuados pelo sistema
![Page 9: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/9.jpg)
Princípios Orientadores
• Estudo dos factores humanos:– ciência da determinação dos princípios do
comportamento humano, baseada na realização
01-03-2007 9
comportamento humano, baseada na realização de testes empíricos com participantes humanos; objectivo: optimização da performance humana, designadamente a redução da taxa de erros e o aumento do rendimento, satisfação e conforto do utilizador
![Page 10: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/10.jpg)
Linhas de Orientação
• Regras gerais de “bom senso”, publicadas
01-03-2007 10
• Regras gerais de “bom senso”, publicadas em livros, relatórios e artigos científicos, publicamente disponíveis. O carácter da sua adopção não é obrigatório
![Page 11: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/11.jpg)
Design centrado no Utilizador
• Conhecer/envolver o utilizador:– entrevistas– observação no trabalho
01-03-2007 11
– observação no trabalho– análise de necessidades– análise do perfil dos utilizadores– análise de tarefas– análise do fluxo de informação
• Avaliação de usabilidade
![Page 12: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/12.jpg)
Design centrado no Utilizador
• Prevenir contra os erros do utilizador– edição baseada na sintaxe: por exemplo,
parêntese esquerdo/parêntese direito
01-03-2007 12
parêntese esquerdo/parêntese direito
– inibição, em função do contexto, de opções ilegais
– requerer a confirmação de acções potencialmente destrutivas
![Page 13: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/13.jpg)
Design centrado no Utilizador
• Optimizar as operações realizadas pelo utilizador:– teclas aceleradoras
01-03-2007 13
– teclas aceleradoras
– teclas de função
– macros (pré-definidos e definidos pelo utilizador)
– abreviaturas
![Page 14: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/14.jpg)
Design centrado no Utilizador
• Manter o controlo do lado do utilizador:
01-03-2007 14
– O utilizador deve sentir que comanda o sistema e não o contrário
– “Enter next command”versus “Ready for next command”
![Page 15: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/15.jpg)
Design centrado no Utilizador
• Ajudar o utilizador a familiarizar-se com o sistema:
01-03-2007 15
sistema:– de um modo geral, o utilizador não deverá
necessitar de mais do que uma página de informação para começar a trabalhar com um sistema que não conhece
![Page 16: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/16.jpg)
Modelo do Sistema
• Dar ao utilizador um modelo mental, consistente, do sistema, baseado nas tarefas a efectuar:
01-03-2007 16
a efectuar:– Paradigmas e metáforas de interacção:
• linha de comandos (acção-objecto; amo/escravo)• manipulação directa (objecto-acção; tampo da
secretária)• desenho (simultaneidade acção/objecto; papel/lápis)• etc.
![Page 17: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/17.jpg)
Consistência
• Princípio do menor espanto– o utilizador espera que tarefas similares sejam
01-03-2007 17
efectuadas de forma similar
– para semânticas similares deverão ser usadas sintaxes similares e vice-versa
• nomes das opções
• Macintosh: apagar ficheiro/ejectar disquete
![Page 18: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/18.jpg)
Simplicidade
Sistemas interactivos complexos
⇒
Interfaces complexas
01-03-2007 18
Interfaces complexas
• Tarefas simples deverão ser simples de efectuar
• Tarefas complexas deverão ser divididas em subtarefas mais simples
![Page 19: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/19.jpg)
Limitações da Memória Humana
• Hierarquização versus linearização na decomposição de tarefas grandes e
01-03-2007 19
decomposição de tarefas grandes e complexas em subtarefas mais pequenas e simples
• Reconhecer em vez de relembrar
![Page 20: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/20.jpg)
Aspectos Cognitivos
• Mnemónicas
• Analogias com o mundo real (metáforas):
01-03-2007 20
• Analogias com o mundo real (metáforas):– tampo da secretária: pastas, documentos, cesto
de reciclagem
– folha de cálculo
![Page 21: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/21.jpg)
Feedback
• Feedback informativo:– articulatório
– semântico
01-03-2007 21
– semântico
• Indicadores de estado para tarefas potencialmente demoradas– forma do cursor
– barra de progressão
![Page 22: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/22.jpg)
Feedback
• Tempo de resposta do sistema adequado à tarefa que está a ser efectuada:– dactilografia, movimentação do cursor,
01-03-2007 22
– dactilografia, movimentação do cursor, accionamento de um botão do rato: 50 a 150 ms
– tarefas simples e frequentes: inferior a 1 s
– tarefas vulgares: 2 a 4 s
– tarefas complexas: até 12 s
![Page 23: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/23.jpg)
Mensagens do Sistema
• Centradas no utilizador e nas tarefas a efectuar
01-03-2007 23
efectuar– “505 hex 0001F9 double words of storage were
not recovered”
– “Hit any key to continue”
![Page 24: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/24.jpg)
Mensagens do Sistema
• Positivas e não ameaçadoras
01-03-2007 24
• Positivas e não ameaçadoras– “Fatal error, run aborted”
– “Disastrous string overflow, job abandoned”
– “Catastrophic error, logged with operator”
![Page 25: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/25.jpg)
Mensagens do Sistema
• Termos informativos e construtivos nas mensagens de erro
01-03-2007 25
mensagens de erro– “Invalid entry”
– “Inventory part number is out of allowable range”
– “Inventory numbers range from 0000 to 9999”
![Page 26: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/26.jpg)
Mensagens do Sistema
• O sistema deve assumir a culpa dos erros
01-03-2007 26
• O sistema deve assumir a culpa dos erros– “Illegal command” versus “Unrecognized
command”
![Page 27: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/27.jpg)
Antropomorfização
• Não antropomorfizar (não atribuir
01-03-2007 27
• Não antropomorfizar (não atribuir características humanas a objectos não humanos tais como, por exemplo, automóveis e computadores)
![Page 28: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/28.jpg)
Modalidade
• Um modo de interacção é um estado da interface no qual uma acção do utilizador
01-03-2007 28
interface no qual uma acção do utilizador tem um significado diferente (e um resultado diferente) do que teria noutro modo/estado qualquer
• Indicadores de modo
![Page 29: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/29.jpg)
Reversibilidade
• A possibilidade de “desfazer” acções com facilidade encoraja os utilizadores no
01-03-2007 29
facilidade encoraja os utilizadores no sentido de explorarem o sistema:– existência de um comando “undo”
– navegação pelo sistema
![Page 30: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/30.jpg)
Chamada de Atenção
• Os avanços da tecnologia proporcionam inúmeras maneiras de chamar a atenção do
01-03-2007 30
inúmeras maneiras de chamar a atenção do utilizador. Esta prática deve ser usada criteriosamente, de forma a evitar usos incorrectos ou excessivos
![Page 31: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/31.jpg)
Chamada de Atenção
• Texto– tipos– tamanhos– negritos, sublinhados, intermitências
01-03-2007 31
– negritos, sublinhados, intermitências– maiúsculas
• Áudio– sons suaves/ásperos
• Cores– quantidade– códigos (redundância, convenções)
![Page 32: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/32.jpg)
Visualização
• Manter a inércia
• Organizar o conteúdo das janelas de modo a gerir a complexidade
01-03-2007 32
gerir a complexidade– texto conciso
– baixa densidade global
– baixa densidade local
– aspecto geral equilibrado
![Page 33: Licenciatura em Engenharia Informática Sistemas Gráficos e ...jpp/sgrai/Interaccao Pessoa-Maquina.pdfSistemas Gráficos e Interacção DEI-ISEP. Plano da Apresentação • Introdução](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fdd658670bc8724a3721ce2/html5/thumbnails/33.jpg)
Utilizadores
• Ter em conta as preferências pessoais– personalização da interface
• Ter em conta os diferentes níveis de
01-03-2007 33
• Ter em conta os diferentes níveis de experiência– inexperiente
– intermitente
– experiente