Ouvir a versão de áudio deste artigo
Como parte padrão do processo UX, os designers criam arquitetura da informação ao construir produtos. Definindo cada avenida e caminho que os usuários podem tomar através de um aplicativo ou site, a arquitetura de informação é muito mais do que apenas um mapa do site para mostrar qual página leva aonde.
Similiar a construir arquitetos usando um plano para construir cada parte de uma casa, desde estruturas físicas até trabalhos internos mais complexos como eletricidade e canalização, a arquitetura de informação descreve a hierarquia, navegação, características 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 de informação pode ser a ferramenta mais poderosa no arsenal de um designer.
No entanto, desenvolver uma não é tão simples quanto juntar uma lista de recursos e mapear como eles trabalham – 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 infra-estrutura, recursos e hierarquia do produto. O nível de detalhe depende do designer, portanto a IA também pode incluir navegação, funções e comportamentos da aplicação, conteúdo e fluxos. Não há limite definido para o tamanho ou forma do IA; no entanto, ele deve abranger a estrutura generalizada do produto para que qualquer pessoa (teoricamente) possa lê-lo e entender como o produto funciona.
Utilizaremos a referência do plano frequentemente porque o propósito de ambos os documentos é quase idêntico. Tal como um projecto, a IA fornece aos designers (bem como às equipas de desenvolvimento e engenharia do produto) uma visão aérea de todo o produto. Ter um único documento que forneça uma representação simples e compreensível de como a aplicação ou website funciona é vital para desenvolver novos recursos, atualizar os existentes e para ver o que é possível considerando o produto existente.
Com a IA disponível, torna-se significativamente mais fácil tomar decisões chave para novos recursos e implementações, entender linhas de tempo para mudanças no produto e acompanhar o comportamento do usuário através de múltiplos processos.
Vamos mergulhar em um vídeo básico para ver como uma IA é construída.
Como desenhar arquitetura de informação
Como parte do processo UX, o design da IA segue padrões muito similares aos fluxogramas: Adicione formas e ligue-as com linhas de uma forma organizada a um único documento. O desafio ao construir IA está em entender como seu aplicativo ou website 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 construir IA de fato: organizá-lo através 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 um fluxograma padrão, as formas seguem requisitos específicos (retângulos são processos, diamantes são pontos de decisão, etc.); entretanto, seguir essa nomenclatura não é um requisito.
Em outras palavras, os fatores mais importantes para construir sua IA são onde os componentes individuais da arquitetura são colocados (hierarquicamente), e como eles são rotulados e exibidos.
Entendendo e Mostrando Hierarquia Visual
O aspecto mais desafiador de criar uma nova arquitetura da informação está quase sempre na sua construção hierárquica. É 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.
Quando se constrói IA do zero, a menos que seu website ou aplicação 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 peças. Cada peça tem de ser construída com antecedência com a sua própria pesquisa, tempo para o design e desenvolvimento. O mesmo é verdade com IA.
Exibir a hierarquia visual é um bem valioso para IA, não só porque proporciona um melhor contexto para o leitor, mas também porque generaliza regiões chave do produto. Se a característica mais significativa do seu aplicativo é pedir uma carona (a la Uber ou Lyft) que pode ser feita a partir da página inicial, então essa página terá o maior número de pontos de contato e o maior valor para o produto. O mesmo será válido para a hierarquia visual.
Sitemaps são úteis para entender a hierarquia, pois eles 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 no topo não está apenas no topo, mas também destacada para ser visível em toda a aplicação.
Hierarquia de Formas, Cores e Outros Elementos Visuais
A parte da hierarquia, a arquitetura acima faz outra coisa bem: Ela exibe cada ponto de engajamento de forma única, conforme necessário, através de uma simples lenda e algumas frases-chave. A legenda denota o tipo de página e conteúdo, e significa variações entre as cores das formas. Isto é importante porque, embora o site da Duke pareça bastante simples, a IA só vai a três níveis de profundidade. Cada rectângulo amarelo denota uma aplicação, portanto os processos dentro de cada uma dessas caixas não estão incluídos neste documento!
Even sem essas partes disponíveis, a estrutura é tal que podemos compreender como navegar no site apenas através da IA. Isso pára quando chegamos a uma aplicação dentro do site – não é necessário.
A IA abaixo é para um jogo. Usando quatro formas, sem cor, e com textos inteligentes, toda interação principal é compreensível sem protótipos, e mais importante, pode ser entendida por qualquer um que trabalhe nele.
Este modelo não é perfeito, mas organiza claramente a hierarquia de aplicativos e delineia o que o usuário vê ou faz em qualquer ponto.
As Melhores Ferramentas de Arquitetura de Informação
Existem muitos aplicativos de software que permitem construir um IA, mas poucos são simples e rápidos o suficiente para tornar a experiência agradável. Ou no mínimo, fácil de gerenciar.
Draw.io, usado no vídeo acima, é completamente gratuito para uso pessoal e profissional e se conecta automaticamente ao Google Drive. Tem também integrações com Confluence e JIRA, que são pagas. Draw.io é excelente para fluxogramas, criando fluxos de usuários e arquitetura de informação, e com a funcionalidade Drive, várias pessoas podem trabalhar no mesmo documento e ver as mudanças ao vivo. Há também uma versão offline gratuita.
Lucidchart é outra grande ferramenta que proporciona uma experiência ligeiramente melhor que o Draw.io e tem benefícios adicionais como templates pré-construídos, muitas mais integrações, uma aplicação móvel (classificada em 2,5 estrelas na App Store), e suporte para empresas.
Omnigraffle e Visio são pilares da indústria há muito tempo e funcionam de forma excelente para construir e manter um design IA, embora Visio esteja online apenas (a versão offline mais antiga é apenas Windows) enquanto Omnigraffle é apenas Mac e requer compras separadas para as versões MacOS e iOS. OmniGraffle tem um benefício sobre os principais concorrentes na medida em que fornece automação 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 rapidez e facilidade de uso, especificamente em torno de fluxogramas, que seguem princípios quase idênticos aos da arquitetura de informação. Outras aplicações como Balsamiq, MindMeister, MindManager ou XMind oferecem um comportamento semelhante, mas são construídas para outros objetivos principais, como prototipagem ou mapeamento da mente.
Belas Práticas da 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 Enfoque na Hierarquia, Enfoque na Estrutura
A hierarquia é ajustável. A homepage será sempre a homepage, mas onde ela leva, como os usuários chegam a esses lugares, e tudo no meio e além é determinado mais tarde.
Todos os processos devem ser lógicos
Aven embora a IA no processo UX seja para as interações do usuário, cada passo do caminho tem que fazer sentido. 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.
Lembrar o processo UX
Um erro comum é apenas fazer IA, sem recursos, pesquisa, ou outros recursos ou trabalho. É 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
Cartografos levam tudo sobre um mapa em consideração, desde cadeias de montanhas até fronteiras estaduais. Tal como os cartógrafos, os designers determinam o que vai para o design do IA. Páginas individuais, comportamentos específicos do utilizador, contexto para pontos de decisão… e assim por diante.
Ultimamente, o cartógrafo decide o que vai no mapa com base nas necessidades do utilizador. O mesmo é verdade para os designers, por isso construam a IA para o utilizador final, nomeadamente as equipas de desenvolvimento e design do produto.
A arquitectura da informação está sempre a mudar e a evoluir
Para voltar a perfurar o ponto home, todas as IA são construídas para mudança. Os produtos evoluem, os projetos mudam, os usuários se adaptam e o ciclo continua, uma e outra vez. Não leve isso muito a sério e saiba que sempre haverá espaço para melhorias. Não vise a perfeição; construa uma simples e adaptável IA.
Minha Arquitetura de Informação Está Feita… Agora o quê?
É uma concepção comum que qualquer trabalho de design nunca é realmente feito, e esse é certamente o caso da arquitetura de informação. Eles crescem, encolhem e mudam como os nossos produtos crescem. Ao contrário de um plano para um edifício, a IA irá sempre evoluir com base em qualquer coisa, desde as necessidades do utilizador até às novas funcionalidades ou a uma revisão do produto. Grande parte da estrutura pode permanecer a mesma e fornecer consistência entre versões para que os usuários não fiquem confusos.
E isso é uma coisa boa. Saber que a IA é um documento fluido – um documento que provavelmente muda semanalmente, e às vezes até mesmo diário – é uma maneira poderosa de manter a estrutura geral do seu aplicativo ou site sem nunca tocar no código ou criar novos protótipos. Quanto melhor toda a equipe de desenvolvimento de produto conhecer a IA, mais rápido todos saberão o que é e o que não é possível, e o quão sério é realmente qualquer suposto “trabalho fácil”.
O que nos traz à verdadeira beleza da arquitetura de informação: Não há um ponto de partida pré-definido. Enquanto o processo tradicional de design UX dita que a IA é construída após completar fluxos de usuários suficientes; armada com muita pesquisa de usuários e da concorrência, ela também pode ser a primeira coisa feita… ou a última. O processo de prototipagem frequentemente traz informações sobre como certos comportamentos ou ações devem ocorrer que seriam difíceis de imaginar a partir de uma IA lógica ou inimaginável.
Como uma prática em constante evolução, o design de IA é uma arte tanto quanto uma habilidade, que é em parte a razão pela qual grandes corporações têm posições de arquitetos de informação. Estes designers são os guardiões de sistemas massivos, e com seu entendimento do crescimento do produto ao longo do tempo, eles ajudam a impulsionar as equipes de produto, design e engenharia a tomar as decisões certas ao longo dos anos. Essa escala de organização não é para todos os designers, mas todo designer pode construir uma arquitetura de informação simples e compreensível.
– – –
Leitura recomendada sobre arquitetura de informação
IA para a Web e mais além
Como fazer sentido de qualquer mensagem: Arquitetura da Informação para Todos
>
Information Architecture Basics
>
The Difference Between Information Architecture and UX Design