INTERAO HUMANOCOMPUTADOR Prof Fabrcio Costa Santana prof fabriciooutlook

INTERAÇÃO HUMANOCOMPUTADOR Prof. Fabrício Costa Santana prof. fabricio@outlook. com professorfabricio. net

Ementa Conceitos e fundamentação teórica para a interação humanocomputador. Padrões de interação. Atividades relativas à interação humano-computador aplicadas a um processo de desenvolvimento de software.

Objetivos 1. Instrumentalizar o aluno através dos princípios necessários e das qualidades desejadas para projetar interfaces de usuário; 2. Identificar, descrever e comparar modelos e técnicas para o projeto de interface de usuário; 3. Oportunizar situações para o aluno reconhecer as principais metodologias, métodos e ferramentas de IHC e seu aspecto multidisciplinar; 4. Adquirir habilidades para projetar, analisar e avaliar interfaces de usuário em sistemas interativos; 5. Trabalhar com atividades práticas (individuais ou em grupo) para desenvolver habilidades de comunicação e trabalho em grupo.

Referências 1. 2. Referências básicas 1. PREECE, Jennifer. Design de Interação: além da interação homem-computador. Bookman, 2005 2. OLIVEIRA NETTO, Alvim Antônio de. IHC interação humano computador: modelagem e gerência de interfaces com o usuário, sistema de informações. Florianópolis, SC: Visual Books, 2004 xiii, 120 p. ISBN 8575021389. Referência Complementar 1. BENYON, David. Interação Humano-Computador. 2ª Ed. São Paulo. Editora Pearson

Avaliações 1. Avaliação 1 – Peso 20 2. Avaliação 2 – Peso 40 3. Apresentação em grupo Avaliação escrita Avaliação 3 – Peso 40 Avaliação escrita ou apresentação de trabalho

Observações importantes 1. Será feita chamada em todas as aulas e haverá reprovação por faltas; 2. Em caso de falta nas avaliações escritas, a 2ª chamada será feita somente após abertura de requerimento no CAA;

IHC?

IHC – Interface Humano-Computador

Design de interação centrado no humano

Variedade de sistemas interativos Sites; Jogos; Smartphones; Tablets; Aplicativos; Projetores; Sistemas para o lar; Sistemas para o trabalho; Sistemas colaborativos; ETC. . .

Possibilidades de interação

Preocupações do design de sistemas interativos Design – O que é e como fazer? Tecnologias – Sistemas, produtos, dispositivos e componentes interativos. Pessoas – Quem usa? Como melhorar a experiência de uso? Atividades e conceitos – O que as pessoas querem fazer e o contexto dessas atividades.

Design

Pessoas e Tecnologias

Interface

Centrado no Humano

Aspectos a serem considerados na IHC Tecnologia da Informação Fatores humanos Ciências sociais Aspectos culturais Psicologia Cognição Ergonomia Acessibilidade Práticas de design (heurística) Trabalho cooperativo suportado por computador

Cronologia da Evolução da Área de IHC Anos 1950: Interface de hardware “para engenheiros” com diversos botões de interação Anos 1960 -1970: Interface de programação (COBOL, FORTRAN) Anos 1970 -1990: Interface de terminais (linguagens de comando) Anos 1980: Interface de interação para diálogo (GUIs, multimídia) Anos 1990: Interface para realizar trabalho (redes e grupos) A partir de 2000: Interface torna-se onipresente (Aparelhos celulares, bluetooth, dispositivos móveis, eletrônicos, por toda a parte, telas interativas e muitas tecnologias embarcada) Fonte: Amyris (2007)

Interface e Interação

Interface e Interação é a troca que ocorre entre humanos e as máquinas; Interface é o meio pelo qual a interação ocorre.

Recursos de Interação Interface gráfica (GUIs - Graphical User Interface); Reconhecimento de voz; Multimídia; Realidade virtual e aumentada; Ambientes de aprendizagem (treinamento e educação); Redes Etc. . . sem fio;

Interfaces e o projeto de interação Aspectos de Comunicação: Interface Física; Interface Lógica: Aspectos léxicos (funcionais); Sintáticos (estruturais); Semânticos (conteúdo).

Aspectos a se considerar nos projetos de interação 1. Atender o tipo de atividade esperada pelo usuário; 2. Estudar a interface mais apropriada para entrada e saída de dados; e 3. Oferecer funcionalidades complementares como forma de flexibilizar o processo de interação.

O Projetista de Interação

As profissões decorrentes da área de IHC Analista com especialidade em projeto centrado no usuário; Arquiteto de informação; Web. Designer; Especialista em usabilidade; Testador/Avaliador.

Interfaces e o projeto de interação 1. Interface Física 2. Interface Lógica

Usabilidade

Metas de Usabilidade Eficácia Eficiência Segurança Impedir erros Desfazer ações Utilidade Facilidade de Aprendizado Facilidade de Memória de Uso

Metas decorrentes da experiência do usuário 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Satisfatórios Agradáveis Divertidos Interessantes Úteis Motivadores Esteticamente apreciáveis Incentivadores de criatividade Compensadores Emocionalmente adequados

Usabilidade a) Esse sistema deve ser fácil de aprender, fácil de usar, motivador emocionalmente adequado e compensador. 1. Um dispositivo portátil que permite a crianças comunicar-se umas com as outras e brincar com jogos colaborativos 2. Um sistema de vídeo e computador para b) Esse dispositivo para aprendizagem deve ser fácil de entender e de utilizar, eficaz, motivador e conferências que permite aos estudantes compensador. aprender em casa 3. Uma aplicação da Internet que permite ao c) Essa ferramenta precisa ser fácil de aprender, fácil de lembrar como usar, ter uma boa utilidade, ser segura, público em geral acessar seu prontuário eficiente, eficaz, fornecer suporte à criatividade e ser médico através de uma TV interativa esteticamente agradável. Um sistema CAD para arquitetos e d) Esse sistema pessoal deve ser seguro, fácil de usar e engenheiros de lembrar como usar, eficaz e eficiente. Uma comunidade on-line que fornece e) Esse dispositivo colaborativo deve ser de uso simples, suporte a pessoas que recentemente eficaz, eficiente, fácil de aprender a utilizar, engraçado tiveram amigos e familiares falecidos e interessante. 4. 5.

Usabilidade 1. a) Esse dispositivo colaborativo deve ser de uso simples, Um dispositivo portátil que permite a eficaz, eficiente, fácil de aprender a utilizar, engraçado crianças comunicar-se umas com as e interessante. outras e brincar com jogos colaborativos 2. Um sistema de vídeo e computador para b) Esse dispositivo para aprendizagem deve ser fácil de entender e de utilizar, eficaz, motivador e conferências que permite aos estudantes compensador. aprender em casa 3. Uma aplicação da Internet que permite ao c) Esse sistema pessoal deve ser seguro, fácil de usar e de lembrar como usar, eficaz e eficiente. público em geral acessar seu prontuário médico através de uma TV interativa 4. Um sistema CAD para arquitetos e engenheiros d) 5. Uma comunidade on-line que fornece suporte a pessoas que recentemente tiveram amigos e familiares falecidos Essa ferramenta precisa ser fácil de aprender, fácil de lembrar como usar, ter uma boa utilidade, ser segura, eficiente, eficaz, fornecer suporte à criatividade e ser esteticamente agradável. e) Esse sistema deve ser fácil de aprender, fácil de usar, motivador emocionalmente adequado e compensador.

Princípios de usabilidade e design Visibilidade Feedback (retorno) Áudio, tátil, verbal, visual e combinados Restrições Físicas Lógicas Culturais Mapeamento Consistência Affordance (“dar uma pista”)

Visibilidade

Feedback

Restrições

Mapeamento

Consistência SALVAR EXCLUIR SALVAR

Affordance

O Projeto de Interação Identificar necessidades e estabelecer requisitos; Desenvolver projetos alternativos que vão de encontro aos requisitos; Construir versões interativas de maneira que possam ser comunicadas e analisadas; Avaliar o que está sendo construído e medir sua aceitabilidade.

Modelo Conceitual Conceito: é a descrição do sistema proposto na forma de um conjunto de ideias e conceitos integrados a respeito de: O que o sistema deve fazer? Como ele deve se comportar? Como ele deve se parecer?

Tipos de Modelos Conceituais 1. Visão do Projetista 2. Visão do Usuário 3. Visão do Sistema

Categorias de Modelos Conceituais 1. Baseados em Atividades 2. Baseados em Objetos

Baseados em Atividades 1. Instrução 2. Conversação 3. Manipulação e navegação 4. Exploração e pesquisa

Instrução

Conversação IOS Siri

Manipulação e Navegação CLICAR SEGURAR SOLTAR

Exploração e Pesquisa

Baseados em Atividades

Sony Magic Link Com Sistema Operacional Sony Magic Cap

Metáforas de Interface Combinam conhecimento familiar com novos conceitos

Xerox Star

Tipos de Metáforas de Interface Baseada em objeto: utiliza a representação literal do objeto para que seja compreendido pelo usuário Ex. : O uso de uma porta indicando saída, cadeado indicando proteção ou lixeira indicando local de descarte. Baseada em cenário: possui representações diversas que lembram um determinado cenário como um parque de diversões, um Shopping Center, uma escola, um clube, um bar, etc. Baseada na atividade: similar a ideia do modelo conceitual baseada na atividade. Ela utiliza a ideia de uso de algum objeto ou realização de algo como instrução, conversação, manipulação e exploração. Ex. : o armazenamento de documentos em pastas nos sistemas computacionais resgata a ideia original de armazenamento de documentos

Vantagens do uso de metáforas 1. Facilita o aprendizado e o entendimento; 2. Melhora a memória de uso;

Quando a metáfora pode prejudicar 1. Quebra de regras; 2. Regras muito restritas; 3. Regras que entram em conflito com os princípios do projeto; 4. Dificuldade de compreensão da funcionalidade; 5. Uso de traduções demasiadamente literais de projetos ruins já existentes; e 6. Limitação da imaginação do designer na hora de evocar novos paradigmas e modelos.

Para Entender os Usuários

Cognição

Tipos de Cognição Experiencial Estado mental no qual percebemos, agimos e reagimos aos eventos ao nosso redor de maneira eficaz e sem esforço. Reflexiva Envolve pensar, comparar e tomar decisões. Esse tipo de cognição é a que promove novas ideias e a criatividade.

Tipos de Processos de Cognição Atenção; Percepção e reconhecimento; Memória; Aprendizado; Leitura, fala e audição; Resolução de problemas, planejamento, raciocínio e tomada de decisões.

Atenção

Atenção A atenção nos permite focar uma informação que é relevante para o que estamos fazendo. A facilidade ou dificuldade em executar este processo depende: De termos objetivos claros; Da informação que precisarmos estar saliente no ambiente;

Objetivos Claros Se temos um objetivo claro Se não temos certeza do que procuramos

Disposição da informação

Apresentação da Informação – Diretrizes Faça com que a informação fique saliente quando for necessária em um dado momento da realização de uma tarefa; técnicas como gráficos animados, cores, sublinhado, ordenação de itens, sequenciamento de informações diferentes e espaçamento de itens; Evite “entulhar” a interface com muita informação, o que deve ser aplicado especialmente ao uso de cores, sons e gráficos (mistura de mídias); As interfaces simples são muito mais fáceis de usar

Percepção O usuário deve “perceber” a informação apresentada na interface através dos sinais que a constituem; A percepção humana é um processo complexo, que envolve outros processos cognitivos, como a memória, a atenção e a linguagem; A visão constitui-se no sentido dominante, seguida pela audição e pelo tato.

Percepção - Teorias A Teoria Construtivista - acredita que nossa visão de mundo é construída através da informação obtida pelo ambiente acrescida ao conhecimento previamente armazenado; A informação é construída, envolvendo processos cognitivos (assimilação – acomodação). A Teoria Ecologista - o processo de percepção envolve a detecção da informação do ambiente e não requer quaisquer processos de construção ou elaboração; Os objetos carregam certas características que dirigem nossa percepção para eles;

O que veem?

Percepção Uma imagem pode ser ambígua: Falta de informação relevante; Excesso de informação irrelevante; Dificuldade em interpretar a imagem de duas maneiras diferentes ao mesmo tempo; Na percepção auditiva é análogo! Não conseguimos ouvir duas conversas ao mesmo tempo

A percepção no design de interação Do ponto de vista do design de interação as representações de informações precisam ser projetadas de modo a ser percebidas e reconhecidas em mídias diferentes: Os ícones e outras representações gráficas devem possibilitar aos usuários descobrir rapidamente seu significado; Os sons devem ser claros e compreensíveis, de forma que os usuários entendam o que eles querem representar; A saída de voz deve possibilitar aos usuários distinguir as palavras faladas e também conseguir entender seus significados; O texto deve ser legível e diferente do fundo.

Memória A memória implica recordar vários tipos de conhecimentos que nos permitem agir adequadamente; Não é possível lembrar de tudo que vemos, ouvimos, experimentamos, cheiramos ou tocamos - sobrecarga; Há um processo de filtragem para decidir que informação será processada e memorizada. Indivíduos muito mais reconhecem coisas do que lembram delas; Além disso, certos tipos de informações são mais fáceis de reconhecer do que outras.

Memória – Processo de Filtragem Inicialmente, ocorre a codificação – determina que informação é acessada no ambiente e como ela é interpretada; Quanto mais se presta atenção em algo e quanto mais isto é processado, maior a chance de ser lembrado; O contexto na qual a informação está codificada também é importante, ou seja é difícil lembrar de informações codificadas em um contexto diferente do atual; Exemplo: não reconhecer um vizinho em um cenário diferente do usual de seu prédio;

Exemplo de processos de memória Recuperação Direta; Recuperação baseada em reconhecimento.

A memória no design de interação Não sobrecarregue a memória dos usuários com procedimentos complicados para a realização de tarefas; Projete interfaces que promovam o reconhecimento, em vez da memorização, utilizando menus, ícones e objetos consistentemente posicionados; Ofereça aos usuários várias maneiras de codificar a informação eletrônica, para ajudá-los a lembrar onde as armazenaram, utilizando cores, registro de datas, ícones, etc. . .

Aprendizado O aprendizado pode ser considerado no que concerne a: Como utilizar uma aplicação baseada em computador ou; Utilizar uma aplicação de computador para entender um determinado tópico. Muitos usuários preferem aprender fazendo: Interfaces gráficas e de manipulação direta são bons ambientes para fornecer suporte a este tipos de aprendizado; Apoiam a interação exploratória. Outra abordagem é conhecida como “bicicleta com rodinhas”: Restringir as possíveis funções que podem ser realizadas por um aprendiz – nível mais básico; Estendê-las posteriormente quando for mais experiente.

Aprendizado no design de interação Projete interfaces que encorajem a exploração; Projete interfaces que restrinjam a guiem os usuários na seleção de ações mais adequadas; Vincule dinamicamente representações e abstrações que necessitem ser aprendidas; Possibilidade de explorar ideias e conceitos de maneiras diferentes (multimídia, realidade virtual, tecnologias interativas baseadas na web).

Leitura, fala e audição A linguagem escrita e permanente, e a falada, transitória. É possível ler a informação novamente se ela não for entendida da primeira vez, o que não e possível com a informação falada; Ler pode ser uma atividade mais rápida do que falar ou ouvir, já que com o texto escrito podemos proceder a uma leitura dinâmica, o que não ocorre quando ouvimos palavras proferidas em série; Ouvir exige menos esforço cognitivo do que ler ou falar. As crianças, em especial, geralmente preferem narrativas em multimídia e materiais de ensino baseados na web a terem que ler o texto equivalente on-line; A linguagem escrita tente a ser mais gramatical do que a falada; Algumas pessoas preferem ler a ouvir, ao passo que outras somente ouvir. Da mesma forma, algumas preferem falar a escrever, e vice-versa; As pessoas com dislexia têm dificuldade para entender e reconhecer as palavras escritas; As pessoas que têm dificuldades para ouvir ou ver também enfrentam restrições na maneira como processam a linguagem.

O aprendizado no design de interação Os menus e as mensagens de voz devem ser mínimos; Mensagens de voz artificiais precisam possuim uma entonação paracida com a linguagem falada, senão ficam mais difíceis de entender que a voz humana; Textos devem possuir a possibilidade de ampliação da visualização dos textos (sem alteração da formatação), para facilitar a leitura por pessoas com limitação de leitura de fontes pequenas.

Resolução de problemas, planejamento, raciocínio e tomada de decisões Envolvem: Cognição reflexiva; Processos conscientes; Discussões; Uso de artefatos e informações; Cenários; Comparação de diferentes tipos de informação; Níveis diferente de reflexão baseados no grau de conhecimento e experiência do usuário.

A resolução de problemas, planejamento, raciocínio e tomada de decisões no design de interação Forneça informações adicionais que fiquem escondidas, mas que possam ser facilmente acessíveis pelos que desejem saber mais a respeito de como realizar uma determinada atividade com mais eficiência.