Your SlideShare is downloading. ×
  • Like
Interface Humano Computador
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Interface Humano Computador

  • 5,963 views
Published

 

Published in Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
5,963
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
195
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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