SlideShare une entreprise Scribd logo
1  sur  184
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuárioBruno Biagioni Neto
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframeFabricio Teixeira
 
Pensando em UX / UI com o material design
Pensando em UX / UI com o material designPensando em UX / UI com o material design
Pensando em UX / UI com o material designThiago Marques
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioRenato Melo
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegaçãopospipoca
 
A lógica por trás de UX Writing
A lógica por trás de UX WritingA lógica por trás de UX Writing
A lógica por trás de UX WritingMergo
 
The history of ux by bara' harb
The history of ux by bara' harb The history of ux by bara' harb
The history of ux by bara' harb BaraaHarb
 
A Workshop on UX Design and Storyboarding
A Workshop on UX Design and StoryboardingA Workshop on UX Design and Storyboarding
A Workshop on UX Design and StoryboardingKevin Hoxie
 
Heurísticas de Jakob Nielsen
Heurísticas de Jakob NielsenHeurísticas de Jakob Nielsen
Heurísticas de Jakob NielsenGraciane Xavier
 
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...Claudio Diniz - Designer Gráfico
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Renato Melo
 
Usabilidade, IHC - Definições
Usabilidade, IHC - DefiniçõesUsabilidade, IHC - Definições
Usabilidade, IHC - DefiniçõesLuiz Agner
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory sessionSooraj P R
 
Arquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e ExercíciosArquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e ExercíciosUTFPR
 
Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisMini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisJane Vita
 
Evangelizing User Experience Design
Evangelizing User Experience DesignEvangelizing User Experience Design
Evangelizing User Experience DesignDustin DiTommaso
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?Marconi Pacheco
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeMadhuri Garg
 

Tendances (20)

Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframe
 
Pensando em UX / UI com o material design
Pensando em UX / UI com o material designPensando em UX / UI com o material design
Pensando em UX / UI com o material design
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do Usuário
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegação
 
A lógica por trás de UX Writing
A lógica por trás de UX WritingA lógica por trás de UX Writing
A lógica por trás de UX Writing
 
The history of ux by bara' harb
The history of ux by bara' harb The history of ux by bara' harb
The history of ux by bara' harb
 
A Workshop on UX Design and Storyboarding
A Workshop on UX Design and StoryboardingA Workshop on UX Design and Storyboarding
A Workshop on UX Design and Storyboarding
 
Sistemas da Arquitetura da Informação
Sistemas da Arquitetura da InformaçãoSistemas da Arquitetura da Informação
Sistemas da Arquitetura da Informação
 
Heurísticas de Jakob Nielsen
Heurísticas de Jakob NielsenHeurísticas de Jakob Nielsen
Heurísticas de Jakob Nielsen
 
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07
 
Usabilidade, IHC - Definições
Usabilidade, IHC - DefiniçõesUsabilidade, IHC - Definições
Usabilidade, IHC - Definições
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 
Arquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e ExercíciosArquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e Exercícios
 
Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisMini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos Móveis
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
Evangelizing User Experience Design
Evangelizing User Experience DesignEvangelizing User Experience Design
Evangelizing User Experience Design
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
 

En vedette

Design Livre e Colaborativo PUCPR 2012
Design Livre e Colaborativo PUCPR 2012Design Livre e Colaborativo PUCPR 2012
Design Livre e Colaborativo PUCPR 2012Instituto Faber-Ludens
 
Workshop Design para Dispositivos Móveis
Workshop Design para Dispositivos MóveisWorkshop Design para Dispositivos Móveis
Workshop Design para Dispositivos MóveisInstituto Faber-Ludens
 
Design Livre e Colaborativo INTERCON 2010
Design Livre e Colaborativo INTERCON 2010Design Livre e Colaborativo INTERCON 2010
Design Livre e Colaborativo INTERCON 2010Instituto Faber-Ludens
 
Ecologia de Interação: Metadesign aplicado para a construção de taxonomias e ...
Ecologia de Interação: Metadesign aplicado para a construção de taxonomias e ...Ecologia de Interação: Metadesign aplicado para a construção de taxonomias e ...
Ecologia de Interação: Metadesign aplicado para a construção de taxonomias e ...Instituto Faber-Ludens
 
Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013Instituto Faber-Ludens
 
Design Livre e Colaborativo INTERCON 2010
Design Livre e Colaborativo INTERCON 2010Design Livre e Colaborativo INTERCON 2010
Design Livre e Colaborativo INTERCON 2010Instituto Faber-Ludens
 
Sistema de Organizacão
Sistema de OrganizacãoSistema de Organizacão
Sistema de OrganizacãoJumpEducation
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisInstituto Faber-Ludens
 
Sistemas de organização e rotulação
Sistemas de organização e rotulaçãoSistemas de organização e rotulação
Sistemas de organização e rotulaçãoInstituto Faber-Ludens
 

En vedette (14)

Por um Design Livre - CIRS
Por um Design Livre - CIRSPor um Design Livre - CIRS
Por um Design Livre - CIRS
 
Design Livre e Colaborativo PUCPR 2012
Design Livre e Colaborativo PUCPR 2012Design Livre e Colaborativo PUCPR 2012
Design Livre e Colaborativo PUCPR 2012
 
Curso Avaliação de Interfaces
Curso Avaliação de InterfacesCurso Avaliação de Interfaces
Curso Avaliação de Interfaces
 
Por um Design Livre - EDTED 2012
Por um Design Livre - EDTED 2012Por um Design Livre - EDTED 2012
Por um Design Livre - EDTED 2012
 
Workshop Design para Dispositivos Móveis
Workshop Design para Dispositivos MóveisWorkshop Design para Dispositivos Móveis
Workshop Design para Dispositivos Móveis
 
Design Livre e Colaborativo INTERCON 2010
Design Livre e Colaborativo INTERCON 2010Design Livre e Colaborativo INTERCON 2010
Design Livre e Colaborativo INTERCON 2010
 
Por um Design Livre - CICI 2011
Por um Design Livre - CICI 2011Por um Design Livre - CICI 2011
Por um Design Livre - CICI 2011
 
Ecologia de Interação: Metadesign aplicado para a construção de taxonomias e ...
Ecologia de Interação: Metadesign aplicado para a construção de taxonomias e ...Ecologia de Interação: Metadesign aplicado para a construção de taxonomias e ...
Ecologia de Interação: Metadesign aplicado para a construção de taxonomias e ...
 
Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013
 
Passado, Presente e Futuro da Web
Passado, Presente e Futuro da WebPassado, Presente e Futuro da Web
Passado, Presente e Futuro da Web
 
Design Livre e Colaborativo INTERCON 2010
Design Livre e Colaborativo INTERCON 2010Design Livre e Colaborativo INTERCON 2010
Design Livre e Colaborativo INTERCON 2010
 
Sistema de Organizacão
Sistema de OrganizacãoSistema de Organizacão
Sistema de Organizacão
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
 
Sistemas de organização e rotulação
Sistemas de organização e rotulaçãoSistemas de organização e rotulação
Sistemas de organização e rotulação
 

Similaire à Arquitetura da Informação na Movile

Comunicação Digital
Comunicação DigitalComunicação Digital
Comunicação Digitalguest0d63f7
 
Publicidade em Espacos Virtuais: a computacao grafica como recurso criativo e...
Publicidade em Espacos Virtuais: a computacao grafica como recurso criativo e...Publicidade em Espacos Virtuais: a computacao grafica como recurso criativo e...
Publicidade em Espacos Virtuais: a computacao grafica como recurso criativo e...Eduardo Zilles Borba
 
Documento final atividade integradora desenvolvimento 10 01 2015
Documento final   atividade integradora desenvolvimento 10 01 2015Documento final   atividade integradora desenvolvimento 10 01 2015
Documento final atividade integradora desenvolvimento 10 01 2015inmidias
 
Pensando (e fazendo) software com design thinking
Pensando (e fazendo) software com design thinkingPensando (e fazendo) software com design thinking
Pensando (e fazendo) software com design thinkingUTFPR
 
Explicando arquitetura de informação...
Explicando arquitetura de informação...Explicando arquitetura de informação...
Explicando arquitetura de informação...Elisa Volpato
 
Quero trabalhar com visualização de dados no Brasil: #comofaz?
Quero trabalhar com visualização de dados no Brasil: #comofaz?Quero trabalhar com visualização de dados no Brasil: #comofaz?
Quero trabalhar com visualização de dados no Brasil: #comofaz?Rodrigo Medeiros
 
Rio Info 2009 - Comunicação e Informação Digital - Dra. Cosette Castro
Rio Info 2009 - Comunicação e Informação Digital - Dra. Cosette CastroRio Info 2009 - Comunicação e Informação Digital - Dra. Cosette Castro
Rio Info 2009 - Comunicação e Informação Digital - Dra. Cosette CastroRio Info
 
UXconf 2017 - Review
UXconf 2017 - ReviewUXconf 2017 - Review
UXconf 2017 - ReviewRafael Burity
 
Visualização de dados e da informação na democratização e apropriação da info...
Visualização de dados e da informação na democratização e apropriação da info...Visualização de dados e da informação na democratização e apropriação da info...
Visualização de dados e da informação na democratização e apropriação da info...Simposio Internacional Network Science
 
Flávia Guitarrara - Portfólio Acadêmico
Flávia Guitarrara - Portfólio AcadêmicoFlávia Guitarrara - Portfólio Acadêmico
Flávia Guitarrara - Portfólio AcadêmicoFlávia Guitarrara
 
O Arquiteto da Informação no Brasil e no Exterior, Desafios & Perspectivas - ...
O Arquiteto da Informação no Brasil e no Exterior, Desafios & Perspectivas - ...O Arquiteto da Informação no Brasil e no Exterior, Desafios & Perspectivas - ...
O Arquiteto da Informação no Brasil e no Exterior, Desafios & Perspectivas - ...Impacta Eventos
 
Palestra fit 14mar2013
Palestra fit 14mar2013Palestra fit 14mar2013
Palestra fit 14mar2013Thais Campas
 
Design de mídias interativas (Aula 02)
Design de mídias interativas (Aula 02)Design de mídias interativas (Aula 02)
Design de mídias interativas (Aula 02)Raphael Araujo
 
Digital Group Portfolio
Digital Group PortfolioDigital Group Portfolio
Digital Group PortfolioDigital Group
 

Similaire à Arquitetura da Informação na Movile (20)

Comunicação Digital
Comunicação DigitalComunicação Digital
Comunicação Digital
 
Publicidade em Espacos Virtuais: a computacao grafica como recurso criativo e...
Publicidade em Espacos Virtuais: a computacao grafica como recurso criativo e...Publicidade em Espacos Virtuais: a computacao grafica como recurso criativo e...
Publicidade em Espacos Virtuais: a computacao grafica como recurso criativo e...
 
Assessoria de imprensa 2 0 - workshop tubarão
Assessoria de imprensa 2 0 - workshop tubarãoAssessoria de imprensa 2 0 - workshop tubarão
Assessoria de imprensa 2 0 - workshop tubarão
 
Agências Digitais
Agências DigitaisAgências Digitais
Agências Digitais
 
Marketing digital aula introdutória
Marketing digital   aula introdutóriaMarketing digital   aula introdutória
Marketing digital aula introdutória
 
Documento final atividade integradora desenvolvimento 10 01 2015
Documento final   atividade integradora desenvolvimento 10 01 2015Documento final   atividade integradora desenvolvimento 10 01 2015
Documento final atividade integradora desenvolvimento 10 01 2015
 
Pensando (e fazendo) software com design thinking
Pensando (e fazendo) software com design thinkingPensando (e fazendo) software com design thinking
Pensando (e fazendo) software com design thinking
 
Explicando arquitetura de informação...
Explicando arquitetura de informação...Explicando arquitetura de informação...
Explicando arquitetura de informação...
 
Quero trabalhar com visualização de dados no Brasil: #comofaz?
Quero trabalhar com visualização de dados no Brasil: #comofaz?Quero trabalhar com visualização de dados no Brasil: #comofaz?
Quero trabalhar com visualização de dados no Brasil: #comofaz?
 
Rio Info 2009 - Comunicação e Informação Digital - Dra. Cosette Castro
Rio Info 2009 - Comunicação e Informação Digital - Dra. Cosette CastroRio Info 2009 - Comunicação e Informação Digital - Dra. Cosette Castro
Rio Info 2009 - Comunicação e Informação Digital - Dra. Cosette Castro
 
UXconf 2017 - Review
UXconf 2017 - ReviewUXconf 2017 - Review
UXconf 2017 - Review
 
Visualização de dados e da informação na democratização e apropriação da info...
Visualização de dados e da informação na democratização e apropriação da info...Visualização de dados e da informação na democratização e apropriação da info...
Visualização de dados e da informação na democratização e apropriação da info...
 
Flávia Guitarrara - Portfólio Acadêmico
Flávia Guitarrara - Portfólio AcadêmicoFlávia Guitarrara - Portfólio Acadêmico
Flávia Guitarrara - Portfólio Acadêmico
 
O Arquiteto da Informação no Brasil e no Exterior, Desafios & Perspectivas - ...
O Arquiteto da Informação no Brasil e no Exterior, Desafios & Perspectivas - ...O Arquiteto da Informação no Brasil e no Exterior, Desafios & Perspectivas - ...
O Arquiteto da Informação no Brasil e no Exterior, Desafios & Perspectivas - ...
 
Palestra fit 14mar2013
Palestra fit 14mar2013Palestra fit 14mar2013
Palestra fit 14mar2013
 
cv_hd_2015_01
cv_hd_2015_01cv_hd_2015_01
cv_hd_2015_01
 
Design de mídias interativas (Aula 02)
Design de mídias interativas (Aula 02)Design de mídias interativas (Aula 02)
Design de mídias interativas (Aula 02)
 
Digital Group Portfolio
Digital Group PortfolioDigital Group Portfolio
Digital Group Portfolio
 
Apresentação cv
Apresentação cvApresentação cv
Apresentação cv
 
Fitness, Bem-estar e Internet - IHRSA
Fitness, Bem-estar e Internet - IHRSAFitness, Bem-estar e Internet - IHRSA
Fitness, Bem-estar e Internet - IHRSA
 

Plus de Instituto Faber-Ludens

Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos MóveisOficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos MóveisInstituto Faber-Ludens
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisInstituto Faber-Ludens
 
Curso Recomendações de Usabilidade - 29/07/2011
Curso Recomendações de Usabilidade - 29/07/2011Curso Recomendações de Usabilidade - 29/07/2011
Curso Recomendações de Usabilidade - 29/07/2011Instituto Faber-Ludens
 

Plus de Instituto Faber-Ludens (7)

7Masters Acessibilidade Por Que Sim
7Masters Acessibilidade Por Que Sim7Masters Acessibilidade Por Que Sim
7Masters Acessibilidade Por Que Sim
 
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos MóveisOficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
 
Camiseta 2012 by Pianofuzz
Camiseta 2012 by PianofuzzCamiseta 2012 by Pianofuzz
Camiseta 2012 by Pianofuzz
 
Apresentação Institucional 2011-2
Apresentação Institucional 2011-2Apresentação Institucional 2011-2
Apresentação Institucional 2011-2
 
Instruções Projeto Final
Instruções Projeto FinalInstruções Projeto Final
Instruções Projeto Final
 
Curso Recomendações de Usabilidade - 29/07/2011
Curso Recomendações de Usabilidade - 29/07/2011Curso Recomendações de Usabilidade - 29/07/2011
Curso Recomendações de Usabilidade - 29/07/2011
 

Arquitetura da Informação na Movile