Eae, tudo bele?
Hoje vamos falar sobre Arquitetura da Informação.
Será que o público que acessa seus websites encontram a informação desejada? Será que os meios para encontrar as informações são adequados? Todos esses questionamentos podem vir à mente quando a Arquitetura da Informação não foi uma preocupação durante a fase de planejamento de um projeto de website.
Um projeto completo para o seu site ou aplicativo essencialmente deve garantir que todas as informações a serem transmitidas sejam acessíveis e fáceis para os clientes encontrarem. Isso é definido utilizando-se dos conceitos de Arquitetura da Informação.
Quando pensamos em AI (abreviatura de Arquitetura da Informação) estamos não tão somente contribuindo para que o conteúdo seja acessado mais também garantindo uma ótima experiência na utilização do sistema.
A Arquitetura da Informação é um assunto muito amplo, entretanto procurarei abordar nesse artigo os principais conceitos que norteiam esta matéria para que você possa compreender como podemos organizar e entregar nosso conteúdo da melhor forma.
O que é Arquitetura da Informação?
A Arquitetura da Informação visa organizar o conteúdo de sites e aplicativos através de uma estruturação que possibilite aos usuários encontrar tudo o que precisam afim de concluir tarefas sem muito esforço. Ela (a AI) ajuda os usuários a entenderem onde eles estão posicionados, o que eles encontraram, os caminhos possíveis a seguir e o que está por vir ao escolher um determinado caminho.
Podemos definir Arquitetura da Informação como um sistema que estrutura a forma como as informações devem ser acessadas, apresentadas e interligadas.E esta estruturação tem como objetivo facilitar o acesso do usuário ao conteúdo em um contexto de uso.
Pense agora em uma loja que venda camisetas de clubes, com muitas peças a venda. Esta loja corresponde ao sistema de informação. Considere cada informação como uma camiseta. O que a arquitetura de informação faz é estruturar a informação considerando os times, tamanhos, marcas, quantas peças estão no estoque, preço de cada modelo e demais possibilidades de categorização, visando fazer que o usuário percorra o caminho mais adequado que o levará para página de destino da camiseta desejada.
História da Arquitetura da Informação
Por milênios, e antes mesmo da internet, os seres humanos já utilizavam de meios para organizar as informações. Entretanto com os avanços e popularização das tecnologias de internet, houve uma aceleração no ritmo de publicação de informações com imensa quantidade de dados disponíveis, o que gerou uma necessidade maior de organização, tornando o acesso e a apresentação mais fáceis.
Em 1976, em uma conferência do American Institute of Architects (AIA), o Arquiteto, Designer Gráfico e um dos criadores das conferências do TED (Technology/Entertainment/Design), Richard Saul Wurman cunhou o termo Arquitetura da Informação devido sua preocupação em organizar de forma cuidadosa a quantidade enorme de informações que nossa sociedade cria diariamente.
Círculos conceituais
A Arquitetura da Informação consiste em encontrar o equilíbrio entre 3 dimensões: usuário, conteúdo e contexto. No livro “Information Architecture for the World Wide Web”, que é referência sobre Arquitetura da Informação, os autores Rosenfeld e Morville definem esse equilíbrio em 3 círculos conceituais ao que pode ser visualizado como um Diagrama de Venn.
- Usuário: Necessidades, hábitos, comportamentos de busca de informações, expectativas, experiência;
- Conteúdo: Objetivos de conteúdo, tipos de documentos e dados, volume, estrutura existente;
- Contexto: Objetivos, cultura, tecnologia, política, restrições, etc.
Estes conceitos de AI conjugam para que um grupo específico de usuários busquem por um determinado conteúdo dentro de um contexto de uso.
Componentes
Agora vamos entender os componentes de AI. De acordo ainda com Rosenfeld e Morville existem 4 componentes principais dentro de um sistema de Arquitetura de informação. São eles: os sistemas de organização, os sistemas de rotulagem, os sistemas de navegação e os sistemas de pesquisa.
Sistemas de organização
São responsáveis por agrupar e categorizar a informação.
Um bom exemplo de organização é o site do Walmart que além de categorizar a informação agrupa as categorias distinguindo cada uma por cor.
Na imagem acima vimos que na interface do site do Walmart cada grupo de informação está categorizado por um nome, cada item de um grupo classifica uma categoria e possui um ícone próprio que o distingue dos demais, e cada grupo está caracterizado por uma cor.
Sistemas de rotulagem
São responsáveis por especificar formas para representar as informações. Eles servem para simplificar informações que possam confundir o usuário.
Qual a melhor terminologia de representar a página de about de uma empresa? Sobre? Quem somos? Institucional? O nome da empresa? Isso pode depender do resultado do equilíbrio dos círculos conceituais.
Uma página de contato com a terminologia “Contato” é de uso recorrente por representar as informações contidas na página de forma simples. Páginas de contatos de empresas geralmente fornecem informações de contato que incluem o número de telefone, ou números quando dispõe contatos de múltiplos, e-mails e contatos de redes sociaisl. A terminologia “Contato” que une estes dados de forma eficaz.
Outra forma eficaz de representar informações é através de ícones ou imagens. A representação através de ícones ajuda na compreensão de terminologias, mais complexas.
Na imagem anterior há o emprego do sistema de rotulagem através de ícones que representam cada ferramenta disponível pela plataforma.
Sistemas de navegação
São modelos de navegação responsáveis por orientar os usuários sobre como se movimentar pelas informações. Esses sistemas indicam a localização do usuário e o caminho correto a seguir para se chegar a um destino.
Para um sistema de navegação se tornar efetivo e funcional ele precisa:
- Ser facilmente aprendido: Um website cujo sistema de navegação obriga o usuário a gastar muito tempo aprendendo sobre o funcionamento é desestimulante e rouba sua energia.
- Dar retorno: O usuário espera uma resposta positiva a uma ação em algum sistema. No caso do sistema de navegação o que se espera é uma resposta que mostra ao usuário que ele foi bem-sucedido na navegação. Portanto para não gerar frustrações deve-se garantir a ausência de anomalias como links quebrados e rótulos que não correspondem com o conteúdo da página de destino.
- Garantir economia de tempo e ações: Não podemos fazer com que as pessoas demorem muito a chegar a um destino. Prover atalhos de navegação são importantes em sites com muito conteúdo para que o usuário possa cortar caminho e chegar a informação desejada de forma mais rápida. Modelos de navegação que facilitam nestas tarefas são os mapas de sites, índices e breadcrumbs.
- Utilizar nomenclaturas claras: Os nomes dos links devem comunicar de forma adequada para que o usuário não faça interpretações ambíguas sendo prejudicado na navegação.
- Prover comunicação visual clara: Todo aspecto visual utilizado na navegação deve facilitar o processo. Formato de botões, links, utilização de ícones, posicionamento dos elementos devem ter o objetivo de ajudar o usuário.
- Auxiliar na conclusão dos objetivos do usuário: Estudar o comportamento do usuário é ação importante para projetar uma navegação que garanta que o usuário conclua seus objetivos nos websites e aplicativos.
Existem muita técnicas que podem ser utilizadas em um projeto para orientar o usuário na navegação. Vou citar os modelos de navegação mais aplicados.
Navegação Global
Este é o modelo de navegação que oferece a visão macro de um website e que apresenta a instituição representada. É formado por um conjunto de links que aparecem em todas as páginas e que acessam informações de primeiro nível. Geralmente este modelo pode se tratar de um menu localizado no topo, ou como uma barra na lateral esquerda ou direita.
Navegação Local
A navegação local complementa a global e é destinada a orientar o usuário para se movimentar em uma seção específica do site. É uma navegação que destina o usuário para informações secundárias, mas importantes no contexto, cujos itens de navegação não caberia na navegação global por se tratar de um conteúdo volumoso e específico.
Um exemplo deste modelo pode ser usado em lojas virtuais para conhecer detalhes e especificações de um produto a venda. No exemplo a seguir a navegação é local porque expõe o menu específico, logo abaixo do menu principal, somente para usuários que acessam a página do produto iPhone.
Navegação Contextual
Este modelo de navegação oferece aos usuários acesso a conteúdos similares publicados no website. O intuito é dispor estrategicamente esta navegação para que o usuário perceba informações adicionais e similares ao que ele tinha buscado sem que ele tenha pensado em procurar sobre.
Você pode encontrar este tipo de modelo em alguns blogs no final de cada artigo na seção de artigos relacionados.
E seu uso também é muito comum em e-commerce ao fornecer informações adicionais ao item desejado. Percebe-se no carrinho de compra campos adicionais com títulos como; “Produtos visitados por quem procura este item” ou, “O que os clientes mais compram após ver esse item”. Os resultados exibidos nesses campos geralmente refletem produtos que foram consultados no calor do momento é que por isso podem estar relacionados com o item pesquisado.
Navegação Suplementar
A navegação suplementar disponibiliza caminhos alternativos de acesso a conteúdos fora da hierarquia estabelecida. Este modelo de navegação possibilita ao usuário ver a estrutura do site e conteúdo do site ou parte dele.
Entre as forma mais usadas se destacam:
Mapa do site:
Serve para apresentar as urls das páginas que constituem um site.
Índices:
É uma relação de temas apresentados de forma ordenada e que permitem acesso ao documento HTML de cada tema.
Breadcrumbs:
Breadcrumbs, ou breadcrumb trail, que pode ser traduzido por trilha de migalhas de pão, em alusão à história de João e Maria, servem para exibir o caminho percorrido pelo usuário até uma página de destino. Ajuda o usuário na sua localização.
Nuvem de tags:
Também conhecido como nuvem de palavras ou nuvem de etiquetas serve para apresentar termos mais acessados ou procurados através de uma estrutura visual que destaca em escala maior os termos mais importantes do site.
Sistemas de pesquisa
É um sistema com a função de ajudar o usuário a pesquisar uma informação no website ou aplicativo. É indicado quando existe muito conteúdo facilitando assim o acesso a rápido a informação.
O responsável por projetar o sistema de pesquisa deve pensar no mecanismo de pesquisa, filtro e demais ferramentas que facilitem a encontrar o conteúdo, na forma como os resultados da pesquisa serão apresentados e também como esses dados poderão ser utilizados após pesquisa.
A seguir mostro um sistema de pesquisa baseado em formulário que sugere antecipadamente termos relacionados com os primeiros caracteres digitados pelo usuário. Isso além de facilitar na busca possibilita maior rapidez na ação.
Outra forma de sistema que facilita pesquisa é aquele baseado em filtros e que oferece um resultado mais refinado.
Lista básica de entregáveis de Arquitetura da Informações
Dependendo da complexidade de um projeto haverá a necessidade de pesquisa e análise mais profunda o que poderá resultar na entrega de uma quantidade considerável de documentos com objetivos específicos.
Neste artigo vou listar os entregáveis de uso mais frequente. Vamos conferir? 🙂
Mapa do site
O mapa do site é um organograma que apresenta todas as páginas que o projeto terá e relação hierárquica entre elas.
Fluxograma
O fluxograma organiza o fluxo das informações. Com ele é possível compreender os melhores caminhos para seções do site.
Wireframe
Wireframe é um esboço que simula como a interface deverá funcionar. Ele possibilita mostrar a hierarquia das informações e o fluxo de navegação.
Protótipo interativo
É um wireframe com links que possibilita navegar entre as telas de forma que se avalie o funcionamento do sistema e analisar questões de usabilidade.
Persona
Vídeo – O que é arquitetura da informação
Persona é um formato para compreender o usuário de um público-alvo. Deve-se descrever características para a persona se aproximar de uma pessoa real.
Ao elaborar uma persona é interessante levar em conta características comportamentais do público-alvo, antever cenários de interação com o website ou aplicativo e levantar razões da importância do projeto para o usuário.
Vale a Pena Conferir. Assista logo abaixo:
Para Complementar o conteúdo deste artigo, deixo aqui um vídeo do amigo Daniel Furtado, do canal UX NOW ( que inclusive temos uma entrevista com ele aqui no Chief of Design) onde ele fala sobre Arquitetura da Informação.
Conclusão
O conteúdo exibido aqui serve como uma introdução aos conceitos básicos da Arquitetura da Informação. É apenas um arranhão na superfície de camada espessa que é esta área, mas que acredito seja suficiente como apresentação inicial.
Há de se notar a preocupação desta ciência em descrever regras que resultam nos melhores métodos para que usuários atinjam seus objetivos em pesquisar e navegam entre interfaces. Conhecer e aplicar essas regras é o caminho comum para o profissional que quer se especializar sobre Arquitetura da Informação.
Espero ter contribuído com essa introdução. Caso tenha despertado seu interesse na área existem diversos caminhos para aquisição de conhecimentos a percorrer, inclusive pesquisando na internet.
Se você já iniciou na área ou atua há tempos, que tal contribuir com alguma observação sobre Arquitetura da Informação na seção de comentários?
Aproveite e compartilhe com amigos que possam vir a se interessar pela área.
Abraço!
Referências:
https://www.usability.gov/what-and-why/information-architecture.html
https://computer.howstuffworks.com/information-architecture.htm
Design para a internet – Projetando a experiência perfeita – Felipe Memória
Imagens:
http://jim-nielsen.com/blog/assets/img/2015/m2-flowchart.png
http://www.wireframeshowcase.com/images/uploads/100/wireframe11__sized.jpg
https://media.merixstudio.com/uploads/grafika1.jpg
http://www.christinanghiem.com/images/persona-01.jpg
Also published on Medium.