46
Análise e Design de Interação / Marcello Cardoso Projetando a interface Task Flow + Prototipação rápida Projeto e Arquitetura de Aplicações Internet Análise e Design de Interação Marcello de Campos Cardoso | www.mcardoso.com.br | [email protected] aula 05/08 Thursday, September 22, 2011

PAAI/DI - 05 - Prototipação

Embed Size (px)

DESCRIPTION

Apresentação realizada por Marcello de Campos Cardoso em Setembro de 2011 para a disciplina Análise e Design de Interação, ministrada no curso de especialização em Projeto e Arquitetura de Aplicações Internet na Faculdade COTEMIG.

Citation preview

Page 1: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Projetando a interfaceTask Flow + Prototipação rápida

Projeto e Arquitetura de Aplicações Internet

Análise e Design de InteraçãoMarcello de Campos Cardoso | www.mcardoso.com.br | [email protected]

aula 05/08

Thursday, September 22, 2011

Page 2: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Plano de cursoIntrodução a Usabilidade: conceitos, origem (DCU, IHC), aplicação (IxD), tipos de design, metas de usabilidade, princípios de design.

Conversando com usuários: Questionários e entrevistas

Técnica de Modelagem: Personas ágeis (workshop)

Separando releases: User Story Mapping

Projetando a interface: Task Flow + Prototipação rápida (workshop)

Perguntando a especialistas: Análise Heurística, As 10 heurísticas de Nielsen (workshop)

Testes de usabilidade (workshop - roteiro)

Testes de usabilidade (workshop - aplicação)

15pts

10pts

15pts

10pts

20pts

15pts

15pts

Thursday, September 22, 2011

Page 3: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Ciclo de vida do produto

pesquisa

planejam

ento

desenvolvim

ento

validação

Thursday, September 22, 2011

Page 4: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Ciclo de vida do produto

personas

pesquisa

planejam

ento

desenvolvim

ento

validação

Questionários e entrevistas

Benchm

arking

Story mappingprototipa

ção

Thursday, September 22, 2011

Page 5: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Prototipaçãoquebrando ovos para fazer omeletes

Thursday, September 22, 2011

Page 6: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Protótipo = modelo~

Thursday, September 22, 2011

Page 7: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

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

Thursday, September 22, 2011

Page 8: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

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

Alta: para validar decisões pontuais

Thursday, September 22, 2011

Page 9: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

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

-Dan Saffer

Thursday, September 22, 2011

Page 10: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / 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

Thursday, September 22, 2011

Page 11: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / 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”

Thursday, September 22, 2011

Page 12: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / 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.

Thursday, September 22, 2011

Page 13: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

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’

Thursday, September 22, 2011

Page 14: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / 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

Thursday, September 22, 2011

Page 15: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Task flowsdiagrama de fluxo

Thursday, September 22, 2011

Page 16: PAAI/DI - 05 - Prototipação

FFFFFFFFFFFFFFFFFFFFFFFFUUUUUUUUUUUUUU

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 17: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

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

Task flowsdiagrama de fluxo

Thursday, September 22, 2011

Page 18: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

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

Task flowsdiagrama de fluxo

Thursday, September 22, 2011

Page 19: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

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

• Ideal para sprints!

Task flowsdiagrama de fluxo

Thursday, September 22, 2011

Page 20: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / 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

Thursday, September 22, 2011

Page 21: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

sequência de uso

EM GRUPO!

definir fluxo da tarefa

principal

(e mais, se der tempo)

considerando os casos de

uso.

tempo: 15’

TO DO DONE

Thursday, September 22, 2011

Page 22: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Rascunhos

Thursday, September 22, 2011

Page 23: PAAI/DI - 05 - Prototipação

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

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 24: PAAI/DI - 05 - Prototipação

Storyboards

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 25: PAAI/DI - 05 - Prototipação

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

interações complexas

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 26: PAAI/DI - 05 - Prototipação

Storyboards• Imagens + legendas

• Ilustram fluxos, momentos chave

• Casos de uso

• Mostram ambientes e contextos

• Complementam wireframes

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 27: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Wireframes

Thursday, September 22, 2011

Page 28: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Wireframesprotótipos estruturais do sistema

Thursday, September 22, 2011

Page 29: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / 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

Thursday, September 22, 2011

Page 30: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / 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

Thursday, September 22, 2011

Page 31: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / 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

Thursday, September 22, 2011

Page 32: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / 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:

Thursday, September 22, 2011

Page 33: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 34: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 35: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 36: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 37: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 38: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 39: PAAI/DI - 05 - Prototipação

papel=desapego

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 40: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 41: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Thursday, September 22, 2011

Page 42: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

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

Prototipando e testando lo fi

Thursday, September 22, 2011

Page 43: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Exemplos: software (fireworks)

wireouts

Thursday, September 22, 2011

Page 44: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Exemplos: software (fireworks)

layouts

Thursday, September 22, 2011

Page 45: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / 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

Thursday, September 22, 2011

Page 46: PAAI/DI - 05 - Prototipação

Análise e Design de Interação / Marcello Cardoso

Este arquivo contém a apresentação realizada por Marcello de

Campos Cardoso, em Setembro de 2011, para a disciplina Análise

e Design de Interação, ministrada no curso de especialização em

Projeto e Arquitetura de Aplicações Internet na Faculdade

COTEMIG.

obrigado!

Thursday, September 22, 2011