![Page 1: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/1.jpg)
Softwares Interativos
Lílian Simão Oliveira
![Page 2: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/2.jpg)
Usabilidade???
• Vídeo – Lifted - Pixar
![Page 3: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/3.jpg)
3
User-Centered Design = UCD
• Projeto centrado no usuário
• Análise dos objetivos e das tarefas do usuários
• Criar opções de projetos
• Avaliar opções
• Implementar protótipo
• Testar
• Refinar
• Implementar produto
![Page 4: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/4.jpg)
4
Conhecer o usuário
• Habilidades ou necessidades especiais: físicas e
cognitivas
• Cultura
• Conhecimentos
• Motivações
![Page 5: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/5.jpg)
5
Erros Fatais
• Assumir que todos os usuários são iguais
• Assumir que os usuários são como o projetista
![Page 6: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/6.jpg)
Princípios de Norman
• Modelo conceitual• Visibilidade• Mapeamento• Restrição• Feedback• Affordances - quanto potencial a forma de um objeto
tem para que ele seja manipulado da maneira que pensado para funcionar.
• Errar é humano• Projeto centrado no usuário
![Page 7: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/7.jpg)
Princípios e Metas da Usabilidade (adaptado de PREECE et al., 2005)
![Page 8: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/8.jpg)
![Page 9: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/9.jpg)
9
Princípios de Usabilidade
1. Learnability (facilidade de aprendizado)
2. Flexibility (flexibilidade)
3. Robustness (robustez)
![Page 10: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/10.jpg)
10
1. Learnability (facilidade de aprendizado)
• 1a. Predictability - Previsibilidade
(facilidade de prever o resultado da interação)
• 1b. Synthesizability -
(facilidade de inferir como a interação funciona depois de utilizar um pouco)
• 1c. Familiarity - (familiaridade)
• 1d. Generalizability - (facilidade de generalizar o mecanismo geral de
interação depois de utilizar um pouco)
• 1e. Consistency - (consistência)
![Page 11: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/11.jpg)
11
• 1a. Predictability (facilidade de predizer o resultado da interação com base no passado)– antes de interagir, apenas observando, o usuário já sabe o que vai
acontecer como resultado de uma interação– Pode inferir o que e possível fazer
• 1b. Synthesizability (facilidade de avaliar o efeito das ações passadas no estado atual)– O usuário consegue formar um modelo mental do comportamento
do sistema, e consegue concluir como a interação ocorre depois de utilizar um pouco o sistema e perceber os resultados de ações passadas
– Forma um modelo mental da operação que permite avaliar o efeito de ações passadas no estado atual do sistema
1. Learnability (facilidade de aprendizado)
![Page 12: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/12.jpg)
12
• 1c. Familiarity (familiaridade)– O usuário entende a interação porque ela e parecida com outras
as quais ele esta acostumado a usar em outros sistemas ou no mundo real
• 1d. Generalizability (facilidade de generalizar o resultado da interação)– O usuário consegue aplicar soluções semelhantes em varias
situacoes ou sistemas que sao semelhantes de alguma forma• 1e. Consistency (consistência)
– O quanto o comportamento e similar em situação similares– O mais importante dos princípios da categoria de facilidade de
aprendizado; os demais dependem deste!
1. Learnability (facilidade de aprendizado)
![Page 13: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/13.jpg)
13
• 2a. Dialog Initiative - (iniciativa do dialogo)
• 2b. Multi-threading - (suporte a multiplas tarefas/dialogos)
• 2c. Task Migratability - (transferencia de controle entre
sistema e usuario para execucao de tarefas)
• 2d. Substitutivity - (formas alternativas de entrar/exibir
informacao)
• 2e. Customizability - (capacidade de adaptacao da interface)
2. Flexibility (Flexibilidade)
![Page 14: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/14.jpg)
14
• 2a. Dialog Initiative (iniciativa do dialogo)– Dependendo da situação, o usuário ou o sistema inicia a interação– Preferencia do usuário deve ser maximizada, do sistema minimizada
• 2b. Multi-threading– O usuário deve poder fazer varias coisas ao mesmo tempo;– múltiplos diálogos em andamento– Ex : multimodalidade: usar vários canais de comunicação
• 2c. Task migratability (migração do controle de tarefas)– Possibilidade de transferir o controle de uma tarefa entre sistema e
usuário e vice-versa– ex: correção ortográfica (ser humano pode fazer, mas software pode
ajudar)
2. Flexibility (Flexibilidade)
![Page 15: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/15.jpg)
15
• 2d. Substitutivity
– uma ação (entrada ou saída) pode ser realizada de mais de um modo
– mostrar resultado de vários modos diferentes
• 2e. Customizability (personalização)
– o usuário deve poder personalizar a interação (e a interface) de
acordo com suas necessidades ou preferencias
– Adaptabilidade x adaptatividade
gerenciada pelo usuário x pelo sistema (automática)
2. Flexibility (Flexibilidade)
![Page 16: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/16.jpg)
16
• 3a. Observability– Capacidade que o usuário tem de avaliar o estado interno do sistema a
partir da representação perceptível da interface• 3b. Recoverability
– Habilidade do usuário realizar uma ação corretiva uma vez que tenha percebido que um erro aconteceu
• 3c. Responsiveness– Como o usuário percebe o taxa de comunicação com o sistema, tempo
necessário para perceber mudanças de estado no sistema em resposta a ações
• 3d. Task conformance– O quanto os serviços do sistema suportam todas as tarefas que o
usuário precisa realizar, da maneira que o usuário espera
3. Robustness (robustez)
![Page 17: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/17.jpg)
17
Usabilidade x Custo
• Em 1994, Deborah Mayhew e Randolph Bias lançaram o livro Cost-Justifying
Usability, mostrando que envolver usuários desde o início de um projeto
gera uma economia de 20% em relação àqueles que só envolvem o usuário
depois que tudo está quase pronto.
• Isso acontece porque, pegando o feedback durante o processo, os
redesenhos acontecem ainda nas fases preliminares. É muito mais rápido –
e, portanto, barato – mexer em um wireframe do que em um HTML pronto.
Qualquer idéia que esteja ainda no papel é mais fácil de ser modificada do
que após o produto executado.
![Page 18: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/18.jpg)
18
ISO 9241
• Usability:the effectiveness, efficiency and satisfaction with
which specified users achieve specified goals in particular
environments
– Effectiveness: the accuracy and completeness with which specified
users can achieve specified goals in particular environments
– Efficiency: The resources expended in relation to the accuracy and
completeness of goals achieved
– Satisfaction: The comfort and acceptability of the work system to its
users and other people affected by its use
![Page 19: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/19.jpg)
Protótipo de Papel
• Protótipo de Papel
![Page 20: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/20.jpg)
Protótipo
• baixa definição
• média definição
• alta definição
![Page 21: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/21.jpg)
Pensando em voz alta (Think Aloud)
• Usuário verbaliza o que está pensando enquanto usa o sistema• Expectativa é que os pensamentos mostrem como o usuário interpreta
cada item da interface• Inadequada quando o objetivo é obter medidas de desempenho• Usuários tendem a ficar mais lentos e cometer mais erros• Requer experimentador bem-preparado• Estimular o usuário a falar• Não interferir no uso do sistema• Vantagem: mostra o que o usuário está fazendo e porque está fazendo,
enquanto está fazendo• Boa estratégia: usuários trabalhando aos pares• Outra alternativa: pedir que os usuários comentem depois suas ações
gravadas em vídeo
![Page 22: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/22.jpg)
Técnica do Mágico de OZ
![Page 23: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/23.jpg)
Vantagens de Uso
• Custo
• Rapidez no desenvolvimento
• Fácil feedback do usuário
![Page 24: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/24.jpg)
Softwares
• Alguns softwares que podem auxiliar no desenvolvimento dos protótipos.
![Page 25: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/25.jpg)
Balsamiq
balsamiq.com
![Page 26: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/26.jpg)
Axure
balsamiq.com
![Page 27: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/27.jpg)
WireframeSketcher
http://wireframesketcher.com
![Page 28: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/28.jpg)
Google SketchUP
![Page 29: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/29.jpg)
Sucesso de uma Interface
• Um interface só é bem sucedida se ela der o suporte adequado aos objetivos e ao comportamento do usuário real.
• Conhecer o usuário é fundamental. Buscando saber o que o usuário pensa, o que quer e como age, aplicando técnicas de pesquisa como grupos de foco ou testes de usabilidade.
![Page 30: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/30.jpg)
Sucesso de uma Interface
![Page 31: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/31.jpg)
SUCESSO DE UMA INTERFACE
![Page 32: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/32.jpg)
SUCESSO DE UMA INTERFACE
![Page 33: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/33.jpg)
SUCESSO DE UMA INTERFACE
![Page 34: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/34.jpg)
SUCESSO DE UMA INTERFACE
![Page 35: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/35.jpg)
Sucesso de uma Interface
• O processo de projeto de interação consta dos seguintes passos:
– Elicitação e Análise,– Modelagem de Tarefas,– Modelagem de Interação,– Prototipação.
![Page 36: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/36.jpg)
Elicitação e Análise
• Faz o levantamento e análise de:– Usuários:
“Nenhum estilo de interface serve para todos os tipos de usuário”.
– Ambiente de trabalho dos usuários:• Conhecimento e experiência no seu trabalho• Suas características psicológicas e físicas• Suas preferências e expectativas
– Tarefas dos Usuários.
![Page 37: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/37.jpg)
Elicitação e Análise
• Técnicas mais utilizadas:
– Entrevista• Tem acesso ao local de trabalho?• Melhor usar entrevistas individuais?
– Questionário• Utilizado quando existe um grupo de usuários muito
grande.
![Page 38: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/38.jpg)
Modelagem de Tarefas
“Compreende os pensamentos do usuário em seu trabalho para projetar uma aplicação que o apóie
nestas tarefas”
• Qual é a sequência de ações que o usuário precisa executar?– Caminho simples através de um único passo para
completar a tarefa.
![Page 39: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/39.jpg)
Modelagem de Tarefas
• Técnicas mais utilizadas:
– Entrevistas, reuniões e observação direta
– Questionamento sobre cenários (CARROLL et al., 1994)
– Análise das tarefas (ANNET E DUNCAN, 1967; PREECE et al., 1994)
![Page 40: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/40.jpg)
Modelagem de Interação
• Aproveitar os objetos utilizados no mundo real para que seja de fácil percepção do usuário.– Ex: Lixeira, Calendário, etc.
“Interação é o processo de comunicação entre pessoas e sistemas interativos.”
(PREECE et al., 1994)
![Page 41: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/41.jpg)
Prototipação
• Um protótipo de software consiste em uma versão limitada do sistema, realmente implementada, com a qual os usuários podem interagir.
• Tem como objetivo esclarecer:– Funcionalidades,– Sequências de operação,– Necessidades de apoio aos usuários,– Aparência da interface.
![Page 42: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/42.jpg)
A Situação (TURINE, 2002)
Você
O Controle Remoto da Garagem
X
![Page 43: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/43.jpg)
Esquema de Situação (antes)
![Page 44: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/44.jpg)
Esquema de Situação (depois)
![Page 45: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/45.jpg)
O que contribuiu para a situação?• Falha de projeto:
– Não é possível identificar os botões rapidamente, através do tato ou contato visual breve.
• Pressa para acionar o botão, que pode ser causada por diversas razões:
– Estar atrapalhando o trânsito
– Medo de assaltos
– Nervosismo
– Ansiedade
![Page 46: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/46.jpg)
Como evitar e sobreviver ao erro.
• Diferenciar botões:
– Cores (botão verde / vermelho)
– Formas (botão triangular / redondo)
– Textos (Entrada / Saída)
– Teclas iluminadas
• Desenho do controle:
– Formato diferenciado
– Botões distanciados
![Page 47: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/47.jpg)
Prototipação em papel - Conceito
• Pode ser considerado como um método de brainstorming, designing, criação, teste e comunicação de interfaces de usuário.
• Prototipação em papel é uma variação de teste de usabilidade onde usuários representativos realizam uma tarefa real pré-definida, por meio da interação com a versão em papel da interface, que é manipulada por uma pessoa que finge ser o próprio computador, e não explica como a interface é destinada ao trabalho.
![Page 48: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/48.jpg)
Como se trabalha?
• Reunião com os membros da equipe de produto para definir o tipo de usuário que representa a maior parte dos usuários para aquelas interfaces.
• Determinam-se algumas tarefas típicas que se espera que o usuário faça com apoio do sistema a ser projetado.
Membros da equipe trabalhando para gerar os protótipos em papel
![Page 49: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/49.jpg)
Como se trabalha?• Faz-se captura de telas e/ou versões de esboço a mão de
todas as janelas, menus, caixas de diálogo, páginas, dados, mensagens pop-up, e assim sucessivamente até que se reúna o necessário para permitir ao usuário desempenhar as funções da tarefa.
Protótipo em papel de formulários típicos para ingressar texto
![Page 50: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/50.jpg)
Como se trabalha?
• Pode-se esboçar usando a lousa digital, ou pode fazer o protótipo em papel.
O protótipo em papel de um
esboço a mão de uma tela da página
Web ChocoArt.
![Page 51: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/51.jpg)
Como se trabalha?
• Depois de criar o protótipo, se tem que fazer um teste de usabilidade:– Trazer a uma pessoa representativa da audiência, você e os membros
de seu equipe.
Laboratório de usabilidade preparando uma sessão de teste
com prototipação em papel
![Page 52: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/52.jpg)
Como se trabalha?– Falar ao usuário que tente realizar a tarefa mediante interação direta
com o protótipo, fazendo “click” por meio de tocar os botões do protótipo o links, e “type” por meio de escrever a data certa no protótipo.
Usuários testando o protótipo de uma página
web
![Page 53: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/53.jpg)
Como se trabalha?– Um ou dois dos membros de equipe tem que cumprir o papel de
“computador”, manipulando as peças de papel para simular como a interface se comporta, mas sem explicar qual é o propósito do trabalho.
Protótipo em papel - abas manipulado por
um membro da equipe
![Page 54: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/54.jpg)
Como se trabalha?– O facilitador (usualmente alguém treinado em usabilidade) dirige a
sessão enquanto os demais membros da equipe atuam como observadores.
Usuários testando a fidelidade de uma homepage do protótipo em papel
Usuários testando o protótipo em papel de um dispositivo móvel
![Page 55: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/55.jpg)
Vantagens
As vantagens de fazer um protótipo em papel são:Lápis e papel é barato e não requer especialista ou programadorVocê pode rapidamente descobrir qual parte da interface
trabalha bem e quais dão problemas. Como o protótipo é tudo em papel, você pode facilmente fazer
modificações imediatamente depois - ou algumas vezes durante - cada teste de usabilidade.
Podem ser realizados vários testes de usabilidade em um ou dois dias, e não há demora para receber o feedback do usuário.
O protótipo em papel permite refinar e melhorar o design muito rápido baseado em entradas reais do usuário, e pode acontecer antes de escrever a primeira linha de código da interface.
![Page 56: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/56.jpg)
Benefícios• Benefícios da prototipação em papel
– Os benefícios de considerar a usabilidade no começo do projeto são pelo menos dez vezes superiores a considerar depois do projeto. Estudos de realizar o teste de usabilidade depois de um projeto freqüentemente acrescentam cerca de 100% de benefício no valor final do projeto, mas considerar a usabilidade desde o início de um projeto pode beneficiar em 1.000% ou mais o seu valor.
– Provê um feedback do usuário consistente com tempo no processo de desenvolvimento, antes de investir esforço na implementação.
– Promove desenvolvimento iterativo rápido. Pode se experimentar diferentes idéias antes de apostar em uma.
![Page 57: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/57.jpg)
Benefícios
• Benefícios da prototipação em papel– Facilita a comunicação dentro do equipe de
desenvolvimento e entre os equipes de desenvolvimento e os clientes.
– Inspira criatividade no processo de desenvolvimento do produto.
– Não requer nenhuma habilidade técnica, assim a equipe multidisciplinar pode trabalhar junto, pois todos dominam essa ferramenta desde criança .
57
![Page 58: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/58.jpg)
Mitos
• Falso. A prototipação em papel é uma das técnicas mais rápidas e mais baratas que você pode empregar em um processo de concepção. Permite determinar problemas de usabilidade antes de gastar dinheiro implementando algo que não é o trabalho desejado.
“Não vou obter informações suficientes de
um método que é tão simples e tão barato”
![Page 59: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/59.jpg)
Mitos
• Falso. Se você espera, pode ser tarde demais para desenvolver todas as interfaces e ir modificando-as de acordo com o feedback do usuário sobre o design.
“Devemos esperar até que tenhamos uma melhor
interface de usuário antes de mostrar aos clientes“
59
![Page 60: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/60.jpg)
Exemplos de Prototipação em Papel
• Home
![Page 61: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/61.jpg)
Exemplos de Prototipação em Papel
• Busca Avançada
![Page 62: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/62.jpg)
Exemplos de Prototipação em Papel
• Cadastro de Pessoa Física
![Page 63: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/63.jpg)
Exemplos de Prototipação em Papel
• Central de Atendimento
![Page 64: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/64.jpg)
Exemplos de Prototipação em Papel
• Compras
64
![Page 65: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/65.jpg)
65
Web
Web 2.0
Web 3.0
Evolução Web
![Page 66: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/66.jpg)
66
Um bom projeto• NÃO é apenas aplicar diretrizes e checklists
– Eles ajudam, mas projeto centrado no usuário (UCD) é mais que isso: é uma filosofia
• NÃO é usar o projetista como usuário modelo– É necessário conhecer os usuários reais– É necessário conhecer as variações entre diferentes seres humanos
• NÃO é apenas senso comum– Saber como projetar um alarme de incêndio garantindo que ele
será ouvido sobre quaisquer outros sons ambientes é algo que nem todos sabem fazer
– Um especialista em fatores humanos sabe aonde ou como obter as informações necessárias para responder a questões de projeto
![Page 67: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/67.jpg)
67
CheckList UsabilidadeA lista abaixo é o básico que pode (e deve) ser usado em qualquer análise heurística. Existem várias listas similares, no entanto essa lista do Dr. Peter Meyers serve a qualquer propósito.
Acessibilidade
• Tempo de abertura do site é razoável
• Contraste entre texto e fundo é adequado
• Tamanho de fonte / espaçamento facilita a leitura
• Flash e add-ons são usados moderadamente
• Imagens possuem ALT tags
• Site tem uma página de Erro 404
![Page 68: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/68.jpg)
68
Identidade
• Logo do site está bem posicionado
• Tagline da empresa é clara
• Propósito do site é entendido em 5 segundos
• Acesso rápido a informação da empresa
• Acesso rápido a contato com a empresa
CheckList Usabilidade
![Page 69: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/69.jpg)
69
Navegação
• Navegação principal é facilmente identificável
• Itens de navegação são claros e concisos
• Quantidade de botões e links é razoável
• Logo do site é linkado à página inicial
• Links são consistentes e fáceis de serem identificados
• Caixa de busca é de fácil acesso
CheckList Usabilidade
![Page 70: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/70.jpg)
70
Conteúdo
• Títulos são claros e descritivos
• Conteúdo crítico está acima da dobra
• Estilos e cores são consistentes
• Ênfase (bold, etc) é usado de forma moderada e adequada
• Anúncios e pop-ups são não obstrutivos
• Texto é conciso e explicativo
• URLs são amigáveis
• Títulos HTML são explicativos
CheckList Usabilidade
Fonte: http://www.usereffect.com/topic/25-point-website-usability-checklist
![Page 71: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/71.jpg)
71
RobotReplay
• Serviço gratuito que permite gravar a interação dos usuários no seu site para assistir depois
• O serviço funciona da seguinte maneira: depois de criar sua conta e adicionar o script do RobotReplay no seu site, ele grava TODOS os movimentos do mouse, incluindo os cliques, e permite você os ver em ação. Depois você poderá assistir literalmente a navegação dos usuários dentro do seu site com um cursor animado fazendo exatamente todos os movimentos que o usuário fez. É possível vê-lo navegando pelas páginas, clicando em trechos do site, o scroll da página etc.
Fonte: http://revolucao.etc.br/archives/robotreplay-testes-de-usabilidade-com-usuarios-reais-e-de-graca/
![Page 72: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/72.jpg)
72
Exemplos de Interface
![Page 73: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/73.jpg)
73
![Page 74: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/74.jpg)
74
![Page 75: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/75.jpg)
75
![Page 76: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/76.jpg)
76
Site Promocional
![Page 77: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/77.jpg)
77
Exemplos ruins
![Page 78: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/78.jpg)
78
Exemplos ruins
Cliente: “Eu quero um site simples, sem muita frescura…quero que destaque meus produtos. Todos eles.”
![Page 79: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/79.jpg)
79
![Page 80: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/80.jpg)
80
![Page 81: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/81.jpg)
81
Dicas para desenvolvimento Web
• Cuidado com músicas em site
• Contraste é importante, mas lembre-se que tem que ser agradável
• Imagem é melhor que mil palavras, mas uma boa imagem!
• Ícones com legenda é interessante
• Teste em todos os browsers!!
• Defina bem seu público
• Navegação intuitiva, mas não deixe de ter mapa do site
• Busca eficiente
![Page 82: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/82.jpg)
Acessibilidade
• Vídeo
![Page 83: Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar](https://reader036.vdocuments.mx/reader036/viewer/2022062512/552fc13f497959413d8de4db/html5/thumbnails/83.jpg)
83
Acessibilidade
• Acessibilidade envolve fazer compensações para características que uma pessoa não pode mudar facilmente. (Joe Clark - http://joeclark.org/)
• Mais em: http://revolucao.etc.br/archives/vamos-falar-de-acessibilidade/
• Bengala Legal - http://www.bengalalegal.com/