Este documento apresenta um curso introdutório sobre Arquitetura de Informação. O curso aborda definições, história, modelos conceituais, processos e técnicas da área ao longo de 5 dias. O instrutor também apresenta suas credenciais e experiência na área.

1. Introdução à
Arquitetura
de Informação
Um pouco de história e princípios teóricos

2. Agenda do Curso
Segunda. Terça. Quarta. Quinta. Sexta.
Introdução Sistemas da AI Processo e Técnicas Processo e Técnicas Encerramento
Parte 1 Parte 2
Definições Organização e Pesquisa Especificação Testes de
História Rotulação Usabilidade
Porque isso é importante
Modelos Conceituais Navegação e Busca Concepção Implementação Mundo da AI
UX Honeycomb

3. Sobre mim
Arquiteto de Informação na Gazeta do Povo – O principal
Jornal do Paraná.
Mais de 5 anos na labuta.
A maior parte deste tempo trabalhei na Agência Casa,
onde coordenei a equipe de UX e desenvolvi projetos de
estratégia de conteúdo e experiência do usuário, em
diversos tipos de plataformas como portais, aplicativos,
campanhas, redes sociais, blogs e Intranets para clientes
como Infoglobo, Tecnisa, HSBC, Ford, Johnson & Johnson,
Coca Cola, Unimed, o Boticário, Portobello, Buscapé,
Bematech, entre outros.
Meus projetos queridinhos são o redesenho do site do
Jornal Extra e do Globo, ambos no rio de Janeiro e dos
quais provavelmente vou falar bastante.
Jornalista formado na PUC-PR.
Casado, fui até Ushuaia de Uno, estudo marcenaria no
SENAI, montanhista vergonhosamente amador e gostaria
de morar no mato.
Filósofo e músico todo mundo é, e eu também.

4. Definição de Arquitetura de Informação – Livro Urso
1. O design estrutural de ambientes de informação compartilhada.
2. A combinação de sistemas de organização, rotulação, busca e
navegação em sites e intranets.
3. A arte e ciência de formatar produtos e experiências de
informação com base na usabilidade e “encontrabilidade”.
4. Uma disciplina emergente e comunidade focada na prática de
trazer princípios de design e arquitetura para o cenário virtual.

5. Mas o que eu Fazemos pesquisas para entender o usuário o cliente e os desenvolvedores,
criamos protótipos e estruturas de conteúdo para definir soluções que
digo pro meu intermediam as vontades, necessidades e limitações de cada um e depois
conferimos pra ver se tudo continua coerente durante o desenvolvimento do
chefe? processo.
Encontramos um ponto comum entre o que o cliente quer, o usuário precisa e o
que dá pra fazer. Comunicamos isso da melhor forma possível para clientes
e desenvolvedores para que os primeiros aprovem e os segundos executem da
melhor forma possível.
Defendemos a boa experiência do usuário através de uma boa arquitetura de
informação e design de interação.
Identificamos os meios mais eficientes de conectar os usuários com o que eles
precisam.
Definimos o melhor jeito de fazer um sistema que cumpra os objetivos do
cliente, satisfazendo necessidades do usuário.

6. Mas o que eu Sou um Arquiteto de Informação. Eu organizo montes
digo pra minha enormes de informação em grandes sites e intranets para as
Vó? pessoas encontrarem o que estão procurando. Pense como
se eu fosse um bibliotecário da internet.
Sou um Arquiteto de Informação. Eu ajudo minha empresa a
fazer com que seus clientes achem nossos produtos com
mais facilidade no site. Eu sou um tipo de vendedor on-line.
Eu aplico os conceitos de marketing, um por um, na internet.
Sou um Arquiteto de Informação. Sou quem resolve o
problema e excesso de informação do qual todo mundo
reclama.
Vó; eu trabalho com computador.

7. Definição interessante de dono desconhecido:
O designer de experiência do usuário é um ponto de
ligação. Não é um especialista em um assunto, um
doutor, ou qualquer tipo de ser mágico. Nós não
temos um conjunto de melhores práticas que podem
ser aplicadas automaticamente, nem temos todas as
respostas. Nossa maior habilidade deve ser a de que
sabemos como ouvir.

8. História breve da
Arquitetura de
Informação Aristóteles
Orador – Discurso - Auditório
Quem - O quê - Para quem?
Arquitetura
Do grego: αρχιτεκτονική
Arché – αρχι - Primeiro, ou principal
Tékton – τεκτονική - Construção
Informação
Do latim: informationis
Delinear, conceber idéia.

9. Richard Saul Wurman
http://www.wurman.com/rsw/
Usou pela primeira vez o termo “Arquitetura
de Informação” em 1976 no livro Ansiedade
de informação.
Arquiteto especialista em design gráfico.

10. Louis Rosenfeld e Peter Morville
rosenfeldmedia.com
semanticstudios.com
- Introduziram a Arquitetura de Informação na
internet.
- Fundadores da primeira empresa a empregar
conceitos de Arquitetura de informação no
design de websites na empresa Argus em 1994.
- Biblioteconomista e Cientista da Informação.

11. Por que isso é importante?
- Custo de encontrar a informação
- Custo de não encontrar informação
- O valor da educação
- O custo da construção
- O custo da manutenção
- Custo de treinamento
- O valor da marca
- Ganhar dinheiro, economizar dinheiro, melhorar a
satisfação de seus empregados ou consumidores, ou
só fazer do mundo um lugar melhor...

12. Porque os projetos dão errado:
1 Requerimentos mal definidos
2 Comunicação ruim entre cliente, usuário e desenvolvedores
3 Políticas de Stakeholders
http://spectrum.ieee.org/computing/software/why-software-fails/0

13. 50%
É a média do tempo gasto em refação nos projetos de TI.
http://spectrum.ieee.org/computing/software/why-software-fails/0

14. 100X
Mais caro fazer alterações em um projeto finalizado.
http://spectrum.ieee.org/computing/software/why-software-fails/0

15. 15%
Dos projetos são abandonados depois de
uma primeira entrega inadequada.
http://spectrum.ieee.org/computing/software/why-software-fails/0

16. U$ 1.000.000.000.000
(É um trilhão, não se preocupe em contar os zeros.)
Foram gastos em tecnologia de informação em 2010 por
governos e organizações em todo o mundo.
Para se ter uma idéia, foram gastos 1,5 trilhões na área
militar.
http://spectrum.ieee.org/computing/software/why-software-fails/0

17. 83%
É a média da melhoria dos KPI’s em projetos
com 10% do orçamento gasto em pesquisa
de usabilidade.
http://spectrum.ieee.org/computing/software/why-software-fails/0

18. Aumentamos KPI’s
- Conversões - Tráfego no site
- Cadastros - Contatos de novos clientes
- Vendas - Fatia de mercado
- Transações - Taxa de sucesso em tarefas
- Retenção - Produtividade
- Pageviews - Uso do sistema
- Visitas

19. Diminuímos KPI’s
- Custos do projeto
- Tempo de desenvolvimento do projeto
- Custo de treinamento
- Erros no uso do sistema
- Tempo do usuário
- Chamadas em help desk
- Refações
- Manutenção

20. Benefícios Subjetivos:
- Satisfação do consumidor
- Fidelização de clientes
- Satisfação do cliente e de investidores
- Percepção de valor da marca
- Satisfação de funcionários
- Clareza na comunicação
- Facilidade de aprendizagem do sistema
- Aumento da confiança do usuário
- Eficiência na gestão de informação

21. Os empréstimos de pessoa
física no Brasil em 2009
R$ 469 bi
R$ 0,5 bi (7%)
R$ 8,5 bi
R$ 4,4 bi (52%)

22. O Spread Bancário de pessoa física em 2009 chegou
a 26%.
Mas vamos ser realistas e calcular o lucro dos
empréstimos pela taxa mínima de juros do crédito
parcelado automático que é de 3,93%

23. 4,4 Bilhões de R$
X 3,9 %
R$175 milhões
lucro dos empréstimos feitos via ATM

24. Lembram que a média da melhoria dos KPI’s em
projetos de UX é de 83% ?
Vamos ser modestos, e imaginar que após um
processo de redesenho de 6 meses, o
número de empréstimo via ATM’s tenha
aumentado 5%.

25. 175 Milhões de R$
X 5 %
R$ 8,7 milhões
Aumento do lucro dos empréstimos feitos via
ATM depois do suposto redesenho.

26. Destes 8 milhões que o
cliente ganhou, quanto
será que podemos cobrar
pelo projeto ?

27. Fundamento da Arquitetura de Informação
Modelo Conceitual de UCD - IDEO

28. Modelo – Urso Polar -
Usuário, Contexto, Vídeo Noticioso
burocrático
Aúdio
Oficial
Conteúdo. Texto Entretenimento
Gráficos Técnico
Animações Institucional
Imagens Informativo
Comercial
Interações Operacional
Hipertexto Artístico
Aberto ou restrito Publicitário
Tipo de ambiente virtual (sistema
off-line, Internet intranet...)
Hardware/Software
Contexto jurídico
Aspectos Culturais/sociais/políticos Capital humano de
Aspectos funcionais operacionalização
Nível econômico/social Metodologia de desenvolvimento
Estado físico
Metas, objetivos e implicações
Motivações Sazonais
do Cliente
Aspectos Psicológicos/cognitivos
Recursos financeiros
Necessidades primárias/secundárias...
Tecnologia
Ergonomia
Tempo
Know-how

30. Modelo - User Experience HoneyComb:

31. Utilidade
O conteúdo é o rei.
O que o usuário quer/precisa?
O que o cliente quer/precisa?
O que se tem/ou se pode ter?
Útil é tudo o que serve ao usuário final independente de sua
qualificação moral; não existe produção se não houver
consumo.
Útil para o usuário nem sempre é útil para o Arquiteto de
informação, para o cliente ou para a sociedade como um todo.
O site mais inútil da internet
Info Online, 2009

32. Usabilidade
“Usabilidade é a eficiência, eficácia e satisfação com a qual os
públicos do produto alcançam objetivos em um determinado
contexto.”
– Eficácia: É a capacidade de executar tarefa de forma correta e completa.
– Eficiência: São os recursos gastos para conseguir ter eficácia.
– Satisfação: O conforto e aceitação do trabalho dentro do sistema.
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 94241-11

33. PhD Jakob Nielsen
useit.com
Diretor do Nielsen-Norman Group,
uma das maiores empresas de
consultoria em usabilidade no
mundo.

34. Cinco atributos da usabilidade (NIELSEN, 1993)
Facilidade de aprendizagem
Eficiência de uso
Facilidade de memorização
Baixa taxa de erros
Satisfação subjetiva
Heurísticas de Nielsen
Feedback
Linguagem do usuário
Controle e liberdade para o usuário
Consistência e padrões de navegação
Prevenir Erros
Minimizar a sobrecarga de memória
Flexibilidade e eficiência no uso - Atalhos
Diálogos Simples e Naturais
Boas Mensagens de Erro
Ajuda e Documentação

35. Steve Krug
sensible.com
Popularizou a usabilidade com um
livro inovador, amigável e prático.
Pioneiro no uso de metáforas e na
didática de ensino da usabilidade.

36. Encontrabilidade
O que o usuário quer?
Quando ele quer?
Como ele quer encontrar?
Que recursos ele dispõe para encontrar?
Sobrecarga de informação:
Em Janeiro de 2009 existiam mais de 185 milhões de sites na internet. (Nielsen- Netratings)
Mais de um milhão de sites surgem por mês em todo o mundo.(NETCRAFT, 2009)
Em 2006 o mundo criou 161 exabytes de informação. (IDC, 2007)
Estamos diante de diversos fluxos diferentes de informações complexas tem
que estar estruturadas com o objetivo de serem encontradas.

37. É difícil achar uma agulha no palheiro?

38. Depende da agulha

39. E depende do Palheiro

40. Credibilidade
10 principais fatores influenciadores da credibilidade de um site:
1 - Facilite a verificação das informações do seu site
2 – Mostre que existe uma instituição organizada real por trás do projeto
3 – Realce a experiência da sua organização nos conteúdos e serviços que oferece.
4 – Mostre as pessoas honestas e confiáveis por trás do projeto
5 – Facilite o contato
6 – O design do seu site deve parecer profissional (ou apropriado para sua finalidade)
7 – Faça seu site fácil de utilizar, e útil
8 – Atualize seu site frequentemente (ou pelo menos mostre que foi revisado
recentemente)
9 – Seja moderado com conteúdos promocionais(anúncios e ofertas)
10 – Evite todo o tipo de erro, por menor que seja.
http://credibility.stanford.edu/

43. Acessibilidade
Sites devem ser acessíveis a todos, independente de:
Restrição física
Restrição tecnológica
Restrição financeira
Restrição social
Decreto-lei 5296 de 2 de dezembro de 2004
Art. 2o Ficam sujeitos ao cumprimento das disposições deste Decreto,
sempre que houver interação com a matéria nele regulamentada:
I - a aprovação de projeto de natureza arquitetônica e urbanística, de
COMUNICAÇÃO E INFORMAÇÃO, de transporte coletivo, bem como a
execução de qualquer tipo de obra, quando tenham destinação pública ou
coletiva;
Itens de hardware funcionam como
extensões do corpo humano.

44. Desejabilidade (credo!)
Amigabilidade
Nossa busca pela eficiência deve vir temperada pela apreciação do poder
e do valor de uma imagem, identidade, marca e outros elementos do
design emocional.
Um site pode e deve ser legal, divertido de usar, desde que não hajam
conflitos de prioridade. As emoções e sensações são essenciais para a
convivência e sobrevivência humana.
Entre dois sites igualmente eficientes, a “amigabilidade” é um dos fatores
que desempata o jogo. Os paradigmas nem sempre vendem mais, e
quando descobrem isso, eles começam a mudar.

45. Linguagem do usuário
http://www.cocacolabrasil.com.br http://www.cocacola.com.br
http://www.cocacolazero.com.br http://www.thecoca-colacompany.com/

48. Valorabilidade (credo!)
Valor Agregado
Os sites devem dar resultado para quem paga. Têm que valer a pena serem
pagos.
Para as organizações sem fins lucrativos, a experiência do usuário deve
favorecer a missão proposta. Para empresas com lucro, devem contribuir para o
faturamento da empresa e aumento da satisfação do cliente.
É o que manterá seu projeto no ar por todo e todo o sempre amém.
Os investimentos em publicidade na internet cresceram 44% em 2008, contra 9% da média do
mercado .
Fonte: Meio & Mensagem
Receita do Google: U$ 4,2 Bi (2008)
Estimativa de prejuízo do You Tube para 2009: U$174 Mi
Fonte: RampRate
Receita da Rede Globo: R$7,5 Bi (2008)
Fonte: Blue Bus

49. E o Design?

50. Design de Interação / Design centrado no usuário
Design de Interação é a maneira como um produto
proporciona ações em conjunto entre pessoas e sistemas. –
Usabilidoido
Pensar no relacionamento do homem com sistemas ou objetos.
Colocar a lógica fechada dos ambientes técnicos em função das
variações da cognição humana.
O designer de Interação se concentra nas perguntas feitas pelo
usuário. (Morville e Rosenfeld)
Alguns nomes que se veem por aí:
User Experience Designer
Interaction Designer
Information Architect
Usability Engineer

51. Alguns nomes que se veem por aí:

52. Donald Norman
Sócio fundador do Nielsen Norman Group, pioneiro
da aplicação da Psicologia Cognitiva ao design
centrado no usuário.

53. Desafios da Arquitetura
Web Social
Web Semântica
Design Responsivo
Acessibilidade
Serviço X Negócio
Desenvolvimento Ágil

54. Componentes
Básicos da AI

55. Louis Rosenfeld e Peter Morville, autores do clássico livro da capa com o
“Urso Polar”, dividiram a Arquitetura de Informação de um website em
quatro grandes sistemas, cada um composto por regras próprias e suas
aplicações:
Sistema de Organização
Sistema de Rotulação
Sistema de Navegação
Sistemas de Busca
* ROSENFELD, L.; MORVILLE, P. Information Architecture for the Word Wide Web. 3. ed. Sebastopol, CA: O'Reilly, 2006.

56. Sistema de
organização

57. Seu site é organizado?
* Site acima: http://www.havenworks.com/

58. O que é um sistema de organização?
O sistema de organização é o componente da
Arquitetura de Informação responsável por organizar a
informação do website.
Sua função é definir as regras de classificação e
ordenação das informações que serão apresentadas e
aplicar estas regras, categorizando todos os
conteúdos oferecidos.
Seu principal desafio é organizar a informação de
forma que ajude o usuário a encontrar o que precisa
para atingir seu objetivo.

59. Por quê categorizar as informações?
Categorizar é uma habilidade natural que a mente
humana usa para compreender o mundo ao seu
redor.
Categorizar é o processo cognitivo de dividir as
experiências do mundo em grupos de entidades, ou
categorias, para construir uma ordem dos mundos
físico e social em que o individuo participa.
JACOB e SHAW, 1998
Categorização é um mecanismo cognitivo
fundamental que simplifica a interação do indivíduo
com o ambiente: Ela não apenas facilita o
armazenamento da informação, mas também reduz a
demanda da(apud JACOB e SHAW, 1998)
MARKMAN memória humana.
* JACOB, E. ; SHAW, D. Sociocognitive Perspectives on Representation. Annual Review of Information Science and Technology (ARIST). Vol. 33, p.
131-185, New York: Knowledge Industry Publications, 1988.

60. Formas de organização da informação
Para organizar a informação é preciso classificá-la,
definir quais documentos serão colocados em quais
categorias. Para isso é preciso considerar as
características da interface.
Os pesquisadores Rosenfeld & Morville*, falam da
importância dos “esquemas de organização”. Citam
alguns esquemas de organização através dos quais
navegamos todos os dias, como listas de telefone,
supermercados e guias de programação de televisão,
que facilitam o acesso à informação.
Os autores classificam os esquemas em: esquemas
exatos e esquemas ambíguos.
* ROSENFELD, L.; MORVILLE, P. Information Architecture for the Word Wide Web. 3. ed. Sebastopol, CA: O'Reilly, 2006.

61. Sistema de organização
Esquema exato Esquema ambíguo
Divide a informação em categorias bem Divide a Informação em categorias
definidas e mutuamente exclusivas. subjetivas. Baseia-se na ambigüidade
inerente da língua e na subjetividade
Possui regras claras para incluir novos
humana.
itens.
Não possui regras claras de como incluir
Indicado quando o usuário sabe novos itens.
exatamente o que está procurando.
Indicado quando o usuário não sabe
exatamente o que está procurando.
Páginas brancas da
Páginas amarelas da
lista telefônica
(Esquema exato) lista telefônica
(Esquema ambíguo)

62. Esquemas de organização exatos
Alfabeto
Indicado para grandes conjuntos de Informação e públicos muito diversificado.
Ex: Dicionários, Enciclopédias, Listas Telefônicas.
Tempo (cronológico)
Indicado para mostrar a ordem cronológica de eventos.
Ex: Livros de História, Guias de TV, Arquivo de notícias.
Localização (geográfico)
Compara informações vindas de diferentes locais.
Ex: Previsão do tempo, pesquisa política, Atlas de anatomia.
Seqüência
Organiza itens por ordem de grandeza. Indicado para conferir valor ou peso a informação.
Ex: Lista de preços, rankings, classificações.

63. Esquemas de organização ambíguos
Assunto (tema)
Divide a informação em diferentes tipos, modelos ou perguntas a serem respondidas.
Ex: Páginas Amarelas, Editorias do jornal, Supermercado.
Tarefa
Organiza a informação em conjuntos de ações. Raramente utilizado sozinho na Web.
Ex: Menu aplicativos Windows (Editar, Exibir, Formatar).
Público-Alvo (audiência)
Indicado quando se deseja customizar o conteúdo para diferentes públicos-alvos.
Ex: Lojas de departamento (classifica seus produtos em masculino, feminino e infantil).
Metáfora
Utilizado para orientar o usuário em algo novo baseado-se em algo que lhe é familiar.
Ex: Desktop de um computador (utiliza a metáfora de uma mesa de escritório).
Híbrido
Reúne 2 ou mais esquemas em uma mesma organização.
Normalmente causa confusão ao usuário.

64. Faced classification
A classificação do mesmo conjunto de informações em diferentes esquemas é
chamado de faced classification (classificação facetada ou multi-dimensional). Cada
esquema representa uma dimensão na estrutura que organiza a informação.
A web, por ser um ambiente virtual, permite facilmente apresentar a mesma
informação organizada de várias formas. No mundo físico, ao contrário, isso é
praticamente impossível.
A grande vantagem da faced classification é que ela oferece ao usuário diversas
maneiras de buscar a mesma informação, acomodando diferentes estratégias de
busca e modelos conceituais.

65. Assunto
Alfabeto
http://www.almanaqueculinario.com.br/receitas-alfabeto/

66. Tempo
http://veja.abril.com.br/acervodigital/home.aspx

67. Assunto
Tempo
http://www.redetv.com.br/portal/grade.aspx

68. Localização
Assunto
http://www.tecnisa.com.br

69. Assunto
Localização
http://www.submarinoviagens.com.br/viagens/destinos.aspx

70. Seqüência
Híbrido
(tarefa, assunto)
http://migre.me/

71. Assunto
Seqüência
http://www.folha.com.br/

72. Exemplos de sistemas de organização
Público-alvo Assunto
Tarefas
http://www.caixa.gov.br/

73. Público-alvo
Assunto
http://www.boticario.com.br

74. Híbrido
(assunto, localização, público-alvo)
http://www.imoveiscuritiba.com.br

75. Metáfora
http://www.zoomii.com

76. Metáfora
http://www.petmoustache.com/index.html

77. Metáfora
http://www.sharpideas.com/

78. Dificuldades em organizar a informação na web
Principais dificuldades
Devido aos seus diversos aspectos cognitivos, a
organização da informação na Web apresenta diversas
dificuldades:
Ambigüidade
Heterogeneidade
Multilocação
Diferenças de Perspectiva
Políticas Internas
Estética

79. Ambigüidade
Os sistemas de classificação se baseiam na linguagem humana, que é naturalmente ambígua.
Liquidificador está em “eletrodomésticos”,“eletroportáteis”, ou “utilidades domésticas”?
http://www.magazineluiza.com.br/

80. Heterogeneidade
O conteúdo disponibilizado na web é altamente heterogêneo. Em um mesmo site podem estar
presentes conteúdos de diversos tipos (textos, vídeos, sons, etc.) e em diversos formatos
(html, gif, jpg, ppt, pdf, doc, etc.). Assim, criar um único sistema de organização que atenda a
todo o website pode ser impossível.
Serviços
Vídeo
Publicidade
Notícias
Mobile
http://www.globo.com/

81. Multilocação
No mundo virtual um mesmo corpo pode ocupar dois ou mais lugares no espaço.
http://www.musicovery.com

82. Diferenças de perspectiva
O arquiteto precisa evitar que suas perspectivas pessoais influenciem a organização da
informação e buscar atender as diferentes perspectivas de cada usuário, o que aumenta a
complexidade do sistema de organização.
http://www.dell.com.br/

83. Políticas internas
Muitas vezes decisões políticas influenciam diretamente a organização da informação de
modo a resolver interesses internos ao invés de atender as necessidades do usuário.
A exigência de
espaços para
publicidade em
muitos sites afeta
profundamente a
experiência do
usuário.
http://www.rpc.com.br/

84. Estética
Além de possuir uma organização compreensível um website precisa ser esteticamente
agradável. Porém a estética não deve prevalecer sobre a compreensão da informação.
Esteticamente o site é
bonito e agradável,
mas seu conteúdo só
é descoberto atrás
das flores caso o
usuário compreenda a
metáfora visual
aplicada.
http://www.flowersforhope.com/garden/

85. Sistemas de
Rotulação

86. Antes, de falar de rotulação vamos falar um pouco de signos:
Semiótica: O estudo dos signos.
Signos são representações de experiências.
Tudo aquilo que faz parte do universo cognitivo do usuário, nós podemos chamar
de intuitivo, inclusive os processos de significação que podem variar de acordo
com o contexto semântico.

87. Processo de significação:

88. Contextos semânticos
Cultural Funcional
Pajero
Clipe
Brasil Espanha
Temporal Gramatical
Pia
Broto
Verbo
1960 2009 Substantivo
(o pássaro pia)

89. Sistema de rotulação
Rótulos são os signos que irão representar a estruturação do conteúdo do site. Eles devem
comunicar ao usuário qual é o conteúdo do site e o que ele pode ou não pode fazer.
Château Pétrus Do Avô
Pomerol, Bordeaux, França. Campo Largo, Paraná, Brasil.
Safra de 1899 Safra de 2009
5.203,00€, R$ 5,60

90. Regras de rotulação
Completude
Cubra todo o conceito transmitido pelo conjunto de rótulos.
Níveis conteúdo
Não misture conceitos com níveis diferentes de abrangência.
Sintaxe
Mantenha uniformidade na sintaxe dos termos.
Estilo
Siga um padrão de apresentação visual.
Público
Não misture termos com abordagens diferentes no mesmo menu.

91. Recomendações para o
Sistema de rotulação
- Crie categorias auto exclusivas.
- Consulte outros sistemas de rotulação da categoria.
- Use termos padronizados. Se necessário, crie um arquivo de autoridade.
- Cuidado com sinônimos, homônimos e termos ambíguos. Estabeleça um padrão de uso
ou indique a desambiguação.
- Evite siglas.

92. Recomendações para o
Sistema de rotulação
- Pense na Amigabilidade.
- Fale a linguagem do usuário. Faça um Card Sorting.
- Estreite o Escopo para evitar ambiguidades. Se precisar divida o conteúdo do site em
sub-sites.
-Exiba os itens imediatamente inferiores.
- Os termos devem se adequar a estrutura mental do usuário e não a estrutura interna
das empresas.

93. Rótulos textuais Rótulos visuais
Signos em forma de palavras. Signos em formas de imagens.
VACA
Vantagens Vantagens
Intuitividade Economia de espaço
Facilidade de Eficiência de uso
Aprendizagem Deixam a interface mais
Implementação Rápida atrativa

94. Tipos de Ícones
Ícones Diretos ou literais Ícones indiretos
Representam o conceito literalmente, mostram Se apropriam de uma parte do conceito
uma figura do próprio conceito representado. representado na composição do signo.
Ícones metafóricos Signos arbitrários
Utilizam um outro conceito ou ato Definidos formalmente sem qualquer relação
relacionado ao que respresenta. natural com seu significado.
Ícones Concretos Ícones Abstratos Ícones Mistos

95. Ícones-Padrão

98. Folksonomia
Termo criado pelo arquiteto de informação Thomas Vander Wal
(Folk = Povo + Taxonomia)
É um recurso que permite que os próprios usuários criem
seu sistema de rotulação por meio de “tags”.
Os termos não precisam ter, necessariamente , uma
hierarquia ou qualquer tipo de relação entre si.

99. Folksonomia:
Vantagens
- Diminui os custos para categorizar o conteúdo porque não envolve profissionais
especializados em categorização de conteúdos.
- Permite que o usuário organize facilmente o conteúdo porque ele não precisa aprender
um vocabulário controlado.
- Reflete o vocabulário do usuário.
- Permite encontrar conteúdos inesperados graças as conexões criadas pelas tags.
- Diminui as barreiras para a cooperação.
Desvantagens
Pode ter inconsistências e ambigüidades devido a:
Polissemia: palavras com muitos significados
Sinonímia: múltiplas palavras com mesmo significado
Inflexões: variações de gênero, número e grau da palavra
Erros de ortografia e digitação.
Pode ter muitas tags imprecisas ou irrelevantes (meta noise)

100. Polissemia Inflexão
Sinônimos

102. Folksonomia Controlada
- Apresentar instruções de como o usuário deve escolher a tag
- Sugerir tags semelhantes e já utilizadas por outros usuários
- Apresentar sinônimos
- Aplicar correção ortográfica
- Indicar o assunto ao qual as tags se referem
- Sugerir ao usuário que classifique a informação em tags pré-definidas

103. Sistema
de navegação

104. O que significa navegar na web?
Navegar é alcançar um destino que está fora do
alcance de campo de visão do ponto de partida.
No mundo físico existe uma infinidade de pontos de
referências para o usuário se orientar (árvores, rios,
montanhas, estrelas, placas, etc.).
Em um website, ao contrário, esses pontos de
referência não existem. Assim, ao se projetar um
website ,é necessário criar um sistema de navegação
para estabelecer pontos de referência e uma
sinalização que oriente o usuário, caso contrário ele
se perde.

105. O que é um hipertexto?
Hipertexto é o termo que remete a um texto em formato
digital, ao qual agrega-se outros conjuntos de informação
na forma de blocos de textos, palavras, imagens ou sons,
cujo acesso se dá através de referências específicas
denominadas hiperlinks, ou simplesmente links.
Os links devem ser sinalizados claramente e sua
funcionalidade ficar aparente na página.

106. Objetivo do sistema de navegação
O sistema de navegação é o componente da
Arquitetura de Informação que especifica as maneiras
de navegar, de se mover pelo espaço informacional e
hipertextual do website.
Sua função é indicar ao usuário a sua localização e
mostrar o caminho correto para que ele chegue ao
seu destino.

107. Os elementos do sistema de navegação são divididos em:
Sistema de Navegação Embutido Sistema de Navegação Remoto
Formado pelos elementos de navegação Formado pelos elementos externos a
que são apresentados junto com o hierarquia do site. Sua função é prover
conteúdo. Sua função é contextualizar e caminhos complementares para se
oferecer flexibilidade de movimento: encontrar o conteúdo e completar as
tarefas:
- Logotipo
- Barra de Navegação Global - Mapa do Site (sumário)
- Menu Local - Índice Remissivo
- Bread Crumb - Visita guiada
- Passo a Passo
- Cross Content

108. Logotipo
Tem a função de identificar o website e mostrar ao usuário a sua posição em relação a web
como um todo. Por convenção, normalmente possui link para a home-page. Importante estar
associado a um slogan claro e informativo, para transmitir aos usuários o objetivo do site.
Slogan
Logotipo
http://delicious.com

109. Barra de navegação global
Contém os links para as áreas chaves do site, as grandes categorias do modelo de
organização. Freqüentemente é o único elemento de navegação comum a todo o website, por
isso tem grande impacto na usabilidade.
Carrinho de compras
Serviços
Categorias de produtos Busca
http://www.casasbahia.com.br

110. Menu local
Apresenta links para páginas que estão próximas, na estrutura do website, à página que está
sendo visitada (Páginas irmãs, filhas, pais, etc.). Três exemplos:
Fixo Pull-down e pop-up Pie menu (radial menu)
http://www.casasbahia.com.br http://www.faculdadespequenoprincipe.edu.br http://songza.com

111. Bread crumb (migalhas de pão)
Informa onde o usuário se encontra na estrutura do site e fornece links para os níveis
hierárquicos superiores.
http://www.blogblogs.com.br Bread crumb tradicional
Bread crumb em forma de menu (tabbed)
http://food.yahoo.com

112. Bread crumb (migalhas de pão)
O bread crumb pode representar diferentes modelos de navegação. Segundo *Instone (2002),
existem 3 tipos principais:
Location Bread Crumb
Informa a posição da página na estrutura do site mostrando links para todas as páginas
hierarquicamente superiores até a Home-Page. A página tem sempre o mesmo bread crumb
independente do caminho percorrido para alcançá-la.
Path Bread Crumb
Mostra o caminho percorrido pelo usuário para alcançar a página. Se a mesma página puder
ser acessada por diferentes caminhos, ela apresentará diferentes bread crumbs.
Attribute Bread Crumb
Esta representação possui a peculiaridade de não oferecer zonas de salto em cada item da
estrutura, mas sim um link simples para a página procurada. Este tipo de recurso é muito
encontrado em sites de e-commerce.
*INSTONE, K. Location, Path & Attribute Breadcrumbs. User-experience.org, 2002.

113. Passo a passo
Informa em qual passo de uma transação o usuário se encontra. Indicado para transações
longas ou delicadas. A estrutura é amigável na identificação de problemas, pois o funil do
processo permite uma análise de métricas mais aprofundada.
http://www.fnac.com.br

114. Cross content
Apresenta uma série de links relacionados ao conteúdo da página que está sendo visitada.
Para serem úteis devem ser bastante contextualizados.
http://perfumes.sacks.com.br

115. Mapa do site
Apresenta toda a estrutura do website, normalmente na forma hierárquica. Reforça a hierarquia
do website para que o usuário se familiarize com a sua organização. Facilita o acesso rápido e
direto para o conteúdo.
http://www.hsbc.com.br

116. Índice remissivo
São listas de palavras chaves organizadas em ordem alfabética ou por importância. Bastante
úteis quando o usuário já sabe o nome do conteúdo que procura.
http://www.gm.com.br

117. Visita guiada
A visita guiada serve como uma boa ferramenta para introduzir novos usuários as áreas de
maior conteúdo ou importância de um sistema.
http://www.americanas.com.br

118. Recomendações -­‐ para sistema de
10 princípios básicos
navegação de qualidade:
- Fácil de aprender
- Ser consistente
- Prover feedback
- Presente de diferentes formas conforme o contexto
- Oferecer alternativas
- Economizar ações e tempo de utilização
- Apresentar mensagens visuais claras e no momento
adequado
- Possuir rótulos compreensíveis
- Estar em sintonia com o propósito do website
- Suportar os objetivos e comportamentos do usuário
*Extraído do livro de FLEMING, J. Web Navigation: Designing the User Experience. O'Reilly, 1998.

119. Recomendações -­‐
*Um bom sistema de navegação deve responder 3 perguntas básicas:
Onde estou?
Onde estive?
Aonde posso ir?
*Extraído do livro de NIELSEN, J. Projetando Websites. Rio de Janeiro: Campus, 2000.

120. Focalize sua navegação
Navegações flexíveis fornecem muitos atalhos mas podem gerar confusão para o usuário. É
recomendável diminuir a quantidade de opções de navegação nas tarefas mais críticas para
que o usuário possa focar melhor sua atenção.
Página inicial Página de login
(muitos links) (poucos links)
http://www.amazon.com

121. Não esqueça da acessibilidade
Todas as páginas que possuem menus padronizados em um site, para serem além de
acessíveis, terem uma boa usabilidade, têm de possuir teclas de atalho que permitam o
salto para o conteúdo principal da página.
Essas teclas de atalho podem ser colocadas pelo desenvolvedor sem prejuízo de qualquer
outro conteúdo.
http://www.hsbc.cl

122. Sistemas de Busca

123. Verifique a necessidade de um sistema de busca:
- Existe conteúdo suficiente?
- Você precisa de uma busca ou de um sistema de navegação melhor?
- Você tem tempo e know-how para otimizar seu sistema de busca?
- Não existem alternativas melhores?
- Seu usuário vai se aborrecer com a busca?
Por que a busca é importante?
- Buscas ajudam com grandes quantidades de conteúdo.
- Buscas ajudam em sites muito fragmentados.
- Buscas deveriam existir quando os usuários esperam por elas.
- A busca pode dominar o dinamismo.

124. O que exibir para o usuário em páginas de
busca?
Leve em consideração:
- O nível de experiência do usuário-alvo.
- Os tipos de resultado que o usuário quer.
- O tipo de informação que está sendo buscada.
- A quantidade de informação que está sendo buscada.
Tecnisa Midomi
Google

125. Elementos do mecanismo de busca
Interface inicial Página sem resultados
Página de resultados Página de ajuda

126. Mecanismos de busca não são só “coisa de TI”
Soluções para humanização de mecanismos de busca:
-Correção ortográfica
- Sugestões de busca
- Auto-complete
- Cross-content
- Resultados Personalizados

127. Tipos de organização de resultados
- Alfanumérico
- Cronológico
- Por relevância
- Popularidade
- Por avaliação qualificada
- Por custo de clique (Quality score)
- Por valores diversos
Filtros de busca genéricos (Faceted Search)
- Atributos do Conteúdo
Tipo de conteúdo Cronológico
Audiência Autor
Cargos/funções Departamento
Assunto Resultados personalizados
Geográfico etc...

128. Dicas para a página de resultados de busca:
- Explique de onde os resultados vieram.
- Deixe claro o que o usuário acabou de fazer.
- Integre busca com navegação.
- Repita o campo de busca e o texto buscado na página de resultados.
- Diga quantos itens foram encontrados.
- Inclua paginação.
- Separe claramente resultados orgânicos de patrocinados.
- Sugira como o usuário pode formular os termos da sua busca.

129. Dicas para a página de resultados de busca:
- Mostre menos informações para usuários que sabem o que estão procurando e mais
informações para os que não sabem.
- Permita a customização dos resultados.
- Mostre a informação que o usuário mais deseja.
- Ofereça suporte específico para cada tipo de busca.
- Faça a caixa de buscas grande.
- Agrupe os resultados em categorias (ver tipos de organização).
-Ofereça sugestões de refinamento da busca.

130. Página sem resultados
-Tem a função de indicar que não foram encontrados resultados e de facilitar uma nova
busca.
Dicas
- Diga claramente que a busca não obteve resultados.
-Sugira que o usuário revise os termos utilizados na busca e dê sugestões.
-Exiba os termos utilizados na pesquisa, de preferência, no próprio campo de busca.
- Disponibilize ajuda.
-Disponibilize contato.

131. Página sem resultados
Analise os termos buscados para incrementar os metadados do conteúdo do seu site.

132. Otimização de conteúdo
Search Engine Optimization(SEO)

133. 80% dos usuários iniciam a navegação através
do mecanismo de busca
62% deles clicam na primeira
página de resultados
28% deles clicam na
segunda/terceira página
Quer dizer, se seu site
estiver da quarta página
para trás, é melhor
distribuir imãs de
geladeira.

134. As pessoas não lembram o endereço do site
E ficam menos que 5 minutos nas páginas de
resultados

135. Vamos entender a diferença entre:
Páginas de Navegação Páginas de Destino

136. O que realmente importa?
- URL - Popularidade da página.
- Metatags (Keywords, Description) - Tempo de indexação
- Nome do site - Frequência da palavra
- Títulos (h1, h2, h3, h4...) - Posição da palavra
- Links
- Corpo de texto
- Links em imagens
- Alt's de imagens
- Âncoras de texto remoto
Os desenvolvedores dos mecanismos de busca estão sempre tentando priorizar a
relevância do conteúdo e competindo para exibir os melhores resultados. Por isso os
algorítimos dos buscadores são diferentes entre si e mudam constantemente .

137. Dicas White Hat
Técnicas recomendadas para a otimização de conteúdo.
- Escolha palavras-chave adequadas , de acordo com o conteúdo do seu site.
- Defina uma estratégia, pesquisando as palavras mais buscadas.
- Utilize termos compostos para especificar mais a busca.
- Inclua sinônimos, termos derivados e palavras concorrentes.
- Analise o log de busca do seu site para saber os interesses dos usuários.
- Coloque as palavras chave nos locais mais relevantes da página.
- Faça a palavra chave aparecer várias vezes.
- Incentive que outras pessoas coloquem links para seu site no site delas.
- Evite Javascript, Flash e Image Maps .
- Mantenha o seu cadastro atualizado em sites de busca.

138. Dicas Black Hat
Técnicas NÃO recomendadas para a otimização de
conteúdo.
- Spam Indexing
Páginas feitas só para atrair forçadamente os mecanismos de busca.
- Doorway Pages
Otimizar uma página para uma palavra-chave de acordo com as particularidades do
mecanismo de busca.
-Page Cloaking
Criação de Doorways que somente os robôs dos mecanismos de busca conseguem
acessar. O desvio das URL’s indevidas é feito por meio da identificação de IP ou de
browser.

139. Reflexão final:
Otimização em função do conteúdo, ou
conteúdo em função da otimização?
(O sapato pro pé ou o pé pro sapato?)

140. Pesquisa

141. O objetivo da etapa de pesquisa é entender detalhadamente o
problema e definir o escopo do projeto.
É o processo de descobrir quem são seus usuários, o quê eles querem e que
tipos de conteúdos e funcionalidades eles realmente usam. Também e não
menos importante, é a hora de escutar seu cliente , entender o que ele espera e
reunir os recursos disponíveis para alcançar este objetivo.
Usamos diversas técnicas para responder perguntas deste tipo e ajudar você a
entender o que fazer com as informações adquiridas.
É uma atividade que requer muita habilidade de comunicação
porque o arquiteto é frequentemente o mediador entre o
conhecimento do cliente e o time que construirá a solução.

142. Objetivos:
Entender o comportamento do usuário
Entender os objetivos e necessidades do Negócio
Entender o contexto do projeto (limitações e possibilidades)
Identificar problemas
Identificar oportunidades

143. Mitos (desculpas) para não fazer pesquisa

144. Desculpa Nº1
Nós não temos tempo e/ou dinheiro. #NOT
#YES Investindo em UX, se economiza tempo
e dinheiro.

145. Desculpa Nº2
Nós já sabemos o que queremos. #NOT
#YES Gestores geralmente não sabem o que
os usuários querem.
Nem o que eles mesmos querem.

146. Desculpa Nº3
Nós já fizemos Pesquisa. #NOT
#YES É necessário fazer pesquisa específica
de UX.
UX não é marketing.

147. Sobre a pesquisa
O QUE É A ENTREGA:
Um lindo relatório contendo:
Observações relevantes sobre o negócio usuários e sobre o produto.
Temas
Insights
Oportunidades (CP)
Referências

148. Variáveis da pesquisa
Empresa (cliente) Usuário (público-alvo)
-Planejamento estratégico - Objetivo do usuário
-Proposta de valor (objetivo do negócio) - Experiência do usuário
-Recompensa da empresa - Linguagem do usuário
-Requisitos e diretrizes de implementação - Etnografia virtual
-Público-alvo
Contexto – Vamos ver depois

149. Empresa

150. Por que investir em planejamento?
Por que planejamento?

151. Num projeto de web site, o planejamento tem diversas funções, como:
Garantir a realização dos processos necessários para que o site alcance os seus
objetivos.
Disseminar internamente requisitos e decisões, mesmo às equipes não diretamente
envolvidas com o projeto, que legitimem o projeto do canal online.
Evitar retrabalho e custos duplicados caso o site não atenda aos seus objetivos (que pode
consistir num projeto inteiramente novo).
Prevenir imprevistos que comprometam o resultado do projeto. E controlar a qualidade dos
processos e resultados.
Gerar produtos que definam fatores de sucesso ou fracasso a serem repetidos ou
evitados em novos projetos semelhantes.

152. Objetivos da organização – Questões Primárias
Por que a organização existe?
O que faz, como faz?
Onde quer chegar num determinado período de tempo? Como chegar?
Quais são as diretrizes da estratégia organizacional de imagem?
Como funciona as políticas de publicação de conteúdo sobre produtos,
atividades, notícias?
Quais são as estratégias de vendas de produtos e serviços?
Como funciona a políticas de relacionamento com os clientes?

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

154. Focus Group - Estratégico
- Entrevistas com funcionários da
empresa que representem
setores envolvidos no projeto

155. VISÃO
É o “sonho” da organização, o futuro realizável que motiva o presente.
MISSÃO
É a identificação da organização, áreas de atuação, rumos.

156. Entendimento e a investigação da situação presente (identificação
dos pontos de melhoria e mudança - tempo, custo e aplicação de
tecnologias, por exemplo - e a identificação de problemas)

157. Análise das forças e limitações internas
◊ A análise dos recursos (financeiros, patrimoniais, humanos,
tecnológicos)
◊ A análise da estrutura organizacional
◊ A avaliação de desempenho (financeiro, produtividade, inovação,
crescimento).

158. Análise do ambiente externo
Do mercado, características atuais e tendências futuras,
oportunidades, perspectivas.
Das empresas que atuam na mesma área, com os mesmos
clientes, consumidores ou recursos.
Da conjuntura econômica, tendências políticas, sociais, culturais,
legais, que afetam a sociedade e demais empresas.
Da conjuntura tecnológica, na medida em que muitas indústrias
estão sujeitas a rápidas e imprevisíveis mudanças nesta área.

159. Alinhando objetivos do site
O que vamos fazer?
A proposta de valor determina a função principal, o
propósito, a razão do website.
Ela marca a direção do projeto e o resultado esperado.
Um website pode ter mais que uma proposta de valor,
especialmente se ele atende a públicos-alvos diferentes.
As propostas de valor de um website são derivadas da
visão e missão da empresa e do seu planejamento
estratégico.

160. Alinhando objetivos do site
Qual é a recompensa esperada
e como vamos medi-la ?
A empresa sempre espera ganhar algo em troca
investindo em um website: aumentar as vendas, reduzir
custos, divulgar melhor a sua marca.
Até mesmo organizações sem fins lucrativos esperam
ganhar alguma recompensa quando lançam seus
websites: captar mais doações, divulgar seus trabalhos,
conquistar novos voluntários.
Na fase de pesquisa o arquiteto deve compreender que
recompensa a empresa espera receber e como ela será
quantificada.

161. Alinhando objetivos do site
Check requisitos e diretrizes
Um website está dentro de uma empresa que determina
um forte contexto para sua implementação e operação.
Esse contexto cria requisitos e diretrizes para a
implementação que devem ser respeitados para garantir
a viabilidade do projeto.

162. Alinhando objetivos do site
Identifique o público-alvo
O público-alvo é o grupo de pessoas que vai utilizar o
website: clientes, revendedores, funcionários, acionistas,
imprensa, etc.
A definição de quais públicos-alvos que o website deve
atender é decorrente da sua proposta de valor do
website e do planejamento estratégico da empresa.
Um público-alvo muito amplo é mais difícil de se atender
porque possuem perspectivas e necessidades
diferentes, podendo demandar diferentes formas de
organização.

163. Usuário

164. Objetivos do usuário
Os objetivos indicam quais são as necessidades do usuário que o website deve atender
e quais são os benefícios que o motivam a utilizá-lo.
O objetivo do usuário está diretamente ligado a proposta de valor do site. Ele é a
tradução da proposta de valor na visão do usuário, assim devem estar fortemente
alinhados.

165. A experiência do usuário mostra o seu processo de utilização do website:
- O que motivou o usuário a usar o site ?
– Como o usuário inicia o uso do site ?
- Por que etapas eles passa ?
– Quais as informações necessárias em cada etapa ?
– Como ele termina ?
– Que decisões o usuário toma em cada etapa ?
– Que uso ele faz das informações que obteve no website ?

166. Ferramentas de pesquisa

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

168. Design Emocional
Design emocional é o processo de definir conceitos
subjetivos a partir de referências concretas.
Definimos uma matriz de conceitos subjetivos e
pedimos a usuários reais para que posicionem
diversos layouts de sites sugeridos nesta matriz ,
para que a equipe de design possa entender o que
os usuários entendem sobre os determinados
conceitos.

169. Imersão Teórica
É 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.

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

171. 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 das estatísticas de acesso ao site

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

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

174. 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ção
- Identidade
- Cultura
- Espaço e tempo
- Coordenação
- Aprendizado

175. 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 metadados
Tipo de
Identificação Tipo de
Nome da página Descrição Arquivo Tópico/Tema Público-alvo
Numérica Conteúdo
(formato)
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

176. Testes de Rápidos
- Teste A/B
- Pesquisa Multivariada
- Crazy Egg, Omniture, Google Analytics.
- Testes de Corredor.

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

178. Teste de
Usabilidade /Ágil
Plano de testes Recrutamento Aplicação Análise Relatório
( )
1°Dia 2°Dia 3°Dia 4°Dia 5°Dia

179. Teste de
Usabilidade /Evolutivo
Janeiro / Fevereiro / Março / Abril / Maio / Junho / Julho / Agosto / Setembro / Outubro / Novembro / Dezembro

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

181. Ajuda a responder algumas perguntas, como:
O usuário deseja ver o conteúdo agrupado por assunto ou por
público?
Dentro de diferentes públicos do site, quais são as semelhanças
entre eles?
Quais as principais diferenças? (isso pode ajudar a decidir, por
exemplo, se devemos criar mais de uma versão do site ou não);
Como cada seção ou grupo de conteúdo deve ser chamado?

182. Como funciona?
São feitos cartões de papel, cada um
com um conteúdo ou recurso do site
testado.
Esses cartões são distribuídos em uma
mesa e solicita-se que o participante os
organize da maneira que achar mais
correta.

183. Existem dois tipos de Card-­‐Sorting:
Aberto
 Não há categorias pré-­‐estabelecidas.
 O usuário as organizará da maneira que
achar melhor.
 Pode-­‐se solicitar que o participante
proponha rótulos para cada grupo criado.
 sites novos ou redesenho
Fechado
 Categorias já predefinidas.
 Os participantes organizam o conteúdo
dentro das categorias já existentes.
 Sites existentes com novos conteúdos
 Confirmar card-­‐sorting aberto.

184. Vantagens: Desvantagens:
 Simples aplicação - tanto para que  Não considera as tarefas do
testa, quanto para que é testado; usuário: não testa a organização na
prática;
 Baixo custo - para aplicação só
são necessários cartões de papel,  Resultados divergentes - os
canetas, blocos de anotação e tempo. resultados podem variar muito entre
os participantes;
 Rápido - podem-se aplicar vários
testes em um curto período de tempo.  Análise complexa: a análise não é
tão simples e pode tomar muito tempo
 Condiz com o design centrado no se os resultados dos participantes
usuário. forem muito divergentes.

185. Importante!
Não é um método para validar uma
arquitetura pronta;
Deve ser feito somente após pesquisa
das necessidades do usuário (personas,
cenários, mapa mental) e inventário de
conteúdo;usado para comparar duas
Pode ser
opções de organização ou rotulação.

186. Aplicação
Selecione o conteúdo
o Conteúdo já existente no site;
o Descrição dos processos (em caso de
recursos);
o Novo conteúdo (em caso de novas seções);
o Possíveis conteúdos futuros.
Selecione os participantes
o Dentro do público-alvo;
o Entre 7 e 10 sessões;
Prepare os cartões
o Cada conteúdo em um cartão
o Numerar cartões
o Anote a numeração após a aplicação.

187. Card Sorting
Análise
Manualmente ou por softwares
especializados;
Perceba os padrões e as
diferenças no resultado;
Diferenças podem ser:
o Caminhos diferentes de navegação;
o Conteúdos não compreendidos;
o Conteúdos que podem pertencer a mais de
uma categoria;
o Diferenças entre os públicos.
Não há roteiro exato para a análise;
Pode ser complementada por
outras pesquisas.

188. Card Sorting
Referências
“Card Sorting” -­‐ Donna Spencer e Jesse James Garrett
“Card sorting: a definitive guide” - Donna Spencer
http://www.boxesandarrows.com/view/card_sorting
_a_definitive_guide/

189. Análise de
Requisitos

190. Análise de Requisitos
Requisitos Técnicos:
Determinam as tecnologias que podem ser utilizadas. Deve-­‐se compreender e respeitar
esses requisitos para garantir a viabilidade técnica do projeto.
• Formato/Função (internet, intranet, blog, rede social, site institucional ...)
• Linguagens de programação (HTML, Javascript, Flash, etc.)
• Especificações dos computadores dos usuários (sistema operacional, browser,
resolução do monitor, etc.)
• Ferramentas de desenvolvimento e operação do website (editores de HTML, banco de
dados, software de gerenciamento de conteúdos, etc.)
• Integração com sistemas legados (ERP, CRM, SAP etc.)
• Plataformas (Celular, Tablet, Desktop, Uso de hardware..etc)
• Restrições técnicas – Capacidade e estabilidade do servidor, plugins, outsourcing...etc)

191. Análise de Requisitos
Requisitos Operacionais:
Determinam os profissionais e máquinas que atuarão na operação do website. Servem
para avaliar a capacidade da empresa em manter o website operando após sua implantação
Criação ou revisão processos internos (resposta de e-­‐mails, manutenção de conteúdos,
entrega de pedidos, etc.)
Capital Humano de desenvolvimento e manutenção.
Restrições jurídicas ou políticas.
Tempo.
Estrutura de trabalho.
Estratégia de Conteúdo.

192. Requisitos Técnicos

193. Em quais situações e
aparelhos as pessoas
utilizam a tecnologia e as
interfaces?
http://www.flickr.com/photos/yohann-­‐aberkane/2836258475/sizes/l/

194. Vamos falar sobre:
1. Internet no geral
2. Intranet
3. Dispositivos Móveis
4. TV Digital

195. Ambientes Tecnológicos
O design de sistemas interativos centrados nos
usuários requer a análise de tarefas, papéis e
necessidades dos utilizadores em cada contexto de
interação e dos padrões de mudança entre estes
contextos
Paulo Jorge Souza
baseado em:
EBAI 2008
http://paginas.fe.up.pt/%7Epjsousa/index.php

196. • Será que a necessidade de informação do usuário é a mesma no
horário de trabalho e no horário de lazer?
• Os sites levam em consideração o que você está fazendo ou
como você está se sentindo no momento em que os acessa?
• A forma como você utiliza o computador é a mesma quando
você está em uma mesa e quando está com o notebook no
colchão da sala vendo TV?

197. • E se o Jornal Nacional transmitisse somente notícias boas para
relaxar e tranqüilizar as pessoas que trabalharam o dia todo e
estão estressadas?

198. Weekend News Today
Site que só publica notícias
“boas”.

199. Ambientes Tecnológicos
http://www.youlicense.com/
http://www.musicovery.com/

200. Intranet
Por muito tempo não foram levadas
a sério
Motivos:
1.Alto investimento para manter profissionais
qualificados cuidando de sua manutenção
2.Teoricamente, “não alavancava vendas”, pois
não é um meio de comunicação com os clientes
3.Era tratado como um SISTEMA interno (leia-­‐se
SOFTWARE)

201. Intranet
Funcionário do Mês
• Esta imagem da Intranet começou a mudar
quando as empresas perceberam a importância
da comunicação com seus funcionários
• As empresas estavam cada vez maiores,
espalhadas por vários países ao redor do planeta.
Ainda assim
• Somente 25% das empresas têm um funcionário
dedicado totalmente à Intranet - Jakob Nielsen -­‐ 2007

202. Intranet
A Intranet serve
basicamente para:
1.Informar
2.Estimular
3.Automatizar Processos
4.Padronizar

203. Intranet
Características da Intranet
• Os usuários são diferentes
- Diferentes departamentos, cargos, níveis de conhecimento, necessidades
especiais...
• As tarefas são diferentes
• O tipo de informação necessária é diferente
• A capacidade das máquinas são diferentes
- No caso das intranets, essa capacidade é conhecida, portanto os recursos
devem ser adequados.

204. Intranet
A aplicação dos conceitos da AI em Intranets
1. Organização
2. Rotulação
3. Navegação
4. Busca

205. Intranet
1. Organização
• Diretório de Conteúdo
(antigo Yahoo!)
• Mais comuns:
- Departamentos
– Tarefas
• Reduz a curva de aprendizagem
• Muitos departamentos com
tarefas semelhantes.

206. Intranet
2. Rotulação
• Focar sempre no usuário
- Pesquisa
• Entrevista com Colaboradores
• Card Sortings
• Testes de Usabilidade
• Análise de Métricas
• Manutenção
- Pesquisa
– Termos de Busca

207. Intranet
3. Navegação
• Menor nº de cliques possível
• Trabalhos repetitivos
• Ganho de tempo ($$$$$$)
• Solução:
- Links para acesso rápido -­‐ home
– Personalização
– Links Cruzados

208. Intranet
4. Busca
• Alternativa rápida à navegação por
seções
o Notícias
o Normas e Procedimentos
o Execução de tarefa
• Análise constante para descobrir
novos rumos para a arquitetura de
SEARCH informação.

209. Intranet
Para uma intranet REALMENTE
funcionar:
• Centralize as decisões a um pessoa dedicada
em tempo integral ao desenho da intranet;
•
Cuidado com o Design centrado no Chefe
• Prever o crescimento da intranet
• Mudanças drásticas necessitam de tempo
para aprendizagem do novo sistema. Evitar
essa mudanças.
• PESQUISA, PESQUISA, PESQUISA...
• TESTE, TESTE, TESTE, TESTE, TESTE...

210. Dispositivos Móveis
 Mobile Phones
(celulares e smarthphones)
 PDA
(Palmtops, PocketPCs, Netbooks)
 Consoles Portáteis
(vídeo-­‐games)

211.  O que é o celular no Brasil*
 255 milhões de linhas
 73 milhões de usuários de banda larga
mobile (Teleco)
 82% de linhas pré pagas
 77% ainda no GSM
 Centenas de aparelhos diferentes
 Dezenas de navegadores utilizados
*Anatel – Junho 2012

212. Navegadores mais comuns para celular:
Symbian (Nokia),
RIM (Blackberry),
Apple (iPhone),
Windows Phone (vários celulares),
Android (Google),
Palm e
Linux (vários celulares).

213. Mobilesites
 Crescimento da rede
Wi-­‐Fi;
 Popularização da
Tecnologia;
 Acesso ao crédito;
 A explosão do Android;

214. Mobilesites
Brasil -­‐ 50% dos acessos à
web via mobile são feito
pelo iPhone.
(Segundo a própria Apple)
StatCounter - 2012

215. 1. Utilização em diferentes situações e
objetivos:
 Negócios;
 Entretenimento;
 Busca por informações rápidas.

216. 2. Tela extremamente reduzida,
se comparada aos computadores
comuns.

217. 3. Baixa velocidade de
conexão na maioria dos
acessos.
 O famoso caso da TIM.

218. #comofaz
Como tratar a Arquitetura de
Informação em mobilesites?

219. “Pretinho básico”
PRIORIZAR conteúdos e interações:
 O que o usuário mais procura
dentre os serviços da empresa?
 O que a empresa mais deseja
vender?

220. Back to
the Basics?
Não necessariamente.
Menos é
Mais.
Clichê.

221. Home
Navegação “Rasa”
 Poucos Sub-­‐níveis
 Menor nº de cliques possível

222. Minimizar ao máximo a
necessidade de digitação.
Sempre que possível, utilizar:
 Droplists
 Radio Buttons
 Check boxes

223. Aproveitar ao máximo
cada clique.
Aproveitar a rolagem da
página.

224. Evitar:

225. Dar preferência a Linkscurtos:
m.flickr.com m.globo.com
m.yahoo.com
m.google.com m.uol.com.br
www.rossiresidencial.com.br/mobile

226. Sempre deixar a opção do usuário
acessar o site na versão Desktop.

227. Design responsivo é sempre certo ?
- Forma e função
- Custo X Benefício
- Web Standards

228. explorar recursos
-Click to call
- Click to SMS
- GPS
- Acelerômetro

229. Três modelos de Site:
1. Modelo “lista”para
modelos mais básicos: 2. Modelo “grade”para
modelos com teclado: 3. Modelo especial para
touchscreen:

230. Tamanhos mais comuns de tela:
Mobile
Mobile Mobile
Mobile Phone Phone Phone
Phone 240 x 176
320 x 240 240 x 240
240 x 320
iPhoneFull iPhoneWeb
iPhoneWeb 480 x 320 480 x 268
iPhone Full
320 x 416
320 x 480
http://developer.yahoo.com/ypatterns/about/stencils/

231. Modelo Lista:
Navegação por setas
Mínimo de Recursos gráficos possível
Imagens com baixíssima qualidade
Indicação de linksativos com mouseover
A Digitação dificultada (teclado numérico)

232. Modelo Grade:
Navegação por setas ou esfera (BlackBerry)
Recursos gráficos moderados
Indicação de links ativos com mouseover
A Digitação facilitada no caso do BlackBerry

233. Modelo Touch:
Navegação por toque
Permite explorar mais recursos gráficos
Não existe mouseover
Evidenciar o que são botões e/ou links

234. Modelo Touch:
Permite maior interação por
interação com:
 GPS
 Sensor de movimento (acelerômetro)
 Visualização de vídeos
 etc.
+ Evitar a necessidade de zoom
Evitar links ou botões pequenos

235. IMPORTANTE:
Mobilesites
são miniaturas
dos websites.

236. Mobilesites
ou aplicativos
Qual escolher?

237. Vantagens dos Mobilesites:
 Mais barato;  São indexados pelo Google;
  Mais empresas  Não depende da aprovação da
capacitadas; Apple;
 Desenvolvimento mais  Conteúdo não fica perdido em
rápido; meio a 30 mil aplicativos;
 Facilidade de manutenção e  Não se restringe somente ao
atualização; iPhone.
 Garante que o usuário
veja sempre a última
versão do site;
 Distribuição facilitada;

238. Vantagens dos Aplicativos:
 Roda Offline e não implica em  Fica instalado no hardware do
custos para o usuário; celular;
 Experiência mais rica de  Mantém um ícone para fácil
navegação; acesso;
 Recursos Gráficos (3D e  Possibilidade de monetização.
animação),  As vantagens do aplicativo tendem
 Integração com câmera, a diminuir cada vez mais, devido à
 GPS e Google Maps, evolução das conexões e dos
browsers.
 Acelerômetro,
 Agenda,
 Mobile Games, etc.

239. Qual a melhor opção?
Depende dos objetivos do site.
Planejamento é essencial.

240. Televisão
Digital

241. TV no Brasil
 Televisão tem 97% de presença nos
lares brasileiros;
 2 de dezembro de 2007: Rede Globo,
Band, SBT, Record e TV Gazeta iniciaram
juntas as transmissões digitais;
 Modelo japonês de TV Digital.

242. Características básicas:
 Maior qualidade de Imagem e Som
 Maior Experiência do Usuário
 Visualização de outras informações da tela
 (saldobancário, resultados esportivos, notícias
no rodapé, previsão meteorológica, redes sociais,
etc.)
 Possibilidade de programação alternativa
 Integração com dispositivos móveis.
“A dona Maria vai poder assistir novela, ver o
resumo do capítulo anterior, comentar sobre
este capítulo, entre outras interações...
somente apertando um botão do controle
remoto”.

243. Redes Sociais:
A Verizon lançou nos Estados
Unidos o aplicativo que
possibilita acessar as redes
sociais Twitter e Facebook pela
TV digital.

244. Ginga -­‐ openginga.org
Sistema Operacional desenvolvido pela
Universidade Federal da Paraíba.
 Baseado em Linux, livre e de código aberto;
 Desenvolvedores do país todo podem
aperfeiçoa-­‐lo
 Permite a criação de aplicativos para TV Digital;
  Novo ramo de negócios - criação de
aplicativos.
 Suporte a:
 T-­‐Commerce
 T-­‐Learning
 T-­‐Health
 T-­‐Gov

245. T-­‐Commerce
 Compras pelo controle remoto
 A TV é mais amigável ao público do
que o computador;
 Credibilidade;
 A TV transmite maior segurança;
 Compra dentro do contexto da
programação.

246. T-­‐Health
T-­‐Gov
Boxee

247. T-­‐Health
T-­‐Gov

249. O que pode ocorrer e
que devemos evitar:
 Excesso de controles-­‐remotos ou
controle-­‐remoto com excesso de botões;
 Simplificar
as interfaces para que
possam ser controladas com poucos
comandos;
 Caso contrário,
a TV ficará tão
complexa quanto o computador.

250. 1984 2000 2008 2013 2030 (?)

251. Requisitos
Operacionais

252. Voltando ao começo da aula...
Requisitos Operacionais:
Determinam os profissionais e máquinas que atuarão na operação do website. Servem
para avaliar a capacidade da empresa em manter o website operando após sua implantação
Criação ou revisão processos internos (resposta de e-­‐mails, manutenção de conteúdos,
entrega de pedidos, etc.)
Capital Humano de desenvolvimento e manutenção.
Restrições jurídicas ou políticas.
Tempo.
Estrutura de trabalho.
Estratégia de Conteúdo.

253. Agora vamos falar de:
Estratégia de Conteúdo

254. Conteúdo é o Rei.
A web é , em suma, conteúdo. E só.

255. Estratégia de conteúdo é o ofício de planejar,
desenvolver e gerenciar conteúdo informativo,
em qualquer tipo de mídia.
O desenvolvimento de uma estratégia de
conteúdo deve ser precedido de uma auditoria
e análise detalhada do conteúdo existente –
Um processo críticamente importante que em
geral é mal trabalhado ou simplesmente
deixado de lado em muitos projetos digitais.

256. Em geral, a estratégia de conteúdo é responsável por:
- Definição de temas e mensagens principais,
- Recomendação de assuntos,
- Definição do propósito do conteúdo
- Análise de lacunas de conteúdo,
- Frameworks de metadados e atributos de
conteúdos relacionados.
- SEO
- Recomendações estratégicas para criação ,
publicação e governança de conteúdo.

257. Principais Atividades
Estratégia editorial – Define os padrões de
governança do conteúdo : Valores, tom de voz,
linguagem, requisitos legais e regulatórios,
controle de conteúdo gerado pelo usuário,
Calendário editorial, e ciclos de vida do
conteúdo.

258. Principais Atividades
Web writing é a prática de escrever um
conteúdo útil e usável , para uso
principalmente em meios online. Isso é bem
mais do que simples redação. É também uma
profunda compreensão de princípios de
experiência do usuário e compreensão da
documentação de arquitetura de informação.

259. Principais Atividades
Estratégia de Metadados é a identificação do
tipo e estrutura de metadados, também
conhecidos como dados sobre dados. Uma
estruturação de metadados inteligente ajuda
editores e publicadores a identificar, organizar,
usar e reutilizar conteúdo de forma que seja
relevante para sua audiência.

260. Principais Atividades
SEO (Search engine optimization) é o
processo de editar e organizar o conteúdo da
página ou do site (incluindo metadados) como
intuito de aumentar a relevância da página em
mecanismos de busca.

261. Gestão de conteúdo é definir as tecnologias
necessárias para captar, armazenar, entregar e
preservar informações sobre uma organização.

262. Estratégia de canais de distribuição de
conteúdo. Define como e onde , qual
conteúdo estará disponível para os usuários.
(Não esqueça do famoso e-mail marketing e
cuide com mensagens que podem parecer
simples intervenções publicitárias, mas que
podem ter algo a dizer.)

263. Concepção
O primeiro passo do
abstrato para o
concreto

264. É a etapa de criação de soluções. É
quando usamos todo o entendimento dos
usuários e começamos a resolver seus
problemas com foco nos pontos fortes da
estratégia de negócio. Aqui começamos a
descobrir soluções inovadores à medida
em que são feitas as definições de Design.
É o primeiro passo do abstrato ao
concreto.
Tem por objetivo criar e avaliar
organização e apresentação dos
conteúdos do site, bem
como os modelos de interação.

265. Processo Iterativo
2. Avalia os
Conceitos 4. Documenta
Conceitos
1. Cria os
Conceitos
3. Refina os
Conceitos

266. 1. Criando os Conceitos
É a etapa de pura estimulação cerebral, criação
e piração em cima do planejamento.
O planejamento encontrou problemas. A função
do arquiteto de informação é encontrar
soluções criativas para esses problemas.

267. Concepção
2. Avaliando os Conceitos
Depois de criados os conceitos, é hora de
verificar se estes são apropriados ao projeto.
o O modelo criado será fácil de
usar e atende às necessidades do
usuário?
o Atende às necessidades do
negócio?
oÉ possível de ser implementado?

268. Concepção
3. Refinando os Conceitos
Ao adotar uma idéia é necessário relacioná-la com
outras idéias adotadas até chegar num MVP.
o Casos de uso
o Protótipos ágeis
O Documentação

269. Modelos Conceituais
Vamos falar de:
Exemplo:
Personas
Cenários
Experience Maps
Design Games
Brainstorm
Sketch
Protótipos – Próxima aula

270. Personas
O que são Personas?
“Persona é uma ferramenta de usabilidade que utiliza pessoas fictícias
(pertencentes a seu público-alvo) para representar usuários de um site ou
produto.” - Wikipedia
 O nome tem origem no teatro.

271. Personas
Pra que serve?
 Vai direcionar a arquitetura de informação de acordo
com o planejamento.
 Possibilita manter o foco nas necessidades e desejos
do usuário;
 Ajudam a questionar se tais recursos seriam
realmente utilizados pelo público e se seria bem
aceito/desejado;
 Possibilita priorizar os esforços e recursos do projeto;
 Elimina possíveis dúvidas durante o processo de
design.
 “Eu imagino que o usuário iria desejar este
recurso”;
 “Se minha mãe fosse uma cliente, ela iria quer
fazer essa tarefa”.
 Permite a constante evolução do design centrado no
usuário.

272. Personas
Como criar Personas?
Deve-­‐se ter o planejamento em mãos, ou seja:
 Pesquisa de público-­‐alvo;
 Entrevistas pessoais com os clientes,
prestadores de serviço, funcionários,
revendedores e todos os possíveis públicos do
site;
 Focus Group;
 Etc.
A aplicação destas pesquisas possibilita
identificar exatamente quais são os públicos do
site e quais suas necessidades com relação ao
meio internet: objetivos, cenários de uso,
tarefas e preferências.

273. Personas
Uma persona deve conter:
 Um nome - facilita a diferenciação entre  Habilidades com informática;
cada persona e a torna mais real. O nome  Alguns poucos dados sobre a vida
deve traduzir as características da pessoa. pessoal, a fim de melhorar a memorização
Ex.: Se a persona pertence à classe social A do perfil e torná-­‐lo mais interessante;
e é jogadora de pólo, não é ideal chamá-­‐la  Motivações e necessidades;
de “Zé”ou de “Luís Inácio Lula da Silva”.  Tarefas e objetivos em relação ao site a
 Uma foto - também deve ser de acordo ser desenvolvido. Ex.: “comparar os
com o perfil da persona. Evitar fotos de diferentes tipos de tarifas do serviço”,
pessoas conhecidas. “aplicar dinheiro de sua conta-­‐corrente”,
 Dados demográficos (sexo, idade, etnia, “visualizar os mais novos lançamentos de
escolaridade, estado civil, classe social, etc.) filmes”.,
 Uma frase que resuma a persona em
 Profissão, cargos e responsabilidades;
relação a seu site. Ex.: “O revendedor multi-­‐
 Algumas poucas características que marcas”, “o revendedor especializado”, “o
determinam sua personalidade; comprador assíduo”, “o comprador por
impulso”.

274. Personas
 Os dados devem ser escritos
em forma de narrativa, como em
uma história real.
 Evite características cômicas,
pois tiram o foco e podem
perder a credibilidade da
persona.
Exemplo -­‐ Locaweb

275. Cenários
O que é?
Cenários são pequenas histórias
sobre um usuário específico e sua
atividade no site. São usados
geralmente junto com as personas
para definir quais devem ser os
principais recursos do site e quais
deles são os mais importantes (e
que devem ganhar destaque no
site).
Os cenários podem ajudar na
definição de tarefas para os testes
de usabilidade também.

276. Cenários
Pra que serve?
O objetivo dos cenários é ilustrar uma situação comum do cliente em relação
à empresa e tentar “prever” (imaginar) qual seria o próximo passo do cliente.
Ex.: “Andréa está no shopping fazendo compras, mas na hora de realizar o
pagamento seu cartão não funciona corretamente. Frustrada, Andréa vai até
sua casa, acessa o site do cartão e deseja obter respostas sobreo que pode ter
acontecido com seu cartão”.
Os cenários podem ser:
 Direcionados a tarefas/objetivos: “Você irá viajar no dia seguinte e deseja
confirmar os dados e horários de seu vôo”.
 Elaborados: junta os itens da persona à uma tarefa específica, de forma que
se analise melhor o contexto de uso da ferramenta.

277. Personas / Cenários
Desafios
Observar as pessoas é fácil, mas resumir essas pessoas em poucas
palavras ou ações é um pouco mais complicado.
Deve-­‐se tomar cuidado para não criar personas que caracterizam
um ideal de consumidores, muitas vezes exploradas pela empresa
em campanhas publicitárias.
Deve-­‐se analisar a fundo o público e retratar quais são suas reais
necessidades e anseios.
Um persona mal planejada ou mal desenhada pode desestruturar o
projeto do site, pois é ela que vai guiar todo o processo.
Personas são um meio muito eficaz de comunicação interna da
equipe. Na Microsoft, por exemplo, esse método é muito utilizado
nos projetos de software. Eles criam cartazes atraentes comparando
as características das personas, imprimem camisetas, bonés e até
mesmo canecas com os seus rostos, tudo para lembrar
constantemente a equipe do foco do projeto.

278. Modelos Conceituais
O que são?
Sinônimos: Mapas Conceituais / Diagramas de
Afinidade
 São diagramas que mostram
relações entre diferentes conceitos
abstratos.
 Utilizado para evidenciar a
variedade de idéias e interações
dentro de um website e as relações
entre elas.

279. Modelos Conceituais
Como são?
Basicamente, eles são compostos por objetos e verbos.
Mostram a relação entre dois objetos dentro de um determinado contexto
de forma bem simples.
OBJETO - VERBO - OBJETO
passeia com que veste
Homem Cachorro Coleira

280. Modelos Conceituais
Para que servem?
Em grandes projetos, com inúmeras interações, fica complicado explicar
como essas relações e interações funcionariam na prática.
Os modelos conceituais são utilizados para comunicar essas idéias (conceitos
abstratos) para equipe envolvida no brainstorm.

281. Modelos Conceituais
Como montar?
Nó Nó
-­‐ Conteúdos
-­‐ Processos
-­‐ Pessoas
-­‐ Dados
-­‐ Grupos
Categorias
-­‐ Eventos
-­‐ Sistemas
-­‐Outros
conceitos

282. Modelos Conceituais
Com o que se parece?

283. Modelos Conceituais
Exemplo:

284. Modelos Conceituais
Exemplo:

285. Modelos Conceituais
Exemplo:

286. Brainstorm
Frog Design
Exemplo:
-Você deve pensar fora da caixa, mas dentro da estratégia.
-Comece com as perguntas corretas. Isso vai orientar você
para as respostas corretas. – De Design.
-Quanto mais tempo você dá para o brainstorm, menos
tempo terá para se concentrar.
-Ao criar metas impossíveis, mais provavelmente você irá
pensar em soluções inesperadas.
- Não se apaixone por suas idéias. Haja como se você
estivesse numa troca de casais até que acabe seu tempo.

287. Brainstorm
IDEO - As sete regras do brainstorm
Exemplo:
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!
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.
Mantenha o foco no tópico do brainstorm
Os melhores resultados são obtidos quando todos mantiverem a disciplina.
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.

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

289. Modelos Conceituais
Exemplo:
Em design,
quantidade e
qualidade são
grandezas
diretamente
proporcionais.
Nos vemos na próxima aula.

290. Especificação

291. Processo Iterativo
2. Avalia os
Conceitos 4. Documenta
Conceitos
1. Cria os
Conceitos
3. Refina os
Conceitos

292. Documentando os
Conceitos
É nesta fase que as regras e diretrizes da
arquitetura de informação são formalizadas no
papel.
Esta fase é importante para garantir que todo o
processo de design posterior siga essas diretrizes.
Trata-­‐se da conclusão de toda a etapa de
Concepção, incluindo o material de pesquisa.

296. Definição de produto
A definição de produto é um documento com
todos os conceitos que foram formados a partir
da pesquisa acerca das expectativas do cliente e
das necessidades dos usuários.
É uma referência estável para o desenvolvimento
coeso de todas as questões subjetivas do projeto
como design de interação , design visual e
estratégia de conteúdo. Neste documento
estarão as principais conclusões da pesquisa e a
consolidação das expectativas do cliente para que
todo o projeto se desenvolva de maneira
coerente.

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

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

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

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

308. 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.
Quem é que usa? 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.

309. Estamos chegando na ponta do Iceberg

310. Projetando uma Vaca: As etapas do Wireframe
Sketch (Rabiscoframe) Identificação (Mockup) Representação
Protótipo
Desenvolvimento Layout

311. Etapas do Wireframe:
Sketch (low fidelity)

312. Etapas do Wireframe:
Identificação

313. Etapas do Wireframe:
Representação (High Fidelity)

314. Etapas do Wireframe:
Protótipo Navegável

315. Ferramentas - Prototipação e Wireframe
Mockup Screens
Fore UI http://mockupscreens.com/
http://www.foreui.com/
Denim
Axure http://dub.washington.edu:2007/projects/denim/
http://www.axure.com/
Fluid IA
IRise http://www.fluidia.org/
http://www.irise.com/
Oversite
Omnigraffle http://taubler.com/oversite/
http://www.omnigroup.com/applications/OmniGraffle/
Microsoft Visio
Balsamic http://office.microsoft.com/pt-br/visio/FX100487861046.aspx
http://www.balsamiq.com/
Adobe InDesign
Justproto
http://www.justproto.com/en/ Power Point (Nããããããããããão!!!!)

316. Baixa fidelidade X Alta fidelidade
Vantagens Vantagens
- Rapidez - Validação consistente e persuasiva com o cliente.
- Custo - Facilita a compreensão de montagem do layout e da programação
- Liberdade para o designer dos aplicativos.
- Facilita a refação - Possibilita o teste com usuários antes da definição do layout.
Desvantagens Desvantagens
- Pouca credibilidade (principalmente com - Requer esforço e tempo, o que pode atrasar o processo e aumentar
clientes) custos
- Maior margem de erros - O foco pode se desviar prematuramente da arquitetura de
- Difícil de ser testado informação para a interface e design visual.
- Exige mais de programadores e designers - Pode amarrar o trabalho do designer
- Requer desenvolvimento em conjunto.
- Menos intuitivo.

317. - Enumere as páginas do Wireframe/Protótipo.
- Coloque nomes claros nas páginas do Wireframe e nos
arquivos de protótipos, incluindo a data da última revisão.

318. Dicas:
Faça comentários, descreva textualmente as interações.
Pode usar as laterais do protótipo para isso.
Avalie se é mais produtivo simular as interações ou explicá-las.

319. Dicas:
- Consulte Bibliotecas de padrões de navegação (Pattern Libraries). Comece a
fazer a sua própria.
- Estabeleça padrões para o desenvolvimento de Wireframes em grupo.
Algumas bibliotecas de padrões:
Martijn van Welie
http://www.welie.com/patterns/
Yahoo Pattern Library
http://developer.yahoo.com/ypatterns/
E muitas outras:
http://delicious.com/viniciuskrause/biblioteca-de-padroes

320. Dicas:
Distribua o conteúdo em ordem de importância decrescente, de
cima para baixo, da esquerda para direita. Lembre da hierarquia
visual.
Mais importante
Menos importante

321. Dicas:
Lembre-se das convenções. Se não lembrar, dê uma
olhada no que já existe.

322. Dicas:
Faça testes informais com você mesmo e
com outras pessoas enquanto desenha.

323. Dica final:
WIREFRAME
NÃO É
LAYOUT !!!

324. Implementação
e metodologias

325. Implementação
O que é :
É o acompanhamento do projeto durante o desenvolvimento, após as
definições de Design. É a hora de garantir que os cliente ou desenvolvedores
não tenham nenhuma dúvida sobre o projeto e que as decisões de design
serão implementadas de forma coerente e detalhada.
Também é quando ajudamos clientes que já tem um produto desenvolvido a
melhorar seus resultados e desenvolver as habilidades de UX internamente.
Objetivos:
Assegurar o padrão de qualidade e a consistência do design no
desenvolvimento de projetos.

326. im.ple.men.tar
1 Executar (um plano, p ex)
2 Levar à prática por meio de
providências concretas.
3 Prover de implementos.
(Dicionário Michaelis)

327. Fluxo básico de projetos digitais
Prospeção Planejamento estratégico Criação Desenvolvimento
Briefing AI Conteúdo Produção Publicação

328. O que entregamos:
Pesquisa Concepção Especificação
Workshops Relatórios Workshops
Relatórios Workshops Relatórios
Estruturas Wireframes

329. Criação
A função da arquitetura de
informação não é “engessar” a
criação.
O criador tem liberdade para
alterar a disposição dos
elementos se julgar necessário,
mas o arquiteto de informação
deve validar se essas alterações
não prejudicam a usabilidade do
site ou a experiência do usuário
como um todo.

330. HTML / CSS
Deve validar:
 Navegação (hiperlinks);
 Acessibilidade;
 Usabilidade;
 Disposição dos elementos da
</head> mesma forma do layout.
<body>

331. Desenvolvimento
Deve validar as interações:
 Mensagens de erro e
confirmação;
 Validação de formulários;
 Condicionais de navegação;
 etc.

332. Mas não adianta
as demais áreas
tomarem ciência
do projeto
somente no
final.

333. É imprescindível a
presença da equipe
toda durante todo o
processo de design e
implementação.
Garantir:
 Escopo
 Prazo
 Qualidade

334. Os problemas freqüentes
na implementação de
projetos fizeram muitas
outras metodologias
surgirem, a fim de
chegarem a um ideal.
Foram chamadas de
Metodologias Ágeis

335. Introdução às Metodologias Ágeis
Minha avó me chamou
para visitá-­‐la e para
degustar seu famoso
“arroz temperado”
Sábado, às 13h, em sua casa.
Baseado na explicação de Guilherme Chapiewski -­‐ http://gc.blog.br/

336. Como ela chegou neste
horário final?
 Ela irá acordar às 8h;
 Banho até as 8h30min;
 Café da manhã até as 9h;
 Consulta médica às 10h;
 Supermercado às 11h;
 Voltará para a casa às 12h;
 Almoço pronto às 13h.

337. O ônibus atrasar para ir ao médico?
O médico demorar para atendê-­‐la?
 Não tiver os ingredientes
necessários no supermercado?

338. “Meu filho, você se
importa se eu fizer
aquela sopa que
você adora, ao invés
do arroz temperado?”

339. Objetivo primário:
Reencontrar minha avó
(concluído com êxito)
Objetivo secundário:
Saciar minha fome
(concluído com êxito)

340. Escopo Variável
 Sempre há um escopo
 Teoricamente, deve
permanecer do início ao fim do
projeto, pois foi assim
prescrito no contrato.
O que há, na verdade, é uma
ilusão de
previsibilidade

341. Cliente acredita que
encontrará:
 Escopo Previsível
 Prazo Previsível
 Custo Previsível

342. Empresa contratada acredita que saberá:
 O que terá de fazer;
 Em quanto tempo;
 Quanto vai ganhar;
 Com quais recursos.

344. Mito nº1
O cliente sabe o
que quer desde o
início do projeto;
Inclusive de seus problemas de
comunicação.

345. Mito nº2
A equipe consegue
estimar exatamente
o tempo necessário
para produção.

346. Mito nº3
O cliente consegue
comunicar todos
os requisitos ou
problemas que
pretende resolver.

347. A previsibilidade
vai por água
abaixo.

348. Variáveis dos
projetos:
 Custo
 Prazo
 Qualidade
 Escopo

349. O escopo
absorve as
incertezas
do projeto

350. Freqüência de uso dos
recursos de um sistema:
Priorização do
Escopo
Princípio de Pareto se aplica ao
software:
20% das funcionalidades geram
80% do valor para o cliente.
Fonte: Lean Software Development, Mary Poppendieck e Tom Poppendieck, Addison-­‐Wesley, 2003, p. 32

351. 24 horas
Ciclo PDCA
1. Plan
2. Do
3. Check
4. Act
2 semanas
Processo Iterativo e
Incremental

352. Equipes enxutas e eficazes
 Entre 5 e 10 membros
 Auto-­‐organizadas
 Multidisciplinar

353. Entregas
Freqüentes
 Conseqüência da priorização
 Metáfora da “Casa Limpa”

354. Tempo Fluxo de Caixa
do cliente
Foco no Essencial - ROI
Retorno desde o início do projeto
(menor, mas contínuo)

355. Simplicidade é
essencial

356. Flexibilidade para
mudanças
 Mesmo durante a implementação;
 Mudanças garantem a vantagem
competitiva do cliente.

357. Feedback rápido
 O clienteé quem mais entende
de seu produto e objetivos;
 Deve estar presente em todo o
processo de desenvolvimento;
 Contribui para priorizar o escopo;
 Economia de tempo e
flexibilidade para ajustes.
AGÊNCIACLIENTE

358. Incentivar
comunicação
entre a equipe
 Deixarambiente de trabalho
agradável;
 Trazer as pessoas para
trabalharem mais próximas;
 Fornecer ferramentas práticas
para facilitar essa comunicação.

359. Entregar sistema
funcionando
SEMPRE!
Garantido pela:
 Iteratividade
 Comunicação facilitada
 Feedback rápido
 Escopo variável

360. Validar e testar
sempre!
Testar uma vez é melhor
do que testar nenhuma.

361. O que todas as
metodologias buscam?
 Sistema para resolver um
problema do cliente;
 Sistema simples de manter e
evoluir;
 Projeto com menor custo e
prazo possível.

362. Metodologia Ágil
Cultura Ágil

363. Cultura Ágil:
Em 2001, 17 especialistas em
gerenciamento de projetos
foram a fundo nas
metodologias para descobrir
o que elas tinham em
comum.

364. Manifesto Ágil
 Indivíduos e interações mais que
processos e ferramentas
 Software que funciona mais que
documentação completa
 Colaboração do cliente mais que
negociação de contratos
 Responder à mudança mais que
seguir um plano
www.agilemanifesto.org

365. A adoção com sucesso de metodologias ágeis podem ser
consideradas como diferencial competitivo para as
agências e produtoras de software.

366. É uma forma de
garantir sempre a
qualidade de seus
trabalhos e o ROI do
cliente antes do tempo

367. E, claro,
garantir a
satisfação de
seu cliente

368. Testes de
Usabilidade

391. Mundo da
Arquitetura de
Informação

392. Listas de Discussão
Sigia (Special Interest Group Information Architecture)
American Society for Information Science and Technology (ASIS&T)
http://www.asis.org/
IXDA
Interaction Design Association
http://www.ixda.org/join.php
AifiA
Asilomar Institute for Information Architecture
Inglês: http://lists.iainstitute.org/listinfo.cgi/iai-members-iainstitute.org
Português: http://lists.ibiblio.org/mailman/listinfo/aifia-pt
Acesso Digital
http://groups.google.com/group/acessodigital
Desinterac
Instituto Faber Ludens
http://groups.google.com/group/desinterac

393. Eventos
UX week
Adaptive Path EuroIA
American Society for Information Science and Technology
http://www.uxweek.com/
(ASIS&T)
http://www.euroia.org/
IA Summit
American Society for Information Science and UX London
Technology (ASIS&T) Clearleft
http://www.iasummit.org/ http://uxlondon.com/
Usability Week
Nielsen Norman Group Interaction South America
http://www.nngroup.com/events/ IXDA
http://www.interaction-southamerica.org/?lang=en
Interaction
Interaction Design Association
http://interaction.ixda.org/

394. Ferramentas
Prototipação e wireframe
Fore UI
http://www.foreui.com/ Mockup Screens
http://mockupscreens.com/
Axure
http://www.axure.com/ Denim
http://dub.washington.edu:2007/projects/denim/
IRise
http://www.irise.com/ Fluid IA
http://www.fluidia.org/
Omnigraffle
http://www.omnigroup.com/applications/OmniGraffle/ Oversite
http://taubler.com/oversite/
Balsamic
http://www.balsamiq.com/ Microsoft Visio
Justproto Adobe InDesign
http://www.justproto.com/en/

395. Ferramentas
Card-sorting
Web Sort
http://websort.net/
Optimal Sort
http://www.optimalsort.com/pages/default.html
Questionários on-line
Wufoo
http://wufoo.com/
Google Docs
http://docs.google.com/
Brainstorm e Mapas mentais
Bubbl
http://www.bubbl.us/
Mindmanager
http://www.mindjet.com/

396. Análise de Metadados
Google Analytics
http://www.google.com/analytics/
Google Adwords
http://www.google.com/adwords/
Google Trends
http://www.google.com/trends/
Alexa
http://www.alexa.com/
Teste de usabilidade
Clicktale
http://www.clicktale.com/
Userfly
http://userfly.com/
Morae
http://www.techsmith.com/morae.asp
Faststone Capture
http://www.faststone.org/FSCaptureDetail.htm
Jing
http://www.jingproject.com/

397. Bibliotecas de Padrões de navegação
Yahoo Pattern Library
http://developer.yahoo.com/ypatterns/
Welie
http://www.welie.com/
Muito mais:
http://delicious.com/viniciuskrause/biblioteca-de-padroes
Extensões
Measure it
https://addons.mozilla.org/pt-BR/firefox/addon/539
Firebug
https://addons.mozilla.org/pt-BR/firefox/addon/1843
Web Developer
https://addons.mozilla.org/pt-BR/firefox/addon/60
Delicious
http://delicious.com/help/quicktour/firefox
IE Tab
https://addons.mozilla.org/pt-BR/firefox/addon/1419

398. Blogs – Mundo afora
Louis Rosenfeld Adaptive Path
http://louisrosenfeld.com/home/ http://www.adaptivepath.com/blog/
Peter Morville Boxes and Arrows
http://www.findability.org/ http://www.boxesandarrows.com/
Jakob Nielsen UX Magazine
http://www.useit.com/ http://uxmag.com/
Donald Norman A List Apart
http://jnd.org/dn.pubs.html http://www.alistapart.com/
Luke Wroblewski UX Booth
http://www.lukew.com/ff/ http://www.uxbooth.com/
Jakub Linowski Smashing Magazine
http://linowski.ca/thoughts/ http://www.smashingmagazine.com/
http://wireframes.linowski.ca/
Jesse James Garret
http://blog.jjg.net/
Donna Spencer
http://maadmob.net/donna/blog/

399. Blogs – Brasil
Luiz Agner Arquitetura de informação
http://www.agner.com.br/ http://arquiteturadeinformacao.com/
Rogério Pereira UX Blog - Locaweb
http://www.rogeriopa.com/ http://uxblog.locaweb.com.br/
Leonardo Xavier Talk2
http://leonardoxavier.typepad.com/mobilizado/ http://www.talk2.com.br/
Luli Radfahrer
http://www.luli.com.br/
Frederick van Amstel
http://usabilidoido.com.br/
MAQ
http://www.bengalalegal.com/

400. Empresas
Google
http://www.google.com/corporate/ux.html
Apple
http://goo.gl/JmL3f
IDEO
http://www.ideo.com/work/human-centered-design-toolkit/
Huge
http://www.hugeinc.com/
Frog
http://www.frogdesign.com/
Cooper
http://www.cooper.com/
Facebook
http://developers.facebook.com/policy/
Clearleft
http://clearleft.com/
FI
http://www.f-i.com/
Adaptive Path
http://www.adaptivepath.com/

401. 1 Respeitar o processo mas saber
quando ignorá-lo.
Tudo tem um jeito certo de fazer e um jeito
que tem que ser feito. É importante aplicar
as técnicas corretas da forma correta, mas
às vezes é importante resolver o problema
de uma forma eficiente e sem frescura.

402. 2 Acreditar no que está fazendo e se
livrar das buchas da forma mais
eficiente possível.
Não gaste um precioso tempo da sua vida
fazendo uma coisa que você mesmo não
acredita. As buchas virão com certeza,
mas se empenhe em fazer algo que seja
interessante, onde você possa aprender
alguma coisa e que te dê orgulho.

403. 3 Não se apegar ao projeto. O mundo
todo muda e o seu projeto também.
As vezes a melhor solução pode não sair
da sua cabeça. Esteja atento as melhores
soluções e não a sustentação da sua
vontade.

404. 4 Compartilhe rápido e frequentemente.
Design centrado na preguiça não é uma
coisa muito inteligente; iteratividade é
fundamental pra qualidade. Fazer dez
vezes a mesma página pode te livrar de
fazer dez vezes o mesmo site.

405. 5 Não seja um mala.
Esqueça o seu ego. Não faça tudo
sozinho. Admita quando não souber de
alguma coisa e vá atrás de saber ou
descobrir quem sabe. Lembre-se de que
você não faz sites para você mesmo então
não faz muito sentido brigar pelo o que
você simplesmente acha melhor.
Argumente, defenda suas O usuário é o
juiz do seu trabalho.

406. 6 Coloque o seu na reta.
Não seja um bunda mole. Tome decisões,
tenha iniciativa, não fique esperando
chegar serviço na sua mão. Existe um
mundo de coisas a serem feitas. Invente
moda e faça o melhor possível para
resolver qualquer problema que o impeça
de fazer um bom trabalho.

407. 7 Acompanhe o projetos do começo ao fim.
Nossa responsabilidade não acaba quando
entregamos o Wireframe. Nosso compromisso
é com o produto final, no ar, funcionando e
dando resultado. Acompanhe o processo de
desenvolvimento e vá atrás dos fundamentos
do seu projeto seja com cliente, planejamento
ou atendimento.

408. 8 Aprenda como se faz; saiba um pouco
pelo menos de HTML CSS e quem sabe
PHP.
Além de aumentar sua versatilidade
profissional, vamos dar menos trabalho
para desenvolvedores e saber propor
soluções adequadas.

409. 9 Comunicar é mais importante que
documentar.
Não adianta produzir um monte de
papelada técnica se ninguém as usa e
ninguém as entende. Um papel e caneta
muitas vezes resolve o problema. O
importante é ter certeza de que todos os
interessados entenderam sua mensagem.

410. 10 Foco na qualidade do seu trabalho.
Se você não fizer isso pela empresa, faça
por você. Preocupe-se em facilitar a vida
das pessoas para que no fim das contas
alguma coisa legal vá para o ar e você
tenha contribuído para isso acontecer.