O Guia Completo para Arquitetura da Informação

Ouça a versão em áudio deste artigo

Como parte padrão do processo de UX, os designers criam arquitetura de informações ao criar produtos. Definindo todos os caminhos e caminhos que os usuários podem seguir por meio de um aplicativo ou site, a arquitetura da informação é muito mais do que apenas um mapa do site para mostrar qual página leva para onde.

Semelhante aos arquitetos de construção que usam um projeto para construir todas as partes de uma casa, desde estruturas físicas até trabalhos internos mais complexos, como elétrica e encanamento, a arquitetura da informação descreve a hierarquia, navegação, recursos e interações de um site ou aplicativo. E assim como as plantas são o documento mais valioso para um arquiteto usar na construção de um edifício, a arquitetura da informação pode ser a ferramenta mais poderosa no arsenal de um designer.

No entanto, desenvolver um não é tão simples quanto reunir uma lista de recursos e mapear como eles funcionam - vamos investigar o processo.

O que é arquitetura da informação e por que é importante?

A arquitetura da informação (IA) é, como um projeto, uma representação visual da infraestrutura, recursos e hierarquia do produto. O nível de detalhe fica a critério do designer, portanto, a AI também pode incluir navegação, funções e comportamentos do aplicativo, conteúdo e fluxos. Não há limite definido para o tamanho ou forma do AI; no entanto, deve abranger a estrutura generalizada do produto para que qualquer pessoa (teoricamente) possa lê-lo e entender como o produto funciona.

Usaremos a referência do blueprint com frequência porque a finalidade de ambos os documentos é quase idêntica. Assim como um projeto, a IA fornece aos designers (assim como às equipes de desenvolvimento e engenharia de produtos) uma visão panorâmica de todo o produto. Ter um único documento que forneça uma representação simples e compreensível de como o aplicativo ou site funciona é vital para desenvolver novos recursos, atualizar os existentes e ver o que é possível considerando o produto existente.

Com a IA disponível, torna-se significativamente mais fácil tomar decisões importantes para novos recursos e implementações, entender os cronogramas para alterações de produtos e acompanhar o comportamento do usuário por meio de vários processos.

Vamos mergulhar em um vídeo básico para ver como um IA é construído.

Como projetar a arquitetura da informação

Como parte do processo de UX, o design de IA segue padrões muito semelhantes ao fluxograma: adicione formas e conecte-as com linhas de forma organizada a um único documento. O desafio ao criar IA é entender como seu aplicativo ou site realmente funciona da perspectiva do usuário e como organizar essas informações em um formato legível e legível.

Existem dois requisitos principais para realmente construir IA: organizá-lo por meio de uma hierarquia visual (ou seja, uma hierarquia de recursos, funções e comportamento) e criar uma legenda para exibir diferentes tipos de recursos, interações e fluxos. Com fluxograma padrão, as formas seguem requisitos específicos (retângulos são processos, losangos são pontos de decisão, etc.); no entanto, seguir essa nomenclatura não é um requisito.

Em outras palavras, os fatores mais importantes para construir seu IA são onde os componentes individuais da arquitetura são colocados (hierarquicamente) e como eles são rotulados e exibidos.

Entendendo e mostrando a hierarquia visual

O aspecto mais desafiador de criar uma nova arquitetura de informação é quase sempre construí-la hierarquicamente. É um equívoco comum que a IA deve ser construída “de cima para baixo”. Isso é quase sempre mais difícil de fazer, a menos que seja um produto existente, como no vídeo acima.

Ao criar IA do zero, a menos que seu site ou aplicativo esteja seguindo um formato padrão, desenhar qualquer coisa após o nível superior é muito difícil. É como pedir a um mecânico que construa um carro de cima para baixo em vez de em partes. Cada peça deve ser construída antecipadamente com sua própria pesquisa, tempo para design e desenvolvimento. O mesmo acontece com o IA.

A exibição de hierarquia visual é um recurso valioso para IA, não apenas porque fornece melhor contexto para o leitor, mas também generaliza as principais regiões do produto. Se o recurso mais significativo do seu aplicativo for pedir uma carona (à la Uber ou Lyft), que pode ser feito na 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.

Os Sitemaps são úteis para entender a hierarquia, pois organizam as páginas numericamente (como 1.0 Home, 2.0 Payment, 2.1 Add Pay Method, etc.). Ou considere o exemplo na imagem abaixo para o site da biblioteca da Duke University, onde a navegação superior não está apenas na parte superior, mas também destacada para ser visível em todo o aplicativo.

Hierarquia de formas, cores e outros elementos visuais

Além da hierarquia, a arquitetura acima faz outra coisa bem: exibe cada ponto de engajamento de forma exclusiva, conforme necessário, por meio de uma legenda simples e algumas frases-chave. A legenda denota a página e o tipo de conteúdo e significa variações entre as cores das formas. Isso é importante porque, embora o site de Duke pareça bastante simples, o IA tem apenas três níveis de profundidade. Cada retângulo amarelo denota um aplicativo, portanto, os processos dentro de cada uma dessas caixas não estão incluídos neste documento!

Mesmo sem essas partes disponíveis, a estrutura é tal que podemos entender como navegar no site apenas pelo IA. Isso para quando chegamos a um aplicativo dentro do site — não é necessário.

O IA abaixo é para um jogo. Usando quatro formas, sem cor e trechos de texto bem posicionados, toda interação importante é compreensível sem protótipos e, mais importante, pode ser compreendida por qualquer pessoa que trabalhe nela.

Esse modelo não é perfeito, mas organiza claramente a hierarquia de aplicativos e delineia o que o usuário vê ou faz em um determinado ponto.

As melhores ferramentas de arquitetura da informação

Existem muitos aplicativos de software que permitem a construção de um IA, mas poucos são simples e rápidos o suficiente para tornar a experiência agradável. Ou, pelo menos, fácil de gerenciar.

O Draw.io, usado no vídeo acima, é totalmente gratuito para uso pessoal e profissional e se conecta automaticamente ao Google Drive. Também possui integrações com Confluence e JIRA, que são pagas. O Draw.io é excelente para fluxogramas, criação de fluxos de usuários e arquitetura de informações e, com a funcionalidade do Drive, várias pessoas podem trabalhar no mesmo documento e ver as alterações ao vivo. Há também uma versão offline gratuita.

O Lucidchart é outra ótima ferramenta que oferece uma experiência um pouco melhor que o Draw.io e tem benefícios adicionais, como modelos pré-criados, muito mais integrações, um aplicativo móvel (classificado com 2,5 estrelas na App Store) e suporte para empresas.

O Omnigraffle e o Visio são pilares da indústria de longa data e funcionam de forma excelente para criar e manter um design de IA, embora o Visio seja apenas online (a versão offline mais antiga é apenas para Windows), enquanto o Omnigraffle é apenas para Mac e requer compras separadas para MacOS e iOS versões. O OmniGraffle tem um benefício sobre os principais concorrentes, pois fornece automação de JavaScript e AppleScript, o que para a maioria dos designers pode ser desnecessário, mas normalmente os arquitetos de informação em tempo integral o apreciam.

Todas as ferramentas listadas acima são feitas para velocidade e facilidade de uso, especificamente em torno do fluxograma, que segue princípios quase idênticos à arquitetura da informação. Outros aplicativos como Balsamiq, MindMeister, MindManager ou XMind oferecem um comportamento de estilo semelhante, mas são criados para outros propósitos importantes, como prototipagem ou mapeamento mental.

Práticas recomendadas de arquitetura da informação

Embora existam poucas regras definidas para o que constitui a arquitetura da informação, ao passar pelo processo, considere o seguinte:

Não foque na hierarquia, foque na estrutura

A hierarquia é ajustável. A página inicial sempre será a página inicial, mas para onde ela leva, como os usuários chegam a esses lugares e tudo entre e além é determinado posteriormente.

Todos os processos devem ser lógicos

Mesmo que o IA no processo de UX seja para interações do usuário, cada passo do caminho precisa fazer sentido. As telas de registro não devem levar a configurações, uma função de câmera não deve pular para uma visualização de mapa... a lista continua.

Lembre-se do processo de UX

Um erro comum é apenas fazer IA, sem recursos, pesquisa ou outros ativos ou trabalho. Isso é como dizer a um autor para escrever um livro sem um esboço, ou a um programador para codificar um aplicativo sem protótipos.

Você é o cartógrafo

Os cartógrafos levam em consideração tudo sobre um mapa, desde cadeias de montanhas até fronteiras estaduais. Assim como os criadores de mapas, os designers determinam o que entra no design de AI. Páginas individuais, comportamentos específicos do usuário, contexto para pontos de decisão… e assim por diante.

Em última análise, o cartógrafo decide o que vai no mapa com base nas necessidades do usuário. O mesmo vale para os designers, então construa o IA para o usuário final, ou seja, as equipes de desenvolvimento e design do produto.

A arquitetura da informação está em constante mudança e evolução

Para aprofundar o ponto mais uma vez, todos os IAs são criados para mudanças. Os produtos evoluem, os designs mudam, os usuários se adaptam e o ciclo continua, repetidamente. Não leve muito a sério e saiba que sempre haverá espaço para melhorias. Não aponte para a perfeição; construir um IA simples e adaptável.

Minha arquitetura de informação está pronta... e agora?

É uma concepção comum que qualquer trabalho de design nunca é realmente feito, e esse é certamente o caso da arquitetura da informação. Eles crescem, encolhem e mudam como nossos produtos. Ao contrário de um projeto para um edifício, a IA sempre evoluirá com base em qualquer coisa, desde as necessidades do usuário até novos recursos ou uma revisão do produto. Grande parte da estrutura pode permanecer a mesma e fornecer consistência entre as versões para que os usuários não fiquem confusos.

E isso é uma coisa boa. Saber que a AI é um documento fluido – que provavelmente muda semanalmente e às vezes até diariamente – é uma maneira poderosa de manter a estrutura geral do seu aplicativo ou site sem nunca mexer no código ou criar novos protótipos. Quanto melhor toda a equipe de desenvolvimento de produto conhecer o IA, mais rápido todos saberão o que é e o que não é possível, e quão sério qualquer suposto “trabalho fácil” realmente é.

O que nos leva à verdadeira beleza da arquitetura da informação: não há um ponto de partida predefinido. Enquanto o processo tradicional de design de UX determina que o IA seja construído após a conclusão de fluxos de usuários suficientes; armado com muita pesquisa de usuários e concorrentes, também pode ser a primeira coisa a ser feita... ou a última. O processo de prototipagem geralmente traz informações sobre como certos comportamentos ou ações devem ocorrer que seriam difíceis de imaginar a partir de uma AI lógica ou sem imaginação.

Como uma prática em constante evolução, o design de IA é tanto uma arte quanto uma habilidade, e é em parte por isso que as grandes corporações têm cargos de arquiteto de informação. Esses designers são os guardiões de sistemas massivos e, com sua compreensão do crescimento do produto ao longo do tempo, ajudam a orientar as equipes de produto, design e engenharia a tomar as decisões corretas ao longo dos anos . Essa escala de organização não é para todos os designers, mas cada designer pode construir uma arquitetura de informação simples e compreensível.

• • •

Leitura recomendada sobre arquitetura da informação

IA para a Web e além

Como entender qualquer bagunça: arquitetura da informação para todos

Noções básicas de arquitetura de informação

A diferença entre arquitetura de informação e UX Design

• • •

Leia mais no Blog Toptal Design:

• eCommerce UX – Uma visão geral das melhores práticas (com infográfico)
• A Importância do Design Centrado no Homem no Design de Produto
• Os melhores portfólios de UX Designer – Estudos de caso e exemplos inspiradores
• Princípios heurísticos para interfaces móveis
• Design Antecipatório: Como criar experiências de usuário mágicas