Workshop((
Arquitetura)de)Informação)
com(Vinícius(Krause(
08(e(09(Fev’14(na(Movile(Campinas
Introdução(a(

Arquitetura(de(Informação
Vinícius,(quem(?
Arquiteto(de(Informação(na(Gazeta(do(Povo,(jornalista(
formado(na(PUCMPR.(Mais(de(5(anos(na(labuta.((

!
...
Agenda
Sábado

Domingo
Brainstorm

Organização

Sketch

Rotulação

Ideação

Introdução

Princípios(Gerais

Design(Framewor...
UX(

UI(
UX(
User(eXperience

UI(
User(Interface
UX(

UI(
O(aumento(do(
conhecimento(é(
acompanhado(do(aumento(
da(ignorância.)
Jean)Fourastié
Arquitetura((

Informação((

Do(grego:(Archétékton(
Do(latim:(informationis((
((αρχιτεκτονική()(
Delinear,(conceber(idéia....
É(uma(disciplina)cuja(
finalidade)é:(
!
O)design)(projeto,(não(“desenho”)((
estrutural((não(visual)((
de)ambientes)(ou(sis...
A(informação(só(é(útil(se(está(
no(lugar)certo)e(na(hora)certa.
Arquitetura)de)Informação)é(definir(o(
lugar(e(o(momento(certo(de(exibir(uma(
informação.
Para(isso(são(
necessários(Critérios.)
!

Do(Grego(KRITERION,(“regra(para(
distinguir(o(verdadeiro(do(falso”,(de(
KRINEIN,...
Morvile)e)Rosenfeld))
Urso(Polar(–(Aplicações(da(AI(na(
Internet

Aristóteles)
Categorias))do(ser
380O320)A.C.

Steve)Krug...
M(Vídeo(
M(Noticioso(
M(Aúdio(
M(Burocrático(
M(Texto(
M(Oficial(
M(Gráficos(
M(Entretenimento(
M(Animações(
M(Técnico(
M(...
Objetivos)do)negócio

Benefício)oferecido)
(Conteúdo,(serviço,(
funcionalidade)(
MNecessidades)do)Usuário
Mas(tudo(isso(é(função(do(
Arquiteto(de(Informação(?
http://www.kickerstudio.com
Na(prática,(a(
arquitetura(de(
informação(é(definir:

•Organização))
•Rotulação)
•Navegação)
•Busca)(!?)
Organizar(
!
Organizare)–))
(lat)med)Orgão))))
dar(forma,(modelar(
((
Orgão)–))
(lat)organum,)greg)órganon))
Parte(de(um(c...
Organizar(:(
Identificar(partes(que(desempenham(diferentes(funções(em(
um(todo(unificado.
Em(outras(palavras:((Classificar...
Classificar
Agrupar(indivíduos(com(base(em(
características(comuns,(criar(classes.(
Sistemas(Exatos(

Sistemas(ambíguos(
O)Lançamentos)
O)Drama))
O)Comédia)
O)Guerra)
O)Romance)
MLançamentos)
MBrasileiros)
...
Priorizar
Social))
O(que(um(grupo(de(pessoas(julga(relevante(
Lógico)
O(que(a(lógica(dos(sistemas(julga(relevante.
Empírico))
O(que(a(experiência(julga(relevante(.
Referencial))
O(que(as(autoridades(no(assunto(julgam(relevante(
Síntese)pessoal
Rotulação

?

?
Rotulação

Château)Pétrus))
Pomerol,(Bordeaux,(França.(
Safra(de(1899(
5.203,00€

Do)Avô)
Campo(Largo,(Paraná,(Brasil.(
Sa...
VACA
Rótulos)textuais)

Rótulos)Visuais)

Intuitividade((

Economia(de(espaço((

Facilidade(de(Aprendizagem((

Eficiência(...
Poética(M(Impressão
Retórica((apelativa,(conativa)(–(Decisão(
Dialética(–(Busca(de(premissas,(prova.
Lógica(–(Verdade((apostas(em(premissas(controladas)
Nominativa((referencial,(denotativa)(–(Descrição(objetiva
Metalinguística((M(Informações((sobre(a(informação

Fática(–(Retorno((feedback)
Estilo(e(Linguagem(do(usuário.(((
(Cuidado(a(gramática,(nomenclatura(técnica(e(siglas.)
Consulte/Crie(Padrões(Consolidados.

Repetições(em(10(exemplos
Sinônimos(ou(termos(
relacionados

10

Esportes

9
Economia...
Em(caso(específicos(a(Folksonomia(pode(ajudar.
Navegação
Navegar(é(alcançar(um(destino(
(objetivo,(informação)(
(que(está(fora(do

alcance((fisico(ou(cognitivo)(do(
pont...
Para(navegar(são(necessários:
!
•Uma(posição(atual.(

!

•Um(ponto(de(Partida.(

!

•Um(ponto(de(chegada.(

!

•Pontos(de(...
Em(outras(palavras
Pra)onde)vou?

Pra)onde)posso)ir?
Super)Vegetariano

De)onde)vim?
Onde)Estou?
Quais)são)meus)
recursos)
Interesses(de(navegação

Exploratório(

Impulsivo((ou(inércia)(

Direto(

Um(ou(vários(objetivos(
préMdefinidos(com(
abert...
Navegação)embutida)para)
intenção)exploratória)

Distribuição)de)conteúdo)para)
navegação)por)impulso.

Navegação)remota)e...
Hierarquia(Visual(
!
Consistência
Padrões
Feedback(
!
Intuitividade(X(Eficiência
Continuidade)
No(interface
Separe(visualmente(diferentes(critérios(de(
organização(e(Classificação
Completude
Usabilidade))
Usabilidade(é(a(medida(na(qual(um(produto(pode(ser(usado(por(usuários(
específicos(para(alcançar(objetivos(e...
UX)não)é)UI!)
Ou;)experiência)do)usuário)não)é)layout)bonitinho.
?
Mas*primeiro:

•Avaliar*os*riscos*
•Avaliar*os*benefícios*
•Avaliar*os*custos
Entender(o(Cliente

Entender(o(Usuário
Entender*o*Cliente*
!
Stakeholders*são*quaisquer*
envolvidos,*da*parte*do*cliente,*em*
um*projeto.*Podem*ser*os*que*
tomam...
Entrevista*com*
Stakeholders
É*uma*entrevista*com*todos*os*envolvidos*no*
processo*de*publicação*de*conteúdo*para*
mapeame...
Pesquisas,*documentos*
internos,pesquisas*já*
realizadas.
É*uma*análise*especializada*de*pesquisas*
quantitativas*existent...
Análise**de*Tráfego
É*uma*análise*especializada*dos*dados*de*tráfego*no*
atual*site*a*ser*redesenhado.*

!

O*objeto*de*es...
Análise*Heurística
É*uma*análise*especializada*do*site*atual*a*ser*
redesenhado*feita*a*partir*de*boas*práticas*
(heurísti...
Inventário*de*Conteúdo
Lista detalhada de tudo o que deverá compor o site / sistema em ordem de importância e

diferenças ...
Exercício*1:*
Começando*um*projeto*
!
1(–(Revise(o(Briefing(que(foi(passado(e(comente(sobre(o(que(você(entendeu(
e(o(que(v...
Exercício*2:*
Qual*é*a*oportunidade*de*negócio?*
!
1(H(Revise(as(entrevistas(com(Stakeholders(e(responda:(

!

;*Qual*é*o*...
Esclareça*os*objetivos,*compartilhe*e*busque*
consenso*entre*stakeholders*antes*de*seguir*
adiante.*
Exercício*3:*
Expectativas*sobre*o*usuário*
!
1*–*Utilize*o*conhecimento*que*você*tem*até*agora*para*criar*hipóteses*sobre...
Agora(Vamos(olhar(mais(de(cima
Nenhum*produto*funciona*isoladamente.**
!
;*Todos*os*envolvidos*no*projeto*devem*ter*uma*
compreensão*similar*das*informaç...
É*por*estas*e*outras*que*vamos*fazer*um*
ecossistema*de*produto.*
!
;*Mapear**pessoas,*relações,**notícias,*tendências,*
t...
Benchmarking
Identificar*as*referências*do*mercado*em*
determinadas*áreas*e*as*melhores*práticas*
aplicadas*nos*produtos.*...
E*muito*mais...
Estatísticas,*análises*de*mercado,*análises*setoriais,*relatórios*de*empresas*especializadas,*
entrevista*...
Exercício*4:**Ecossistema
Conversem(sobre(cada(um(dos(assuntos(neste(diagrama(e(escrevam(uma(folha(com(as(
premissas(encon...
Entender(o(Negócio

Entender(o(Usuário
Mas*pra*quê*
pesquisar*com*
usuários*?

• Entender*os*desejos,*necessidades*e*
experiências*das*pessoas*para*gerar*
valor*...
Quem*é*meu*
usuário*?

•Quem*usa*seu*produto*ou*serviço*ou*poderá*
usar*no*futuro*(não*quem*o*administra).*

!

•Não*neces...
E*quais*métodos*eu*devo*utilizar?
Pesquisas*Quantitativas
Excelentes*para*identificar*o*que*está*acontecendo*
no*momento,*enquanto*as*qualitativas*servem*pa...
Entrevistas*em*Contexto
!
Descobrir*o*que*as*pessoas*querem*e*precisam*a*
partir*do*contexto*real*do*seu*cotidiano.**

!

...
Focus*Group
É*uma*técnica*de*pesquisa*qualitativa*que*visa*
captar*insights*de*usuários*reais*acerca*do*produto*
a*ser*red...
Etnografia*Virtual
A*Etnografia(é*por*excelência*o*método*
utilizado*pela*antropologia
*
*
na*coleta*de*dados.*
São*analis...
Card*Sorting
Card*Sorting*é*uma*técnica*de*classificação*e*
organização*de*conteúdo*de*acordo*com*o*modelo*
cognitivo*de*u...
Testes de
Usabilidade
É*uma*observação*de*usuários*reais*
realizando*tarefas*no*site*orientados*por*um*
especialista,**enq...
Teste de
Usabilidade

/Ágil

Plano(de(testes


Recrutamento(

Aplicação

Análise

Relatório




(**)

1°Dia

2°Dia

3°Dia
...
Exercício*5*–*Entrevistas*
1*–*Defina*os*objetivos*da*sua*entrevista.*Pense*sobre*o*que*você*
precisa*saber*e*como*poderia...
Exercício*6*–*Colocando*ordem*no*barraco*
1*–*Em*grupo*discutam:**
;*Quais*necessidades*eles*tem*a*ser*supridas*?*
;*O*que...
Interpretando(as(Pesquisas
O*que*acontece*se*não*houver*um*tempo*para*
sintetizar*e*interpretar*as*pesquisas*?
;O*design*do*projeto*pode*seguir*cegam...
Persona(
É*uma*ferramenta*para*sintetizar*informações*de*pesquisa.*
; Cria*empatia*com*o*serviço*ou*produto*e*dá*foco*as*d...
Dicas*para*criar*uma*Persona(
; Projete*para*personas*primárias*e*acomode*as*secundárias*
; Não*crie*muitas.*Pelo*menos*du...
Uma*persona*deve*conter:
Objetivos(((
Práticos*;*O*que*quer,*porque*quer.*

!

Experimentais*;*Como*quer*se*sentir.**

Dad...
Exercício*7*–*Criando*Personas*
1*–*Identifique*padrões*repetitivos*nas*anotações*da*pesquisa,*quais*os*
tipos*de*comporta...
E*agora?*Já*dá*pra*sair*desenhando?
Calma*lá.*

!

Confira*os*riscos*de*fazer**uma*
pesquisa*e*sair*projetando*direto*
com...
Cenários
Pense*no*contexto*;*como*as*suas*
personas*se*comportariam*em*
uma*situação*real*.*

!

Criar*uma*história*,*ajud...
Dicas*para*bons*Cenários
; Evite*listas*de*requisitos*e*funcionalidades.*

!

; Não*se*concentre*em*detalhes.*O*
important...
Um*cenário*deve*conter:
Uma(persona.((
Incluindo*principalmente*seus*objetivos*

!

Um(ambiente((
(físico*e*social)*

!

U...
Exercício*8:*Identificando*as*interações.*
1*–*Olhe*para*as*personas*e*pense*na*maior*quantidade*possível*de*
situações*em...
Exercício*9:*Criando*Cenários.*
1*–*Agora*junte*tudo*e*descreva*cada*cena.**

!

2**–Descreva*os*elementos*que*compõe*as*
...
?
Introdução*à**

Pesquisa(
m*pouco*de*história*e*princípios*teóricos
"É*um*erro*grave*teorizar*antes*de*ter*dados"*;*Arthur...
Mas*primeiro:

•Avaliar*os*riscos*
•Avaliar*os*benefícios*
•Avaliar*os*custos
Entender(o(Cliente

Entender(o(Usuário
Entender*o*Cliente*
!
Stakeholders*são*quaisquer*
envolvidos,*da*parte*do*cliente,*em*
um*projeto.*Podem*ser*os*que*
tomam...
Entrevista*com*
Stakeholders
É*uma*entrevista*com*todos*os*envolvidos*no*
processo*de*publicação*de*conteúdo*para*
mapeame...
Pesquisas,*documentos*
internos,pesquisas*já*
realizadas.
É*uma*análise*especializada*de*pesquisas*
quantitativas*existent...
Análise**de*Tráfego
É*uma*análise*especializada*dos*dados*de*tráfego*no*
atual*site*a*ser*redesenhado.*

!

O*objeto*de*es...
Análise*Heurística
É*uma*análise*especializada*do*site*atual*a*ser*
redesenhado*feita*a*partir*de*boas*práticas*
(heurísti...
Inventário*de*Conteúdo
Lista detalhada de tudo o que deverá compor o site / sistema em ordem de importância e

diferenças ...
Exercício*1:*
Começando*um*projeto*
!
1(–(Revise(o(Briefing(que(foi(passado(e(comente(sobre(o(que(você(entendeu(
e(o(que(v...
Exercício*2:*
Qual*é*a*oportunidade*de*negócio?*
!
1(H(Revise(as(entrevistas(com(Stakeholders(e(responda:(

!

;*Qual*é*o*...
Esclareça*os*objetivos,*compartilhe*e*busque*
consenso*entre*stakeholders*antes*de*seguir*
adiante.*
Exercício*3:*
Expectativas*sobre*o*usuário*
!
1*–*Utilize*o*conhecimento*que*você*tem*até*agora*para*criar*hipóteses*sobre...
Agora(Vamos(olhar(mais(de(cima
Nenhum*produto*funciona*isoladamente.**
!
;*Todos*os*envolvidos*no*projeto*devem*ter*uma*
compreensão*similar*das*informaç...
É*por*estas*e*outras*que*vamos*fazer*um*
ecossistema*de*produto.*
!
;*Mapear**pessoas,*relações,**notícias,*tendências,*
t...
Benchmarking
Identificar*as*referências*do*mercado*em*
determinadas*áreas*e*as*melhores*práticas*
aplicadas*nos*produtos.*...
E*muito*mais...
Estatísticas,*análises*de*mercado,*análises*setoriais,*relatórios*de*empresas*especializadas,*
entrevista*...
Exercício*4:**Ecossistema
Conversem(sobre(cada(um(dos(assuntos(neste(diagrama(e(escrevam(uma(folha(com(as(
premissas(encon...
Entender(o(Negócio

Entender(o(Usuário
Mas*pra*quê*
pesquisar*com*
usuários*?

• Entender*os*desejos,*necessidades*e*
experiências*das*pessoas*para*gerar*
valor*...
Quem*é*meu*
usuário*?

•Quem*usa*seu*produto*ou*serviço*ou*poderá*
usar*no*futuro*(não*quem*o*administra).*

!

•Não*neces...
E*quais*métodos*eu*devo*utilizar?
Pesquisas*Quantitativas
Excelentes*para*identificar*o*que*está*acontecendo*
no*momento,*enquanto*as*qualitativas*servem*pa...
Entrevistas*em*Contexto
!
Descobrir*o*que*as*pessoas*querem*e*precisam*a*
partir*do*contexto*real*do*seu*cotidiano.**

!

...
Focus*Group
É*uma*técnica*de*pesquisa*qualitativa*que*visa*
captar*insights*de*usuários*reais*acerca*do*produto*
a*ser*red...
Etnografia*Virtual
A*Etnografia(é*por*excelência*o*método*
utilizado*pela*antropologia
*
*
na*coleta*de*dados.*
São*analis...
Card*Sorting
Card*Sorting*é*uma*técnica*de*classificação*e*
organização*de*conteúdo*de*acordo*com*o*modelo*
cognitivo*de*u...
Testes de
Usabilidade
É*uma*observação*de*usuários*reais*
realizando*tarefas*no*site*orientados*por*um*
especialista,**enq...
Teste de
Usabilidade

/Ágil

Plano(de(testes


Recrutamento(

Aplicação

Análise

Relatório




(**)

1°Dia

2°Dia

3°Dia
...
Exercício*5*–*Entrevistas*
1*–*Defina*os*objetivos*da*sua*entrevista.*Pense*sobre*o*que*você*
precisa*saber*e*como*poderia...
Exercício*6*–*Colocando*ordem*no*barraco*
1*–*Em*grupo*discutam:**
;*Quais*necessidades*eles*tem*a*ser*supridas*?*
;*O*que...
Interpretando(as(Pesquisas
O*que*acontece*se*não*houver*um*tempo*para*
sintetizar*e*interpretar*as*pesquisas*?
;O*design*do*projeto*pode*seguir*cegam...
Persona(
É*uma*ferramenta*para*sintetizar*informações*de*pesquisa.*
; Cria*empatia*com*o*serviço*ou*produto*e*dá*foco*as*d...
Dicas*para*criar*uma*Persona(
; Projete*para*personas*primárias*e*acomode*as*secundárias*
; Não*crie*muitas.*Pelo*menos*du...
Uma*persona*deve*conter:
Objetivos(((
Práticos*;*O*que*quer,*porque*quer.*

!

Experimentais*;*Como*quer*se*sentir.**

Dad...
Exercício*7*–*Criando*Personas*
1*–*Identifique*padrões*repetitivos*nas*anotações*da*pesquisa,*quais*os*
tipos*de*comporta...
E*agora?*Já*dá*pra*sair*desenhando?
Calma*lá.*

!

Confira*os*riscos*de*fazer**uma*
pesquisa*e*sair*projetando*direto*
com...
Cenários
Pense*no*contexto*;*como*as*suas*
personas*se*comportariam*em*
uma*situação*real*.*

!

Criar*uma*história*,*ajud...
Dicas*para*bons*Cenários
; Evite*listas*de*requisitos*e*funcionalidades.*

!

; Não*se*concentre*em*detalhes.*O*
important...
Um*cenário*deve*conter:
Uma(persona.((
Incluindo*principalmente*seus*objetivos*

!

Um(ambiente((
(físico*e*social)*

!

U...
Exercício*8:*Identificando*as*interações.*
1*–*Olhe*para*as*personas*e*pense*na*maior*quantidade*possível*de*
situações*em...
Exercício*9:*Criando*Cenários.*
1*–*Agora*junte*tudo*e*descreva*cada*cena.**

!

2**–Descreva*os*elementos*que*compõe*as*
...
?
Introdução*à**

Ideaçãopouco*de*história*e*princípios*
teóricos
"Tudo*na*vida,*mas*tudo*mesmo,*depende*de*uma*ideia*inteli...
Princípios*do*Design
São*conceitos*fortes,*fáceis*de*memorizar*que*
incorporam*tudo*aquilo*que*se*deseja*para*o*
novo*site...
Brainstorm

Não/Viaje//
Você*deve*pensar*fora*da*caixa,*mas*dentro*da*estratégia.*

!

Estabeleça/objetivos/claros/e/mante...
Exercício*10*:*Brainstorm
1/–/Escreva/ou/desenhe/sozinho/ideias/que/possam/tornar/alguns/
Exemplo:*
momentos/do/seu/cenári...
Exercício*11:*
Design*Framework
1/-/Identifique/cada/interação/com/o/produto/em/seu/cenários.*
=
Pegue*seu*cenário*e*marqu...
Sketching*
=*Variedade*rápida*de*idéias*
Exemplo:*
=*Exploração*de*Alternativas**
=*Melhores*Discussões*–*Visual*Thinking*...
Exercício*12:*
Rabiscar*idéias*=*Sketching
Desenhe/as/telas/pra/ilustrar/como/irá/funcionar/seu/produto./

!

=****Provave...
?
Planejando*uma*apresentação*de*design*
!
•Chamar*as*pessoas*certas*

!

•Regular*o*tempo*

!

•Preparar*o*terreno*–*deixe*...
Como*criticar*
!
= Comece*pelas*coisas*que*estão*
funcionando*bem.*

!

= Concentre=se*nos*objetivos*do*usuário.*

!

= Te...
Como*ganhar*um*debate*

E*como*perder:*

“Tá$muito$poluído,$muito$carregado”$
“Tá$meio$frio,$vago,$muito$básico,$muito$sim...
E*depois*?*
• Iteração,*agilidade*e*coração*aberto.*

!

• A*importância*dos*talentos*pessoais.*

!

• Modifique*seu*frame...
Exercício13:*
*Design*review*
1*=*É*a*hora*de*descer*a*lenha.*Cada*um*faz*suas*considerações*de*acordo*
com*o*que*acabamos...
?
Introdução*à**

Entregas)
"A*perfeição*é*feita*de*pequenos*detalhes*=*não*é*apenas*um*detalhe."*=
Um*pouco*de*história*e*p...
Lean*UX**
!
Documentação*evolutiva*(e*controle*de*versão),*iteratividade,*alta*
competência,*times*e**escopos*reduzidos.*
Especificação Funcional

É*um*documento*que*detalha*todo*o*comportamento*do*
site,*suas*funcionalidades*e*como*ele*respond...
Mapa do Site
É*uma*representação*visual*da*estrutura*do*site.*
Este*documento*indica*como*o*conteúdo*e*a*
organização*estã...
Fluxogramas
É*uma*representação*visual**das*etapas*que*o*
usuário*passa*para*realizar*as*tarefas*mais*
complexas*do*site.*...
Inventário de
Conteúdo
Lista*detalhada*de*tudo*o*que*deverá*compor*o*
site*/*sistema*em*ordem*de*importância*e*
diferenças...
Wireframes
É*um*documento*que*tem*a*função*de*estruturar*o*
conteúdo*e**as*funcionalidades*de*um*projeto.**

!

A*idéia*é*...
Quem*é*que*usa?
Arquitetos)de)Informação;)que*mostram*e*validam*uns*com*os*
outros*o*futuro*site,*além*de*usarem*na*forma*...
Sketch*(baixa*fidelidade)
Protótipo*(Alta*fidelidade)
Protótipo*Navegável*–*Puta*alta*fidelidade
Wireflow
Baixa*fidelidade X Alta*fidelidade

Vantagens)
=*Rapidez*
=*Custo*
=*Liberdade*para*o*designer*
=*Facilita*a*refação*

!

...
Dicas))
!
•Experimente*várias*ferramentas,*domine*uma.*

!
•Consulte*padrões*e*bibliotecas*e*faça*uma*biblioteca*pessoal*
...
?
Resumão*=*Teoria
Princípios)Gerais)

Organização)

Navegação)

Arquitetura)de)informação))
é*tentar*achar*o*lugar*e*o*
mom...
Resumão*=*Prática
Pesquisa)

!

Negócio)

!

Entrevista*com*Stakeholders*
Análise*Heurística*
Inventário*de*Conteúdo*
Benc...
Referências
•Information*Architecture*for*the*World*Wide*Web*(Urso*Polar)*–*Peter*Morville*,*Louis*Rosenfeld*
•Não*me*Faça...
Referências
•Design*emocional**
http://www.youtube.com/watch?v=RlQEoJaLQRA*
•UX*Myths:*
*http://uxmyths.com/*
•Video*Acess...
kr.vinicius@gmail.com
Arquitetura da Informação na Movile
Arquitetura da Informação na Movile
Arquitetura da Informação na Movile
Upcoming SlideShare
Loading in...5
×

Arquitetura da Informação na Movile

373

Published on

Arquitetura da Informação com Vinícius Krause na Movile Campinas, realizado nos dias 08 e 09 de Fevereiro de 2014.
Sobre o curso em http://www.faberludens.com.br/cursos/arquitetura-da-informacao-com-vinicius-krause/
Veja fotos em http://www.flickr.com/photos/faberludens/sets/72157640779235363/

Published in: Design

Arquitetura da Informação na Movile

  1. 1. Workshop(( Arquitetura)de)Informação) com(Vinícius(Krause( 08(e(09(Fev’14(na(Movile(Campinas
  2. 2. Introdução(a(
 Arquitetura(de(Informação
  3. 3. Vinícius,(quem(? Arquiteto(de(Informação(na(Gazeta(do(Povo,(jornalista( formado(na(PUCMPR.(Mais(de(5(anos(na(labuta.(( ! A(maior(parte(deste(tempo(trabalhei(na(Agência(Casa((JWT),( onde(coordenei(a(equipe(de(UX(e(desenvolvi(projetos(de( estratégia(de(conteúdo(e(experiência(do(usuário(em(portais,( aplicativos,(campanhas,(redes(sociais,(blogs(e(Intranets(pra( clientes(como(Infoglobo,(Tecnisa,(HSBC,(Ford,(Johnson(&( Johnson,(Coca(Cola,(Unimed,(o(Boticário,(Portobello,( Buscapé,(Bematech,(entre(outros.( ! Meus(principais(projetos(são(o(redesenho(do(site(do(Jornal( Extra(e(do(Globo,(e(agora(do(site(da(Gazeta(do(Povo(,((dos( quais(provavelmente(vou(falar(bastante.( ! Sou(casado,(fui(até(Ushuaia(de(Uno,(sou(marceneiro( formado(pelo(SENAI,(montanhista(vergonhosamente(amador( e(gostaria(de(morar(no(mato.( ! Filósofo(e(músico(todo(mundo(é.(Eu(também.
  4. 4. Agenda Sábado Domingo Brainstorm Organização Sketch Rotulação Ideação Introdução Princípios(Gerais Design(Framework Design(Reviews Negócio Documentação Pesquisa Usuários Interpretação Implementação Navegação Resumo Referências
  5. 5. UX( UI(
  6. 6. UX( User(eXperience UI( User(Interface
  7. 7. UX( UI(
  8. 8. O(aumento(do( conhecimento(é( acompanhado(do(aumento( da(ignorância.) Jean)Fourastié
  9. 9. Arquitetura(( Informação(( Do(grego:(Archétékton( Do(latim:(informationis(( ((αρχιτεκτονική()( Delinear,(conceber(idéia. Arché(–(αρχι(M(Primeiro,(ou(principal(( Tékton(–(τεκτονική(M(Construção(( ( Arquitetura)de)Informação):) Construção(da((ou(a(partir(da)(ideia(principal.
  10. 10. É(uma(disciplina)cuja( finalidade)é:( ! O)design)(projeto,(não(“desenho”)(( estrutural((não(visual)(( de)ambientes)(ou(sistemas)( de)informação)compartilhada.)
  11. 11. A(informação(só(é(útil(se(está( no(lugar)certo)e(na(hora)certa.
  12. 12. Arquitetura)de)Informação)é(definir(o( lugar(e(o(momento(certo(de(exibir(uma( informação.
  13. 13. Para(isso(são( necessários(Critérios.) ! Do(Grego(KRITERION,(“regra(para( distinguir(o(verdadeiro(do(falso”,(de( KRINEIN,(“separar”
  14. 14. Morvile)e)Rosenfeld)) Urso(Polar(–(Aplicações(da(AI(na( Internet Aristóteles) Categorias))do(ser 380O320)A.C. Steve)Krug)e)Profetas)menores)–( Agilidade(e(Contexto 1998 1986 1989 2000 1999 Jakob)Nielsen)) Tentativas(de(fórmulas( empíricas(universais. Donald)Norman)(( (Aplicações(em( contextos( empíricos(do( mundo(físico. Saul)Wurman)) Aplicações(no(Mundo(físico(e(preocupação( com(o(excesso(de(informação.
  15. 15. M(Vídeo( M(Noticioso( M(Aúdio( M(Burocrático( M(Texto( M(Oficial( M(Gráficos( M(Entretenimento( M(Animações( M(Técnico( M(Imagens( M(Institucional( M(Aplicativos( M(Informativo( M(Links( M(Comercial( M(Aberto(ou(Restrito( M(Operacional( MPago(ou(grátis( M(Artístico( M(Especializado(( M(Publicitário M(Generalizado( M(Gerado(Automaticamente( M(Gerado(Manualmente( M(Otimização(para(Busca( M(Citação(de(fontes( M(Linguagem(do(Usuário( M(Estilo( M(Frequência(de(atualização( ! O)Metas,)objetivos)) MEstratégia,)oportunidades)e) diferenciais)de)mercado) ! M(Hardware/Software( M(Restrições(Jurídicas( M(Viabilidade( M(Manutenção( M(Evolução( M(Capital(Humano( M(Metodologia(de(desenvolvimento( M(Idiossincrasias(do(cliente(( M(Idiossincrasias(e(know(how((da( equipe( M(Recursos(financeiros( M(Tecnologia(disponível( M(Tempo( MTipo(de(sistema((sistema(offMline,(M( Internet(intranet...)( M(Estratégia(de(Divulgação( MObjetivos)Práticos)()o)que)as)pessoas) querem)com)seu)serviço)) MInteresses))Subjetivos)(como)elas) gostariam)de)se)sentir)) ! MUsabilidade( M(Acessibilidade( M((Contexto(cultural( M(Contexto(político( M(Contexto(espacial/geográfico( M(Nível(econômico/social(( M(Condições(físicas((e(ergonomia( M(Motivações(Sazonais(( M(Condições(Psicológicas/cognitivas(( M(Disponibilidade(de(recursos(((banda((( larga,(versões(de(sistema(...)( MDispositivos(utilizados( M(Curva(de(aprendizagem( M(Referências(Estética( !
  16. 16. Objetivos)do)negócio Benefício)oferecido) (Conteúdo,(serviço,( funcionalidade)( MNecessidades)do)Usuário
  17. 17. Mas(tudo(isso(é(função(do( Arquiteto(de(Informação(?
  18. 18. http://www.kickerstudio.com
  19. 19. Na(prática,(a( arquitetura(de( informação(é(definir: •Organização)) •Rotulação) •Navegação) •Busca)(!?)
  20. 20. Organizar( ! Organizare)–)) (lat)med)Orgão)))) dar(forma,(modelar( (( Orgão)–)) (lat)organum,)greg)órganon)) Parte(de(um(corpo(unificado,( que(desempenha(uma( função.( (
  21. 21. Organizar(:( Identificar(partes(que(desempenham(diferentes(funções(em( um(todo(unificado. Em(outras(palavras:((Classificar)+)Priorizar
  22. 22. Classificar Agrupar(indivíduos(com(base(em( características(comuns,(criar(classes.(
  23. 23. Sistemas(Exatos( Sistemas(ambíguos( O)Lançamentos) O)Drama)) O)Comédia) O)Guerra) O)Romance) MLançamentos) MBrasileiros) M... •Alfabético( •Numérico( •Cronológico( •Sequencial( •Geográfico( •Quantidade( •... •Semelhanças,Diferenças( •Qualidades( •Função,(Tarefa( •Assuntos( •PúblicoMAlvo( •Metáforas( •Possibilidades( •Interesses(do(usuário( •...
  24. 24. Priorizar
  25. 25. Social)) O(que(um(grupo(de(pessoas(julga(relevante(
  26. 26. Lógico) O(que(a(lógica(dos(sistemas(julga(relevante.
  27. 27. Empírico)) O(que(a(experiência(julga(relevante(.
  28. 28. Referencial)) O(que(as(autoridades(no(assunto(julgam(relevante(
  29. 29. Síntese)pessoal
  30. 30. Rotulação ? ?
  31. 31. Rotulação Château)Pétrus)) Pomerol,(Bordeaux,(França.( Safra(de(1899( 5.203,00€ Do)Avô) Campo(Largo,(Paraná,(Brasil.( Safra(de(2013( R$(5,60
  32. 32. VACA Rótulos)textuais) Rótulos)Visuais) Intuitividade(( Economia(de(espaço(( Facilidade(de(Aprendizagem(( Eficiência(de(uso(( Implementação(Rápida Deixam(a(interface(mais(atrativa
  33. 33. Poética(M(Impressão
  34. 34. Retórica((apelativa,(conativa)(–(Decisão(
  35. 35. Dialética(–(Busca(de(premissas,(prova.
  36. 36. Lógica(–(Verdade((apostas(em(premissas(controladas)
  37. 37. Nominativa((referencial,(denotativa)(–(Descrição(objetiva
  38. 38. Metalinguística((M(Informações((sobre(a(informação Fática(–(Retorno((feedback)
  39. 39. Estilo(e(Linguagem(do(usuário.((( (Cuidado(a(gramática,(nomenclatura(técnica(e(siglas.)
  40. 40. Consulte/Crie(Padrões(Consolidados. Repetições(em(10(exemplos Sinônimos(ou(termos( relacionados 10 Esportes 9 Economia 7 Cultura 7 Opinião 7 Tecnologia 6 Política 6 6 Mundo Local) ((Filtro(Geográfico)
  41. 41. Em(caso(específicos(a(Folksonomia(pode(ajudar.
  42. 42. Navegação Navegar(é(alcançar(um(destino( (objetivo,(informação)( (que(está(fora(do
 alcance((fisico(ou(cognitivo)(do( ponto(de(partida.(
  43. 43. Para(navegar(são(necessários: ! •Uma(posição(atual.( ! •Um(ponto(de(Partida.( ! •Um(ponto(de(chegada.( ! •Pontos(de(referência.( (que(te(informem(qual(sua(posição(em(relação( ao(ponto(de(chegada(ou(de(partida).( ! •Ciência(dos(recursos(disponíveis.
  44. 44. Em(outras(palavras Pra)onde)vou? Pra)onde)posso)ir? Super)Vegetariano De)onde)vim? Onde)Estou? Quais)são)meus) recursos)
  45. 45. Interesses(de(navegação Exploratório( Impulsivo((ou(inércia)( Direto( Um(ou(vários(objetivos( préMdefinidos(com( abertura(a(novos( objetivos. Ausência(de(objetivos(préM definidos.( Objetivo(definido(sem( abertura(para(outros( objetivos.(
  46. 46. Navegação)embutida)para) intenção)exploratória) Distribuição)de)conteúdo)para) navegação)por)impulso. Navegação)remota)e)busca) para)intenção)direta
  47. 47. Hierarquia(Visual( !
  48. 48. Consistência
  49. 49. Padrões
  50. 50. Feedback( !
  51. 51. Intuitividade(X(Eficiência
  52. 52. Continuidade)
  53. 53. No(interface
  54. 54. Separe(visualmente(diferentes(critérios(de( organização(e(Classificação
  55. 55. Completude
  56. 56. Usabilidade)) Usabilidade(é(a(medida(na(qual(um(produto(pode(ser(usado(por(usuários( específicos(para(alcançar(objetivos(específicos(com(efetividade,(eficiência(e( satisfação(num(contexto(específico(de(uso.( Norma)ISO)94241O11 –(Eficácia:(É(a(capacidade(de(executar(tarefa(de(forma(correta.( –(Eficiência:(São(os(recursos(gastos(para(conseguir(ter(eficácia.( –(Satisfação:(O(conforto(a(reação(subjetiva(na(utilização.
  57. 57. UX)não)é)UI!) Ou;)experiência)do)usuário)não)é)layout)bonitinho.
  58. 58. ?
  59. 59. Mas*primeiro: •Avaliar*os*riscos* •Avaliar*os*benefícios* •Avaliar*os*custos
  60. 60. Entender(o(Cliente Entender(o(Usuário
  61. 61. Entender*o*Cliente* ! Stakeholders*são*quaisquer* envolvidos,*da*parte*do*cliente,*em* um*projeto.*Podem*ser*os*que* tomam*decisões*os*que*devem* opinar*ou*fornecer*recursos.** ! Conversando(com(eles(você(irá( descobrir:( ! ;*políticas*organizacionais* ;*usuários*em*potencial* ;*o*que*motiva*decisões* ;*termos*utilizados* ;*objetivos*do*projeto* ;*expectativas* ;conhecimento*institucional* ;*funções*e*hierarquias* ;*...
  62. 62. Entrevista*com* Stakeholders É*uma*entrevista*com*todos*os*envolvidos*no* processo*de*publicação*de*conteúdo*para* mapeamento*de*necessidades*expectativas*e* responsabilidades*dentro*do*projeto.** ! O*número*de*entrevistados*depende*de*quantas* pessoas*terão*responsabilidades*direta*e* indiretamente*em*relação*ao*projeto,*sejam* clientes*ou*fornecedores.* ! Não*deixe*que*requisitos*do*projeto*sejam* determinados*por*suposições*que*não*podem*ser* testadas.*(Saiba*o*porque*de*cada*coisa)* 
 !
  63. 63. Pesquisas,*documentos* internos,pesquisas*já* realizadas. É*uma*análise*especializada*de*pesquisas* quantitativas*existentes*e*referências*teóricas* dentro*do*campo*de*atuação*do*site*a*ser* redesenhado.** ! O*objetivo*é*encontrar*referências*que*já*existem* no*universo*teórico*que*possam*contribuir*para*o* desenvolvimento*do*projeto.*

  64. 64. Análise**de*Tráfego É*uma*análise*especializada*dos*dados*de*tráfego*no* atual*site*a*ser*redesenhado.* ! O*objeto*de*estudo*depende*do*tipo*de*métrica* produzida*atualmente*pelo*sistema*de*BI*do*site,*e* a*partir*destas*informações*(acesso*,*bounce*rating,* keywords...etc*)*tirar*conclusões*acerca*da* otimização*do*uso*dos*conteúdos*e*funcionalidades* do*site.* ! ;Relatórios*internos*da*empresa
 (vendas,*sugestões*e*reclamações)* ;Análise*do*log*do*mecanismo*de*busca* ;Análise*de*estatísticas*de*acesso*e*navegação*no* site.* 
 !
  65. 65. Análise*Heurística É*uma*análise*especializada*do*site*atual*a*ser* redesenhado*feita*a*partir*de*boas*práticas* (heurísticas)*de*usabilidade*e*de*comportamento*de* consumidores*na*internet.** ! O*objetivo*é*otimizar*o*processo*de*pesquisa*com* usuários*detectando*problemas*mais*evidentes*que* podem*ser*resolvidos*de*maneira*mais*ágil*sem* muito*custo*de*pesquisa.

  66. 66. Inventário*de*Conteúdo Lista detalhada de tudo o que deverá compor o site / sistema em ordem de importância e
 diferenças de funcionalidade. > Levantamento de Dados e Inventário Identificação
 Numérica Nome da página metadados Descrição Tipo de
 Arquivo
 (formato) Tipo de
 Conteúdo Tópico/Tema Público-alvo 0 Home Página principal do site Texto Navegação Chamadas internas Geral 1 Sobre Apresentação institucional Texto e imagem Institucional Apresentação Geral, anunciantes 1.1 Histórico História do programa Texto Institucional Apresentação, história Geral, anunciantes 1.2 Equipe Dados dos integrantes Texto e imagens Institucional Apresentação, quem somos Geral, anunciantes 1.3 Café Colombo na Imprensa Clipping Texto e imagens Noticioso Repercussão Geral, anunciantes Notícia do Clipping Notícia publicada Texto e imagens Noticioso Repercussão Geral, anunciantes 1.4 Direitos Autorais Licença Creative Commons Texto Informativo Reprodução do conteúdo Geral, blogueiros 2 Programas Arquivo dos programas Texto, imagem e áudio Programa Programa Geral 2.1 ... Programa específico Descrição do programa Texto e áudio Institucional Programa Geral 3 Indicações Lista das indicações feitas Texto e imagem Serviço Indicações Geral 1.3.1 ...
  67. 67. Exercício*1:* Começando*um*projeto* ! 1(–(Revise(o(Briefing(que(foi(passado(e(comente(sobre(o(que(você(entendeu( e(o(que(você(acha(que(está(bom(e(ruim.( ! 2(–(Depois(escreva(quaisquer(dúvidas(que(vem(a(sua(cabeça(sobre(o(projeto( proposto.( ! 3(–(Considere(o(que(você(gostaria(de(perguntar(para(os(responsáveis(por( este(projeto.( *
  68. 68. Exercício*2:* Qual*é*a*oportunidade*de*negócio?* ! 1(H(Revise(as(entrevistas(com(Stakeholders(e(responda:( ! ;*Qual*é*o*principal*diferencial*da*empresa*do*cliente?*O*que*ele*pode*realmente*fazer* bem*que*o*mercado*não*oferece?*Ou*o*que*ele*pode*fazer*melhor*que*o*mercado*já* faz?* ! ;*Reflita*por*um*momento;*se*o*cliente*pode*oferecer*estes*benefícios*agora,*onde*é* que*ele*pode*chegar*a*curto*prazo*?* ! 2(–(Escreva(com(letras(grandes(em(um(papel:( *** *********Os*objetivos*do*projeto*são:*?????* ! ! Dica*smart:*Objetivos*tem*que*ser*específicos,*mensuráveis,*viáveis,*realistas*e*ter*prazo.* !
  69. 69. Esclareça*os*objetivos,*compartilhe*e*busque* consenso*entre*stakeholders*antes*de*seguir* adiante.*
  70. 70. Exercício*3:* Expectativas*sobre*o*usuário* ! 1*–*Utilize*o*conhecimento*que*você*tem*até*agora*para*criar*hipóteses*sobre*o* usuário.* ! ;*Para*quem*estamos*desenhando?*Que*tipo*de*pessoa*irá*usar*nosso*produto?* ! ! 2*–*Escreva*bem*grande*:* ;*Nossos*usuários*tem*necessidade*(desejo)*de:**?????* ! !
  71. 71. Agora(Vamos(olhar(mais(de(cima
  72. 72. Nenhum*produto*funciona*isoladamente.** ! ;*Todos*os*envolvidos*no*projeto*devem*ter*uma* compreensão*similar*das*informações*mais* importantes*para*poder*tomar*decisões*acertadas.* ! ;*É*fundamental*saber*quais*fatores*externos*podem* influenciar*a*experiência*final*do*usuário.* !
  73. 73. É*por*estas*e*outras*que*vamos*fazer*um* ecossistema*de*produto.* ! ;*Mapear**pessoas,*relações,**notícias,*tendências,* tecnologias,*atividades,*pontos*de*contato*e*lugares* que*se*relacionem*com*nosso*produto.* ! ;*Perceber*como*esses*fatores*podem*ser*usados*para* aprimorar*nosso*projeto.* !
  74. 74. Benchmarking Identificar*as*referências*do*mercado*em* determinadas*áreas*e*as*melhores*práticas* aplicadas*nos*produtos.** ! É*reunir*em*um*documento*tudo*o*que*se*tem*de* melhor*sobre*determinado*produto*para*criar*uma* base*de*comparação*para*o*novo*produto*a*ser* criado.*

  75. 75. E*muito*mais... Estatísticas,*análises*de*mercado,*análises*setoriais,*relatórios*de*empresas*especializadas,* entrevista*com*especialistas,*indicadores*econômicos,*análises*políticas,*históricas,*sociais,* livros,*artigos,*personalidades*do*setor....

  76. 76. Exercício*4:**Ecossistema Conversem(sobre(cada(um(dos(assuntos(neste(diagrama(e(escrevam(uma(folha(com(as( premissas(encontradas(em(cada(um,(com(base(no(briefing,(e(entrevistas(com(o(cliente(. Processos*e*instituições* Notícias,*tendências*e*tecnologias* ;Com*quem*deveríamos*falar?* ;*Qual*é*o*mercado*que*vamos*atender*?** ;*Como*a*concorrência*trabalha*?* ;;*Alguém*regulamenta*algo*neste*ramo*?* ;Quem*entende*mais*desse*assunto*? ;Quais*novidades*nos*deveríamos*levar*em* conta?* ;*Em*quais*dispositivos*meu*serviço*ou*conteúdo* pode*ser*relevante?** ;*Quais*são*as*melhores*referências*que* podemos*encontrar*?* Atividades*e*pontos*de*contato* ;*Que*atividades*e*situações*estão* relacionados*com*o*propósito*do*nosso* produto*?* Pessoas,*Lugares* ;Quais*seriam*alguns*lugares*e*contextos* únicos*em*que*nosso*produto*seria* utilizado?** ;*Existem*grupos*de*pessoas*interessadas* no*meu*sistema?* ;*Existem*clichês,*preconceitos*modas*,* associados*a*este*produto*?*
  77. 77. Entender(o(Negócio Entender(o(Usuário
  78. 78. Mas*pra*quê* pesquisar*com* usuários*? • Entender*os*desejos,*necessidades*e* experiências*das*pessoas*para*gerar* valor*com*nossos*projetos.* ! • Entender*diferentes*contextos*que* influenciam*nas*decisões*das*pessoas.* ! • Para*compreender*a*perspectiva*de* outras*pessoas*sobre*o*mundo.* ! • Para*descobrir*oportunidades*de* melhoria*e*expansão*do*seu*produto.
  79. 79. Quem*é*meu* usuário*? •Quem*usa*seu*produto*ou*serviço*ou*poderá* usar*no*futuro*(não*quem*o*administra).* ! •Não*necessariamente*experts*no*seu* segmento.* ! •Lembre;se*que*para*empresas*B2B*nem* sempre*o*cliente*e*usuário*são*os*mesmos.* ! •Quais*são*as*características*fundamentais*para* a*definição*do*seu*público?*(funções,*faixa* etária,*setor*econômico,*formação* educacional…)
  80. 80. E*quais*métodos*eu*devo*utilizar?
  81. 81. Pesquisas*Quantitativas Excelentes*para*identificar*o*que*está*acontecendo* no*momento,*enquanto*as*qualitativas*servem*para* entender**o*porquê*que*determinadas*coisas* acontecem.* ! ! 
 ;**Web*Analytics* ;**Estatísticas* ;**Questionários*
  82. 82. Entrevistas*em*Contexto ! Descobrir*o*que*as*pessoas*querem*e*precisam*a* partir*do*contexto*real*do*seu*cotidiano.** ! 
 A*partir*disto*criamos*personas*e*cenários*que*são*a* criação**de*personagens*e*situações*fictícias*feitas** partir*dos*estudos*com*usuários,*para*delimitar*os* diferentes*o*públicos*e*direcionar*as*soluções*de* design.**
  83. 83. Focus*Group É*uma*técnica*de*pesquisa*qualitativa*que*visa* captar*insights*de*usuários*reais*acerca*do*produto* a*ser*redesenhado.*É*uma*conversa*com*um*grupo* de*8;10*pessoas*que*sejam*de*um*determinado* público*alvo.** ! O*encontro*é*registrado*em*áudio*e*em*fotografias,* e*pode*ser*complementado*com*desenhos* colaborativos*entre*outros*recursos.*O*resultado* final*são*problemas*e*necessidades*reais*dos* consumidores*que*servem*de*base*para*o*desenho* de*um*novo*produto.*

  84. 84. Etnografia*Virtual A*Etnografia(é*por*excelência*o*método* utilizado*pela*antropologia * * na*coleta*de*dados.* São*analisadas*as*necessidades*e* prioridades*de*usuários,
 abordando*questões*sociológicas* como:* ;Motivações* ;Tendências* ;Cultura* ;Comportamento* ;Curva*de*Aprendizado* ;Opiniões*
  85. 85. Card*Sorting Card*Sorting*é*uma*técnica*de*classificação*e* organização*de*conteúdo*de*acordo*com*o*modelo* cognitivo*de*usuários*reais.** ! 
 Escrevemos*vários*conteúdos*e*funcionalidades*em* cartões*para*que*os*usuários*os*organizem*de* acordo*com*a*forma*que*entendam*melhor*,* podendo*sugerir*diferentes*termos*e*formas*de* organização.*O*resultado*é*o*conteúdo*do*futuro* site*organizado*da*maneira*que*as*pessoas*que*o* usarão*entendem.*
  86. 86. Testes de Usabilidade É*uma*observação*de*usuários*reais* realizando*tarefas*no*site*orientados*por*um* especialista,**enquanto*os*envolvidos*no* projeto*observam*e*levantam*suas* considerações*sobre*o*que*pode*ser*feito* para*melhorar*o*produto.** ! É*a*maneira*mais*eficaz*de*assegurar*que*um* produto*digital*atenda*as*necessidades*do* consumidor*e*de*identificar*as*mais*mínimas* falhas*no*uso*de*uma*interface.* ! 
 ;Exploração* ;*Avaliação* ;*Comparação*
  87. 87. Teste de Usabilidade /Ágil Plano(de(testes
 Recrutamento( Aplicação Análise Relatório 
 (**)
 1°Dia 2°Dia 3°Dia 4°Dia 5°Dia
  88. 88. Exercício*5*–*Entrevistas* 1*–*Defina*os*objetivos*da*sua*entrevista.*Pense*sobre*o*que*você* precisa*saber*e*como*poderia*descobrir*isso.*(consulte*o*seu* ecossistema)** ! 2*–*Escreva*todas*as*perguntas*que*você*usaria*e*faça*um*roteiro* “semi*aberto”*de*perguntas.* ! 3*–*Entreviste*seu*coleguinha*:*)* Dicas:(( ;(Pergunte(por(que(repetidamente.(( ;(Procure(por(histórias(e(sensações.( ;(Use(perguntas(abertas(para(extrair(informações.( ;(Use(Perguntas(fechadas(para(assumir(o(controle(da(conversa.( ;(Anote(o(que(puder,(destaque(o(que(interessar.( ;(Preste(atenção(no(que(o(sujeito(está(falando(:()²
  89. 89. Exercício*6*–*Colocando*ordem*no*barraco* 1*–*Em*grupo*discutam:** ;*Quais*necessidades*eles*tem*a*ser*supridas*?* ;*O*que*os*irrita*ou*decepciona*?* ;*O*que*os*motiva*a*usar*este*produto*?* ;*Quais*foram*as*coisas*mais*interessantes*que*você*percebeu*?* ;*O*que*você*descobriu*reforça*ou*contradiz*as*hipóteses*iniciais*?* ! 2*–*Passe*a*limpo*a*coisa*toda*e*escrevam*bem*grande:* ! Premissas*dos*usuários:*?????????????*
  90. 90. Interpretando(as(Pesquisas
  91. 91. O*que*acontece*se*não*houver*um*tempo*para* sintetizar*e*interpretar*as*pesquisas*? ;O*design*do*projeto*pode*seguir*cegamente*as*recomendações*das*pessoas.* ;*Cada*pessoa*da*equipe*pode*ter*uma*opinião*diferente*sobre*o*que*e*para*quem* estão*projetando.* ;*Não*há*consenso*sobre*prioridades.* ;*Para*tornar*as*pesquisa*úteis*são*necessárias*algumas*ferramentas*de* interpretação.* ;*Personas*e*Cenários*são*descaradamente*as*mais*utilizadas.
  92. 92. Persona( É*uma*ferramenta*para*sintetizar*informações*de*pesquisa.* ; Cria*empatia*com*o*serviço*ou*produto*e*dá*foco*as*decisões*de*design.** ; Ajuda*as*equipes*a*se*comunicarem*melhor,*estabelecendo*um*ponto*de* referência*comum.* ; Evita*design*por*comitê*e*auto;referencial.
  93. 93. Dicas*para*criar*uma*Persona( ; Projete*para*personas*primárias*e*acomode*as*secundárias* ; Não*crie*muitas.*Pelo*menos*duas*e*no*máximo*12.* ; Cuidado*para*não*ser*específico*ou*abrangente*demais.*Sempre*se* pergunte*porque*uma*informação*é*importante.* ; Personas*são*feitas*com*base*em*padrões*de*comportamento.*Quais* comportamentos*se*repetem*nas*suas*pesquisas?
  94. 94. Uma*persona*deve*conter: Objetivos((( Práticos*;*O*que*quer,*porque*quer.* ! Experimentais*;*Como*quer*se*sentir.** Dados(demográficos** Sexo,*idade,*etnia,escolaridade,*estado*civil,*classe*social,*etc.* ! Modelo(mental((( Pontos(críticos( Quais*são*as*principais*dificuldades*do*usuário*em*relação*ao* seu*produto?* Uma*crença*geral*sobre*como*as*coisas*funcionam* em*algumas*situações*e*motivação*para*concluir* uma*tarefa. Requisitos(Técnicos(( Dispositivos*de*acesso,*tipo*de*conexão*a*internet,*sites*mais* utilizados…etc( Uma(historinha( Uma*boa*história*vai*apresentar*a*sua*persona*em*relação*ao* seu*estilo*de*vida,*cotidiano,*atitudes*frustrações*e* comportamenos*em*relação*ao*produto.* ! Comportamentos,(atitudes( *Coisas*que*as*pessoas*fazem*relacionados*aos*seus*objetivos.* ! Nível(de(Habilidades( Experiente*ou*iniciante*nos*recursos*relacionados*ao*nosso* produto?*Com*que*tipo*de*tecnologia*está*habituada*?* ! ! ! Alguns(dados(sobre(a(vida(pessoal( Profissão,*cargos*e*responsabilidades*e*outras*características* que*determinam*a*personalidade*dos*usuários.* ! Um(nome(real( Facilita*a*diferenciação*entre
 cada*persona*e*a*torna*mais*real.** ! Uma(foto(* Também*deve*ser*de*acordo*com*o*perfil*da*persona.*Evitar* fotos*de*pessoas*conhecidas.*
  95. 95. Exercício*7*–*Criando*Personas* 1*–*Identifique*padrões*repetitivos*nas*anotações*da*pesquisa,*quais*os* tipos*de*comportamento*que*se*repetem.** ! 2*–*Forme*grupos*(clusters)*com*base*em*informações*repetidas*e* relacionadas.* *********;*Quais*as**características**de*cada*grupo?* **** ;*Especifique*as*características*de*cada*grupo,*a*partir*do*modelo* básico*da*persona*(objetivos,*modelos*mentais*...etc)* ! 3*–*Anote*qualquer*ideia*ou*oportunidade*que*for*aparecendo*para*cada* grupo*que*for*se*formando.*
  96. 96. E*agora?*Já*dá*pra*sair*desenhando? Calma*lá.* ! Confira*os*riscos*de*fazer**uma* pesquisa*e*sair*projetando*direto* com*base*no*que*escutou*e*anotou.* • Tentação(de(extrair(uma(“lista(de( funcionalidades”(das(suas(anotações(de(pesquisa(( ! • Se(concentrar(na(criação(de(telas(e((detalhes( muito(específicos(com(base(em(um(briefing(ou( lista(de(requerimentos(enviadas(pelo(cliente.
  97. 97. Cenários Pense*no*contexto*;*como*as*suas* personas*se*comportariam*em* uma*situação*real*.* ! Criar*uma*história*,*ajuda*a*colocar* um*personagem*em*um*contexto.* ! Para*isso*usamos*uma*ferramenta* chamada*cenários.* ! •Cenários(ajudam(a(pensar(em( funcionalidades(úteis.(( ! •Ajudam(a(priorizar(requisitos( pela(perspectiva(dos(usuários.( ! •Ajudam(a(manter(o(foco(das(( soluções(nos(conceitos(iniciais.( ! •Ajudam(a(comunicar(idéias( finalizadas.
  98. 98. Dicas*para*bons*Cenários ; Evite*listas*de*requisitos*e*funcionalidades.* ! ; Não*se*concentre*em*detalhes.*O* importante*nestem*momento*é*ter*uma* compreensão*da*experiência*como*um* todo.* ! ; Enquadre*a**persona*em*uma*situação*real,* verossímil.* ! ; Se*concentre*em*descrever*a*experiência,* na*continuidade*da*história.* ! ; *Toda*história*tem*um*estado*inicial,*uma* transformação*e*um*resultado*final.*
  99. 99. Um*cenário*deve*conter: Uma(persona.(( Incluindo*principalmente*seus*objetivos* ! Um(ambiente(( (físico*e*social)* ! Um(enredo(( Objetivos,*Necessidades,*Ações,**desafios,* tomada*de*decisões*,*recursos*adquiridos,* pessoas*envolvidas,*sentimentos,*expectativas…* 
 Pontos(de(contato* Com*o*que*sua*persona*interage*com*seu* produto*para*alcançar*os*objetivos* ! Resultado(esperado( Como*fica*a*sua*persona*depois*que*usa*seu* produto. H(Estado(Inicial(+(( H(Transformação,(ou(interação(+(( H(Estado(final.(
  100. 100. Exercício*8:*Identificando*as*interações.* 1*–*Olhe*para*as*personas*e*pense*na*maior*quantidade*possível*de* situações*em*que*elas*poderiam*usar*seu*produto.* ! 2*–*Crie*um*título*pra*cada*evento*que*for*pensado*(como*se*fossem*os* episódios*de*uma*série)* ! 3*;*Priorize*as*principais*interações.*E*verifique*novamente*suas*personas* pra*ver*se*não*esqueceu*nada*importante.* ** 4*–*Ainda*não*junte*tudo.*Tente*pensar*na*maior*quantidade*de* possiblidades*de*situações*e*elementos.** !
  101. 101. Exercício*9:*Criando*Cenários.* 1*–*Agora*junte*tudo*e*descreva*cada*cena.** ! 2**–Descreva*os*elementos*que*compõe*as* cenas*de*cada*título.*(lembre*do*modelo*de* cenário;*enredo,*pontos*de*contato,*etc.)** ! 3*–*Pense*na*experiência*ideal.*Pense*em*o* quê*acontece*e*não*em*como*acontece.* Não*faça*uma*lista*de*requerimentos.* ! 4*–*Numere*cada*passo*pra*ajudar*a* organizar.
  102. 102. ?
  103. 103. Introdução*à** Pesquisa( m*pouco*de*história*e*princípios*teóricos "É*um*erro*grave*teorizar*antes*de*ter*dados"*;*Arthur*Conan*Doyle
  104. 104. Mas*primeiro: •Avaliar*os*riscos* •Avaliar*os*benefícios* •Avaliar*os*custos
  105. 105. Entender(o(Cliente Entender(o(Usuário
  106. 106. Entender*o*Cliente* ! Stakeholders*são*quaisquer* envolvidos,*da*parte*do*cliente,*em* um*projeto.*Podem*ser*os*que* tomam*decisões*os*que*devem* opinar*ou*fornecer*recursos.** ! Conversando(com(eles(você(irá( descobrir:( ! ;*políticas*organizacionais* ;*usuários*em*potencial* ;*o*que*motiva*decisões* ;*termos*utilizados* ;*objetivos*do*projeto* ;*expectativas* ;conhecimento*institucional* ;*funções*e*hierarquias* ;*...
  107. 107. Entrevista*com* Stakeholders É*uma*entrevista*com*todos*os*envolvidos*no* processo*de*publicação*de*conteúdo*para* mapeamento*de*necessidades*expectativas*e* responsabilidades*dentro*do*projeto.** ! O*número*de*entrevistados*depende*de*quantas* pessoas*terão*responsabilidades*direta*e* indiretamente*em*relação*ao*projeto,*sejam* clientes*ou*fornecedores.* ! Não*deixe*que*requisitos*do*projeto*sejam* determinados*por*suposições*que*não*podem*ser* testadas.*(Saiba*o*porque*de*cada*coisa)* 
 !
  108. 108. Pesquisas,*documentos* internos,pesquisas*já* realizadas. É*uma*análise*especializada*de*pesquisas* quantitativas*existentes*e*referências*teóricas* dentro*do*campo*de*atuação*do*site*a*ser* redesenhado.** ! O*objetivo*é*encontrar*referências*que*já*existem* no*universo*teórico*que*possam*contribuir*para*o* desenvolvimento*do*projeto.*

  109. 109. Análise**de*Tráfego É*uma*análise*especializada*dos*dados*de*tráfego*no* atual*site*a*ser*redesenhado.* ! O*objeto*de*estudo*depende*do*tipo*de*métrica* produzida*atualmente*pelo*sistema*de*BI*do*site,*e* a*partir*destas*informações*(acesso*,*bounce*rating,* keywords...etc*)*tirar*conclusões*acerca*da* otimização*do*uso*dos*conteúdos*e*funcionalidades* do*site.* ! ;Relatórios*internos*da*empresa
 (vendas,*sugestões*e*reclamações)* ;Análise*do*log*do*mecanismo*de*busca* ;Análise*de*estatísticas*de*acesso*e*navegação*no* site.* 
 !
  110. 110. Análise*Heurística É*uma*análise*especializada*do*site*atual*a*ser* redesenhado*feita*a*partir*de*boas*práticas* (heurísticas)*de*usabilidade*e*de*comportamento*de* consumidores*na*internet.** ! O*objetivo*é*otimizar*o*processo*de*pesquisa*com* usuários*detectando*problemas*mais*evidentes*que* podem*ser*resolvidos*de*maneira*mais*ágil*sem* muito*custo*de*pesquisa.

  111. 111. Inventário*de*Conteúdo Lista detalhada de tudo o que deverá compor o site / sistema em ordem de importância e
 diferenças de funcionalidade. > Levantamento de Dados e Inventário Identificação
 Numérica Nome da página metadados Descrição Tipo de
 Arquivo
 (formato) Tipo de
 Conteúdo Tópico/Tema Público-alvo 0 Home Página principal do site Texto Navegação Chamadas internas Geral 1 Sobre Apresentação institucional Texto e imagem Institucional Apresentação Geral, anunciantes 1.1 Histórico História do programa Texto Institucional Apresentação, história Geral, anunciantes 1.2 Equipe Dados dos integrantes Texto e imagens Institucional Apresentação, quem somos Geral, anunciantes 1.3 Café Colombo na Imprensa Clipping Texto e imagens Noticioso Repercussão Geral, anunciantes Notícia do Clipping Notícia publicada Texto e imagens Noticioso Repercussão Geral, anunciantes 1.4 Direitos Autorais Licença Creative Commons Texto Informativo Reprodução do conteúdo Geral, blogueiros 2 Programas Arquivo dos programas Texto, imagem e áudio Programa Programa Geral 2.1 ... Programa específico Descrição do programa Texto e áudio Institucional Programa Geral 3 Indicações Lista das indicações feitas Texto e imagem Serviço Indicações Geral 1.3.1 ...
  112. 112. Exercício*1:* Começando*um*projeto* ! 1(–(Revise(o(Briefing(que(foi(passado(e(comente(sobre(o(que(você(entendeu( e(o(que(você(acha(que(está(bom(e(ruim.( ! 2(–(Depois(escreva(quaisquer(dúvidas(que(vem(a(sua(cabeça(sobre(o(projeto( proposto.( ! 3(–(Considere(o(que(você(gostaria(de(perguntar(para(os(responsáveis(por( este(projeto.( *
  113. 113. Exercício*2:* Qual*é*a*oportunidade*de*negócio?* ! 1(H(Revise(as(entrevistas(com(Stakeholders(e(responda:( ! ;*Qual*é*o*principal*diferencial*da*empresa*do*cliente?*O*que*ele*pode*realmente*fazer* bem*que*o*mercado*não*oferece?*Ou*o*que*ele*pode*fazer*melhor*que*o*mercado*já* faz?* ! ;*Reflita*por*um*momento;*se*o*cliente*pode*oferecer*estes*benefícios*agora,*onde*é* que*ele*pode*chegar*a*curto*prazo*?* ! 2(–(Escreva(com(letras(grandes(em(um(papel:( *** *********Os*objetivos*do*projeto*são:*?????* ! ! Dica*smart:*Objetivos*tem*que*ser*específicos,*mensuráveis,*viáveis,*realistas*e*ter*prazo.* !
  114. 114. Esclareça*os*objetivos,*compartilhe*e*busque* consenso*entre*stakeholders*antes*de*seguir* adiante.*
  115. 115. Exercício*3:* Expectativas*sobre*o*usuário* ! 1*–*Utilize*o*conhecimento*que*você*tem*até*agora*para*criar*hipóteses*sobre*o* usuário.* ! ;*Para*quem*estamos*desenhando?*Que*tipo*de*pessoa*irá*usar*nosso*produto?* ! ! 2*–*Escreva*bem*grande*:* ;*Nossos*usuários*tem*necessidade*(desejo)*de:**?????* ! !
  116. 116. Agora(Vamos(olhar(mais(de(cima
  117. 117. Nenhum*produto*funciona*isoladamente.** ! ;*Todos*os*envolvidos*no*projeto*devem*ter*uma* compreensão*similar*das*informações*mais* importantes*para*poder*tomar*decisões*acertadas.* ! ;*É*fundamental*saber*quais*fatores*externos*podem* influenciar*a*experiência*final*do*usuário.* !
  118. 118. É*por*estas*e*outras*que*vamos*fazer*um* ecossistema*de*produto.* ! ;*Mapear**pessoas,*relações,**notícias,*tendências,* tecnologias,*atividades,*pontos*de*contato*e*lugares* que*se*relacionem*com*nosso*produto.* ! ;*Perceber*como*esses*fatores*podem*ser*usados*para* aprimorar*nosso*projeto.* !
  119. 119. Benchmarking Identificar*as*referências*do*mercado*em* determinadas*áreas*e*as*melhores*práticas* aplicadas*nos*produtos.** ! É*reunir*em*um*documento*tudo*o*que*se*tem*de* melhor*sobre*determinado*produto*para*criar*uma* base*de*comparação*para*o*novo*produto*a*ser* criado.*

  120. 120. E*muito*mais... Estatísticas,*análises*de*mercado,*análises*setoriais,*relatórios*de*empresas*especializadas,* entrevista*com*especialistas,*indicadores*econômicos,*análises*políticas,*históricas,*sociais,* livros,*artigos,*personalidades*do*setor....

  121. 121. Exercício*4:**Ecossistema Conversem(sobre(cada(um(dos(assuntos(neste(diagrama(e(escrevam(uma(folha(com(as( premissas(encontradas(em(cada(um,(com(base(no(briefing,(e(entrevistas(com(o(cliente(. Processos*e*instituições* Notícias,*tendências*e*tecnologias* ;Com*quem*deveríamos*falar?* ;*Qual*é*o*mercado*que*vamos*atender*?** ;*Como*a*concorrência*trabalha*?* ;;*Alguém*regulamenta*algo*neste*ramo*?* ;Quem*entende*mais*desse*assunto*? ;Quais*novidades*nos*deveríamos*levar*em* conta?* ;*Em*quais*dispositivos*meu*serviço*ou*conteúdo* pode*ser*relevante?** ;*Quais*são*as*melhores*referências*que* podemos*encontrar*?* Atividades*e*pontos*de*contato* ;*Que*atividades*e*situações*estão* relacionados*com*o*propósito*do*nosso* produto*?* Pessoas,*Lugares* ;Quais*seriam*alguns*lugares*e*contextos* únicos*em*que*nosso*produto*seria* utilizado?** ;*Existem*grupos*de*pessoas*interessadas* no*meu*sistema?* ;*Existem*clichês,*preconceitos*modas*,* associados*a*este*produto*?*
  122. 122. Entender(o(Negócio Entender(o(Usuário
  123. 123. Mas*pra*quê* pesquisar*com* usuários*? • Entender*os*desejos,*necessidades*e* experiências*das*pessoas*para*gerar* valor*com*nossos*projetos.* ! • Entender*diferentes*contextos*que* influenciam*nas*decisões*das*pessoas.* ! • Para*compreender*a*perspectiva*de* outras*pessoas*sobre*o*mundo.* ! • Para*descobrir*oportunidades*de* melhoria*e*expansão*do*seu*produto.
  124. 124. Quem*é*meu* usuário*? •Quem*usa*seu*produto*ou*serviço*ou*poderá* usar*no*futuro*(não*quem*o*administra).* ! •Não*necessariamente*experts*no*seu* segmento.* ! •Lembre;se*que*para*empresas*B2B*nem* sempre*o*cliente*e*usuário*são*os*mesmos.* ! •Quais*são*as*características*fundamentais*para* a*definição*do*seu*público?*(funções,*faixa* etária,*setor*econômico,*formação* educacional…)
  125. 125. E*quais*métodos*eu*devo*utilizar?
  126. 126. Pesquisas*Quantitativas Excelentes*para*identificar*o*que*está*acontecendo* no*momento,*enquanto*as*qualitativas*servem*para* entender**o*porquê*que*determinadas*coisas* acontecem.* ! ! 
 ;**Web*Analytics* ;**Estatísticas* ;**Questionários*
  127. 127. Entrevistas*em*Contexto ! Descobrir*o*que*as*pessoas*querem*e*precisam*a* partir*do*contexto*real*do*seu*cotidiano.** ! 
 A*partir*disto*criamos*personas*e*cenários*que*são*a* criação**de*personagens*e*situações*fictícias*feitas** partir*dos*estudos*com*usuários,*para*delimitar*os* diferentes*o*públicos*e*direcionar*as*soluções*de* design.**
  128. 128. Focus*Group É*uma*técnica*de*pesquisa*qualitativa*que*visa* captar*insights*de*usuários*reais*acerca*do*produto* a*ser*redesenhado.*É*uma*conversa*com*um*grupo* de*8;10*pessoas*que*sejam*de*um*determinado* público*alvo.** ! O*encontro*é*registrado*em*áudio*e*em*fotografias,* e*pode*ser*complementado*com*desenhos* colaborativos*entre*outros*recursos.*O*resultado* final*são*problemas*e*necessidades*reais*dos* consumidores*que*servem*de*base*para*o*desenho* de*um*novo*produto.*

  129. 129. Etnografia*Virtual A*Etnografia(é*por*excelência*o*método* utilizado*pela*antropologia * * na*coleta*de*dados.* São*analisadas*as*necessidades*e* prioridades*de*usuários,
 abordando*questões*sociológicas* como:* ;Motivações* ;Tendências* ;Cultura* ;Comportamento* ;Curva*de*Aprendizado* ;Opiniões*
  130. 130. Card*Sorting Card*Sorting*é*uma*técnica*de*classificação*e* organização*de*conteúdo*de*acordo*com*o*modelo* cognitivo*de*usuários*reais.** ! 
 Escrevemos*vários*conteúdos*e*funcionalidades*em* cartões*para*que*os*usuários*os*organizem*de* acordo*com*a*forma*que*entendam*melhor*,* podendo*sugerir*diferentes*termos*e*formas*de* organização.*O*resultado*é*o*conteúdo*do*futuro* site*organizado*da*maneira*que*as*pessoas*que*o* usarão*entendem.*
  131. 131. Testes de Usabilidade É*uma*observação*de*usuários*reais* realizando*tarefas*no*site*orientados*por*um* especialista,**enquanto*os*envolvidos*no* projeto*observam*e*levantam*suas* considerações*sobre*o*que*pode*ser*feito* para*melhorar*o*produto.** ! É*a*maneira*mais*eficaz*de*assegurar*que*um* produto*digital*atenda*as*necessidades*do* consumidor*e*de*identificar*as*mais*mínimas* falhas*no*uso*de*uma*interface.* ! 
 ;Exploração* ;*Avaliação* ;*Comparação*
  132. 132. Teste de Usabilidade /Ágil Plano(de(testes
 Recrutamento( Aplicação Análise Relatório 
 (**)
 1°Dia 2°Dia 3°Dia 4°Dia 5°Dia
  133. 133. Exercício*5*–*Entrevistas* 1*–*Defina*os*objetivos*da*sua*entrevista.*Pense*sobre*o*que*você* precisa*saber*e*como*poderia*descobrir*isso.*(consulte*o*seu* ecossistema)** ! 2*–*Escreva*todas*as*perguntas*que*você*usaria*e*faça*um*roteiro* “semi*aberto”*de*perguntas.* ! 3*–*Entreviste*seu*coleguinha*:*)* Dicas:(( ;(Pergunte(por(que(repetidamente.(( ;(Procure(por(histórias(e(sensações.( ;(Use(perguntas(abertas(para(extrair(informações.( ;(Use(Perguntas(fechadas(para(assumir(o(controle(da(conversa.( ;(Anote(o(que(puder,(destaque(o(que(interessar.( ;(Preste(atenção(no(que(o(sujeito(está(falando(:()²
  134. 134. Exercício*6*–*Colocando*ordem*no*barraco* 1*–*Em*grupo*discutam:** ;*Quais*necessidades*eles*tem*a*ser*supridas*?* ;*O*que*os*irrita*ou*decepciona*?* ;*O*que*os*motiva*a*usar*este*produto*?* ;*Quais*foram*as*coisas*mais*interessantes*que*você*percebeu*?* ;*O*que*você*descobriu*reforça*ou*contradiz*as*hipóteses*iniciais*?* ! 2*–*Passe*a*limpo*a*coisa*toda*e*escrevam*bem*grande:* ! Premissas*dos*usuários:*?????????????*
  135. 135. Interpretando(as(Pesquisas
  136. 136. O*que*acontece*se*não*houver*um*tempo*para* sintetizar*e*interpretar*as*pesquisas*? ;O*design*do*projeto*pode*seguir*cegamente*as*recomendações*das*pessoas.* ;*Cada*pessoa*da*equipe*pode*ter*uma*opinião*diferente*sobre*o*que*e*para*quem* estão*projetando.* ;*Não*há*consenso*sobre*prioridades.* ;*Para*tornar*as*pesquisa*úteis*são*necessárias*algumas*ferramentas*de* interpretação.* ;*Personas*e*Cenários*são*descaradamente*as*mais*utilizadas.
  137. 137. Persona( É*uma*ferramenta*para*sintetizar*informações*de*pesquisa.* ; Cria*empatia*com*o*serviço*ou*produto*e*dá*foco*as*decisões*de*design.** ; Ajuda*as*equipes*a*se*comunicarem*melhor,*estabelecendo*um*ponto*de* referência*comum.* ; Evita*design*por*comitê*e*auto;referencial.
  138. 138. Dicas*para*criar*uma*Persona( ; Projete*para*personas*primárias*e*acomode*as*secundárias* ; Não*crie*muitas.*Pelo*menos*duas*e*no*máximo*12.* ; Cuidado*para*não*ser*específico*ou*abrangente*demais.*Sempre*se* pergunte*porque*uma*informação*é*importante.* ; Personas*são*feitas*com*base*em*padrões*de*comportamento.*Quais* comportamentos*se*repetem*nas*suas*pesquisas?
  139. 139. Uma*persona*deve*conter: Objetivos((( Práticos*;*O*que*quer,*porque*quer.* ! Experimentais*;*Como*quer*se*sentir.** Dados(demográficos** Sexo,*idade,*etnia,escolaridade,*estado*civil,*classe*social,*etc.* ! Modelo(mental((( Pontos(críticos( Quais*são*as*principais*dificuldades*do*usuário*em*relação*ao* seu*produto?* Uma*crença*geral*sobre*como*as*coisas*funcionam* em*algumas*situações*e*motivação*para*concluir* uma*tarefa. Requisitos(Técnicos(( Dispositivos*de*acesso,*tipo*de*conexão*a*internet,*sites*mais* utilizados…etc( Uma(historinha( Uma*boa*história*vai*apresentar*a*sua*persona*em*relação*ao* seu*estilo*de*vida,*cotidiano,*atitudes*frustrações*e* comportamenos*em*relação*ao*produto.* ! Comportamentos,(atitudes( *Coisas*que*as*pessoas*fazem*relacionados*aos*seus*objetivos.* ! Nível(de(Habilidades( Experiente*ou*iniciante*nos*recursos*relacionados*ao*nosso* produto?*Com*que*tipo*de*tecnologia*está*habituada*?* ! ! ! Alguns(dados(sobre(a(vida(pessoal( Profissão,*cargos*e*responsabilidades*e*outras*características* que*determinam*a*personalidade*dos*usuários.* ! Um(nome(real( Facilita*a*diferenciação*entre
 cada*persona*e*a*torna*mais*real.** ! Uma(foto(* Também*deve*ser*de*acordo*com*o*perfil*da*persona.*Evitar* fotos*de*pessoas*conhecidas.*
  140. 140. Exercício*7*–*Criando*Personas* 1*–*Identifique*padrões*repetitivos*nas*anotações*da*pesquisa,*quais*os* tipos*de*comportamento*que*se*repetem.** ! 2*–*Forme*grupos*(clusters)*com*base*em*informações*repetidas*e* relacionadas.* *********;*Quais*as**características**de*cada*grupo?* **** ;*Especifique*as*características*de*cada*grupo,*a*partir*do*modelo* básico*da*persona*(objetivos,*modelos*mentais*...etc)* ! 3*–*Anote*qualquer*ideia*ou*oportunidade*que*for*aparecendo*para*cada* grupo*que*for*se*formando.*
  141. 141. E*agora?*Já*dá*pra*sair*desenhando? Calma*lá.* ! Confira*os*riscos*de*fazer**uma* pesquisa*e*sair*projetando*direto* com*base*no*que*escutou*e*anotou.* • Tentação(de(extrair(uma(“lista(de( funcionalidades”(das(suas(anotações(de(pesquisa(( ! • Se(concentrar(na(criação(de(telas(e((detalhes( muito(específicos(com(base(em(um(briefing(ou( lista(de(requerimentos(enviadas(pelo(cliente.
  142. 142. Cenários Pense*no*contexto*;*como*as*suas* personas*se*comportariam*em* uma*situação*real*.* ! Criar*uma*história*,*ajuda*a*colocar* um*personagem*em*um*contexto.* ! Para*isso*usamos*uma*ferramenta* chamada*cenários.* ! •Cenários(ajudam(a(pensar(em( funcionalidades(úteis.(( ! •Ajudam(a(priorizar(requisitos( pela(perspectiva(dos(usuários.( ! •Ajudam(a(manter(o(foco(das(( soluções(nos(conceitos(iniciais.( ! •Ajudam(a(comunicar(idéias( finalizadas.
  143. 143. Dicas*para*bons*Cenários ; Evite*listas*de*requisitos*e*funcionalidades.* ! ; Não*se*concentre*em*detalhes.*O* importante*nestem*momento*é*ter*uma* compreensão*da*experiência*como*um* todo.* ! ; Enquadre*a**persona*em*uma*situação*real,* verossímil.* ! ; Se*concentre*em*descrever*a*experiência,* na*continuidade*da*história.* ! ; *Toda*história*tem*um*estado*inicial,*uma* transformação*e*um*resultado*final.*
  144. 144. Um*cenário*deve*conter: Uma(persona.(( Incluindo*principalmente*seus*objetivos* ! Um(ambiente(( (físico*e*social)* ! Um(enredo(( Objetivos,*Necessidades,*Ações,**desafios,* tomada*de*decisões*,*recursos*adquiridos,* pessoas*envolvidas,*sentimentos,*expectativas…* 
 Pontos(de(contato* Com*o*que*sua*persona*interage*com*seu* produto*para*alcançar*os*objetivos* ! Resultado(esperado( Como*fica*a*sua*persona*depois*que*usa*seu* produto. H(Estado(Inicial(+(( H(Transformação,(ou(interação(+(( H(Estado(final.(
  145. 145. Exercício*8:*Identificando*as*interações.* 1*–*Olhe*para*as*personas*e*pense*na*maior*quantidade*possível*de* situações*em*que*elas*poderiam*usar*seu*produto.* ! 2*–*Crie*um*título*pra*cada*evento*que*for*pensado*(como*se*fossem*os* episódios*de*uma*série)* ! 3*;*Priorize*as*principais*interações.*E*verifique*novamente*suas*personas* pra*ver*se*não*esqueceu*nada*importante.* ** 4*–*Ainda*não*junte*tudo.*Tente*pensar*na*maior*quantidade*de* possiblidades*de*situações*e*elementos.** !
  146. 146. Exercício*9:*Criando*Cenários.* 1*–*Agora*junte*tudo*e*descreva*cada*cena.** ! 2**–Descreva*os*elementos*que*compõe*as* cenas*de*cada*título.*(lembre*do*modelo*de* cenário;*enredo,*pontos*de*contato,*etc.)** ! 3*–*Pense*na*experiência*ideal.*Pense*em*o* quê*acontece*e*não*em*como*acontece.* Não*faça*uma*lista*de*requerimentos.* ! 4*–*Numere*cada*passo*pra*ajudar*a* organizar.
  147. 147. ?
  148. 148. Introdução*à** Ideaçãopouco*de*história*e*princípios* teóricos "Tudo*na*vida,*mas*tudo*mesmo,*depende*de*uma*ideia*inteligente* e*de*uma*decisão*firme"*=*Goëthe
  149. 149. Princípios*do*Design São*conceitos*fortes,*fáceis*de*memorizar*que* incorporam*tudo*aquilo*que*se*deseja*para*o* novo*site.**Eles*devem*prover*critérios*que* possam*ser*avaliados*e*que*sirvam*de* referência*para*que*todas*as*partes*do*projeto* andem*juntas,*com*coerência*e*buscando* objetivos*comuns.* Concentre-se/no/usuário/e/tudo/mais/virá./ ! É/melhor/fazer/algo/realmente/bem/ ! Rápido/é/melhor/que/devagar./ ! A/democracia/funciona/na/web./ ! Você/não/precisa/estar/em/sua/escrivaninha// para/precisar/de/uma/resposta./ ! É/possível/fazer/dinheiro/sem/fazer/o/mal./ ! É/possível/ser/sério/sem/usar/terno. http://www.bbc.co.uk/gel/philosophy/design=philosophy* http://www.google.com/about/company/philosophy/* http://developer.apple.com/library/ios/#documentation/ UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
  150. 150. Brainstorm Não/Viaje// Você*deve*pensar*fora*da*caixa,*mas*dentro*da*estratégia.* ! Estabeleça/objetivos/claros/e/mantenha/o/foco/ Comece*com*as*perguntas*corretas.*Os*melhores*resultados*são*obtidos*quando*todos* mantiverem*a*disciplina.*Isso*vai*orientar*você*para*as*respostas*corretas.*–*de*Design.* ! Estabeleça/um/limite/de/tempo/ Quanto*mais*tempo*você*dá*para*o*brainstorm,*menos*tempo*terá*para*se*concentrar.* ! Seja/Profissional/ Não*se*apaixone*por*suas*idéias.*Haja*como*se*você*estivesse*numa*troca*de*casais*até*que* acabe*seu*tempo.* ! Adie/o/julgamento* Não*existem*más*idéias*nesta*etapa.*Haverá*tempo*mais*tarde*para*julgá=las.* ! Estimule/idéias/radicais* Quase*sempre*são*as*idéias*radicais*que*geram*inovação.*É*sempre*mais*fácil*trazer*idéias*à* realidade*mais*tarde!*Ao*criar*metas*impossíveis,*mais*provavelmente*você*irá*pensar*em* soluções*inesperadas.* ! Construa/sobre/as/idéias/dos/outros* Pense*em*“e…”*em*vez*de*‘mas…’.*Se*você*não*gosta*de*alguma*idéia,*desafie*a*si*mesmo*a* construir*algo*sobre*essa*idéia*e*torná=la*melhor.* ! Seja/visual/* Tente*recrutar*o*lado*lógico*e*o*lado*criativo*do*cérebro.* ! Somente/uma/conversa/por/vez* Permita*que*idéias*sejam*ouvidas*para*que*outras*idéias*se*criem*sobre*elas.* ! Almeje/quantidade* Estabeleça*um*objetivo*alto*para*o*número*de*idéias*a*serem*criadas*no*brainstorm*e* ultrapasse=o!*Lembre=se*de*que*não*há*necessidade*de*explicar*exaustivamente*a*idéia*já* que*ninguém*está*julgando.*Idéias*devem*fluir*rapidamente.
  151. 151. Exercício*10*:*Brainstorm 1/–/Escreva/ou/desenhe/sozinho/ideias/que/possam/tornar/alguns/ Exemplo:* momentos/do/seu/cenário/mágicos./ ! 2/–/Rabisque/3/idéias/para/cada/momento./ ! 3/-//Não/critique/ou/avalie/as/idéias./Pire/como/se/você/fosse/um/ mágico./ ! 4/–/Compartilhe/com/um/amigo/e/criem/novas/idéias/a/partir/das/que/ vocês/já/criaram./ ! 5/–/Veja/as/ideias/que/foram/criadas/e/priorize/as/que/serve/melhor/ para/que/o/usuário/alcance/seus/objetivos./ ! 6/–/Redesenhe/o/cenário/para/incorporar/estas/ideias./
  152. 152. Exercício*11:* Design*Framework 1/-/Identifique/cada/interação/com/o/produto/em/seu/cenários.* = Pegue*seu*cenário*e*marque*todas*as*interações*com*o*produto* = Faça*um*quadrado*para*cada*interação*e*escreva*um*título*que*descreva*a*atividade*principal.** = Numere*para*não*perder*a*sequência* ! 2-/Identifique/e/especifique/necessidades/ = Agora*revise*seu*cenário*procurando*por*necessidades*dos*usuários.Escreva*as*necessidades*para*cada* quadrado.*Adicione*mais*interações*se*necessário.* ! = As*necessidades*geralmente*são*de*três*tipos:* **********=*Funcionais*(*o*que*as*pessoas*precisam*fazer)* **********=*Dados*(*o*que*as*pessoas*precisam*saber)* **********=*Experimentais*(Como*elas*devem*se*sentir*com*esta**experiência.*Procure*por*adjetivos*nas*personas)* ! 3/-/Mapeie/a/navegação/pelo/sistema/ ! =*Identifique*os*caminhos*que*as*pessoas*irão*percorrer*para*alcançar*seus*objetivos.** =*Use*numeração*e*conectores*entre*os*quadrados*pra*isso.* ! !
  153. 153. Sketching* =*Variedade*rápida*de*idéias* Exemplo:* =*Exploração*de*Alternativas** =*Melhores*Discussões*–*Visual*Thinking* ! ! =*Carregue*um*caderninho*de*rabiscos* =*Tenha*um*kit*básico*de*ferramentas* =*Não*confunda*com*protótipo*de*papel* =*Aprenda*a*desenhar
  154. 154. Exercício*12:* Rabiscar*idéias*=*Sketching Desenhe/as/telas/pra/ilustrar/como/irá/funcionar/seu/produto./ ! =****Provavelmente*você*terá*que*transformar*cada*quadrado*do*seu* framework*em*uma*tela./ = Lembre*dos*princípios*de*navegação,*rotulação,*organização.* = Altere*o*Framework*se*necessário.* = Não*pense*detalhes*visuais,*cores*e*formas*definitivas.
  155. 155. ?
  156. 156. Planejando*uma*apresentação*de*design* ! •Chamar*as*pessoas*certas* ! •Regular*o*tempo* ! •Preparar*o*terreno*–*deixe*claro*qual*o*tipo*de*feedback*que*precisa.* ! •Concentre*–se*em*idéias*gerais*e*em*porque*aquilo*é*bom*para*o*negócio*e*para*o* usuário.* ! •Use*os*cenários*como*suporte*para*explicar*a*experiência*de*navegação.* ! ! ! •Registre*as*decisões*altere*o*framework*e*repita*o*processo*o*quanto*for*necessário.*
  157. 157. Como*criticar* ! = Comece*pelas*coisas*que*estão* funcionando*bem.* ! = Concentre=se*nos*objetivos*do*usuário.* ! = Tente*entender*antes*de*questionar.* ! = Pergunte*sempre*porque.*E*não*tome* decisões*imediatas.* ! = Não*faça*afirmações*auto=referenciais.*O* que*importa*são*as*personas. ! Problemas/mais/comuns/com/críticas:/ ! •Foco/em/mudanças/e/não/em/soluções.// •Levar/pro/lado/pessoal./ •Discutir/problemas/em/níveis/errados./ •Ciclos/de/aprovações/sem/fim./
  158. 158. Como*ganhar*um*debate* E*como*perder:* “Tá$muito$poluído,$muito$carregado”$ “Tá$meio$frio,$vago,$muito$básico,$muito$simples”$ “Tem$muita$rolagem”$ “Não$tem$a$nossa$cara$ainda”$ “Mas$o$facebook,$amazon,$google,$faz$de$outro$jeito”$ “Tem$que$ser$mais$inovador$mais$atrativo”$ “Isso$aqui$tem$que$gritar$na$cara$das$pessoas”$ “Não$sei,$mas$vou$saber$que$é$quando$eu$ver”$
  159. 159. E*depois*?* • Iteração,*agilidade*e*coração*aberto.* ! • A*importância*dos*talentos*pessoais.* ! • Modifique*seu*framework.* ! •****Repita*depois*com*testes*com*usuários.* ! •***Depois*com*dados*de*navegação.* ! •***Depois*com*novas*funcionalidades.* ! •***E*assim*vai...
  160. 160. Exercício13:* *Design*review* 1*=*É*a*hora*de*descer*a*lenha.*Cada*um*faz*suas*considerações*de*acordo* com*o*que*acabamos*de*ver.* ! 2*=**Depois*listar*as*considerações*e*priorizá=las.* ! 3*–*Revisar*o*framework*e*os*sketches.
  161. 161. ?
  162. 162. Introdução*à** Entregas) "A*perfeição*é*feita*de*pequenos*detalhes*=*não*é*apenas*um*detalhe."*= Um*pouco*de*história*e*princípios*teóricos *Michelangelo
  163. 163. Lean*UX** ! Documentação*evolutiva*(e*controle*de*versão),*iteratividade,*alta* competência,*times*e**escopos*reduzidos.*
  164. 164. Especificação Funcional É*um*documento*que*detalha*todo*o*comportamento*do* site,*suas*funcionalidades*e*como*ele*responde*as* interações*dos*usuários.* ! Usado*principalmente*em*grandes*organizações*com* processo*em*cascata*☹* *
  165. 165. Mapa do Site É*uma*representação*visual*da*estrutura*do*site.* Este*documento*indica*como*o*conteúdo*e*a* organização*estão*organizados*e* consequentemente,*como*os*usuários*irão*navegar* no*sistema.* 
 !
  166. 166. Fluxogramas É*uma*representação*visual**das*etapas*que*o* usuário*passa*para*realizar*as*tarefas*mais* complexas*do*site.** ! Serve*para*representar*um*processo* complexo*e*não*uma*estrutura*hierárquica.* Geralmente*utilizado*em*projetos*com* conteúdo*gerado*pelo*usuário*ou*em*que* requerem*um*esforço*relativamente* complexo*de*ser*comunicado.* 
 !
  167. 167. Inventário de Conteúdo Lista*detalhada*de*tudo*o*que*deverá*compor*o* site*/*sistema*em*ordem*de*importância*e* diferenças*de*funcionalidade.* ! É*o*principal*meio*para*entender* completamente*uma*estrutura*de*conteúdo*e* documentar*suas*variações*e*derivações*sem* deixar*nada*de*lado.* 
 !
  168. 168. Wireframes É*um*documento*que*tem*a*função*de*estruturar*o* conteúdo*e**as*funcionalidades*de*um*projeto.** ! A*idéia*é*poder*visualizar*a*hierarquia*e*a* organização*do*conteúdo*e*das*funcionalidades*do* site*ou*sistema*que*está*sendo*construído.** ! É*em*preto*e*branco*mesmo.*O*objetivo*é* estruturar*o*conteúdo*e*funcionalidades*sem* interferência*do*Layout*que*vai*tratar* posteriormente*de*tipografia,*imagens,*cores*entre* outros*recursos*visuais.* 
 !
  169. 169. Quem*é*que*usa? Arquitetos)de)Informação;)que*mostram*e*validam*uns*com*os* outros*o*futuro*site,*além*de*usarem*na*forma*de*protótipo*em* testes*de*usabilidade.* ! Designers;)que*usam*como*base*gráfica*para*o*desenvolvimento*do* Layout.* ! Redatores;)que*preenchem*a*estrutura*com*o*conteúdo.* ! Desenvolvedores;)que*irão*fazer*tudo*funcionar.* ! Clientes;)que*validam*tudo*de*acordo*com*os*requisitos*do*projeto.* ! Usuários;)que*irão*usá=lo*como*protótipo*nos*testes*de*usabilidade.
  170. 170. Sketch*(baixa*fidelidade)
  171. 171. Protótipo*(Alta*fidelidade)
  172. 172. Protótipo*Navegável*–*Puta*alta*fidelidade
  173. 173. Wireflow
  174. 174. Baixa*fidelidade X Alta*fidelidade Vantagens) =*Rapidez* =*Custo* =*Liberdade*para*o*designer* =*Facilita*a*refação* ! Desvantagens) =*Pouca*credibilidade*(principalmente*com*clientes)* =*Maior*margem*de*erros* =*Difícil*de*ser*testado* =*Exige*mais*de*programadores*e*designers* =*Requer*desenvolvimento*em*conjunto.* =*Menos*intuitivo. Vantagens) =*Validação*consistente*e*persuasiva*com*o*cliente.* =*Facilita*a*compreensão*de*montagem*do*layout*e*da*programação* dos*aplicativos.* =*Possibilita*o*teste*com*usuários*antes*da*definição*do*layout.* ! Desvantagens) =*Requer*esforço*e*tempo,*o*que*pode*atrasar*o*processo*e*aumentar* custos* =*O*foco*pode*se*desviar**prematuramente**da**arquitetura*de* informação**para*a*interface*e*design*visual.* =*Pode*amarrar*o*trabalho*do*designer*
  175. 175. Dicas)) ! •Experimente*várias*ferramentas,*domine*uma.* ! •Consulte*padrões*e*bibliotecas*e*faça*uma*biblioteca*pessoal* ! •Aprenda*HTML*e*CSS*(e*quem*sabe*um*PHPzinho)* ! •Foco*nas*páginas*e*experiências*principais** ! •Pense*se*é*necessário*simular*ou*descrever*a*interação.* ! •Faça*o*principal*funcionar*direito* ! •Use*conteúdo*real* ! * •Bote*logo*no*ar* *
  176. 176. ?
  177. 177. Resumão*=*Teoria Princípios)Gerais) Organização) Navegação) Arquitetura)de)informação)) é*tentar*achar*o*lugar*e*o* momento*certo*de*exibir*uma* informação* Classificar* ***=*Sistemas*Exatos* ***=*Sistemas*Ambíguos* Tipos*de*navegação* ***=*Impulsivo*–*Navegação*pelo*conteúdo* ***=*Exploratório*–*Navegação*Global*e*de*suporte* ***=*Direto*–*Navegação*embutida*e*busca* ! ! Critérios**fundamentados*em:* =*Usuário** =*Contexto** =*Conteúdo ! ! Ordenar* **=*Social** **=*Lógico** **=*Empírico** **=*Referencial* **=*Pessoal Rotulação)) ! Tipos*de*Rótulos* =*Rótulos*Visuais* =Rótulos*textuais* ! Funções** =Poética* =*Retórica* =*Dialética* =*Lógica* =*Nominativa* =*Fática* =*Metalinguística* ! Dicas* =Estilo** =*Padrões* =*Folksonomia ! ! Dicas* =*Hierarquia*Visual* =*Consistência* =*Feedback* =*Padrões* =*Intuitividade*X*Eficiência* =*Continuidade** =*Sistemas*de*Navegação*embutidos*e*remotos* =*No*Interface* =*Separar*critérios*de*organização.* =*Completude* =*Usabilidade*
  178. 178. Resumão*=*Prática Pesquisa) ! Negócio) ! Entrevista*com*Stakeholders* Análise*Heurística* Inventário*de*Conteúdo* Benchmarking* Análise*de*Tráfego* Pesquisas,*Documentos*Internos*e* Pesquisas*Terceirizadas* ! ! Usuários) Questionários* Entrevistas*em*Contexto* Focus*Group* Etnografia*Virtual* Card*Sorting* Testes*de*Usabilidade* *=*Avaliação* *=*Exploração* *=*Comparativo* ! ! Interpretação) Personas* Cenários* Storyboards Ideação)(gerar)idéias)) ! Princípios*do*Design* Brainstorm* Sketching* Design*Framework* Design*reviews Implementação)(Entregas)) ! Lean*UX* Especificação*Funcional* Mapa*do*Site* Fluxogramas* Inventário*de*Conteúdo* Wireframes
  179. 179. Referências •Information*Architecture*for*the*World*Wide*Web*(Urso*Polar)*–*Peter*Morville*,*Louis*Rosenfeld* •Não*me*Faça*Pensar*–*Steve*Krug* •Ansiedade*de*Informação*–*Saul*Wurman* •O*Design*do*Dia*a*Dia*–*Donald*Norman* •Design*Emocional*–*Donald*Norman* •UX*Undercover*Design*–*Cennyd*Bowles* •Designing*Web*Usability*–*Jakob*Nielsen* •Designing*Web*Navigation*=*James*Kalbach* •Ambient*Findability*=*Peter*Morville* •Design*Para*a*Internet*=*Felipe*Memória* •Closing*statements:*Linguistics*and*Poetics,*Style*in*language*=*Roman*Jakobson** •IDEO*Toolkit*–*IDEO*(org.)*http://www.ideo.com/work/human=centered=design=toolkit/* •It's*not*rocket*Surgery*=**Steve*Krug* •Universal*Principles*Of*Design*–*William*Lidwell
  180. 180. Referências •Design*emocional** http://www.youtube.com/watch?v=RlQEoJaLQRA* •UX*Myths:* *http://uxmyths.com/* •Video*Acessibilidade*Web:* *http://www.youtube.com/watch?v=hFI4CuxQjSA* •Profissionais*,*livros*e*sites:** http://uxdesign.cc/how=to=keep=up=do=date=on=ux=design* •Ferramentas*de*prototipação,*pesquisa,*organização*de*dados,*web*analytics*e*outras:* •http://uxdesign.cc/ux=tools/* •Eventos* http://uxdesign.cc/ux=events/* •Interaction*2013* http://isa.ixda.org/2013/
  181. 181. kr.vinicius@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×