Interface Humano Computador

6.871 visualizações

Publicada em

Publicada em: Educação, Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
6.871
No SlideShare
0
A partir de incorporações
0
Número de incorporações
19
Ações
Compartilhamentos
0
Downloads
217
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Interface Humano Computador

  1. 1. Disciplina: Interface Humano-Computador<br />Prof: João Carlos da Silva Junior<br />
  2. 2. Definição<br />Interação homem-computador é o conjunto de processos, diálogos, e ações através dos quais o usuário humano interage com um computador.<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />2<br />
  3. 3. Humano-Computador<br />Devido ao fato da interação homem-computador estudar o homem e a máquina em comunicação é necessário, ao estudioso da área, o conhecimento tanto de máquinas como do ser humano.<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />3<br />
  4. 4. Humano (Homem)<br />teoria da comunicação;<br />disciplinas de projeto gráfico e industrial;<br />lingüística;<br />ciências sociais;<br />psicologia cognitiva e desempenho humano<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />4<br />Questões sobre a memória , atenção, percepção<br />
  5. 5. Máquinas<br />conhecimento de técnicas de computação gráfica;<br />sistemas operacionais;<br />linguagens de programação;<br />ambientes de desenvolvimento;<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />5<br />
  6. 6. Exemplos<br />IPHONE<br />MinorityReport<br />Microsoft Surface<br />Terminais de ATM<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />6<br />
  7. 7. Introdução<br />Resultado do design é um produto<br />O produto é derivado das especificações fornecidas pelo cliente<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />7<br />
  8. 8. Modelo Cascata<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />8<br />
  9. 9. Modelo Cascata<br />Desvantagens<br />É difícil entender completamente e expressar os requisitos do usuário antes que algum design tenha sido feito<br />Os custos para manutenção são maiores<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />9<br />
  10. 10. Modelo Espiral<br />Tentativa de melhorar o Modelo Cascata<br />Apesar de usar os mesmos processos (Análise de Requisitos, Design e Implementação), mostra maior interação entre essas fases<br />Introduz a idéia de prototipagem para maior entendimento dos requisitos<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />10<br />
  11. 11. Modelo Espiral<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />11<br />
  12. 12. DESIGN CENTRADO NO HUMANO (DCH)<br />Surgiu em resposta aos vários problemas encontrados nos modelos anteriores<br />Pressupostos Importantes<br />O resultado de um bom design é a satisfação do cliente<br />O processo de design envolve uma colaboração entre designers e clientes<br />O cliente e o designer estão em constante comunicação durante o processo<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />12<br />
  13. 13. DESIGN CENTRADO NO HUMANO (DCH)<br />Objetivos<br />Produzir sistemas fáceis de aprender e usar<br />Seguros e Efetivos em facilitar as atividades do usuário<br />Importante: <br />Testes freqüentes com o usuário usando representações informais e prototipagem.<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />13<br />
  14. 14. Modelo de Eason<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />14<br />
  15. 15. Modelo Estrela<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />15<br />
  16. 16. MODELO DE SHNEIDERMAN<br />Modelo baseado em 3 “Pilares”<br />No início do processo, o designer deve gerar um conjunto de guidelines<br />O segundo pilar é composto de ferramentas de prototipagem<br />O terceiro pilar é dedicado a testes de usabilidade - avaliação com experts e testes com usuários<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />16<br />
  17. 17. MODELO DE SHNEIDERMAN<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />17<br />
  18. 18. MODELO LUCID (LogicUser-Centered Interface Design)<br />Desenvolver o conceito do produto<br />Realizar pesquisa e análise das necessidades - usando construção de cenários, design participativo, fluxo e seqüência de tarefas<br />Criar conceitos e protótipos de telas - usando guidelines, guias de estilo e metáforas para o design<br />Design interativo e refinamento - expandindo o protótipo para sistema completo; inclui avaliação por experts e testes de usabilidade<br />Implementação e Suporte<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />18<br />
  19. 19. O que leva a um bom design?<br />Escolha um domínio no qual muitas pessoas estão envolvidas<br />Estude a natureza das ações dessas pessoas naquele domínio, especialmente em ações repetitivas<br />O que elas reclamam mais?<br />Que ações gostariam de realizar?<br />Defina software que imite padrões de ação incluindo funções que não poderiam ser feitas manualmente<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />19<br />
  20. 20. O que leva a um bom design?<br />Crie protótipos o mais cedo possível e observe como as pessoas reagem, o que “quebra”a experiência delas<br />Mantenha comunicação com elas<br />Projetar para usuários x Projetar com usuários<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />20<br />
  21. 21. Não Esquecer - IHC<br />Conheça o usuário<br />Minimize memorização<br />Reduza a carga de memória do usuário<br />Otimize operacionalização<br />Coloque o usuário no controle da interface<br />Previna erros<br />Torne a interface do usuário consistente<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />21<br />
  22. 22. Colocar o usuário no controle<br />Permitir o uso de mouse e teclado<br />Mostrar mensagens descritivas e textos<br />Prover ações e feedbacks imediatos e reversíveis<br />Prover caminhos e saídas significativos<br />Acomodar-se a diferentes habilidades de usuários (Acessibilidade)<br />Tornar a interface do usuário transparente<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />22<br />
  23. 23. Colocar o usuário no controle<br />Permitir que usuários adaptem a interface<br />Permitir a manipulação direta da interface<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />23<br />
  24. 24. Reduzir a carga de memória<br />Realçar a demanda da memória de curto prazo<br />Contar com o reconhecimento e não relembrança<br />Prover pistas visuais<br />Prover ‘defaults, undo e redo’<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />24<br />
  25. 25. Reduzir a carga de memória<br />Prover atalhos de interface<br />Prover uma sintaxe objeto-ação<br />Usar metáforas do mundo real<br />Prover clareza visual<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />25<br />
  26. 26. Tornar a interface consistente<br />Manter consistência intra e entre aplicações<br />Manter os resultados da interface<br />Prover apelos estéticos e integridade<br />Dar suporte ao contexto das tarefas<br />Uso cotidiano<br />Configuração<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />26<br />
  27. 27. Reconhecer o usuário<br />Perfil de usuários<br />Novato ou usuários de primeiro momento<br />Conhecedor ou usuário intermitente<br />Usuários experientes<br />Conseqüência para o design<br />Proposição da interface em múltiplos níveis<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />27<br />
  28. 28. Prevenir Erros<br />Completar sentenças<br />Corrigir comandos<br />?<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />28<br />
  29. 29. Diretrizes – Projeto Interfaces<br />Conheça o seu usuário ou cliente<br />Entenda a função do negócio<br />Entendimento dos princípios de bons projetos de telas<br />Desenvolva menus do sistema e esquemas de navegação<br />Selecione o tipo apropriado de janela<br />Selecione os dispositivos de controle apropriados<br />Escolha os controles de tela apropriados<br />Escreva mensagens e textos claros<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />29<br />
  30. 30. Diretrizes – Projeto Interfaces<br />Fornecer feedback, orientação e assistência efetivos<br />Fornecer internacionalização e acessibilidade efetivos<br />Criação de gráficos, ícones e imagens significativas<br />Escolha as cores apropriadas<br />Organização e layout de janelas e páginas<br />Teste, teste e teste<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />30<br />
  31. 31. O que são “guidelines”?<br />São orientações que devem ser consideradas na elaboração e avaliação de um software.<br />São criadas, principalmente, a partir do senso comum e da experiência na elaboração de outrosprojetos de software.<br />Os “guidelines” proporcionam uma valiosa e prática ferramenta para a aplicação de conceitos de interface voltada para o usuário, em um projeto de software.<br />O uso de “guidelines” não deve ser entendido como uma “receita de design”, mas sim como um conjunto de princípios norteadores do design.<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />31<br />
  32. 32. “Guidelines”<br />Princípios de design:<br />São guidelines maisgenéricas, exigemumainterpretação antes de ser aplicadas.<br />Ex.: Mantenha o site simples (p/websites)‏<br />Regras de design:<br />São guidelines em um nívelmaisdetalhado.<br />Ex.: Nãoofereçaumaopçãoparabuscasemtoda a rede a partir de seupróprio website”.<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />32<br />
  33. 33. “Guidelines”<br />Guia de estilo<br />Consisteemumacoleção de regras de design específicas e emprincípios dos quaisderivam as regras. <br />São maiscomunsnas “guidelines” de determinadosfabricantes, paradefinir a identidade visual da interface e garantirconsistênciatanto no produtoquanto entre produtos de um determinadofabricante.<br />Ex.: “Aocriar um íconecolorido, vocêdeveiniciarcriandoprimeiro a versãopreto e branco e depoisacrescentarcor”. (Macintosh)‏<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />33<br />
  34. 34. Onde encontrar?<br />http://warau.nied.unicamp.br/<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />34<br />
  35. 35. O que é usabilidade?<br />Características de um sistema<br />Fácil de Aprender<br />Fácil de Utilizar<br />Fácil de Relembrar<br />Tolerante a Erros<br />SubjetivamenteAgradável<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />35<br />
  36. 36. O que é usabilidade?<br />Combinar Objetivos<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />36<br />
  37. 37. O que é usabilidade?<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />37<br />
  38. 38. Usabilidade é importante?<br />Historicamente muitas empresas subestimaram a importância da Usabilidade no fracasso ou sucesso de seu projeto web<br />90% dos sites comerciais tem Usabilidade deficiente<br />Usabilidade é uma parte pequena de um projeto, porém a mais crítica porque é a parte que o usuário vê<br />Do ponto de vista do Usuário, Usabilidade pode ser a diferença entre executar uma atividade de maneira adequada ou se frustar<br />Do ponto de vista do Desenvolvedor, Usabilidadepode ser a diferença entre o Sucesso e o Fracasso do sistema<br />Do ponto de vista daGestão, um sistema de Usabilidadedeficientepodereduzir a produtividadedaforça de trabalho a um nívelatépior do quesem o sistema<br />Falta de Usabilidade, além de custar tempo e esforço extras, podedecretar a falência do projeto<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />38<br />
  39. 39. Usabilidade - Benefícios<br />Usuário<br />Fácil de Aprender e Usar<br />Gera Menos Stress<br />Gera Confiança no Sistema<br />Força de Trabalho mais Rápida e Eficiente<br />Diminui Custos de Treinamento e Help Desk<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />39<br />
  40. 40. Usabilidade - Benefícios<br />Gestão do Projeto<br />Melhora o Controle de Risco - consegue-se, por meio de testes, identificar os melhores designs<br />Simplifica o Planejamento e Reduz Retrabalho<br />Indica Evidência de Sucesso já na Fase de Testes<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />40<br />
  41. 41. Usabilidade - Benefícios<br />Desenvolvimento<br />Prova que o Design Funciona – os usuários validam o design bem antes do sistema ser construído, de modo que sabe-se que o design funcionará<br />Impossibilita Mudanças de Última hora<br />Redução no Número de Alterações pedidas durante a Homologação<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />41<br />
  42. 42. Estrutura do site<br />Refere-se a como a informação é organizada dentro de um site<br />Permite ao usuário procurar por relacionamento de informações, que revela:<br />Categorias<br />Hierarquias<br />Networks<br />A estruturação do Site possibilita ao usuário construir um modelo mental e também o ajuda a recordar informações<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />42<br />
  43. 43. Estrutura do site<br />Seqüencial – ideal para sites pequenos onde as informações fluem como uma narrativa<br />Tipo Teia (Web) – ideal para sites pequenos com usuários avançados. Acesso rápido a diferentes informações. Pode causar confusão para alguns usuários por não ser prático<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />43<br />
  44. 44. Estrutura do site<br />Hierárquica – uma das melhores formas de se organizar grupos de informação. Os usuários, além de estarem mais acostumados com estruturas hierárquicas, acham a metáfora mais familiar. A maioria dos sites comerciais e corporativos adota essa estrutura<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />44<br />
  45. 45. Estrutura do site – “Ruins”<br />Profundo e Estreito – uma estrutura de menu profunda e estreita esconde a informação. O usuário deve clicar por uma série de sub-menus.<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />45<br />
  46. 46. Estrutura do site – “Ruins”<br />Muito Largos – Estrutura ruim porque existem muitas opções no menu principal, sobrecarregando o usuário com informações<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />46<br />
  47. 47. Estrutura do site<br />Balanceada e Quadrangular – Estudos sugerem que uma mistura entre profundidade e largura podem oferecer um tempo ótimo de resposta. O usuário navega por um número mínimo de sub-menus e tem escolhas limitadas no nível do menu principal.<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />47<br />
  48. 48. Navegação<br />Ser regular, estruturada e hierárquicaporque o usuárioreconhecerá as consistências e relacionamentos, facilitando a suaexperiência com a navegação do site<br />Semprefornecerinformaçõespara o usuário de ondeeleestá, de ondeeleveio e paraondeelepodeir<br />Deixarbemclaroaosusuáriosque um certo link, sejaeletextoouimagem, é de fatoclicável e que o mesmo o levapara o lugaremqueeleesperair<br />Possibilitaraousuárionavegar de forma rápidapelaestrutura do site<br />Possibilitaraousuárioretornarsobreos links percorridos<br />Possibilitaraousuárioretornar a uma home page no caso dele se sentirperdido<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />48<br />
  49. 49. Navegação<br />Um site pode ter mais de um nível de navegação. É recomendado a utilização de Navegação Global e Local porque oferece uma maneira clara de se organizar e encontrar informação em um site<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />49<br />
  50. 50. Navegação<br />Processo<br />Agregação – Como em um menu, o nível principal deverepresentar a coleção dos demaisitens, maximizando o processo de navegação e evitandoque o usuário se perca<br />Sumarização – Representaumagrandequantidade de dados de forma condensada, comoporexemplousarpequenasimagens com um tamanho inferior, comorepresentação a de maioresresoluções. Otimizando o tempo de resposta de umadeterminadapágina.<br />Filtragem – exibirapenasinformaçõesrelevantesapósumadeterminadapesquisa.<br />Quebra – exibirapenas a parte inicial de umadeterminadainformação, dando a possibilidade de exibição do contextocomo um todo, em um link, ondeficaria a critério do própriousuário, selecioná-lo.<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />50<br />
  51. 51. Metas e Objetivos<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />51<br />
  52. 52. Metas de Eficiência<br />Qual o grau de dificuldade que os seus clientes encontram para comprar em seu site?<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />52<br />
  53. 53. Metas de Eficácia<br />Exemplo – Comércio Eletrônico<br />Qual é a taxa de conversão?<br />Qual é a taxa de abandono de carrinho?<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />53<br />
  54. 54. Metas de Aprendizado<br />Quanto tempo os seus usuários demoram para aprender a interagir com o seu website?<br />O seu site é auto-explicativo?<br />Existe alguma área que estimule o aprendizado sobre a utilização do seu produto ?<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />54<br />
  55. 55. Metas de Aprendizado<br />Exemplo – Comércio Eletrônico<br />Qual o tempo médio que as pessoas gastam para finalizar um pedido?<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />55<br />
  56. 56. Metas de Memorização<br />Depois que os seus clientes entram no seu site, eles conseguem lembrar como executaram uma tarefa?<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />56<br />
  57. 57. Protótipos<br />Antes de começar a fazer um site é feito um “wireframe” funcional, que nada mais é que um protótipo do produto final, remetendo a definição de toda a arquitetura de informação.<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />57<br />
  58. 58. Softwares - Wireframe<br />Axure<br />Gliffy<br />Visio<br />Como construir Wireframe<br />Direitos reservados conteúdo utilizado exclusivamente para fins didáticos<br />58<br />

×