Upload
marcello-cardoso
View
662
Download
0
Embed Size (px)
DESCRIPTION
Aula para a disciplina Produção e Ferramentas Colaborativas Pós-Graduação em Produção em Mídias Digitais Prof. Marcello de Campos Cardoso www.mcardoso.com.br 2o semestre de 2011
Citation preview
IEC - INSTITUTO DEEDUCAÇÃO CONTINUADA
aula 05/08
Projetando a interfacePrototipação rápida
Produção e Ferramentas ColaborativasPós-Graduação em Produção em Mídias DigitaisMarcello de Campos Cardoso | www.mcardoso.com.br | [email protected]
Monday, October 24, 2011
1ª
2ª
3ª
4ª
5ª
6ª
7ª
8ª
-
10pts
15pts
15pts
20pts
-
15pts
25pts
Plano de cursoApresentação do curso, aquecimento e posicionamento teórico
CMS + Social Media
Conversando com usuários: Questionários e entrevistas
Técnica de Modelagem: Personas ágeis
Projetando a interface: Prototipação rápida em papel
Criando seu blog no Wordpress
Implantação do blog
Apresentação final
Monday, October 24, 2011
recapitulando...
Monday, October 24, 2011
Personas ágeis
Técnica para a definição de modelos de usuários do sistema,
no intuito de melhorar a visibilidade, compreensão e comunicação sobre seu comportamento de uso.
Auxilia no levantamento de user stories.
Nome, Idade Papel
descrição, frase emblemática
Tarefas no sistema para necessidades
Necessidades no mundo real
Monday, October 24, 2011
1o passo: Determinar tipos de usuários
2o passo: Listar características de cada tipo
3o passo: Determinar usuários focais
Personas ágeis
Monday, October 24, 2011
Ciclo de vida do produto
personas
pesquisa
planejam
ento
desenvolvim
ento
validação
Questionários e entrevistasBen
chmarki
ng
Story mappingprototipa
ção
Monday, October 24, 2011
Prototipaçãoquebrando ovos para fazer omeletes
Monday, October 24, 2011
Protótipo = modelo~
Monday, October 24, 2011
São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a
comunicação de informações.
lembrando...
Modelos
Monday, October 24, 2011
Podem ser de baixa ou alta resolução
Baixa: Para explorar ideias, conceitos, fluxos
Alta: para validar decisões pontuais
Monday, October 24, 2011
“Devemos criar exatamente quanta documentação necessitamos para
executar bem um projeto, e não mais.”-Dan Saffer
Monday, October 24, 2011
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
Monday, October 24, 2011
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”
Monday, October 24, 2011
CenárioUma imagem vale mil palavras.Mas as palavras certas podem valer algumas boas imagens.
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.
Monday, October 24, 2011
TO DO DONE
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’
Monday, October 24, 2011
Rascunhos
Monday, October 24, 2011
Rascunhos• Ideias primárias, generalistas, fluxos.
• São feios! estimulam a discussão sobre função e uso
Monday, October 24, 2011
Storyboards
Monday, October 24, 2011
StoryboardsTécnica da publicidade, HQs e cinema, que ilustra
interações complexas
Monday, October 24, 2011
Storyboards• Imagens + legendas
• Ilustram fluxos, momentos chave
• Casos de uso
• Mostram ambientes e contextos
• Complementam wireframes
Monday, October 24, 2011
WireframesMonday, October 24, 2011
Wireframesprotótipos estruturais do sistema
Monday, October 24, 2011
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
Monday, October 24, 2011
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
Monday, October 24, 2011
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
Monday, October 24, 2011
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:
Monday, October 24, 2011
Monday, October 24, 2011
Monday, October 24, 2011
Monday, October 24, 2011
Monday, October 24, 2011
Monday, October 24, 2011
Monday, October 24, 2011
papel=desapegoMonday, October 24, 2011
Monday, October 24, 2011
Monday, October 24, 2011
http://www.youtube.com/watch?v=k9mTvt0LXgk
Prototipando e testando lo fi
Monday, October 24, 2011
wireouts
Monday, October 24, 2011
layouts
Monday, October 24, 2011
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
Monday, October 24, 2011
Este arquivo contém a apresentação realizada por Marcello de
Campos Cardoso, em Outubro de 2011, para a disciplina
Produção e Ferramentas Colaborativas, ministrada no curso de
especialização em Mídias Digitais Internet na PUC Minas.
obrigado!
Monday, October 24, 2011