Download - UNA - Eng Usa '12 - aula 04
Engenharia de Usabilidade / Marcello Cardoso
Engenharia de UsabilidadeMarcello de Campos Cardoso | www.mcardoso.com.br | [email protected]
Engenharia de Software Centrada Em Métodos Ágeis
Prototipaçãoquebrando ovos para fazer omeletes
Engenharia de Usabilidade / Marcello Cardoso
recapitulando...
Engenharia de Usabilidade / Marcello Cardoso
User Story Mapping
Técnica para a separação de releases no backlog, para encontrar o MVP,
definir a espinha do produto e concentrar esforços de
desenvolvimento.
Engenharia de Usabilidade / Marcello Cardoso
1) Listar funcionalidades
2) Escrever em cartões
3) Ordenar em fluxo de tarefas
4) Ajustar posição quanto à criticidade
5) Agrupar por atividades macros
6) Marcar o primeiro release
7) Marcar demais releases
User Story Mapping
Engenharia de Usabilidade / Marcello Cardoso
Plano de curso1ª
2ª
3ª
4ª
5ª
Introdução à EngUsa
Técnica de Modelagem: Personas ágeis
Fatiando releases com User Story Mapping
Projetando a interface: Task Flow + Prototipação rápida
Perguntando a especialistas: As 10 heurísticas de Nielsen
10pts
20pts
20pts
25pts
25pts
Engenharia de Usabilidade / Marcello Cardoso
Prototipaçãoquebrando ovos para fazer omeletes
pesquisa
planejam
ento
desenvolvim
ento
validação
Engenharia de Usabilidade / Marcello Cardoso
Ciclo de vida do produto
Benchm
arking Story
mapping
Etnografia digital PersonasPrototipação
Engenharia de Usabilidade / Marcello Cardoso
Onde aplicar?
Backlog do produto
Backlog do sprint
Reunião diária
Produto
potencialmente
“entregável”
durante iterações
Engenharia de Usabilidade / Marcello Cardoso
Protótipo = modelo~
Engenharia de Usabilidade / Marcello Cardoso
São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a
comunicação de informações.
lembrando...
Engenharia de Usabilidade / Marcello Cardoso
Podem ser de baixa ou alta resoluçãoBaixa: Para explorar ideias, conceitos, fluxos
Alta: para validar decisões pontuais
Engenharia de Usabilidade / Marcello Cardoso
“Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.”
-Dan Saffer
Engenharia de Usabilidade / Marcello Cardoso
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
Engenharia de Usabilidade / Marcello Cardoso
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”
Engenharia de Usabilidade / Marcello Cardoso
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.
Engenharia de Usabilidade / Marcello Cardoso
EM GRUPO!Criar um cenário (primeiro uso ou
tarefa chave) e aplicá-lo em sua
Persona Focal.
ANOTAR PARA MANDAR POR EMAIL.
tempo: 15’
TO DO DONE
Engenharia de Usabilidade / Marcello Cardoso
Task flows• Fluxos são tão importantes quanto telas
• Quanto mais “cascata”, mais robusto e formal o task flow
diagrama de fluxo
Engenharia de Usabilidade / Marcello Cardoso
Task flowsdiagrama de fluxo
Engenharia de Usabilidade / Marcello Cardoso
Engenharia de Usabilidade / Marcello CardosoFFFFFFFFFFFFFFFFFFFFFFFFUUUUUUUUUUUUUU
Engenharia de Usabilidade / Marcello Cardoso
Fluxos são interações de um indivíduo, elementos / escolhas
Task flowsdiagrama de fluxo
Engenharia de Usabilidade / Marcello Cardoso
Exemplo: Adicionando um item na TO-DO do Basecamp.
Task flowsdiagrama de fluxo
Engenharia de Usabilidade / Marcello Cardoso
• É rápido de fazer e simples de enxergar.
• Ideal para sprints!
Task flowsdiagrama de fluxo
Engenharia de Usabilidade / Marcello Cardoso
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
Engenharia de Usabilidade / Marcello Cardoso
EM GRUPO!
definir fluxo da tarefa
principal
(e mais, se der tempo)
considerando os casos de
uso.
ANOTAR PARA MANDAR
POR EMAIL.
tempo: 15’
TO DO DONE
Engenharia de Usabilidade / Marcello Cardoso
Rascunhos
Rascunhos• Ideias primárias, generalistas, fluxos.
• São feios! estimulam a discussão sobre função e uso
Engenharia de Usabilidade / Marcello Cardoso
Storyboards
Engenharia de Usabilidade / Marcello Cardoso
Engenharia de Usabilidade / Marcello Cardoso
StoryboardsTécnica da publicidade, HQs e cinema, que ilustra
interações complexas
Engenharia de Usabilidade / Marcello Cardoso
Storyboards• Imagens + legendas
• Ilustram fluxos, momentos chave
• Casos de uso
• Mostram ambientes e contextos
• Complementam wireframes
Engenharia de Usabilidade / Marcello Cardoso
Wireframes
Engenharia de Usabilidade / Marcello Cardoso
Wireframesprotótipos estruturais do sistema
Engenharia de Usabilidade / Marcello Cardoso
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
Engenharia de Usabilidade / Marcello Cardoso
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
Engenharia de Usabilidade / Marcello Cardoso
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
Engenharia de Usabilidade / Marcello Cardoso
Wireframes•Estrutura• Arquitetura da informação
• Controles (padrões de interação)• Conteúdo
Substituem documentos mais burocráticos, são especificações visuais comprometidas com:
Engenharia de Usabilidade / Marcello Cardoso
Engenharia de Usabilidade / Marcello Cardoso
Engenharia de Usabilidade / Marcello Cardoso
Engenharia de Usabilidade / Marcello Cardoso
Engenharia de Usabilidade / Marcello Cardoso
Engenharia de Usabilidade / Marcello Cardoso
papel=desapego
Engenharia de Usabilidade / Marcello Cardoso
Engenharia de Usabilidade / Marcello Cardoso
Engenharia de Usabilidade / Marcello Cardoso
Engenharia de Usabilidade / Marcello Cardoso
http://www.youtube.com/watch?v=k9mTvt0LXgk
Prototipando e testando lo fi
Engenharia de Usabilidade / Marcello Cardoso
wireouts
Engenharia de Usabilidade / Marcello Cardoso
layouts
Engenharia de Usabilidade / Marcello Cardoso
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
Engenharia de Usabilidade / Marcello Cardoso
Este arquivo contém a apresentação realizada por Marcello de Campos
Cardoso, em Agosto de 2012, para a disciplina Engenharia de Usabilidade
ministrada no curso de especialização Engenharia de Software Centrada em
Métodos Ágeis, no Centro Universitário UNA.
obrigado!