softwares interativos lílian simão oliveira. usabilidade??? • vídeo – lifted - pixar
Post on 18-Apr-2015
115 Views
Preview:
TRANSCRIPT
Softwares Interativos
Lílian Simão Oliveira
Usabilidade???
• Vídeo – Lifted - Pixar
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
4
Conhecer o usuário
• Habilidades ou necessidades especiais: físicas e
cognitivas
• Cultura
• Conhecimentos
• Motivações
5
Erros Fatais
• Assumir que todos os usuários são iguais
• Assumir que os usuários são como o projetista
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
Princípios e Metas da Usabilidade (adaptado de PREECE et al., 2005)
9
Princípios de Usabilidade
1. Learnability (facilidade de aprendizado)
2. Flexibility (flexibilidade)
3. Robustness (robustez)
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)
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)
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)
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)
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)
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)
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)
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.
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
Protótipo de Papel
• Protótipo de Papel
Protótipo
• baixa definição
• média definição
• alta definição
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
Técnica do Mágico de OZ
Vantagens de Uso
• Custo
• Rapidez no desenvolvimento
• Fácil feedback do usuário
Softwares
• Alguns softwares que podem auxiliar no desenvolvimento dos protótipos.
Balsamiq
balsamiq.com
Axure
balsamiq.com
WireframeSketcher
http://wireframesketcher.com
Google SketchUP
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.
Sucesso de uma Interface
SUCESSO DE UMA INTERFACE
SUCESSO DE UMA INTERFACE
SUCESSO DE UMA INTERFACE
SUCESSO DE UMA INTERFACE
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.
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.
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.
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.
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)
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)
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.
A Situação (TURINE, 2002)
Você
O Controle Remoto da Garagem
X
Esquema de Situação (antes)
Esquema de Situação (depois)
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
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
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.
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
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
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.
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
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
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
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
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.
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.
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
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”
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
Exemplos de Prototipação em Papel
• Home
Exemplos de Prototipação em Papel
• Busca Avançada
Exemplos de Prototipação em Papel
• Cadastro de Pessoa Física
Exemplos de Prototipação em Papel
• Central de Atendimento
Exemplos de Prototipação em Papel
• Compras
64
65
Web
Web 2.0
Web 3.0
Evolução Web
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
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
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
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
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
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/
72
Exemplos de Interface
73
74
75
76
Site Promocional
77
Exemplos ruins
78
Exemplos ruins
Cliente: “Eu quero um site simples, sem muita frescura…quero que destaque meus produtos. Todos eles.”
79
80
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
Acessibilidade
• Vídeo
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/
top related