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

Transcrição

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. conteúdo utilizado exclusivamente para fins didáticos 2

3 Humano-Computador Devido ao fato da interação homemcomputador 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. 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; Questões sobre a memória, atenção, percepção psicologia cognitiva e desempenho humano conteúdo utilizado exclusivamente para fins didáticos 4

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

6 Exemplos IPHONE Minority Report Microsoft Surface Terminais de ATM 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 conteúdo utilizado exclusivamente para fins didáticos 7

8 Modelo Cascata 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 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 conteúdo utilizado exclusivamente para fins didáticos 10

11 Modelo Espiral 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 conteúdo utilizado exclusivamente para fins didáticos 12

13 Objetivos DESIGN CENTRADO NO HUMANO (DCH) 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. conteúdo utilizado exclusivamente para fins didáticos 13

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

15 Modelo Estrela 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 conteúdo utilizado exclusivamente para fins didáticos 16

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

18 MODELO LUCID (Logic User- 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 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 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 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 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 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 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 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 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 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 conteúdo utilizado exclusivamente para fins didáticos 27

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

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

30 Diretrizes Projeto Interfaces 1. Fornecer feedback, orientação e assistência efetivos 2. Fornecer internacionalização e acessibilidade efetivos 3. Criação de gráficos, ícones e imagens significativas 4. Escolha as cores apropriadas 5. Organização e layout de janelas e páginas 6. Teste, teste e teste 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 outros projetos 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. conteúdo utilizado exclusivamente para fins didáticos 31

32 Guidelines Princípios de design: São guidelines mais genéricas, exigem uma interpretação antes de ser aplicadas. Ex.: Mantenha o site simples (p/websites) Regras de design: São guidelines em um nível mais detalhado. Ex.: Não ofereça uma opção para buscas em toda a rede a partir de seu próprio website. conteúdo utilizado exclusivamente para fins didáticos 32

33 Guidelines Guia de estilo Consiste em uma coleção de regras de design específicas e em princípios dos quais derivam as regras. São mais comuns nas guidelines de determinados fabricantes, para definir a identidade visual da interface e garantir consistência tanto no produto quanto entre produtos de um determinado fabricante. Ex.: Ao criar um ícone colorido, você deve iniciar criando primeiro a versão preto e branco e depois acrescentar cor. (Macintosh) conteúdo utilizado exclusivamente para fins didáticos 33

34 Onde encontrar? 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 Subjetivamente Agradável conteúdo utilizado exclusivamente para fins didáticos 35

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

37 O que é usabilidade? 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, Usabilidade pode ser a diferença entre o Sucesso e o Fracasso do sistema Do ponto de vista da Gestão, um sistema de Usabilidade deficiente pode reduzir a produtividade da força de trabalho a um nível até pior do que sem o sistema Falta de Usabilidade, além de custar tempo e esforço extras, pode decretar a falência do projeto 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 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 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 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 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 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 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 submenus. 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 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. conteúdo utilizado exclusivamente para fins didáticos 47

48 Navegação Ser regular, estruturada e hierárquica porque o usuário reconhecerá as consistências e relacionamentos, facilitando a sua experiência com a navegação do site Sempre fornecer informações para o usuário de onde ele está, de onde ele veio e para onde ele pode ir Deixar bem claro aos usuários que um certo link, seja ele texto ou imagem, é de fato clicável e que o mesmo o leva para o lugar em que ele espera ir Possibilitar ao usuário navegar de forma rápida pela estrutura do site Possibilitar ao usuário retornar sobre os links percorridos Possibilitar ao usuário retornar a uma home page no caso dele se sentir perdido 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 conteúdo utilizado exclusivamente para fins didáticos 49

50 Navegação Processo Agregação Como em um menu, o nível principal deve representar a coleção dos demais itens, maximizando o processo de navegação e evitando que o usuário se perca Sumarização Representa uma grande quantidade de dados de forma condensada, como por exemplo usar pequenas imagens com um tamanho inferior, como representação a de maiores resoluções. Otimizando o tempo de resposta de uma determinada página. Filtragem exibir apenas informações relevantes após uma determinada pesquisa. Quebra exibir apenas a parte inicial de uma determinada informação, dando a possibilidade de exibição do contexto como um todo, em um link, onde ficaria a critério do próprio usuário, selecioná-lo. conteúdo utilizado exclusivamente para fins didáticos 50

51 Metas e Objetivos Aprendizado Eficiência Memorização 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? 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? 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? 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? 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? 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. conteúdo utilizado exclusivamente para fins didáticos 57

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