Baixe o app para aproveitar ainda mais
Prévia do material em texto
ENGENHARIA DE USABILIDADE E INTERFACES Unidade II – Usabilidade e Interação Humano-Computador (IHC) Engenharia de Usabilidade e Interfaces Conteúdo Programático • • • • Identificar os paradigmas de IHC; Conhecer o conceito de usabilidade; Reconhecer um problema de usabilidade; Examinar diferentes tipos de interfaces. Unidade II – Usabilidade e Interação Humano-Computador (IHC) Engenharia de Usabilidade e Interfaces Introdução Engenharia de Usabilidade e Interfaces Paradigma 1: LINHAS DE COMANDO • O usuário digita um comando por vez seguindo uma sintaxe específica. • O sistema executa o comando e exibe o resultado do processamento, quando houver. • O antigo sistema operacional MS-DOS utilizava este estilo de interação. Prompt de comando do MS Windows Engenharia de Usabilidade e Interfaces Paradigma 1: LINHAS DE COMANDO Engenharia de Usabilidade e Interfaces Paradigma 2: PERGUNTAS E RESPOSTAS • O sistema faz perguntas ao usuário que, por sua vez, responde fornecendo os dados solicitados. • Quando o sistema dispuser de todos os dados dos quais precisa, realiza o processamento dos mesmos e exibe os resultados. Site Akinator Engenharia de Usabilidade e Interfaces Paradigma 2: PERGUNTAS E RESPOSTAS Engenharia de Usabilidade e Interfaces Paradigma 3: MENUS • As possíveis ações a serem executadas pelo usuário estão listadas na tela, ou organizadas em menus hierárquicos, e é possível selecionar uma delas. • Amaioria das aplicações Windows organiza suas opções em menus hierárquicos. Windows Explorer do MS Windows Navegador Firefox Engenharia de Usabilidade e Interfaces Paradigma 3: MENUS Engenharia de Usabilidade e Interfaces Paradigma 4: PREENCHIMENTO DE FORMULÁRIOS • O usuário digita os dados em campos específicos, como se estivesse preenchendo um formulário impresso em papel. •Muitas aplicações de escritório e de bancos de dados utilizam esse estilo de interação. Site Submarino, Declaração de IR Engenharia de Usabilidade e Interfaces Paradigma 4: PREENCHIMENTO DE FORMULÁRIOS Engenharia de Usabilidade e Interfaces Paradigma 5: TECLAS DE FUNÇÃO •A interação se dá através de um conjunto de teclas especiais ou de combinação de teclas para diferentes operações. •As teclas de atalho, que dão acesso mais rápido às opções de menus, são um exemplo desse estilo de interação. Navegador Firefox Engenharia de Usabilidade e Interfaces Paradigma 5: TECLAS DE FUNÇÃO Engenharia de Usabilidade e Interfaces Paradigma 6: MANIPULAÇÃO DIRETA • Os objetos utilizados na criação da interface são graficamente representados na tela e o usuário pode manipulá-los diretamente quando aponta, clica, arrasta, digita etc. • Grande parte das interfaces gráficas baseia-se neste estilo de interação. Galeria de temas do Gmail, Galeria de animações do PowerPoint Engenharia de Usabilidade e Interfaces Paradigma 6: MANIPULAÇÃO DIRETA Fonte da imagem: http://btechzone.com/wp-content/uploads/2010/10/ frustrated.jpg Engenharia de Usabilidade e Interfaces Sobre os Paradigmas de Interação Independente do paradigma de interação adotado, EVITE PROBLEMAS DE INTERAÇÃO! Fonte da imagem: http://www.ukwebsites.net/usability.asp Engenharia de Usabilidade e Interfaces O que é USABILIDADE? •Atributo de qualidade dos sistemas •A intenção é avaliar a de facilidade de uso na interação com as interfaces • O termo “usabilidade” também pode fazer referência a métodos para melhoria da facilidade de interação durante o processo de projeto das interfaces. Engenharia de Usabilidade e Interfaces Aspectos principais da usabilidade Engenharia de Usabilidade e Interfaces Aspectos Principais da Usabilidade • Facilidade de uso: Na primeira vez em que têm contato com a interface, é fácil para os usuários realizar tarefas básicas? É fácil desenhar um círculo no Paint? Engenharia de Usabilidade e Interfaces Aspectos Principais da Usabilidade • Facilidade de uso: Na primeira vez em que têm contato com a interface, é fácil para os usuários realizar tarefas básicas? Engenharia de Usabilidade e Interfaces Aspectos Principais da Usabilidade • Eficiência: Uma vez que aprendam a interface, os usuários conseguem executar suas tarefas com rapidez? É possível fazer um uso mais eficiente do MSWord? Engenharia de Usabilidade e Interfaces Aspectos Principais da Usabilidade • Eficiência: Uma vez que aprendam a interface, os usuários conseguem executar suas tarefas com rapidez? Engenharia de Usabilidade e Interfaces Aspectos Principais da Usabilidade • Facilidade de memorização: Quando voltam a utilizar a interface depois de um longo período de afastamento, os usuários conseguem retomar o uso com facilidade e rapidez? É fácil relacionar os ícones das barras de ferramentas às tarefas que desempenham? Engenharia de Usabilidade e Interfaces Aspectos Principais da Usabilidade • Facilidade de memorização: Quando voltam a utilizar a interface depois de um longo período de afastamento, os usuários conseguem retomar o uso com facilidade e rapidez? Engenharia de Usabilidade e Interfaces Aspectos Principais da Usabilidade • Taxa de erros: Quantos erros os usuários cometem durante o uso da interface? Esses erros são graves? A recuperação desses erros é fácil? É possível digitar letras no CEP? Engenharia de Usabilidade e Interfaces Aspectos Principais da Usabilidade • Taxa de erros: Quantos erros os usuários cometem durante o uso da interface? Esses erros são graves? A recuperação desses erros é fácil? Engenharia de Usabilidade e Interfaces Aspectos Principais da Usabilidade • Satisfação: É agradável interagir com a interface? É cansativo navegar no Facebook por muito tempo? Engenharia de Usabilidade e Interfaces Aspectos Principais da Usabilidade • Satisfação: É agradável interagir com a interface? No que diz respeito ao grau de severidade dos problemas de usabilidade, podemos dizer que as barreiras são mais graves do que os obstáculos. Esses, por sua vez, são mais graves do que os ruídos. BARREIRAS OBSTÁCULOS RUÍDOS Engenharia de Usabilidade e Interfaces Problemas de Usabilidade • Configuram-se em dificuldades vivenciadas pelos usuários durante o uso de uma aplicação computadorizada. • São classificados em três tipos: Barreiras, Obstáculos e Ruídos. Onde está a opção para ativar o bloqueador de pop- ups no Google Chrome? Engenharia de Usabilidade e Interfaces Barreiras • Barreiras são problemas com os quais o usuário se depara com frequência e que não consegue superar sem a ajuda, impedindo que os usuários executem suas tarefas. A opção para inserir uma nota de rodapé não está na aba “Inserir”... Onde ela estará? Engenharia de Usabilidade e Interfaces Obstáculos • Obstáculos são problemas com os quais os usuários se deparam e que, depois de algumas tentativas, conseguem ultrapassar sem a necessidade de ajuda de terceiros. Problema de espaçamento entre palavras na mensagem do Word... Que feio! Engenharia de Usabilidade e Interfaces Ruídos • Ruídos são problemas mais brandos e que não chegam a configurar uma barreira ou um obstáculo. Engenharia de Usabilidade e Interfaces “Um problema de usabilidade é observado em determinadas circunstâncias quando uma característica do sistema interativo ocasiona perda de tempo, compromete a qualidade da tarefa ou mesmo inviabiliza sua realização. Como consequência, ele estará aborrecendo, constrangendo ou até traumatizando a pessoa que utiliza o sistema interativo.” (CYBIS et. al. Ergonomia e usabilidade: conhecimentos,métodos e aplicações. Novatec Editora, 2010) Fonte da imagem: http://www.ukwebsites.net/usability.asp Engenharia de Usabilidade e Interfaces Explorando o tema Ergonomia e Usabilidade: conhecimentos, métodos e aplicações. Autores: Walter Cybis, Adriana Holtz Betiol e Richard Faust Novatec Editora, 2010 Engenharia de Usabilidade e Interfaces IHC: Multidisciplinar Engenharia de Usabilidade e Interfaces • É um dos aspectos a ser observado durante a avaliação da usabilidade das interfaces. • Dentro desse aspecto, é importante preocupar-se com a quantidade de erros cometida pelos usuários durante o uso da interface, a gravidade desses erros e sua recuperabilidade. • Por que é tão importante estar atento a essas características durante o projeto de interfaces e ao longo da implementação da aplicação? Taxa de Erros Engenharia de Usabilidade e Interfaces Evolução das Interfaces Homem-Computador • Walker • Walker (1990) redefine a geração dos computadores sob o ponto de vista de como os usuários interagem com ele (afirmando ser este ponto de vista muito mais importante do que o de como eles foram construídos), em 5 gerações: Engenharia de Usabilidade e Interfaces Primeira Geração • Painéis com plugues, botões, mostradores e funcionamento dedicado • Surgiu em 1945, com a criação do ENIAC • Composta pelos sistemas de tabulação e pelo ENIAC, desenvolvidos para resolver problemas específicos, por especialistas com conhecimento preciso e detalhado da operação do hardware. • O usuário tinha uma relação um a um com o computador, na sala do computador, operando-o através de chaves e botões. Engenharia de Usabilidade e Interfaces Primeira Geração • Painéis com plugues, botões, mostradores e funcionamento dedicado • Pelo fato do usuário ser o operador da máquina e controlá-la com pouca ou nenhuma abstração, não havia qualquer mediação entre o computador e seu usuário especialista. • Nos anos 50, o modelo do usuário de um computador era o de um usuário individual, com o tempo totalmente dedicado para a máquina. Engenharia de Usabilidade e Interfaces Primeira Geração • Painéis com plugues, botões, mostradores e funcionamento dedicado • • A segunda geração introduziu muitos níveis importantes de mediação e abstrações entre o usuário e o hardware do computador. Provavelmente, a mudança mais importante foi a autonomia de tempo oferecida, pelo processamento em lotes, para o usuário que, até então, ficava o tempo todo em que durava o processamento de um programa, dedicado a operação do computador. Engenharia de Usabilidade e Interfaces Segunda Geração • Lotes de cartões de dados perfurados e entrada de dados remota ("RJE") • Década de 50 • • As linguagens de controle de serviços ("Job Control Languages - JCL"), controlavam as atividades dos computadores sem a necessária intervenção do usuário. Os lotes de cartões, as listagens de impressoras, os balcões de atendimento e os JCL formaram o ponto central da imagem do usuário dos sistemas de segunda geração. Engenharia de Usabilidade e Interfaces Segunda Geração • Lotes de cartões de dados perfurados e entrada de dados remota ("RJE") Engenharia de Usabilidade e Interfaces Segunda Geração • Lotes de cartões de dados perfurados e entrada de dados remota ("RJE") • • • • Década de 60 Os sistemas operacionais passaram, a proporcionar a execução concorrente de múltiplos serviços, originando o conceito de compartilhamento do computador com uma grande comunidade de usuários, de maneira interativa. Os conceitos de produtividade de máquina (que ocasionaram a execução concorrente de programas), deram origem ao conceito de produtividade do usuário, através de uma maior interação conversacional do usuário com o computador, levando ao desenvolvimento dos sistemas de tempo compartilhado dos anos sessenta. O uso de sistemas em tempo compartilhado proporcionou, aos usuários de sistemas em lotes, os mesmos serviços oferecidos anteriormente, porém acrescidos da facilidade da execução dos trabalhos de modo interativo, permitindo a monitoração de seus progressos de forma "on-line". Engenharia de Usabilidade e Interfaces Terceira Geração • Tempo compartilhado via teletipo - Teletype Timesharing • • • O dispositivo interativo (um terminal de impressão lento ou um teletipo com tela emASCII), permitia o desenvolvimento de Computação Conversacional. O usuário digitava uma linha de entrada para o computador, que imediatamente a processava e respondia com outra linha. No modo de interação conversacional, o usuário conversava com o computador da mesma forma que com outra pessoa, através de uma ligação teletipo a teletipo. Engenharia de Usabilidade e Interfaces Terceira Geração • Tempo compartilhado via teletipo - Teletype Timesharing Engenharia de Usabilidade e Interfaces Terceira Geração • Tempo compartilhado via teletipo - Teletype Timesharing Engenharia de Usabilidade e Interfaces • O desenvolvimento de terminais alfanuméricos rápidos e sofisticados permitiu que se pudesse apresentar, para o usuário, uma grande quantidade de informações de maneira quase que instantânea, possibilitando o desenvolvimento dos menus de escolhas, pelos quais os usuários podiam selecionar o item desejado, simplesmente pressionando uma ou duas teclas. • Estes tipos de menus rapidamente se tornaram padrões para os sistemas de aplicações desenvolvidos para serem operados por pessoas não especializadas em computação. Quarta Geração • Sistemas de Menus • Década de 70 Engenharia de Usabilidade e Interfaces Quarta Geração • Sistemas de Menus Mainframe “Terminal Burro" Engenharia de Usabilidade e Interfaces Quarta Geração • Sistemas de Menus Engenharia de Usabilidade e Interfaces Quinta Geração • Controles gráficos e janelas • Surgiu no Centro de Pesquisa de Palo Alto da Xerox • Alan Kay e outros pesquisadores do perceberam que o desenvolvimento dos circuitos integrados monolíticos (que diminuíram o custo da memória do computador), dos processadores rápidos e baratos, das redes de dados e das técnicas de programação orientadas a objetos, poderiam permitir o desenvolvimento de uma forma, totalmente nova, de interação entre os usuários e os computadores, através de telas com gráficos bidimensionais, que permitiram a aplicação de muitas metáforas que com as tecnologias anteriores podiam ser apenas vagamente aproximadas da realidade. Engenharia de Usabilidade e Interfaces Quinta Geração • Controles gráficos e janelas • A tela do computador pode ser transformada em uma mesa de trabalho completa, com folhas de papel que podiam ser folheadas, contendo vários acessórios e recursos. • A disponibilidade de um dispositivo apontador, como o "mouse", permitiu a seleção de objetos na tela, sem a necessidade da digitação de nomes ou da opção através dos menus, como nos sistemas anteriores. Engenharia de Usabilidade e Interfaces Quinta Geração • Controles gráficos e janelas Unidade II – Usabilidade e Interação Humano-Computador (IHC) Engenharia de Usabilidade e Interfaces Quinta Geração • Controles gráficos e janelas Engenharia de Usabilidade e Interfaces Evolução das Interfaces Homem-Computador • Roger S. Pressman • Pressman (1995) classifica a evolução das interações entre o ser humano e o computador em apenas quatro gerações: • A comunicação é puramente textual e é feita via comandos e respostas às perguntas geradas pelo sistema. Engenharia de Usabilidade e Interfaces Primeira Geração • Comandos e interfaces de perguntas - QueryInterfaces Engenharia de Usabilidade e Interfaces Primeira Geração • Comandos e interfaces de perguntas - Query Interfaces Engenharia de Usabilidade e Interfaces Segunda Geração • Menu simples • Uma lista de opções é apresentada ao usuário e a decisão apropriada é selecionada via algum código digitado. Engenharia de Usabilidade e Interfaces Segunda Geração • Menu simples Engenharia de Usabilidade e Interfaces Terceira Geração • Orientada a janela, interfaces de apontar e apanhar • Estas interfaces são algumas vezes referenciadas como interfaces "WIMP" ("windows, icons, menus, and pointing devices"). • Trazem o conceito de mesa de trabalho ("desktop"). Engenharia de Usabilidade e Interfaces Terceira Geração • Orientada a janela, interfaces de apontar e apanhar Engenharia de Usabilidade e Interfaces Quarta Geração • Hypertexto e Multitarefa • Esta geração (que para ele é a corrente), soma, aos atributos das interfaces de terceira geração, as técnicas de hipertextos e multitarefas. • A quarta geração das interfaces está disponível na maioria das estações de trabalho e dos computadores pessoais atuais. Engenharia de Usabilidade e Interfaces Quarta Geração • Hypertexto e Multitarefa • • • • CUI GUI PUI VRUI Engenharia de Usabilidade e Interfaces Tipos de Interface Humano Computador Engenharia de Usabilidade e Interfaces CUI • Character-based User Interface • Também conhecido como CLI (Command Line Interface) • São as interfaces fundamentadas em textos e caracteres alfanuméricos, fazendo uso da metáfora de umamáquina de escrever ou de um teletipo. • Fazem parte das primeiras gerações de interface homem computador. Engenharia de Usabilidade e Interfaces CUI Engenharia de Usabilidade e Interfaces GUI • Graphical User Interface • São as interfaces fundamentadas em gráficos e desenhos, fazendo uso de metáforas de mesas de trabalho, documentos, botões, janelas, etc.. • Fazem parte da quinta geração apresentada por Walker ou da terceira apresentada por Pressman. Engenharia de Usabilidade e Interfaces GUI Engenharia de Usabilidade e Interfaces PUI • Pen-based User Interface • São as interfaces compostas de um monitor de vídeo em formato de uma planilha ou bloco de anotações que recebe dados através de uma espécie de caneta eletrônica. • Tais interfaces fazem uso da metáfora de se escrever ou desenhar em um papel de maneira manuscrita. Engenharia de Usabilidade e Interfaces PUI Engenharia de Usabilidade e Interfaces • Virtual Reality-based User Interface • O objetivo dessa tecnologia é recriar ao máximo a sensação de realidade para um indivíduo, levando-o a adotar essa interação como uma de suas realidades temporais • São as interfaces fundamentadas no paradigma da realidade virtual e utilizadas com muito menor frequência que as anteriores por limitação de custos e tecnologia. • Porém, algumas opções já estão disponíveis no mercado, com o objetivo de popularizar a tecnologia e, em seguida, barateá- la. VRUI Engenharia de Usabilidade e Interfaces VRUI Engenharia de Usabilidade e Interfaces • Não torne a tela muito brilhante ou escura - Use as cores brilhantes em áreas pequenas e cores suaves em áreas maiores • Não aposte na boa habilidade visual de todos os usuários - Um número muito grande de pessoas têm algum tipo de disfunção visual; - Isto faz com que algumas pessoas não consigam distinguir perfeitamente algumas cores e confundir outras; - Não só o daltonismo mas também a distorção de algumas lentes provoca estes efeitos Uso de Cores no Design de Telas - Regras Engenharia de Usabilidade e Interfaces Uso de Cores no Design de Telas - Regras • Se possível tornar as cores personalizáveis - No HTML, podemos definir a cor de fundo e a cor de links já visitados ao gosto do usuário. • Não use muitas cores extravagantes - Limite-se a 16 a 20 cores, que são as cores básicas do ambiente Windows e que aparecem bem em quase todos os monitores Engenharia de Usabilidade e Interfaces • Simplicidade • Use poucas cores (2 a 7); é mais fácil de dominar e mais simples de distinguir em dispositivos de menor qualidade ou preto-e-branco • Cores contrastantes como ferramenta de medida • Se as cores serão usadas para indicar continuidade, como a passagem de tempo enquanto se espera que uma tarefa termine, então não use um espectro de cores (do violeta ao vermelho). • Não associar muitas cores para serem lembradas • As cores podem possuir um significado, além daqueles mais populares (vermelho para Pare e Verde para Seguir). • Como exemplo: Cinza para Home-Page, Branco para Texto, Verde para Apresentações (PowerPoint) e Amarelo para Planilhas Uso de Cores no Design de Telas - Regras para o Projeto Engenharia de Usabilidade e Interfaces • Lembre que cores mal utilizadas é pior do que não usar cores • Associações comuns: • Vermelho: pare, perigo, fogo, quente •Amarelo: cuidado, atenção, aviso • Verde: siga, OK •Azul: frio, água • Diferenças culturais na associação de cores •Alguns países têm cores associadas à alguns objetos e fatos: • No Japão marginais usam chapéu azul • No Egito o amarelo é a cor da alegria e prosperidade •As caixas de correio são vermelhas na Inglaterra, azuis nos Estados Unidos, amarelas na Grécia e verdes ou amarelas no Brasil Uso de Cores no Design de Telas - Regras para o Projeto Engenharia de Usabilidade e Interfaces Uso de Cores no Design de Telas - Regras para o Projeto • Cores Opostas: • Se vermelho é Pare: oposto é verde • Se vermelho é calor, quente: oposto é azul • Sensação das cores: • A sensação é o efeito psico-fisiológico sentido pelo ser humano • Cada cor tem uma sensação associada, e portanto o uso inadequado de uma cor pode prejudicar a comunicação visual numa tela • A sensação também pode variar em função do contraste, isto é, a cor de um texto ou objeto pode ter sensação diferente conforme a cor do fundo da tela • Algumas cores podem ser usadas apenas em alertas ou pequenos espaços; é o caso do vermelho, do preto e do roxo/violeta Engenharia de Usabilidade e Interfaces • Cores quentes e frias • Cores quentes ou luminosas: amarelo, laranja, vermelho e violeta • Cores frias ou sombrias: azul, turquesa, verde-mar e verde-alface • Harmonia das cores: • Harmonia das cores opostas ou de contraste: o maior contraste se obtém justapondo cores complementares; a maior superfície é colorida com uma cor quente e a menor com sua cor complementar fria • Harmonia das cores análogas ou vizinhas: é o emprego de uma cor e uma ou duas vizinhas; por exemplo: laranja e seus vizinhos, vermelho e amarelo; a cor mais clara usada na superfície maior • Harmonia monocromática ou de cor dominante: é o uso de uma única cor, aplicada pura e em vários tons, claros e escuros Uso de Cores no Design de Telas - Regras para o Projeto Engenharia de Usabilidade e Interfaces Uso de Cores no Design de Telas - Regras para o Projeto • Cores de primeiro e segundo plano • Usar sempre pares complementares • Usar cores contrastantes • Cores e tamanho • Cores são difíceis de distinguir em pequenas áreas • Cores brilhantes parecem maiores • Cores escuras sobre fundo claro oferecem maior legibilidade
Compartilhar