usabilidade 6 - prototipação

UsabilidadeEngenharia de Software Centrada em Métodos Ágeis

Marcello de Campos Cardoso | www.mcardoso.com.br | [email protected]

aula

6

Friday, June 17, 2011

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...

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


http://www.useit.com/papers/heuristic/

http://www.useit.com/papers/heuristic/

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


Análise heurística

Backlog do produto

Backlog do sprint

Reunião diária

Onde aplicar?

pode ser aplicadaem protótipos ou

releases


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


Como fazer?


sequência de uso

Exemplo de planilha de aplicação


sequência de uso

Exemplo de aplicação

H9H5

H7

H2


sequência de uso

Exemplo de aplicação


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


10 Heurísticas de Jakob Nielsen


sequência de uso

Prototipaçãoquebrando ovos para fazer omeletes


sequência de uso

Protótipo = modelo


ModelosSão ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a comunicação de informações.


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”


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.


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’


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


sequência de uso

Task flowsdiagrama de fluxo


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



sequência de uso

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



sequência de uso

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

• Ideal para sprints!



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



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


sequência de uso

Rascunhos• Ideias primárias, generalistas, fluxos.• São feios! estimulam a discussão sobre função e uso


RascunhosRascunhos


sequência de uso

EM GRUPO!

Exercício relâmpago!

Fazer rascunhos que co

nteplem o

cenário.

tempo: 5’

TO DO DONE


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


StoryboardsStoryboards


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


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


papel=desapegoFriday, June 17, 2011

http://www.youtube.com/watch?v=k9mTvt0LXgkPrototipando e testando lo fi


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

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

Exemplos: software (fireworks)

Wireouts


Exemplos: software (Fireworks)

Layouts


sequência de uso

testando protótiposteste em qualquer iteração.


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


sequência de uso

• Validar demandas



• 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


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?




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


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


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


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


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 junho de 2011, 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!


usabilidade 6 - prototipação

Design