Upload
marcello-cardoso
View
1.400
Download
1
Embed Size (px)
DESCRIPTION
Aula para a disciplina Produção e Ferramentas Colaborativas Pós-Graduação em Engenharia de Software Centrada em Métodos Ágeis Prof. Marcello de Campos Cardoso www.mcardoso.com.br Junho 2011
Citation preview
UsabilidadeEngenharia de Software Centrada em Métodos Ágeis
Marcello de Campos Cardoso | www.mcardoso.com.br | [email protected]
aula
6
Friday, June 17, 2011
Recapitulando...
Análise Heurística“Análise Heurística (Nielsen and Molich, 1990; Nielsen 1994) é um método de engenharia de usabilidade para encontrar os erros de usabilidade em uma interface para que sejam corrigidos em um processo de desenvolvimento iterativo.
Envolve um pequeno grupo de avaliadores para examinar a interface e avaliá-la de acordo com princípios de usabilidade reconhecidos (as heurísticas).” - Nielsen
Friday, June 17, 2011
Plano de curso
Introdução a Usabilidade: conceitos, origem (DCU, IHC), aplicação (IxD), metas de usabilidade, princípios de design, estudo de casos, benefícios, ciclos de vida de desenvolvimento (cascata x ágil), técnicas (overview).
Técnica de Modelagem: Personas ágeis (workshop)
Story Mapping (workshop)
Perguntando a especialistas:Análise Heurística, As 10 heurísticas de Nielsen (workshop)
Projetando a interface:Task Flow + Prototipação rápida (workshop)
Testes de usabilidade (workshop - roteiro)
Testes de usabilidade (workshop - aplicação)
1ª aula2ª aula
3ª aula
4ª aula
5ª aula
6ª aula
7ª aula
8ª aula
Friday, June 17, 2011
Análise heurística
Backlog do produto
Backlog do sprint
Reunião diária
Onde aplicar?
pode ser aplicadaem protótipos ou
releases
Friday, June 17, 2011
1º passo: Briefing• Os avaliadores discutem os critérios da avaliação como tarefas por exemplo
2º passo: Avaliação (cerca de 2h)• Independente• Double check - 1 para fluxo e tarefas e outro para interface e elementos
3º passo: Reunião de resultados e relatório• Discutir problemas• Priorizá-los• Elaborar recomendações e soluções
sequência de uso
Análise heurística
Como fazer?
Friday, June 17, 2011
1º passo: Briefing• Os avaliadores discutem os critérios da avaliação como tarefas por exemplo
2º passo: Avaliação (cerca de 2h)• Independente• Double check - 1 para fluxo e tarefas e outro para interface e elementos
3º passo: Reunião de resultados e relatório• Discutir problemas• Priorizá-los• Elaborar recomendações e soluções
sequência de uso
Análise heurística
Como fazer?
Friday, June 17, 2011
1º passo: Briefing• Os avaliadores discutem os critérios da avaliação como tarefas por exemplo
2º passo: Avaliação (cerca de 2h)• Independente• Double check - 1 para fluxo e tarefas e outro para interface e elementos
3º passo: Reunião de resultados e relatório• Discutir problemas• Priorizá-los• Elaborar recomendações e soluções
sequência de uso
Análise heurística
Como fazer?
Friday, June 17, 2011
1. Visibilidade do status do sistema (feedback)2. Compatibilidade do sistema com o mundo real (affordance)3. Controle do usuário e liberdade4. Consistência e padrões5. Prevenção de erros 6. Reconhecer em vez de relembrar7. Flexibilidade e eficiência no uso8. Estética e design minimalista9. Ajudar os usuários a reconhecer, diagnosticar e corrigir erros10.Ajuda e documentação
sequência de uso
Análise heurística
10 Heurísticas de Jakob Nielsen
Friday, June 17, 2011
ModelosSão ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a comunicação de informações.
Friday, June 17, 2011
Podem ser de baixa ou alta resoluçãoBaixa: Para explorar ideias, conceitos, fluxos
Alta: para validar decisões pontuais
Friday, June 17, 2011
“Devemos criar exatamente quanta documentação necessitamos para
executar bem um projeto, e não mais.”-Dan Saffer
Friday, June 17, 2011
Nós <3 PAPEL!• Nada digital é mais rápido, flexível e fácil de prototipar• Não requer habilidades específicas• É mais barato e colaborativo;• Variedade = possibilidades: Diferentes cores, tamanhos, texturas, adesivos...• Tamanho é documento (difícil ter um monitor do tamanho de uma cartolina)
• Estimula desapego• Reciclável, divertido, estimula a equipe
Friday, June 17, 2011
Cenário•Os protagonistas são as PERSONAS•Devem refletir comportamento no sistema
•Uma boa prática é passar diferentes personas pelo mesmo cenário
•Um bom cenário é imaginar o primeiro uso
“São protótipos feitos de palavras”
Friday, June 17, 2011
sequência de uso
Cenário
Lúcia Maria loga em sua conta Sacolao.com. Vê seu pedido da semana passada e decide usá-lo de novo para esta semana. Remove alguns itens arrastando-os de sua Cestinha®, e o valor ajusta automaticamente. Satisfeita com a compra, clica no botão Entrega rápida e confirma o débito em seu cartão de crédito previamente salvo. A tela de confirmação informa para esperar a entrega nas próximas 2 horas.
Uma imagem vale mil palavras.Mas as palavras certas podem valer algumas boas imagens.
Friday, June 17, 2011
sequência de uso
TO DO DONE
EM GRUPO!Criar um cenário (primeiro uso ou tarefa
chave) e aplicá-lo em sua Persona Focal +
outra criada por seu grupo, a sua escolha
tempo: 15’
Friday, June 17, 2011
sequência de uso
Task flows• Fluxos são tão importantes quanto telas
• Quanto mais “cascata”, mais robusto e formal o task flow
diagrama de fluxo
Friday, June 17, 2011
sequência de uso
task flowsdiagrama de fluxo
FFFFFFFFFFFFFFFFFFFFFFFFUUUUUUUUUUUUUUFriday, June 17, 2011
sequência de uso
Fluxos são interações de um indivíduo, elementos / escolhas
Task flowsdiagrama de fluxo
Friday, June 17, 2011
sequência de uso
Exemplo: Adicionando um item na TO-DO do Basecamp.
Task flowsdiagrama de fluxo
Friday, June 17, 2011
sequência de uso
• É rápido de fazer e simples de enxergar.
• Ideal para sprints!
Task flowsdiagrama de fluxo
Friday, June 17, 2011
sequência de uso
Estrutura• Barra separa a UI da ação• Barra pontilhada separa as opções para mesma ação• Setas vão da ação para a nova UI• Se a UI for fora de escopo, mantém simples, sem ação
Task flowsdiagrama de fluxo
Friday, June 17, 2011
sequência de uso
EM GRUPO!
definir fluxo da tarefa
principal (e
mais, se der tempo) consider
ando os
casos de uso.
tempo: 15’
TO DO DONE
Friday, June 17, 2011
sequência de uso
Rascunhos• Ideias primárias, generalistas, fluxos.• São feios! estimulam a discussão sobre função e uso
Friday, June 17, 2011
sequência de uso
EM GRUPO!
Exercício relâmpago!
Fazer rascunhos que co
nteplem o
cenário.
tempo: 5’
TO DO DONE
Friday, June 17, 2011
StoryboardsTécnica da publicidade, HQs e cinema, que ilustra
interações complexas
Friday, June 17, 2011
Storyboards• Imagens + legendas• Ilustram fluxos, momentos chave• Casos de uso• Mostram ambientes e contextos• Complementam wireframes
Friday, June 17, 2011
Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout)
Wireframesprotótipos estruturais do sistema
Friday, June 17, 2011
Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout)
Wireframesprotótipos estruturais do sistema
Podem ser usados para validar ideias
Friday, June 17, 2011
Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout)
Wireframesprotótipos estruturais do sistema
Podem ser usados para validar ideiasPodem ser usados para testes com usuários
Friday, June 17, 2011
Substituem documentos mais burocráticos, são especificações visuais comprometidas com:
• Estrutura• Arquitetura da informação
• Controles (padrões de interação)• Conteúdo
Wireframes
Friday, June 17, 2011
http://www.youtube.com/watch?v=k9mTvt0LXgkPrototipando e testando lo fi
Friday, June 17, 2011
sequência de uso
• Validar demandas
• Conceito do produto/serviço
• Comparar designs alternativos
• Fluxo de tarefas
O que testar em wires de baixa resolução?
• Aceitação em relação à interface
• Desempenho
• Acessibilidade
• Satisfação no uso
• Compreensão da interface
Friday, June 17, 2011
sequência de uso
• Validar demandas
• Conceito do produto/serviço
• Comparar designs alternativos
• Fluxo de tarefas
• Compreensão da interface
• Satisfação no uso
O que testar em wires de média resolução?
• Aceitação em relação à interface
• Desempenho
• Acessibilidade
Friday, June 17, 2011
sequência de uso
• Validar demandas• Conceito do produto/serviço• Comparar designs alternativos• Fluxo de tarefas• Compreensão da interface• Satisfação no uso
• Desempenho• Acessibilidade• Satisfação no uso
O que testar em wires de média resolução?
• Conceito do produto/serviço
• Comparar designs alternativos
Friday, June 17, 2011
1. Verificação limitada de erros
2. “Uso” conduzido pelo facilitador
3. Limitações de fluxos e navegações
4. Rápido e barato
sequência de uso
Considerações sobre baixa e média resolução
Friday, June 17, 2011
1. Demanda tempo para criação
2. Custo de produção mais alto
3. Uso mais próximo do real
4. Mesmo look and feel do produto final
sequência de uso
Considerações sobre alta resolução
Friday, June 17, 2011
1. Necessário desenvolver tecnologia para o produto final
2. Limitação de orçamento ou prazo
3. Testar conceito do produto
4. Testar diferentes alternativas de design
sequência de uso
Quando testar em protótipo e não no produto final?
Wireframes
Friday, June 17, 2011
1. Comparação de desempenho com concorrentes
2. Criar o protótipo exigirá o mesmo tempo ou mais
3. Testar bugs no sistema
4. Compreender uso real do produto
sequência de uso
Quando testar em produto final e não no protótipo?
Wireframes
Friday, June 17, 2011
Lembrem que isso é ágil, podemos
mudar o que foi decidido.
IDEAÇÃO = CAOS!
EM GRUPO!Prototipar em cima dos
rascunhos, ou refiná-lostempo: resto da aula
Friday, June 17, 2011