1. Disciplina: Interface Humano-Computador Prof: João Carlos da Silva Junior

2. Definição 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. Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 2

3. Humano-Computador 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. Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 3

4. Humano (Homem) teoria da comunicação; disciplinas de projeto gráfico e industrial; lingüística; ciências sociais; psicologia cognitiva e desempenho humano Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 4 Questões sobre a memória , atenção, percepção

5. Máquinas conhecimento de técnicas de computação gráfica; sistemas operacionais; linguagens de programação; ambientes de desenvolvimento; Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 5

6. Exemplos IPHONE MinorityReport Microsoft Surface Terminais de ATM Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 6

7. Introdução Resultado do design é um produto O produto é derivado das especificações fornecidas pelo cliente Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 7

8. Modelo Cascata Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 8

9. Modelo Cascata Desvantagens É difícil entender completamente e expressar os requisitos do usuário antes que algum design tenha sido feito Os custos para manutenção são maiores Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 9

10. Modelo Espiral Tentativa de melhorar o Modelo Cascata Apesar de usar os mesmos processos (Análise de Requisitos, Design e Implementação), mostra maior interação entre essas fases Introduz a idéia de prototipagem para maior entendimento dos requisitos Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 10

11. Modelo Espiral Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 11

12. DESIGN CENTRADO NO HUMANO (DCH) Surgiu em resposta aos vários problemas encontrados nos modelos anteriores Pressupostos Importantes O resultado de um bom design é a satisfação do cliente O processo de design envolve uma colaboração entre designers e clientes O cliente e o designer estão em constante comunicação durante o processo Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 12

13. DESIGN CENTRADO NO HUMANO (DCH) Objetivos Produzir sistemas fáceis de aprender e usar Seguros e Efetivos em facilitar as atividades do usuário Importante: Testes freqüentes com o usuário usando representações informais e prototipagem. Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 13

14. Modelo de Eason Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 14

15. Modelo Estrela Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 15

16. MODELO DE SHNEIDERMAN Modelo baseado em 3 “Pilares” No início do processo, o designer deve gerar um conjunto de guidelines O segundo pilar é composto de ferramentas de prototipagem O terceiro pilar é dedicado a testes de usabilidade - avaliação com experts e testes com usuários Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 16

17. MODELO DE SHNEIDERMAN Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 17

18. MODELO LUCID (LogicUser-Centered Interface Design) Desenvolver o conceito do produto Realizar pesquisa e análise das necessidades - usando construção de cenários, design participativo, fluxo e seqüência de tarefas Criar conceitos e protótipos de telas - usando guidelines, guias de estilo e metáforas para o design Design interativo e refinamento - expandindo o protótipo para sistema completo; inclui avaliação por experts e testes de usabilidade Implementação e Suporte Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 18

19. O que leva a um bom design? Escolha um domínio no qual muitas pessoas estão envolvidas Estude a natureza das ações dessas pessoas naquele domínio, especialmente em ações repetitivas O que elas reclamam mais? Que ações gostariam de realizar? Defina software que imite padrões de ação incluindo funções que não poderiam ser feitas manualmente Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 19

20. O que leva a um bom design? Crie protótipos o mais cedo possível e observe como as pessoas reagem, o que “quebra”a experiência delas Mantenha comunicação com elas Projetar para usuários x Projetar com usuários Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 20

21. Não Esquecer - IHC Conheça o usuário Minimize memorização Reduza a carga de memória do usuário Otimize operacionalização Coloque o usuário no controle da interface Previna erros Torne a interface do usuário consistente Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 21

22. Colocar o usuário no controle Permitir o uso de mouse e teclado Mostrar mensagens descritivas e textos Prover ações e feedbacks imediatos e reversíveis Prover caminhos e saídas significativos Acomodar-se a diferentes habilidades de usuários (Acessibilidade) Tornar a interface do usuário transparente Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 22

23. Colocar o usuário no controle Permitir que usuários adaptem a interface Permitir a manipulação direta da interface Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 23

24. Reduzir a carga de memória Realçar a demanda da memória de curto prazo Contar com o reconhecimento e não relembrança Prover pistas visuais Prover ‘defaults, undo e redo’ Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 24

25. Reduzir a carga de memória Prover atalhos de interface Prover uma sintaxe objeto-ação Usar metáforas do mundo real Prover clareza visual Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 25

26. Tornar a interface consistente Manter consistência intra e entre aplicações Manter os resultados da interface Prover apelos estéticos e integridade Dar suporte ao contexto das tarefas Uso cotidiano Configuração Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 26

27. Reconhecer o usuário Perfil de usuários Novato ou usuários de primeiro momento Conhecedor ou usuário intermitente Usuários experientes Conseqüência para o design Proposição da interface em múltiplos níveis Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 27

28. Prevenir Erros Completar sentenças Corrigir comandos ? Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 28

29. Diretrizes – Projeto Interfaces Conheça o seu usuário ou cliente Entenda a função do negócio Entendimento dos princípios de bons projetos de telas Desenvolva menus do sistema e esquemas de navegação Selecione o tipo apropriado de janela Selecione os dispositivos de controle apropriados Escolha os controles de tela apropriados Escreva mensagens e textos claros Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 29

30. Diretrizes – Projeto Interfaces Fornecer feedback, orientação e assistência efetivos Fornecer internacionalização e acessibilidade efetivos Criação de gráficos, ícones e imagens significativas Escolha as cores apropriadas Organização e layout de janelas e páginas Teste, teste e teste Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 30

31. O que são “guidelines”? São orientações que devem ser consideradas na elaboração e avaliação de um software. São criadas, principalmente, a partir do senso comum e da experiência na elaboração de outrosprojetos de software. 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. 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. Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 31

32. “Guidelines” Princípios de design: São guidelines maisgenéricas, exigemumainterpretação antes de ser aplicadas. Ex.: Mantenha o site simples (p/websites)‏ Regras de design: São guidelines em um nívelmaisdetalhado. Ex.: Nãoofereçaumaopçãoparabuscasemtoda a rede a partir de seupróprio website”. Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 32

33. “Guidelines” Guia de estilo Consisteemumacoleção de regras de design específicas e emprincípios dos quaisderivam as regras. São maiscomunsnas “guidelines” de determinadosfabricantes, paradefinir a identidade visual da interface e garantirconsistênciatanto no produtoquanto entre produtos de um determinadofabricante. Ex.: “Aocriar um íconecolorido, vocêdeveiniciarcriandoprimeiro a versãopreto e branco e depoisacrescentarcor”. (Macintosh)‏ Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 33

34. Onde encontrar? http://warau.nied.unicamp.br/ Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 34

35. O que é usabilidade? Características de um sistema Fácil de Aprender Fácil de Utilizar Fácil de Relembrar Tolerante a Erros SubjetivamenteAgradável Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 35

36. O que é usabilidade? Combinar Objetivos Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 36

37. O que é usabilidade? Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 37

38. Usabilidade é importante? Historicamente muitas empresas subestimaram a importância da Usabilidade no fracasso ou sucesso de seu projeto web 90% dos sites comerciais tem Usabilidade deficiente Usabilidade é uma parte pequena de um projeto, porém a mais crítica porque é a parte que o usuário vê Do ponto de vista do Usuário, Usabilidade pode ser a diferença entre executar uma atividade de maneira adequada ou se frustar Do ponto de vista do Desenvolvedor, Usabilidadepode ser a diferença entre o Sucesso e o Fracasso do sistema Do ponto de vista daGestão, um sistema de Usabilidadedeficientepodereduzir a produtividadedaforça de trabalho a um nívelatépior do quesem o sistema Falta de Usabilidade, além de custar tempo e esforço extras, podedecretar a falência do projeto Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 38

39. Usabilidade - Benefícios Usuário Fácil de Aprender e Usar Gera Menos Stress Gera Confiança no Sistema Força de Trabalho mais Rápida e Eficiente Diminui Custos de Treinamento e Help Desk Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 39

40. Usabilidade - Benefícios Gestão do Projeto Melhora o Controle de Risco - consegue-se, por meio de testes, identificar os melhores designs Simplifica o Planejamento e Reduz Retrabalho Indica Evidência de Sucesso já na Fase de Testes Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 40

41. Usabilidade - Benefícios Desenvolvimento 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á Impossibilita Mudanças de Última hora Redução no Número de Alterações pedidas durante a Homologação Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 41

42. Estrutura do site Refere-se a como a informação é organizada dentro de um site Permite ao usuário procurar por relacionamento de informações, que revela: Categorias Hierarquias Networks A estruturação do Site possibilita ao usuário construir um modelo mental e também o ajuda a recordar informações Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 42

43. Estrutura do site Seqüencial – ideal para sites pequenos onde as informações fluem como uma narrativa 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 Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 43

44. Estrutura do site 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 Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 44

45. Estrutura do site – “Ruins” 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. Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 45

46. Estrutura do site – “Ruins” Muito Largos – Estrutura ruim porque existem muitas opções no menu principal, sobrecarregando o usuário com informações Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 46

47. Estrutura do site 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. Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 47

48. Navegação Ser regular, estruturada e hierárquicaporque o usuárioreconhecerá as consistências e relacionamentos, facilitando a suaexperiência com a navegação do site Semprefornecerinformaçõespara o usuário de ondeeleestá, de ondeeleveio e paraondeelepodeir Deixarbemclaroaosusuáriosque um certo link, sejaeletextoouimagem, é de fatoclicável e que o mesmo o levapara o lugaremqueeleesperair Possibilitaraousuárionavegar de forma rápidapelaestrutura do site Possibilitaraousuárioretornarsobreos links percorridos Possibilitaraousuárioretornar a uma home page no caso dele se sentirperdido Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 48

49. Navegação 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 Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 49

50. Navegação Processo 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 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. Filtragem – exibirapenasinformaçõesrelevantesapósumadeterminadapesquisa. 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. Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 50

51. Metas e Objetivos Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 51

52. Metas de Eficiência Qual o grau de dificuldade que os seus clientes encontram para comprar em seu site? Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 52

53. Metas de Eficácia Exemplo – Comércio Eletrônico Qual é a taxa de conversão? Qual é a taxa de abandono de carrinho? Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 53

54. Metas de Aprendizado Quanto tempo os seus usuários demoram para aprender a interagir com o seu website? O seu site é auto-explicativo? Existe alguma área que estimule o aprendizado sobre a utilização do seu produto ? Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 54

55. Metas de Aprendizado Exemplo – Comércio Eletrônico Qual o tempo médio que as pessoas gastam para finalizar um pedido? Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 55

56. Metas de Memorização Depois que os seus clientes entram no seu site, eles conseguem lembrar como executaram uma tarefa? Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 56

57. Protótipos 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. Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 57

58. Softwares - Wireframe Axure Gliffy Visio Como construir Wireframe Direitos reservados conteúdo utilizado exclusivamente para fins didáticos 58