Arquitetura Da Informação e Design de Interação

UX DESIGN E
LEARNING EXPERIENCE
2
WWW.DESENHOINSTRUCIONAL.COM
Copyright 2007. IDI. Todos os Direitos Reservados.

Disciplina 5
ARQUITETURA DA INFORMAÇÃO
E DESIGN DE INTERAÇÃO
OBJETIVOS DA DISCIPLINA:
Entender profundamente o que é Arquitetura da Informação e qual sua impor-
tância para o desenvolvimento de produtos que proporcionam boa experiência
de uso. Além disso, discorrer sobre aspectos fundamentais do Design de Inte-
ração, como usabilidade e boas práticas.
CONTEÚDOS ABORDADOS:
• Arquitetura da Informação
• Design de Interação
• Leis da Simplicidade
• Heurísticas de Jakob Nielsen
PROFESSOR AUTOR E RESPONSÁVEL:
Rian Dutra da Cunha (eu@riandutra.com)
Designer de Interação Sênior especializado em User Experience. Mestre em
Ciência da Computação (UFJF), graduado em Design Gráfico (Infnet) e Análise
de Desenvolvimento em Sistemas (UNESA), e outras especializações na área de
design, tecnologia e empreendedorismo.

3

Arquitetura da Informação
A arquitetura da informação é a arte e a ciência de organizar e categorizar sites,
intranets, aplicativos mobile e softwares para favorecer a usabilidade e a facili-
dade para se encontrar o que se procura. Ou seja, é a estruturação de toda a
informação disponível em um produto digital, para que os usuários possam
encontrar fácil e rapidamente o que procuram.

Introdução à Arquitetura da Informação
Primeiramente, é importante entender que Arquitetura da Informação (AI) é

uma disciplina, não um artefato ou documento criado em um momento especí-
fico do projeto.
É fato de que existam alguns artefatos que podem ser criados para a AI, como
sitemaps, fluxos de tela, fluxos de tarefas e do usuário. Contudo, também há
questões como taxonomias, anéis de sinônimo, rotulagem, navegação, audito-
ria e análise de conteúdos, sistema de busca e pesquisa, wireframes, mapas
conceituais, uso de princípios de informação, agrupamento, apresentação pro-
gressiva, minimizando a perda e certificando-se de que o usuário está conse-
guindo lidar com todos os aspectos de informação proporcionado pelo produ-
to digital.
É comum que a AI seja confundida com sitemaps (ou mapas do site), mas é ex-
tremamente importante compreender que a Arquitetura da Informação é muito
mais do que um diagrama documentado.
Como parte padrão do processo UX, os designers projetam a arquitetura de

informação ao criar produtos. Definindo todas as vias e caminhos que os usuá-
rios podem acessar por meio de um aplicativo ou site, a arquitetura de infor-
mações é muito mais do que apenas um sitemap para mostrar qual página leva
onde.
Semelhante à construção de arquitetos que usam um plano para construir cada

parte de uma casa, de estruturas físicas às operações internas mais complexas,
como eletricidade e encanamento, a arquitetura de informação descreve a hie-
rarquia, navegação, recursos e interações de um produto digital.

No entanto, com o foco na experiência do usuário, o projeto da AI não é tão

simples quanto unir uma lista de recursos e mapear como eles funcionam. É
preciso entender verdadeiramente o motivo pelo qual se está projetando o
produto, e como ele deve ser arquitetado.
Como parte do processo de UX, o projeto da AI segue padrões muito seme-

lhantes ao fluxograma, onde são adicionadas formas e são conectadas com
linhas de maneira organizada em um único documento. Mas diagramas são
apenas a representação final do que foi arquitetado.
O desafio ao construir a AI é entender como o produto realmente funciona da

perspectiva do usuário e como organizar essas informações em um formato
legível.
O aspecto mais desafiador da criação de uma nova Arquitetura de Informação

é quase sempre construi-la hierarquicamente. É um equívoco comum que a AI
deva ser construída “de cima para baixo”. Isso é quase sempre mais difícil, a
menos que seja um produto existente.
Ao criar a AI a partir de esboços, a menos que o produto esteja seguindo um

formato padrão, é difícil extrair qualquer coisa após o nível superi-
or. Analogamente, seria como pedir a um engenheiro para construir uma moto
de cima para baixo em vez de suas partes inferiores. Cada peça deve ser cons-
truída antecipadamente com sua própria pesquisa, tempo de design e desen-
volvimento. O mesmo acontece com a AI.
A partir do sitemap (Figura 1), temos a exibição da hierarquia visual, que é uma
peça valioso para a AI, não apenas porque fornece um contexto melhor para
quem o visualiza, mas também generaliza as principais regiões do produto. Se
o recurso mais importante do produto for comprar um ingresso, que pode ser
feito a partir da página inicial, essa página terá mais pontos de contato e maior
valor para o produto. O mesmo será verdade para a hierarquia visual.

Figura 1: Exemplo de sitemap.

Definição de Arquitetura da Informação
No livro “Information architecture for the world wide web.” (2002), os autores
não apresentam uma definição simples e resumida de Arquitetura da Informa-
ção, justamente por ser um assunto complexo e que precisa ser estudado de
forma aprofundada.
O termo “Arquitetura da Informação” pode ser algumas das definições a se-

guir.
1. Projeto estrutural de ambientes de informação compartilhada;

2. A combinação de sistemas de organização, rotulagem, pesquisa e nave-
gação em sites e intranets;
3. A arte e a ciência de moldar produtos e experiências de informação para
apoiar a usabilidade e a facilidade de localização;
4. Uma disciplina emergente e uma comunidade de prática focada em tra-
zer princípios de design e arquitetura para o cenário digital.
Para entender melhor do que AI é feita, a seguir são apresentadas definições

de pontos importantes.
• Informação – o termo informação é usado para distinguir arquitetura da

informação a partir da gestão de dados e conhecimento. Dados são fa-
tos e números. Os bancos de dados relacionais são altamente estrutura-
dos e produzem respostas específicas para questões específi-
cas. Conhecimento é o material na cabeça das pessoas. Os gerentes de
conhecimento desenvolvem ferramentas, processos e incentivos para in-
centivar as pessoas a compartilhar essas coisas. A informação existe no

meio bagunçado. Com os sistemas de informação, muitas vezes não há

uma resposta “certa” para uma determinada questão. Estamos preocu-
pados com informações de todas as formas e tamanhos: sites, documen-
tos, aplicativos, imagens entre muitos outros.
• Estruturação, organização e rotulagem – São pontos fundamentais para

uma boa Arquitetura da Informação. Estruturar envolve determinar os ní-
veis apropriados de granularidade para as partes de informação em um
site ou aplicativo, e decidir como relacioná-los entre si. Organizar envol-
ve agrupar esses componentes em categorias significativas e distin-
tas. Rotular significa descobrir o que chamar de categorias e a série de
links de navegação que levam a elas.
• Encontrar e gerenciar – A localização é um fator crítico de sucesso para a

usabilidade geral. Se os usuários não conseguirem encontrar o que pre-
cisam por meio de uma combinação de navegação, pesquisa e solicita-
ção, o produto é falho. Portanto, uma arquitetura de informação deve
equilibrar as necessidades dos usuários com as metas do negó-
cio. Gerenciamento de conteúdo eficiente e políticas e procedimentos
claros são essenciais.
ORGANIZAÇÃO E ESTRUTURAÇÃO DA INFORMAÇÃO
Os seres humanos vêm estruturando, organizando e rotulando informações há

séculos. Em 660 A.C., um rei da Assíria tinha suas tabuletas de argila organiza-
das por assunto. Em 330 A.C, a Biblioteca de Alexandria abrigou uma bibliogra-
fia de 120 rolos. Em 1873, Melvil Dewey concebeu o Classificação Decimal de
Dewey como uma ferramenta para organizar e fornecer acesso ao crescente
número de livros.
Hoje, a maioria das pessoas se familiariza com os conceitos básicos de organi-

zação da informação através das experiências com livros e bibliotecas.

Para entender a importância da organização e estruturação da informação,

imagine uma biblioteca sem esquema de organização, onde milhares de livros
são simplesmente jogados em pilhas enormes. Nesse cenário, a tarefa de pro-
curar um livro por título ou procurar livros de um autor ou tópico específico,
pode ser bastante complexa e demorada.
O cenário oposto seria uma biblioteca onde há sistemas complexos e profissi-

onais bem treinados operando nos bastidores para selecionar, avaliar, rotular,
descrever, estruturar e organizar a coleção para que os usuários da biblioteca
possam encontrar o que precisam.
Em poucas palavras, uma das principais maneiras pelas quais bibliotecas e bi-
bliotecários agregam valor aos materiais impressos é colocando-os dentro da
estrutura de uma arquitetura de informação que facilita o acesso a esses mate-
riais. Os arquitetos de informação desempenham um papel semelhante, porém
geralmente dentro do contexto de sites, aplicativos e conteúdo digital.
O QUE NÃO É ARQUITETURA DA INFORMAÇÃO
Mapeando os limites da Arquitetura da Informação, podemos dizer que Design

Gráfico não é AI, tampouco o desenvolvimento de software e engenharia de
usabilidade. Apesar de parecer óbvio, pode ficar confuso a partir do momento
em que começamos a analisar as interfaces e tentar distinguir um elemento do
outro.

Figura 2: Barras de navegação superior e inferior no site das Nações Unidas – “Information architecture for the
world wide web.” (2002).
10

Por exemplo, analisemos a Figura 2. As barras de navegação apresentam rótulos

e links que levam a outras seções e páginas dentro do site. Esses rótulos de-
pendem da estrutura e categorização do site. A criação de categorias e a esco-
lha de rótulos ficam claramente dentro do domínio da arquitetura da informa-
ção.
Mas, e quanto à aparência da barra de navegação? E quanto à escolha de co-

res, imagens, estilos de fonte e tamanhos? Agora, entramos na área de design
gráfico, design de interação e design de informação. E se um designer questi-
onar os rótulos propostos por um arquiteto de informação? Talvez esses rótulos
sejam muito longos para caber na barra de navegação. E se o arquiteto de in-
formação quiser um link de pesquisa na barra de navegação, mas o desenvol-
vedor de software diz que adicionar um recurso de pesquisa ao site é muito
caro e demorado? E se o designer responsável pela usabilidade disser que os
testes do usuário indicaram que há muitas opções na barra de navegação?
No cenário de desenvolvimento de produtos digitais existem diversos perfis de

profissionais distintos trabalhando, em muitos casos, em um mesmo ponto ou
objetivo, por isso é extremamente importante a colaboração interdisciplinar e
alinhamento do time, podendo resultado em um produto melhor.
A IMPORTÂNCIA DA ARQUITETURA DA INFORMAÇÃO
A Arquitetura da Informação deve ter uma atenção especial durante o projeto e

desenvolvimento de produtos digitais, pois podem afetar consideravelmente a
experiência do usuário e interferir nos resultados do negócio, como o ROI (Re-
torno Sobre o Investimento). Ao calcular a importância da arquitetura de infor-
mações para um projeto, deve-se considerar os seguintes custos e proposições
de valor:
• O custo de encontrar informações – Quanto custa cada funcionário da

empresa gastar mais cinco minutos por dia lutando para encontrar res-
postas no site? Qual é o custo de frustrar os clientes com um site mal or-
ganizado?
11

• O custo de não encontrar informações – Quantas decisões ruins são to-

madas todos os dias na empresa porque os funcionários não encontra-
ram as informações de que precisavam? Quanta duplicação de esforços
resulta dessa desconexão? Quantos clientes são perdidos porque não
conseguem encontrar o produto que desejam no site? Quanto se gasta
diariamente fornecendo suporte por telefone a clientes existentes por-
que eles odeiam navegar no banco de dados de suporte técnico online?
• O valor da divulgação da informação – Qual é o valor de informação aos

clientes sobre novos produtos e serviços relacionados àqueles que eles
estão buscando ativamente em seu site?
• O custo da construção e manutenção – Quanto custa projetar e construir

um site? Quanto custa refazer seis meses depois, porque não suporta os
idiomas dos usuários ou não é escalável? Da mesma forma, quanto custa
garantir que bons designs não desmoronem com o tempo? As pessoas
que mantêm seu site sabem onde colocar novos conteúdos e quando
remover conteúdo desatualizado?
• O custo do treinamento – No caso de sistemas internos ou de cursos on-

line que possuem call centers, por exemplo, quanto custa treinar os usu-
ários a usar esse sistema? Quanto poderia economizar se não fosse tão
complicado de usar?
• O valor da marca – Não importa o quão bonito seja um site ou aplicati-

vo, se os clientes não conseguirem encontrar o que precisam, a marca
perderá o valor aos olhos deles. E todo o investimento em publicidade e
marketing será em vão.
Esses são apenas exemplos sobre a importância da AI. Para cada projeto, have-
rá uma enorme quantidade de oportunidades para ganhar dinheiro, economi-
zar dinheiro, melhorar a satisfação e experiência do usuário. O papel do desig-
ner é descobrir quais são essas oportunidades e solucionar da forma mais clara
e direta possível.
12

Anatomia da Arquitetura da Informação
Para entender do que a Arquitetura da Informação é composta, a figura a se-

guir mostra a página principal do antigo site da Gustavus Adolphus College
(Figure 3).

Figure 3: Página principal da Gustavus Adolphus College – “Information architecture for the world wide web.”
(2002).
13

À primeira vista, o que é mais notório é Design Visual do site. O usuário não
pode deixar de notar as cores do site, opções de tipos, imagens e formato dos
elementos. Também se percebe aspectos do design de informação do site; por
exemplo, o número de colunas e suas larguras muda por toda a página.
Além disso, é possível detectar aspectos do Design de Interação, como o uso

de mouseovers (quando o usuário passa o mouse sobre opções do menu prin-
cipal) e menus suspensos para “Ir rapidamente para…” (“Go Quickly To…”) e
opções de pesquisa. Embora o logotipo da faculdade esteja destacado, o site
se baseia em conteúdo textual para transmitir sua mensagem e marca.
Contudo, esses pontos discutidos não são Arquitetura da Informação. E, para

que seja possível reconhecer e visualizar a AI nesta página, é preciso entender
os elementos que compõem a interface.
Por exemplo, as informações foram estruturadas de algumas maneiras básicas:
• Sistemas de organização – Apresenta as informações do site em uma va-

riedade de maneiras, como categorias de conteúdo que pertencem a
todo o campus (por exemplo, a barra superior e suas opções “Calendar”
e “Athletics”) ou para públicos específicos (o “I am a... ”, com opções
como “Prospective Student” e “Staff Member”).
• Sistemas de navegação – Ajuda os usuários a percorrer o conteúdo, co-

mo o menu “A-Z Directory” e o menu “Go Quickly To…” de destinos
populares.
• Sistemas de pesquisa – Permite que os usuários pesquisem o conteú-

do. Aqui, o padrão é definido para pesquisar o site Gustavus, mas tam-
bém é possível pesquisar o calendário, seu diretório ou toda a web a
partir da interface de pesquisa do site.
• Sistemas de rotulagem – Descreve categorias, opções e links em lingua-

gem que é significativa para os usuários. O importante para a rotulagem
é verificar se o público que consome o site realmente entende os rótulos
disponibilizados.
14

A Figure 4 fornece uma visualização desses componentes da Arquitetura da In-

formação.

Figure 4: Exemplos de componentes de Arquitetura da Informação em uma interface – “Information architecture
for the world wide web.” (2002).
Como pode ser visto na Figure 3 e na Figure 4, essas áreas são apenas parte do
projeto de AI. Categorias agrupam páginas e aplicativos em todo o site; rótulos
representam sistematicamente o conteúdo do site; sistemas de navegação e
um sistema de pesquisa podem ser usados para percorrer o site. E tudo isso é
Arquitetura da Informação – ou seja, parte fundamental de um produto digital.
15

Um ponto interessante a ser notado no exemplo desse site, é que a página

principal tenta antecipar as principais necessidades de informação dos usuá-
rios, como “Como eu descubro sobre admissões?” ou “O que acontece esta
semana no campus?”. Os Arquitetos de Informação (ou designers) do site tra-
balharam para definir as perguntas mais comuns e, assim, oferecer um site que
atenda melhor às necessidades dos usuários.
Pode-se referir a isso como Arquitetura da Informação Top-Down, e a página

principal do site aborda muitas questões comuns do tipo Top-Down, que os
usuários têm quando chegam em um site, incluindo (Figure 5):
1. Onde estou?
2. Eu sei pelo o que estou procurando; como encontro?
3. Como posso navegar neste site?
4. O que é importante e único nesta empresa?
5. O que está disponível neste site?
6. O que está acontecendo lá?
7. Eles querem minha opinião sobre o site deles?
8. Como posso entrar em contato com eles?
9. Qual o endereço deles?
16

Figure 5: A página principal do site está repleta de respostas às perguntas dos usuários – “Information architecture
for the world wide web.” (2002).
17

A Figure 6 mostra um exemplo ligeiramente diferente: páginas marcadas por um

dos autores como relevantes para a experiência do usuário corporativo no
del.icio.us, um serviço de bookmarking social.

Figure 6: Marcadores marcados como “enterprise_UX” no del.icio.us, um serviço de bookmarking social – “Informa-
tion architecture for the world wide web.” (2002).
Há pouco para ver neste exemplo (Figure 6) além da Arquitetura da Informação e

do conteúdo em si. Na verdade, como o conteúdo é apenas uma coleção de
links para páginas marcadas de outros sites, a AI é a maior parte da página. Ela
fornece contexto para o conteúdo e diz o que se pode fazer enquanto o usuá-
rio está na página.
A Arquitetura da Informação diz onde o usuário está (no del.icio.us, em uma

página mantida pelo usuário, que contém os marcadores marcados como “en-
terprise_ux”).
A AI ajuda a passar para outras páginas estreitamente relacionadas (por exem-

plo, percorrendo os resultados (“earlier” e “later”) e para as páginas que foram
marcadas usando tags diferentes.
18

Ela ajuda a percorrer o site hierarquicamente (por exemplo, pode-se navegar

para a página principal de del.icio.us, ou para favoritos recentes ou populares)
e contextualmente (por exemplo, clicando em “salvos por 4 outras pessoas” ou
por vendo quem mais marcou páginas usando a mesma tag).
Ela permite o usuário a manipular o conteúdo para melhor navegação (pode-se

exibir as tags em ordem alfabética, como é mostrado, ou como uma “nuvem
de tags”; uma variedade de outras opções de configuração são exibidas nas
“opções”).
• A Arquitetura da Informação diz onde o usuário pode ir para serviços bá-

sicos, como fazer login ou obter ajuda ("entre em contato" e “ajuda");
• Em muitos aspectos, essa página do del.icio.us nada mais é que Arquite-
tura da Informação;
• O conteúdo em si pode ter AI embutida nele. A receita na Figure 7 mostra
uma bebida nutritiva do site Epicurious;

Figure 7: Exemplo de página de receita do Epicurious – “Information architecture for the world wide web.” (2002).
19

A receita em si tem uma estrutura clara e forte: um título no topo, uma lista de
ingredientes, instruções de preparação e informações de serviço. Essa informa-
ção é agrupada em pequenos pedaços (“chunked”) para que o usuário saiba
do que se trata, mesmo sem legendas para “ingredientes” ou “direções”.
A técnica “chunking” também pode ajudar em aspectos como pesquisa e na-

vegação; por exemplo, os usuários podem pesquisar nos “chunks” conhecidos
como “títulos de receita” para “cachorro salgado” e recuperar esse. E esses
pedaços são sequenciados de maneira lógica. Afinal, o usuário irá querer saber
os ingredientes antes de começar a misturar a bebida. A definição e o posicio-
namento sequencial de blocos ajudam o usuário a reconhecer que esse conte-
údo é uma receita antes mesmo de ele lê-lo. E uma vez que ele sabe o que é,
tem uma idéia melhor sobre o conteúdo e como usá-lo, contorná-lo e ir para
outro lugar dele.
Então, mesmo a partir de uma página simplória como essa, é possível ver a Ar-
quitetura da Informação mesmo quando ela estiver embutida no conteúdo do
seu conteúdo. De fato, ao suportar pesquisas e navegação, a estrutura inerente
ao conteúdo permite que as respostas às perguntas dos usuários “subam” à
superfície. Isto é Arquitetura da Informação Bottom-Up.
Estrutura de conteúdo, sequenciamento e marcação ajudam a responder per-

guntas como:
• Onde estou?
• O que tem aqui?
• Para onde posso ir a partir daqui?
A Arquitetura da Informação Bottom-Up é importante porque os usuários estão

cada vez mais propensos a ignorar a AI Top-Down. Em vez disso, eles estão
usando ferramentas de pesquisa em toda a web, como o Google, clicando em
anúncios e clicando em links enquanto lêem seu conteúdo por meio de agre-
gadores para se encontrarem no fundo do site. Uma vez lá, eles irão querer pu-
lar para outro conteúdo relevante no site sem aprender como usar sua estrutu-
ra de cima para baixo. Uma boa Arquitetura da Informação é projetada para
antecipar esse tipo de uso.
20

Mesmo que em alguns casos a Arquitetura da Informação esteja proeminente e

mais facilmente de ser visualizada, é importante entender que a AI é muitas
vezes invisível, também. Por exemplo, a Figure 8 mostra alguns resultados da
pesquisa no antigo site da BBC.

Figure 8: Os resultados da pesquisa da BBC incluem três "Melhores Links” – “Information architecture for the world
wide web.” (2002).
Neste exemplo, o usuário procurou por “chechnya” e o site apresentou algu-

mas coisas diferentes, porém possivelmente interessantes para o usuário: três
resultados rotulados como “BBC Best Link”.
Aqui, os resultados da pesquisa foram recuperados por um mecanismo de bus-

ca – que o usuário nunca vê. O mecanismo de busca foi configurado para inde-
xar e pesquisar determinadas partes do site, exibir determinados tipos de in-
formações em cada resultado de pesquisa (ou seja, título da página, extrato e
data) e manipular consultas de pesquisa de determinadas maneiras, como re-
21

mover entradas como "a", "o" e "de". Todas essas decisões relacionadas à
configuração do sistema de busca são desconhecidas para os usuários e são
aspectos integrais do design da Arquitetura de Informação.
O que é diferente é que os resultados do “Best Links” são criados manualmen-

te (já que o exemplo é de um site antigo da BBC). Neste caso, algumas pessoas
da BBC decidiram que “chechênia” é um termo importante e que alguns dos
melhores conteúdos da BBC não são notícias, que normalmente aparecem no
topo da maioria conjuntos de recuperação. Por isso, aplicaram alguns conhe-
cimentos editoriais para identificar três páginas altamente relevantes e as asso-
ciaram ao termo “chechênia”, garantindo que esses três itens sejam exibidos
quando alguém pesquisa “chechênia”. Os usuários podem assumir que esses
resultados de pesquisa são gerados automaticamente, mas os humanos modi-
ficando manualmente a AI em segundo plano; Este é outro exemplo de Arqui-
tetura de Informação invisível.
A Arquitetura da Informação é muito mais do que apenas projetos que retra-

tam rotas de navegação e wireframes que informam o design visual. Esse cam-
po envolve mais do que os olhos veem, e ambos os aspectos visíveis e invisíveis
ajudam a definir o que fazemos e ilustram o quão desafiador ele realmente é.
22

Componentes da Arquitetura da Informação
Pode ser difícil saber exatamente quais componentes formam uma Arquitetura
de Informação. Os usuários interagem diretamente com alguns, enquanto ou-
tros estão tão profundos que os usuários não sabem da sua existência.
Os componentes da AI podem ser divididos em quatro categorias:
• Sistemas de Organização – Como as informações são categorizadas;

• Sistemas de Rotulagem – Como as informações são representadas;
• Sistemas de Navegação – Como o usuário navega pelas interfaces ou se
movem pelas informações;
• Sistemas de Busca – Como o usuário pesquisa e busca informações.
Contudo, os autores do livro “Information architecture for the world wide web.”
(2002) indicam alguns problemas quanto a essa forma de categorização. Por
exemplo, pode ser difícil distinguir sistemas de organização de sistemas de
rotulagem (dica: uma pessoa organiza o conteúdo em grupos e rotula esses
grupos; cada grupo pode ser rotulado de maneiras diferentes).
Portanto, os autores sugerem um método alternativo para categorizar os com-

ponentes da Arquitetura da Informação. Esse método é composto de auxílios à
navegação, recursos de pesquisa, conteúdo e tarefas e componentes “invisí-
veis”.
23

AUXILIOS À NAVEGAÇÃO
Esses componentes apresentam aos usuários um conjunto predeterminado de

caminhos para ajudá-los a navegar no site. Os usuários não articulam suas con-
sultas, mas, ao invés disso, encontram o caminho através de menus e
links. Tipos de auxiliares de navegação incluem:
• Sistemas de organização – As principais formas de categorizar ou agru-

par o conteúdo de um site (por exemplo, por tópico, por tarefa, por au-
diências ou por cronologia). Também conhecido como taxonomias e hi-
erarquias. As nuvens de tags (baseadas em tags geradas pelo usuário)
também são uma forma de sistema organizacional.
• Sistemas de navegação em todo o site – Sistemas de navegação primá-

rios que ajudam os usuários a entender onde estão e onde podem ir
dentro de um site (por exemplo, breadcrumbs).
• Sistemas de navegação local – Sistemas de navegação primários que

ajudam os usuários a entender onde estão e onde podem ir dentro de
uma parte de um site (ou seja, um subsite).
• Tabelas de conteúdo – Também comumente chamados de sitemaps.

Sistemas de navegação que complementam os sistemas de navegação
primários; fornece uma visão geral condensada e links para as principais
áreas de conteúdo e subsites dentro do site.
• Índices do site – Sistemas de navegação suplementares que fornecem

uma lista em ordem alfabética de links para o conteúdo do site.
• Guias do site – Sistemas de navegação suplementares que fornecem in-

formações especializadas sobre um tópico específico, bem como links
para um subconjunto relacionado do conteúdo do site.
24

• Assistentes do site – Sistemas de navegação suplementares que levam

os usuários através de um conjunto sequencial de etapas; também pode
vincular a um subconjunto relacionado do conteúdo do site.
• Sistemas de navegação contextual – Links consistentemente apresenta-

dos ao conteúdo relacionado. Geralmente incorporado ao texto e ge-
ralmente usado para conectar conteúdo altamente especializado em um
site.
RECURSOS DE PESQUISA
Esses componentes permitem a entrada de uma consulta definida pelo usuário

(por exemplo, uma pesquisa) e apresentam automaticamente aos usuários um
conjunto personalizado de resultados que correspondem às suas consultas.
Agem como contrapartes dinâmicas e quase sempre automatizadas para ajudar
na navegação. Tipos de recursos de pesquisa incluem:
• Interface de pesquisa – Os meios de inserir e revisar uma consulta de

pesquisa, normalmente com informações sobre como melhorar sua con-
sulta, bem como outras maneiras de configurar sua pesquisa (por exem-
plo, selecionando de zonas de pesquisa específicas).
• Linguagem de consulta – A gramática de uma consulta de pesqui-

sa; linguagens de consulta podem incluir operadores booleanos, opera-
dores de proximidade ou formas de especificar qual campo pesquisar.
• Construtores de consulta – Formas de melhorar o desempenho de uma

consulta; exemplos comuns incluem verificadores ortográficos e pesqui-
sa de conceito.
25

• Algoritmos de recuperação – A parte de um mecanismo de pesquisa

que determina qual conteúdo corresponde à consulta de um usuário; O
PageRank do Google é talvez o exemplo mais conhecido.
• Áreas de busca – Subconjuntos de conteúdo do site que foram indexa-

dos separadamente para oferecer suporte a pesquisas mais restritas (por
exemplo, pesquisando a área de suporte técnico no site de um fornece-
dor de software).
• Resultados de busca – Apresentação de conteúdo que corresponda à

consulta de pesquisa do usuário; envolve decisões sobre quais tipos de
conteúdo devem compor cada resultado individual, quantos resultados
exibir e como conjuntos de resultados devem ser classificados, classifi-
cados e agrupados.
CONTEÚDO E TAREFAS
Estes são os destinos finais dos usuários, em oposição a componentes separa-

dos que levam os usuários aos seus destinos. No entanto, é difícil sepa-
rar conteúdo e tarefas de uma Arquitetura de Informação, pois há componen-
tes incorporados em conteúdo e tarefas que nos ajudam a encontrar o cami-
nho.
Exemplos de componentes de AI incorporados no conteúdo e nas tarefas in-

cluem:
• Cabeçalhos – Etiquetas para o conteúdo que as segue.
• Links incorporados – Links dentro do texto; esses rótulos o conteúdo ao

qual eles se conectam.
• Metadados incorporados – Informações que podem ser usadas como

metadados, mas devem primeiro ser extraídas (por exemplo, em uma
26

receita, se um ingrediente é mencionado, essa informação pode ser in-

dexada para suportar a pesquisa por ingrediente).
• Pedaços (“Chunks”) – Unidades lógicas de conteúdo; estes podem variar

em granularidade (por exemplo, seções e capítulos são ambos pedaços)
e podem ser aninhados (por exemplo, uma seção faz parte de um livro).
• Listas – Grupos de trechos ou links para trechos; estes são importantes

porque foram agrupados (por exemplo, eles compartilham alguma ca-
racterística em comum) e foram apresentados em uma ordem particular
(por exemplo, cronologicamente).
• Ajudas sequenciais – Pistas que sugerem onde o usuário está em um

processo ou tarefa, e até onde ele deve ir antes de completá-lo (por
exemplo, “passo 3 de 8”).
• Identificadores – Dicas que sugerem onde o usuário está em um sistema

de informações (por exemplo, um logotipo especificando qual site está
usando ou uma migalha explicando onde ele está).
COMPONENTES INVISÍVEIS
Alguns componentes da AI são manifestos que ficam completamente em se-

gundo plano, com os quais os usuários raramente interagem. Esses componen-
tes geralmente “alimentam” outros componentes, como um dicionário de si-
nônimos que é usado para aprimorar uma consulta de pesquisa.
Alguns exemplos de componentes da Arquitetura de Informações invisíveis

incluem:
• Vocabulários controlados (Tesauros) – Vocabulários predeterminados de

termos preferidos que descrevem um domínio específico (por exemplo,
corridas automobilísticas ou ortopédicas); normalmente incluem termos
27

variantes. Tesauros são vocabulários controlados que geralmente inclu-

em links para termos mais amplos e mais restritos, termos relacionados e
descrições de termos preferidos. Os sistemas de pesquisa podem apri-
morar as consultas extraindo os sinônimos de uma consulta de um voca-
bulário controlado.
• Algoritmos de recuperação – Usado para classificar os resultados da

pesquisa por relevância; Os algoritmos de recuperação refletem os jul-
gamentos de seus programadores sobre como determinar a relevância,
e geralmente é utilizada inteligência artificial para oferecer melhores re-
sultados para os usuários.
• Melhores apostas – Resultados de pesquisa preferidos que são acopla-

dos manualmente a uma consulta de pesquisa; editores e especialistas
no assunto determinam quais consultas devem ser recupera-
das melhores apostas, e quais documentos merecem o melhor status de
aposta. A inteligência também pode ser utilizada neste caso.
28

Entregáveis de Arquitetura da Informação
Este capítulo não tem como objetivo discorrer detalhadamente sobre todas as
técnicas e entregáveis de Arquitetura da Informação, mas apresentar os princi-
pais entregáveis que irão auxiliar nos projetos de design com foco em UX.
MODELO CONCEITUAL
Don Norman definiu três tipos de modelos que ocorrem ao criar um produto:
• Modelos de implementação;
• Modelos conceituais;
• Modelos mentais.
O modelo de implementação é como o produto funciona de um ponto de vista

técnico. O modelo mental é como o usuário acha que o produto funciona. O
modelo conceitual é a mensagem que o designer envia ao usuário sobre como
o produto funciona.
Um modelo conceitual é mais frequentemente uma figura, embora possa ser

um gráfico, um parágrafo escrito ou um fluxograma. A questão é que ela ex-
pressa uma explicação do comportamento do sistema para o usuário que é
fácil e intuitiva – não precisa ser como o sistema realmente funciona.
29

INVENTÁRIO E ORGANIZAÇÃO DO CONTEÚDO
Mais comumente usado para conteúdo, em vez de sites e aplicativos propria-

mente. O inventário de conteúdo pode ser fornecido pelo design ou cliente e
trata-se de uma lista completa de todo o conteúdo que o site contém e mante-
rá.
Para sites particularmente ricos em conteúdo, pode ser uma lista de tipos de
conteúdo. Uma vez que o conteúdo é agregado, a maneira mais simples de
lidar com a organização é realizar um Card Sorting.
FLUXOS DO USUÁRIO E CENÁRIOS
Os Fluxos do Usuário são diagramas (Figure 9) que esquematizam o caminho

que um usuário percorre durante uma atividade específica. Ocasionalmente,
eles se parecem com storyboards, outras vezes como fluxogramas. O importan-
te é não descrever cada comportamento possível, mas mostrar a experiência
do usuário mais provável. É uma boa maneira de entender o que o produto faz
sem ficar confuso com cada detalhe minúsculo.
É particularmente útil se alguém precisa explicar as principais interações para

alguém novo ou não profundamente envolvido com o projeto.
Os cenários são um equivalente escrito dos Fluxos do Usuário e, geralmente,

são um bom ponto de partida para eles. Para criá-los, a equipe de desenvolvi-
mento se reúne para contar a história de um usuário. A maneira mais eficaz de
fazer isso realizar pesquisas e entender a(s) persona(s).
30

Figure 9: Exemplo de diagrama de Fluxo do Usuário simples.
ANÁLISE DE TAREFAS
Uma vez que tenha o cenário definido e os fluxos do usuário, pode-se mover
em direção a uma análise de tarefa. Esta é uma análise passo a passo discreta
de como os usuários realizam as tarefas desejadas. Isso permite que o designer
analise cuidadosamente cada etapa que um usuário precisa para concluir qual-
quer tarefa – ou pelo menos as principais e mais importantes.
A partir da análise de tarefas, é possível entender minuciosamente quais são os

pontos mais críticos e complexos da perspectiva do usuário, e então propor
soluções que irão melhorar o fluxo do usuário.
SITEMAP
O Sitemap (Mapa do Site) é uma das peças mais importantes de um projeto de

Arquitetura da Informação. Um mapa do site pode ser pequeno e simples, ou
pode levar até centenas de páginas. Tudo depende do site e das necessidades
do projeto.
31

O mapa documenta as várias páginas ou tipos de página em todo o site e os

caminhos do usuário para e a partir deles. Normalmente é iniciado no início do
projeto e refinado por todo o processo. A Figure 10 apresenta um exemplo de
sitemap.

Figure 10: Exemplo de sitemap.
WIREFRAME
Podemos definir wireframe como um esqueleto, um protótipo ou uma versão

bastante primitiva do visual de um produto digital. Ele consiste na representa-
ção da diagramação e das estruturas macro do site ou aplicativo. Ou seja,
apresentamos por meio de formas geométricas e linhas como pensamos a divi-
são da interface em seções.
32

O wireframe não contém cores, identidade visual ou conteúdo e pode ser feito
com lápis, caneta, régua e borracha, ou pode também ser feito com softwares
de design de interface.
Os dois objetivos principais do wireframe são o auxílio ao designer no momen-

to do desenvolvimento do Design de Interface propriamente e da diagramação
dos conteúdos e na aplicação da identidade visual.
A Figura mostra exemplos de wireframes.

Figure 11: Exemplos de wireframes.
33

Design de Interação
Neste capítulo não será abordado o assunto de Design de Interação de manei-
ra aprofundada, visto que se trata de um assunto bastante amplo e complexo.
Aqui serão apresentados pontos fundamentais que tenham relação direta com
a Experiência do Usuário, entendendo a diferença entre o design de interação
bom e ruim, a relação entre UX e usabilidade, dentre outros pontos.
34

Introdução ao Design de Interação
O Design de Interação é um componente importante dentro do Design de Ex-

periência do Usuário e pode ser entendido em termos simples: é o design da
interação entre usuários e produtos. Na maioria das vezes, quando as pessoas
falam sobre design de interação, os produtos tendem a ser produtos de sof-
tware, como aplicativos ou sites. O objetivo do design de interação é criar pro-
dutos que permitam ao usuário atingir seus objetivos da melhor maneira possí-
vel.
Muitos produtos que requerem a interação do usuário foram projetados princi-

palmente tendo o usuário em mente, como os smartphones e os sites de redes
sociais. Geralmente eles são fáceis de usar. Outros, como a troca da visualiza-
ção de um DVD para um canal de TV ou a definição do alarme de um relógio
digital, não foram projetados tendo os usuários em mente, tendo sido conce-
bidos principalmente como sistemas para executar funções específicas. Mesmo
que funcionem bem, isso pode depender de como o sistema será utilizado pe-
los usuários reais.
Um dos principais objetivos do Design de Interação (DI) é reduzir os aspectos

negativos da experiência de usuário e ao mesmo tempo melhorar os positivos.
Trata-se essencialmente de desenvolver produtos interativos que sejam fáceis,
eficientes e agradáveis de usar – a partir da perspectiva dos usuários.
Uma preocupação crucial do Design de Interação é desenvolver produtos inte-

rativos que sejam usáveis, o que genericamente significa produtos que sejam
fáceis de aprender a usar, eficazes e que proporcionem ao usuário uma experi-
ência agradável.
35

Um bom ponto de partida para pensar sobre como projetar produtos interati-
vos usáveis consiste em comparar exemplos bons e ruins. Para isso, veremos
um exemplo apresentado no livro “Design de Interação: Além da Interação
Humano-Computador” (2013).
EXEMPLO DE DESIGN RUIM
Todo sistema de entretenimento em casa, seja a TV aberta, a TV a cabo, o sis-

tema de som, o DVD player e assim por diante, vem com seu próprio dispositi-
vo de controle remoto. Cada um é diferente em termos de como se parece e
como funciona. Muitos foram concebidos com uma variedade estonteante de
botões pequenos, coloridos e duas vezes rotulados, que muitas vezes parecem
arbitrariamente posicionados em relação um ao outro.
Muitos usuários, em especial quando sentados na sala de estar, têm dificuldade

para localizar os botões corretos mesmo para as mais simples tarefas, como
pausar ou encontrar o menu principal. Isso pode ser ainda mais frustrante para
aqueles que precisam de óculos para ler os botões.
Os dispositivos de controle remoto parecem ter sido projetados sem que se

pensasse anteriormente sobre o assunto. Em contrapartida, o controle remoto
preto da Figura, concebido como parte de um gravador de vídeo digital, pos-
sui um estilo próprio. Muito esforço e raciocínio foram considerados em seu
design.
Os botões são grandes, claramente identificados e logicamente organizados,

tornando-os fáceis de localizar e usar em conjunto com a interface do menu
que aparece no monitor de TV. Em termos de sua estrutura física, o dispositivo
remoto foi projetado para caber na palma de uma mão, tendo a forma de um
amendoim. Ele também tem um agradável look and feel – botões coloridos e
ícones com desenhos muito distintos foram usados, tornando-os mais fáceis de
serem identificados no escuro e sem a necessidade de óculos de leitura.
36

A grande diferença entre esse controle para os controles ruins (Figure 12) é que a
empresa a qual o criou investiu tempo e esforço para seguir um processo de
design centrado no usuário, envolvendo potenciais usuários no processo de
design, recebendo o retorno desses usuários sobre tudo, desde a sensação do
dispositivo na mão até qual seria o melhor lugar para colocar as baterias – tor-
nando-as fáceis de substituir, mas não propensas a cair.
Eles alcançaram um bom design também por restringirem a somente o essen-

cial o número de botões de controle embutidos no dispositivo. Outras funções
foram então representadas como parte das opções do menu e caixas de diálo-
go exibidas na tela da TV, podendo ser selecionadas por meio do conjunto
principal de botões do controle remoto.

Figure 12: Exemplo de design bom e ruim, respectivamente.
37

DESIGN DE INTERAÇÃO E UX (EXPERIÊNCIA DO USUÁRIO)
A experiência de usuário é essencial para o design de interação, pois leva em

conta como um produto se comporta e é usado por pessoas no mundo real.
Como salientado por Garrett (2010, p. 10), “todo produto que é usado por al-
guém envolve uma experiência de usuário: jornais, ketchup, poltronas recliná-
veis, blusas cardigãs”. Mais especificamente, a experiência de usuário diz res-
peito a como as pessoas se sentem em relação a um produto e ao prazer e à
satisfação que obtêm ao usá-lo, olhá-lo, abri-lo ou fechá-lo. Isso inclui sua im-
pressão sobre quanto é bom usá-lo, passando pelo efeito sensorial de peque-
nos detalhes, como a suavidade com que um interruptor gira, o som de um
clique ou o toque de um botão quando pressionado.
Um aspecto importante é a qualidade da experiência que alguém tem, seja ela

rápida, como recarregar um telefone celular, vagarosa, como jogar com um
brinquedo interativo, ou integrada, como visitar um museu.
É importante ressaltar que não se pode projetar uma experiência de usuário,

mas apenas para uma experiência de usuário. Em particular, não se pode proje-
tar uma experiência sensorial, apenas criar as características de design que po-
dem evocá-la. Por exemplo, podemos projetar a parte externa de um telefone
celular para ser suave, macia e caber na palma de uma mão; dessa forma,
quando alguém segurar, tocar, observar e interagir com o telefone, isso pode
provocar uma experiência de usuário agradável e satisfatória. Por outro lado, se
o telefone celular é projetado para ser pesado e complicado de segurar, é mui-
to mais provável que acabe oferecendo ao usuário uma experiência pobre,
desconfortável e desagradável.
Há muitos aspectos da experiência de usuário que podem ser considerados e

diversas formas de fazê-lo no design de produtos interativos. Os de maior im-
portância são a usabilidade, a funcionalidade, a estética, o conteúdo, o look
and feel e os apelos sensorial e emocional.
38

Usabilidade
A usabilidade de um produto é um aspecto crucial para uma se obter uma boa

experiência do usuário. Mas, apesar de quando fala-se sobre usabilidade, ge-
ralmente se refere à facilidade de uso de um produto digital, a usabilidade é
mais que isso.
O padrão ISO 9421-11 define a usabilidade como “A medida em que um pro-

duto pode ser usado por usuários especificados para conseguir realizar tarefas
especificadas, com efetividade, eficiência e satisfação em um contexto especí-
fico de uso”.
Como base nisso, podemos dizer que a usabilidade é mais do que apenas sa-
ber se os usuários podem executar as tarefas facilmente (ou seja, a facilidade
de uso). A usabilidade também se refere à satisfação do usuário. Para que um
site seja utilizável, também tem que ser atraente e esteticamente agradável.
A usabilidade é fundamental pois, se um usuário não consegue alcançar seus

objetivos de forma eficiente, eficaz e satisfatória, é provável que ele busque
uma solução alternativa para alcançar seus objetivos. Então, o negócio perde
vantagem competitiva.
39

CARACTERÍSTICAS DE PRODUTOS COM BOA USABILIDADE
De acordo com a UXPA (User Experience Professionals Association) há 5 crité-

rios para produtos com boa usabilidade:
• Eficácia;
• Eficiência;
• Engajamento;
• Tolerância ao erro;
• Fácil de aprender.
EFICÁCIA
A eficácia está relacionada com a capacidade de os usuários completar seus

objetivos com um alto grau de precisão. Grande parte da eficácia de um pro-
duto vem do suporte fornecido aos usuários quando eles trabalham com o
produto.
Por exemplo, corrigir um campo de cartão de crédito para que ele aceite ape-
nas uma entrada de número de cartão de crédito válido pode reduzir os erros
de entrada de dados e ajudar os usuários a executar sua tarefa corretamente.
Existem muitas maneiras diferentes de fornecer esse suporte. O ponto crucial é

ser informativo o máximo possível para o usuário.

Figure 13: Exemplo de interface com a qualidade de Eficácia.
Nesse formulário de pagamento (Figure 13), foi restringido o número de dígitos

que o usuário pode inserir no campo do número do cartão de crédito, justa-
mente para reduzir os erros de entrada de dados.
40

EFICIÊNCIA
Eficácia e Eficiência são palavras semelhantes, mas tratam-se de coisas diferen-

tes. Eficiência trata-se sobre velocidade. O quão rápido o usuário consegue
fazer uma tarefa específica usando a sua interface. Nesse caso, é indicado ana-
lisar o número de etapas (ou mesmo cliques) que o usuário precisa para alcan-
çar algum objetivo. O número de cliques pode ser reduzido? Há alguma forma
que possa melhorar a interface de modo a aumentar a velocidade da execução
da tarefa, por parte do usuário?
Os botões de navegação com rótulos fáceis de entender também são extre-

mamente úteis. Assim como a disponibilização de atalhos, principalmente em
softwares. Para maximizar a eficiência, é preciso examinar como os usuários
utilizam o produto em questão. E, para isso, novamente é preciso realizar pes-
quisas com os usuários.
ENGAJAMENTO
Basicamente, o engajamento acontece quando o usuário acha um produto

agradável e gosta de usar ele. A estética também é muito importante, e é por
isso que muitas empresas investem em elementos de design visual.
Na prática, isso tem a ver com layouts bem projetados, tipografia legível e faci-
lidade de navegação, que no final das contas se juntam para oferecer uma boa
interação para o usuário. Então, envolvendo o usuário, aumentando o engaja-
mento dele com o seu produto.
Contudo, é importante ressaltar que o design visual em si, não é tudo. Mesmo
que o Wikipedia (Figure 14) possua um design visual simplório e pouco atrativo,
ele ainda sim apresenta alto engajamento.
41

Figure 14: Wikipedia.
TOLERÂNCIA AO ERRO
É praticamente impossível eliminar todos os erros dos produtos digitais. Alguns

erros podem aparecer de forma inesperada. O ponto importante é como seu
produto lida com esses erros. Mas, tenha uma coisa em mente: mesmo que, no
pior dos casos, o usuário realmente seja o culpado por algum erro no seu pro-
duto (o que é improvável), não se pode culpa-lo. Tentar lidar com os erros de
forma suave e com bastante informação é mais importante, para que o usuário
não se desespere ou se estresse por conta do erro causado.
Por isso, a melhor coisa a se fazer é tentar minimizar os erros e garantir que um
usuário possa se recuperar facilmente de um erro e voltar para o que eles esta-
vam fazendo. Veja um ótimo exemplo na Figure 15 onde o usuário pode desfazer
uma ação que pode ter sido realizada de maneira equivocada (e.g., apagar um
arquivo importante).
42

Figure 15: Exemplo de interface com Tolerância ao Erro.
FÁCIL DE APRENDER
Ser fácil de aprender a usar é uma qualidade fundamental para produtos de

alto nível e que proporcionem uma boa experiência de uso. É também preciso
pensar neste aspecto quando for lançar novas funcionalidades e recursos em
um produto já existente, por exemplo. Caso contrário, um usuário que já usa o
produto há algum tempo, e que esteja satisfeito, pode ficar rapidamente frus-
trado com sua versão mais recente.
A melhor maneira de trabalhar nesse sentido é projetar sistemas que combi-

nem os modelos mentais já existentes dos usuários – uma representação de
algo no mundo real e como é feito da perspectiva do usuário. É como o usuário
resolve algo, como ele já está acostumado a resolver certos problemas ou rea-
lizar certas tarefas.
43

SIMPLICIDADE NO DESIGN
Leonardo Da Vinci dizia que “A simplicidade é o último grau de sofisticação”.

Veja como a interface dessa torradeira (Figure 16) é extremamente simples. Basta
colocar as fatias do pão na parte de cima e apertar o botão para torrar o pão.
Nada mais que isso. A grande maioria das pessoas conseguiria usá-la.

Figure 16: Exemplo de produto (torradeira) com interface fácil de usar.
Sempre que for projetar uma interface, é importante pensar neste aspecto.
Como tornar a interface o mais simples possível? Os botões se parecem com
botões? Os rótulos e nomes dos links estão claros e todos conseguem enten-
der para que servem? Fornecer aos usuários uma quantidade limitada de op-
ções garante que eles não precisam gastar o seu tempo precioso de forma
desnecessária.
44

ALCANÇANDO A SIMPLICIDADE LIMITANDO AS OPÇÕES
As melhores interfaces de usuário conduzem os usuários com indicação clara

das etapas individuais necessárias para completar os objetivos desejados. A
partir do momento em que se limita as opções, facilita a vida do usuário. Me-
nos opções também significam mais rapidez na escolha e menos chances de
errar.
ALCANÇANDO A SIMPLICIDADE REDUZINDO O ABISMO DA EXECUÇÃO
Norman e Draper (1986) inventaram o termo “Abismo da Execução” (em inglês,

Gulf of Execution), que se refere essencialmente à lacuna entre os objetivos de
uma ferramenta e o que de fato essas ferramentas permitem os usuários faze-
rem.
Os usuários devem traduzir seus objetivos em termos de limitações ou recursos

do conjunto de ferramentas disponível. Por exemplo, a torradeira tem um
“abismo da execução” muito estreito, porque o número de objetivos (pão tor-
rado em tempos variados) é extremamente baixo e os meios para alcançá-los
são pequenos.
Aumentar a possiblidade de objetivos a serem alcançados em um sistema, po-

de criar complicações.
Os melhores sistemas são projetados com os objetivos principais dos usuários

em mente, e levam em consideração os limites da memória dos usuários e a
limitação também em relação à quantidade de tarefa que eles conseguem rea-
lizar.
Concluindo, mesmo que isso possa parecer muito óbvio, sempre avalie várias
vezes os fluxos de tarefas e teste sempre, várias vezes, com usuários de verda-
de, para verificar se sua interface realmente é fácil. Você só irá saber se o pro-
duto é fácil de usar se testar com pessoas de verdade.
45

SIMPLIFIQUE A TAREFA
Simplificar a estrutura de uma tarefa complexa pode ajudar no desempenho. E

o que quer dizer que o seu usuário terá uma experiência melhor com seu pro-
duto, e o negócio irá prosperar mais. Por exemplo, a tarefa de se colocar tênis
sem cadarço é muito mais simplificada do que vestir um tênis que possui ca-
darços a serem amarrados (Figure 17). Sem cadarço basta-se colocar nos pés e
nada mais. Não há emprego de tempo e esforço para amarrar o cadarço.

Figure 17: Exemplo de produto com tarefa simplificada (tênis sem cadarço).
Don Norman, em 1988, definiu uma série de maneiras pelas quais os designers
podem fazer com que tarefas complexas se tornem tarefas simples. Norman
disse que a simplificação da estrutura de tarefas é importante para manter a
resolução de problemas e o planejamento ao mínimo, porque são processos
cognitivos exigentes e demorados. Basicamente, ele sugere a simplificar ao
máximo todo a estrutura das tarefas que um usuário executa com seu produto.
Ao tentar criar novos designs para tarefas complexas, é importante se preocu-

par com as limitações da memória do usuário. Por exemplo, é importante ga-
rantir que o usuário nunca tenha que recuperar mais de quatro ou cinco itens,
pois se precisar de lembrar de mais do que cinco itens, ele provavelmente não
irá conseguir. Então, é importante ajudá-lo a reduzir a carga sobre seu sistema
de memória de curto prazo muito limitado e falho.
46

Apresentar para o usuário informações organizadas de forma lógica garante

que o design não entre em conflito com as expectativas dos usuários, que são
formadas principalmente por experiências passadas. Não tente revolucionar as
interfaces. Quase sempre é indicado trabalharmos com padrões e convenções
de designs – com coisas que o usuário viu em outros lugares e consiga facil-
mente utilizar.
Outra questão importante é a consistência do design, o que significa manter

sempre o mesmo padrão de elementos visuais, hierarquia visual, assim também
como manter a consistência das tarefas.
A consistência em tarefas semelhantes significa que o usuário pode aprender

algumas ações e aplica elas a todas as tarefas semelhantes. Isso pode ajudar
muito a limitar a carga de memória e recursos cognitivos dos usuários.
Concluindo, existem vários métodos que podem ser utilizados no design de

forma a auxiliar em relação às limitações humanas. Simplifique, repense o fluxo
de tarefas, automatize ou altere a natureza da tarefa. Faça o que for necessário
para melhorar a usabilidade geral.
SIMPLIFIQUE A NAVEGAÇÃO
No momento em que se está projetando uma interface, é importante se esfor-

çar ao máximo para auxiliar os usuários a navegarem de forma eficaz e que faci-
lite a tarefa que desejam executar, com rapidez e precisão. No entanto, isso
não é tão fácil quanto parece ser.
A navegação é um dos aspectos mais importantes de um site e um aplicativo e

todos os possíveis obstáculos devem ser removidos. É através de uma boa na-
vegação que o usuário chegará até a página do serviço de uma empresa, até o
final do checkout de um produto, ou em outros lugares importantes de seu site
ou aplicativo.
47

CONSISTÊNCIA
É importante estabelecer normas e cumpri-las nas interfaces que são projeta-

das, caso contrário, a produtividade dos usuários poderá ser afetada conside-
ravelmente. Por exemplo, a posição do botão dentro de uma interface é impor-
tante e, dependendo da forma como for feito, pode tornar uma tarefa fácil ou
atrapalhar todo o fluxo do usuário.
Neste sentido, a Consistência basicamente é manter os elementos sempre no

lugar, com os mesmos rótulos, mesmas aparências etc. Veja como a falta de
consistência pode atrapalhar uma tarefa tão simples como instalar um software
(Figure 18). Em um momento, o botão está no lado direito; em outro, o botão
muda de posição, e isso pode atrapalhar o usuário e até fazer com que ele cli-
que no botão errado involuntariamente. Parece algo simples e sem importân-
cia. Porém, isso pode afetar drasticamente o uso de um produto digital.

Figure 18: Exemplo de interface com consistência ruim.
Alterar o posicionamento de itens e botões pode levar os usuários a comete-

rem erros graves, à medida que os usuários clicam inconscientemente na fun-
ção incorreta, porque simplesmente os botões foram trocados.
48

Então, sempre se certifique de manter as mesmas posições dos botões em di-

ferentes páginas para evitar erros como esses. Porém, nunca há uma regra rígi-
da. Se for importante que os usuários não façam seleções automaticamente,
como repetidamente clicando em “OK” durante uma tarefa repetitiva, pode
ser interessante mudar de posição todos os botões para que eles tenham que
abordar qualquer informação nova antes de poderem prosseguir.
A inconsistência na interface pode induzir mais erros e retardar o desempenho

da tarefa à medida que a habilidade dominante é interrompida, forçando o
usuário a ter que verificar qual opção escolher, qual botão clicar, qual link clicar,
simplesmente porque sua interface não tem consistência.
Mas quando a consistência está presente no design, os usuários facilmente po-

dem transferir conhecimento para novos contextos, novas tarefas e ações, e
aprender coisas novas de forma muito rápida e sem dor. Dessa forma, eles po-
dem se concentrar na execução da tarefa em si, e não vão precisar aprender a
usar a interface sempre que alterar esse contexto, já que a interface está consis-
tente e todas opções estão sempre no mesmo lugar, esperando para que o
usuário as use.
Além disso, a consistência elimina a confusão. Quando o usuário se sente con-

fuso, o próximo passo é sentir frustração. E isso é a última coisa que um desig-
ner de experiência do usuário iria querer.
Basicamente, existem 4 tipos de consistências da interface do usuário:
• Consistência visual – os elementos parecidos são percebidos da mesma

forma e compõem a consistência visual. Isso aumenta a capacidade de
aprendizado do produto. Fontes, tamanhos, botões, rotulagem e simila-
res precisam ser consistentes em todo o produto para manter a consis-
tência visual;
49

• Consistência funcional – os controles similares funcionam da mesma ma-

neira e compõem a consistência funcional. Isso aumenta a previsibilida-
de do produto. E a previsibilidade leva os usuários a se sentirem segu-
ros, já que sabem onde estão, o que estão fazendo, o que vai acontecer
e por aí vai. Por exemplo, a maneira de dar um passo atrás no fluxo deve
funcionar da mesma maneira em todo o produto;
• Consistência interna – essa é a combinação de consistência visual e fun-

cional no design. A consistência interna melhora a usabilidade e a capa-
cidade de aprendizado do produto. Mesmo quando você apresenta no-
vos recursos e páginas para os usuários, eles vão ter uma maneira fácil
de usar esses novos recursos, desde que você mantenha a consistência
interna;
• Consistência externa – esse tipo de consistência é alcançado quando

existe a consistência de design em vários sistemas e produtos. Dessa
forma, o conhecimento do usuário para um produto pode ser reutilizado
em outro. Obviamente, isso facilita muito a vida do usuário quando isso
acontece. Um bom exemplo disso são os softwares da Adobe. A interfa-
ce do Photoshop tem a mesma consistência do Adobe Illustrator e isso
facilita muito o aprendizado do usuário entre esses produtos.
INFORMAÇÃO FRAGMENTADA (CHUNCKING)
Basicamente, Chunking é uma técnica que ajuda a digerir mais facilmente e

mais rapidamente as informações, a partir da quebra da informação em peda-
ços menores. Veja como este número de telefone é difícil de memorizar, por
exemplo:
24988049758
50

Mas, se o número é repartido em partes menores, ou seja, fragmentar a infor-

mação, consegue-se muito mais fácil e rapidamente visualizar e memorizar a
informação:
24 98804 9758
E essa abordagem se aplica às interfaces e as informações que elas contem. A

atenção das pessoas é extremamente limitada e os usuários tendem a esperar
que tarefas, como inserir detalhes pessoais, sejam rápidas e indolores.
Mesmo que o usuário precise inserir uma grande quantidade informação, não é
precisa mostrar todos esses campos e opções para ele ao mesmo tempo. Ele
simplesmente ficará confuso, muitas vezes até com preguiça de continuar e
pode acabar desistindo.
Fragmentar a interface pode ser uma escolha técnica quando é preciso ofere-
cer ao usuário uma grande quantidade de itens, elementos, opções, campos e
outras coisas.
Veja como o formulário da direita (Figure 19) parece muito mais fácil, simples e
convidativo para o usuário interagir. O formulário à esquerda claramente em-
prega uma demanda muito maior em relação aos recursos cognitivos dos usuá-
rios, comparado ao formulário da direita, que tem muito menos informação e
opção. O da esquerda é muito mais complexo de usar.
Quando os usuários preenchem dados em formulários assim, é melhor restrin-

gir o tamanho das caixas de acordo com o número de caracteres que podem
ser inseridos. Por exemplo, os números de CPF têm 11 dígitos, por isso faz mui-
to sentido você restringir o campo a 11 caracteres e do tipo inteiro, ou seja,
número, não permitindo o usuário digitar letras, por exemplo.
51

Figure 19: Exemplo de interface sem uso de Chunking e com uso da técnica, respectivamente.
ATALHOS E MEMÓRIA
À medida que os usuários se familiarizam com um sistema, eles irão querer

buscar métodos que ajudem eles a reduzirem o tempo que leva para executar
as operações que eles fazem naquele sistema, principalmente softwares mais
complexos e com mais opções.
Os atalhos – sejam teclas de atalho ou links de atalho – permitem que usuários

mais experientes possam executar as tarefas que já estão acostumados a reali-
zar, com uma velocidade maior, o que aumenta naturalmente a sua produtivi-
dade em relação ao sistema. Por isso é importante projetar produtos que sir-
vam tanto para usuários inexperientes quanto para pessoas que já utilizando o
produto.
CONCLUSÃO SOBRE USABILIDADE
Como foi visto, usabilidade é importante para que se consiga proporcionar

uma boa experiência do usuário, sendo um atributo de qualidade que avalia
principalmente se uma interface é fácil de ser usada. Mas, além disso, a usabili-
dade também se refere à satisfação do usuário quando ele está usando um
produto.
52

A usabilidade também se refere a métodos para melhorar a facilidade de uso

durante o processo de design, como vistos anteriormente: Eficácia, Eficiência,
Engajamento, Tolerância ao erro e a facilidade de aprender a usar um produto.
Para os produtos digitais, a usabilidade é uma condição necessária para a so-

brevivência do negócio. Se um site é difícil de usar, as pessoas saem. Se a ho-
mepage não indica claramente o que a empresa oferece e o que os usuários
podem fazer no site, as pessoas deixam de acessar. Se os usuários se perdem
em um aplicativo, eles desinstalam. Se as informações de um site ou aplicativo
são difíceis de ler ou não respondem a algumas questões dos usuários, eles os
abandonam. O abandono é a primeira linha de defesa quando os usuários en-
contram uma dificuldade.
Portanto, é sempre importante projetar com foco na boa usabilidade. Entretan-

to, é importante ressaltar que só é possível saber de fato se o projeto possui
boa usabilidade caso sejam realizados testes com usuários reais. Deve-se sem-
pre testar diversas vezes com vários usuários, para então verificar se é realmen-
te tão fácil de usar quanto se tinha planejado.
53

Leis da Simplicidade de John Maeda
No livro “Laws of Simplicity” (2006), o autor John Maeda propõe 10 leis para
balancear a simplicidade e complexidade nos negócios, na tecnologia e no
design. Ele propõe diretrizes e orientações para melhorar as coisas de uma
forma melhor com foco na simplicidade.
As 10 leis da simplicidade propostas por John Maeda são:
1. Reduzir – A Maneira mais simples de alcançar a simplicidade é por meio

de uma redução conscienciosa, ou seja, de forma cuidadosa;
2. Organizar – A Organização faz com que um sistema de muitos pareça

poucos;
3. Tempo – Economia de tempo transmite simplicidade;
4. Aprender – O conhecimento torna tudo mais simples;
5. Diferenças – Simplicidade e complexidade necessitam uma da outra;
6. Contexto – O que reside na periferia da simplicidade é definitivamente

não-periférico;
7. Emoção – Mais emoções é melhor que menos;
8. Confiança – Na simplicidade nós confiamos;
9. Fracasso – Algumas coisas nunca podem ser simples;
10. A Única – A simplicidade consiste em subtrair o óbvio e acrescentar o

significativo.
54

REDUZA
A forma mais simples de alcançar a simplicidade é por meio de uma redução

conscienciosa. Não faça seu usuário, público ou qualquer outra pessoa envolvi-
da no processo pensar. Aquela ideia de menos é mais precisa ser repetida dia-
riamente, até que isso vire uma cultura dentro da equipe de desenvolvimento
de um produto.
John Maeda propôs uma sigla, que ele chamou de “SHE” para conseguir a re-
dução:
• Shrink (Encolha, reduza): quando um objeto pequeno atende todas as

nossas expectativas, não só ficamos surpresos, mas bastante satisfeitos.
• Hide (Ocultar): como acontece no canivete suíço, você não precisa mos-
trar todas as opções disponíveis para o usuário. O poder de ESCONDER
grandes quantidades de opções também diminui a complexidade do
uso de um produto.
• Embody (Incorpore): um produto precisa transmitir o valor que ele real-

mente tem. Os consumidores só vão ser atraídos para o produto menor
e menos funcional se eles percebem que ele é mais valioso do que a
versão maior do produto e com mais recursos. A qualidade pode de
verdade, igual quando é incorporada por materiais melhores, como o
caso do iPhone, ou a qualidade pode ser percebida, como acontece em
campanhas de publicidade e marketing.
ORGANIZE
A organização faz com que um sistema de muitos pareça de poucos. Os princí-

pios da Gestalt ilustram o que a mente humana evoluiu para preencher os es-
paços em branco. É possível enxergar figuras e formatos fechados e completos
mesmo que hajam muitos espaços em branco e a imagem não esteja de fato
completa. Em outras palavras, o todo é independente de suas partes.
55

A evolução da roda do iPod ilustra como a organização de peças menores, em

um todo, pode aumentar a usabilidade de um produto.

Figure 20: Diferença entre as interfaces do produto iPod (Apple).
John Maeda propôs uma sigla, que ele chamou de “SLIP” para conseguir a or-
ganização:
• Sort (Ordenar): ordene as informações para tornar mais fácil o entendi-

mento da interface;
• Label (Etiqueta): nomeie cada grupo de forma clara e fácil de entender;
• Integrate (Integre): sempre que possível, agrupe os grupos, desde que

façam sentido uns aos outros;
• Prioritise (Priorize): use o Princípio de Pareto, com a regra de 80/20, que

diz que 80% do impacto vem de 20% das causas. Isso significa que uma
pequena porção dos seus esforços vai gerar uma grande parcela dos
seus resultados.
56

TEMPO
Economia de tempo transmite simplicidade – E lucro também. Com a econo-

mia de tempo, os usuários deixam de desperdiçar tempo e consequentemente
dinheiro. Isso vale para os negócios e as empresas também. Foco é importante.
Ninguém gosta de ficar esperando. Então, o designer deve se esforçar ao má-
ximo para criar produtos que economizem o tempo do usuário, e não o contrá-
rio.
Para o Tempo, John Maeda também usou a sigla “SHE” para conseguir eco-
nomia de tempo:
• Shrinking time (Encolha/reduza o tempo): o ponto principal disso é re-

mover as escolhas e fazer com que o computador, a máquina, faça as
escolhas para os usuários, de forma mais automatizada. Por exemplo, os
pagamentos de um clique do Amazon. Outro exemplo é o iPod Shuffle,
que aleatoriamente escolhe as músicas para você.
• Hiding time (Esconda o tempo): uma maneira simples de economizar o

tempo é simplesmente esconder ele. É por isso que não vemos nenhu-
ma janela nos shoppings. Você passar horas lá dentro vendo as lojas,
comprando, e nem vê que já são 9 horas da noite e que o tempo passou
voando. Simplesmente, porque você literalmente não viu o dia passar e
a noite chegar.
• Embody time (Incorpore o tempo): um computador congelado é como

um relógio congelado, é exatamente por isso que a barra de progresso
foi inventada. O usuário vê o progresso e diminui a ansiedade e frustra-
ção. Por exemplo, é muito agoniante quando uma barra de progresso
simplesmente para em 99% e fica lá uns 10 minutos e não sei o que está
acontecendo e se está tendo realmente algum progresso.
57

APRENDA
O conhecimento torna tudo mais simples. Depois que se aprende a fazer algo
que pensava ser difícil, a tarefa se torna fácil e natural. Simplesmente porque a
partir desse momento se tem o conhecimento daquilo.
Para esta lei, John Maeda propôs usar a sigla “BRAIN”:
• Basic are beginning (Os princípios básicos estão começando): assuma a

posição do aprendiz pela primeira vez;
• Repeat yourself often (Repita com frequência): a simplicidade e a repeti-

ção estão inter-relacionados. Repetir várias vezes uma tarefa a torna
mais simples de ser realizada;
• Avoid creating desperation (Evite criar desespero): evite que os usuários

fiquem desesperados porque não conseguem usar sua interface. Por
exemplo, a minha mãe sempre ficava desesperada porque não conse-
guia usar o WhatsApp nos primeiros dias de uso;
• Inspire with examples (Inspire com exemplos): John Maeda diz que a
motivação interna supera a recompensa externa;
• Never (Nunca) se esqueça de repetir uma tarefa várias vezes, para que a
torne mais fácil. Como eu já disse anteriormente.
DIFERENÇAS
A simplicidade e a complexidade necessitam uma da outra. A diferença é a for-

ça motriz da inovação, da mudança. Através dela consegue-se perceber o quão
perto, ou quão distante se está da simplicidade.
Sem esse contraponto da complexidade, não se torna difícil reconhecer a sim-

plicidade quando a ver. Para saber o que é simples, é preciso saber também o
58

que é complexo. Quanto mais complexidade existe no mercado, mais se des-

taca aquele que é o mais simples.

Figure 21: Contraponto entre complexidade e simplicidade.
CONTEXTO
John Maeda disse a frase “O que está na periferia da simplicidade definitiva-

mente não é periférico”. Isso quer dizer que o contexto é o que permeia qual-
quer coisa. E, fazer sentido, depende de um contexto. Assim como para o con-
teúdo, a simplicidade depende muito do contexto.
Esta lei do Contexto enfatiza a importância do que pode se perder durante o

processo de design. Tudo depende do contexto em que o produto, a interface,
está colocado.
EMOÇÃO
Maeda diz que ter mais emoções é melhor que menos. Porém, o que emoção
significa para o design? É importante lembrar que a simplicidade pode ser con-
siderada feia também. E por que, depois que as pessoas são atraídas pela sim-
plicidade de um dispositivo, elas adoram ele e ficam doidas para usar o produ-
to? Porque a emoção gera impulso, ação, desenvolvimento e resposta pró ati-
va.
59

No entanto, encher um produto com emoção pode exigir que se afaste um

pouco da simplicidade, pois acaba introduzindo novos níveis de significado.
Existem pessoas que escolhem produtos simples e minimalistas, como um iPod

ou iPhone por exemplo, e a primeira coisa que eles fazem é personalizá-los,
com adesivos, capas e todos os tipos de acessórios. Porque dar sentimento e
emoção a um objeto é uma característica muito humana.
Então, o grande desafio é manter o nível emocional, mas combinando-o com

uma abordagem mais simples e direta. É, isso é um pouco complexo a princí-
pio.
CONFIANÇA
Na simplicidade nós confiamos. A cada dia que passa, a computação em se

torna mais inteligente. Não estamos longe de ter algum dispositivo eletrônico
que funcione com apenas um botão e, que quando pressionado, ele poderia
completar sua tarefa imediata, seja lá o que for essa tarefa. Essa é a personifi-
cação pura da simplicidade, e não estamos longe dessa realidade.
Aliás, já existiu um produto assim: o botão Dash da Amazon (Figure 22).

Figure 22: Botão Dash da Amazon.
60

Basicamente, o Botão Dash é simplesmente um botão de compra imediata. Ele

é um pequeno dispositivo que permite comprar itens de uso doméstico com o
toque de um botão na Amazon.
Na prática, esses botões podem ser colados em qualquer lugar na casa, como
por exemplo na máquina de lavar roupa. Então, quando o detergente acabar,
basta apertar o botão específico daquele item e um pedido é enviado automa-
ticamente para o Amazon para aquele determinado produto. E a pessoa o re-
cebe em casa.
Quanto mais um sistema sabe sobre você, menos você precisa pensar. Por ou-
tro lado, quanto mais você souber sobre o sistema, maior controle você pode
exigir. Assim, o dilema para o futuro uso de qualquer produto ou serviço é re-
solver esse dilema.
FRACASSO
Assim como nos negócios, falhar faz parte. Algumas coisas nunca podem ser
simples. Saber que a simplicidade pode ser evasiva em certos casos é uma
oportunidade de fazer um uso mais construtivo do seu tempo no futuro, em vez
de perseguir um objetivo aparentemente impossível.
Às vezes, para algumas coisas, alcançar a simplicidade é simplesmente impos-

sível ou inviável. No entanto, sempre há um ROF (“Return On Failure”, ou “Re-
torno Sobre o Fracasso”).
A experiência fracassada de uma pessoa na simplicidade pode ser o sucesso

de outra, como uma forma de uma boa complexidade. É preciso haver uma
percepção de que algumas coisas simplesmente não devem ser simples, como
relacionamentos e arte. Principalmente relacionamentos.
61

“THE ONE”
Traduzindo em português, “A Única” se refere à simplicidade propriamente

dita. Essa lei é autoexplicativa. No entanto, existem três pontos importantes a
ter em mente:
• Distanciamento: Mais parece menos simplesmente afastando-se para

bem longe;
• Abertura: Abertura significa simplicidade;
• Energia: Use menos para ganhar mais.
Para concluir, a simplicidade consiste em subtrair o óbvio e acrescentar o signi-

ficado.
62

Heurísticas de Jakob Nielsen
Pensar no Design da Interface do Usuário é pensar em projetar interfaces que

não gerem momentos de insegurança para os usuários, que deixem claro quais
serão os resultados de suas ações e que garantam que o mesmo realize todas
as tarefas de forma simples e eficiente. Basicamente, é fazer com que o usuário
não precise assistir a tutoriais ou ler manuais de instruções para usar o produto
que foi projetado. Se isso acontecer, algo deu erro no seu projeto.
Para isso existem dez heurísticas criadas por Jakob Nielsen, que é um cientista
da computação e que ajuda a projetar uma boa interface e por consequência
uma ótima experiência de uso.
VISIBILIDADE DO STATUS DO SISTEMA
Geralmente, as pessoas são muito dependentes da visão. Ainda assim, quando

estamos em um ambiente físico, temos outros sentidos que nos informam o
que está acontecendo. Mas quando falamos de um site, aplicativo, software ou
interface, isso é um pouco diferente.
Essa heurística fala sobre a responsabilidade do sistema de informar o que está

acontecendo em tempo real para o usuário. Em produtos digitais, a dependên-
cia da visão é ainda maior. Por conta disso, é essencial que a interface forneça
ao usuário o status em relação à sua posição dentro do sistema. Em outras pa-
lavras, a interface deve informar o usuário sobre qual ambiente ele estava, em
qual ele está e para quais outros ambientes ele poderá se dirigir a partir de sua
localização. E quando digo sobre ambiente, falo em termos gerais, inclusive do
status do sistema, e qualquer outro elemento que possa ser alterado. O usuário
63

sempre deve estar ciente de tudo que acontece ao seu redor, no ambiente di-
gital.
Quando estamos assistindo uma playlist no Youtube, por exemplo, temos no

lado direito um indicador de qual vídeo estamos assistindo, quais os vídeos
anteriores e quais são os seguintes (Figure 23). Essa é a visibilidade do status do
sistema da playlist do Youtube.

Figure 23: Playlist de vídeos no Youtube.
CORRESPONDÊNCIA ENTRE A INTERFACE E O MUNDO REAL
Sempre tenha em mente o seguinte que, na maioria das vezes, o usuário não
tem conhecimentos técnicos e não sabe profundamente a terminologia que a
equipe de designers e desenvolvedores usaram durante o desenvolvimento do
produto. Portanto, é importante falar sempre a linguagem do usuário, o mais
simples possível, mesmo que ache que ele tenha conhecimentos aprofundados
sobre algo.
Outro aspecto da correspondência entre a interface do sistema e mundo real

são os símbolos utilizados dentro de uma interface – como é visto muito em
softwares da Adobe, por exemplo. Parece algo sem muita importância, mas
escolher corretamente os ícones que serão usados para colocar em uma inter-
face pode facilitar ou prejudicar muito a compreensão das informações.
64

LIBERDADE E CONTROLE DO USUÁRIO
Em algum momento, o usuário pode acabar deletando algum e-mail que tenha
documentos importantes anexados e acabar se desesperando pela perda. Po-
rém, é possível recuperar os e-mails excluídos acessando a lixeira, função essa
que pode salvar trabalhos e conversas importantes da vida profissional dos
usuários.
A questão importante aqui é que, quando o usuário realiza alguma ação por
engano, o sistema deve apresentar ao usuário uma “saída de emergência” da-
quele estado no qual ele entrou para o estado de segurança em que estava.
Em poucas palavras, em cenários de risco e de importância dê ao usuário a
possibilidade de desfazer suas ações, pois essa possibilidade de reverter o que
foi feito remove a insegurança do usuário ao utilizar o produto digital.
CONSISTÊNCIA E PADRONIZAÇÃO
Como foi dito anteriormente, é extremamente importante mantermos a consis-

tência e o padrão visual. Ou seja, textos, cores, posição dos elementos, som,
ícones e qualquer elemento que compõe a interface. Manter consistência entre
as telas de uma aplicação é crucial para que não seja necessário o entendimen-
to de vários padrões e formas de interações diferentes para cada tela. Ou seja,
uma vez que o usuário aprendeu a usar algo, ele será replicável em outros con-
textos.
Além disso, a experiência de uso se torna muito mais interessante pois não
existirá aquela sensação de estar perdido. Se o menu sempre está no canto
esquerdo superior, em qualquer página que você esteja, você facilmente pode-
rá ir para outras páginas, sem pensar, já que o menu estará sempre lá para você
usar.
Muitas vezes, o motivo pelo qual usuários não interagem com as aplicações é
essa sensação causada pela falta de consistência e padronização.
65

Um grande erro de consistência aconteceu quando a Microsoft resolver remo-

ver o botão Iniciar do Windows 8. Desde os primórdios do Windows, os usuá-
rios estavam acostumados com o botão Iniciar. E, repentinamente, quando
começaram a usar o Windows 8, as pessoas ficaram perdidas, porque não sabi-
am onde estava aquele menu, o que causou grandes problemas para a Micro-
soft na época.
PREVENÇÃO DE ERROS
Não é uma boa ideia deixar o usuário errar sem explicar o motivo do erro. Me-
lhor do que explicar porque um erro aconteceu, é tentar evitar que esse erro
aconteça.
Por exemplo, a busca do Google faz isso de uma forma muito eficaz e inteli-
gente (Figure 24). Assim que começamos a digitar alguma coisa para buscar, o
Google já entrega para nós algumas sugestões. Mesmo se escrevermos a bus-
ca com uma ortografia errada, o sistema dele realiza a busca e pergunta se es-
tamos procurando outra informação com a ortografia correta. É bastante útil.

Figure 24: Interface da página principal do Google.
66

Portanto, melhor do que mensagens dizendo que o usuário cometeu algum

erro, é prevenir que ele não cometa esse erro. Caixas de confirmação, como as
que aparecem quando você deleta um arquivo, são um outro exemplo de co-
mo evitar erros (Figure 25).

Figure 25: Caixa de diálogo que previne erro do usuário.
RECONHECIMENTO EM VEZ DE MEMORIZAÇÃO
O usuário não tem obrigação de decorar qual foi o caminho que ele fez para
chegar até alguma página, seja no site ou em algum aplicativo.
Por exemplo, quando o usuário acessa um produto do site do Ebay é disponi-

bilizado o caminho que fez para chegar até ele – “breadcrumb” ou “migalhas
de pão” (Figure 26).
67

Figure 26: Uso de "breadcrumbs" no site do Ebay.
O cérebro é muito bom em reconhecer padrões, e na medida em que os obje-

tos, as ações e as opções ficam expostos para o usuário, mais dicas chegam ao
cérebro dele tornando certas ações familiares. Ou seja, é muito melhor dar ao
usuário algumas formas de reconhecer padrões do que ter que obrigar ele a
memorizar várias informações na medida em que ele navega pelo site, por
exemplo.
A grande diferença entre reconhecer e memorizar é a quantidade de dicas que

são fornecidas pela interface para que um conhecimento seja acessado pelo
usuário.
FLEXIBILIDADE E EFICIÊNCIA DE USO
É importante proporcionar uma boa experiência de uso desde o usuário mais

leigo até o mais avançado. A interface deve ser muito fácil de ser usada por
68

usuários novos, mas também deve ser capaz de ser personalizada por usuários
mais experientes, para que aumente a produtividade no dia a dia dele.
O ponto importante aqui é que a interface seja útil tanto para usuários leigos
como para experientes.
Os leigos precisam de informações mais detalhadas para conseguirem realizar

as tarefas. Mas, à medida em que comecem a entender melhor como funciona
a interface, surge a necessidade do usuário ter formas de interação mais rápi-
das, como é o caso das teclas de atalho.
ESTÉTICA E DESIGN MINIMALISTA
Em relação à interface, tente ser sempre o mais claro possível. Toda informação
extra que deixar para o seu usuário pode adicionar mais dúvida, mais comple-
xidade, mais tempo de o usuário conseguir entender a mensagem que você
quer transmitir. Ou seja, deixe o seu layout e o conteúdo o mais simples e dire-
to possível.
Quanto maior a quantidade de informação, maior será a quantidade de infor-

mações que serão analisadas e decisões que o usuário precisará tomar. Por
isso, é crucial manter apenas as informações que são realmente necessárias. As
informações secundárias podem ser deixadas em segundo plano. Assim, a in-
terface se torna eficiente no que diz respeito a transmitir as informações para
os usuários.
RECONHECER, DIAGNOSTICAR E SANAR ERROS
Nem sempre é possível evitar que erros aconteçam. É bem difícil prever todos
os erros que podem acontecer com um produto. Por isso, as mensagens de
erros precisam ser extremamente claras e próximas do conteúdo ou ação que
causou o erro.
69

Por exemplo, no formulário de cadastro do Spotify (Figure 27), caso você não
preencha os dados necessários, o sistema deixa bem claro quais campos estão
faltando, com uma mensagem clara e objetiva.

Figure 27: Exemplo do formulário do Spotify.
Isso não acontecia no antigo sistema do Windows, que simplesmente mostrava

uma tela azul com um longo texto branco de códigos e sem explicações claras,
quando o sistema travava (Figure 28). Isso pode fazer com que o usuário fique
desesperado e pense que ele perdeu tudo em seu computador.
70

Figure 28: Tela azul de erro do Windows.
AJUDA E DOCUMENTAÇÃO
É uma ótima ideia não precisar dessa heurística. Aliás, se o usuário realmente
precisar de um manual de instruções ou precisar que alguém ensine ele a usar
sua interface, pode ser que seu processo de design tenha falhado drasticamen-
te.
Contudo, há casos específicos que a ajuda e documentação seu realmente ne-

cessária. Nesse caso, deixe a documentação próxima do usuário, em algum
local de fácil acesso.
71

Indicação de livros
Neste capítulo, são sugeridos livros relacionados a esta disciplina. É fortemente
indicada a leitura destes para aqueles que desejam aprofundar seus conheci-
mentos nos pontos abordados nesta disciplina.
72

Information Architecture for the

World Wide Web
(Peter Morville)
Design de Interação: Além da

Interação Humano-Computador
(Yvonne Rogers, Helen Sharp,
Jenny Preece)
Universal Principles of Design

(William Lidwell, Kritina Holden,
Jill Butler)
73

Designing for Interaction: Crea-

ting Innovative Applications and
Devices
(Dan Saffer)
About Face: The Essentials of

Interaction Design
(Alan Cooper)
O Design do Dia a Dia

(Donald A. Norman)
74

75

76

Arquitetura Da Informação e Design de Interação

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Arquitetura Da Informação e Design de Interação

Enviado por

Direitos autorais:

Formatos disponíveis

UX DESIGN E

Entender profundamente o que é Arquitetura da Informação e qual sua impor-

tância para o desenvolvimento de produtos que proporcionam boa experiência

de uso. Além disso, discorrer sobre aspectos fundamentais do Design de Inte-

ração, como usabilidade e boas práticas.

PROFESSOR AUTOR E RESPONSÁVEL:

Rian Dutra da Cunha (eu@riandutra.com)

Designer de Interação Sênior especializado em User Experience. Mestre em

Ciência da Computação (UFJF), graduado em Design Gráfico (Infnet) e Análise

de Desenvolvimento em Sistemas (UNESA), e outras especializações na área de

design, tecnologia e empreendedorismo.

Copyright 2007. IDI. Todos os Direitos Reservados.

intranets, aplicativos mobile e softwares para favorecer a usabilidade e a facili-

dade para se encontrar o que se procura. Ou seja, é a estruturação de toda a

informação disponível em um produto digital, para que os usuários possam

encontrar fácil e rapidamente o que procuram.

Copyright 2007. IDI. Todos os Direitos Reservados.

Introdução à Arquitetura da Informação

Primeiramente, é importante entender que Arquitetura da Informação (AI) é

Como parte padrão do processo UX, os designers projetam a arquitetura de

Semelhante à construção de arquitetos que usam um plano para construir cada

Copyright 2007. IDI. Todos os Direitos Reservados.

No entanto, com o foco na experiência do usuário, o projeto da AI não é tão

Como parte do processo de UX, o projeto da AI segue padrões muito seme-

O desafio ao construir a AI é entender como o produto realmente funciona da

O aspecto mais desafiador da criação de uma nova Arquitetura de Informação

Ao criar a AI a partir de esboços, a menos que o produto esteja seguindo um

Copyright 2007. IDI. Todos os Direitos Reservados.

Copyright 2007. IDI. Todos os Direitos Reservados.

Definição de Arquitetura da Informação

O termo “Arquitetura da Informação” pode ser algumas das definições a se-

1. Projeto estrutural de ambientes de informação compartilhada;

Para entender melhor do que AI é feita, a seguir são apresentadas definições

• Informação – o termo informação é usado para distinguir arquitetura da

Copyright 2007. IDI. Todos os Direitos Reservados.

meio bagunçado. Com os sistemas de informação, muitas vezes não há

• Estruturação, organização e rotulagem – São pontos fundamentais para

• Encontrar e gerenciar – A localização é um fator crítico de sucesso para a

ORGANIZAÇÃO E ESTRUTURAÇÃO DA INFORMAÇÃO

Os seres humanos vêm estruturando, organizando e rotulando informações há

Hoje, a maioria das pessoas se familiariza com os conceitos básicos de organi-

Copyright 2007. IDI. Todos os Direitos Reservados.

Para entender a importância da organização e estruturação da informação,

O cenário oposto seria uma biblioteca onde há sistemas complexos e profissi-

O QUE NÃO É ARQUITETURA DA INFORMAÇÃO

Mapeando os limites da Arquitetura da Informação, podemos dizer que Design

Copyright 2007. IDI. Todos os Direitos Reservados.

Por exemplo, analisemos a Figura 2. As barras de navegação apresentam rótulos

Mas, e quanto à aparência da barra de navegação? E quanto à escolha de co-

No cenário de desenvolvimento de produtos digitais existem diversos perfis de

A IMPORTÂNCIA DA ARQUITETURA DA INFORMAÇÃO

A Arquitetura da Informação deve ter uma atenção especial durante o projeto e

• O custo de encontrar informações – Quanto custa cada funcionário da

Copyright 2007. IDI. Todos os Direitos Reservados.

• O custo de não encontrar informações – Quantas decisões ruins são to-

• O valor da divulgação da informação – Qual é o valor de informação aos

• O custo da construção e manutenção – Quanto custa projetar e construir

• O custo do treinamento – No caso de sistemas internos ou de cursos on-

• O valor da marca – Não importa o quão bonito seja um site ou aplicati-

Copyright 2007. IDI. Todos os Direitos Reservados.

Anatomia da Arquitetura da Informação

Para entender do que a Arquitetura da Informação é composta, a figura a se-

Copyright 2007. IDI. Todos os Direitos Reservados.