Design Visual para Arquitetura da Informação

Prévia do material em texto

ARQUITETURA DA INFORMAÇÃO 
Aula 4: Design ......................................................................................................................................... 2 
Introdução ........................................................................................................................................... 2 
Conteúdo .............................................................................................................................................. 3 
O mapeamento do design visual .................................................................................................3 
A diagramação do site ......................................................................................................................3 
O design visual do site ..................................................................................................................... 4 
O arquiteto da informação ............................................................................................................ 5 
A internet como forma de divulgação ..................................................................................... 5 
A tendência atual para os sites .................................................................................................... 6 
Aspectos de percepção .................................................................................................................... 7 
Aspectos semânticos ......................................................................................................................... 7 
Modelos de páginas .......................................................................................................................... 8 
Processos acerca da criação de páginas ............................................................................... 10 
Ferramentas de projeto .................................................................................................................. 11 
Ferramentas de arquitetura de informação .......................................................................... 11 
A classificação das informações ................................................................................................ 12 
Atividade proposta........................................................................................................................... 14 
Referências ........................................................................................................................................ 14 
Exercícios de fixação ...................................................................................................................... 15 
Chaves de resposta ...................................................................................................................................................... 19 
 
 
 ARQUITETURA DA INFORMAÇÃO 
 
Introdução 
O design visual representa a criação de um aspecto agradável para o design de 
um site de forma a garantir que o usuário sempre tenha noção de sua 
localização. Uma boa estrutura e um design visual eficiente representam o 
sucesso do mapa do site. 
 
As empresas e instituições têm necessidade de manter sua identidade mesmo 
no ambiente virtual. Para tal, é importante determinar layout e modelos que 
garantam a manutenção dessa identidade. 
 
O planejamento estratégico da arquitetura da informação visa definir políticas, 
diretrizes e procedimentos para melhor compreender o ambiente em uma 
empresa ou instituição. 
 
O espaço e o ambiente são fatores fundamentais para a criação de um sistema 
quer atenda às necessidades do usuário. 
 
Objetivo: 
1. Determinar o contexto e o planejamento estratégico da arquitetura da 
informação; 
2. Identificar e mapear os problemas do cliente. 
 
 
 ARQUITETURA DA INFORMAÇÃO 
Conteúdo 
 
O mapeamento do design visual 
Agora que já temos o site devidamente estruturado, cabe a nós mapeá-lo em 
um design visual, contando com várias ferramentas disponíveis. 
 
Essa tarefa consiste em criar os modelos de layout que definirão estrutura e 
organização do site levando em consideração a sua aparência quando de seu 
acesso. Esses modelos serão a combinação dos grids de layout (padrões que 
descrevem as páginas web) com esboços de design. 
 
Nessa fase é importante tratar do conteúdo, dando ênfase a cada página, 
definir os blocos de espaços para a navegação e também cuidar da integração 
de todos os objetos do site. Alguns elementos devem ter destaque como o 
logotipo da empresa, espaços destinados à publicidade etc. O conteúdo do site 
deve ser organizado de forma consistente em um grid que contemple a 
resolução dos navegadores. 
 
A diagramação do site 
Na diagramação do site deve-se levar em consideração a estruturação de todos 
os elementos que comporão o layout de forma clara, o que garante um fácil 
entendimento. Nesse caso é interessante criar uma aparência estética que 
cause uma boa impressão logo no acesso à página principal. 
 
Todos os elementos visuais devem ser unidos de forma a transmitir a 
informação desejada de acordo com um conjunto de regras adotadas que serão 
guias para a distribuição desses elementos. Dessa forma, garantiremos clareza 
e eficiência na transmissão da informação que o site deseja oferecer. 
 
 
 
 ARQUITETURA DA INFORMAÇÃO 
O design visual do site 
Eis alguns elementos que são fundamentais no design visual do site: 
 
Margens 
Devem ser utilizadas com informações secundárias sem sobrecarregar o layout. 
 
Guia horizontal 
Deve ser utilizada para o alinhamento e a orientação de textos. 
 
Colunas 
Representam os alinhamentos verticais. 
 
Módulos 
São, normalmente, unidades de espaços de tamanho iguais que podem ser 
repetidas pela página. 
 
Zonas especiais 
São grupos de módulos que são destinados a informações específicas. 
 
Marcadores 
São indicadores para textos secundários ou informações adicionais. 
 
Deve-se levar em consideração a criação de uma identidade visual que tem 
como objetivo criar um design gráfico que permita ao usuário identificar as 
informações que o site quer divulgar. 
 
É preciso ficar bem claro que o webdesigner participa da equipe de 
desenvolvimento, mas não é o arquiteto da informação. 
 
 
 
 
 ARQUITETURA DA INFORMAÇÃO 
O arquiteto da informação 
O arquiteto, após análise dos tipos das informações que comporão os sites, 
contará com diversos profissionais no processo, os quais seguirão as suas 
orientações com relação à forma de dispor o conteúdo no site. 
 
Os processos de animações, design propriamente dito e codificação ficam a 
cargo de profissionais específicos, mas cabe ao arquiteto da informação 
determinar e supervisionar esse trabalho, pois sua preocupação refere-se à 
informação, com o intuito de não alterar sua característica conforme o projeto e 
os requisitos do usuário. 
 
Com relação à programação, o arquiteto também faz uma análise visando 
escolher aquela que mais se enquadra para a geração da informação, uma vez 
que softwares têm características diferentes e geram arquivos diferentes, sendo 
interessante que a estrutura inicial projetada seja mantida. 
 
A internet como forma de divulgação 
Embora várias empresas usem a internet como forma de propaganda de seus 
produtos ou serviços, é importante frisar que nem sempre os sites serão para 
propaganda, e sim uma forma de divulgação de produtos ou serviços de uma 
empresa – da mesma forma que seria se o cliente fosse à loja para conhecer 
suas dependências. 
 
Os publicitários, de maneira geral, acham que a embalagem vende por si só, ou 
seja, dando umaroupagem adequada ao produto, a embalagem passa a ser 
mais importante que o próprio produto. Esse é o diferencial de uma 
“propaganda”. Nesses casos, cores e modelos são fundamentais para a criação 
das embalagens. 
 
Com relação à uma aplicação na web, a embalagem serão as páginas que 
deverão ser compostas de formas e cores, obedecendo características de 
 
 ARQUITETURA DA INFORMAÇÃO 
organização, que é dona do site, mas deixando visível tudo que for importante 
para que o usuário possa ver, reconhecer e se sentir “convidado a entrar”. 
 
Como a marca de um produto está diretamente associada ao rosto de uma 
pessoa, por exemplo, ela acaba se tornando/criando uma primeira impressão 
para a pessoa. Esse deve ser o pensamento, ao se preparar o design visual de 
um site, de forma a “marcar” no usuário a intenção do dono do site e pensando 
seus produtos ou serviços, enfim a proposta do site. 
 
Outro fator importante é a questão de acompanhar certas tendências que, de 
certa forma, ditam os estilos de design, tal como uma moda do vestuário. 
Manter uma tendência pode ser interessante para que o site seja moderno, mas 
exibindo as informações de acordo com a intenção do cliente. 
 
A tendência atual para os sites 
Atualmente a tendência aponta para sites mais limpos, com menos espaços 
destinados a conteúdo delimitado por enquadramento, que não sejam 
carregados com animações e efeitos especiais e utilizam linguagens mais 
simples, porém com recursos necessários para a obtenção do efeito desejado. 
 
O uso de menus pode ser interessante, uma vez que mostra as opções do site e 
dá ao usuário uma noção do conteúdo que o site apresenta. 
 
Outro fator importante que o arquiteto da informação pode explorar é o uso de 
rodapés que contenham informações em um espaço que não comprometa o 
conteúdo da página. 
 
Atualmente a tendência aponta para sites mais limpos, com menos espaços 
destinados a conteúdo delimitado por enquadramento, que não sejam 
carregados com animações e efeitos especiais e utilizam linguagens mais 
simples, porém com recursos necessários para a obtenção do efeito desejado. 
 
 ARQUITETURA DA INFORMAÇÃO 
O uso de menus pode ser interessante, uma vez que mostra as opções do site e 
dá ao usuário uma noção do conteúdo que o site apresenta. 
 
Outro fator importante que o arquiteto da informação pode explorar é o uso de 
rodapés que contenham informações em um espaço que não comprometa o 
conteúdo da página. 
 
Aspectos de percepção 
Alinhamento 
Com relação ao alinhamento, não existe uma regra geral que determine uma 
forma, mas o ideal é que se mantenha o mesmo tipo de alinhamento nas 
páginas (à direita, esquerda, centralizado ou justificado). Normalmente, é 
usado o alinhamento à esquerda. 
 
Proximidade 
Proximidade representa manter juntos ou próximos elementos de mesmo 
conteúdo. 
 
Repetição 
Repetição é a forma de criar as páginas parecidas para que o usuário tenha a 
percepção de estar no mesmo site. 
 
Contraste 
O contraste significa a importância dos objetos dentro da página, obedecendo-
se a uma hierarquia entre as informações. 
 
Aspectos semânticos 
Esses aspectos estão relacionados ao design físico de conteúdo e à interação do 
usuário com as páginas e envolve texto, janelas e aparência. 
 
 
 ARQUITETURA DA INFORMAÇÃO 
Com relação aos textos, os aspectos semânticos tratam do texto propriamente 
dito e do espaço que ele ocupa nas áreas delimitadas, como densidade do texto 
e densidade da tela. Sendo vários os níveis de usuários, é importante que haja 
opções para todos os tipos; o conteúdo deve ser apresentado, portanto, 
considerando-se esses tipos. Sobre as janelas, é importante determinar o layout 
com base nos diferentes objetos que serão apresentados nas telas, garantindo 
a funcionalidade das janelas: 
 
 Navegação – determina a direção para o usuário; 
 Organização – organiza as informações em regiões; 
 Explicação – orienta por meio de explicações; 
 Metáfora – representa as informações por meio de símbolos. 
 
Modelos de páginas 
Aplicar um modelo de página significa escolher a melhor forma de distribuir as 
informações e também os esquemas de cores das páginas principal e 
secundárias. 
 
As navegações também deverão ser contempladas para aplicação do modelo. E 
deve-se ter atenção quanto às ferramentas que serão usadas para aplicação do 
modelo, ressalta-se. 
 
Algumas ações devem ser levadas em consideração para os modelos: 
 
 Estilo das páginas; 
 Estilo de navegação; 
 Frames, tabelas, rodapés; 
 Imagens, vídeos, texto. 
 
Um dos princípios básicos da arquitetura da informação é desenhar espaços 
informacionais que possibilitem o compartilhamento de informações, atendendo 
 
 ARQUITETURA DA INFORMAÇÃO 
as necessidades do usuário, respeitando suas condições de trabalho e 
mantendo as características da empresa conforme ilustração. 
 
O planejamento estratégico como gestão do conhecimento se preocupa com a 
definição de políticas, cultura, missão, valores e visão da organização, definindo 
diretrizes, objetivos e requisitos do sistema e analisando as necessidades de 
informação dos clientes. 
 
A arquitetura da informação analisa os objetivos da organização, os requisitos e 
a política da informação definidos pelos usuários (no caso, os gestores da 
empresa). Para tal, é necessário especificar os requisitos para o projeto do 
sistema a ser implantado. 
 
 
 
 
 ARQUITETURA DA INFORMAÇÃO 
Processos acerca da criação de páginas 
CRIAÇÃO E PRODUÇÃO 
É importante desenvolver espaços de informação de forma a estimular e 
sistematizar a criação, a produção e a especificação de requisitos de conteúdo. 
 
IDENTIFICAÇÃO E MAPEAMENTO 
É o momento de analisar as informações mapeadas desenvolvendo métodos e 
técnicas para identificar os conhecimentos e as fontes de informação. 
 
COLETA 
Devem-se identificar as metodologias definidas utilizando-se ferramentas e 
técnicas para capturar e formalizar as informações. 
 
SELEÇÃO E VALIDAÇÃO 
 Significa definir os instrumentos de análise da qualidade da informação. 
 
TRATAMENTO 
É importante definir métodos e técnicas de representação, organização e 
armazenamento das informações conforme políticas predefinidas. 
 
COMUNICAÇÃO 
Desenvolver sistemas de recuperação da informação e de interfaces de 
comunicação com todos que participarem do ambiente. 
 
APLICAÇÃO 
Desenvolver e implementar as melhorias idealizadas em processos que 
representem garantias de divulgação de informação. 
 
 
 
AVALIAÇÃO 
 
 ARQUITETURA DA INFORMAÇÃO 
Armazenar os indicadores de uso, de desempenho e satisfação predefinidos, 
desenvolvendo ferramentas de avaliação e extração de indicadores. 
 
A arquitetura da informação como gestão do conhecimento tem a finalidade de: 
 
 Organizar e recuperar informações; 
 Padronizar e integrar os dados; 
 Racionalizar recursos; 
 Melhorar a prestação de serviços; 
 Aprimorar a comunicação interna; 
 Criar redes de conhecimento. 
 
Ferramentas de projeto 
O arquiteto da informação tem a necessidade de gerenciar conteúdos; para isso 
existe uma gama de ferramentas que melhorarão a arquitetura de informação 
em uma aplicação, abordando o lado técnico desse gerenciamento abrangendo 
hospedagem, instalação, upgrades, extensões, ampliação e otimização. 
 
Ao preparar o ambiente de uma aplicação web, o arquiteto, como já foi visto 
em outras aulas, deve se preocupar em como as informações serão fornecidas 
e em como o usuário poderá manipular as formasde acessar e visualizar o que 
procura. 
 
O projeto de design cuida da aparência de forma a facilitar o arranjo das mais 
diversas informações que serão visualizadas. Aplicativos permitem a 
diagramação e a arrumação do ambiente para o usuário, deve ser lembrado. 
 
Ferramentas de arquitetura de informação 
Não podemos esquecer que muitas informações juntas podem levar ao que se 
chama “teoria do caos”. Não deve existir o caos no ambiente informacional no 
momento em que o arquiteto da informação tem a necessidade de categorizar 
 
 ARQUITETURA DA INFORMAÇÃO 
as informações a fim de evitar o acúmulo delas – em momento algum, a 
propósito. 
 
Ferramentas de arquitetura de informação são fundamentais para assegurar o 
sucesso de um projeto de uma aplicação web. Selecionando a ferramenta 
apropriada e aproveitando ao máximo as suas capacidades, com certeza as 
necessidades do cliente serão atendidas. 
Arquitetos de informação podem utilizar ferramentas diferentes em vários 
processos, mas o importante é a escolha daquelas que mais se adéquem à 
aplicação. 
 
A classificação das informações 
 Existe a necessidade de atualização constante e de uma classificação, 
principalmente, com relação à busca e à disponibilização das informações. Para 
tal, há softwares específicos que se enquadram nas seguintes categorias: 
 
 Classificação automatizada: são softwares que gerenciam 
determinadas regras que podem ser definidas pelos usuários ou por 
algoritmos e que permitem a indexação dos documentos de forma 
automática; 
 Geração automatizada de categoria: são softwares que melhoram 
as regras que podem ser definidas pelos usuários ou por algoritmos 
gerando categorias e taxonomias de forma automática; 
 Ferramentas de busca: são softwares que fornecem indexação 
integral de texto e busca no índice; 
 Gerenciamento de tesauro: são ferramentas que dão suporte para 
desenvolvimento e manutenção de vocabulários e tesauros (uma lista de 
palavras com significados semelhantes dentro de um domínio específico 
de conhecimento); 
 Filtragem colaborativa: são ferramentas destinadas às preferências 
do usuário que criam modelos e perfis para personalizar o sistema de 
organização e navegação; 
 
 ARQUITETURA DA INFORMAÇÃO 
 Soluções para portais: são ferramentas que fornecem soluções de 
portal a empreendimentos integrados; 
 Gerenciamento de conteúdo: são softwares que gerenciam o fluxo de 
trabalho desde a autoria até a publicação; 
 Analíticos: são softwares que analisam fontes de dados do público-alvo 
criando interações entre os usuários (mais voltados para campanhas de 
marketing, por exemplo); 
 Gerenciamento de base de dados: ferramentas para gerenciar e 
fornecer acesso a dados estruturados. 
 
O arquiteto da informação tem também a necessidade de estipular a 
importância dos elementos e como eles devem ser apresentados ao usuário e 
como será a interação. Por essa razão é interessante a criação de filtragem das 
informações que serão disponibilizadas utilizando-se wireframes. 
 
Um wireframe é um guia visual básico usado em design de interface para 
sugerir a estrutura de um sítio web e relacionamentos entre suas páginas. Um 
wireframe web é uma ilustração semelhante do layout de elementos 
fundamentais na interface. Normalmente, wireframes são concluídos antes que 
qualquer trabalho artístico seja desenvolvido. 
 
Veremos abaixo alguns exemplos de softwares utilizados para AI. 
 
 Microsoft Visio: ferramenta de diagramação que consiste na criação de 
Sites de mapas na fase de planejamento; 
 OmniGraffle: Ferramenta que cria fluxogramas, organogramas, 
diagramas de redes, projetos, layouts etc. que possam ser representados 
por símbolos e linhas de diagramação; 
 PowerMapper: ferramenta adequada para mapear sites online ou 
offline com vários estilos de mapeamento disponíveis; 
 SmartDraw: ferramenta de criação de mapas de sites com vários 
modelos disponíveis ou com opção de criação de um modelo próprio; 
 
 ARQUITETURA DA INFORMAÇÃO 
 Axure: ferramenta de prototipagem de interfaces que permite total 
interação do usuário. Nela são criados wireframes e se consegue por em 
prática a experiência que o usuário terá com o produto, antes mesmo da 
concepção de layout ou desenvolvimento, minimizando riscos e custos; 
 Optimal Sort: ferramenta profissional de apoio a avaliações com 
usuários realizadas por meio da técnica de classificação/organização de 
cartões. Realiza efetivamente o card sorting (fechado ou aberto) online; 
 Ethnio: ferramenta amigável para o recrutamento de pessoas a partir 
do site; 
 FireShot: o Fireshot é uma extensão do Firefox que cria e edita 
screenshots (capturas de tela). 
 
As ferramentas de desenvolvimento estão presentes em todo tipo de aplicação. 
Um projeto bem elaborado com recursos de Engenharia de Software, por 
exemplo, tem nas ferramentas um aliado para o sucesso da aplicação. Nas 
aplicações web o uso dessas ferramentas tende a tornar o site mais enxuto e 
com a garantia de manter a integridade do projeto desde sua concepção até a 
sua implementação. 
 
Atividade proposta 
Escolha duas das ferramentas abordadas nesta aula e dê exemplos de como 
estão sendo usadas. 
 
 
Referências 
 
 
 ARQUITETURA DA INFORMAÇÃO 
Exercícios de fixação 
Questão 1 
Marque a opção correta sobre elementos visuais: 
 
a) Margens: Devem ser utilizadas com informações secundárias sem sobrecarregar o 
layout. 
b) Guia horizontal: São grupos de módulos que são destinadas a informações 
específicas. 
c) Colunas: São indicadores para textos secundários ou informações adicionais. 
d) Módulos: Representam os alinhamentos verticais. 
e) Zonas espaciais: Devem ser utilizadas para o alinhamento e orientação de textos. 
 
Questão 2 
Marque a opção errada com relação aos aspectos semânticos: 
 
a) São relacionados ao design físico de conteúdo. 
b) Estes aspectos tratam do texto propriamente dito e do espaço que ele 
ocupa nas áreas delimitadas. 
c) Com base em janelas é importante determinar o layout para apenas um 
tipo de objeto. 
d) Metáfora representa as informações através de símbolos. 
e) As navegações deverão ser contempladas para aplicação do modelo. 
 
Questão 3 
Qual das opções abaixo não está relacionada ao aspecto de percepção? 
 
a) Alinhamento 
b) Proximidade 
c) Repetição 
d) Contraste 
e) Metáfora 
 
 
 ARQUITETURA DA INFORMAÇÃO 
Questão 4 
A estruturação de todos os elementos que comporão o layout, de forma clara e 
que possa garantir um fácil entendimento é obtida na fase de: 
 
a) Diagramação 
b) Explicação 
c) Metáfora 
d) Organização 
e) Navegação 
 
Questão 5 
A definição de métodos e técnicas de representação, organização e 
armazenamento das informações conforme políticas pré-definidas, significa: 
 
a) Tratamento 
b) Comunicação 
c) Avaliação 
d) Aplicação 
e) Seleção e validação 
 
Questão 6 
O desenvolvimento dos espaços de informação representa: 
 
a) Coleta 
b) Seleção 
c) Comunicação 
d) Criação 
e) Validação 
 
 
 
 
 
 ARQUITETURA DA INFORMAÇÃO 
Questão 7 
Assinale a afirmativa correta. 
 
a) Aplicação implementa as melhorias idealizadas em processos que 
representem garantias de divulgação de informação. 
b) Coleta define os métodos e técnicas de representação, organização e 
armazenamento das informações conforme políticas pré-definidas. 
c) Comunicação armazena os indicadores de uso, de desempenho e 
satisfação pré-definidos, desenvolvendo ferramentas de avaliação eextração de indicadores. 
d) Produção desenvolve sistemas de recuperação da informação e de 
interfaces de comunicação com todos que participarem do ambiente. 
e) Tratamento armazenar os indicadores de uso. 
 
Questão 8 
Com relação ao planejamento estratégico como gestão do conhecimento, pode-
se afirmar que: 
 
a) Só define as políticas de uma empresa 
b) Só define os requisitos do sistema 
c) Não se preocupa com a missão de uma empresa 
d) Analisa as necessidades de informação dos clientes 
e) Não sistematiza a criação 
 
Questão 9 
A arquitetura da informação como gestão do conhecimento tem a finalidade de: 
 
a) Racionalizar recursos 
b) Definir usuários 
c) Garantir sites estáticos 
d) Garantir sites elásticos 
e) Definir a estrutura do site 
 
 ARQUITETURA DA INFORMAÇÃO 
Questão 10 
Softwares que gerenciam o fluxo de trabalho desde a autoria até a publicação 
são considerados como ferramentas de: 
 
a) Classificação automatizada 
b) Busca 
c) Gerenciamento de tesauro 
d) Gerenciamento de conteúdo 
e) Gerenciamento de indicadores 
 
 ARQUITETURA DA INFORMAÇÃO 
Aula 4 
Exercícios de fixação 
 
Questão 1 - A 
Justificativa: A função das margens é não sobrecarregar a página. 
 
Questão 2 - C 
Justificativa: Esses aspectos estão relacionados ao design físico de conteúdo e à 
interação do usuário com as páginas e envolve texto, janelas e aparência. 
 
Questão 3 - E 
Justificativa: A metáfora está ligada à semântica e não à percepção. 
 
Questão 4 - A 
Justificativa: Na diagramação o desenho das páginas deve abordar os 
elementos que o comporão. 
 
Questão 5 - A 
Justificativa: Esses aspectos estão relacionados ao design físico de conteúdo e à 
interação do usuário com as páginas e envolve texto, janelas e aparência. 
 
Questão 6 - D 
Justificativa: As demais opções estão relacionadas à informação e não ao 
espaço. 
 
Questão 7 - A 
Questão 8 - D 
Questão 9 - A 
Questão 10 - D