Introdução a IHC

4.072 visualizações

Publicada em

Aula introdutória sobre Interação Humano-Computador

0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
4.072
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
104
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução a IHC

  1. 1. UNIVERSIDADE FEDERAL RURAL DE PERNAMBUCOCENTRO DE EDUCAÇÃO A DISTÂNCIA LICENCIATURA EM COMPUTAÇÃO INTERFACE HOMEM-MAQUINA PRIMEIRO ENCONTRO PRESENCIAL Tutor: Rodrigo Lins Rodrigues rodrigomuribec@hotmail.com 2011.2
  2. 2. Interface Homem-Máquina48/2 Visão geral sobre a disciplina… EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  3. 3. Agenda3 Objetivos da disciplina  Conteúdo  Metodologia  Avaliações  Datas importantes  Outras informações pertinentes EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  4. 4. Quais os objetivos?48/4  A objetivo principal da disciplina de Interface Homem-Máquina é apresentar uma visão geral das bases teóricas, modelos e métodos para o projeto e a avaliação de interfaces homem-máquina.  (Interface Homem-Máquina) = (Interação Humano-Computador) = (Design da Interação); EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  5. 5. Quais os objetivos específicos?48/5  Possibilitar o desenvolvimento de protótipos de interfaces para aplicações computacionais;  Discutir metas e métodos para a avaliação de interfaces homem-máquina;  Discutir aspectos relativos ao projeto e avaliação da documentação de produtos;  Apresentar paradigmas de interação homem- máquina emergentes EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  6. 6. Qual o conteúdo programático planejado?48/6  Parte I – Fundamentos e conceitos sobre IHC  Interfaces  Cognição visual e níveis cognitivos  Ergonomia e usabilidade  Parte II – Design e linguagem visual  Princípios gerais de design de interface  Ícones e textos  Estrutura de interface e layout  Imagens e função de comunicação  Parte III – Design e metodologia  Discussão sobre o projeto de interface EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  7. 7. Quais os tipos de atividades de avaliação?48/7  Será constituído de dois tipos:  Atividades virtuais  Participaçãonos fóruns e chats  Realização das atividades virtuais  Atividades presenciais  Apresentação de seminários (1AVA)  Realização e apresentação de projetos (2AVA)  Avaliação tradicional (3AVA) EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  8. 8. Como será a avaliação?48/8  Adotaremos o procedimento padrão de avaliação da Instituição, isto é…. a nota de avaliação corresponde a média dada pelas notas obtidas com as atividades virtuais e a nota da avaliação presencial  A média das atividades virtuais corresponderá a 30% da nota final e a média das avaliações presenciais corresponderá a 70% . EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  9. 9. Como serão as avaliações?48/9  Primeira avaliação (1AVA): corresponderá  apresentação de um seminário em equipe considerando algum dos temas proposto para a disciplina.  Segunda avaliação (2AVA): corresponderá a  apresentação e entrega de um projeto de interface de software. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  10. 10. Seminário da Disciplina48/10  A 1AVA consistirá da elaboração e apresentação de um seminário com tema relacionado ao conteúdo da disciplina e previamente estabelecido;  O seminário será realizado em EQUIPE;  Não poderá haver duas equipes com um mesmo tema; EAD/UFRPE - LC - PLANO DE ENSINO 2011.2
  11. 11. Temas sugeridos para o Seminário48/11  Pode ser um dos seguintes:  Ergonomia do software *  Engenharia Cognitiva  Engenharia Semiótica  Estilos ou modelos de interação homem- computador  Princípios de design para o software educacional *  Processo de design de interface *  Design de interface para a web *  Design de interface para software multi-usuário *  Acessibilidade * EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  12. 12. Entregas referente ao Seminário48/12  Deverão ser entregues para avaliação (postado no ambiente):  1) Apresentação do seminário (slides)  2) Resumo do conteúdo apresentado no seminário  Não esqueçam de nomear o arquivo segundo o padrão:  Nome do Pólo-Tema do Seminário.zip, exemplo CAUCAIA- Modelos de Interação.zip Apresentação É de extrema importância a postagem desses documentos, pois eles representam a evidência de que vocês realizaram a 1AVA. EAD/UFRPE - LC - PLANO DE ENSINO 2011.2
  13. 13. Sobre o Resumo48/13  O resumo a ser elaborado deve:  Ter no máximo 2 laudas;  Deve incluir os aspectos mais importantes do tema  E duas perguntas relevantes sobre o tema apresentado a serem respondidas pelos colegas (incluir no final do resumo) Esse resumo deve ser distribuído na turma. EAD/UFRPE - LC - PLANO DE ENSINO 2011.2
  14. 14. O Projeto Considerações Gerais48/14  A segunda avaliação (2AVA) corresponderá a realização de um projeto.  O projeto será realizado em equipe;  O tamanho da equipe será de 3 participantes; EAD/UFRPE - LC - PLANO DE ENSINO 2011.2
  15. 15. O Projeto48/15  A EQUIPE poderá selecionar uma das direções possiveis para o projeto:  1) O projeto poderá corresponder uma avaliação de um software educacional em termos de interface  2) O projeto poderá corresponder em uma proposta de projeto de interface para um software específico também proposto pela equipe A seguir explicaremos cada uma dessas direções…. EAD/UFRPE - LC - PLANO DE ENSINO 2011.2
  16. 16. O Projeto Direção 1: Avaliação de um Software48/16  A equipe deverá selecionar um software, preferencialmente e avaliá-lo em termos de usabilidade e ergonomia;  A escolha do software é livre, contudo é necessário submetê-lo para avaliação pela equipe de professores da disciplina;  A avaliação da interface do software deverá atender alguns critérios ainda a definir na disciplina (aguarde maiores detalhes sobre esse ponto).  O resultado da análise deverá ser apresentado tanto em forma de apresentação quanto em EAD/UFRPE - LC - PLANO DE ENSINO 2011.2 relatório.
  17. 17. O Projeto Direção 2: Desenhando uma proposta de48/17 interface  A equipe deverá propor o projeto (desenho) de interface para um software proposto pela mesma;  O software proposto pode ser reaproveitado de alguma outra disciplina já cursada pela equipe (exemplo: Gerência de Projetos e Jogos Educacionais);  Deverá ser entregue o desenho da interface em forma de documento segundo o guia a ser disponibilizado na disciplina. EAD/UFRPE - LC - PLANO DE ENSINO 2011.2
  18. 18. Entregas do Projeto48/18  Deverão ser entregues para avaliação (postado no ambiente):  1) Apresentação  2) Relatório ou desenho da interface EAD/UFRPE - LC - PLANO DE ENSINO 2011.2
  19. 19. Algumas datas importantes….48/19 EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  20. 20. Entendendo um pouco sobre a área de IHC
  21. 21. O que é IHC Início: Segunda Guerra, reafirma-se dec 60; Sinônimos: fatores humanos (UK), ergonomia (US), Interação Homem – Máquina; O desempenho do usuário no contexto de qualquer sistema: computacional, mecânico, ou manual; Homem + Computador + Interação ;
  22. 22. O que é IHC? Interação Humano-Computador (IHC): área de estudo que está na interseção das ciências da computação e informação e ciências sociais e comportamentais e envolve todos os aspectos relacionados com a interação entre usuários e sistemas. A interação humano-computador estuda tanto os fatores computacionais quanto os fatores humanos e surgiu como um campo autônomo de estudo na interseção das áreas de:  computação gráfica,  sistemas operacionais,  fatores humanos,  ergonomia,  engenharia industrial,  psicologia cognitiva...
  23. 23. O que é IHC48/23 Interação Sistema Usuário EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  24. 24. Disciplinas associadas à IHC Psicologia Psicologia Social e Cognitiva Organizacional Ergonomia e Ciência da Fatores computação Humanos Conhecimento eInteligência Habilidades dos Engenharia Teorias, Especialistas em IHC Artificial Métodos, Design Técnicas e Lingüística Ferramentas Antropologia Filosofia de Sociologia Design de IHC
  25. 25. Conceitos gerais de IHCProblemas Comuns no Desenvolvimento de Sistemas foco no sistema (versus foco no usuário); desprezo pela interface; impacto da introdução de novas tecnologias desprezado; base teórica dos desenvolvedores fraca ou inexistente; design de software desconsiderado; processo de desenvolvimento inadequado; ferramentas inadequadas; interação usuário-sistema não avaliada;
  26. 26. Profissões Designers de Informação  Pessoal envolvido no desenho de todos os aspectos interativos em um produto, não somente o design gráfico e de interface. Engenheiros de Usabilidade  Pessoal que avaliam produtos utilizando métodos e princípios de usabilidade. Webdesigners  Desenvolvem e criam o design visual de websites – os leiautes, por exemplo. Arquitetos da Informação  Têm ideias de como planejar e estruturar produtos interativos.
  27. 27. Interface O conceito de interface é utilizado em diferentes áreas da ciência da computação e é importante no estudo da interação homem-máquina, no projeto de dispositivos de hardware, na especificação de linguagens de programação e também em projetos de desenvolvimento de software. A interface existente entre um computador e um humano é conhecida como interface do usuário. As interfaces utilizadas para conectar componentes de hardware são chamadas de interfaces físicas.
  28. 28. Exemplos de interfaces
  29. 29. Exemplos de interfaces
  30. 30. Exemplos de interfaces
  31. 31. xxxxxxx48/31  zxxxxxx EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  32. 32. Usabilidde
  33. 33. Usabilidade Termo usado para definir a facilidade com que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa específica e importante; Em IHC, usabilidade normalmente se refere à simplicidade e facilidade com que uma interface, um programa de computador ou um website pode ser utilizado. O termo também é utilizado em contexto de produtos como aparelhos eletrônicos, em áreas da comunicação e produtos de transferência de conhecimento, como manuais, documentos e ajudas online.
  34. 34. Questões importantes sobre navegação e usabilidade Questões gerais:  Onde estou?  Para onde posso ir?  Como eu cheguei aqui?  Como posso voltar para o lugar de onde sai?Por que estudar IHC ?
  35. 35. Problema de Usabilidade ...qualquer coisa que interfira com a habilidade do usuário em completar suas tarefas de forma efetiva e eficiente. (Karat, 1992) ... um aspecto do sistema e/ou da demanda sobre o usuário que torna o sistema desagradável, ineficiente, oneroso ou impossível de permitir a realização dos objetivos do usuário em uma situação típica de uso. (Lavery et al, 1997)
  36. 36. O Processo de Engenharia de Usabilidade
  37. 37. Indicações de leitura48/37 EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  38. 38. Ergonomia
  39. 39. Qualidades ergonômicas de uma interface As qualidades ergonômicas são tanto da interface quanto do software em si; Então a pergunta é: por onde começar um projeto que seja realmente ergonômico? Pela interface, pois é através dela que um programador vai entender as suas necessidades com relação a um produto. Mais à frente, veremos questões metodológicas, mas aqui colocaremos oito critérios veremos questões metodológicas, mas aqui colocaremos oito critérios gerais para o sucesso de uma interface com base em estudos de Scapain e Bastien do INRIA.
  40. 40. A CONDUÇÃO (1)48/40  Ele apresenta uma série de mensagens úteis para que o usuário sinta-se seguro em interagir;  Estas mensagens aparecem em forma de alertas, rótulos, pequenos textos que ocorrem no momento e local exatos EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  41. 41. CARGA DE TRABALHO (2)48/41  Um software ergonômico permite fácil aprendizado porque sua interface e estrutura permitem que o usuário aprenda rapidamente como utilizá-lo, diminuindo a quantidade de falhas na interação e sobrecarga cognitiva;  Quanto maior a carga de trabalho cognitivo do usuário, maior a possibilidade de cometer erros. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  42. 42. CONTROLE EXPLÍCITO (3)48/42  Este critério diz que o software deve ser “obediente” e que o usuário deve ter total controle sobre ele;  É necessário que o usuário consiga decidir e concretizar as ações no decorrer da interação. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  43. 43. ADAPTABILIDADE (4)48/43  É a característica de poder fazer as mesmas tarefas de diferentes formas;  Quando um software permite isso, está possibilitando aos usuários de diferentes níveis de experiência a “customização” ou “personalização” da interface. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  44. 44. GESTÃO DE ERROS (5)48/44  Prever alertas aos usuários, quando estes entram com dados inadequados. Verificação ortográfica Digite apenas do Microsoft word letras no login EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  45. 45. HOMOGENEIDADE/COERÊNCIA (6)48/45  Interfaces devem apresentar determinado padrão estético;  O usuário não pode ter a impressão de que, de uma hora para outra, tudo mudou e “parece” que está em outro software. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  46. 46. SIGNIFICADO DOS CÓDIGOS (7)48/46  Quanto mais universal for o significado das figuras utilizadas para formar a interface, mais abrangente será o público a ser atingido; EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  47. 47. COMPATIBILIDADE (8)48/47  Significa que o que vemos na tela está compatível ou correspondente com o que sairá na impressora; EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  48. 48. Design de Interface
  49. 49. Elementos da comunicação visual48/49  A linguagem visual é fortemente definida pelo uso da cor em diversas aplicações;  Um dos cuidados que devemos ter é com o significado cultural, que é muito diverso;  É importante pesquisar o significado da cor para o usuário;  O uso do recurso da cor na interface como forma meramente decorativa é desaconselhado. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  50. 50. Elementos da comunicação visual48/50  É importante também observar a relação das cores entre si; EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  51. 51. Ícones e textos48/51  Todos nós utilizamos ícones quando interagimos com um software de interface gráfica;  A classificação é feita pela área da semiótica, que se dedica ao estudo dos signos; EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  52. 52. Ícones e textos48/52  Veja o que os ícones podem representar , estando ou não associados a textos: EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  53. 53. Fontes48/53  Existem fontes desenhadas em estilos diversos, mas uma característica que é comum a um grande grupo de fontes é a presença de serifa;  É uma terminação saliente no desenho da fonte, cujo uso normalmente é recomendado para documentos impressos, EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  54. 54. Estrutura da Interface48/54  O desenho de uma interface sempre está influenciado fortemente pelo dispositivo onde aparece;  No caso dos monitores de computador, sempre estamos lidando com uma estrutura retangular;  Em interfaces retangular olhamos de cima para baixo e da esquerda para a direita porque na nossa cultura é assim que lemos EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2 os textos.
  55. 55. Estrutura da Interface48/55  No canto superior direito, onde a varredura visual não se detém muito, é o local propício para informação e janelas menos utilizadas durante a interação, como menus de ajuda, por exemplo. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  56. 56. Estrutura da Interface48/56  O lado esquerdo tem grande quantidade de informação e se aplica para menus. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  57. 57. Estrutura da Interface48/57  A parte inferior direita é o campo de fechamento visual, importante para localizar ícones de navegação ou mensagens relativas à passagem de uma página para outra. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  58. 58. Estrutura da Interface (Camadas)48/58  Além da organização dos elementos visuais, no sentido bidimensional, temos que perceber a interface como camadas de imagens;  Temos a percepção da sobreposição e dos elementos que possuem maior grau de importância, como sendo o que está “na frente”; EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  59. 59. Imagens e função de comunicação na interface48/59  Na interface, as imagens adquirem funções de comunicação que são úteis para orientar o usuário;  Existem muitas funções para as imagens, mas podemos enumerar quatro que quase sempre serão percebidas: Ilustrativa, taxonômica, sinalização e operativa. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  60. 60. Imagens e função de comunicação na interface48/60 Função Ilustrativa: Esta é uma das funções mais usadas. Imagens com esta função são representações gráficas de ferramentas, processos, funções, esquemas ou situações que servem para chamar a atenção ou designar algum conceito; EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  61. 61. Imagens e função de comunicação na interface48/61 Função taxonômica: Para definir como os elementos de uma interface (textos, ícones, animações, barras de menu, entre outros) são organizados; EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  62. 62. Imagens e função de comunicação na interface48/62 Função de sinalização: As imagens com este atributo são extremamente importantes porque sinalizam, isto é, orientam o usuário na tomada de decisões durante a interação. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  63. 63. Imagens e função de comunicação na interface48/63 Função operativa: Para operar qualquer aparelho, necessitamos de “botões” que nos permitam interagir .  Na interface, isso acontece por diversos grupos de botões e áreas onde podemos escrever;  Os mais comuns são os botões de caixa de ferramentas, setas de navegação e menus com palavras ou ícones explicativos; EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  64. 64. Layout48/64  Proximidade e alinhamento  Imagens que pertencem a um mesmo grupo devem estar próximas;  O alinhamento também permite estabelecer uma hierarquia que vai orientar a ordem de leitura na interface e, posteriormente, as ações na interação EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  65. 65. Layout48/65  Equilíbrio, proporção e simetria  As imagens que compõem a interface devem ter uma relação de harmonia;  Esta relação pode se dar de forma dinâmica ou estática: esta é quando temos pesos iguais em dois lados ou todos os elementos centralizados. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  66. 66. Layout48/66  Cores e contrastes  As cores e áreas claras e escuras orientam a atenção do usuário para determinadas partes da interface;  sendo úteis principalmente para dar ênfase, orientar a leitura e dar importância a um assunto EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  67. 67. Layout48/67  Consistência e identidade  Uma interface pode ser composta por diversas partes ou páginas que devem ter consistência ou identidade visual, a fim de permitir que as visualizemos como sendo da mesma “família”. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  68. 68. Layout48/68  Concisão  O design de uma interface pode estimular o uso indiscriminado de imagens;  Para comunicar-se bem, precisamos usar as palavras certas no momento certo;  Na interface também queremos nos comunicar bem, usando as imagens mais adequadas nos lugares e ordem certos para o melhor aprendizado. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  69. 69. Layout48/69  Visibilidade e Legibilidade  Nem tudo que é visível é legível;  Se você está a 5 metros de uma letra de meio centímetro de altura, ela vai ser visível, mas  certamente será ilegível, porque você não consegue saber de qual letra se trata;  Estes princípios são gerais, mas em todo projeto devem ser observados enquanto requisitos básicos de qualidade de design, sendo analisados nas interfaces. EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  70. 70. Design e metodologia
  71. 71. Projeto da Interface48/71  Ao projetar uma interface devemos entender o perfil do usuário;  Um perfil deve conter mais do que a idade e sexo;  Devemos investigar um pouco dos hábitos, costumes, e características de grupo, para podermos trazer para a interface as situações que tenham um significado relevante; EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  72. 72. Projeto da Interface48/72  Uma das primeiras decisões a serem tomadas é se vamos usar uma abordagem de design participativo ou não;  Inclui um ou mais usuários em determinadas fases do projeto;  Elimina retrabalho e diminui o tempo do projeto;  As falhas são corrigidas durante o andamento dos trabalhos, e não apenas no final; EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  73. 73. Metodologia de Projeto da Interface48/73  Metodologia de design ergonômico de interfaces humano-computador; EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2
  74. 74. Metodologia de Projeto da Interface48/74  Problematização: delimitar o problema de projeto. Quanto mais bem definido o problema, mais fácil a solução;  Análise: Entendimento do usuário;  Modelagem conceitual: descrever em palavras e imagens o que queremos que apareça na interface;  Modelagem visual: colocar tudo organizado na tela, usando do recurso de diagramação para dar ordem, hierarquia à informação visual;  Instalação da GUI: o software com a interface em funcionamento é instalado numa plataforma pré- determinada, onde se tem a possibilidade de realizar testes de usabilidade; EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2

×