Slides da aula 01
Transcrição
Slides da aula 01
INF751 – Interação Humano-Computador Aula 01: Interação Humano-Computador (IHC) Introdução, Conceitos básicos, exemplos... Roberto Pereira [email protected] www.inf.ufpr.br/rpereira/teaching Roberto Pereira Professor no Departamento de Informática, UFPR www.inf.ufpr.br/rpereira/teaching Graduação em Sistemas de Informação (UNISEP), Mestrado em CC (UEM); Doutorado e Pós-Doutorado em CC pela UNICAMP (2012, 2016) Pesquisador visitante na Universidade de Reading, Reino Unido (2014-2015) Professor da Especialização em Engenharia de Software, IC/UNICAMP (2013-2017) Pesquisador Colaborador: InterHAD (UNICAMP), GSII (UEM), NEPP (UNICAMP), IHC (UFPR) Áreas de atuação: Interação Humano-Computador (IHC) Engenharia de Software (ES) Sistemas de Informação (SI) Informática na Educação (IE) – Educação Inclusiva – Formação Continuada por meio de TICs – Construção participativa de Políticas Públicas IHC ES SI IE 2 News… Impede(ia) o uso de CEP genérico Considera inválido e-mail com hífen Mensagens de erro do Banco de Dados Telefone de contato que não funciona Informar dados já informados Obrigatório gerar a guia e parar no início de cada mês Março 2016: ainda não é possível excluir um empregado cadastrado Arndt von Staa, PUC-Rio: Erros Grosseiros, O Globo (05/11/2015). Multa para quem pagar atrasado ;) http://oglobo.globo.com/opiniao/erros-grosseiros-17966613 3 ...tecnologia e seus impactos - Do telefone fixo ao smart phone: Diferenças? Mudanças? Impactos? 4 ...tecnologia e seus impactos - Jogos, Realidade Aumentada: Diferenças? Mudanças? Impactos? 5 News… 6 Computação – era digital questões éticas efeitos emocionais aspectos formais e normativos questões técnicas 7 Computação – era digital questões éticas efeitos emocionais aspectos formais e normativos questões técnicas Tem alguma coisa faltando no nosso currículo de CC/TI? 8 Agenda Objetivos, organização e estrutura da disciplina Definição para Interação Humano-Computador Conceitos básicos: Interface, Interação, Affordance Qualidade em IHC: Usabilidade, Acessibilidade, Comunicabilidade Exemplos de Bad Designs... Histórico: e um novo momento para a área de IHC Práticas em Cenários Brasileiros 9 A disciplina CI751 Objetivos Noção básica dos conceitos e práticas em IHC Conhecimento da área em diferentes focos Desenvolver uma visão sistêmica e crítica sobre o design de tecnologias computacionais interativas Exercitar a capacidade de entendimento de problemas, propostas de solução, desenvolvimento e avaliação a partir de uma perspectiva de IHC Fazer sentido de questões de IHC no contexto dos trabalhos de pesquisa individuais. - Progredir nos trabalhos de doutorado (amadurecimento da proposta; elaboração de uma proposta) Trabalhos/Avaliações 1. Entregas Individuais (Peso 30). Prazo 22/10/16. 2. Artigo Individual (Peso 50). Prazo 05/12/16. 3. Seminário (Peso 20). Datas: 28 e 29/11/16. 10 Página da disciplina www.inf.ufpr.br/rpereira/teaching 11 A disciplina CI751 1º Bloco: Bases Teóricas e Metodológicas (05 a 09/09) - Introdução à Interação Humano-Computador (IHC) - Uma visão socialmente consciente em IHC - Prototipação e Design Participativo - Avaliação em IHC - Revisão Sistemática de Literatura 2º Bloco: Temas adicionas e Tópicos em IHC (29/10 a 01/11) - Design Universal e Design Centrado no Usuário - Avaliação de Acessibilidade - IoT, Smart Cities, etc. - Fatores Humanos e Curiosidades 3º Bloco: Tópicos de Pesquisa (28 e 29/11) - Seminários e discussões voltadas aos Projetos individuais 12 UNICAMP Definição O que é Interação Humano-Computador (IHC)? ...ou, o que não é IHC? Alguns mitos em IHC: - É só fazer uma telinha bonita - É um plus (deixa pra depois... e se der tempo) - É excessivamente subjetivo - É caro e inviabiliza o projeto 14 IHC como área: definição • Definição da ACM: “Interação Humano-Computador é uma disciplina preocupada com o design, avaliação e implementação de sistemas computacionais para uso humano e com o estudo dos principais fenômenos que os rodeiam.” (http://old.sigchi.org/cdg/cdg2.html#2_1) “O valor especial e a contribuição de IHC é que ela deve investigar, desenvolver e aproveitar essas novas áreas de possibilidade não apenas como tecnologias ou projetos, mas como um meio para melhorar a atividade, a experiência e a vida humana.” (Carroll, 2013) 15 IHC como área: definição • Definição da ACM: “Interação Humano-Computador é uma disciplina preocupada com o design, avaliação e implementação de sistemas computacionais para uso humano e com o estudo dos principais fenômenos que os rodeiam.” • Design de Interação (Interaction Design): cobre apenas uma parte da IHC e se preocupa com “moldar/modelar objetos/coisas digitais para as pessoas usarem.” • Experiência do Usuário (User Experience, UX): aspectos relacionados a emoção, motivação, afeto, etc., envolvidos na IHC. 16 UNICAMP Conceitos básicos Interface e Interação • Interface: “uma superfície de contato que reflete as propriedades físicas das partes que interagem, as funções a serem executadas e o balanço entre poder e controle” • Interação: toda ação executada com/sob/por meio da interface. (Laurel apud Rocha e Baranauskas, 2003) 18 Interface e Interação • “A interface de um sistema interativo compreende toda a porção do sistema com a qual o usuário mantém contato físico (motor ou perceptivo) ou conceitual durante o uso do sistema, sendo o único meio de contato entre o usuário e o sistema” • “Interação usuário-sistema é um processo de manipulação, comunicação, conversa, troca, influência (...), etc.” (Barbosa e Silva, 2010) 19 Affordance • As possíveis ações que podem ser executadas sobre um objeto do ponto de vista do sujeito que o observa. • • • Affordance de Gibson Affordance de Norman Affordance de Stamper 20 Affordance • Exemplos... 21 Affordance • Affordance Social de Stamper 22 Qualidade em IHC • • • Usabilidade Acessibilidade Comunicabilidade 23 Usabilidade 24 Usabilidade: definições • Norma ISO 9126 (1991) “Software Engineering Product Quality” : usabilidade é “um conjunto de atributos relacionados ao esforço necessário para o uso, e a avaliação individual de tal uso, por um conjunto explícito ou implícito de usuários”. • ISO 9241-11 (1998) “Guidance on Usability”: usabilidade é “a extensão na qual um produto pode ser usado por um grupo específico de usuários para alcançar objetivos específicos com eficácia, eficiência e satisfação em um contexto de uso específico”. • Norman (1993) define usabilidade como um conjunto de cinco fatores que qualificam quão bem uma pessoa pode interagir com um sistema interativo: • • • • • Facilidade de Aprendizado Eficiência de Uso Facilidade de retorno/lembrança Segurança no uso Satisfação subjetiva do usuário 25 Acessibilidade 26 Acessibilidade: não impor barreiras • Melo e Baranauskas (2006): “Flexibilidade proporcionada para o acesso à informação e à interação, de maneira que usuários com diferentes necessidades possam acessar e usar esses sistemas” • W3C: “Acessibilidade Web significa que pessoas com deficiência podem usar a internet. Mais especificamente, a acessibilidade Web significa que pessoas com deficiência podem perceber, compreender, navegar e interagir com a Web, e que podem contribuir para a web. A acessibilidade Web também beneficia outros, incluindo pessoas idosas com capacidades em mudança devido ao envelhecimento”. 27 Comunicabilidade 28 Comunicabilidade • Souza (2005): “capacidade da interface de um sistema em comunicar ao usuário a lógica de design concebida pelo designer que projetou o sistema”. Objetivo da comunicabilidade: “permitir que o usuário, através de sua interação com a aplicação, seja capaz de compreender as premissas, intenções e decisões tomadas pelo projetista durante o processo de design” Mensagem do Designer: “Este é o sistema que projetei para você. É a minha interpretação sobre : - quem você é, - o que você quer ou precisa fazer, - de que formas prefere fazê-lo -e porquê.” 29 UNICAMP Design... designs e designs Design (http://dictionary.cambridge.org/us/dictionary/english/design) - to make or draw plans for something that will be produced; - to intend for a particular purpose; - the way in which something is planned and made; - a drawing or set of drawings showing how a building or product is to be made and how it will work - and look; - intentionally; - to intend a result; Design estranho... 31 Design estranhos 32 Problema de Design? 33 Péssimas escolhas de logo, ou de sinais... 34 ...e de nome! 35 ...e de nome! 36 ...e de nome! 37 Bad design Norman, Donald A. The design of everyday things: Revised and expanded edition. Basic books, 2013. 38 Bad design O problema está na: (a) Interface (b) Interação (c) Affordance Norman, Donald A. The design of everyday things: Revised and expanded edition. Basic books, 2013. 39 Bad design O problema está na: (a) Interface (b) Interação (c) Affordance É um problema de: (a) Usabilidade (b) Acessibilidade (c) Comunicabilidade Norman, Donald A. The design of everyday things: Revised and expanded edition. Basic books, 2013. 40 Problema de Design ... 41 Problema de Design O problema está na: (a) Interface (b) Interação (c) Affordance É um problema de: (a) Usabilidade (b) Acessibilidade (c) Comunicabilidade ... 42 Problema de Design O problema está na: (a) Interface (b) Interação (c) Affordance É um problema de: (a) Usabilidade (b) Acessibilidade (c) Comunicabilidade ... 43 Problema de Design O problema está na: (a) Interface (b) Interação (c) Affordance É um problema de: (a) Usabilidade (b) Acessibilidade (c) Comunicabilidade ... 44 Problema de Design O problema está na: (a) Interface (b) Interação (c) Affordance É um problema de: (a) Usabilidade (b) Acessibilidade (c) Comunicabilidade ... 45 Problema de Design 09 O problema está na: (a) Interface (b) Interação (c) Affordance É um problema de: (a) Usabilidade (b) Acessibilidade (c) Comunicabilidade 46 Problema de Design O problema está na: (a) Interface (b) Interação (c) Affordance É um problema de: (a) Usabilidade (b) Acessibilidade (c) Comunicabilidade ... 47 Problema de Design ... 48 UNICAMP Evolução/Histórico da área Linha do Tempo 1822 • Máquina Analítica 1940 • Cartões Perfurados 1960 • Linhas de Comando • Mouse, outros dispositivos 1980 • Interfaces Gráficas 1980/90 • Interfaces Multitouch 2000 • Interfaces “Naturais” (NUI) 20?? • Brain-Computer Interface? Fonte: http://neurogadget.com/2011/04/28/infographic-of-human-computer-interface-evolution/2010 50 Linha do Tempo 1822 • Máquina Analítica 1940 • Cartões Perfurados 1960 • Linhas de Comando • Mouse, outros dispositivos 1980 • Interfaces Gráficas 1980/90 • Interfaces Multitouch 2000 • Interfaces “Naturais” (NUI) 20?? • Brain-Computer Interface? 51 Linha do Tempo 1822 • Máquina Analítica 1940 • Cartões Perfurados 1960 • Linhas de Comando • Mouse, outros dispositivos 1980 • Interfaces Gráficas 1980/90 • Interfaces Multitouch 2000 • Interfaces “Naturais” (NUI) 20?? • Brain-Computer Interface? 52 Linha do Tempo 1822 • Máquina Analítica 1940 • Cartões Perfurados 1960 • Linhas de Comando • Mouse, outros dispositivos 1980 • Interfaces Gráficas 1980/90 • Interfaces Multitouch 2000 • Interfaces “Naturais” (NUI) 20?? • Brain-Computer Interface? 53 Linha do Tempo 1822 • Máquina Analítica 1940 • Cartões Perfurados 1960 • Linhas de Comando • Mouse, outros dispositivos 1980 • Interfaces Gráficas 1980/90 • Interfaces Multitouch 2000 • Interfaces “Naturais” (NUI) 20?? • Brain-Computer Interface? 54 Linha do Tempo 1822 • Máquina Analítica 1940 • Cartões Perfurados 1960 • Linhas de Comando • Mouse, outros dispositivos 1980 • Interfaces Gráficas 1980/90 • Interfaces Multitouch 2000 • Interfaces “Naturais” (NUI) 20?? • Brain-Computer Interface? 55 Linha do Tempo 1822 • Máquina Analítica 1940 • Cartões Perfurados 1960 • Linhas de Comando • Mouse, outros dispositivos 1980 • Interfaces Gráficas 1980/90 • Interfaces Multitouch 2000 • Interfaces “Naturais” (NUI) 20?? • Brain-Computer Interface? 56 Linha do Tempo 1822 • Máquina Analítica 1940 • Cartões Perfurados 1960 • Linhas de Comando • Mouse, outros dispositivos 1980 • Interfaces Gráficas 1980/90 • Interfaces Multitouch 2000 • Interfaces “Naturais” (NUI) 20?? • Brain-Computer Interface? • Internet das Coisas? 57 Tecnologia Computacional... Xerox Star, 1981 Eniac, 1943: IBM Archives www.amazom.com 2015 https://codific.eu/internet-of-things UNICAMP Linha do Tempo das Transformações em IHC UNICAMP Mainframe 1950 PC IoT Internet 1980 Tool for Cognitive Tool automating human tasks extending the human capacity 2010 Technology in people's homes, lives and culture “anytime, anywhere, anymedia, anything” communication Transformações na Interação... UNICAMP 1. The End of Interface Stability The blurring boundary between C&H in the everyday world 2. The Growth of Techno-Dependency Living in a technology-reliant world 3. The Growth of Hyper-Connectivity Living in a more socially connected world, being part of a digital crowd 4. The End of the Ephemeral Leaving digital footprints in an increasingly monitored world 5. The Growth of Creative Engagement New forms of human reasoning By Sellen, A., Rogers, Y., Harper, R., Rodden, T. Reflecting Human Values in the Digital Age, Comm. ACM 2009, vol 52, n.3 Transformações na perspectiva do Mercado... UNICAMP “Please evaluate our user interface, and make it easy to use.” “Please help us design this user interface so that it is easy to use.” “Please help us find what the users really need so that we know how to design this user interface.” “Look at this area of life, and find us something interesting!” By Liam Bannon, Reimagining HCI: toward a more Humancentered perspective, Interactions. July+August 2011 UNICAMP 3 Momentos da área de IHC Os 3 momentos da área de IHC Três Paradigmas de IHC (Harisson et al., 2007) Três ondas (Bodker, 2006) IHC em 2020 (Sellen et al., 2009) Grandes Desafios em IHC no Brasil — 2012-2022 (Baranauskas et al., 2012) 1. Futuro, Cidades Inteligentes e Sustentabilidade 2. Acessibilidade e Inclusão Digital 3. Ubiquidade, Multiplos Dispositivos e Tangibilidade 4. Valores Humanos 5. Formação em IHC e Mercado 63 Os 3 momentos... Primeiro momento: ergonomia – ser humano vs. máquina 64 Os 3 momentos... Segundo momento: fatores cognitivos – ser humano como processador de informações. 65 Os 3 momentos... Terceiro momento: interação situada – cultura, valores, aspectos emocionais e afetivos, pragmática... 66 Design criativo... “As veces el maltrato infantil solo es visible para el niño que lo sufre. “ (Madrid, 2013) 67 Design criativo... 68 Novo momento… questões éticas efeitos emocionais aspectos formais e normativos questões técnicas Tem alguma coisa faltando no nosso currículo de CC/TI? 69 Novo Momento Design “necessarily involves an ethical dimension which is tied into the obvious question of good versus bad design” -- materiality and morality cannot be disassociated. (Latour, 2009, A cautious Prometheus? A few steps toward a philosophy of design) “Designers are not free of responsibility regarding the products they create and deliver in the world” (Papanek, 1971, Design for the real world) 70 Dúvidas? IHC: definição, propósitos, abrangência Interface Interação Affordance Usabilidade Acessibilidade Comunicabilidade 3 Momentos em IHC Design – Projeto, Intencionalidade 71 Práticas em Cenários Brasileiros TNR – Todos Nós em Rede Formação continuada em rede de professores da Educação Inclusiva Terra da Gente Design de aplicações para a TVDI 72 TNR – Todos Nós em Rede Projeto para promover a formação continuada de professores do Atendimento Educacional Especializado. Oferecer aos professores um ambiente para: a) Busca por expertise para resolver os problemas de suas práticas profissionais diáras b) Compartilhar ideias e informação sobre casos de sucesso e casos não resolvidos c) Estabelecer uma dinâmica continuada de estudos e formação mediada pelas TICs Participantes (1º estágio) 28 professores 5 Pesquisadores da Educação 5 Pesquisadores da Computação Contribuições: Técnicas, Teóricas, Metodológicas e Sociais 73 TNR – Todos Nós em Rede 74 TNR – Todos Nós em Rede 75 Estudo de Caso -TNR: Resultados Consentimento Informado: Privacidade, Segurança Acessibilidade 76 Estudo de Caso - TNR: Resultados Valores no sistema TNR Página inicial do Sistema TNR 77 iDTV: design dentro da emissora • Objetivo: Criar a primeira aplicação para o Programa Terra da Gente • Onde: dentro da emissora EPTV (afiliada da Rede Globo) • Duração: 4 Workshops de aproximadamente 3 horas cada • Participantes: – Mais de 7 participantes com papéis diferentes na EPTV • Editor chefe, Designer, Gerente de Engenharia, Produtor, Estagiário... • Nenhum possuía experiência prévia com aplicações para TV Digital Interativa – 3 pesquisadores em Ciência da Computação Contribuições: Técnicas, Teóricas, Metodológicas 78 iDTV: design dentro da emissora Workshop 1 Clarificando o Problema • • Análise de Stakeholders Identificação, clarificação do problema Workshop 2 Propondo Soluções • • Identificação de Requisitos Cartões de Padrões Participativo Workshop 4 Avaliando Workshop 3 Prototipando • • Brainwriting Pattern-guided Braindrawing • • Avaliação participativa situada Resultado da Avaliação com usuários 79 iDTV: design dentro da emissora Organização de requisitos Identificação de Stakeholders 80 Discussão de Problemas e Soluções iDTV: design dentro da emissora Seleção de Padrões Geração de Propostas para a Interface Síntese das Propostas 81 iDTV: design dentro da emissora 82 Highlights Focar na clarificação do problema ANTES de propor uma solução Participar: participantes ativos em vez de sujeitos sendo observados Construir um entendimento compartilhado (problema, solução) em vez de um único ponto de vista Via de mão-dupla: contribuir e aprender Lidar com tensões Sentimento de Pertencimento, apropriação Cada contexto de design é único Entender (fazer sentido) dos artefatos e seus métodos é mais importante que o “modo correto” de utilizá-los 83 “… Technology is not given. It’s not like the sun or the moon or the stars. It was made by people like us. If it’s not doing for us what we want, we have a right and a responsibility to change it.” Mike Cooley, Right Livelihood Award Speech, 1981 "...for designing and promoting the theory and practice of human-centred, socially useful production." 84 Atividade para a próxima aula Ler a página da disciplina Materiais complementares e links para leitura Dúvidas serão esclarecidas na próxima aula Leituras recomendadas para as próximas aulas Próxima aula: Projeto em IHC (pré-design) Pensar em algum projetinho simples (e.g., um app) Aula articulará a exposição teórica com atividades práticas em sala 85 Referências Barbosa, Simone, and Bruno Silva. Interação Humano-Computador. Elsevier Brasil, 2010. Bødker, S. (2006) “When second wave HCI meets third wave challenges”. In: 4th Nordic conference on Human-Computer Interaction: changing roles, Norway. p.1-8. Carroll, John M. (2013): Human Computer Interaction - brief intro. In: Soegaard, Mads and Dam, Rikke Friis (eds.). "The Encyclopedia of Human-Computer Interaction, 2nd Ed.". Aarhus, Denmark: The Interaction Design Foundation. Available online at http://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html Connell, Bettye Rose, et al. "The principles of universal design." Retrieved January 11 (1997): 2005. De Souza, Clarisse Sieckenius. The semiotic engineering of human-computer interaction. The MIT press, 2005. Gibson, J. J. "The concept of affordances." Perceiving, acting, and knowing (1977): 67-82. Harrison, S., Tatar D., Sengers, P. The three paradigms of HCI, In: Proceedings of ACM AltCHI’07, 2007, pp.1-21. Melo, Amanda Meincke, and M. Cecília C. Baranauskas. "An inclusive approach to cooperative evaluation of web user interfaces." Proceedings of the 8th International Conference on Enterprise Information Systems, Paphos, Cyprus. 2006. Nielsen, Jakob. "Usability inspection methods." Conference companion on Human factors in computing systems. ACM, 1994. Rocha, Heloísa Vieira da, and Maria Cecília Calani Baranauskas. Design e avaliação de interfaces humano-computador. Unicamp, 2003. Sellen, A., Rogers, Y., Harper, R., Rodden, T. (2009) “Reflecting Human Values in the Digital Age”. Communications of the ACM, Vol 52, p.58-66. 86