Newton Paiva - DI - Aula 04

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

http://www.mcardoso.com.br

http://www.mcardoso.com.br

mailto:[email protected]

mailto:[email protected]


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



recapitulando...



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



1o passo: Determinar tipos de usuários

2o passo: Listar características de cada tipo

3o passo: Determinar usuários focais

Personas ágeis



Ciclo de vida do produto

pesquisa

planejam

ento

desenvolvimento

validação



Ciclo de vida do produto

personas

pesquisa

planejam

ento

desenvolvimento

validação

Questionários e entrevistas

Benchm

arking

prototipação



Prototipaçãoquebrando ovos para fazer omeletes



Protótipo = modelo~



São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a

comunicação de informações.

lembrando...



Podem ser de baixa ou alta resolução

Baixa: Para explorar ideias, conceitos, fluxos

Alta: para validar decisões pontuais



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

-Dan Saffer



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



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”



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.



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’



Task flows

• Fluxos são tão importantes quanto telas

• Quanto mais “cascata”, mais robusto e formal o task flow

diagrama de fluxo



Task flowsdiagrama de fluxo


Design, usabilidade e arquitetura de informação / Marcello CardosoFFFFFFFFFFFFFFFFFFFFFFFFUUUUUUUUUUUUUUFriday, October 28, 2011


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




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




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

• Ideal para sprints!




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




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’



Rascunhos



Rascunhos• Ideias primárias, generalistas, fluxos.

• São feios! estimulam a discussão sobre função e uso


Storyboards



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

interações complexas



Storyboards

• Imagens + legendas

• Ilustram fluxos, momentos chave

• Casos de uso

• Mostram ambientes e contextos

• Complementam wireframes




WireframesFriday, October 28, 2011


Wireframesprotótipos estruturais do sistema



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)






Podem ser usados para validar ideias





Podem ser usados para validar ideiasPodem ser usados para testes com usuários



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:


papel=desapego




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

Prototipando e testando lo fi





wireouts



layouts



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



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!


Newton Paiva - DI - Aula 04

Design

Transcript of Newton Paiva - DI - Aula 04