paai/di - 05 - prototipação
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.TRANSCRIPT
![Page 1: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/1.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/2.jpg)
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)
1ª
2ª
3ª
4ª
5ª
6ª
7ª
8ª
15pts
10pts
15pts
10pts
20pts
15pts
15pts
Thursday, September 22, 2011
![Page 3: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/5.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/6.jpg)
Análise e Design de Interação / Marcello Cardoso
Protótipo = modelo~
Thursday, September 22, 2011
![Page 7: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/9.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/15.jpg)
Análise e Design de Interação / Marcello Cardoso
Task flowsdiagrama de fluxo
Thursday, September 22, 2011
![Page 16: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/16.jpg)
FFFFFFFFFFFFFFFFFFFFFFFFUUUUUUUUUUUUUU
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
![Page 17: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/17.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/18.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/19.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/20.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/21.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/22.jpg)
Análise e Design de Interação / Marcello Cardoso
Rascunhos
Thursday, September 22, 2011
![Page 23: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/23.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/24.jpg)
Storyboards
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
![Page 25: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/25.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/26.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/27.jpg)
Análise e Design de Interação / Marcello Cardoso
Wireframes
Thursday, September 22, 2011
![Page 28: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/28.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/29.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/30.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/31.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/32.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/33.jpg)
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
![Page 34: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/34.jpg)
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
![Page 35: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/35.jpg)
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
![Page 36: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/36.jpg)
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
![Page 37: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/37.jpg)
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
![Page 38: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/38.jpg)
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
![Page 39: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/39.jpg)
papel=desapego
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
![Page 40: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/40.jpg)
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
![Page 41: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/41.jpg)
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
![Page 42: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/42.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/43.jpg)
Análise e Design de Interação / Marcello Cardoso
Exemplos: software (fireworks)
wireouts
Thursday, September 22, 2011
![Page 44: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/44.jpg)
Análise e Design de Interação / Marcello Cardoso
Exemplos: software (fireworks)
layouts
Thursday, September 22, 2011
![Page 45: PAAI/DI - 05 - Prototipação](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/45.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022051515/5591ac4a1a28ab566b8b4770/html5/thumbnails/46.jpg)
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