Arquitetura da Informação: 5 passos para um projeto digital bem organizado
Esse artigo é uma contrapartida pela bolsa concedida a mim pela PretUX, para o curso de Arquitetura da Informação da Mergo, e foi revisado pela maravilhosa Katy Miranda, que é pesquisadora, mentora e antropóloga, a primeira pessoa que me falou sobre UX na vida.
A profissão de arquitetura da informação é algo que já não existe mais. Mas a necessidade desse trabalho ser feito não! Estranho né? Assim começamos o curso de Arquitetura da Informação, da Mergo | Redação. Acompanhe a leitura para entender isso e saber macetes gerais pra aplicar no que você precisar.
Quando a internet era tudo mato, muitas pessoas trabalhavam exclusivamente com arquitetura da informação, desbravando as primeiras maneiras de se publicar conteúdo de texto, áudio e vídeo na ~web, aprendendo a dividir conteúdos em páginas e subpáginas, tentando facilitar a navegação entre os componentes das telas, evitando que os sites ficassem muito poluídos e confusos, e falhando absurdamente em alguns casos rs… por aí vai.
Além disso, a necessidade desse trabalho ser feito existe desde sempre (ou quase sempre) inclusive fora dos ambientes digitais; a organização de bibliotecas, arquivos, publicações, prontuários, fichas, acervos, coleções… e mais uma infinidade de informações organizáveis que você consiga lembrar aí.
Agora corta para os processos de globalização e digitalização. Quase junto destes, chega também a expressão UX (user experience, que também não começou ontem) e que se debruça sobre maneiras de melhorar a experiência de quem usa qualquer produto ou serviço. Embora seja um termo mais comum nos produtos e serviços digitais, esse conceito é aplicável em tudo que demanda um olhar de usabilidade! E então, esse trabalho de arquitetura da informação também foi incorporado nas preocupações sobre a experiência de quem usa (qualquer produto ou serviço).
Logo, organizar informações para acessá-las da melhor maneira possível fazia parte do escopo de profissões específicas como a de biblioteconomista, por exemplo. Com o passar do tempo e a digitalização dos processos, essa atividade passou a fazer parte do escopo de outras profissões, como a de UX designer, e depois desdobra-se em funções cada vez mais específicas como UX writing e UX content.
Assim como é importante lembrar que UX não é só sobre sites e interfaces, arquitetura da informação não é só sobre montar menus e wireframes (o esqueleto ou protótipo primário de uma interface, que foca principalmente no fluxo de navegação das telas, sem a parte visual). Tento traduzir o máximo possível os termos em inglês, mas vocês sabem como é esse mundo do dizaine e tecnologia.
Logo… Arquitetura da informação é uma disciplina que serve para organizar ou hierarquizar qualquer tipo de coisa que contenha informação, ou seja, muuuuitas coisas, como pesquisas, coleções, livros, materiais didáticos, cursos e, inclusive, sites e as et ceteras que você consiga lembrar. E, para isso, podemos usar alguns macetes que vão facilitar a vida para quem, assim como eu, está chegando nessa área. Nesse texto, vamos considerar um processo para interfaces digitais, mas é fácil de aplicar em toda e qualquer coisa que precise ser organizada.
Chega de lenga-lenga, vamos lá:
- Pesquisar é preciso
Tudo começa por aqui, não é mesmo? Independente do projeto, começamos buscando referências que já existem, do que vamos fazer. O povo do UX costuma chamar esse momento de desk research, a famosa pesquisa de mesa. Podemos usar internet, livros, revistas e qualquer outra fonte de pesquisa que possamos auto consultar. Então, sejá lá o que for fazer, sempre busque referências do que já foi feito, destacando os pontos positivos e negativos de cada uma.
Na hora de iniciar a pesquisa, é fundamental ter foco. Ou seja, buscar referências de organização e priorização que façam sentido para o público de interesse no projeto em questão. A Katy trouxe um exemplo: montar uma lista de horários para um público idoso, que não é hard user, dentro de uma interface. Quais são as formas que essas pessoas visualizam e entendem horários e listas? O que podemos usar como referência partindo disso?
2. Inventário de conteúdo
Depois de encontrar suas referências, faça um levantamento de todo o conteúdo/informação que você precisa organizar. No final do texto, vou deixar uma referência sobre auditoria de conteúdo, que vale mais pra projetos mais complexos ou avançados, pois traz ferramentas mais sofisticadas para analisar os links e suas métricas. Dê uma conferida depois e, se fizer sentido, traga essas ferramentas pro seu projeto. Senão, podemos considerar esse basicão:
a) Quantos e quais são os tipos de conteúdo? textos, anúncios, fotos, instruções, descritivos, títulos, produtos, artigos etc
b) Quais são absolutamente necessários e quais não? uma maneira de pensar essa relevância é entender o que você quer que a pessoa usuária acesse/entenda primeiro
c) Como podemos sintetizar/simplificar esses conteúdos? depois de considerar os itens acima, simplifique o máximo que puder cada informação, deixe as informações principais em evidência e, se necessário, coloque os detalhes para subpáginas, que serão pensadas posteriormente.
d) Como podemos classificar esses conteúdos? você pode pensar em predefinições ou deixar que as pessoas agrupem essas infos livremente, confira como fazer isso no próximo tópico ;)
3. Testando e validando
As práticas de UX vieram para ficar, né. Então, depois de entender o que você tem e ter uma ideia do que pretende construir, bora testar e validar. Uma das práticas mais utilizadas é o card sorting, que também podemos chamar de sorteio de cartões (risos), que pode ser aberto, fechado ou híbrido. Confira a referência no link e no final do texto.
Resumindo beeem resumido, o card sorting aberto consiste, basicamente, em escrever todos os itens que queremos organizar em pequenos papéis e pedir para outras pessoas organizarem de acordo com o critério que elas quiserem. No card sorting fechado, podemos predefinir as categorias e pedir para as pessoas encaixarem no que preferirem. Fotografamos ou printamos cada organização e depois comparamos, e utilizamos os critérios que a maioria das pessoas preferiu (lembrando que nunca, nunquinha as pessoas organizam de maneira totalmente igual).
Usamos também o tree testing, ou o teste da árvore, que consiste em testar e validar fluxos de navegação. Um tree testing pode ser criado com facilidade nessa ferramenta aqui. Com isso, você vai entender se o fluxo de navegação para uma pessoa acessar x informação está fácil ou difícil.
Existem outras técnicas, mas essas duas conseguem testar e gerar bons resultados de maneira simples e barata.
4. Mapas e modelos
Nesse meio, é comum falarmos de site map, que é o mapa do site, e o wireframe, que é como se fosse o modelo do site, sem a parte gráfica, mas considerando onde cada informação fica e o fluxo de navegação.
Depois de pensar como categorizar seu conteúdo, é hora de colocar isso em módulos de informação que, em outras palavras, são conjuntinhos dos conteúdos a serem publicados. Então podemos compor um módulo da seguinte maneira:
- Módulo 1 —Logo
- Módulo 2 — Buscador
- Módulo 3 — Menu institucional
E por aí vai. Depois de entender tudo que precisa ir pra interface, numere e monte seu modelinho, vulgo wireframe. Deixo aqui um exemplo que construímos no curso, para um projeto fictício de e-commerce mobile (loja online no celular).
Nessa ferramenta, chamada Mural, é possível construir modelos/protótipos para diversos tipos de interface. O queridinho Figma é outra ferramenta muito utilizada pra isso, permite criar arquivos gráficos, para as mais diversas finalidades e é gratuito e bem colaborativo — há muitos plugins super legais na comunidade. Outras ferramentas muito conhecidas são o Axure, uma das primeiras para protótipos, e o Miro, que pode ser utilizado em português.
5. URLs amigáveis e um tapinha no SEO
Depois de definir pra onde vai cada coisa e de trabalhar as interações e visual final da interface, é hora de design e tecnologia trabalharem para botar isso no ar. Maaas o trabalho ainda não acabou; cuidar pra uma boa comunicação na interface é primordial, certo?
Então, no caso de digital, é momento de conferir como melhorar as URLs, que são os links para acessar a interface. Isso ajuda a pessoa a se orientar entre as abas que está navegando e facilita o acesso pra determinado conteúdo, antes mesmo de abrir e ver se de fato é aquilo que ela procura. Segue exemplos de uma URL legal e outra ruinzinha:
Legal:
http://marisa.com.br/blog/texto-sobre-arquitetura-da-informação
Péssima:
http://marisa.com.br/blog/p/texto-91276389jsd%/xxd/qerwrfa12343212
E o nosso querido SEO, mais chegado para quem trabalha com produção de conteúdo em si, também não fica de fora nessa área. SEO significa Search Engine Optimization, que traduzimos como Otimização dos Mecanismos de Buscas. Existem muuuuitos macetes pra rolar essa otimização, inclusive o uso de URLs amigáveis é um deles.
Outro é cuidar das palavras-chave. Confira se os conteúdos estão com as palavras bem utilizadas, considerando:
O que eu quero publicar? x Como as pessoas pesquisam isso?
Aqui tem uma listinha de ferramentas ótimas para conseguir boas palavras-chave e avaliar como as pessoas pesquisam elas.
Bônus: um macetinho diferenciado que pode fazer toda diferença
Breadcrumbs, em tradução livre são migalhas de pão, e a expressão é usada para designar um esqueminha de navegação auxiliar na interface. Conforme a pessoa navega, ela pode ver o caminho que fez e voltar facilmente para um nível anterior sem dificuldades. Basicamente, esse esqueminha é disposto horizontalmente, com nomes das páginas/telas visitas, separados por um sinal deste: >. Os nomes também deverão ser links para a respectiva página/tela. Fica mais ou menos assim:
Home > Projetos > Artigos > Texto sobre arquitetura da informação
Dentre as vantagens, podemos destacar a redução de cliques, já que a pessoa pode usar o atalho para voltar para a página que desejar, sem clicar muitas vezes no “voltar” ou refazer seu caminho. Esse recurso ocupa pouco espaço e pode diminuir a taxa de rejeião, pois pode atrair a pessoa visitante que chega a uma determinada página através de uma pesquisa no Google, por exemplo. Ela, provavelmente, chega direto no que busca e pode ver o que mais tem no site. Isso diminui o bounce rate, que mede quanto tempo a pessoa fica no site; se ela abre e já fecha a página, ou se permanece algum tempo ali.
Por fim, outra vantagem é a conveniência para as pessoas que usam, que no fim das contas é o foco do trabalho todo. Facilita bastante a navegação entre uma interface multinível. Vale ressaltar que é um atalho, uma navegação auxiliar, e não substitui o menu principal do site. E pode não ser tão legal para sites não hierarquizados ou com páginas que possam estar em mais que uma categoria-mãe. Mas, de maneira geral, é um recurso simples, que ocupa pouco espaço na interface e pode ser bastante positivo.
Para finalizar, deixo uma referência principal sobre entregáveis de Arquitetura da Informação, e outras que podem ser suuuper úteis no seu projeto. Esse trabalho é complexo, necessário e envolve muitas fases — aqui está bem simplificado. O trabalho com informação é algo que nunca está totalmente pronto e sim em constante evolução.
Para dar visibilidade e ter esses processos bem documentados, esse artigo traz algumas das referências acima, junto com outras bem importantes na hora de botar ordem nos conteúdos.
No seu trabalho, você organiza informações também? Como é seu processo? Se sentir, conta um pouquinho nos comentários e ajude quem está começando essa caminhada :)
Referências citadas no texto
Auditoria de conteúdo: o que é e como fazer uma
Card Sorting: como descobrir o modelo mental de organização de conteúdo
Breadcrumbs — Guia completo com exemplos e melhores práticas
Melhores ferramentas gratuitas de pesquisa de palavras-chave
Os entregáveis de Arquitetura da Informação
Tree testing; construa uma arquitetura da informação que faz sentido
