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.((

!

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.
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
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.
Arché(–(αρχι(M(Primeiro,(ou(principal((
Tékton(–(τεκτονική(M(Construção((
(
Arquitetura)de)Informação):)
Construção(da((ou(a(partir(da)(ideia(principal.
É(uma(disciplina)cuja(
finalidade)é:(
!
O)design)(projeto,(não(“desenho”)((
estrutural((não(visual)((
de)ambientes)(ou(sistemas)(
de)informação)compartilhada.)
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,(“separar”
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.
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(

!
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(corpo(unificado,(
que(desempenha(uma(
função.(
(
Organizar(:(
Identificar(partes(que(desempenham(diferentes(funções(em(
um(todo(unificado.
Em(outras(palavras:((Classificar)+)Priorizar
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)
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(
•...
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.(
Safra(de(2013(
R$(5,60
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
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

7
Cultura

7
Opinião

7
Tecnologia

6
Política

6

6

Mundo

Local)
((Filtro(Geográfico)
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(
ponto(de(partida.(
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.
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(
abertura(a(novos(
objetivos.

Ausência(de(objetivos(préM
definidos.(

Objetivo(definido(sem(
abertura(para(outros(
objetivos.(
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
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(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.
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*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*
;*...
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)*



!
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.*

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.*



!
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.

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 ...
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.(
*
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.*

!
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*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:**?????*

!

!
Agora(Vamos(olhar(mais(de(cima
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.*
!
É*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.*
!
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.*

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....

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*?*
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*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.
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…)
E*quais*métodos*eu*devo*utilizar?
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*
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.**
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.*

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*
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.*
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*
Teste de
Usabilidade

/Ágil

Plano(de(testes


Recrutamento(

Aplicação

Análise

Relatório




(**)

1°Dia

2°Dia

3°Dia

4°Dia

5°Dia
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(:()²
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:*?????????????*
Interpretando(as(Pesquisas
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.
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.
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?
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.*
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.*
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.
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.
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.*
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.(
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.**

!
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.
?
Introdução*à**

Pesquisa(
m*pouco*de*história*e*princípios*teóricos
"É*um*erro*grave*teorizar*antes*de*ter*dados"*;*Arthur*Conan*Doyle
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*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*
;*...
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)*



!
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.*

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.*



!
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.

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 ...
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.(
*
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.*

!
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*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:**?????*

!

!
Agora(Vamos(olhar(mais(de(cima
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.*
!
É*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.*
!
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.*

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....

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*?*
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*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.
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…)
E*quais*métodos*eu*devo*utilizar?
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*
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.**
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.*

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*
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.*
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*
Teste de
Usabilidade

/Ágil

Plano(de(testes


Recrutamento(

Aplicação

Análise

Relatório




(**)

1°Dia

2°Dia

3°Dia

4°Dia

5°Dia
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(:()²
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:*?????????????*
Interpretando(as(Pesquisas
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.
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.
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?
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.*
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.*
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.
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.
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.*
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.(
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.**

!
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.
?
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
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
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.
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./
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.*

!

!
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
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.
?
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.*
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./
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”$
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...
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.
?
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
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*responde*as*
interações*dos*usuários.*

!

Usado*principalmente*em*grandes*organizações*com*
processo*em*cascata*☹*
*
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.*




!
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.*



!
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.*




!
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.*




!
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.
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*

!

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*
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*
*
?
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*
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
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
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/
kr.vinicius@gmail.com

Arquitetura da Informação na Movile