Multimídia e Interface Usuário - Máquina Profa. Cristina Paludo Santos Slides baseados no livro: Design e Avaliação de Interfaces Humano Computador (Heloísa Vieira da Rocha/M.Cecília C. Baranauskas). Material adaptado. Ciência da Computação/ Sistemas de Informação Sumário Introdução Objetivos Princípios básicos de um bom design Slogans de Usabilidade Avaliação de interfaces 1
IHC Introdução Objetivos Princípios de um Bom Design Avaliações de interfaces - Contextualização - Importância -Conceitos -Exemplos Social - Sistemas Úteis - Sistemas Seguros - Sistemas Funcionais de Sistemas Prática Visibilidade Affordance Bom modelo conceitual - Restrições físicas - Restrições lógicas - Restrições culturais Bons mapeamentos - Relações entre controle e seus movimentos e o resultado no mundo Feedback - Observação - Verbalização - Heurísticas Custo Utilidade Compatibilidade Confiabilidade Funcionalidade Usabilidade aprendizagem Eficiência relembrar Erros Satisfação subjetiva INTERATIVIDADE Quais são os produtos interativos que você utiliza em um dia normal? PENSE UM MINUTO! 2
O PAPEL DA INTERFACE O sistema é a Interface Prover a interação entre pessoas e sistemas Interface usuário Funcionalidades INTERFACES AMIGÁVEIS? 3
INTERFACES AMIGÁVEIS? ACESSIBILIDADE (Declaração dos Direitos Humanos) 4
Exemplos de interfaces mal projetadas (problemáticas) EXEMPLOS DE INTERFACES 5
EXEMPLOS DE INTERFACES Como ajustar o relógio? EXEMPLOS DE INTERFACES Como ajustar cadeiras? 1 - Situação : Ajustar a altura da cadeira O usuário tenta abaixar ou levantar a cadeira enquanto está sentado, mexendo na alavanca. Problema: o usuário puxa e empurra a alavanca porém a cadeira não se move. 6
EXEMPLOS DE INTERFACES Para se abaixar a cadeira, deve-se levantar a alavanca e a cadeira ao mesmo tempo e depois empurrá-la. Para levantar a cadeira, deve-se puxar com força o assento, segurando com o pé as rodas da cadeira. EXEMPLOS DE INTERFACES 7
EXEMPLOS DE INTERFACES Máquina de café expresso sem instruções de uso em restaurante universitário Má disposição dos menus Falta de indicação da saída do café EXEMPLOS DE INTERFACES Quando devo colocar as moedas? Como funcionam os menus? De que torneira sairá o café? Devo observar outra pessoa fazendo antes? 8
EXEMPLOS DE INTERFACES A Máquina da Tess O CRIME Esta máquina aparentemente inofensiva possui o péssimo hábito de assaltar as pessoas que nela colocam seu dinheiro pensando que, em troca, receberão um cartão com crédito para seu celular. Isso acontece toda vez que alguém coloca nela o seu dinheiro e não existem mais cartões disponíveis na máquina. Só depois ela avisa que não existem mais cartões com o número de unidades que você deseja. Não existem quaisquer instruções de como recuperar o dinheiro. EXEMPLOS DE INTERFACES O Problema A Solução $? @ #! Devolver Dinheiro OU Primeiro escolher opção......depois colocar dinheiro. 9
EXEMPLOS DE INTERFACES ANTES DEPOIS EXEMPLOS DE INTERFACES Remoção da tampa Fatores Tampa extremamente rígida e de difícil remoção; Nenhuma estrutura auxiliar para ajudar a remoção da tampa. Erros esperados A pessoa precisará, obrigatoriamente utilizar de um instrumento cortante, como uma faca - que não foi desenhada especificamente para este tipo de uso, podendo ocasionar acidentes; Dependendo do instrumento utilizado, pode-se contaminar a água 10
EXEMPLOS DE INTERFACES Colocação do galão no bebedouro Fatores Peso elevado do galão; Tampa necessariamente aberta antes da colocação. Erros esperados É praticamente impossível virar o galão com sua tampa aberta e seu peso sem deixar a água cair; Não é raro a pessoa deixar o galão cair neste momento, fazendo aquela aguaceira quando o galão explode no chão. EXEMPLOS DE INTERFACES 11
EXEMPLOS DE INTERFACES Uma interface ruim é ineficiente e confusa EXEMPLOS DE INTERFACES Uma interface ruim não é confiável Tudo bem? Ou tudo mal? 12
EXEMPLOS DE INTERFACES Uma interface ruim tira o controle do usuário EXEMPLOS DE INTERFACES Tarefa: Encontrar um liquidificador 13
O ADVENTO DE UMA NOVA COMPUTAÇÃO 14
Louvre (França) 15
REALIDADE AUMENTADA 16
HOLOGRAFIA DESAFIOS DE IHM/IHC Como dar conta da rápida evolução tecnológica? Como garantir que os design ofereçam uma boa IHM/IHC ao mesmo tempo que exploram o potencial e funcionalidade da nova tecnologia? 17
DESAFIOS DE IHM/IHC O que se quer? INTERFACE Não se pode pensar em interfaces sem considerar o ser humano que vai usá-la, e portanto interface e interação são conceitos que não podem ser estabelecidos ou analisados independentemente. A primeira preocupação dos designers de interface deve ser a de melhorar o modo como as pessoas podem usar o computador para pensar e comunicar, observar e decidir, calcular e simular, discutir e projetar. ROCHA e BARANAUSKAS, 2003 18
IHC - Conceito IHC é a disciplina preocupada com o design, avaliação e implementação de sistemas computacionais interativos para uso humano e com o estudo dos principais fenômenos ao redor deles. ROCHA e BARANAUSKAS, 2003 PROFISSIONAIS QUE CONTRIBUEM PARA O ADVENTO DE NOVAS TECNOLOGIAS Designers de Software explorando as melhores maneiras de se organizar as informações. Desenvolvendo linguagens de consulta e facilidades visuais para a entrada, busca e saída de informações. Utilizando, sons, representações tridimensionais, animação e vídeo para melhorar o conteúdo e a expressão das interfaces. Técnicas como a manipulação direta, telepresença, realidade virtual mudam a maneira de interagir e de prensar sobre computadores. Desenvolvedores de Hardware criação de novos designs de teclados, dispositivos de apontamento, displays de alta resolução. Projetando sistemas com resposta rápida para complexas manipulações tridimensionais. Tecnologias que permitem entrada e saída por voz, entrada por gestos, telas de toque, as quais tem aumentado muito a facilidade e o uso de computadores. Desenvolvedores na área de tecnologia educacional criando tutoriais online e materiais de treinamento e explorando novas abordagens de discussões em grupo, ensino a distancia, apresentações em vídeo etc... 19
IHC Introdução Objetivos Princípios de um Bom Design Avaliações de interfaces - Contextualização - Importância -Conceitos -Exemplos - Sistemas Úteis - Sistemas Seguros - Sistemas Funcionais de Sistemas Visibilidade Affordance Bom modelo conceitual - Restrições físicas - Restrições lógicas - Restrições culturais - Observação - Verbalização - Heurísticas Bons mapeamentos Social Prática - Relações entre controle e seus movimentos e o resultado no mundo Feedback Custo Utilidade compatibilidade Confiabilidade Funcionalidade Usabilidade aprendizagem Eficiência relembrar Erros Satisfação subjetiva ACEITABILIDADE DE SISTEMAS Combinação de SISTEMAS ATUAIS DE CONTROLE DE PORTAS DE ENTRADA DE BANCOS Apesar de serem benéficos socialmente (impedem situações de assalto), não são aceitos socialmente pois levam a que qualquer pessoa que queira entrar no banco tenham que esbarrar na porta trancada por inúmeras vezes até se desfazer de todo e qualquer objeto suspeito (pois não se sabe quais os objetos que impedem a entrada). PARÂMETROS TRADICIONAIS: Custo Utilidade Usabilidade (facilidade de uso e aprendizado) Compatibilidade Confiabilidade, etc... 20
IHC Introdução Objetivos Princípios de um Bom Design Avaliações de interfaces - Contextualização - Importância -Conceitos -Exemplos - Sistemas Úteis - Sistemas Seguros - Sistemas Funcionais de Sistemas Visibilidade Affordance Bom modelo conceitual - Restrições físicas - Restrições lógicas - Restrições culturais - Observação - Verbalização - Heurísticas Bons mapeamentos Social Prática - Relações entre controle e seus movimentos e o resultado no mundo Feedback Custo Utilidade compatibilidade Confiabilidade Funcionalidade Usabilidade aprendizagem Eficiência relembrar Erros Satisfação subjetiva PRINCÍPIOS DE UM BOM DESIGN 1.Visibilidade Determina que apenas as coisas necessárias devem estar visíveis. Indica o mapeamento entre ações pretendidas e as ações reais. Indica também distinções importantes. Visibilidade do efeito das operações A falta de visibilidade é que torna muitos dispositivos controlados por computadores tão difíceis de serem operados. EXEMPLOS: Diferenciar a vasilha do sal da do açúcar. Portas (puxar, empurrar ou deslizar) 21
IHC Introdução Objetivos Princípios de um Bom Design Avaliações de interfaces - Contextualização - Importância -Conceitos -Exemplos - Sistemas Úteis - Sistemas Seguros - Sistemas Funcionais de Sistemas Visibilidade Affordance Bom modelo conceitual - Restrições físicas - Restrições lógicas - Restrições culturais - Observação - Verbalização - Heurísticas Bons mapeamentos Social Prática - Relações entre controle e seus movimentos e o resultado no mundo Feedback Custo Utilidade compatibilidade Confiabilidade Funcionalidade Usabilidade aprendizagem Eficiência relembrar Erros Satisfação subjetiva PRINCÍPIOS DE UM BOM DESIGN 2. Affordance Refere-se as propriedades percebidas e propriedades reais dos objetos dainterface. Determinam como um objeto funciona. Quando se tem a predominância da affordance o usuário sabe o que fazer somente olhando, não sendo preciso figuras, rótulos ou instruções. EXEMPLOS: 22
IHC Introdução Objetivos Princípios de um Bom Design Avaliações de interfaces - Contextualização - Importância -Conceitos -Exemplos - Sistemas Úteis - Sistemas Seguros - Sistemas Funcionais de Sistemas Visibilidade Affordance Bom modelo conceitual - Restrições físicas - Restrições lógicas - Restrições culturais - Observação - Verbalização - Heurísticas Bons mapeamentos Social Prática - Relações entre controle e seus movimentos e o resultado no mundo Feedback Custo Utilidade compatibilidade Confiabilidade Funcionalidade Usabilidade aprendizagem Eficiência relembrar Erros Satisfação subjetiva PRINCÍPIOS DE UM BOM DESIGN 3. Bom Modelo Conceitual Permite prever o efeito de ações. Sem um bom modelo conceitual, efetuam-se as operações sem saber que efeitos esperar ou o que fazer se algo der errado. Inserir Restrições: Determinação das formas de delimitar o tipo de interação que pode ocorrer em um determinado momento. Exemplo: Desativar certas opções do menu sombreando-as, restringindo as ações do usuário somente às permitidas naquele estágio da atividade. 23
PRINCÍPIOS DE UM BOM DESIGN Modelo Conceitual Restrições podem ser: Modo como os objetos físicos restringem o movimento das coisas. Exemplos: Um único modo de inserir a chave em uma fechadura. De quantas formas você pode inserir um CD ou um DVD no computador? Quais as restrições físicas nesta ação? Como isto difere da inserção de um disquete? PRINCÍPIOS DE UM BOM DESIGN Modelo Conceitual Restrições podem ser: Explorar o senso comum das pessoas sobre como as coisas funcionam. Exemplo: Relação entre o layout físico de um dispositivo e o modo como ele funciona 24
PRINCÍPIOS DE UM BOM DESIGN Modelo Conceitual Restrições podem ser: No uso de checkbox, em alguns países o marcador X deve ser substituído por V (sinal de visto) pois no Japão o X significa exclusão. Objetos brancos no Japão = morte Vermelho = bruxaria em muitos países africanos IHC Introdução Objetivos Princípios de um Bom Design Avaliações de interfaces - Contextualização - Importância -Conceitos -Exemplos - Sistemas Úteis - Sistemas Seguros - Sistemas Funcionais de Sistemas Visibilidade Affordance Bom modelo conceitual - Restrições físicas - Restrições lógicas - Restrições culturais - Observação - Verbalização - Heurísticas Bons mapeamentos Social Prática - Relações entre controle e seus movimentos e o resultado no mundo Feedback Custo Utilidade compatibilidade Confiabilidade Funcionalidade Usabilidade aprendizagem Eficiência relembrar Erros Satisfação subjetiva 25
PRINCÍPIOS DE UM BOM DESIGN 4. Bom Mapeamento Relação entre controles e seus movimentos e o resultado no mundo EXEMPLOS: IHC Introdução Objetivos Princípios de um Bom Design Avaliações de interfaces - Contextualização - Importância -Conceitos -Exemplos - Sistemas Úteis - Sistemas Seguros - Sistemas Funcionais de Sistemas Visibilidade Affordance Bom modelo conceitual - Restrições físicas - Restrições lógicas - Restrições culturais - Observação - Verbalização - Heurísticas Bons mapeamentos Social Prática - Relações entre controle e seus movimentos e o resultado no mundo Feedback Custo Utilidade compatibilidade Confiabilidade Funcionalidade Usabilidade aprendizagem Eficiência relembrar Erros Satisfação subjetiva 26
PRINCÍPIOS DE UM BOM DESIGN 4. Feedback Feedback - Retornar ao usuário informação sobre as ações que foram feitas, quais os resultados obtidos. -? Falar com uma pessoa sem ouvir sua voz!! IHC Introdução Objetivos Princípios de um Bom Design Avaliações de interfaces - Contextualização - Importância -Conceitos -Exemplos - Sistemas Úteis - Sistemas Seguros - Sistemas Funcionais de Sistemas Visibilidade Affordance Bom modelo conceitual - Restrições físicas - Restrições lógicas - Restrições culturais - Observação - Verbalização - Heurísticas Bons mapeamentos Social Prática - Feedback - Relações entre controle e seus movimentos e o resultado no mundo Custo Utilidade compatibilidade Confiabilidade Funcionalidade Usabilidade aprendizagem Eficiência relembrar Erros Satisfação subjetiva 27
IHC Introdução Objetivos Princípios de um Bom Design Avaliações de interfaces - Contextualização - Importância -Conceitos -Exemplos - Sistemas Úteis - Sistemas Seguros - Sistemas Funcionais de Sistemas Visibilidade Affordance Bom modelo conceitual - Restrições físicas - Restrições lógicas - Restrições culturais - Observação - Verbalização - Heurísticas Bons mapeamentos Social Prática - Feedback - Relações entre controle e seus movimentos e o resultado no mundo Custo Utilidade compatibilidade Confiabilidade Funcionalidade Usabilidade aprendizagem Eficiência relembrar Erros Satisfação subjetiva Bibliografia Heloísa Vieira da Rocha; Maria Cecília Calani Baranauskas. Design e Avaliação de Interfaces humano-computador. Instituto de Computação. Universidade Estadual de Campinas, 2003. Jakob Nielsen, Usabilty Engineering, Morgan Kaufmann, Inc. San Francisco, 1993 28