ENGENHARIA DE USABILIDADE E INTERFACES Luiz Leão luizleao@gmail.com http://www.luizleao.com
Conteúdo Programático Identificar os paradigmas de IHC; Conhecer o conceito de usabilidade; Reconhecer um problema de usabilidade; Examinar diferentes tipos de interfaces.
Introdução
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.
Paradigma 1: LINHAS DE COMANDO Prompt de comando do MS Windows
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.
Paradigma 2: PERGUNTAS E RESPOSTAS Site Akinator
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. A maioria das aplicações Windows organiza suas opções em menus hierárquicos.
Paradigma 3: MENUS Windows Explorer do MS Windows Navegador Firefox
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.
Paradigma 4: PREENCHIMENTO DE FORMULÁRIOS Site Submarino, Declaração de IR, Orkut
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.
Paradigma 5: TECLAS DE FUNÇÃO Navegador Firefox
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.
Paradigma 6: MANIPULAÇÃO DIRETA Galeria de temas do Gmail, Galeria de animações do PowerPoint
Sobre os Paradigmas de Interação Independente do paradigma de interação adotado, EVITE PROBLEMAS DE INTERAÇÃO! Fonte da imagem: http://btechzone.com/wp-content/uploads/2010/10/ frustrated.jpg
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. Fonte da imagem: http://www.ukwebsites.net/usability.asp
Aspectos principais da usabilidade
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?
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?
Aspectos Principais da Usabilidade Eficiência: Uma vez que aprendam a interface, os usuários conseguem executar suas tarefas com rapidez?
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 MS Word?
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?
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?
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?
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?
Aspectos Principais da Usabilidade Satisfação: É agradável interagir com a interface?
Aspectos Principais da Usabilidade Satisfação: É agradável interagir com a interface? É cansativo navegar no Facebook por muito tempo?
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. 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. B A R R E I R A S O B S T Á C U L O S R U Í D O S
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. Onde está a opção para ativar o bloqueador de popups no Google Chrome?
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. A opção para inserir uma nota de rodapé não está na aba Inserir... Onde ela estará?
Ruídos Ruídos são problemas mais brandos e que não chegam a configurar uma barreira ou um obstáculo. Problema de espaçamento entre palavras na mensagem do Word... Que feio!
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
Explorando o tema Ergonomia e Usabilidade: conhecimentos, métodos e aplicações. Autores: Walter Cybis, Adriana Holtz Betiol e Richard Faust Novatec Editora, 2010
IHC: Multidisciplinar
Taxa de Erros É 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?
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:
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.
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.
Primeira Geração Painéis com plugues, botões, mostradores e funcionamento dedicado
Segunda Geração Lotes de cartões de dados perfurados e entrada de dados remota ("RJE") Década de 50 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.
Segunda Geração Lotes de cartões de dados perfurados e entrada de dados remota ("RJE") 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.
Segunda Geração Lotes de cartões de dados perfurados e entrada de dados remota ("RJE")
Terceira Geração Tempo compartilhado via teletipo - Teletype Timesharing 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".
Terceira Geração Tempo compartilhado via teletipo - Teletype Timesharing O dispositivo interativo (um terminal de impressão lento ou um teletipo com tela em ASCII), 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.
Terceira Geração Tempo compartilhado via teletipo - Teletype Timesharing
Quarta Geração Sistemas de Menus Década de 70 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 Terminal Burro" Mainframe
Quarta Geração Sistemas de Menus
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.
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.
Quinta Geração Controles gráficos e janelas
Quinta Geração Controles gráficos e janelas
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:
Primeira Geração Comandos e interfaces de perguntas - Query Interfaces A comunicação é puramente textual e é feita via comandos e respostas às perguntas geradas pelo sistema.
Primeira Geração Comandos e interfaces de perguntas - Query 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.
Segunda Geração Menu simples
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").
Terceira Geração Orientada a janela, interfaces de apontar e apanhar
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.
Quarta Geração Hypertexto e Multitarefa
Tipos de Interface Humano Computador CUI GUI PUI VRUI
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 uma máquina de escrever ou de um teletipo. Fazem parte das primeiras gerações de interface homem computador.
CUI
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.
GUI
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
VRUI 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.
Engenharia de Usabilidade e Interfaces VRUI
Uso de Cores no Design de Telas - Regras 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 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
Uso de Cores no Design de Telas - Regras para o Projeto 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 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 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
Uso de Cores no Design de Telas - Regras para o Projeto 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 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