Post on 30-Jun-2015
description
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 | mcardoso@gmail.com
aula 05/08
Thursday, September 22, 2011
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
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
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
Análise e Design de Interação / Marcello Cardoso
Prototipaçãoquebrando ovos para fazer omeletes
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso
Protótipo = modelo~
Thursday, September 22, 2011
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
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
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
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
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
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
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
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
Análise e Design de Interação / Marcello Cardoso
Task flowsdiagrama de fluxo
Thursday, September 22, 2011
FFFFFFFFFFFFFFFFFFFFFFFFUUUUUUUUUUUUUU
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
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
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
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
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
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
Análise e Design de Interação / Marcello Cardoso
Rascunhos
Thursday, September 22, 2011
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
Storyboards
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
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
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
Análise e Design de Interação / Marcello Cardoso
Wireframes
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso
Wireframesprotótipos estruturais do sistema
Thursday, September 22, 2011
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
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
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
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
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
papel=desapego
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso
Thursday, September 22, 2011
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
Análise e Design de Interação / Marcello Cardoso
Exemplos: software (fireworks)
wireouts
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso
Exemplos: software (fireworks)
layouts
Thursday, September 22, 2011
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
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