una - eng usa '12 - aula 04

Engenharia de Usabilidade / Marcello Cardoso

Engenharia de UsabilidadeMarcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.com

Engenharia de Software Centrada Em Métodos Ágeis

Prototipaçãoquebrando ovos para fazer omeletes

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ª

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

Prototipaçãoquebrando ovos para fazer omeletes

pesquisa

planejam

desenvolvim

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

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

02.aula extensometria eng ricardo homero

unp eng. software - aula 5

ita / eng ita / eng - robopac usa · ita / eng ita / eng...

az1050/17 eng usa

aula 3 desenho técnico - eng. mecânica e produção...

aula 4.1 projeto eng. ferroviaria

eng alim bioq carne aula 6b

acionamentos elétricos eng. aparecido juneo aula:01 data:...

eng 2332 – construÇÃo civil i profº eng civil bruno...

aula eng ambmatlab2

aula 3 e 4 eng econ - eng econ

aula 3 - eng reserv i

aula 1 parte2 mod 1 introducao eng seg 2014 2

unp eng. software - aula 3

unp eng. software - aula 2

aula viii – corte · aula viii – corte prof. eng. diogo...

eng 008 - aula 03 - estática dos fluidos.pdf

manutenção - aula 8 e 9 - eng. manutenção - fmea

una - eng usa '12 - aula 05

aula 1 - tipos de materiais - eng. civil