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

Intro

dução

Pesquisa

Ideação

Implementação

Princípios(Gerais

Organização

Rotulação

Navegação

Negócio

Usuários

Interpretação

Brainstorm

Design(Framework

Design(Reviews

Documentação

Resumo

Referências

Sábado Domingo

Sketch

UX( UI(

UX( UI(

User(eXperience User(Interface

UX( UI(

O(aumento(do(

conhecimento(é(

acompanhado(do(aumento(

da(ignorância.)

Jean)Fourastié

Arquitetura((

Do(grego:(Archétékton(

((αρχιτεκτονική()(

Arché(–(αρχι(M(Primeiro,(ou(principal((

Tékton(–(τεκτονική(M(Construção((

(

Arquitetura)de)Informação):)

Construção(da((ou(a(partir(da)(ideia(principal.

Informação((

Do(latim:(informationis((

Delinear,(conceber(idéia.

É(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”

Steve)Krug)e)Profetas)menores)–(

Agilidade(e(Contexto

Aristóteles)

Categorias))do(ser

Saul)Wurman))

Aplicações(no(Mundo(físico(e(preocupação(

com(o(excesso(de(informação.

Morvile)e)Rosenfeld))

Urso(Polar(–(Aplicações(da(AI(na(

Internet

Jakob)Nielsen))

Tentativas(de(fórmulas(

empíricas(universais.

380O320)A.C. 1989 1999

1998

20001986

Donald)Norman)((

(Aplicações(em(

contextos(

empíricos(do(

mundo(físico.

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

M(Vídeo(

M(Aúdio(

M(Texto(

M(Gráficos(

M(Animações(

M(Imagens(

M(Aplicativos(

M(Links(

M(Aberto(ou(Restrito(

MPago(ou(grátis(

M(Especializado((

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(

M(Noticioso(

M(Burocrático(

M(Oficial(

M(Entretenimento(

M(Técnico(

M(Institucional(

M(Informativo(

M(Comercial(

M(Operacional(

M(Artístico(

M(Publicitário

Benefício)oferecido)

(Conteúdo,(serviço,(

funcionalidade)(

MNecessidades)do)Usuário

Objetivos)do)negócio

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

Agrupar(indivíduos(com(base(em(

características(comuns,(criar(classes.(

Classificar

•Alfabético(•Numérico(

•Cronológico(•Sequencial(•Geográfico(•Quantidade(•...

Sistemas(Exatos(

•Semelhanças,Diferenças(

•Qualidades(•Função,(Tarefa(•Assuntos(•PúblicoMAlvo(•Metáforas(

•Possibilidades(•Interesses(do(usuário(•...

Sistemas(ambíguos(

O)Lançamentos)

O)Drama))

O)Comédia)

O)Guerra)

O)Romance)

MLançamentos)

MBrasileiros)

M...

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

? ?

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

Rotulação

Rótulos)Visuais)

Economia(de(espaço((

Eficiência(de(uso((

Deixam(a(interface(mais(atrativa

Rótulos)textuais)

Intuitividade((

Facilidade(de(Aprendizagem((

Implementação(Rápida

VACA

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

Fática(–(Retorno((feedback)

Metalinguística((M(Informações((sobre(a(informação

Estilo(e(Linguagem(do(usuário.(((

(Cuidado(a(gramática,(nomenclatura(técnica(e(siglas.)

Consulte/Crie(Padrões(Consolidados.

Opinião MundoEsportes PolíticaCulturaEconomia Tecnologia Local)

((Filtro(Geográfico)

7 610 679 7 6

Sinônimos(ou(termos(

relacionados

Repetições(em(10(exemplos

Em(caso(específicos(a(Folksonomia(pode(ajudar.

Navegar(é(alcançar(um(destino(

(objetivo,(informação)(

(que(está(fora(do alcance((fisico(ou(cognitivo)(do(

ponto(de(partida.(

Navegação

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

Para(navegar(são(necessários:

Em(outras(palavras

Quais)são)meus)

recursos)

Onde)Estou?

De)onde)vim?

Pra)onde)vou?

Pra)onde)posso)ir?

Super)Vegetariano

Interesses(de(navegação

Exploratório(

Um(ou(vários(objetivos(

préMdefinidos(com(

abertura(a(novos(

objetivos.

Impulsivo((ou(inércia)(

Ausência(de(objetivos(préM

definidos.(

Direto(

Objetivo(definido(sem(

abertura(para(outros(

objetivos.(

Navegação)embutida)para)

intenção)exploratória)

Navegação)remota)e)busca)

para)intenção)direta

Distribuição)de)conteúdo)para)

navegação)por)impulso.

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

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

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

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.

Lista detalhada de tudo o que deverá compor o site / sistema em ordem de importância ediferenças de funcionalidade.

> Levantamento de Dados e Inventário metadados

Identificação Numérica Nome da página Descrição

Tipo de Arquivo (formato)

Tipo deConteúdo Tópico/Tema Público-alvo

Chamadas 0 Home Página principal do site Texto Navegação internas Geral

1 Sobre Apresentação institucional Texto e imagem Institucional Apresentação Geral, anunciantes

Apresentação, 1.1 Histórico História do programa Texto Institucional história Geral, anunciantes

Apresentação, 1.2 Equipe Dados dos integrantes Texto e imagens Institucional quem somos Geral, anunciantes

1.3 Café Colombo na Imprensa Clipping Texto e imagens Noticioso Repercussão Geral, anunciantes

1.3.1 ... Notícia do Clipping Notícia publicada Texto e imagens Noticioso Repercussão Geral, anunciantes

Licença Creative Reprodução do 1.4 Direitos Autorais Commons Texto Informativo conteúdo Geral, blogueiros

Texto, imagem e 2 Programas Arquivo dos programas á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

Inventário*de*Conteúdo

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

Processos*e*instituições*;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*?

Notícias,*tendências*e*tecnologias*;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*?*

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

Atividades*e*pontos*de*contato*;*Que*atividades*e*situações*estão*relacionados*com*o*propósito*do*nosso*produto*?*

Exercício*4:**EcossistemaConversem(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(.

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

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*

Etnografia*Virtual

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

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

Testes de Usabilidade

/ÁgilTeste de Usabilidade

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:

Dados(demográficos**Sexo,*idade,*etnia,escolaridade,*estado*civil,*classe*social,*etc.*!Pontos(críticos(Quais*são*as*principais*dificuldades*do*usuário*em*relação*ao*seu*produto?*!Requisitos(Técnicos((Dispositivos*de*acesso,*tipo*de*conexão*a*internet,*sites*mais*utilizados…etc(!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*entrecada*persona*e*a*torna*mais*real.**!Uma(foto(*Também*deve*ser*de*acordo*com*o*perfil*da*persona.*Evitar*fotos*de*pessoas*conhecidas.*

Objetivos(((Práticos*;*O*que*quer,*porque*quer.*!Experimentais*;*Como*quer*se*sentir.**

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

Modelo(mental(((Uma*crença*geral*sobre*como*as*coisas*funcionam*em*algumas*situações*e*motivação*para*concluir*uma*tarefa.

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

Calma*lá.*!Confira*os*riscos*de*fazer**uma*pesquisa*e*sair*projetando*direto*com*base*no*que*escutou*e*anotou.*

E*agora?*Já*dá*pra*sair*desenhando?

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

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

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

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

Dicas*para*bons*Cenários

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.

Lista detalhada de tudo o que deverá compor o site / sistema em ordem de importância ediferenças de funcionalidade.

> Levantamento de Dados e Inventário metadados

Identificação Numérica Nome da página Descrição

Tipo de Arquivo (formato)

Tipo deConteúdo Tópico/Tema Público-alvo

Chamadas 0 Home Página principal do site Texto Navegação internas Geral

1 Sobre Apresentação institucional Texto e imagem Institucional Apresentação Geral, anunciantes

Apresentação, 1.1 Histórico História do programa Texto Institucional história Geral, anunciantes

Apresentação, 1.2 Equipe Dados dos integrantes Texto e imagens Institucional quem somos Geral, anunciantes

1.3 Café Colombo na Imprensa Clipping Texto e imagens Noticioso Repercussão Geral, anunciantes

1.3.1 ... Notícia do Clipping Notícia publicada Texto e imagens Noticioso Repercussão Geral, anunciantes

Licença Creative Reprodução do 1.4 Direitos Autorais Commons Texto Informativo conteúdo Geral, blogueiros

Texto, imagem e 2 Programas Arquivo dos programas á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

Inventário*de*Conteúdo

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

Processos*e*instituições*;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*?

Notícias,*tendências*e*tecnologias*;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*?*

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

Atividades*e*pontos*de*contato*;*Que*atividades*e*situações*estão*relacionados*com*o*propósito*do*nosso*produto*?*

Exercício*4:**EcossistemaConversem(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(.

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

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*

Etnografia*Virtual

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

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

Testes de Usabilidade

/ÁgilTeste de Usabilidade

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:

Dados(demográficos**Sexo,*idade,*etnia,escolaridade,*estado*civil,*classe*social,*etc.*!Pontos(críticos(

Quais*são*as*principais*dificuldades*do*usuário*em*relação*ao*seu*produto?*!Requisitos(Técnicos((

Dispositivos*de*acesso,*tipo*de*conexão*a*internet,*sites*mais*utilizados…etc(!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*entrecada*persona*e*a*torna*mais*real.**!Uma(foto(*Também*deve*ser*de*acordo*com*o*perfil*da*persona.*Evitar*fotos*de*pessoas*conhecidas.*

Objetivos(((

Práticos*;*O*que*quer,*porque*quer.*!Experimentais*;*Como*quer*se*sentir.**

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

Modelo(mental(((

Uma*crença*geral*sobre*como*as*coisas*funcionam*em*algumas*situações*e*motivação*para*concluir*uma*tarefa.

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

Calma*lá.*!Confira*os*riscos*de*fazer**uma*pesquisa*e*sair*projetando*direto*com*base*no*que*escutou*e*anotou.*

E*agora?*Já*dá*pra*sair*desenhando?

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

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

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

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

Dicas*para*bons*Cenários

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

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

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.

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

Exemplo:*1/–/Escreva/ou/desenhe/sozinho/ideias/que/possam/tornar/alguns/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*

Exemplo:*=*Variedade*rápida*de*idéias*=*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.*

!!

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

Como*ganhar*um*debate*

“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*como*perder:*

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

E*depois*?*

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.

Exercício13:**Design*review*

?

Introdução*à**

Entregas)Um*pouco*de*história*e*princípios*teóricos"A*perfeição*é*feita*de*pequenos*detalhes*=*não*é*apenas*um*detalhe."*=*Michelangelo

Lean*UX**!Documentação*evolutiva*(e*controle*de*versão),*iteratividade,*alta*competência,*times*e**escopos*reduzidos.*

É*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*☹**

Especificação Funcional

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

Mapa do Site

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

Fluxogramas

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

Inventário de

Conteúdo

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

Wireframes

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.

Quem*é*que*usa?

Sketch*(baixa*fidelidade)

Protótipo*(Alta*fidelidade)

Protótipo*Navegável*–*Puta*alta*fidelidade

Wireflow

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*

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.

Baixa*fidelidade X Alta*fidelidade

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*

* *

?

Navegação)!Tipos*de*navegação****=*Impulsivo*–*Navegação*pelo*conteúdo****=*Exploratório*–*Navegação*Global*e*de*suporte****=*Direto*–*Navegação*embutida*e*busca*!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*=*Teoria

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

Organização)!Classificar****=*Sistemas*Exatos****=*Sistemas*Ambíguos*!Ordenar***=*Social****=*Lógico****=*Empírico****=*Referencial***=*Pessoal

Princípios)Gerais)!Arquitetura)de)informação))

é*tentar*achar*o*lugar*e*o*momento*certo*de*exibir*uma*informação*!Critérios**fundamentados*em:*=*Usuário**=*Contexto**=*Conteúdo

Implementação)(Entregas))!Lean*UX*Especificação*Funcional*Mapa*do*Site*Fluxogramas*Inventário*de*Conteúdo*Wireframes

Ideação)(gerar)idéias))!Princípios*do*Design*Brainstorm*Sketching*Design*Framework*Design*reviews

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

Resumão*=*Prática

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