UX/UI DESIGN

Professora: Jeneffer Cristine Ferreira

Roteiro

•Requisitos de Projeto
• Arquitetura de Informação e programação de interface
Arquitetura de Informação
If you’ve ever tried to use
something and thought,
“where am I supposed to go next?”
or “this doesn’t make any sense,”
you are encountering an issue
with an Information Architecture.
Se você já tentou usar algo e pensamento, "Para onde devo ir a seguir?" ou “isso não faz sentido”,
você está encontrando um problema com uma Arquitetura da Informação. The Information Architeture Institute
 RESULTADOS POSSÍVEIS

1. 2.
Você se sente um 3.
Não há sinais claros Com informações
pouco para encontrar os itens
perdido em busca dos insuficientes ou exibição
ou anúncios apropriados inadequada do produto
produtos e isso leva à que levam a uma melhor
agonia mental. você pode vagar por
experiência de compra. muito tempo para
encontrar um único
item.
 RESULTADOS POSSÍVEIS

1. 2. 3.
A capacidade de Informações suficientes Fácil de encontrar os
encontrar itens é fornecidas a você levam itens desejados para
provavelmente maior a uma experiência de você, incentiva você a
para você. compra mais suave. explorar mais.
Informação e conhecimento na era digital: origem
da Arquitetura da Informação

A Arquitetura da Informação tem sua origem no campo da Ciência da Informação, o qual

estuda a “ação mediadora entre a informação e o conhecimento do indivíduo, assim como
as transformações vindas do aprendizado pessoal em um sentido que passa do mundo
interno para externo do indivíduo”.
(TEIXEIRA, 2014, p.33)

Por isso, para entendermos a Arquitetura de Informação precisamos

compreender antes o conceito de dado, informação e conhecimento.
PRINCÍPIOS BÁSICOS

O que é? Porque é importante?

 O QUE É?
Arquitetura da Informação, termo (1976) por
Richard Saul Wurman, é focado
principalmente na navegação, rótulos,
conteúdo, agrupamento de informações
relacionadas e os fluxos de
informações em todo o sistema.

Livros relacionados:
Wurman, Richard Saul, ed. (1999). Ansiedade De Informação. Como
Transformar Informação Em Compreensão - Volume 1
Wurman, Richard Saul, ed. (2005). Ansiedade De Informação 2
 O que é Arquitetura de Informação?
A Information Architecture Institute (IAI) define Arquitetura de
Informação como:
A prática de decidir como arrumar as partes de algo para serem
compreendidas. Ela está nos websites que usamos, nos apps e softwares que
baixamos, nos materiais impressos que encontramos e até mesmo nos
lugares físicos que passamos o tempo.

Arquitetura de Informação também pode ser definida como:

Um novo campo do webdesign que difere do design ou da programação visual pelo fato
de focalizar a estrutura do website, e não sua funcionalidade ou seu aspecto gráfico.

Seu objetivo é a construção de websites fáceis de usar, que preencham

as necessidades dos clientes e os objetivos dos usuários.
A arquitetura da informação é a prática de
decidir
como organizar as partes de algo para ser
compreensível.

The Information Architeture Institute

 O Papel do Arquiteto de Informação
Design:
Projetar soluções que reconciliam as necessidades dos
usuários, os objetivos do negócio e as capacidades da
tecnologia.
Gestão:
Gerenciar as equipes multidisciplinares, que projetam e
implementam as soluções. Monitorar e avaliar equipes,
definir tarefas do projeto, cronograma, recursos
humanos e financeiros.
Pesquisa:
Realizar pesquisas com usuários, utilizando técnicas
como entrevistas, questionários, grupos de discussão,
estudos etnográficos e testes de usabilidade.
Mediação:
Educar, advogar e traduzir os requisitos do projeto para
as audiências internas.

(AGNER, 2007, p.85; MORROGH, 2003, apud AGNER, 2007, p.85)

CARACTERÍSTICA FUNDAMENTAIS
 Encontrabilidade

Precede a usabilidade, ou seja, os dados e informações

em que o usuário busca tem que ser de fácil acesso
antes de ser usada em sua necessidade.
QUAIS AS QUESTÕES A PENSAR ANTES DE
TUDO?

▹ Quais são as tarefas que o usuário necessita

completar?

▹ Como eles navegam facilmente entre os elementos?

▹ Como fornecer as informações corretas para os

usuários nos locais apropriados onde eles querem?
 QUAL O RESULTADO?

Informa a estratégia de conteúdo através da

identificação de escolha de palavras (taxonomia),
bem como informando o design da interface do
usuário e o design de interação, desempenhando
um papel nos processos de briefing, sitemap,
wireframing e prototipagem.
PORQUE É IMPORTANTE?
▹ O custo de não encontrar a informação é alto;

▹ A construção, manutenção e treinamento

podem ser menos custosas;

▹ Aumenta o valor da marca;

▹ Aumenta o potencial de ganho financeiro e

satisfação do cliente.
 AI com SISTEMAS DE
INFORMAÇÃO
Lou Rosenfeld e Peter Morville em seu livro, Information Architecture for the
World Wide Web, falam dos principais sistemas do IA:
 Informação
Para criar esses sistemas de informação, você precisa entender a
natureza dos usuários, conteúdo e contexto.

Usuário: audiência, tarefas, necessidades,

comportamento de busca de informação,
Experiência

Contexto: Metas de negócios, financiamento,

Política, cultura, tecnologia, recursos, restrições;

Conteúdo: objetivos de conteúdo, tipos de

documentos e dados, volume, estrutura existente,
governança e propriedade;
 Informação
USUÁRIOS
Quem são eles, qual seu
comportamento padrão de
busca de informação e quais
são suas necessidades.
- Pesquisas com usuários;
- Definição das
necessidades;
- Personas;
- Etnografia;
- Análise de tarefas;
- Testes de usabilidade;
- Documentação;
CONTEXTO
compreende as políticas,
cultura, objetivos de negócio,
missão, estratégia, processos
e orçamento de uma
organização;
- Definição dos requisitos do
negócio;
- Definição do escopo;
- Gerenciamento de projetos;
- Análise de negócios;
- Expectativas do cliente;
- Definição das restrições;
CONTEÚDO
inclui os documentos, imagens,
mídias, gráficos, planilhas e
metadatas que os usuários
utilizam rotineiramente ou
precisam encontrar.
- Indexação e catalogação;
- Análise de XML e metadata;
- Mapeamento de sites;
- Gerenciamento de conteúdo;
- Análise de tarefas;
- Teste de usabilidade;
- Navegação e rotulação;
-
 Informação

CARGA COGNITIVA TOMADA DE DECISÃO

MODELOS MENTAIS
• é a quantidade de informação pode não parecer psicologia, mas
• são as suposições que as
que uma pessoa pode é!
pessoas carregam em suas
processar a qualquer momento. • É um processo cognitivo que
mentes antes de interagir com
nos permite fazer uma escolha
um site ou aplicativo.
• Ter em mente a carga cognitiva ou selecionar uma opção.
do usuário ajuda a impedir que
• A informação é mais fácil de
os arquitetos da informação • Os arquitetos de informação
descobrir quando está em um
sobrecarreguem podem nos ajudar a tomar
lugar que corresponde ao
inadvertidamente um usuário decisões fornecendo certas
modelo mental do usuário de
com muita informação de uma informações em momentos
onde deveria estar.
só vez. importantes.
Sistemas de
ORGANIZAÇÃO
Formato
Tamanho
Cor
Número de Furos
Estampa
Material
Tipo de Uso
Público
 SISTEMA DE ORGANIZAÇÃO

Define as regra de classificação e Organizações Exatas:

ordenação tratando da Alfabética, Tempo,
categorização do conteúdo. Localização e
Sequência.

Um dos primeiros entregáveis é o Organizações

sitemap. Ambíguas:
Assunto, Tarefas, Público,
Metáfora

Organizações Híbrida.
 SISTEMA DE ORGANIZAÇÃO

Determina como é apresentada a organização e a categorização

do conteúdo. É dividido entre estruturas e esquemas.

Estruturas:
São o tipo de relação entre itens e grupos: podem ser
taxonomias, bancos de dados ou redes.

(AGNER, 2009, p.97)

TAXONOMIA
QUE TRECO É ESSE?
 QUE TRECO É ESSE?
• Taxonomia é a etapa de agrupamento dos conteúdos e ações de acordo com
o significado.

• Nessa etapa é importante estruturar a informação na forma de um

organograma, sendo seus desdobramentos um mapa do site, um wireframe ou
fluxos de uso.
 SISTEMA DE ORGANIZAÇÃO
Esquemas:
São regras para apresentação de itens específicos e podem ser
classificados em ambíguos e exatos.

Esquema Ambíguo: Esquema Exato:

Baseiam na ambiguidade da linguagem e na Dividem a informação entre seções bem

subjetividade. definidas e mutuamente excludentes,
Podem ser ordenados por: tornando óbvia a localização dos itens.
- Temas Podem ser:
- Tarefas - Alfabético
-Publico - alvo - Cronológico
- metáforas - Geográfico
-Esquema Hibridos ( misturas dos demais
elementos)
 A organização deve refletir sempre a
necessidade do usuário, não a estrutura
organizacional da empresa.
Sistemas de
ROTULAÇÃO
 SISTEMA DE ROTULAÇÃO
Todo rótulo traz um significado e
deve ser claro o suficiente para
que o usuário saiba exatamente no
que vai clicar ou acionar.
Os significados mudam de acordo
com a(o):
Cultura;
Função;
Tempo;
Variação Gramatical;
DICA:
▹ Procure cobrir todo o conceito do
conteúdo;
▹ Mantenha a sintaxe;
▹ Manter padrão Visual;
▹ Manter o tom de voz;
▹ Evite Siglas;
▹ Ícones são bem vindos, mas cuidado ao
usá-lo isolado;
Sistemas de
NAVEGAÇÃO
 SISTEMA DE NAVEGAÇÃO

É muito importante sempre Principais Elementos:

garantir que o usuário saiba: ▹ Logotipo;
▹ Menu de navegação global (1o. nivel);
DE ONDE VIM? ▹ Menu de navegação local (2o. nivel);
ONDE ESTOU? ▹ Breadcrumb;
QUAL MEU PONTO DE ▹ Passo a Passo;
REFERÊNCIA? ▹ Cruzada (sugestão de conteúdo
PARA ONDE POSSO relacionado);
(DEVO) IR? ▹ Mapa do site (sistema);
▹ Índice;
 SISTEMA DE NAVEGAÇÃO
Especificam formas de se mover através do espaço informacional. A função da
navegação é mostrar claramente por onde o usuário caminhará na Arquitetura de
Informação.
(AGNER, 2009, p.97; WODTKE, 2009, p.189; ROSENFELD et al., 2015, p.177)

Existem 3 tipos principais de navegação:

global, local e contextual.
Nem sempre o menor
caminho é o melhor.
Sistemas de
BUSCA
SISTEMA DE BUSCA
É a ferramenta que cria um
atalho entre o conteúdo do
sistema.
IMPORTANTE:
O sistema tem conteúdo ou
tarefas suficientes para que
seja necessário a
implementação?
Principais Elementos:
▹ Interface inicial:
Que tipo de busca deve ser procurado? E onde
ele
busca? Botão de Busca sempre presente.
▹ Interface do resultado de Busca:
Qual informação vai exibir? Como exibir? Quais
as
informações são necessárias?
▹ Interface de busca sem resultados:
Sugerir outros resultados é interessante;
▹ Ofereça ajuda.
 DICAS
▹ Mantenha o campo em
todas as páginas;
▹ Indique o que ele pode
buscar;
▹ Sugira correções na busca;
▹ Faça sugestões de busca;
▹ Repita os termos
buscados;
▹ Destaque os termos que
foram buscados;
▹ Apresente o número de
resultados encontrados;
▹ Agrupe resultados;
▹ Ofereça filtros e opções
de ordenação;
 Artefatos

da Arquitetura de Informação
 Sitemap
• Mostram as relações entre páginas e seus conteúdos :
https://freesitemapgenerator.com/

• Sitemaps oferecem um esquema de navegação que parte de

um conteúdo principal e já mostra a grandiosidade do projeto, o
arquiteto de informação através de um sitemap já consegue
rotular seções e conseqüentemente agrupar o conteúdo de
maneira lógica e funcional.
Sitemap
 Sitemap
Ferramenta de criação

Se você é do time que prefere usar uma ferramenta para fazer o seu
sitemap, algumas opções são:
Google XML Sitemaps: um plugin gratuito para WordPress que gera o
sitemap para você.
Yoast SEO: plugin para WordPress voltado principalmente para
otimizações de SEO, mas também tem a opção de gerar sitemap.
XML-Sitemaps: uma ferramenta online que gera o sitemap em texto,
html ou xml de forma simples e rápida. Basta você colar o link do seu
site e apertar start.
GSiteCrawler: é um simulador de rastreador que analisa o site e com
base nisso cria um sitemap.
O iceberg da arquitetura de informação poderia ser resumido no esquema a seg

Retirado de Rosenfield & Morville

 Para concluir!!
A disciplina de Arquitetura da Informação é muito rica em teoria e prática. Cabe ao arquiteto da informação
através do estudo e das boas práticas:

1 Determinar as necessidades do cliente;

2 Elaborar o projeto para o desenvolvimento de soluções;
3 Desenvolver wireframes e/ou protótipos;
4 Aplicar testes de usabilidade
5 Implementar a solução;
 Bibliografia
AGNER, L. Ergodesign e arquitetura de informação: trabalhando com o usuário. Rio de
Janeiro: Quarter, 2006. ISBN: 978-85-7812-0 17-7.

AGNER, L.; MORAES, A. Arquitetura de Informação e Governo Eletrônico: Diálogo

Cidadãos-Estado na World WideWeb –Estudo de Caso e Avaliação Ergonômica de
Usabilidade de Interfaces Humano-Computador. Rio de Janeiro, 2007. 354p. Tese de
Doutorado –Departamento de Artes e Design, Pontifícia Universidade Católica do Rio de Janeiro.

GARRETT, J.J. The Elements of User Experience: User-centered design for the web and
beyond. 2a ED. Berkley: New Riders, 2011. 172p. ISBN: 978-0-321-68368-7.

RONDA LEÓN, R. Arquitecturade Información: análisishistórico-conceptual. No Solo

Usabilidadjournal, 28 abr. 2009. Disponível em: <http://
www.nosolousabilidad.com/articulos/historia_arquitectura_informacion.htm>

RESMINI, A.; ROSATI, L. Pervasiveinformationarchitecture: designingcross-

channeluserexperiences. Morgan Kaufmann, USA, 2011. 250p. ISBN: 978-0-12-382094-5.
Por hoje é só pessoal.