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

http://edgarddavidson.com/?p=365

http://edgarddavidson.com/?p=365

http://www.mcardoso.com.br

http://www.mcardoso.com.br

mailto:[email protected]

mailto:[email protected]


recapitulando...


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.


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


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


Prototipaçãoquebrando ovos para fazer omeletes

pesquisa

planejam

ento

desenvolvim

ento

validação


Ciclo de vida do produto

Benchm

arking Story

mapping

Etnografia digital PersonasPrototipação


Onde aplicar?

Backlog do produto

Backlog do sprint

Reunião diária

Produto

potencialmente

“entregável”

durante iterações


Protótipo = modelo~


São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a

comunicação de informações.

lembrando...


Podem ser de baixa ou alta resoluçãoBaixa: Para explorar ideias, conceitos, fluxos

Alta: para validar decisões pontuais


“Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.”

-Dan Saffer


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


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”


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.


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


Task flows• Fluxos são tão importantes quanto telas

• Quanto mais “cascata”, mais robusto e formal o task flow

diagrama de fluxo


Task flowsdiagrama de fluxo

Engenharia de Usabilidade / Marcello CardosoFFFFFFFFFFFFFFFFFFFFFFFFUUUUUUUUUUUUUU


Fluxos são interações de um indivíduo, elementos / escolhas



Exemplo: Adicionando um item na TO-DO do Basecamp.



• É rápido de fazer e simples de enxergar.

• Ideal para sprints!



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



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


Rascunhos

Rascunhos• Ideias primárias, generalistas, fluxos.

• São feios! estimulam a discussão sobre função e uso


Storyboards



StoryboardsTécnica da publicidade, HQs e cinema, que ilustra

interações complexas


Storyboards• Imagens + legendas

• Ilustram fluxos, momentos chave

• Casos de uso

• Mostram ambientes e contextos

• Complementam wireframes


Wireframes


Wireframesprotótipos estruturais do sistema


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)





Podem ser usados para validar ideias




Podem ser usados para validar ideiasPodem ser usados para testes com usuários


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:

papel=desapego



http://www.youtube.com/watch?v=k9mTvt0LXgk

Prototipando e testando lo fi




wireouts


layouts


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


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!

una - eng usa '12 - aula 04

Design