Resumo de usabilidade IHC

Prévia do material em texto

B r u n o S a n t a n a
Fonte: https://www.slideshare.net/devaner/interao-humano-computador-aula-11-uso-de-cores
Interação Humano 
computador
“
https://www.slideshare.net/devaner/interao-humano-computador-aula-11-uso-de-cores
Interação Humano Computador
» Bem vindos ao encontro virtual da disciplina de Interação Humano 
Computador
» Neste encontro conversaremos sobre usabilidade.
» Conhecer as heurísticas de Nielsen
Fonte: https://www.slideshare.net/devaner/interao-humano-computador-aula-11-uso-de-cores
O que é
USABILIDADE
“
https://www.slideshare.net/devaner/interao-humano-computador-aula-11-uso-de-cores
Usabilidade
» Conceito referente a qualidade de interação entre o usuário e o 
sistema.
» É a capacidade de um produto ser usado por usuários específicos para 
atingir objetivos específicos com eficácia, eficiência e satisfação em um 
contexto específico de uso (ISO9241-11,1998)
» Aspectos considerados:
» Facilidade de aprendizado;
» Facilidade de uso;
» Satisfação do usuário;
» Flexibilidade; e
» Produtividade.
Usabilidad
e
Usabilidade é 
definida como a 
capacidade que um 
sistema interativo 
oferece a seu 
usuário, em um 
determinado 
contexto de 
operação, para a 
realização de 
tarefas, de maneira 
eficaz, eficiente e 
agradável (ISO 9241
Usabilidade
» A usabilidade de uma interface é um conceito que se refere à qualidade da 
interação de sistemas com os usuários e depende de vários aspectos. Alguns 
destes fatores são:
» • facilidade de aprendizado do sistema: tempo e esforço necessários para que os 
usuários atinjam um determinado nível de desempenho;
» • facilidade de uso: avalia o esforço físico e cognitivo do usuário durante o processo de 
interação, medindo a velocidade do número de erros cometidos durante a execução de 
uma determinada tarefa;
» • satisfação do usuário: avalia se o usuário gosta e sente prazer em trabalhar com este 
sistema;
» • flexibilidade: avalia a possibilidade de o usuário acrescentar e modificar as funções e o 
ambiente iniciais do sistema. Assim, este fator mede também a capacidade de o usuário 
utilizar o sistema de maneira inteligente e criativa, realizando novas tarefas que não 
estavam previstas pelos desenvolvedores;
» • produtividade: se o uso do sistema permite ao usuário ser mais produtivo do que seria 
se não o utilizasse (PRATES; BARBOSA, 2007, p. 4).
Usabilidade
»facilidade de aprendizado do sistema: tempo 
e esforço necessários para que os usuários 
atinjam um determinado nível de 
desempenho;
Usabilidade
»facilidade de uso: avalia o esforço físico e 
cognitivo do usuário durante o processo de 
interação, medindo a velocidade do número 
de erros cometidos durante a execução de 
uma determinada tarefa;
Usabilidade
» satisfação do usuário: avalia se o usuário 
gosta e sente prazer em trabalhar com este 
sistema;
Usabilidade
»flexibilidade: avalia a possibilidade de o 
usuário acrescentar e modificar as funções e 
o ambiente iniciais do sistema. Assim, este 
fator mede também a capacidade de o 
usuário utilizar o sistema de maneira 
inteligente e criativa, realizando novas 
tarefas que não estavam previstas pelos 
desenvolvedores;
Usabilidade
» produtividade: se o uso do sistema permite 
ao usuário ser mais produtivo do que seria 
se não o utilizasse.
Usabilidade
Como desenvolver melhores 
interfaces?
1. Conheça a real necessidade do usuário
Projete a interface se baseando nas reais necessidades do usuário.
O telefone antigo é uma ótima analogia: simples e direto. A necessidade do usuário 
neste caso podem ser duas: ligar para alguém utilizando um número ou atender uma 
ligação. Para ambos, a interface é intuitiva, clara e evidente.
2. Seja simples: menos é mais!
As melhores interfaces são invisíveis ao usuário.
Que tal o Google Chrome como exemplo? O navegador mais 
utilizado do mundo (fonte: Wikipédia) tem uma das interfaces 
mais simples que se possa imaginar. E engana-se quem pensa 
que ele é tão simples quanto seu visual, muito pelo contrário, é 
um aplicativo robusto e recheado de recursos, porém ficam 
"invisíveis" à primeira vista mas facilmente acessíveis, 
exatamente como deve ser.
Aplicativo do Google Chrome aberto: interface extremamente 
simplista
2. Seja simples: menos é mais!
Evite elementos desnecessários e entregue os demais de 
maneira limpa e direta.
2. Seja simples: menos é mais!
• Exemplo de ferramenta para estilização de texto (richtext) do 
Gmail: todas as ações de maneiras simples e fácil de se 
utilizar. Como o uso (em sua maioria) é mandar um texto 
simples, sem estilização, a ferramenta fica disponível ao 
usuário porém "escondida". E ainda que ele a acesse, as 
opções não vem todas já disponíveis de primeira, causando 
confusões em meio a tantos ícones. Elas surgem à medida de 
suas necessidades.
3. Crie uma identidade para seu sistema
• Usuários se sentem mais confortáveis e são mais eficientes 
em utilizar elementos e recursos padronizados em todo o 
sistema, o que podemos chamar de identidade.
• Quando a identidade é bem aplicada, basta uma única 
interação do usuário com o sistema para que se torne capaz 
de reutilizá-lo a qualquer momento.
• Vejamos a Barra de ferramentas do Microsoft Word, Excel e 
Powerpoint, um sobre o outro.
3. Crie uma identidade para seu sistema
4. Não exija esforço de seu usuário
• Priorize o reconhecimento ao invés de recordação. É 
melhor que o usuário entenda e reconheça uma ação 
do que ter de lembrar o que aconteceu em situações 
anteriores.
• Três ícones diferentes representando a mesma ação: 
duplicar.
4. Não exija esforço de seu usuário
• A primeira versão - inteligentemente foi a de um botão 
circular com o desenho de uma ovelha dentro. 
Fantástico! A ovelha fazia alusão à Dolly, primeiro 
mamífero clonado com sucesso, em 1996, e que dava 
total sentido à ação que era "clonar". Porém, isso 
demandaria um grande esforço do usuário e 
definitivamente, não funcionaria. 
4. Não exija esforço de seu usuário
• Uma boa opção é recorrer à padrões, que no caso, um 
documento sobre o outro (mais a dica de tela ao passar 
o mouse indicando o nome da ação "Duplicar") ou 
utilizar a própria legenda/texto como o ícone do botão 
(somente caso a dimensão não atrapalhe a leitura ou a 
identidade do sistema).
4. Não exija esforço de seu usuário
4. Não exija esforço de seu usuário
• Forneça atalhos e estratégias 
para facilitar o usuário a realizar 
tarefas de forma descomplicada 
e eficiente: teclas de atalho e 
máscaras em formulários são 
bons exemplos.
• Interfaces intuitivas e familiares 
se aproveitam de elementos 
comuns em nosso cotidiano 
para interagir com o usuário.
5. Organize a informação
• Crie padrões de espaçamentos e grids, elementos 
fundamentais para organizar a informação e permitir que a 
atenção seja focada em porções específicas, facilitando a 
concentração do usuário.
• Utilize fontes, tamanhos e cores diferentes nos textos, 
melhorando a dinâmica de leitura da página, legibilidade e 
leitura.
 6. O vazio nunca deve estar vazio
• Crie padrões de espaçamentos e grids, elementos 
fundamentais para organizar a informação e permitir que a 
atenção seja focada em porções específicas, facilitando a 
concentração do usuário.
 6. O vazio nunca deve estar vazio
• Utilize fontes, tamanhos e cores diferentes nos textos, 
melhorando a dinâmica de leitura da página, legibilidade e 
leitura.
7. Se aproveite do contraste
• Elementos com bom contraste saltam aos olhos, o contrário, por sua vez, passa 
mais facilmente despercebido. Duas tabelas mostrando o exemplo de como o 
contraste chama a atenção do usuário. Utilize do recurso e gerencie a atenção do 
usuário para o que realmente é necessário.
Na imagem acima (uma 
releitura do UsabilityPost), fica 
evidente o poder do contraste. 
Utilizando-se dos mesmos 
elementos e textos, variando 
somente os cinzas, podemos 
perceber que à esquerda, a 
atenção é voltada ao texto e à 
direita, o botão "Comprar" nos 
saltam aos olhos.8. Utilize as cores estrategicamente
•É imprescindível utilizar as cores corretas, que variam em cada caso, estude sobre a psicologia 
das cores. Importante: tratando-se de acessibilidade, utilizar somente as cores para distinguir 
uma ação da outra não é uma boa prática. Algumas deficiências visuais tais como o daltonismo 
impedem essa diferenciação. A utilização de ícones se torna um auxílio poderoso nesses casos! 
•Caixa de confirmação utilizando-se das cores e icones para facilitar seu uso. Tome nota: 
interfaces com fundo branco e texto preto são mais confortáveis e cansam menos os olhos.
 9. Dê o controle ao usuário
• O usuário está no comando, ele quer e precisa ter o controle das ações e a 
liberdade de manusear o sistema. Por isso, oferecer liberdade ao usuário 
se diz em possibilitá-lo avançar ou voltar pelas páginas do sistema, 
executar ou cancelar determinada ação e às vezes até mesmo retroceder. 
Ações como "Remover" ou "Excluir" determinado registro de um sistema 
são na maioria das vezes processos irreversíveis.
 9. Dê o controle ao usuário
• Para esses tipos de ações, irreversíveis ou de grande impacto no fluxo do sistema, forneça sempre 
uma mensagem de confirmação, explicando a ação que será realizada e permitindo que o usuário 
possa prosseguir ou cancelar. O exemplo (abaixo) vai além, permite que o usuário possa até mesmo 
retroceder (restaurar o registro) mesmo após sua confirmação. Exemplo de ação que ao clicar, 
permite o usuário cancelar sua solicitação. 
• Ok. Essa opção de "restaurar" pode parecer exagero, mas em alguns casos (como nossas caixas de 
e-mails) são de extrema utilidade! Veja a real necessidade de seu sistema e aplique-o se necessário.
10. Faça o sistema conversar com o usuário
• Toda ação gera uma reação (já dizia Newton) e em sistemas não deve ser diferente.
• É comum termos ações que não geram resultado em tempo real, isto é, ações que 
exigem um tempo de resposta do sistema.
• Funcionalidade que ao ser acionada o sistema não fornece feedback.
10. Faça o sistema conversar com o usuário
• O que não podemos fazer é deixar de exibir um feedback ao usuário informando-o que a 
ação foi solicitada ou executada. Uma boa prática para estes casos são as famosas 
barras de progressão (carregando, loading...). Elas informam ao usuário que o sistema 
está processando sua ação e ainda, quando animadas, melhoram a experiência do 
usuário, tornando a espera mais agradável (ou menos desagradável).
10. Faça o sistema conversar com o usuário
• Uma interface agradável conversa com o usuário, o instrui sempre que necessário e 
fornece feedbacks a cada ação: sucesso, alertas e erros. Exemplos de mensagens de 
alerta, sucesso, erro e informação.
• Tenha sempre em mente a regra: melhor que mensagens de erro são formas de 
prevenção.
 lembre-se: 
fale sempre a 
linguagem do 
usuário!
   
Fonte: http://thiagonasc.com/usabilidade/usabilidade-10-regras-desenvolver-interfaces-agradaveis
http://thiagonasc.com/usabilidade/usabilidade-10-regras-desenvolver-interfaces-agradaveis
10 heurística. Nielsen 
• 1. visibilidade do estado do sistema: o sistema deve manter os usuários 
sempre informados sobre o que está acontecendo, dando um retorno 
(feedback) adequado e dentro de um tempo aceitável;
• 2. mapeamento entre o sistema e o mundo real: o sistema deve falar a 
linguagem do usuário utilizando palavras, frases e conceitos que sejam 
familiares a ele, em vez de termos somente orientados ao sistema;
• 3. liberdade e controle ao usuário: deve fornecer maneiras que permitam que 
os usuários saiam com facilidade dos lugares inesperados, utilizando-se 
“saídas de emergência” claramente identificadas;
• 4. consistência e padrões: o sistema deve evitar que os usuários tenham que 
pensar se palavras, situações ou ações diferentes significam a mesma coisa;
• 5. prevenção de erros: ajuda os usuários a reconhecer, diagnosticar e 
recuperar-se de erros e utiliza linguagem simples para apresentar a origem 
do problema e sugere uma maneira de resolvê-lo;
10 heurística. Nielsen 
• 6. reconhecer em vez de lembrar: a interface deve permitir o reconhecimento em vez de 
recordação, além de minimizar a carga de memória do usuário, tornando objetos, ações e opções 
visíveis. As instruções de como usar o sistema devem estar visíveis e serem facilmente 
recuperáveis quando necessário;
• 7. flexibilidade e eficiência de uso: a interface deve possuir aceleradores que estejam invisíveis 
para o usuário novato e que podem frequentemente acelerar a interação para o usuário mais 
experiente. O sistema deve permitir a utilização de ambos os usuários inexperientes e experientes;
• 8. design estético e minimalista: a interface deve evitar o uso de diálogos com informações 
irrelevantes ou raramente necessárias, pois cada unidade extra de informação em um diálogo 
compete com as unidades relevantes de informação e diminui sua visibilidade relativa;
• 9. suporte para o usuário reconhecer, diagnosticar e recuperar erros: a interface deve ajudar os 
usuários a reconhecer, diagnosticar e resolver erros. As mensagens de erros devem ser colocadas 
em linguagem clara (sem códigos), indicar com exatidão o problema e sugerir construtivamente 
uma solução;
• 10.ajuda e documentação: sempre se objetiva que um sistema possa ser usado sem 
documentação, às vezes, é necessário fornecer uma ajuda e documentação. Qualquer informação 
deve ser fácil de ser pesquisada e ter o foco na atividade do usuário, além de possuir uma lista de 
passos concretos e não muito extensos de serem realizados.
B r u n o S a n t a n a
	Slide 1
	Slide 2
	Interação Humano computador
	Interação Humano Computador
	O que é USABILIDADE
	Usabilidade
	Usabilidade (2)
	Usabilidade é definida como a capacidade que um sistema interat
	Usabilidade (3)
	Usabilidade (4)
	Usabilidade (5)
	Usabilidade (6)
	Usabilidade (7)
	Usabilidade (8)
	Usabilidade (9)
	1. Conheça a real necessidade do usuário
	2. Seja simples: menos é mais!
	2. Seja simples: menos é mais! (2)
	2. Seja simples: menos é mais! (3)
	3. Crie uma identidade para seu sistema
	3. Crie uma identidade para seu sistema (2)
	4. Não exija esforço de seu usuário
	4. Não exija esforço de seu usuário (2)
	4. Não exija esforço de seu usuário (3)
	4. Não exija esforço de seu usuário (4)
	4. Não exija esforço de seu usuário (5)
	5. Organize a informação
	6. O vazio nunca deve estar vazio
	6. O vazio nunca deve estar vazio (2)
	7. Se aproveite do contraste
	8. Utilize as cores estrategicamente
	9. Dê o controle ao usuário
	9. Dê o controle ao usuário (2)
	10. Faça o sistema conversar com o usuário
	10. Faça o sistema conversar com o usuário (2)
	10. Faça o sistema conversar com o usuário (3)
	lembre-se: fale sempre a linguagem do usuário!
	10 heurística. Nielsen
	10 heurística. Nielsen (2)
	Slide 40
	Slide 41