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
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
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
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
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