newton paiva - di - aula 04
DESCRIPTION
Apresentação realizada por Marcello de Campos Cardoso em Novembro de 2011 para a disciplina Design, usabilidade e arquitetura de informação, ministrada no curso de especialização em Pós Graduação em Marketing Digital no Centro Universitário Newton Paiva.TRANSCRIPT
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Projetando a interfaceTask Flow + Prototipação rápida
Pós Graduação em Marketing Digital
Design, usabilidade e arquitetura de informaçãoMarcello de Campos Cardoso | www.mcardoso.com.br | [email protected]
aula 04/06
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Plano de curso1ª
2ª
3ª
4ª
5ª
6ª
20pts
20pts
20pts
20pts
20pts
Introduçã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)
Projetando a interface: Task Flow + Prototipação rápida (workshop)
Perguntando a especialistas: As 10 heurísticas de Nielsen (workshop)
Percurso cognitivo: Avaliando tarefas
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
recapitulando...
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
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
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
1o passo: Determinar tipos de usuários
2o passo: Listar características de cada tipo
3o passo: Determinar usuários focais
Personas ágeis
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Ciclo de vida do produto
pesquisa
planejam
ento
desenvolvimento
validação
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Ciclo de vida do produto
personas
pesquisa
planejam
ento
desenvolvimento
validação
Questionários e entrevistas
Benchm
arking
prototipação
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Prototipaçãoquebrando ovos para fazer omeletes
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Protótipo = modelo~
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a
comunicação de informações.
lembrando...
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Podem ser de baixa ou alta resolução
Baixa: Para explorar ideias, conceitos, fluxos
Alta: para validar decisões pontuais
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
“Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.”
-Dan Saffer
Friday, October 28, 2011
Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
Design, usabilidade e arquitetura de informaçã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”
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
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.
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
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’
Friday, October 28, 2011
Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Task flowsdiagrama de fluxo
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello CardosoFFFFFFFFFFFFFFFFFFFFFFFFUUUUUUUUUUUUUUFriday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Fluxos são interações de um indivíduo, elementos / escolhas
Task flowsdiagrama de fluxo
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Exemplo: Adicionando um item na TO-DO do Basecamp.
Task flowsdiagrama de fluxo
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
• É rápido de fazer e simples de enxergar.
• Ideal para sprints!
Task flowsdiagrama de fluxo
Friday, October 28, 2011
Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
TO DO DONE
EM GRUPO!
definir fluxo
da tarefa
principal
(e mais, se der t
empo)
considerando
os casos de
uso.
ANOTAR PAR
A MANDAR P
OR EMAIL.
tempo: 15’
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Rascunhos
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Rascunhos• Ideias primárias, generalistas, fluxos.
• São feios! estimulam a discussão sobre função e uso
Friday, October 28, 2011
Storyboards
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
StoryboardsTécnica da publicidade, HQs e cinema, que ilustra
interações complexas
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
Storyboards
• Imagens + legendas
• Ilustram fluxos, momentos chave
• Casos de uso
• Mostram ambientes e contextos
• Complementam wireframes
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
WireframesFriday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Wireframesprotótipos estruturais do sistema
Friday, October 28, 2011
Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
Design, usabilidade e arquitetura de informaçã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:
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
papel=desapego
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
http://www.youtube.com/watch?v=k9mTvt0LXgk
Prototipando e testando lo fi
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
wireouts
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
layouts
Friday, October 28, 2011
Design, usabilidade e arquitetura de informaçã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
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso
Este arquivo contém a apresentação realizada por Marcello de Campos Cardoso, em Setembro de 2011, para a disciplina Design, usabilidade e arquitetura de informação, ministrada no curso de Pós Graduação em Marketing Digital no Centro Universitário Newton Paiva.
obrigado!
Friday, October 28, 2011