N F O R M A Ç Ã O

D E S I G N D A I
O E S
R F A C
EM INTE
H IP E R M Í D I AS
DE
Ravi Figueiredo Passos
Orientadora: Profa
. Dra. Vania Ribas U
lbricht
 UNIVERSIDADE ANHEMBI MORUMBI

RAVI FIGUEIREDO PASSOS

O DESIGN DA INFORMAÇÃO EM INTERFACES DE HIPERMÍDIAS

DISSERTAÇÃO DE MESTRADO

MESTRADO EM DESIGN
PROGRAMA DE PÓS-GRADUAÇÃO STRICTO SENSU

São Paulo, fevereiro/2008

 UNIVERSIDADE ANHEMBI MORUMBI

RAVI FIGUEIREDO PASSOS

O DESIGN DA INFORMAÇÃO EM INTERFACES DE HIPERMÍDIAS

DISSERTAÇÃO DE MESTRADO

Dissertação apresentada ao Programa de Pós-Graduação Stricto

Sensu em Design – Mestrado, da Universidade Anhembi Morumbi,
como requisito parcial para obtenção do título de Mestre em Design

Orientadora: Profa. Dra. Vania Ribas Ulbricht

São Paulo, fevereiro/2008

 UNIVERSIDADE ANHEMBI MORUMBI

RAVI FIGUEIREDO PASSOS

O DESIGN DA INFORMAÇÃO EM INTERFACES DE HIPERMÍDIAS

Dissertação apresentada ao Programa de Pós-Graduação Stricto

Sensu em Design – Mestrado, da Universidade Anhembi Morumbi,
como requisito parcial para obtenção do título de Mestre em Design.
Aprovada pela seguinte Banca Examinadora:

Profa. Dra. Vania Ribas Ulbricht

Orientadora
Universidade Anhembi Morumbi

Profa. Dra. Priscila Lena Farias

Centro Universitário Senac

Profa. Dra. Cláudia Teixeira Marinho

Universidade Anhembi Morumbi

Prof. PhD Jofre Silva

Universidade Anhembi Morumbi

São Paulo, fevereiro/2008

Todos os direitos reservados. É proibida a reprodução total ou parcial do trabalho sem
autorização da Universidade, do autor e do orientador.

RAVI FIGUEIREDO PASSOS

Especialista em Arte, Educação e Tecnologias

Contemporâneas; Bacharel em Desenho Industrial – ambos
pela Universidade de Brasília. Professor colaborador do
Departamento de Desenho Industrial da Universidade de
Brasília. Atua no desenvolvimento de projetos com ênfase
em design digital e gráfico.

PASSOS, Ravi.

Design da informação em interfaces de hipermídias,

O. Autor: Ravi Figueiredo Passos. Orientadora: Vania
Ribas Ulbricht. – São Paulo: Universidade Anhembi
Morumbi, 2008, 86 p.

Dissertação de Mestrado em Design.

1. Design da Informação. 2. Hipermídia. 3. Interface

CDD e/ou CDU:

para Leani
 AGRADECIMENTOS

Como sabemos, uma pesquisa como esta não se faz sozinho, e sim, com a colaboração
de muitas pessoas às quais sou extremamente grato. Sou grato não apenas pelo que se
apresenta materializado nas páginas a seguir, mas pelo papel que cada uma desempenhou
neste percurso, seja em apoio às muitas leituras, aos ensinamentos, às discussões ou às
vivências, o que possibilitou meu amadurecimento.

Inicialmente agradeço à minha orientadora, Profa. Dra. Vania Ribas Ulbricht e à

Coordenação do Programa de Pós-Graduação Stricto Sensu do curso de Mestrado em
Design da Universidade Anhembi Morumbi, Profa. Dra. Mônica Moura e Prof. PhD. Jofre
Silva, que sempre acreditaram em meu potencial e empenho, e apostaram no sucesso de
minha jornada.

Aos professores que trouxeram seus conhecimentos e suas idéias de forma aberta, por
serem construídas coletivamente, em aulas, palestras, conversas e encontros. Em
particular às muitas horas de discussão com a Profa. Dra. Cláudia Marinho, que sempre
procurou convergência em nossas divergências.

Agradeço também aos colegas que compartilharam dos questionamentos e

aprendizados, em particular à Junia que me entendeu e me fez ser entendido em muitas
situações, ao Gustavo (in memoriam) que trouxe serenidade e apoio aos momentos
borbulhantes, à Mercedes pelo companheirismo que estimulou a discussão e dela
possibilitou consolidações, ao Guilherme que sempre procurou estar presente, ao Geraldo
e Elô que sempre foram acolhedores.

Não poderia deixar de agradecer à Maitê & Thomaz pelo acolhimento e dedicação
(impecáveis), à Leani pelo constante carinho, ao Gustavo pelo acompanhamento, à
Yandra pelo apoio e incentivo, à Larissa pelo grande companheirismo (e valorosas
revisões) e à Beth & Bob, pela atenção dos últimos meses.

Por fim, agradeço o apoio institucional da Coordenação de Aperfeiçoamento de

Pessoal de Nível Superior – CAPES e da Universidade Anhembi Morumbi, que
viabilizaram este trabalho.
Os conhecimentos do ser humano são representados por uma estrutura de
conceitos ligados por suas relações. Quando as informações são adequadamente
assimiladas, produzem conhecimentos, modificando a base mental de informações
do indivíduo, trazendo benefícios ao seu desenvolvimento e à sociedade em que
vive.

(BARRETO, 1994, apud BELLUZZO, 2006)

 RESUMO

A sociedade contemporânea tem passado por acentuadas mudanças relativas à

quantidade, ao fluxo e ao modo de acesso às informações. Estas transformações são
incentivadas pelo desenvolvimento das tecnologias de informação e comunicação - TICs,
destacando-se a utilização de Internet como um dos principais veículos de propagação de
informação. Assim sendo, tem-se a hipermídia como instrumento essencial de acesso à
rede, seja na recuperação, transformação ou produção de informações. Neste contexto,
torna-se de grande importância o estudo sobre hipermídias visando a maximização no
uso de seus potenciais. A importância do estudo destes artefatos pelo viés de sua
interface indicam a necessidade de uma abordagem metodológica e instrumental
direcionada ao design da informação. O design assume uma função essencial na
atividade de organização e estruturação informacional, pois trata da ação projetiva de
objetos que solucionem problemas de forma interdisciplinar, tendo como foco as
necessidades do usuário. Este trabalho tem por objetivo investigar a caracterização do
processo de design da informação no contexto do desenvolvimento de interfaces de
hipermídias. A escolha desta temática justifica-se pela crescente necessidade de
aprofundamento das questões relativas ao desenvolvimento de interfaces para
hipermídias baseada na correta relação funcional e conceitual entre os elementos que as
compõem. Para alcançar tais objetivos são abordadas questões sobre interface, hipermídia
e o próprio design da informação. Como resultado tem-se a discussão teórica que mescla
uma extensa revisão bibliográfica à proposição de novas possibilidades sistemáticas e
metodológicas, além de demonstrações imagéticas sobre os assuntos referenciados.

Palavras-chave: Design da Informação. Hipermídia. Interface.

 ABSTRACT

Contemporary society has passed through intense changes related to information

quantity, stream and access. These transformations are stimulated by the development of
Information and Communication Technologies – ICT’s, being the use of Internet
highlighted as one of the most important vehicles of information diffusion. Therefore,
hypermedia presents itself as an essential instrument of access to the net, recuperating,
transforming and producing information. In this context, studying hypermedia becomes
greatly important, aiming at the maximization of its potentials. The importance of
studying such artifacts from the point of view of their interfaces indicates the need for a
methodological and instrumental approach, directed to information design. Design plays
an essential role in the informational organization and structuring, because it deals with
the projecting of objects that bring solutions in an interdisciplinary way, having as a
focus the user’s needs. This work aims at investigating the characterization of the
information design process in the context of the development of hypermedia interfaces.
The choice of this theme is justified by a growing need for deepening into questions
regarding the development of interfaces for hypermedia and is based on the right
functional and conceptual relation among their constituting elements. In order to reach
such objectives, questions regarding interfaces, hypermedia and information design are
approached. As a result, we present a theoretical discussion that joins an extensive
review of the literature to the proposing of new systematic and methodological
possibilities, in addition to pictorial demonstrations of the mentioned subjects.

Keywords: Information Design. Hypermedia. Interface.

 SUMÁRIO

1. INTRODUÇÃO........................................................................................................................... 13

1.1. Objetivos............................................................................................................................ 16

1.2. Justificativas ..................................................................................................................... 16

1.3. Estrutura da dissertação .................................................................................................. 18

2. INTERFACE, HIPERMÍDIA e DESIGN DA INFORMAÇÃO .................................................. 19

2.1. Entendimentos sobre a interface.................................................................................... 19

2.1.1. Origem e desenvolvimento das interfaces ............................................................. 20

2.1.2. Conceitos e definições sobre interfaces.................................................................. 32

2.2. Hipermídia, interface e interatividade........................................................................... 37

2.2.1. Definições e delimitações sobre as hipermídias.................................................... 37

2.2.2. Interatividade em hipermídias................................................................................. 46

2.2.3. Elementos das interfaces de hipermídias............................................................... 51

2.3. O design da informação no projeto de hipermídias .................................................... 55

3. O DESIGN DA INFORMAÇÃO EM INTERFACES DE HIPERMÍDIAS................................. 58

3.1. Aglutinação e estruturação da informação................................................................... 59

3.2. Apresentação visual e estrutural do projeto................................................................. 64

3.3. Organização de elementos nas interfaces de hipermídias .......................................... 68

3.4. A visualidade da informação.......................................................................................... 80

3.5. Análise aplicada de interface.......................................................................................... 82

4. CONSIDERAÇÕES FINAIS....................................................................................................... 90

5. REFERÊNCIAS BIBLIOGRÁFICAS.......................................................................................... 94
 LISTA DE FIGURAS

Figura 1: O sistema on-line mostrador, teclado e mouse........................................................ 22

Figura 2: interface do SmallTalk. .............................................................................................. 24

Figura 3: ‘Alto’ da Xerox............................................................................................................ 24

Figura 4: Interface do Xerox Star .............................................................................................. 24

Figura 5: Interface final de Lisa................................................................................................. 25

Figura 6: Interface da área de trabalho do Macintosh original............................................. 26

Figura 7: iPhone da Apple.......................................................................................................... 28

Figura 8: Microsoft Surface........................................................................................................ 28

Figura 9: Interfaces naturais....................................................................................................... 28

Figura 10: Linha do tempo do desenvolvimento do GUI baseada em Reimer (2005). ....... 30

Figura 11: Multidisciplinaridade no Design de Interface ....................................................... 37

Figura 12: Decomposição do sistema digital interativo baseada em Cybis (2003)............. 39

Figura 13: Decomposição do sistema hipertexto baseada em Bugay & Ulbricht (2000) .. 40

Figura 14: Decomposição do sistema hipermídia.................................................................... 41

Figura 15: Demonstração do uso de imagens, forma e dimensão nos mapas mentais. ..... 66

Figura 16: Exemplo de mapa com estrutura “Olho de peixe”. .............................................. 67

Figura 17: subdivisão do grid baseada na proposta de Samara (2007, p. 25)..................... 70

Figura 18: Grid retangular.......................................................................................................... 73

Figura 19: Grid coluna................................................................................................................ 73

Figura 20: Grid coluna dimensional ......................................................................................... 74

Figura 21: Grid modular ............................................................................................................. 74

Figura 22: Grid modular dimensional....................................................................................... 75

Figura 23: Grid hierárquico........................................................................................................ 75

Figura 24: Desconstrução do grid modular .............................................................................. 77

Figura 25: Desconstrução lingüística ........................................................................................ 78

Figura 26: Composição ótica espontânea ................................................................................. 78

Figura 27: Alusão pictórica ou conceitual ............................................................................... 79

Figura 28: Operação aleatória .................................................................................................... 79

Figura 29: interfaces do estúdio 2Advanced e versões sucessoras à analisada................... 83

Figura 30: Exemplo de mapa de estrutura e acesso do website do estúdio 2Advanced com
sua devida aglutinação de conteúdos relacionados........................................................ 83

Figura 31: Exemplo de grid (ou wireframe) do website do estúdio 2Advanced .................. 84

Figura 32: Interfaces do website do estúdio 2Advanced analisadas. .................................... 84

Figura 33: Exemplo de padrão formal, ilustração bidimensional (mapa de localização) e

ilustração tridimensional. ................................................................................................... 85

Figura 34: Paleta de cores das seções do website.................................................................... 85

Figura 35: Ícone e controle com barra de rolagem. ................................................................ 85

Figura 36: Imagem figurativa de fundo.................................................................................... 86

Figura 37: Exemplo de imagem em movimento encontrada no website – animação inicial

e tela de carregar. ................................................................................................................ 86

Figura 38: Exemplo de botões encontrados na interface – elementos híbridos (textuais e

imagéticos)............................................................................................................................ 86

Figura 39: Exemplo de menu (retrátil) encontrado na interface – elemento hibrido

(textual e imagético)............................................................................................................ 86

Figura 40: Marcas – elementos híbridos (textuais e imagéticos). ......................................... 87

Figura 41: Exemplo de elemento textual – bloco de texto (acessível por meio de barra de
rolagem). ............................................................................................................................... 87

Figura 42: Exemplo de sub-interface........................................................................................ 88

Figura 43: Seções do website do estúdio 2Advanced.............................................................. 89

Figura 44: Comparação das seções do site do estúdio 2Advanced. ...................................... 90

1. INTRODUÇÃO

Incentivada pelo desenvolvimento das tecnologias de informação e comunicação -

TICs, a sociedade contemporânea tem passado por grandes transformações relativas à
quantidade, ao fluxo e ao modo de acesso à informação. Embora nem sempre a relação
entre estrutura e forma do conteúdo exista de maneira adequada, a percepção e a síntese
de informação são fundamentais às sociedades contemporâneas.
A informação é a matéria-prima que alimenta toda a comunicação, pois a
motivação básica de qualquer comunicação está em transmitir de uma mente para
outra algo que será recebido como informação nova (WURMAN 1991, p. 138).

Lévy (1999,) afirma que a principal razão para a crescente quantidade de informação
sendo digitalizada e produzida já digitalmente é que a digitalização permite um tipo de
tratamento de informação eficaz e complexo que é impossível de ser executado por
outras vias.

A conexão entre computadores, assim como os avanços da tecnologia, torna possível o

processamento de informações em larga escala e de forma quase que instantânea, tanto
em sua produção quanto em sua distribuição e seu consumo. O livre e rápido fluxo de
informação tem a capacidade de diluição de fronteiras territoriais, tendendo a
homogeneizar as diferenças culturais, uma vez que diversos locais têm acesso às mesmas
informações (WURMAN, 1991). A Internet tem sido um dos principais veículos dessas
transformações, na medida em que grande parte das tecnologias se utiliza dela como
meio de propagação de dados.

“A Internet cria, hoje, uma revolução sem precedentes na história da humanidade. Pela
primeira vez o homem pode trocar informações, sob as mais diversas formas, de maneira
instantânea e planetária” (LEMOS, 2004, p. 116).
Se por um lado o acumulo de informações presentes no ciberespaço é repleto de
valores muito significativos e indicam uma grande liberdade para a informação e
para a construção do conhecimento humano, por outro lado, essa imensa rede de
possibilidades pode levar rapidamente qualquer ser humano a ficar imerso num
grande caos de desorganização e perder-se em uma miríade de textos, imagens
sons, cliques e páginas. (MOURA, 2003, p. 156)

Como instrumento essencial de acesso à rede, tem-se a hipermídia sendo amplamente

utilizada na recuperação, transformação e produção de informações. A relevância da
hipermídia dá-se devido às suas características elementares, tais como alta capacidade

13
interativa, fluxo contínuo de diálogo com as informações, elaboração visual e grande
capacidade de armazenagem de hiperdocumentos.
A apresentação computadorizada da informação em forma de hipertexto,
combinada com a multimídia (uso através do computador de textos, gráficos, sons,
imagens, animação, processamento de programas e vídeo), forma a hipermídia.
(BUGAY & ULBRICHT, 2000, p.43)

As características intrínsecas às hipermídias proporcionam uma forma bastante

amigável e adequada para a navegação, uma vez que são cognitivamente1 adequadas e
aceitas pelo usuário destes artefatos. Porém, não basta que existam avançados meios de
acesso às informações nem que a forma de comunicação e interação seja adequada ao
raciocínio humano. É necessário que a própria informação esteja organizada e
estruturada de maneira a ser assimilada pelo leitor, pois “a compreensão de uma estrutura
e sua organização de informação permite a compreensão de valor e significado de seu
conteúdo” (WURMAN, 1991, p. 72).

O design assume uma função essencial neste contexto de organização e estruturação

informacional, pois trata da ação projetiva de objetos de forma interdisciplinar, tendo
como foco as necessidades do usuário. Ele proporciona o acesso aos conhecimentos
necessários à estruturação funcional e à fundamentação de linguagem e comunicação
visual. Assim sendo, é capacitado para desenvolvimento dos artefatos digitais interativos
voltados à maximização da capacidade tecnológica e humana, na atividade de leitura do
mundo virtual que se dá por meio de uma interface que possibilite a comunicação efetiva
entre a informação e o interator.

É importante salientar que os clássicos princípios e paradigmas estabelecidos para o

design gráfico e de produto não bastam para suprir as demandas das mídias digitais e
interativas, pois estes foram estipulados com o pensamento voltado para planos materiais
bi e tridimensionais. Assim sendo, faz-se necessário
o estabelecimento das relações entre a cultura, a linguagem, a tecnologia, a
interdisciplinaridade e a transdisciplinaridade, a aplicação do design da interface,
da informação, da navegação, da interação para o fazer projetual perante as novas
mídias. (MOURA, 2004, p.4).

1
A adequação não significa equivalência, pois um sistema digital e um sistema interator possuem
naturezas bastante distintas. [e.g.: enquanto para o sistema cognitivo humano a perda de equilíbrio na
comunicação pode servir como motivador de desenvolvimento, em um sistema artificial, este desequilíbrio
pode prejudicar ou impedir seu funcionamento (PRIMO, 2007)].

14
 As considerações apresentadas apontam para a importância do design da informação
no processo de desenvolvimento de hipermídias. À medida que a tecnologia avança,
designers desenvolvedores de hipermídias deparam-se, cada vez mais, com uma grande
variedade de opções de elementos, linguagens e técnicas para implementação de
interfaces. Num ritmo veloz, surgem novas possibilidades, por exemplo, para
disponibilizar menus, botões, compactação e visualização de mídias, guias de estilo,
forma e estética dos layouts, entre outros.

Evidencia-se neste contexto que a tarefa de projetar interfaces com foco no design da
informação tem se tornado ainda mais complexa em virtude da necessidade de
conhecimento e do domínio de técnicas e conceitos que estão em constante evolução e
aprimoramento. Além disso, grande parte dos estudos sobre interação mediada por
computador, apesar de comparada com interação interpessoal, parte de um viés
tecnicista, observando basicamente o desempenho do hardware e software (PRIMO, 2007),
ficando menos privilegiadas as teorizações metodológicas e especificidades relacionadas
com o design.

Especificamente relativo ao design da informação, existe uma grade lacuna teórica e

conceitual a respeito de seu esclarecimento a ser debatida para se estabelecer uma
convergência. Inclui-se a esta carência teórica uma maior difusão sobre sua
nomenclatura, definições e objetivos, que segundo a Sociedade Brasileira de Design da
Informação – SBDI2 é “uma área do design gráfico que objetiva equacionar os aspectos
sintáticos, semânticos e pragmáticos que envolvem os sistemas de informação através da
contextualização, planejamento, produção e interface gráfica da informação junto ao seu
público alvo. Seu princípio básico é o de otimizar o processo de aquisição da informação
efetivado nos sistemas de comunicação analógicos e digitais”.

No que diz respeito à prática do design da informação, também é importante que se

discutam e se estabeleçam possibilidades que a favoreçam. No contexto deste trabalho
contempla-se o design da informação relativo ao desenvolvimento de interfaces para
hipermídias. Diante do exposto, elabora-se a seguinte questão da pesquisa: como se
caracteriza o processo de design da informação no desenvolvimento de interfaces de
hipermídias?

Acredita-se que a resposta a essa questão possibilite uma discussão ampla e produtiva
no sentido de agregar conteúdo teórico que viabilize a fundamentação das características
técnicas e metodológicas, dentro do processo global do projeto de interfaces, delimitando
2
Definição retirada do website da Sociedade Brasileira de Design da Informação – SBDI, disponível no
endereço “http://www.sbdi.org.br”, acessado em 11/10/2008.

15
possibilidades e momentos em que o design da informação seja utilizado como
catalisador de soluções a problemas de design. Essa questão de pesquisa também visa
possibilitar a discussão entre assuntos interdisciplinares, identificando afinidades e
tangências teóricas e conceituais.

1.1. Objetivos

O objetivo geral deste trabalho é investigar a caracterização do processo de design da

informação no contexto do desenvolvimento de interfaces de hipermídias. Tal objetivo se
coloca na função de responder a questão de pesquisa estabelecida na seção anterior.

Para atingir o objetivo principal apresentado, foram traçados os objetivos específicos

que seguem:

 Identificar propriedades e definições que caracterizem o design da informação;

 Apontar as características sobre hipermídias que sejam pertinentes às suas interfaces;

 Delimitar definições e propriedades sobre interfaces;

 Reconhecer os objetos que compõem as interfaces de hipermídias;

 Relacionar as características relativas ao design da informação no contexto do

desenvolvimento de hipermídias;

 Discutir a relação entre design da informação e interfaces de hipermídias.

1.2. Justificativas

Segundo Samara (2007, p. 22) “o trabalho de design envolve a solução de problemas

em níveis visuais e organizativos”. O autor confere um papel de grande importância à
disciplina do design quando relacionado à cultura e às novas tecnologias de
comunicação. Porém, afirma que o debate sobre forma e organização da informação
deveria ter mais importância, pois “a construção e a organização da forma estão
indissociavelmente ligadas à disseminação visual da informação”, o que poderia propiciar
discussões mais complexas e aprofundadas sobre a hegemonia não crítica do padrão
visual adotado na atualidade.

Sendo assim, a escolha do tema na proposição de um projeto se baseia na necessidade

de discussão e aprofundamento das questões relativas ao estudo do design da informação
abordando o contexto do desenvolvimento de interfaces de hipermídias. De forma geral,
os projetos elaborados nesta área estão direcionados para o estudo do conteúdo da

16
interface, sua navegação e sua interação, além de métodos de desenvolvimento e de
tecnologias aplicáveis na construção destes artefatos. Tais discussões mostram-se de
extrema importância no desenvolvimento de conceitos e teorias.

Este estudo é relevante na área do design, pois contempla a delimitação de aspectos da

caracterização processual e metodológica no desenvolvimento das interfaces de
hipermídia – que são o ponto de contato do usuário com o sistema digital interativo.
Desta forma, existe uma série de teorias e conceitos familiares ao design que
fundamentam seu desenvolvimento e utilização como ferramenta que possibilita ações
dos usuários.

Bonsiepe (1997, p.144) no enfoque do design como domínio próprio, indica o caráter
ferramental das interfaces, ao afirmar que “a interface permite que se revele o potencial
instrumental tanto de artefatos materiais quanto de artefatos comunicativos”. Na
caracterização do design por meio de seu paradigma do projeto de objetos baseado na
relação entre forma e função, tem-se necessária a existência de interfaces na composição
destes objetos, o que estreita a relação entre o estudo de interfaces e a área do design.
Negroponte (1995) também indica que historicamente a interface tem sido tratada como
um problema tradicional de design.

A gestão do conhecimento aliada à tecnologia da informação e comunicação agregam

valor quando aliados ao design, pois são meios de gerar, compartilhar e transmitir
conhecimento de forma adequada aos processos mentais e biomecânicos dos usuários. Os
estudos e pesquisas sobre a organização da informação estão recebendo cada vez mais
importância, na medida em que é crescente o número de fontes de informação
disponíveis na Web tornando a atividade de sua recuperação mais complexa (WURMAN,
1991; ULBRICHT et al, 2005).

Este estudo pode colaborar no entendimento das características e dos procedimentos

necessários ao desenvolvimento de interfaces focadas na otimização do desempenho de
interação que uma hipermídia pode oferecer no cumprimento de uma tarefa. Isso remete
diretamente ao ganho de tempo na execução de tarefas e no melhor emprego dos
recursos de sistemas e, conseqüentemente, na maior disseminação de informação com
menores recursos humanos e financeiros.

Considerando o aspecto teórico-conceitual, este estudo pode colaborar nas reflexões a

respeito da interface de hipermídias, delimitando seus elementos, suas características e
inter-relações, além dos fatores correlatos á sua utilização, o que pode vir a influenciar
diretamente o processo de design de sistemas digitais interativos.

17
 1.3. Estrutura da dissertação

O capítulo inicial deste estudo trata do conteúdo introdutório ao projeto, indicando ao

leitor um panorama geral sobre o trabalho efetuado, sobre a questão de pesquisa que
embasa a investigação, sua contextualização, seus objetivos gerais e específicos e
justificativas de existência.

Em seguida tem-se o capítulo dois, que apresenta o referencial teórico sobre os

assuntos tratados, abordando as origens das interfaces, delimitando-as e conceituando-as,
assim como definindo o tipo de interface que é objeto deste estudo. No mesmo capítulo
apontam-se conceitos, definições sobre hipermídias e seus aspectos existenciais,
referenciando-se em seguida alguns pontos importantes do design da informação no
processo de desenvolvimento de interfaces de hipermídias.

O capítulo três é responsável pela delimitação teórico-metodológica encontrada na

prática de design da informação no contexto do desenvolvimento de interfaces de
hipermídias. Em quatro pontos principais, apoiados por demonstrações imagéticas,
teoriza-se sobre técnicas e procedimentos relacionados ao design da informação. O
trabalho ainda propõe algumas alianças entre conhecimentos interdisciplinares para o
favorecimento das práticas demonstradas, utilizando tesauros e mapas esquemático-
visuais no apuramento de tais técnicas.

Por fim, colocam-se as considerações finais resultantes de toda a pesquisa apontando-

se possíveis desdobramentos para estudos futuros que este estudo proporciona.

18
2. INTERFACE, HIPERMÍDIA E DESIGN DA INFORMAÇÃO

O presente capítulo trata da apresentação teórico-conceitual dos principais temas

tratados neste trabalho: interface, hipermídia e design da informação. A seqüência
indicada em seu título remete à ordem em que se encontram as discussões aqui
apresentadas, explicitando tanto a estrutura cronológica de apresentação quanto o
recorte focal proposto sobre o conteúdo.

O texto a seguir objetiva elucidar, delimitando e caracterizando, questões relativas a

interfaces de hipermídias que contribuam à uma discussão sobre a atividade de design da
informação neste contexto.

2.1. Entendimentos sobre a interface

O termo interface remete a uma compreensão ampla de seu significado e encontra-se

em uma abrangente gama disciplinar. Visando uma compreensão focada no objeto deste
estudo, será feito um detalhamento histórico indicando o tipo de interface que este
trabalho contempla. Procura-se mostrar sua evolução temporal, assim como as discussões
relevantes trazidas por alguns autores que debatem o assunto, como Alex Primo, André
Lemos, Mônica Moura, Nicholas Negroponte, Pierre Lévy, Steven Johnson, Jeremy
Reimer, Walter Abreu Cybis, entre outros.

Por convenção e de modo geral, utiliza-se a nomenclatura GUI (Graphic User

Interface ou interface gráfica do usuário) para se referir a todos os tipos de interfaces
digitais mediadas por computadores. Porém, no caso específico de interfaces de
hipermídias, observa-se que além dos elementos gráficos que as compõem, coexistem
elementos sonoros que se integram ao processo de interação entre usuário e interface,
trazendo novos significados e possibilidade ao projeto de interface de hipermídia.

Levando em consideração tal característica, procura-se neste trabalho enfatizar tal

particularidade utilizando a nomenclatura ‘interfaces de hipermídias’. Esta posição se
coloca em decorrência da possibilidade de generalização existente ao utilizar a
nomenclatura GUI para se referir à interface de hipermídia. Tal nomenclatura pode se
tornar de certa forma insuficiente para a conceituação do objeto que referencia. Não se
objetiva aqui propor uma nova nomenclatura, tampouco julgar errônea a nomenclatura
corrente, mas busca-se enfatizar características particulares ao objeto deste estudo.

Assim sendo, a interface a que este estudo se refere é a interface gráfica de sistemas
digitais interativos, estruturados de forma hipertextual e que comportam

19
hiperdocumentos multimídia que utilizam elementos imagéticos, textuais e sonoros.
Como dito, acredita-se que a existência de elementos sonoros integrados aos demais no
processo de interação solicita uma adequação, tornando mais apropriado a este trabalho
a utilização da nomenclatura ‘interface de hipermídia’. A escolha desta nomenclatura é
reforçada ao agregar em si outras características de hipermídias.3

O som é um dos elementos existentes nesse tipo de interfaces (e também em outros

tipos de interfaces), porém, o que dissocia de forma mais acentuada as interfaces de
hipermídias das demais é a sua potencialidade enquanto espaço de ação. Esta diferença se
apresenta com vigor na potencialidade existente na hipermídia, o que Lévy (1993) chama
de virtualidade4. Uma interface de hipermídia tanto pode servir a tarefas tradicionais com
estruturas clássicas e ortogonais, como também pode explorar novas possibilidades (ditas
experimentais), dando suporte a atividades menos tradicionais, como por exemplo, a
simples navegação lúdico-exploratória proporcionada por padrões de interação também
não tradicionais como arrastes, controles de entrada e saída de sons e manipulações de
tipos diversos, variantes em seus graus de interação.

Uma última delimitação importante antes do início da exposição teórica é sobre a

diversidade de possibilidades de estudo relativo às interfaces. Pode-se dizer que a GUI
tradicional, assim como a interface de hipermídia, é composta por ‘redes de interfaces',
em diversas escalas, pois cada programa (ou software) é detentor de uma interface
própria, com sub-interfaces, que pode ou não ser comutada por aplicativos distintos. Isso
significa que este trabalho aborda apenas um segmento de estudo sobre IHC (Interface
Homem Computador) referente às hipermídias.

2.1.1. Origem e desenvolvimento das interfaces

Em toda parte que o desenvolvimento tecnológico contemporâneo tenha chegado é

possível encontrar computadores pessoais. Seja em situação de trabalho ou lazer, para o
entretenimento, para acesso e produção de informações, para o projeto de objetos, entre
outras atividades, o computador vem ocupando uma posição cada vez mais importante
na sociedade contemporânea.

3
Mesmo após esta consideração, preferiu-se manter algumas nomenclaturas utilizadas pelos autores aqui
referenciados como forma de respeito a seus trabalhos.
4
“A palavra virtual vem do latim medieval virtualis, derivado por sua vez de virtus, força, potência. Na
filosofia escolástica, é virtual o que existe em potência e não em ato. [...] Em termos rigorosamente
filosóficos, o virtual não se opõe ao real mas ao atual: virtualidade e atualidade são apenas duas maneiras
de ser diferentes.”(LÉVY, 1996, p. 15)

20
 A popularização do computador é, em grande parte, fruto da possibilidade de
interação propiciada pelo desenvolvimento das “interfaces gráficas do usuário” (GUI –
Graphic User Interface), pois foram estas interfaces que possibilitaram a relação dos
usuários com o computador sem que fosse necessário o conhecimento da sintaxe de
programação lógica.

O primeiro acontecimento que possibilitou o desenvolvimento do que se conhece hoje

como a interface gráfica aconteceu por meio de uma conceituação que sucedeu seu
tempo, devido às impossibilidades tecnológicas da época. Em 1930 Vannevar Bush, um
militar de alta patente, descreveu um dispositivo chamado ‘Memex’. Este dispositivo seria
uma espécie de biblioteca pessoal, um dispositivo para armazenar, indexar e visualizar
informações diversas (LEMOS, 2004). Era descrito como um tipo de mesa com duas telas
sensíveis ao toque (touch screen), um teclado e um scanner acoplado. Mesmo sem uma
tecnologia que possibilitasse a materialização de seu conceito, nascia a primeira idéia
próxima do que hoje chamamos de interface (REIMER, 2005). Lévy (1993) diz que esta foi
a primeira vez em que se enunciou a idéia de hipertexto - o Memex baseava-se na não
linearidade de associação entre informações, saltando de uma informação à outra, de
acordo com suas associações.

Segundo Johnson (2001, p. 89) algumas idéias de Bush sobre o Memex se assemelham
fascinantemente com a experiência trazida pela Web.
O Memex foi projetado para organizar informações da maneira mais intuitiva
possível, com base não em gabinetes de arquivos ou auto-estradas, mas nos
hábitos usuais de pensamento – seguindo pistas, fazendo conexões, abrindo trilhas
de pensamentos. Bush queria que o Memex correspondesse à visão do mundo do
usuário.

Naquela época não houve muito interesse pelas idéias de Bush, pois o computador
ainda não havia sido inventado, tampouco havia consciência de seus potenciais, o que só
viria a acontecer a partir de 1937, quando os computadores começaram a ser produzidos.
A Segunda Guerra Mundial proporcionou motivação e financiamento para que fossem
desenvolvidos equipamentos para uso militar.

Em 1945, Bush revisitou suas idéias materializando-as em um artigo intitulado "As We

May Think” (como nós podemos pensar), publicado na revista Atlantic (REIMER, 2005),
onde descrevia seu “processador de informação teórico chamado Memex, que permitia ao
usuário ‘abrir caminho’ por grandes coleções de dados, quase como um navegador da
Web de nossos dias” (JOHNSON, 2003, p.17).

21
 O ensaio de Bush teve maior repercussão dessa vez e motivou o pesquisador Douglas
Englebart5 a pensar num computador como ampliador do intelecto humano –
“Augmenting Human Intellect” – título de um de seus ensaios publicado em 1962
(REIMER, 2005). Vale ressaltar que no ano de 1960, segundo Negroponte (1995), havia
acontecido um fato que norteou o início do design de interface: a publicação do artigo ‘A
simbiose homem-computador’ por J.C.R. Lickilider’6.

Em outubro de 1968, no San Francisco Civic Auditorium, Engelbart fez a apresentação

da primeira ‘interface gráfica do usuário’ existente. Engelbart esboçou um produto em
condições de funcionamento especulativamente análogo ao Memex, conforme mostra a
figura 1 (JOHNSON, 2001).

Figura 1: O sistema on-line mostrador, teclado e mouse. (Fonte: REIMER, 2005, p. 4)

Segundo Johnson (2001, p. 17), a importância deste momento está na ruptura

tecnológica “residente na idéia do computador como um sistema simbólico”, lendo
representações e sinais e não a causa e efeito mecânicos, como ferramenta rudimentar.
Para acessar tal sistema simbólico, Engelbart envolveu o princípio de manipulação direta,
que consiste em dar o controle dos elementos da interface ao usuário. Em vez de o
usuário teclar comandos, ele podia apontar para alguma coisa e fazer as ações
acontecerem, podendo clicar, arrastar, expandir, aumentar, e disso conseguir uma reação
na interface.

5
Douglas Englebart se formou em engenharia elétrica, em 1955 recebeu seu título de PhD, trabalhou no
Instituto NACA (precursor da NASA), depois no Instituto de Pesquisa de Stanford, onde teve financiamento
para suas pesquisas (REIMER, 2005).
6
“Lick (como era chamado) era um psicólogo experimental e um especialista em acústica que se converteu
à informática e tornou-se um messias no assunto, comandando os esforços iniciais da ARPA”.
(NEGROPONTE, 1995, p. 94)

22
 Segundo Preece et al (2005, p. 68), a manipulação direta é um tipo de modelo
conceitual de interface que utiliza a manipulação de ‘objetos’ em ações como mover,
fechar, abrir, selecionar, aproximar, afastar etc., dando possibilidades diversas aos
usuários. Ben Sheiderman (1983, apud PEERCE et al, 2005, p. 68) afere três propriedades
fundamentais a esse tipo de manipulação:

 representação contínua de objetos e ações de interesse;

 ações rapidamente reversíveis;

 comandos por meio de ações físicas em vez de comandos por sintaxe complexa.

Ainda segundo o autor, as interfaces de manipulação direta proporcionam os seguintes

benefícios:

 auxílio a usuários iniciantes no aprendizado de funcionalidades básicas;

 favorecimento à simultaneidade nas atividades realizadas por usuários experientes;

 facilidade de memorização de operações;

 menor necessidade de mensagens de erro;

 maior controle na verificação das atividades realizadas;

 menor ansiedade por parte do usuário;

 aumento da autoconfiança, habilidade e controle das ações por parte do usuário,

Uma das invenções importantes apresentadas por Engelbart, que possibilitou este tipo
de manipulação na interface, foi o mouse (idealizado por ele e construído por um de seus
colaboradores). O mouse idealizado por ele tem as características funcionais idênticas às
que se encontram nos mouses contemporâneos e representaram uma maneira mais
natural de manipulação, permitindo o controle do cursor na interface (REIMER, 2005). É
importante salientar que estes artefatos surgiram num contexto no qual a comunicação
entre computadores e usuários se encontrava ainda muito rudimentar. A interação com o
usuário estava em segundo plano por causa das limitações de hardware e dos dispositivos
gráficos (LEVY C. H., 1993).

Na seqüência do desenvolvimento dos computadores pessoais com interfaces gráficas,

deve-se destacar o papel desempenhado pela companhia Xerox. Apesar de ser uma
empresa baseada na tecnologia da fotocópia em papel, ela empenhou-se estrategicamente
em trabalhar com o domínio tecnológico digital, criando em 1970 um centro de pesquisa
em Palo Alto (Xerox PARC) com os maiores pesquisadores da computação dos Estados

23
Unidos. Alguns destes pesquisadores faziam parte da equipe de Engelbart, e
compartilhavam as idéias sobre bits, mouses e janelas, o que possibilitou posteriormente
o desenvolvimento da interação baseada em metáforas visuais. (REIMER, 2005)

Nesse centro de pesquisa havia uma alta produtividade criativa financiada pela
empresa Xerox. Um dos inventos ali realizados que merece destaque foi a impressora
laser, pois exigia uma maneira mais gráfica de trabalho como parte integrante no
processo de impressão não suportada pelos hardwares/softwares existentes na época. Esta
demanda desencadeou o desenvolvimento de computadores e programas que
solucionassem a questão da manipulação por meio de uma interface gráfica. Destaca-se
neste desenvolvimento o sistema operacional Smalltalk (Figura 2) utilizado
necessariamente no computador Alto (Figuras 3), que posteriormente foi aprimorado,
sendo utilizado comercialmente com o nome de Xerox Star, em 1981 (figura 4). (REIMER,
2005)

Figura 2: interface do SmallTalk. Figura 3: ‘Alto’ da Xerox.

(Fonte: REIMER, 2005, p.10) (Fonte: REIMER, 2005, p.7)

Figura 4: Interface do Xerox Star. (Fonte: REIMER, 2005, p.10)

24
 O Xerox Star utilizava a metáfora do desktop para sua interação. De acordo com
Johnson (2001), essa analogia não era muito consistente, pois o usuário não se sentia de
fato sentado em uma mesa com papéis, mas servia como uma forma mais simples e
amigável para explicar o funcionamento da interface e conseguir assim uma maior
aproximação com o usuário.

Esse artefato não obteve muito sucesso comercial, mas serviu de inspiração para o
desenvolvimento da primeira interface gráfica comercialmente viável. Após estudos com
uma interface de transição chamada Lisa (figura 5), a Apple Computer lançou o
Macintosh (figura 6), com uma aprimorada interface gráfica que utilizava a
metáfora do desktop inventiva, fascinante, que introduziu na imaginação popular
quase todos os elementos da interface atual: menus, ícones, pastas, lixeiras. Mais
de uma década depois ele continua sendo o padrão pelo qual todas as interfaces
são julgadas. Pode-se dizer com segurança que todos os aperfeiçoamentos de
interface feitos desde então são meras variações em torno desse tema original.
(JOHNSON, 2001, p.41)

Figura 5: Interface final de Lisa. (Fonte: REIMER, 2005, p.13)

25
Figura 6: Interface da área de trabalho do Macintosh original. (Fonte: PREECE et al, 2005, p.69)

Neste desenvolvimento bem-sucedido, merece destaque a participação do pesquisador

Alan Kay, por suas idéias de utilização do computador que viriam a fazer a diferença
para o sucesso do Macintosh. O sistema projetado utilizava extensivamente recursos
gráficos e suas principais características eram (LEVY C. H., 1993, p. 1):

 um dispositivo para apontar, tipicamente um mouse;

 menu de barra, que pode aparecer e desaparecer sob controle do mouse;

 janelas que exibem o que o computador está fazendo;

 ícones que representam arquivos e diretórios (folders);

 caixas de diálogos, botões e muitos outros elementos gráficos de

interface representando técnicas de interação.

Pierre Lévy (1993) relaciona algumas destas características com o que chama de
interface amigável, já citada no texto, e aponta Douglas Engelbart e sua equipe como
idealizadores de muitas destas características utilizadas posteriormente pelo Macintosh,
listando algumas, tais como:

 a tela com múltiplas janelas de trabalho;

 a possibilidade de manipular complexos informacionais apresentados na tela,

representados por símbolos gráfico, utilizando-se um mouse;

 as conexões associativas (hipertextuais) em bancos de dados ou em documentos

distintos;

 os grafos dinâmicos para representar estruturas conceituais;

26
 os sistemas de ajuda ao usuário integrados aos programas.

Estas características foram importantes, uma vez que a memória visual é muito mais
duradoura que a textual, sendo a compreensão imagética colaboradora no processo
cognitivo de apreensão de informações (JOHNSON, 2003). Ainda segundo o autor, tais
características, associadas à qualidade simbólica assumida pelo computador,
principalmente ao fazer uso de metáforas visuais como linguagem de interação, foram
responsáveis pela adoção generalizada da interface gráfica. A utilização de metáforas nas
interfaces fornece uma estrutura básica de modelo conceitual que transmite familiaridade
ao usuário. As metáforas são uma maneira eficiente de interação com o usuário, pois
auxiliam a entender e aprender a forma de utilização do sistema. (PREECE et al, 2005)

Na década de 80 também houve o desenvolvimento de outras interfaces gráficas com

características similares às já citadas até o momento, porém, o sucesso alcançado pela
Apple não se repetiu. Entre estes desenvolvimentos podem ser citados: VisiOn, Windows
(1.0, 1.01 e 2.0), GEM, Amiga Workbench, GEOS, Arcon, NeXTSTEP, OS/2, Windows
(3.11 e 95). (REIMER, 2005)

Dos anos 90 até os dias de hoje, apareceram novos sistemas operacionais como o
Linux (um sistema baseado no Unix, mas com uma filosofia de livre distribuição e código
aberto), mas em âmbito comercial se estabeleceram o Macintosh (MAC OS) e o Windows,
que utiliza conceitos homônimos aos da Apple. O Windows tornou-se o sistema
operacional mais popular do mundo devido a sua estratégia de marketing e logística
comercial, e conseqüentemente, a interface gráfica de sistema operacional mais
conhecida entre todas. (REIMER, 2005)

Muitos aprimoramentos aconteceram no processo cronológico das interfaces gráficas

dos sistemas operacionais e aplicativos, decorrentes de estudos da interação com usuário
e das possibilidades propiciadas pelos avanços tecnológicos. Os fundamentos conceituais
dos ensaios de Bush sobre o Memex, aplicados por Engelbart e aprimorados por Alan
Kay, formaram a base da interface gráfica digital contemporânea, sendo notória a
similaridade entre as interfaces utilizadas atualmente e suas antecessoras.

Como visto, as interfaces iniciaram seu desenvolvimento de forma muito acoplada a

seu hardware, bem como ao seu sistema operacional. Neste breve apanhado cronológico
poder-se-ia contemplar referências de estudos de interfaces que não utilizam uma tela
tradicional, como o caso de ambientes de realidade virtual e as novas interfaces de
artefatos como o iPhone da Apple (figura 7) e o Surface da Microsoft (figura 8).

27
Figura 7: iPhone da Apple (Fonte: www.apple.com).

Figura 8: Microsoft Surface. Figura 9: Interfaces naturais.

(Fonte: GATES, 2007) (Fonte: GATES, 2007)

Ambos os artefatos relacionam-se com o novo conceito de ‘interfaces naturais’ (figura

9), que eliminam a necessidade de teclados e mouses, e possibilitam a interação por meio
da voz, da visão, do tato e da escrita manual (GATES, 2007). Porém, optou-se por não
efetuar um estudo mais aprofundado sobre tais interfaces considerando que são conceitos
ainda em formação que estariam fora de um alcance efetivo de pesquisa, e também,
acreditando-se que os conhecimentos e delimitações sobre interfaces contemporâneas e
usuais favorecem a pesquisa e o desenvolvimento de novas formas de interfaces para
novos artefatos, incluindo-se os que se utilizem de maiores recursos sensório-motores.

É importante salientar que algumas técnicas, paradigmas e fundamentos utilizados no

desenvolvimento de interfaces gráficas digitais são embasados, e em parte comutados,
por interfaces gráficas impressas, porém, adequadas às novas formas de interação e
linguagem. Muitos dos princípios relativos à fundamentação de linguagens, composição
etc., foram retrabalhados e agregados a novos princípios na constituição de uma
linguagem visual e interativa própria.

A figura 10 apresenta as principais interfaces de sistemas operacionais ordenadas pela

seqüência temporal de desenvolvimento. Nota-se que inicialmente as interfaces gráficas

28
eram associadas a um hardware determinado, e que com o tempo esta necessidade foi
sendo diluída. Além disso, pode-se notar que com o passar do tempo o padrão visual
utilizado, de certa forma, vem convergindo. Apesar de não ser objeto deste estudo e não
compor o conjunto de imagens abaixo, vale indicar que tais padrões têm se ampliado
para além de interfaces mediadas por computadores tradicionais, para artefatos como
PDAs, celulares, televisores, videogames etc. e novos artefatos ainda em desenvolvimento,
como demonstrado mas figuras 7, 8 e 9.

29
Figura 10: Linha do tempo do desenvolvimento do GUI baseada em Reimer (2005).

30
 Até o momento foram levantadas as referências históricas relativas às interfaces
gráficas de mediação entre computador e usuário, que são a base inicial para o
entendimento da criação de hipermídias. Para que este levantamento contemple
devidamente o surgimento de interfaces de hipermídias, é importante fazer a relação da
GUI com posterior surgimento da Internet e da Web. O surgimento da Web, condicionada
às interfaces gráficas de sistemas operacionais, norteia o surgimento da estrutura
hipertextual e da hipermídia.

O percurso histórico da Internet teve seu inicio em 1969, quando a Arpanet, uma rede
de computadores em longa distância com objetivos militares, foi implementada (LEMOS,
2004; MOURA, 2003). Em 1989 o funcionamento da Arpanet foi interrompido, derivando
em um conjunto de protocolos para comunicação denominado Internet Protocol, ou
simplesmente IP. A Internet é o meio em que a World Wide Web – WWW7, também
conhecida como Web, se propaga.
A WWW é um sistema hipermídia num ambiente mediado pelo computador,
possuindo um corpo de software, um conjunto de protocolos e conversões que
possibilitam às pessoas a recuperação, edição, navegação pelas informações com
maior liberdade, dentro do ambiente virtual. (MOURA, 2003, p. 138)

A seguir temos um apanhado geral com alguns acontecimentos posteriores ao

desenvolvimento de interfaces gráficas que colaboraram para o desenvolvimento da
Internet e para surgimento da Web: (BUGAY & ULBRICHT, 2000, LEMOS, 2004; MOURA,
2003)

 1965 – Ted Nelson cria a termo ‘hipertexto’ vinculado ao seu significado conceitual;

 1969 – Coloca-se em funcionamento a Arpanet, em uma universidade dos Estados

Unidos;

 1979 – a Arpanet iniciada com a ligação remota entre dois computadores já era
constituída por 61 computadores, com um crescimento de um nó por mês em sua
rede.

 1980 – Conectam-se duas redes distintas, a Arpanet e a Milnet.

 1989 – O projeto Arpanet é interrompido dando lugar a um sistema comercial

chamado Internet;

7
A World Wide Web – WWW ou Web pode ser definida como um sistema integrado por vários recursos
(Gopher, FTP, http, Telnet, Usenet, WAIS e outros), que pode ser acessado por meio de um navegador ou
browser. (MOURA, 2003)

31
 1991 – Tim Berners-Lee apresenta a WWW – World Wide Web, que se tornou a
primeira rede hipertextual global;

 1993 – Nasce a ‘navegação’ ao ser desenvolvido o primeiro navegador Web comercial,

o Mosaic, criado pela National Center for Supercomputing Applications.

 2004 – a Internet se constituía por mais de 8.000 redes, interligando todos os

continentes.

 2007 – A Web 2.0 é uma realidade crescente constituída por uma enorme gama de
possibilidades.

A principal relação histórica entre interfaces gráficas do usuário (GUI) e a Internet está
no desenvolvimento de navegadores gráficos com a função de suporte e acesso à WWW.
Estes navegadores compartilham de características de interação utilizadas em interfaces
de sistemas operacionais, já citadas no texto. Segundo Johnson (2001, p. 75) “um
navegador, ou browser, é uma derivação da janela original destinada a tornar a Web mais
acessível, uma maneira de ver o invisível.”

Se comparado ao histórico da interface gráfica, pode-se dizer que o design de

interfaces para Web, onde se encontra o meio de suporte para o desenvolvimento de
interfaces de hipermídias, é uma atividade extremamente recente. Como demonstrado, as
interfaces gráficas só tiveram uma maior popularidade nos anos 80, enquanto a WWW só
se transformou numa mídia de massa de proporções globais devido à eliminação de
barreiras para a atividade comercial, em 1995 (MEYER et al, 2000, apud BATISTA, 2007,
p.34). Para Lemos (2004, p. 110). “a interface gráfica e as novas formas de interação
homem-máquina foram decisivas para a apropriação dos microcomputadores”.

2.1.2. Conceitos e definições sobre interfaces

Segundo Moura (2003, p. 215), as áreas da informática e da ciência da computação

foram responsáveis pela disseminação do conceito de interface, definindo-a como
o elemento que proporciona uma ligação física ou lógica entre dois sistemas ou
partes de um sistema que não poderiam ser conectados diretamente, ou seja, é a
fronteira compartilhada por dois dispositivos, sistemas ou programas que trocam
dados e sinais.

Bonsiepe (1997, p.144) também afere ao campo da ciência da computação o

surgimento do conceito de interface. O autor diz que este conceito tem importância
central para áreas como computação gráfica, multimídia, realidade virtual e telepresença,
e fornece uma sólida base teórica para o design, haja vista a escassez de conceitos

32
fundamentais encontrada nesta área. No enfoque do design como domínio próprio, ao
lado das ciências, da tecnologia e das artes, o autor afirma que “a interface permite que
se revele o potencial instrumental tanto de artefatos materiais quanto artefatos
comunicativos”. Esta afirmação indica o sentido ferramental da interface, e mostra a
relação indissociável entre ‘ferramentas’ e suas interfaces.

De forma menos explícita, Lévy (1993. p. 176, 179) relaciona a interface ao campo da
informática, e se refere à interface como mediadora entre ‘sistemas informáticos’ distintos
ou entre um ‘sistema informático’ e ‘redes de comunicação’. A interface efetua operações
de transcodificação de fluxos de informação, permitindo novas conexões e
consecutivamente, novas possibilidades.

Uma interface é, antes de tudo, uma parte de um sistema e como tal possui estrutura e
processos. Esse sistema pode ser material ou imaterial. No caso deste estudo,
contemplam-se as interfaces imateriais de sistemas digitais interativos, mais precisamente
as utilizadas em hipermídias. O sistema ao qual a interface se acopla é regido por um
núcleo funcional, sendo a interface responsável pela relação sensório-motoras de
controles e comandos, e o núcleo funcional regente do sistema formado por programas
aplicativos, algoritmos e base de dados. Esta morfologia será melhor explicitada mais à
frente, na explanação sobre hipermídias.

A estrutura na qual a interface atua

é representada por seus componentes, e os processos se estabelecem na interação
entre estes componentes e os usuários do sistema. Assim um único sistema de
interface humano-computador permite inúmeras interações humano-computador,
cada uma associada aos diferentes percursos (processos) realizados pelos
diferentes usuários. Sob outro ponto de vista, a interface humano-computador é
vista como uma linguagem (sistema de sinais) cuja estrutura lexical e sintática é
conhecida pelo usuário e pelo sistema informatizado. Durante o diálogo, esses
agentes articulam os elementos do léxico através de regras de sintaxe para montar
e interpretar as mensagens trocadas. (CYBIS, 2003, p. 39)

Em seu entendimento mais simples, a palavra interface se refere a softwares que dão
forma à interação entre usuário e o computador, atuando como um tipo de tradutor que
realiza a mediação entre duas partes, o que torna uma sensível à outra. Isto implica em
uma relação articulada pela interface de forma semântica, caracterizando-se pelo
significado e expressão. (JOHNSON, 2001)
Uma interface deve levar em conta: a mobilidade (dinâmica), a navegação
(orientação na exploração do espaço virtual), a conexão (ligação de hipertexto) e
as questões da visualidade para relacionamento (cor, diagramação, elementos

33
 gráficos, imagens). A interface é a área em que coisas diversas interagem, é o
meio de interação do usuário com um programa ou sistema operacional que
emprega recursos gráficos (ícones e janelas) na edição de documentos, na
utilização de programas, dispositivos e outros elementos. (MOURA, 2003, p. 215)

Esta interação geralmente se dá usando o mouse (ou outros dispositivos de entrada,

como joystick, teclado, microfone, webcam, dentre outros), para abrir programas, clicar
em ícones e manipular janelas, sendo usados nestas ações os controles gráficos da
interface para possibilitar o diálogo de entrada e saída de dados ou informações. Para
Batista (2003, p. 23), “o objetivo da interface é: apresentar dados, controles e comandos;
solicitar a entrada de dados; apoiar o usuário”, operando nas estratégias necessárias para
a concretização de tarefas, acolhendo, orientando, indicando e instrumentando o usuário
durante as interações.

Assim sendo, pode-se considerar como interface o artefato digital que possibilita que o
usuário e o computador se comuniquem sem que haja a necessidade deste usuário
conhecer linguagens de programação. As interfaces de sistemas digitais, “se forem
simples, diretas, agradáveis e divertidas, farão com que seu usuário se esqueça que está
usando a ferramenta e se concentre na tarefa” (RADFAHRER, 2000, p. 105). Porém, deve-
se observar, conforme Primo (2007, p. 101) que a transparência ou neutralidade isenta de
impacto às interações mediadas não são totais, “pois cada meio oferece simultaneamente
certas possibilidades e certas limitações à interação”.

Ampliando a idéia de Bonsiepe sobre o papel de artefato adquirido pela interface, Lévy
(1993, p. 181) coloca em um discurso correlato que
a noção de interface pode estender-se ainda para além de domínio dos artefatos.
Esta é, por sinal, sua vocação, já que interface é uma superfície de contato, de
tradução, de articulação entre dois espaços, duas espécies, duas ordens de
realidade diferentes: de um código para o outro, do analógico para o digital, do
mecânico para o humano... Tudo aquilo que é tradução, transformação, passagem,
é da ordem da interface.

Esta noção de interface também remete, segundo o autor, à operação de tradução, de

estabelecimento de contato entre meios heterogêneos, objetivando ao mesmo tempo a
comunicação (ou o transporte) e os processos transformadores necessários ao sucesso da
transmissão.

A interface tem como papel fundamental ‘traduzir’ ações do usuário em pedidos de

processamento (funcionalidades), refletir e mostrar os resultados de forma adequada e
coordenar a interação. “A interface gráfica é a arena onde tanto humanos como
computadores desenvolvem tarefas num contexto de ação com papeis definidos” (LEMOS,
34
2004, p. 111). A interface tem a função de “permitir ao usuário obter uma visão
panorâmica do conteúdo, navegar na massa de dados sem perder a orientação e, por fim,
mover-se no espaço informacional de acordo com seus interesses”.
A interface possui sempre pontas livres prontas a se enlaçar, ganchos próprios
para se prender em módulos sensoriais ou cognitivos, estratos de personalidade,
cadeias operatórias, simulações. A interface é um agente indissoluvelmente
material, funcional e lógico que funciona como armadilha, dispositivo de captura.
(LÉVY, 1993, p.180)

O interator8 é capturado por ela, sendo inspirado por uma rede de informações. Esta
interface contribui para definir a forma de captura da informação oferecida aos atores da
comunicação, abrindo, fechando e orientando os domínios de significação de utilizações
possíveis da ‘mídia’. A interface condiciona a dimensão pragmática do que pode ser feito
com o seu conteúdo. (LÉVY, 1993)

Alguns inconvenientes da utilização da interface são parcialmente compensados por

certo número de características de interfaces que foram disseminadas durante os anos
oitenta, chamadas de princípios da ‘interação amigável’ (LÉVY, 1993, p. 36):

 a representação figurada, diagramática ou icônica das estruturas de informação e dos

comandos (por oposição a representações codificadas ou abstratas);

 o uso do mouse que permite ao usuário agir sobre o que ocorre na tela de forma
intuitiva, sensório-motora, e não através do envio de um seqüência de caracteres
alfanuméricos;

 os ‘menus’ que mostram constantemente ao usuário as operações que ele pode

realizar;

 a tela de alta resolução.

Segundo Batista (2007), existem algumas diferenças entre interfaces gráficas do

usuário (GUI), utilizadas em sistemas operacionais e programas, e interfaces Web,
utilizadas em hipermídias. A autora argumenta que tais diferenças são principalmente
relativas aos atores envolvidos em seu desenvolvimento e utilização (designers,
desenvolvedores, conteúdistas e usuários). A diferença em relação aos dois tipos de
interface também é discutida por Feldman (2003), que aponta como principais distinções
as funcionalidades, tipos de controles, a forma de navegação (interação) e conteúdos.
8
O termo ‘interator’, segundo Moura (2003, p. 143), remete ao texto de Arlindo Machado publicado em
2002 – O Sujeito no Ciberespaço – e refere-se ao sujeito usuário que interage com a hipermídia,
participando do processo de comunicação e de informação de forma não passiva.

35
 Mesmo com suas distinções, estes dois tipos de interfaces levantados pelos autores
(BATISTA, 2003; FELDMAN, 2003) têm uma natureza correlata, na medida em que atuam
como artefato interativo que possibilita o ‘diálogo’ entre um sistema e um usuário. Como
destaque nesta diferenciação voltado ao tema deste trabalho, pode-se apontar que o
tratamento que recebem em seu design tem como foco a natureza da atividade intrínseca
a ela e ao seu conteúdo. Novamente revela-se a importância do design da informação no
tratamento de conteúdo, visando à distinção do objeto final, de acordo com suas
peculiaridades.

O design da informação atua em diversos campos da comunicação visual além dos

sistemas digitais interativos. Por isso, coloca-se aqui uma breve delimitação sobre a área
do design da informação relevante para o trabalho: o design de interface.

Entende-se neste estudo o design de interface como área correlata ao design da

informação, fazendo referência ao meio digital interativo como anteparo projetivo, sendo
esta última a macro área de amparo. Nessa condição, podemos aferir a ambas as
nomenclaturas (design da informação e de interface) a mesma condição projetiva
colocada por Bonsiepe para o design de interfaces, em que em uma interpretação baseada
no senso não-conservador implica em atividades iniciais, “já com a estruturação do
conteúdo. Esta afirmação à primeira vista não é óbvia, porém um enfoque do design que
pretende prescindir do trabalho semântico fica sem perspectiva.” (BONSIEPE, 1997, p.59)

Johnson (2001, p. 19) afere ao design de interface a capacidade de efetuar

expressivamente a comunicação entre usuário e interface, e afirma que se for executado
de forma eficiente,
permite a um usuário isolado navegar intuitivamente através de seus documentos
e aplicações, comunicando-se ocasionalmente com o mundo externo [...]. A
simplicidade da interface reflete a simplicidade das ferramentas que o próprio
computador oferece.

Batista (2007) se refere ao design de interface como uma atividade recente e

multidisciplinar, demonstrando a relação de suas áreas conforme a figura 11:

36
Figura 11: Multidisciplinaridade no Design de Interface (fonte: Batista, 2007, p.35)

Esta visão global das relações existentes no design de interface é pertinente ao

presente estudo, uma vez que pode colaborar no apontamento de algumas relações entre
os elementos informacionais existentes nas interfaces. Na representação da figura 11, os
nichos referentes à comunicação, semiótica e linguagem gráfica e tipográfica seriam de
maior importância no contexto da pesquisa, pois contemplam os objetos formais
interativos os quais são foco de tratamento por meio do design da informação.

2.2. Hipermídia, interface e interatividade

Marshall McLuham (1969, apud PRIMO, 2007, p.18) diz que o meio afeta o receptor de
acordo com as características que apresenta. Assim sendo, faz-se necessária uma
delimitação das características das hipermídias para distinguir suas interfaces das demais,
bem como o reflexo de sua potencialidade interativa, que as distingue sensivelmente
como meio comunicativo.

2.2.1. Definições e delimitações sobre as hipermídias

Não é raro observar a nomenclatura hipermídia sendo utilizada como sinônimo de

multimídia, o que incorre em erro na medida em que não define com exatidão o objeto
ao qual se refere, levando a uma compreensão errônea, uma vez que remete a conceitos
de forma generalista ou já superada por aplicação e estudos contemporâneos.

37
 Vaughan (1995, p. 228, apud PRIMO, 2007, p. 33) define multimídia como a
combinação de texto, gráfico e elementos de áudio em uma única coleção ou
apresentação, que torna-se multimídia interativa quanto o usuário tem algum controle
sobre a informação apresentada. Por sua vez, torna-se hipermídia quando oferece uma
estrutura e elementos interconectados em que um usuário pode navegar e interagir. Neste
caso não estaria incorreto utilizar a nomenclatura ‘multimídia interativa’ como sinônimo
de hipermídia, mas esta primeira nomenclatura permite uma compreensão também ampla
se não contextualizada, e por sua vez, passível de ser generalista e ultrapassada em
alguns casos, uma vez que se pode obter outros meios que não os digitais com
características multimidiáticas e interativas.

Uma outra situação também comum é a utilização dos termos ‘hipertexto’ e

‘hipermídia’ com sentidos homônimos. Bem, uma hipermídia é necessariamente um
hipertexto, pois este é condição estrutural para sua existência; porém, um hipertexto não
é necessariamente uma hipermídia, dada a condição multimidiádica necessária a seus
hiperdocumentos para que esta inversa seja verdadeira. A seguir encontra-se o debate de
algumas definições sobre hipermídia e hipertexto que possibilitam o esclarecimento sobre
os conceitos aqui levantados.

Combinando canais perceptivos (linguagem, imagem e som), a hipermídia permite a

interação em forma de navegação entre nós semânticos. Sua diferenciação entre meios
audiovisuais está em sua organização em rede e na possibilidade de navegação do espaço
informacional (BONSIEPE, 1997).

Uma hipermídia pode ser considerada como um sistema digital interativo composto
por diferentes tipos de mídias e disposto de forma hipertextual em um determinado
artefato9, seja ele um CD-ROM, um Website ou um terminal de auto-atendimento. Para
esclarecer melhor esta definição, faz-se necessário um breve apanhado conceitual, em
busca de suas bases.

Para Lévy (1993, p. 33),

um hipertexto é um conjunto de nós ligados por conexões. Os nós podem ser
palavras, páginas, imagens, gráficos ou partes de gráficos, seqüências sonoras,
documentos complexos que podem eles mesmos ser hipertextos. Os itens de
informação não são ligados linearmente, como em uma corda com nós, mas cada
um deles, ou a maioria, estende suas conexões em estrela, de modo reticular.
Navegar em um hipertexto significa portanto desenhar um percurso em uma rede

9
Artefatos são objetos que possibilitam ações efetivas (BONSIEPE,1997).

38
 que pode ser tão complicado quanto possível. Porque cada nó pode, por sua vez,
conter uma rede inteira.

Complementando, Carlos Irineu (in LÉVY, 1999, p. 254) coloca que um hipertexto é
“uma forma não linear de se apresentar e consultar informações” vinculando informações
e criando uma rede de associações por meio de ligações. O termo hipertexto, segundo
Ulbricht (2006, p. 20), faz referência a “um documento imaterial, e esta imaterialidade lhe
confere a propriedade de ambigüidade”, pela possibilidade de ser compartilhado por
várias pessoas, cada qual adotando seu próprio percurso e sua própria leitura.

Na concepção de Cybis (2003), um sistema interativo pode ser decomposto em Núcleo

Funcional e Interface com o Usuário. O Núcleo Funcional é formado por programas
aplicativos, algoritmos e bases de dados. A Interface com o Usuário compreende as
apresentações de informações, de dados, de controles e de comandos do sistema regido
pelo núcleo funcional. A representação deste sistema pode ser vista na figura 12, a seguir.

Figura 12: Decomposição de um sistema digital interativo baseada em Cybis (2003) – Núcleo Funcional>
<Interface com o Usuário> <Usuário.

Bugay & Ulbricht (2000) se referem a um “sistema hipertexto”, que em análise

associativa está fortemente relacionado ao sistema digital interativo mostrado por Cybis
(2003). Pela sua decomposição os autores chegam a três níveis: Nível de Base de Dados –
armazenamento, informação compartilhada e acesso a rede de trabalho; Nível de HAM
(Hypertext Abstract Machine ou Máquina de Hipertexto Abstrata) – nós10 e ligações11; e
Nível de Apresentação – interface do usuário.

10
“Nós – são a unidade fundamental do hipertexto, mas não existe concordância com relação ao que
realmente constituí um ‘nó’. A principal distinção é entre sistemas baseados em quadros e em janelas”.
(BUGAY & ULBRICHT, 2000, p.90)
11
“Ligações – são outras unidades fundamentais do hipertexto, além dos nós. As ligações são quase
sempre ancoradas no seu ponto de partida para prover ao usuário algum objeto explícito para ativar a
ordem de seguir a ligação. O resultado da ativação da âncora é seguir para o nó de destino”. (BUGAY &
ULBRICHT, 2000, p.90)

39
Figura 13: Decomposição de um sistema hipertexto baseada em Bugay & Ulbricht (2000) – Nível de Base de
Dados> <Nível de HAM> <Nível de Apresentação

Nesta decomposição os autores explicam que o Nível de Base de Dados está

relacionado com o armazenamento de informações do sistema, e não estaria relacionado
de forma direta com o hipertexto. O Nível da Máquina de Hipertexto abstrata (HAM) é o
centro do sistema, determinando a natureza entre os nós e ligações, e suas relações. Por
fim, o Nível de Apresentação, ou interface do usuário, seria a representação das
informações contidas na HAM, incluindo comandos disponíveis e apresentando ligações e
nós.

Comparando-se as decomposições sistemáticas propostas por Cybis (2003) e Bugay &

Ulbricht (2000), pode-se chegar a uma estrutura complementar e elucidativa sobre um
sistema hipermídia. Essa nova proposição procura contemplar os tipos de componentes
que integram a estrutura e os processos do sistema hipermídia. A estrutura seria
composta pelos componentes como dados e informações, e os processos seriam
componentes abstratos como ações, representações e relações. Nesta acepção, um sistema
hipermídia decompõe-se em cinco níveis associados, conforme apresentado na figura 14
e descrito abaixo:

1. O Núcleo Funcional – NF é o nível que se constitui por programas aplicativos,

algoritmos e bases de dados;

2. As Ligações e Representações Abstratas – LRA são o nível que faz a comunicação

entre o núcleo funcional e a interface do usuário. Elas de fato existem apenas
conceitualmente e poderiam ser representadas por um diagrama ou mapas (como
demonstrado na seção sobre ‘3.2. Apresentação visual e estrutural do projeto’). Esta parte
do sistema determina a natureza, navegação e morfologia das ligações e nós, bem como
de suas relações;

3. A Interface do Usuário – IU compreende o nível das apresentações de informações,

de dados, de controles e de comandos do sistema;

40
 4. A Interação é o nível de comunicação e de ação entre o interator e a interface, é a
maneira como se relacionam indivíduo e a interface.

5. Interator é o indivíduo que faz um sistema hipermídia ter sentido em sua existência.
Não é um nível acoplado ao sistema, mas sim quem utiliza para determinado fim tal
sistema por meio de sua interface. Sua adoção como parte do sistema tem a finalidade de
destacar sua relevância na constituição do mesmo, na medida em que suas características
intrínsecas são fatores de condicionamento ao desenvolvimento e à utilização do sistema.

Figura 14: Decomposição de um sistema hipermídia – Núcleo funcional <ligações e representações

abstratas> interface do usuário <interação> interator.

Esta decomposição da hipermídia é interessante para esclarecer os processos e as

estruturas que compõem o sistema integralmente, o que possibilita apreender algumas
características e fundamentações sobre a sua interface, e todos os ‘componentes a ela
conectados. Como mostrado, em todas as decomposições acima, é a interface com o
usuário que torna possível a comunicação entre as partes sem que haja a necessidade que
o usuário conheça linguagens de programação. É a interface que solicita e recepciona as
entradas de dados, de controles e de comandos. Finalmente, ela controla o diálogo entre
as apresentações e as entradas. Uma interface tanto define as estratégias para a realização
da tarefa, como conduz, orienta, recepciona, alerta, ajuda e responde ao usuário durante
as interações (CYBIS, 2003).

Bugay & Ulbricht (2000, p. 40) fazendo algumas caracterizações, definem a hipermídia
como:

 uma evolução do hipertexto;

 a associação entre multimídia e o hipertexto;
 uma multimídia interativa ou ligada;
 agente de manipulação de ligações entre partes específicas de uma mídia;

41
 A hipermídia12 leva adiante
um processo já antigo de artificialização da leitura. Se ler consiste em selecionar,
em esquematizar, em construir uma rede de remissões internas ao texto, em
associar a outros dados, em integrar palavras e as imagens a uma memória
pessoal em reconstrução permanente, então os dispositivos hipertextuais
constituem de fato uma espécie de objetivação, de exteriorização, de virtualização
dos processos de leitura. (LÉVY, 1996, p. 43)

Negroponte (1995, p. 72) também considera a hipermídia como um desenvolvimento

do hipertexto, designando a narrativa com alto grau de interconexão à informação. O
autor delimita a hipermídia “como uma coletânea de mensagens elásticas que pode ser
esticadas ou encolhidas de acordo com as ações do leitor. As idéias nela contida podem
ser abertas e analisadas com múltiplos níveis de detalhamento”.

Pierre Lévy (1993, p. 25) propõe seis princípios abstratos para caracterizar as
possibilidades de múltiplas interpretações do modelo de hipertexto, que podem ser
repensados também para a hipermídia:

 Princípio da metamorfose: se refere a constante construção e renegociação a que o

hipertexto está sujeito.

 Princípio de heterogeneidade: se refere à integração entre múltiplos conteúdos dos

nós (hiperdocumentos ou conjunto deles) e suas conexões.

 Princípio de multiplicidade e de encaixe das escalas: se refere à estrutura hipertextual

em “fractal”, e à sua possibilidade de organização em redes múltiplas conexas, assim
como ao reflexo destas conexões em suas várias escalas.

 Princípio de exterioridade: se refere à relação da rede com o ‘exterior indeterminado’

que influencia sua escala, composição, ordenação e reestruturação.

 Princípio de topologia: se refere à morfologia da rede hipertextual e sua relação com

o espaço a que se integra compositivamente.

 Princípio de mobilidade dos centros: se refere à não centralidade, ou

multicentralidade rizomática, que depende de um ponto como referencial para
reorganização de centros.

Moura (2003, p. 143, 149) define hipermídia como um campo onde se estabelecem
inter-relações entre elementos resultantes de diversas linguagens13, constituída de um

12
O autor utiliza os termos ‘hipertexto, hipermídia ou multimídia interativo’, mas visando um recorte
focado no objeto deste estudo, preferiu-se enfatizar a hipermídia.

42
conjunto que compreende o hipertexto e componentes diversos como imagens estáticas e
dinâmicas, sons (músicas, trilhas, ruídos, sinais de advertência), animações e filmes
associados a partir da ligação entre nós ou nódulos, ou ainda links e outras linguagens
associativas. A autora enfatiza a relação de ‘nova linguagem’ estabelecida pela
hipermídia apoiando-se em seus princípios e características.

No processo de caracterização sobre o design de hipermídia, a autora delimita, ainda, o

escopo destes princípios e características que colaboram no esclarecimento sobre a
constituição geral desta mídia. Nesta explanação os princípios seriam “a origem, a causa,
a fonte geradora e o elemento predominante na constituição da linguagem do design de
hipermídia” Moura (2003, p.172), como mostrado a seguir:

 Princípio da multiplicidade – diz respeito à variedade, complexidade e multiplicidade

intrínsecas à hipermídia, relativas à sua estrutura compositiva (forma de constituição,
interface construída e possibilidades permitidas por esta interface).

 Princípio do processamento e síntese – diz respeito à possibilidade de manipulação

dos elementos (fundamentalmente imagens, sons e textos) no projeto de hipermídia,
especificamente, na composição de sua interface, na passagem de ‘algo’ (uma
imagem, por exemplo) à interface.

 Princípio da metamorfose – diz respeito às possibilidades de transformações dos

elementos existentes uma interface. Pode ocorrer no momento do projeto, por
determinação do autor, ou em sua utilização, por interferências do interator. Ambos
os indivíduos podem metamorfosear os elementos de um projeto, sejam eles sons,
imagens, formas textos, caracteres, estáticos ou dinâmicos. Este princípio resulta da
somatória entre os princípios de processamento e síntese e de multiplicidade.

 Princípio da potencialidade – diz respeito às possibilidades em potencial disponíveis

na hipermídia. Tal potencialidade é relativa aos elementos existentes, relações,
morfologia e estrutura, que combinadas formam uma ampla gama de possibilidades
para a realização de atividades diversas.

 Princípio da complexidade – diz respeito ao conjunto de elementos, condições e

relações, estabelecidas em diferentes aspectos, existentes na estruturação e
constituição da hipermídia. Tal princípio remete também à simultaneidade e sincronia
existente em sua constituição e utilização.

13
Complementa-se a esta explicação a definição de linguagem trazida por Moura (2003, p. 168), “como um
conjunto de elementos ou características que constituem um vocabulário, uma gramática ou uma sintaxe
de uma forma de criação e expressão e de comunicação e informação”.

43
 Princípio da conectividade – diz respeito ao estabelecimento de múltiplas relações,
acessos e vínculos encontrados na estrutura hipertextual rizomática do ciberespaço.

 Princípio da heterogeneidade – diz respeito à distinção compositiva existente no

ciberespaço, seja de elementos, assuntos, ações etc. Estas distinções são refletidas na
hipermídia, fazendo vínculo com suas questões essenciais de diferenças e
singularidades.

 Princípio da linha de fuga e da mobilidade – diz respeito à possibilidade de criação de

linha de fuga e movimentação no ciberespaço de maneira descentralizada. Este
princípio se refere diretamente a estruturas diversas e possibilidades de percursos de
navegação contínuos e não-lineares em uma hipermídia.

 Princípio da cartografia e da topologia – diz respeito à composição de mapas,

verificação de proximidades e transformação das configurações de conexões. Este
princípio relaciona-se com as rotas de acesso possíveis na interação realizada em uma
hipermídia.

Estes princípios são importantes para o entendimento sobre a composição das

hipermídias em seu aspecto processual e também estrutural, uma vez que ambos estão
relacionados com as características intrínsecas ao tipo de mídia em estudo. A seguir
apresentam-se características do design de hipermídias, que também podem colaborar no
esclarecimento sobre a constituição geral da hipermídia (MOURA, 2003).

 Hibridismo – trata da possibilidade de fusão de linguagens e possibilidades midiáticas

criando re-significação de seus valores e possibilidades originais.

 Hipertextualidade – trata da utilização de estrutura hipertextual e características

associadas na hipermídia para a acomodação de hiperdocumentos.

 Não-linearidade – trata da configuração de caminhos e segmentos abertos,

diversificados para a navegação individualizada e particular do interator.

 Interatividade – trata da ação mútua exercida entre a hipermídia e o interator,

estabelecendo reciprocidade no cumprimento de uma atividade.

 Navegabilidade – trata especificamente do ato de navegar e explorar o ciberespaço

por meio da hipermídia, estabelecendo vínculos entre o mundo físico e o virtual.

É importante salientar que os princípios e características apresentadas são em sua

maioria parâmetros que variam em intensidade e potencialidade, existindo em maior ou
menor quantidade, de acordo com a proposição de projeto de hipermídia tratado. No

44
desenvolvimento de projetos diversos de hipermídias, é importante uma leitura mais
cuidadosa de tais princípios buscando-se o bom-senso e a flexibilidade de sua
compreensão e consecutiva utilização.

Toma-se como exemplo a característica de não-linearidade: a indicação de

possibilidade não pode ser totalitária, sobrepondo ou negando que um sistema que
agregue todas as demais características não seja considerado uma hipermídia, mesmo que
imponha certa linearidade, devido a um suposto objetivo. Deve-se apenas tratar tal
projeto como detentor de determinadas particularidades. Já a interatividade também
possibilita certa discussão: segundo Alex Primo (2007), a interação não pode ser vista
como característica de uma mídia por sua simples potencialidade, pois esta
potencialidade pode não ser total ou parcialmente utilizada.

Em processo de utilização, de interação, tem-se a complexidade da hipermídia, com

sua estrutura que possibilita a existência de muitas informações associadas, em processo
de constante atualização e alimentação de conteúdo que estruturam interfaces e suas
possibilidades de interação (MOURA, 2003), aliada a um volume crescente de informação
produzida e disponibilizada na rede.

O cenário obtido pela aliança entre complexidade projetiva e volume informacional

remete à necessidade do estudo de como se dará a interação entre interator (usuário) e
interface da forma mais adequada para que haja uma comunicação efetiva que possibilite
a transformação da informação em conhecimento ou simplesmente para que uma dada
informação cumpra seu papel junto ao usuário.

Em resumo, os princípios, características e definições apresentadas delimitam a

hipermídia como detentora de uma série de características, como grande interatividade,
fluxo contínuo de informação, convergência midiática, ligações hipertextuais,
alimentação constante de conteúdo e adaptação continuada de tecnologia, que
amplificam a complexidade projetiva de sua interface. Sua concepção pode ser
beneficiada se condicionada ao design da informação.

Lévy (1993) acredita que o desenvolvimento do hipertexto, e da multimídia interativa,

que neste trabalho chama-se de hipermídia, deve acontecer pela reinvenção de novas
estruturas discursivas, pelo descobrimento de novas retóricas, associando os elementos da
interface em busca de significados que reflitam os anseios dos interatores.

45
 2.2.2. Interatividade em hipermídias

O design da informação confere estrutura e organização aos elementos encontrados na

interface, e indica os caminhos de navegação. Contudo, a interatividade14 é uma
necessidade fundamental para a existência da interface de uma hipermídia. Não adianta
apenas existir uma interface se ela não é utilizada pelos indivíduos (MOURA, 2003).

Interação, segundo Primo (2007, p. 48, 40), é entendida como ‘ação entre’ os
participantes de um encontro (inter+ação). “Uma ‘interatividade’ plena acontece quando
uma resposta em uma seqüência depende das transações anteriores e do conteúdo
intercambiado”. O autor entende a ‘interatividade’ como uma variável processual, e não
uma característica do meio, e diferencia interação e comunicação indicando que o
primeiro é ‘ação entre’ e o segundo ‘ação compartilhada’, alertando que “nem todo
sistema informático entendido como bidirecional permite a construção de um dialogo”.
Laurel (apud LEMOS, 2004, p. 111) assume uma posição correlata ao dizer que a
interação é, além de um modo de conversação e conexão, um contexto em que as partes
são atuantes engajadas em ações.

Para Lemos (2004, p. 115, 112), a interatividade é baseada numa ordem mental,
simbólica e imaginária que estrutura a relação entre o homem e o mundo. O imaginário
alimenta a relação do homem com a técnica, impregnando a forma de concepção das
interfaces e da interatividade (por isso utilizam-se metáforas como forma de interface).
Ainda segundo o autor,
a noção de interatividade está diretamente ligada aos novos media digitais. O que
compreendemos hoje por interatividade nada mais é que uma nova forma de
interação técnica, de cunho eletrônico-digital, diferente da interação analógica que
caracterizou os media tradicionais.

“O termo interatividade em geral ressalta a participação ativa do beneficiário de uma

transação de informação. De fato, seria trivial mostrar que um receptor de informação, a
menos que esteja morto, nunca é passível”. Interação remete também à possibilidade de
interromper uma seqüência de informações e de reorientar com precisão o fluxo
informacional em tempo real (LÉVY, 1999, p. 79). “Estudar a interação humana é
reconhecer os integrantes como seres vivos pensantes e criativos na relação.” (PRIMO,
2007, p. 72)
Interatividade refere-se ao caráter aberto dos sistemas que os usuários podem
acessar, estabelecer relação e interferir nos documentos, registrando suas opiniões,

14
O termo interatividade será utilizado neste trabalho para se referir à capacidade ou potencialidade de
interação enquanto o termo interação remeterá a ação mútua entre partes.

46
 e até transformando as informações, dando vida ao processo de construção do
conhecimento. (MOURA, 2003, p. 256)

Bairon (1995, p. 16, apud PRIMO, 2007, p. 45) diz de forma bastante simples e
abrangente que é interativo todo sistema de computação onde se manifesta um diálogo
entre usuário e máquina. No entanto, é necessária atenção nesta argumentação, pois a
utilização da palavra diálogo pode acontecer no sentido de simplificar a descrição do
funcionamento da máquina, mas se for usada literalmente, negligencia uma série de
características complexas do diálogo da conversação humana, que não é uma relação
automática nem previsível, e sendo assim, estaria um tanto equivocada a comparação
direta quando no contexto científico em que é esperada uma precisão conceitual (PRIMO,
2007).

Preece et al (2005, p. xi) delimitam o ‘design de interação’ como uma ‘área da ciência’,
o que talvez seja precipitado por necessitar de estudos mais aprofundados que justifiquem
tal proposição. Porém, os autores se referem a tal atividade com o objetivo do “design de
produtos interativos que fornecem suporte às atividades das pessoas, seja no lar ou no
trabalho”. Sua principal função é, segundo os autores, o desenvolvimento de produtos
utilizáveis, o que significa facilidade de aprender, eficiência em seu uso, e capacidade de
proporcionar experiências agradáveis ao usuário. Esta afirmação parece muito familiar à
definição de usabilidade, mas deixa de lado alguns aspectos importantes sobre as partes
agentes do processo (e.g.: a natureza do conteúdo e suas demandas específicas).

Jensen (1999, p. 18-19, apud PRIMO, 2007, p. 33) define interatividade como “a
medida da habilidade potencial da mídia em permitir que o usuário exerça uma
influência no conteúdo e/ou na forma de comunicação mediada”. O autor ainda segmenta
esta interatividade em diferentes subconceitos ou dimensões, com base em padrões
definidos por Bordewijk e Kaan:

 Interatividade de transmissão – medida do potencial do meio em permitir que o

usuário escolha qual fluxo de informação quer receber em determinada gama de
possibilidades de mão única, sem a possibilidade de solicitações específicas;

 Interatividade de consulta – medida do potencial do meio em permitir que o usuário

solicite informação em um sistema de mão dupla com canal de retorno;

 Interatividade de conversação – medida do potencial da mídia em permitir que um

usuário produza e envie informações em um sistema de duas mãos;

 Interatividade de registro – medida do potencial do sistema em registrar informações

do usuário, podendo responder suas necessidades e ações.

47
 Esta definição, como observa Primo (2007), privilegia a análise da transmissão e do
fluxo da informação, e não da relação entre as partes integrantes da interação, tampouco
de sua evolução e desencadeamento.

Lévy (1999, p. 82) faz uma breve reflexão sobre graus de interatividade de uma mídia
ou dispositivo de comunicação e destaca diferentes eixos de medição:

 as possibilidades de apropriação e personalização da mensagem recebida, seja qual for

a natureza da mensagem,

 a reciprocidade da comunicação (a saber, um dispositivo comunicacional ‘um-um’ ou

‘todos-todos’),

 a virtualidade, que enfatiza o cálculo da mensagem em tempo real em função de um

modelo e de dados de entrada,

 a implicação da imagem dos participantes nas mensagens,

 a telepresença.

Moura (2003, p. 256) indica que a interação pode ocorrer em diferentes graus, desde o
mais simples acesso até a imersão. Após alertar que esta divisão pode ser efêmera e
cambiável, de acordo com os avanços tecnológicos e desenvolvimentos motivados por
tais avanços, a autora agrupa a interação em sete graus:

 O primeiro grau de interação é estabelecido por estímulos e reações em uma estrutura

hipertextual. Acontece por conexões entre os links, janelas e a possibilidades de
navegação, sistemas de busca e jogos simples.

 O segundo grau de interação tem relação com o processo de envolvimento do

interator na realidade tratada ou abordada no projeto. Este envolvimento está
relacionado com as possibilidades de ambientação metafórica nos limites da tela do
browser, especialmente por meio da interface e do som.

 O terceiro grau de interação está relacionado com o processo de ação e reação do

interator com a interface, seja na manipulação elementos ou no controle de canais de
envio e recebimento de informação.

 O quarto grau de interação acontece quando o interator exerce uma atividade on-line,
seja de troca direta de informações (e.g.: fóruns, chats etc.), de acesso a
hiperdocumentos (e.g.: banco de dados) ou ainda acesso a aplicativos, estando todas
estas atividades presentes na rede (Internet).

48
 O quinto grau de interação está relacionado com a possibilidade da ação de
interferência e seu consecutivo registro e arquivamento. O interator neste caso é
responsável por alterar características existentes no momento da interação.

 O sexto grau de interação está relacionado com a interação de pessoas com sistemas
autônomos, dotados de características adaptativas, que atuam de acordo com as ações
do usuário. Tais sistemas são sistemas artificiais que têm maior capacidade de lidar
com situações de interação complexa, respondendo a estímulos aleatórios de forma a
simular modelos perceptivos oriundos das ciências cognitivas. Para isso, são
utilizados princípios de inteligência artificial.

 O sétimo grau de interação ocorre com sistemas de realidade virtual (ou realidade
aumentada), em que o usuário, auxiliado por ferramentas e equipamentos acoplados
em seu corpo, recebe estímulos que ampliam sua percepção sobre a vivência de uma
“outra realidade”.

Baseado na observação sobre as distinções referentes às relações mantidas entre os

integrantes no processo de interação, no que ocorre entre tais integrantes, Primo (2007)
classifica a interação mediada por computador em dois tipos:

 Interação mútua – caracterizada por relações interdependentes e processos de

negociação momentâneos, em que cada integrante participa da construção inventiva e
cooperada, afetando-se mutuamente de forma imprevisível (e.g.: comunicação por e-
mails e bate-papo por chat). Neste tipo de interação acontecem construções dinâmicas
em constante atualização, contínuas e contextualizadas, que se refletem em
relacionamentos distintos, mesmo que haja estímulos equivalentes em momentos
distintos, pois além dos estímulos, os contextos social e temporal também têm
influência na interação.

As interações mútuas se caracterizam pela interconexão dos subsistemas envolvidos

no processo. Nelas, os contextos sociais e temporais conferem às relações construídas
uma contínua transformação. Assim sendo, uma interação mútua não pode se dar
como soma de ações individuais isoladas, pois as ações são interdependentes entre si,
o que implica em influências mútuas e valorização do contexto global da interação.
Destaca-se aí o caráter recursivo das interações mútuas, em que as interações se
colocam sobre as reações, movendo e transformando o relacionamento e as partes
envolvidas. Este tipo de interação acontece pela coordenação recíproca ou
casualidade mútua. Ela se opõe a uma cadeia linear, característica da interação

49
 reativa – onde uma determinada ação causa necessariamente uma reação, ou
conjunto de reações, também determinada.

 Interação reativa – caracterizada pela limitação determinística de estímulo e resposta,

como um disparar de potenciais que condicionam as trocas. Este tipo de interação
depende da previsibilidade e da automação nas trocas. Variáveis e condições análogas
sempre incidem em resultados equivalentes (e.g.: clique em um link e jogo de
videogame).

Este tipo de interação depende de um código pré-estabelecido que faça a interface

funcionar, baseado em pré-definições determinadas antes da interação ocorrer. Se
houver alguma falha neste código, a interface apresentará sempre o mesmo problema
quando a situação de interação ocorrer, a não ser que o código seja redefinido para
solução de tal ‘conflito’. Na interação mútua, este ‘conflito’ não pode ser apagado ou
retirado; pelo contrário, ele se agrega à interação gerando novos eventos
comunicativos. Mesmo que se resignifique a motivação de tal conflito (seja uma
palavra mal entendida ou ação equivocada), não se apagará tal interação, tendo em
vista a progressão temporal do processo.

O autor observa que os tipos propostos de interação possuem características que os

distinguem, porém em ambos podem-se observar diferentes intensidades particulares, e
por isso eles não podem ser ditos totalmente homogêneos em sua essência. Outra questão
levantada é que se pode pensar em ‘multi-interações’, ou seja, em interações mútuas e
reativas coexistindo (e.g.: uma interação em um chat, duas pessoas interagem entre si,
porém, interagem também com a interface gráfica e um programa).

Uma relação interessante que aponta para uma transdiciplinaridade nestas distinções
entre interações mútuas e reativas mostradas por Primo possibilita visualizar certa
semelhança com padrões terminológicos ergonômicos. Na área da ergonomia, distingue-
se uma tarefa de uma atividade, pois a tarefa é a ação prescrita em determinado contexto
de execução, já a atividade é o cumprimento da tarefa de acordo com estratégias,
necessidades e competências do indivíduo, que não necessariamente obedece aos padrões
pré-definidos na tarefa. Neste aspecto, a interação mútua se aproximaria da atividade,
enquanto a interação reativa da tarefa.

Moura (2003, p. 259) estabelece que os “elementos de interação” constituem um

grande conjunto formado por links e hiperlinks, que também são muitas vezes elementos
de navegação, e estão sempre presentes na interface de uma hipermídia. Tais elementos,
segundo a autora, são:

50
 links e hiperlinks internos e externos que dão acesso a informações diversas. Ocorrem
por meio de hotlinks, hotwords, pop-us e botões;

 barras e menus de navegação que podem ser móveis, portáteis, dinâmicos ou

estáticos;

 jogos de diversos tipos de complexidade;

 manipulação direta dos elementos da interface;

 acesso a banco de dados;

 canais de troca de mensagens em tempo real ou não, como chats, listas de discussão,
e-mails, fóruns, cadernos de registro;

 possibilidade de alteração no conteúdo de interfaces;

A autora observa que estes elementos fundamentais ressaltam o caráter móvel e

participativo do design de hipermídia sem regras definidas, sem dimensão física, aberta à
manipulação da forma não-linear, que combina tempos e culturas diversas, em vários
formatos e possibilidades de expressão, permitindo partilha e personalização.

2.2.3. Elementos das interfaces de hipermídias

As histórias da hipermídia, da interface gráfica e da interação estão fortemente

associadas devido à comutação de seus elementos constituintes (BUGAY & ULBRICHT,
2000). O design da informação15 trata, dentre outros aspectos, destes elementos que
constituem as interfaces de hipermídias passíveis de tratamento e manipulação, seja em
sua criação, pelo projetista, seja pelo interator, em sua utilização. Por esta razão, torna-se
importante o conhecimento geral sobre tais elementos bem como sobre suas naturezas.

Um projeto gráfico16 de um produto digital envolve mais elementos que seu

equivalente em mídia impressa (RADFAHRER, 2003). As interfaces digitais são
constituídas por elementos textuais, gráficos, sonoros, estáticos e dinâmicos, relacionados
entre si e com o seu conteúdo informacional. Estas interfaces são compreendidas como
instrumentos metafóricos de realidades com a qual o usuário está familiarizado. Porém,
estes elementos não “representam” uma realidade e sim “constituem” uma realidade

15
Refere-se ao design da informação aplicado à interface de hipermídia, mas compreende-se que ele tenha
uma amplitude maior de atuação, tratando outras mídias que não são objeto deste estudo.
16
Respeita-se a nomenclatura “projeto gráfico” utilizada por Radfahrer (2003). Compreende-se, todavia, que
é mais indicada, por sua abrangência, a utilização da nomenclatura “projeto visual e interativo” ou “design
digital”.

51
própria, na medida em que este usuário vivencia um espaço de ação (BONSIEPE, 1997, p.
41).

O apelo à memória espacial é característica fundamental da interface gráfica

contemporânea, pois vincula elementos diversos, conferindo coordenadas espaciais aos
arquivos digitais (JOHNSON, 2001). No caso da utilização de metáforas, a interface se
constitui por elementos referenciados para criar pontos de localização, como um ícone
em formato de folha de papel que remete a um arquivo ou mesmo à área de trabalho de
um sistema operacional (desktop) que remete a uma mesa de trabalho com alguns
elementos espacialmente posicionados.

Os elementos da interface são constituídos por componentes de ligação (ou conexão),

além de componentes imagéticos, sonoros e textuais. Os componentes de ligação são
chamados de nós, links, hiperlinks e pontos de conexão e necessitam de algum elemento
como textos, ícones e botões para mediar seu acesso. Os links também podem se
estabelecer em áreas sensíveis ou levarem a quadros e janelas. (MOURA, 2003)

Johnson (2001, p. 83) considera o link como uma grande ‘descoberta’ dos últimos
tempos, em sua função e potencialidade, definindo-o como “uma maneira de traçar
conexões entre coisas, uma maneira de forjar relações semânticas” e propõe seu
entendimento como um recurso sintético, uma ferramenta que une múltiplos elementos
em um mesmo tipo de unidade ordenada.

Assim sendo, considera-se para efeito de estudo o link, em sua essência, como um
componente processual existente na interface, porém, representado por algum elemento
passível de manipulação. Vale lembrar que o link agrega-se ao nível de ‘Ligações e
Representações Abstratas – LRA’, conforme decomposição da hipermídia efetuado no
tópico anterior. Outra importante consideração relacionada à decomposição de sistemas
hipermídia ora efetuada é que os elementos que compõem suas interfaces passíveis de
manipulação têm maior relação com a camada estrutural, considerando que a camada
processual torna-se de certa forma intangível e necessita ser representada ou mediada.
Independente desta característica, é uma camada fundamental e responsável pela
imposição de inúmeras condições ao design de uma interface.

Para Moura (2003, p. 220), os elementos visuais (e de informação) remetem não

“somente às questões visuais, mas também às questões textuais e sonoras”, sendo
“representações figuradas, diagramáticas, ou icônicas das opções e das estruturas de
informação e de comando”. Entre tais elementos encontram-se tipografia, ícones, botões,
pictogramas, esquemas de cores, menus, gráficos, imagens e janelas.

52
 Dentre tais elementos, as janelas17 merecem destaque por sua variação de utilização.
Elas podem atuar como subdivisão independente na interface, sendo de tamanhos
variados e potencialmente escalonáveis, arrastáveis e com conteúdo variável, mas
geralmente com relativa unicidade com a interface que lhes dá acesso. Ora são utilizadas
como anteparo principal da interface, hierarquicamente primária, ora são elementos
complementares de uma estrutura, relacionando-se com outros componentes com certa
igualdade hierárquica. Em outras palavras, as janelas figuram como um elemento
cambiante, sendo utilizadas em determinados projetos como anteparo ou suporte ao
conteúdo informacional, e noutros, como elemento informacional.

À luz da bibliografia apresentada até o momento, foram delimitados três grupos ou

classes de elementos18 associados entre si que integram os principais componentes
manipuláveis de interfaces de hipermídias: imagéticos, textuais e sonoros. A seguir
apresenta-se um apanhado global destes elementos, divididos em três classes:

 Elementos imagéticos – compostos por imagens estáticas como fotografias,

ilustrações, pinturas, desenhos, ícones19, pictogramas, padrões formais e cromáticos,
formas geométricas, diagramas e gráficos; imagens em movimento20, como vídeos e
animações bi e tridimensionais; e ainda mesclas entre estes componentes.

Estes elementos podem atuar como referencial estético, tema figurativo ou adorno,
indicando informações primárias ou complementares, além de possibilitarem as

17
Negroponte (1995, p.109) diz que “as janelas existem porque as telas dos computadores são pequenas. O
resultado disso é que um espaço de trabalho relativamente pequeno pode ser utilizado para manter
diferentes processos a um só tempo”. Estas janelas são elementos portáteis e fluídos que podem ser
arrastados pela interface e seu tamanho pode ser alterado com um clique do mouse, sendo projetadas para
serem maleáveis e mutáveis. Uma ‘janela’ em uma interface computacional exibe uma espécie de
semelhança superficial com uma janela do mundo material, e são as devidas distinções que garantem o
sucesso desta metáfora (JOHNSON, 2001).
18
Em acordo com o objetivo deste projeto, relacionam-se os elementos expressivo-formais passíveis de
tratamento e manipulação que são foco do design da informação, mas reconhece-se que alguns autores
aferem a terminologia ‘elemento’ para designar componentes integrais, como ‘mapas de localização’, que
são constituídos por algumas partes dissociáveis, assim como fatores relacionados aos processos como a
interação, que aqui encontra-se dissociada das possibilidades de manipulação por parte do design da
informação, considerando-a algo posterior à constituição da interface (trata-se da condição de uso e não
objeto a ser trabalhado).
19
Os ícones nasceram de um sistema de acesso a programas e dados, o SDMS – Spatial Data Management
System ou Sistema Espacial de Gerenciamento de Dados, que utilizava pequenas imagens figurativas com
referencia metafóricas de links (acesso a dados ou funções). Por exemplo, se fosse escolhida a imagem de
um telefone o SDMS acionaria um programa de discagem automática associado a dados pessoais.
(NEGROPONTE, 1995)
20
A animação simplifica informações complexas, facilitando sua compreensão por seqüências de imagens.
(BUGAY & ULBRICHT, 2000)

53
 configurações formais de componentes de ligação, se apresentando na forma de
botões21 ou menus.

Além destes elementos, consideram-se como elementos imagéticos os componentes

oriundos da utilização de caracteres sem um sentido textual, quando estes não
compõem uma palavra ou termo. Neste caso, os caracteres são utilizados como
elementos compositivos que formalizam grafismos figurativos ou abstratos.

 Elementos textuais – compostos por textos estáticos ou em movimentos, em bloco,

frases, palavras, títulos e subtítulos. Também podem atuar como configurações
formais de componentes de ligação, geralmente apresentando na forma palavras
destacadas por cor, peso do caractere ou com linhas de grifo (também chamadas
hotwords). Estes elementos também podem ser associados aos elementos imagéticos
formando botões rotulados e menus, estáticos ou ‘animados’ com efeitos visuais e/ou
sonoros diversos.

 Elementos sonoros – compostos por sons de ambientação, locução, ruídos, trilhas.

Estes elementos estão freqüentemente associados com elementos imagéticos e/ou
textuais, assumindo funções diversas. O som possibilita o realce de áreas (por meio de
ruídos ou trilhas) e a emissão de informações (por meio de locuções e reproduções
sonoras). Quando utilizado para ambientação propicia maior integração entre
interator e interface gráfica conforme Bugay & Ulbricht (2000, p. 43), que afirmam
que “o som transforma o computador em uma ferramenta mais adaptável ao usuário,
proporcionando satisfação e aumentando sua criatividade, resultando em maior
produtividade”.

Pesquisas realizadas no Media Lab orientadas por Russ Neuman afirmam a relação
entre imagem e som como experiência sensorial múltipla (NEGROPONTE, 1995). Após
observação de usuários na tarefa de visualização de imagens idênticas relacionadas a
sons de diferentes qualidades, verificou-se que o som aumenta consistentemente a
experiência visual, a ponto dos usuários afirmarem que a imagem relacionada com o
som de maior qualidade teria melhor qualidade que à relacionada com som de pior
qualidade auditiva.

Conforme já dito em outros momentos deste trabalho, esta sistematização proposta

deve ser interpretada com atenção, considerando-se sempre o bom senso e a flexibilidade

21
Um botão é um lugar na interface onde é possível acessar um nó (LÉVY, 1993, p. 37). As interfaces
gráficas utilizam formas diversas como botão. Eles podem apresentar-se em forma metafórica de botões
convencionais de máquinas, em formas abstratas ou ainda como parte compositiva de uma imagem, entre
outras possibilidades.

54
necessária a cada projeto, a cada interface. É possível maior aprofundamento ou
detalhamento e uma classificação diferente da apresentada, porém, em vista de colaborar
na tarefa do design da informação em interfaces de hipermídia, tal sistematização se faz
contributiva, possibilitando o conhecimento e o entendimento sobre a constituição das
interfaces almejadas.

2.3. O design da informação no projeto de hipermídias

Antes da abordagem teórica, faz-se necessária uma consideração sobre a nomenclatura

“design da informação”, que será amplamente utilizada no decorrer do texto. Com apoio
na argumentação de Bonsiepe (1997), de que a arquitetura tem sua relação significativa
com a articulação do espaço, e o design, no âmbito visual, tem sua relação com a
estruturação de informações e interpretação de mensagens, podemos deduzir que a
utilização da nomenclatura arquitetura de informação, amplamente empregada para
designar a área de conhecimento responsável pelo tratamento estrutural da informação,
de certa forma pode ser insuficiente quando relacionada ao projeto de hipermídia,
principalmente porque a simples ordenação de conteúdo não garante a sua compreensão.

Rosenfeld (2002, p. 19) utiliza o termo arquitetura em sua teoria a respeito do tema,
mas o sentido empregado por ele abrange muito mais que a articulação de espaço, pois
emprega conceitos relacionados ao design, como mostrado nos apontamentos a seguir22:

 A combinação entre organização, rotulação e navegação esquemática dentro de um

sistema de informação.

 O projeto estrutural de um espaço informacional visando facilitar a conclusão da

tarefa de acesso ao conteúdo de forma intuitiva.

 A arte e ciência de estruturação e classificação de Websites e intranets de forma a

ajudar as pessoas a encontrar e gerenciar informações.

 Uma disciplina e uma comunidade emergentes da prática focada em princípios de

design e arquitetura para o cenário digital.

Após a colocação de suas definições, o autor ainda alerta que as definições são
amplas, o que, por inferência, permite uma consideração menos rígida ou conclusiva.

A necessidade de transpor a estruturação e aglutinação da informação, visando o

entendimento conceitual entre elementos, seus significados e relações, torna mais
pertinente a este trabalho o uso da nomenclatura “design da informação”, que contempla

22
Tradução nossa.

55
não somente as questões relativas à organização dos dados e de suas rotas de acesso,
tarefa marcante na arquitetura, mas também as relações entre conteúdo, comunicação
visual e linguagem. No contexto corrente, o design da informação circunscreve a
arquitetura de informação no papel de tratamento da informação, pois contempla a
atividade projetiva com maior abrangência e detalhamento, propiciando proximidade em
determinadas etapas e requisitos da elaboração de interface e tornando-a mais adequada
e eficaz.

O design da informação pode ir além da interpretação ou modificação visual e é

processualmente anterior à simples estruturação de conteúdo. Além de tradutor de
informações, ele tem uma função autoral (BONSIEPE, 1997), pois faz a transposição
expressivo-formal das informações e de suas relações.

Segundo Horn (1999, p.15) 23, o design da informação é definido como a arte e a
ciência de preparação da informação, possibilitando seu uso pelo homem de maneira
eficiente e efetiva, sendo seus principais objetivos:

 Desenvolver documentos compreensíveis, de recuperação fácil e ágil, e capazes de

serem traduzidos em ações efetivas;

 Projetar interações com equipamentos de forma fácil, natural e o mais agradável

possível. Isso implica na resolução de problemas no design de interface homem-
computador;

 Possibilitar que as pessoas encontrem seus caminhos em espaços tridimensionais com

facilidade e conforto, seja no plano material ou virtual.

O design da informação trata o conteúdo de sistemas complexos de informação no

intuito de selecionar e estruturar a organização das informações. Ele é responsável por
delinear a forma na qual o usuário encontra as informações, realiza sua leitura,
estabelece a relação entre seus elementos, interage com a interface e compreende esta
experiência. Em alguns casos onde o trabalho de interação é mais elaborado, a
experiência da navegação pode remeter a relações de sinestesia ou imersão em ambientes
hipermidiáticos. Essas relações podem ser estabelecidas por fundamentos de linguagens e
hardwares que maximizam a utilização das mídias.

Diante desses apontamentos pode-se caracterizar o design da informação para

interfaces de hipermídias com maior amplitude que um projeto de estrutura e acesso.
Nesta relação, a nomenclatura está ligada não somente a rotas de entrada, saída e

23
Tradução nossa.

56
aglutinação de dados, mas sim ao tratamento e transformação do conteúdo em
informações assimiláveis e compreensíveis, possibilitando sua posterior transformação em
conhecimento e experiência.

Os elementos que compõem as interfaces de um dado artefato hipermidiático devem

ser tratados como agentes facilitadores na assimilação e na compreensão da informação,
e também como colaboradores no processo de aprendizado. A estrutura de uma interface
deve passar despercebida ao usuário, para que só o conteúdo apareça (NEGROPONTE,
1995; RADFAHRER, 2003).

57
3. O DESIGN DA INFORMAÇÃO EM INTERFACES DE HIPERMÍDIAS

Como visto, as características das hipermídias relativas a estruturação hipertextual,

apresentação e acesso a conteúdo, diversidade de possibilidades de navegação e
interação, são fatores que aumentam consideravelmente a importância do design da
informação em sua concepção. Isto se dá uma vez que a quantidade de informação está
associada às várias possibilidades de mídias, linguagens (imagéticas, textuais e sonoras) e
relações entre seus elementos compositivos, além das condições inerentes ao processo de
interação entre o indivíduo e a interface e entre o sistema interativo e a rede.
Conseqüentemente, esta complexidade reflete-se na sobrecarga cognitivo-informacional à
qual o usuário é submetido, aumentando a necessidade de atenção no projeto da interface
e de seu conteúdo, visando à facilitação do acesso às informações e assimilação de suas
características conceituais.

Como já afirmado, o design da informação “enfoca a tarefa da comunicação na

perspectiva de organizar a informação” e está relacionado com a estruturação, a
organização e a acessibilidade das informações. Ele colabora no reconhecimento e na
compreensão de fatos e conceitos pela seleção, arranjo, hierarquização e combinação de
distinções visuais. Visando a facilitação de ações efetivas, o design da informação abre
novas possibilidades para os usuários, e sendo consistentes, facilita o aprendizado de uso
da interface e de seu conteúdo (BONSIEPE, 1997, p. 146).

De acordo com a bibliografia estudada, propõe-se a seguir a fixação de quatro pontos

processuais, encontrados no projeto de hipermídia, relacionados especificamente ao
design da informação, que possibilitam sua caracterização, visando conseqüentemente
responder à pergunta de pesquisa motivadora deste estudo. Para a proposição, pensa-se
inicialmente em um dado conteúdo informacional a ser tratado para sua utilização em
forma de interface de hipermídia. Este conteúdo carece inicialmente de um agrupamento
para uma segmentação da informação que facilite sua assimilação por parte do usuário.
Seqüente a este agrupamento faz-se a racionalização de uma estrutura de acesso que
possibilite uma navegação baseada nas relações dos elementos informacionais, além de
possibilitar a comunicação entre os envolvidos no projeto (ainda no âmbito da
idealização do projeto). Após agrupamento e estruturação da informação, torna-se
possível a organização informacional de cada interface que compõe a hipermídia,
utilizando-se parâmetros que sistematizem tal processo. Por fim, tem-se a idealização de
navegação do conteúdo informacional já relacionado e segmentado em uma estrutura no
anteparo (interface). Então, torna-se possível a composição visual que proporcione à

58
informação, sua adequada expressividade, visando à assimilação expressivo-visual e
interativa do conteúdo da interface da hipermídia por parte do interator.

Esta estrutura processual proposta busca uma seqüencialidade lógica e serve como
uma possibilidade. Porém, o método a ser utilizado por um projetista geralmente obedece
a caminhos particulares derivados por alguma subjetividade imposta pelas condições
individuais de cada demanda e características próprias, além de certas possibilidades
autorais colocadas pelo designer. Isto implica na abertura de possibilidades de inversão
da sistematização proposta, seu rearranjo ou ainda a proposição de novas abordagens
procedimentais que visem seu aprimoramento.

3.1. Aglutinação e estruturação da informação

O design da informação “envolve a organização das informações e o planejamento da

maneira como os usuários as encontrarão, o que caracteriza um projeto de estrutura e
acesso” (MOURA, 2003, p. 252). Assim sendo, o tratamento da informação pode ser
iniciado pelo agrupamento das informações semelhantes e/ou relacionadas, e
consecutivamente, pela configuração de seus acessos, que devem ser concebidos de
acordo com as características do conteúdo informacional e peculiaridades relativas aos
usuários e suas formas de navegação.

Segundo Wurman (1991), as formas de se organizar as informações são finitas e estão

em cinco grupos de possibilidades (Categoria, Tempo, Localização, Alfabeto e Seqüência),
conforme explicado abaixo:

 Categoria: agrupamento de bens diversos, genéricos, geralmente de importância

similar.

 Tempo: agrupamento por localização ou referencial temporal, seja em ordem

cronológica ou periódica.

 Localização: agrupamento por localização, referencial geográfico ou geométrico.

 Alfabeto: agrupamento por ordem alfabética.

 Seqüência: agrupamento relativo à atribuição de peso ou valor de alguma

informação. Tem caráter hierárquico do maior ao menor ou vice-versa.

Moura (2003, p. 253) reúne em três fases a estruturação dos elementos do design da
informação no projeto de hipermídia:

59
 Inventário das informações: levantamento de todos os elementos que serão incluídos
no projeto de hipermídia.

 Organização das informações: agrupamento das informações por critérios de relação

entre elas.

 Formato de estrutura geral: construção de diagrama ou fluxograma indicando a

disposição das informações e suas relações.

Bugay & Ulbricht (2000, 56) apresentam uma abordagem metodológica para o
desenvolvimento global de hipermídias. Apesar de não tratar especificamente do
tratamento da informação, é interessante observar, nessa abordagem, onde se encontra
tal atividade em relação às demais. Observa-se nessa proposta metodológica o foco no
processo e na tecnologia, não na natureza da atividade, tampouco no conteúdo, apesar de
serem pontos abordados. Tanto na definição da equipe quanto no desenvolvimento do
aplicativo pode-se notar que a tarefa de tratamento da informação tem destaque, como
mostrado a seguir:

 definição do aplicativo a ser desenvolvido;

 definição da equipe (multidisciplinar) – especialista no conteúdo, roteirista,

desenvolvedor/programador, designer gráfico, especialista em sons, especialista em
vídeo, pedagogo, consultores complementares;

 desenvolvimento da aplicação – avaliação e validação de conteúdo, definição de

público alvo, definição de conceito metafórico, definição de tecnologia, definições
ergonômicas, elaboração de cronogramas gerais;

 finalização do aplicativo – check-list contemplando validação de conteúdo,

ergonomia, hierarquia de conteúdo, visualidade, navegação e tecnologia.

Em um processo global correlato, também acrescido de etapas metodológicas globais

do projeto para um sistema digital interativo, Radfahrer (2003, p. 124) delimita de forma
mais específica o tratamento da informação, propondo as seguintes etapas:

 Identificação do problema;

 Classificação de suas particularidades;

 Levantamento de dados;

 Definição de estruturas hierárquicas (neste ponto utilizam-se as regras de Richard

Soul Wurman);

60
 Aglutinação de temas relevantes;

 Estudo de navegabilidade e

 Pontos de interatividade.

Podemos observar algumas características projetivas correlatas nestas abordagens.

Wurman (1991) discute exclusivamente o tratamento genérico de informações visando o
seu agrupamento por relacionamento, sem um anteparo específico, se destacando das
demais. Moura (2003) também aborda o tratamento de informações, porém de forma
específica para o desenvolvimento dos projetos de hipermídias. Por inferência, o processo
de tratamento de informação proposto por Wurman (1991) pode colaborar na proposição
de Moura (2003).

Bugay & Ulbricht (2000) e Radfahrer (2003) apresentam dois processos que poderiam
ser aplicados para ao projeto integral de hipermídias, com algumas indicações específicas
relativas ao tratamento das informações. Estas duas abordagens permitem situar
globalmente o design da informação (que os autores tratam com terminologias variadas)
com as diversas e necessidades projetivas. Observa-se que o tratamento do conteúdo
informacional é uma das muitas demandas do projeto.

Pode-se dizer que o processo de agrupamento entre os elementos informacionais das

interfaces e a delimitação de seu acesso é baseado na relação funcional e conceitual
existente entre estes elementos. Neste sentido, podem ser utilizadas ferramentas de gestão
da informação para este procedimento, lembrando-se sempre da relação deste
procedimento com o processo global metodológico.

Uma ferramenta que pode colaborar nesta tarefa de agrupamento é o tesauro24. Ele
permite um domínio técnico e sistemático deste processo, na medida em que colabora na
atividade de relacionar os diversos elementos entre si e com o conteúdo informacional.

Segundo Tristão et al (2004, p. 163),

os sistemas de classificação e os tesauros estão sendo os mais utilizados, tanto em
nível nacional quanto internacional, para a organização do conhecimento, em
todas as áreas, principalmente com os avanços constantes da tecnologia da
informação e comunicação,

24
Segundo Gomes (1990), Laan (2002), Moreira (2003), Tristão et al (2004), pode-se definir o tesauro como
um tipo de sistema de aglutinação hierárquica de termos de uma determinada área de conhecimento,
relacionados entre si por seus valores conceituais (semânticos) e não apenas sintáticos. Ele possui ainda a
finalidade de consulta e recuperação de informação.

61
mais especificamente os relacionados com a Web e as demais redes digitais de troca de
informações no panorama mundial.

Pode-se utilizar como referência metodológica relativa ao tesauro os procedimentos

encontrados na bibliografia citados por Gomes (1990), Laan (2002) e Moreira (2003). Com
as devidas adaptações, pode-se adequar tais procedimentos ao processo de aglutinação e
estruturação da informação para o design da informação em interfaces de hipermídias de
maneira integrada às abordagens metodológicas supracitadas.

Esta abordagem metodológica baseia-se em uma sistematização categorizada,

permitindo melhor entendimento por parte dos envolvidos em sua elaboração, e de certa
forma, impondo a normalização necessária ao seu desenvolvimento. O impacto de tal
procedimento em seu objeto final é uma maior articulação na possibilidade de uso,
refletindo em facilidade na busca das informações e associações entre elementos e,
conseqüentemente, melhor compreensão de seu conteúdo. A abordagem metodológica
aqui proposta tem seus processos divididos em algumas etapas, como descrito abaixo:

 Levantamentos, pré-definições e detalhamentos: o processo de agrupamento de

conteúdos ou informações relacionadas inicia-se pela coleta de todo material a ser
tratado para apresentação na interface. Essa coleta é importante por fornecer o
conhecimento geral sobre o conteúdo e seus conceitos correlatos, possibilitando sua
compreensão para consecutiva hierarquização, agrupamento e vínculo dos elementos
baseado em suas relações.
O detalhamento da informação consiste no aferimento de natureza dos elementos que
constituem o conteúdo a ser tratado, assim como na definição hierárquica presente
em sua leitura. A compreensão da informação, de suas características intrínsecas, de
seu contexto de uso, e do objetivo que deve cumprir tem fundamental importância
para as etapas seguintes do seu processo de tratamento. Um conteúdo bem assimilado
pelo designer tem a capacidade de se refletir em amadurecimento do projeto, pois é a
matéria-prima fundamental ao ser trabalhada. Compreensões deturpadas ou errôneas
podem refletir em soluções equivocadas e passíveis de não cumprimento do objetivo
da interface.

 Estruturação, agrupamento e categorização: após o detalhamento consistente relativo

ao conteúdo a ser tratado, parte-se para a criação de ‘categorias’ com aspectos amplos
das partes do material informacional. Entende-se por categoria o conjunto de
elementos possuidores de aspectos particulares sobre o assunto tratado e que se
identificam por rótulos determinados que caracterizem grupos, que posteriormente se

62
 transformam em classes e subclasses.
Cada categoria pode ser representada por um termo já ‘rotulado’ de acordo com o
melhor conceito que representa tal conteúdo. A tarefa de categorização é baseada em
agrupamento por equivalências. Em termos práticos, a aglutinação das informações se
dá por afinidades e permite uma segmentação em subgrupos, quantos forem
necessários para uma associação entre elementos correlatos.
Todo o processo iniciado com a definição do tipo de conteúdo e consecutiva
categorização pode se basear na experiência de especialistas e na literatura sobre o
conteúdo, porém, a escolha do melhor formato a ser utilizado, assim como o
detalhamento das classes, deve procurar refletir o objetivo da interface e as
características cognitivas do interator, seus objetivos e experiências.

 Apresentação do conteúdo: a apresentação do conteúdo para implementação é muito

importante para o design da interface que fará a interlocução indireta entre núcleo
funcional e interator e entre conteúdo e interface. No contexto de preparação de
conteúdo para sua implementação, pode-se utilizar um sistema textual de casos de
uso, mais comum entre desenvolvedores ligados a Ciência da Computação, e
geralmente empregado em abordagens metodológicas de elaboração de sistemas com
ênfase em seu núcleo funcional e na atividade do usuário (PEERCE et al, 2005), o que
não é interessante a este estudo, que foca o design da informação com ênfase na
interface e no interator.
Para a apresentação do conteúdo, podem ser utilizadas estruturas com esquemas
visuais ou seqüências textuais (em tópicos e sub-tópicos), já contendo o material
informacional a ser implementado em uma interface. Em alguns casos é pertinente
também a utilização de storyboards – uma adaptação de esquemas utilizados na
elaboração de vinhetas e filmes para indicar seqüencialidade. A escolha de uma
dentre estas possibilidades, como em praticamente todo o processo de design da
informação, deve estar baseada na natureza da atividade a ser realizada, em
características intrínsecas ao conteúdo e na natureza da navegação do
usuário/interator.

 Validação: para que se tenha a garantia qualitativa na elaboração de uma estrutura

de organização de informação, deve-se procurar uma validação e adequação (se
necessário), com especialista do domínio pesquisado. Tal procedimento implica numa
maior confiabilidade, agregando ao trabalho uma conivência necessária entre
pesquisadores (ou especialistas) sobre conteúdos específicos. Pode-se também utilizar

63
 a técnica de card sorting25 para validação de agrupamentos, rotulações de links
(mediados por botões, e menus) e classificações dos elementos. Posteriormente, esta
técnica pode colaborar nos ajustes relativos à estruturação do conteúdo. A
usabilidade26 também pode trazer sua contribuição neste processo, na medida em que
seus princípios tratam da facilitação, agradabilidade e eficiência de navegação.

Com o detalhamento da aglutinação da informação e definição de suas relações, parte-

se para o desenvolvimento de um mapa estrutural do sistema que mostre os percursos de
navegação que o usuário terá para percorrer o sistema, de acordo com suas necessidades
e objetivos, como mostrado a seguir.

3.2. Apresentação visual e estrutural do projeto

Neste ponto do tratamento informacional, o conteúdo já se encontra aglutinado

seguindo uma ordem hierárquica e relacional. A idealização das possibilidades de acesso
e navegação do conteúdo selecionado e já agrupado, assim como a comunicação visual
desta estrutura, necessária à execução do projeto de hipermídia, pode acontecer por meio
de mapas de acesso, também chamados de diagramas e fluxogramas.

O mapa é o meio metafórico através do qual se pode apreender a informação oriunda

de fontes exteriores e agir sobre ela (WURMAN, 1991). O mapa tem a função específica
de ajudar os indivíduos a processar a informação, permitindo o entendimento conclusivo,
em meio a uma grande quantidade de informações. No contexto de sistemas digitais,
possibilita a comunicação estrutural, fornecendo a orientação para o desenvolvimento da
arquitetura da informação. Ele “representa o relacionamento entre os links, as seções e as
interfaces, criando um sentido de espaço e sugerindo o sistema de navegação” (MOURA,
2003, p. 254).

Técnica e conceitualmente, o mapa mostra as diversas possibilidades de conexão entre

interfaces e/ou hiperdocumentos de um mesmo sistema, promovendo a indicação das
mais variadas formas de acesso ao conteúdo da hipermídia, visando à navegação
contínua em que o usuário não precisa retornar a nenhum local sem que seja de sua
vontade. Serve ainda para apontar o agrupamento entre elementos e seções, colaborando
no planejamento de sua implementação.

25
O card sorting é uma ferramenta para revelar o modelo mental dos usuários no desenvolvimento da
arquitetura da informação em Websites (PIRAUÁ & PADOVANI, 2006, p.1). Por meio de cartões rotulados,
os usuários propõem a categorização de informações, evidenciando suas relações e hierarquias.
26
“Usabilidade é a capacidade que um sistema interativo oferece ao seu usuário, em um determinado
contexto de operação, para a realização de tarefas, de maneira eficaz, eficiente e agradável” (ISO 9241 in
CYBIS, 2003).

64
 A utilização de mapas esquemático-visuais de informação permite uma maior
elaboração de idéias e relações e, consecutivamente, melhor comunicação e facilitação no
desenvolvimento do projeto. A aplicação de mapas como apresentação esquemático-
visual de informação pode beneficiar o procedimento de representação da estrutura
informacional e de navegação do projeto de interfaces. Os mapas, quando bem
detalhados, também podem ser utilizados como forma alternativa de se navegar em uma
interface, dependendo da natureza do conteúdo informacional e da atividade a ser
realizada pelo interator.

De modo geral, os mapas esquemático-visuais são estruturas metafóricas que ligam

pontos de informação, relacionando os seus elementos. Suas estruturas gráficas são
responsáveis por uma apresentação global dos contextos e, por conseguinte, das áreas ou
informações particulares e suas relações de afinidade, seja de forma indicativa ou
explicativa. Quando oferecem explicações ou valores conceituais entre as relações, são
tidos como mapas conceituais; quando apenas indicam a existência de ligação, são tidos
como mapas mentais. (BELLUZO, 2006; DUTRA et al, 2004; LIMA, 2004a; VILLAROUCO,
2001; ULBRICHT et al, 2005)

Pode-se afirmar que o procedimento de armazenagem e recuperação de informação é

beneficiado por sistemas associativos não lineares como os dos mapas – e.g.: figura 15
(Buzan, 2005). Essa afirmativa se apóia na similaridade entre a forma estrutural dos
mapas e a estrutura cognitiva humana, que prevê rotas de acesso à informação
interligadas por relações, de forma não-linear.

Além disso, a disposição visual favorecida por seus elementos compositivos (traços,
símbolos, palavras, cores, imagens etc.) respeita um conjunto de regras simples, básicas,
naturais e familiares ao leitor que facilitam sua da compreensão, possibilitando uma
visão geral do assunto, o que favorece a escolha da rota de acesso mais adequada, dentro
de uma grande quantidade de informação.

65
Figura 15: Demonstração do uso de imagens, forma e dimensão nos mapas mentais.
(fonte: <www.mapasmentais.com.br/arte/arte.asp>, acessado em: 25/07/2007)

Tais benefícios são possíveis por que os mapas servem de apoio à gestão da
informação e comunicação, agindo como importantes ferramentas gráficas que
classificam, representam e comunicam relações, e servindo como ponto de referência para
coordenação de pensamentos. (BELLUZZO, 2006)

Não há regras fixas para a construção de mapas, pois o importante é que a

estruturação hierárquica entre os conceitos e suas relações esteja clara (BAX & SOUZA,
2005). Os mapas podem ser construídos com finalidades diversas relacionadas, como a
geração de idéias que influenciem na criatividade, a representação seqüencial de
processos, o auxílio na aprendizagem e as representações de estruturas complexas de
informação de forma amigável. Todas essas finalidades são importantes no estudo
corrente, mas esta última merece atenção especial, pois implica na facilitação de
estruturação do conteúdo (já aglutinado). Lima (2004, p. 140) indica algumas etapas para
a construção de mapas:

 seleção: escolha do assunto e identificação das palavras-chave ou frases relacionadas;

 ordenação: organização de conceitos do mais abstrato para o mais concreto;

 agrupamento: reunir conceitos em um mesmo nível de abstração e com forte inter-

relacionamento;

 arranjo: organização de conceitos na forma de um diagrama;

66
 link e preposição: conexão de conceitos por meio de linhas e nomeação de cada linha
com uma proposição.

A execução e a utilização de mapas podem ser sensivelmente potencializadas com o

auxilio das novas tecnologias digitais. Sua elaboração, automatizada por programas
específicos, permite o usufruto da Web como possível anteparo, o que possibilita a
utilização de estruturas hipertextuais em sua construção. Essa relação permite a
integração de diferentes recursos digitais, originando-se modelos interativos.

Isto faz com que se abram novas perspectivas para utilização dos mapas, destacando-
se o desenvolvimento conceitual de sistemas hipertextuais, estruturas de navegação,
sistemas de indexação e de recuperação da informação e outros modelos de representação
do conhecimento que estão migrando de formas estáticas para formas mais dinâmicas e
funcionais. Isto contribui para uma forma mais amigável para se criar sistemas de gestão
da informação e da comunicação. (BELLUZZO, 2006, p. 86)

Figura 16: Exemplo de mapa com estrutura “Olho de peixe”.

(Fonte: <http://www.visualthesaurus.com/>, Acessado em 10/02/2007)

Um exemplo deste tipo de construção visual pode ser observado no programa Visual
Thesaurus, utilizado por Bürdeck (2006) para referenciar o assunto (figura 16). O autor
faz uma breve exposição sobre os mapas no contexto da gestão da informação e dos

67
novos métodos de design. Essa abordagem se dá sobre a ótica da mudança de paradigmas
do design relativa às novas tecnologias e ao distanciamento da linearidade no processo
de projeto, projeto este que assume um foco voltado ao usuário e, por conseguinte, em
seus interesses e necessidades.

Em resumo, os mapas esquemático-visuais de informação possibilitam a idealização de

estruturas informacionais necessárias à navegação e ao acesso a interface do sistema
hipermídia. Além disso, favorecem a representação visual da arquitetura para a
implementação destes sistemas. Assim sendo, os mapas esquemático-visuais de
informação podem ser utilizados como ferramenta para o design da informação se
associados ao processo global de tratamento informacional apresentado no tópico
anterior.

3.3. Organização de elementos nas interfaces de hipermídias

Com a informação já aglutinada em classes e subclasses, e sua arquitetura definida,

tem-se o tratamento geral de todo o conteúdo sistematizado para o início de sua
implementação. Neste momento parte-se para o tratamento específico dos blocos de
informação que compõem cada interface. Este processo pode ser efetuado pela ordenação
das informações nos espaços da interface, utilizando-se grids27(também chamados de
grades, diagramas ou malhas).

Timothy Samara (2007, p.9) define o grid como um sistema de planejamento ortogonal
responsável pela divisão da informação em parte manuseáveis. Como pressuposto, existe
no grid a relação de escala e distribuição entre os elementos informativos, que auxiliam o
observador a entender seu significado.
Itens parecidos são distribuídos de maneiras parecidas para que suas semelhanças
ganhem destaque e possam ser identificadas. O grid converte os elementos sob seu
controle num campo neutro de regularidade que facilita acessá-los – o observador
sabe onde localizar a informação procurada porque os pontos onde se cruzam as
divisões horizontais e verticais funcionam como sinalizadores daquela informação.
O sistema ajuda o observador a entender seu uso. Em certo sentido, o grid é como
um fichário visual.

Para Ellen Lupton (2006) a razão de ser dos grids é o controle na definição de sistemas
para disposição de conteúdos em interfaces diversas. Os grids são projetados para dividir

27
Optou-se pela utilização da nomenclatura grid pela possibilidade de convergência terminológica entre
profissionais de áreas diversas do design, sendo o termo encontrado com maior freqüência nas publicações
consultadas.

68
o espaço em unidades regulares, respondendo às pressões internas do conteúdo (textos,
imagens etc.) e às pressões externas da margem (página, tela, janela), e sendo eficientes,
atuam como estruturas flexíveis e resistentes, e não como fórmulas rígidas.

O grid pode ser considerado como o sistema mais elementar de organização, onde
objetos visuais e verbais são agentes de comunicação que estabelecem padrões complexos
de informação. Neste plano organizam-se os conceitos de linguagem visual,
determinando-se pontos focais, margens, espaços, divisões e os próprios limites da
interface, facilitando sua legibilidade, seu reconhecimento e a compreensão da mensagem
(MOURA, 2003).

Segundo Radfahrer (2003), uma das melhores maneiras de se organizar os elementos

de uma interface digital é usar grids de alinhamentos. Com a função de ordenar a
informação, o grid padroniza a interface e ajuda o usuário a achar o que procura,
dividindo os espaços e dando maior consistência à organização do conteúdo. Para
Samara (2007, p. 21), “a internet mostrou ser uma mídia que pode se beneficiar de
concepções baseadas em grids como uma boa maneira de simplificar a atividade
vertiginosa de navegar por informações interativas”.

De certa forma, o grid conduz o projeto visual a uma estética redutiva, hierárquica e
funcional. Esse mesmo grid possibilita a utilização assimétrica baseada em suas estruturas
sistemáticas. Existem possibilidades de grids soltos e orgânicos ou rigorosos e mecânicos
e sua função é colaborar na resolução de problemas de comunicação de alta
complexidade, na medida em que se coloca como uma possibilidade de relacionar
elementos de um layout – figuras, símbolos, textos, tabelas etc. (SAMARA, 2007).

Conforme figura 17, um grid pode ser subdividido em:

 colunas – linhas verticais que criam divisões horizontais entre as margens,

 módulos – unidades individuais de espaço separadas por intervalos regulares que,

repetidas, criam colunas e faixas horizontais,

 zonas espaciais – grupos de módulos com função específica,

 guias horizontais – alinhamentos de quebra de espaços em faixas horizontais,

 margens – espaços negativos entre o limite do anteparo e seu conteúdo, e

 marcadores – indicadores de localização para informações secundárias ou constantes.

Utilizados com maior freqüência em interfaces gráficas impressas, mas também
utilizados em interfaces digitais com migalhas de pão (ou bread crumbs), links etc.

69
Figura 17: subdivisão do grid baseada na proposta de Samara (2007, p. 25)

No contexto do projeto de interfaces de hipermídias, utiliza-se também o termo

wireframe28 com papel equivalente ao do grid: indicar o local de conteúdo em uma
interface, colaborando em suas relações. Geralmente sua construção se dá pela divisão da
área útil de uma interface em linhas e colunas, mas também pode seguir outras formas de
segmentação do espaço utilizando formas geométricas diversas. Tal divisão, como dito,
visa o estabelecimento da comunicação e identidade entre os elementos da interface e
entre as associações de diferentes seções de um mesmo sistema. Um grid pode ter alto ou
baixo detalhamento, de acordo com a demanda do projeto, e deve estar associado à
qualidade de projeto, abrindo possibilidades de composição, e não ao engessamento ou
cerceamento criativo.

Ainda no contexto de interfaces de hipermídias utilizam-se as tabelas, que são

variantes do grid tipográfico. Estas tabelas se estabeleceram como uma característica
central para o webdesign ao serem incorporadas ao código HTML29 em 1995 para permitir
a apresentação de dados tabulares, estabelecendo áreas de navegação, conteúdo e
identidade de um site (LUPTON, 2006).

Existe, segundo a autora, uma ressalva importante na utilização destas tabelas para a
composição de interfaces relativa à acessibilidade. Os leitores de telas para pessoas com
deficiências visuais fazem uma ‘varredura’ na tela de forma a linearizar seus elementos
informacionais, para posterior tradução dos códigos em leitura auditiva de seu conteúdo.
Alguns dispositivos móveis como telefones celulares e PDAs (Personal Digital Assistants

28
Termo oriundo do inglês wire (arame; fio; fio de metal; grade de arame) + frame (armação; moldura;
quadro; aro; disposição).
29
HTML é a abreviatura para HyperText Mark-up Language ou Linguagem de Marcação de Hipertexto
(nota nossa).

70
ou Assistentes Pessoais Digitais) também fazem uso de leitura linear para reconfiguração
em telas de menor dimensão.

Para a correta compatibilidade do sistema hipermídia com tais programas e com o

dispositivo, recomenda-se a utilização das normas sistematizadas pela W3C30. É
importante observar que a utilização dessas regras, de certa forma, influencia
esteticamente uma interface, pois impõe uma seqüência linear de discurso ao designer, o
que pode restringir a potencialidade expressivo-formal em um projeto. Entretanto, como
as normas da W3C estão voltadas ao acesso e sistematização universal para Web, torna-
se um desafio ao designer o desenvolvimento de projetos que conciliem tais normas à
adequada potencialidade expressivo-formal.

Retomando as discussões sobre o grid, Samara (2007, p. 24) propõe a divisão de seu
projeto em duas etapas:

 Avaliação das características informativas do conteúdo e das exigências de produção

do material para construção do grid;

 Disposição do conteúdo de acordo com as diretrizes dadas pelo grid dando a

prioridade demandada pela informação – oferecendo uma unidade geral sem destruir
a vitalidade da composição.

O autor observa que a variedade de composição sob um mesmo grid é inesgotável, e

abre a possibilidade de transgressão deste grid quando necessário. Uma outra observação
importante é que esse processo deve ser relacionado com o método global discutido nos
tópicos anteriores.

Os distintos problemas de design refletem-se em diferentes possibilidades estruturais

de grids, cada um com especificidades que tratam determinada informação de forma a se
conseguir uma solução peculiar. Assim sendo, demonstram-se quatro tipos básicos de
grids (LUPTON, 2006; SAMARA, 2007):

 Grid retangular (ou manuscrito): composição simples composta por uma estrutura de
área retangular ou coluna única – que ocupa a maior área de um layout, margens e
localizações para informações secundárias como cabeçalhos e títulos. Sua tarefa é
acomodar grandes massas de texto.

30
W3C - World Wide Web Consortium ou Consórcio World Wide Web - é um consórcio internacional de
organizações associadas, profissionais e especialistas afins que trabalham em conjunto para o
desenvolvimento de padrões Web. O W3C tem como objetivo criar padrões, normas e diretrizes que
garantam o crescimento da Web a longo prazo. Maiores informações e acesso às normas podem ser obtidas
no site <http://www.w3.org/>.

71
 Grid de colunas: composição composta por duas ou mais colunas, entrecolunas, guias
horizontais e margens. Beneficia a organização de informações descontínuas
fornecendo formatos flexíveis para hierarquias mais complexos em áreas verticais e
horizontais.

 Grid modular: composição complexa composta por grid de coluna com muitas faixas
horizontais que formam zonas espaciais independentes chamadas módulos, que
possibilitam a hierarquização de informações complexas.

 Grid hierárquico: composição quase orgânica que não se encaixa em uma categoria
de repetição regular de intervalos. É baseado na demanda da própria informação e se
baseia numa sistematização intuitiva nos alinhamentos, posicionados conforme as
proporções dos elementos.

Samara (2007) diz que na elaboração de interfaces que utilizam grids para sua
composição, acentua-se a utilização de grids hierárquicos (ou mistos que incluam os
hierárquicos). Tal utilização justifica-se, em grande parte, pelas características variáveis
destes tipos de interfaces, como realinhamento e reorganização dos elementos de acordo
com os tipos de navegadores (browsers), monitores e resoluções de tela, que utilizam
layouts líquidos31 e que não possibilitam uma padronização fixa nas áreas de exibição.

Uma outra justificativa para utilização do grid hierárquico em interfaces de

hipermídias em detrimento dos demais está na indicação ergonômica (Cybis, 2003) para a
apresentação de pouco texto de leitura em telas digitais, tanto quanto possível, o que visa
diminuir a densidade informacional nas interfaces. Esta recomendação se dá pelo fato do
monitor ser uma fonte emissora de luz, o que acentua o esforço biomecânico do usuário
na realização da tarefa de leitura informacional.

A utilização do grid na sistematização da informação na interface não é regra e sim

possibilidade. Mesmo no caso da escolha pela utilização de grids, existem questões no
tratamento do conteúdo que exigem rupturas e ajustes em sua utilização. O objetivo da
utilização de grids é colaborar em questões como ritmo, pregnância, coerência e
identidade, possibilitando uma correta expressividade demandada por cada tipo de
conteúdo para a solução de problemas relativos à comunicação com o interator. A seguir,
nas figuras 18 a 23, temos alguns exemplos de grids que ilustram as possibilidades
teorizadas até o momento.

31
“Layout líquido, também conhecido como fluído ou elástico, é aquele cuja implementação adota unidades
de medida relativas no lugar de absolutas para determinar o espaço dos elementos em uma página Web”.
(BAPTISTA, 2007, p. 44)

72
Figura 18: Grid retangular (fonte da imagem: <www.cowshedproductions.co.uk>, acessado em 09/01/2008)

Figura 19: Grid coluna (fonte da imagem: <www.politecalab.orgdensitydesign>, acessado em 09/10/2007)

73
Figura 20: Grid coluna dimensional (fonte: SAMARA, 2007, p. 98)

Figura 21: Grid modular (fonte da imagem: <www.missweblash.com>, acessado em 09/01/2008)

74
Figura 22: Grid modular dimensional (fonte: SAMARA, 2007, p. 108)

Figura 23: Grid hierárquico (fonte da imagem: <www.mercedes-benz.com.br/

HomeInterna.aspx?categoria=1>, acessado em 09/01/2008)

Apesar de não ser obrigatório, é interessante que o designer conheça as possibilidades

de composição baseadas em sistematização construtiva para que atue com maior
‘capacidade técnica’ na elaboração de interfaces baseadas em desconstrução. O
conhecimento de regras clássicas de fundamentos de linguagem visual é facilitador na
prática visual, o que influencia diretamente na capacidade de arranjamento e senso
crítico no trabalho de tratamento da informação.

A estrutura de grid no design se tornou parte de seu status quo, porém, pode-se
identificar em muitos trabalhos recentes a existência de outras maneiras de organizar a
informação. A decisão de usar um grid deve ser relacionada com natureza do conteúdo
num determinado projeto, assim como o contexto de sua ‘leitura’, criteriosamente, de

75
acordo com a demanda individual de cada projeto. Em alguns casos “o conteúdo tem
uma estrutura interna própria que nem sempre o grid consegue esclarecer” e nestes casos
a estrutura utilizando grid deve ceder lugar a tipos específicos de relações emotivas com
o público leitor. Tal envolvimento contempla um caráter intelectualmente complexo com
este público, fazendo parte da experiência com a interface. (SAMARA, 2007, p. 120)

Em ambientes tridimensionais ou interfaces não geométricas, por exemplo, existe a

possibilidade de organização dos elementos na interface utilizando-se outros parâmetros
espaciais como perspectiva geométrica, padrões cromáticos, morfologia baseada em
objetos materiais, e outras possibilidades que não utilizem necessariamente um grid
definido.

Ao longo do tempo a capacidade do público de apreender e digerir informações tem se

aprimorado e se sofisticado. Esta nova relação com a informação é vinculada ao excesso
constante de informações, oriundas de fontes diversas como a televisão, o cinema, as
mídias impressas (em maior variedade e volume de circulação) e as mídias digitais
interativas (SAMARA, 2007). Como resultado, criaram-se padrões determinados (ou
esperados) para os meios de vinculação da informação, que se caracterizam agora pelas
interfaces dotadas de multiplicidade, seqüencialidade e simultaneidade de conteúdos –
imagéticos, textuais, sonoros (estático e/ou dinâmicos).

Neste contexto o público passou ter experiências mais complexas com o design, e
como reflexo deste novo panorama acentuou-se o projeto baseado em caminhos
múltiplos de organização da experiência visual, visando uma impressão significativa que
se destaque no meio visual concorrido, e que atenda às demandas deste ‘novo público’.

Samara (2007, p.112) aponta que atualmente a prática de métodos alternativos ao grid
com embasamento intuitivo é predominante à sistematização ortogonal do dito ‘Estilo
Internacional’. Esse novo parâmetro de design, segundo o autor, teria suas origens no
contexto histórico e social contemporâneo.

Busca-se nestes novos parâmetros projetivos a incorporação de maior autoria e

pessoalidade em virtude da maior expressividade. O desenvolvimento de interfaces
gráficas passa a se dar, de certa forma e em alguns casos, como uma narrativa pessoal do
diálogo entre conteúdo e designer, orientado pela intuição, pelas qualidades óticas e pelos
aspectos conceituais. Como produto visual, tem-se a incorporação de elementos
característicos do cotidiano, a quebra de estruturas preconcebidas, novas ligações verbais
e imagéticas e atrações bissociativas – em busca de referenciação de significados
múltiplos na estruturas informacionais.

76
 No momento da incorporação dos computadores no trabalho do designer, e da
assimilação de seus recursos visuais, a idéia de apresentação experimental ganhou força
como método viável e centrado no usuário de organizar a informação. A mídia interativa
colaborou na mudança do modus operandi que o usuário tem de acessar e processar a
informação, possibilitando abordagens organizacionais intuitivas e individualizadas em
pé de igualdade com abordagens racionais, baseadas na estrutura do grid. A escolha
metodológica agora seria vinculada à adequação à demanda do projeto. (SAMARA, 2007,
p.119)

Demonstram-se a seguir algumas possibilidades exploradas pelo autor, na

desconstrução do grid e em abordagens não-estruturais. Vale lembrar que abaixo não se
encontram regras e sim, um breve descritivo sobre possibilidades de composição.

 Desconstrução do grid: composição racionalmente estruturada partindo da

decomposição de um grid por meio de novas relações espaciais (distorções,
perspectivas, sobreposição, subdivisões, mesclas etc.). (figura 24)

Figura 24: Desconstrução do grid modular (fonte: <www.criadesign.com.br>, acessado em 10/01/2008)

 Desconstrução lingüística: composição com forte relação tipográfica, baseada em

indicações verbais ou conceituais do conteúdo para quebrar a estrutura do grid.
Podem-se utilizar recursos como o ritmo da linguagem oral por meio do peso,
tamanho, cor ou alinhamento dos elementos, para indicar tônicas, dando ênfase na
linguagem visual. (figura 25)

77
Figura 25: Desconstrução lingüística (fonte: <www.leoburnett.ca>, acessado em 23/09/2008)

 Composição ótica espontânea: composição baseada na distribuição intuitiva

deliberada do conteúdo, relacionando seus aspectos formais – exagero nas relações e
nos contrastes a fim de criar tensões visuais e conexões para o observador, que pode
identificar a hierarquia da informação. Pode ter uma afinidade com a técnica
tradicional de colagem. (figura 26)

Figura 26: Composição ótica espontânea (fonte: SAMARA, 2007, p. 145)

 Alusão pictórica ou conceitual: composição de estrutura arbitrária, baseada na

derivação de uma idéia visual ou conceito que represente o conteúdo e que defina
uma relação entre os elementos informacionais. (figura 27)

78
Figura 27: Alusão pictórica ou conceitual (fonte: <www.zikadias.com>, acessado em 10/01/2008)

 Operação aleatória: composição baseada na justaposição dos elementos dispostos ao

acaso. Esta operação compositiva aleatória impõe um domínio de princípios de
linguagem visual, o que atribui certo controle sobre o acaso. (figura 28)

Figura 28: Operação aleatória (fonte: <www.alemdoblacktie.com.br>, acessado em 10/01/2008)

Nas indicações acima, ilustradas por imagens, assim como nas indicações sistemáticas
que utilizam grids variados, também ilustradas, observa-se uma grande variedade de
possibilidades de resultados visuais baseados nas estruturas de organização dos elementos
nas interfaces. Em todos os casos existe uma fundamentação estrutural ou conceitual que
estabelece as relações estruturais das interfaces. Nota-se também que as possibilidades
visuais são inúmeras, e devem corresponder projetivamente às demandas embasadas em
afinidades com o interator, com o conteúdo informacional e com o objetivo da interface.

79
 3.4. A visualidade da informação

Após ou em conjunto com a etapa de estruturação, de acordo com a abordagem

metodológica adotada pelo designer, encontra-se a etapa relativa à visualidade da
informação. Este é o ponto em que se encontram as informações e os elementos de
linguagem que as expressam. Neste momento, o design da informação faz a “sinalização
que torna claros os ambientes e suas divisões, facilitando a compreensão” (RADFAHRER,
2003, p. 125). Embasado em uma definição conceitual que percorre todo o projeto de
design, tanto de maneira funcional quanto formal, é nesta atividade que se dá
expressivamente a apresentação das informações por meio da interface.

“A definição e distribuição dos componentes de um projeto de hipermídia, bem como,

os indicadores visuais, sonoros, de movimentação/navegação, de interação, das
informações devem ser determinados e localizados na interface”, podendo coexistir
diferentes interfaces, tais como principal e sub-interfaces. (MOURA, 2003, p. 218)
Cada ponto de vista, cada modo de organização criará uma nova estrutura. E cada
estrutura nova permitirá ver uma nova forma diferente de significado,
funcionando como um novo método de classificação a partir do qual o todo pode
ser captado e compreendido (WURMAN, 1991, p. 73).

As interfaces de hipermídias devem permitir ao usuário uma visão panorâmica do

conteúdo, além de uma navegação orientada, em toda a massa informacional, de acordo
com seus interesses (BONSIEPE, 1997). Como dito, o design da informação atua nesta
tradução expressivo-formal do conteúdo, indicando caminhos a serem seguidos no
projeto da interface, agrupamentos, ritmos, identidade e abrindo tantas possibilidades
quantas forem necessárias ao projetista. O design da informação atua também na
harmonia que os elementos de uma interface e suas relações virão a ter em sua
configuração final.
O estilo visual de uma interface, no que diz respeito a formas, fontes, cores e
elementos gráficos que são utilizados e a maneira como são combinados, tem
influência em se determinar quão agradável é interagir com eles. (PREECE et al,
2005, p. 163)

Existem inúmeras técnicas para definição conceitual do projeto que auxiliam sua
posterior composição visual. Essas técnicas permitem o equilíbrio entre visualidade e
funcionalidade, adaptando-se à demanda individual de cada projeto. Dentre elas, além de
técnicas já citadas na construção e desconstrução do grid ou em abordagens não-
estruturais, no tópico anterior, que também possuem forte impacto na visualidade de uma
interface, podem-se utilizar:

80
 painéis semânticos: utilização de painéis com elementos visuais diversos para
utilização de seus traços mais marcantes, sejam formais, cromáticos ou compositivos;

 personagem símbolo: criação de personagem fictício que reflita uma condições de

existência, gostos, objetivos e valores;

 recursos aleatórios: utilização de recursos aleatórios que enfatizem a estrutura final

da informação, o que geralmente privilegia a visualidade à informação.

 inspirações focais ou aleatoriedade: utilização de elementos existentes como fontes

inspiradoras, seja um objeto, uma peça gráfica uma música ou um filme.

Estas quatro técnicas podem ser mescladas e associadas a outras práticas diversas,
resultando em uma gama imensurável de estratégias que podem ser utilizadas para o
conceito a ser seguido pelo projeto. Esse conceito deve estar aliado ao conceito utilizado
para definição da interação, e à expressividade necessária ao conteúdo informacional,
proporcionando unidade entre as interfaces de um mesmo sistema, seu conteúdo e o
objetivo que devem cumprir.

Quando demonstrada a organização dos elementos, no tópico anterior, observou-se

uma série de variantes técnicos e conceituais que atuam deliberadamente na constituição
final da interface. Lupton (2006) ressalta a influência tecnológica na estética da Web,
exemplificando a utilização de programa Flash como influência considerável nos
resultados visuais por romper com a obrigatoriedade ortogonal construtiva do HTML,
acentuando assim as possibilidades cinemáticas nas interfaces, que ele chama de ‘mistura
pictórica de palavras e imagens’.

Essa ressalva mostra que as tecnologias utilizadas no processo de design são

responsáveis por guiar novos padrões estéticos e novas possibilidades. A tipografia
digital32, por exemplo, é colaboradora na abertura de possibilidades visuais para as
interfaces (tanto impressas quanto digitais), na medida em que permitem maior controle
sobre a criação, seja baseada na composição construtiva ou desconstrutiva efetuada com
caracteres de forma imagética. Outra forte influência da utilização da tipografia digital é
o aumento considerável da quantidade de famílias disponíveis para utilização, resultante
de um desenvolvimento muito intenso e variado (FARIAS, 2001; JAQUES, 2002; ROCHA,
2002).

32
Considera-se a tipografia ‘digital’ relativa a um tipo de tecnologia, pois se distingue da tipografia
mecânica por seu conjunto de técnicas e instrumentos, o que consequentemente, impõe características que
as distinguem.

81
 3.5. Análise aplicada de interface

Após as demonstrações e discussões aqui realizadas, propõe-se uma análise de como se

aplicam os conceitos e teorias do design da informação em uma interface de hipermídia.
Como visto, os procedimentos, métodos e técnicas discutidos possibilitam indicações de
como proceder o design da informação em projetos de interfaces desta natureza.

De forma inversa, será analisada uma interface já constituída para ilustrar seus
elementos compositivos, pontuando a natureza de cada um, onde se alocam, como se
articulam no grid e como se relacionam, justificando-se assim a discussão apresentada
sobre a caracterização do design da informação no tratamento da informação.

Antes deste detalhamento, faz-se necessária uma observação de que esta é uma
possibilidade de análise dentro de inúmeras outras. Pois como diz Lévy (1993, p.186),

as técnicas não determinam nada. Resultam de longas cadeias intercruzadas de

interpretações e requerem, elas mesmas, que sejam interpretadas, conduzidas para
novos devires pela subjetividade em atos dos grupos ou indivíduos que tomam
posse dela.
Em outras palavras, pode-se dizer que a análise a seguir é pautada nas reflexões ora
apresentadas, e reflete um caminho particular, porém, embasado fortemente na literatura
e na experiência projetiva.

A interface escolhida para esta análise pertence ao website do estúdio de design e

desenvolvimento 2Advanced, sediado no Canadá e no Japão. Este sistema hipermídia é
composto por informações institucionais sobre a empresa, sobre sua equipe, clientes e
parceiros, sobre os serviços que desenvolve, além de portfólio de trabalhos, demonstração
de cases, notícias e publicações, blog, downloads e customização de preferências.

O projeto desse website utiliza características visuais muito próximas de suas versões
anteriores (figura 29), o que implica em um conceito relacionado entre elas. Pode-se
identificar em sua interface um conceito que remete à tecnologia agregada a paisagens
contemplativas imaginárias onde o ponto focal é sempre o mesmo, sugerindo certa
multiplicidade de um mesmo olhar focado no objeto central. Além disso, observa-se uma
dinamicidade visual (e auditiva) peculiar à utilização do programa Flash, ponto forte no
desenvolvimento de projetos desenvolvidos pela equipe 2Advanced (conforme seção
portfólio). Tal interface foi escolhida por conter grande parte dos elementos imagéticos,
textuais e sonoros aqui discutidos, o que possibilita a demonstração proposta.

82
Figura 29: interfaces do estúdio 2Advanced e versões sucessoras à analisada.
(Fonte: <http://www.2advanced.com>. Acessado em: 22/01/2008)

Essa hipermídia contém seis interfaces principais que dão acesso a seções internas do
mesmo sistema e a interfaces externas ao sistema, que não fazem parte desta análise. Em
termos gerais, pode-se dividir esta hipermídia em diferentes níveis de informação,
hierarquicamente relacionados de forma não-linear. O primeiro nível seria a interface
inicial, onde estão links para cinco interfaces principais com suas informações
segmentadas em níveis internos de sub-interfaces ou módulos.

A interface em questão é dotada de uma grande quantidade de informações dos mais

variados tipos, e devido a este volume e complexidade, torna-se necessário um
tratamento cuidadoso em sua interface para que o interator consiga apreender as
informações de forma adequada, e para isto, evocam-se as técnicas e procedimentos
discutidos no estudo.

Como visto, a etapa de aglutinação de informação é responsável pelo agrupamento das

informações de naturezas equivalentes, o que pode ser observado nos agrupamentos
cromáticos da figura 30. Os blocos de informação verde, amarelo, vermelho e rosa
agrupados e interligados formam um mapa esquemático-visual de informação que indica
a estrutura de navegação e acesso a cada interface, além de seus respectivos
subconjuntos, que por sua vez se agrupam em diferentes níveis de informação.

Figura 30: Exemplo de mapa de estrutura e acesso do website do estúdio 2Advanced com sua devida
aglutinação de conteúdos relacionados.

83
 Estando o conteúdo informacional devidamente agrupado e sua estrutura de
navegação e acesso definida, pode-se traçar um grid principal que comporta todos os
elementos que organizam a informação, conforme figura 31. Podem-se ainda definir seis
campos principais de informação, organizados de acordo com a hierarquia de leitura e
sua visualidade, que se repetem nas interfaces deste sistema.

Grid modular: sete linhas por quatro colunas.

Definições de áreas: menu, controles, conteúdo principal, conteúdo secundário, institucional, aplicação
da marca.
Figura 31: Exemplo de grid (ou wireframe) do website do estúdio 2Advanced.

Como mostrado no mapa (figura 30), este sistema detém seis interfaces principais.
Abaixo, na figura 32, apresentam-se a página inicial e uma nível secundário de acesso
(portfólio), que possibilitam a delimitação dos principais elementos contidos no sistema.

Figura 32: Interfaces do website do estúdio 2Advanced analisadas.

(Fonte: <http://www.2advanced.com>. Acessado em: 22/01/2008)

84
 As interfaces apresentam de forma bem definida os elementos imagéticos, textuais e
sonoros, sendo possível pontuá-los isoladamente conforme mostrado a seguir. Os
elementos imagéticos utilizados na interface são compostos por:

 imagens estáticas (ilustrações, desenhos, ícones, pictogramas, padrões formais e

cromáticos, formas geométricas) – exemplificadas nas figuras 33 a 36. Estão
associadas a informações funcionais, tais como demonstrações, identidade visual,
controles e indicações icônicas; a informações organizacionais, tais como divisões de
áreas, alinhamentos e incrementos de destaque; e informações ornamentais e lúdicas,
como ornamentos, marcas d’água e sobre planos.

 imagens em movimento (vídeos e animações bi e tridimensionais) – exemplificadas na

figura 37. Estão associadas com transição de informações, tempo de esperara entre
seções, retornos imediatos relativos a ações executadas e apresentações de conteúdos
diversos.

 mesclas (ou híbridos) entre estes componentes – exemplificadas nas figuras 38 a 40.
Estão associados a menus, botões (animados ou estáticos) e componentes de
identificação (marcas).

Figura 33: Exemplo de padrão formal, ilustração bidimensional (mapa de localização) e ilustração
tridimensional. (Fonte: <http://www.2advanced.com>. Acessado em: 22/01/2008)

Figura 34: Paleta de cores das seções do website. Figura 35: Ícone e controle com barra de rolagem.
(Fonte: ibidem) (Fonte: ibidem)

85
Figura 36: Imagem figurativa de fundo. (Fonte: <http://www.2advanced.com>. Acessado em: 22/01/2008)

Figura 37: Exemplo de imagem em movimento encontrada no website – animação inicial e tela de carregar.
(Fonte: ibidem)

Figura 38: Exemplo de botões encontrados na interface – elementos híbridos (textuais e imagéticos).
(Fonte: ibidem)

Figura 39: Exemplo de menu (retrátil) encontrado na interface – elemento hibrido (textual e imagético).
(Fonte: ibidem)

86
Figura 40: Marcas – elementos híbridos (textuais e imagéticos).
(Fonte: <http://www.2advanced.com>. Acessado em: 22/01/2008)

Os elementos textuais (figura 41) desta interface são compostos por textos estáticos,
em bloco, frases, palavras, títulos e subtítulos. Geralmente utilizados para leitura de
informações adicionais ou indicações específicas. Também atuam como configurações
formais de componentes de ligação na forma de hotwords, e quando associados aos
elementos imagéticos, na forma de botões rotulados e menus (figuras 38 e 39),
combinando formas geométricas e elementos textuais (animados e/ou estáticos).

Figura 41: Exemplo de elemento textual – bloco de texto (acessível por meio de barra de rolagem).
(Fonte: <http://www.2advanced.com>. Acessado em: 22/01/2008)

Por fim, os elementos sonoros desta interface são compostos por sons de ambientação
e ruídos. Na animação inicial e nas transições entre interfaces, os sons aparecem como
ruído, associados ao movimento dos elementos imagéticos. O som de ambientação está
presente em todas as interfaces principais, compondo os conceitos apresentados acima, e
nas animações de abertura do website e de transição entre interfaces, criando expectativa
e suspense para com as interfaces seguintes. Seu volume pode ser regulado nas interfaces
principais por meio de uma combinação de elementos imagéticos em forma de controle,
apresentado na figura 35.

Nas interfaces principais, excetuando-se a inicial, apresentam-se sub-interfaces com

conteúdos imagéticos, textuais e sonoros associados à visualidade e ao padrão de
navegação das interfaces principais, conforme figura 42.

87
Figura 42: Exemplo de sub-interface. (Fonte: <http://www.2advanced.com>. Acessado em: 22/01/2008)

Os elementos apontados apresentam uma relação conceitual que contempla toda a

visualidade da interface, remetendo ao tipo de trabalho desenvolvido pelo estúdio –
desenvolvimento de interfaces aprimoradas tecnologicamente e de alto impacto visual e
interativo. Os elementos imagéticos seguem esse padrão visual coerentemente entre si e
com os elementos textuais e sonoros. Os elementos textuais são usados basicamente
como informação de conteúdo e também de ligação (links). Utilizam uma tipografia
diferenciada para os títulos e funcional33 para o corpo de texto, formando uma hierarquia
de escala, posicionamento, cor e forma.

Já os elementos sonoros são utilizados para destaque de transição entre interfaces e

integração com o conteúdo informacional, e permitem certa imersão, dentro do possível
para uma interface de um website acessado em um computador pessoal. Todos os
elementos encontram-se dispostos seguindo uma coerência de leitura, auxiliados pelo
grid, repetindo-se em espaços determinados e organizados de forma a privilegiar linhas
de leituras e blocos fragmentados de informação.

Como resultado, pode-se observar na figura 43 as seis interfaces principais deste

website, que demonstram formalmente algumas das características proporcionadas pelo
design da informação citadas neste trabalho. Tais interfaces apresentam em suas seções,
além da identidade visual coesa, uma distribuição de seu conteúdo e uma visualidade que
comunicam seus conceitos e objetivos, colaborando no acesso e leitura de suas
informações.

33
Refere-se à tipografia funcional como default nos sistemas operacionais, por causa de suas características
benéficas para leitura em tela e pré-existência no sistema, o que impede distorções que poderiam ser
causadas pela eventual ausência da família tipográfica.

88
Figura 43: Seções do website do estúdio 2Advanced.
(Fonte: <http://www.2advanced.com>. Acessado em: 22/01/2008)

Na figura 44 pode-se evidenciar o trabalho de design da informação ao confrontarmos

suas principais interfaces de acesso. Quando se agrupam cinco fragmentos de áreas
equivalentes das seções internas das interfaces do website citado, formado uma única
imagem, pode-se perceber as ligações internas ocasionadas por uma identidade única e
um discurso expressivo comum, em que o conteúdo é tratado com uma relação visual
similar em seus espaços.

A organização e a identidade são trabalhadas a ponto de se evidenciar que todos os

elementos de informação são familiares, relacionados e seguem critérios conceituais e
formais comuns entre si, o que pode evidenciar a existência do estudo do design da
informação para todo o sistema.

89
Figura 44: Comparação das seções do site do estúdio 2Advanced.
(Fonte: <http://www.2advanced.com>. Acessado em: 22/01/2008)

Vale lembrar, por fim, que o website do estúdio 2Advanced respeita um grid e
certa sistematização compositiva, e isto se reflete na análise ora realizada. Caso a análise
efetuada se referisse a uma interface que não usa o grid ou uma racionalização evidente,
como algumas demonstradas no decorrer do texto, muito provavelmente aconteceria
outro tipo de análise, contextualizando-se a sua forma construtiva, disposição de
informações e visualidade. Como visto, é possível proceder o tratamento da informação
em interfaces com recursos diversos e adequados às características das informações, do
objetivo que devem cumprir e do interator ao qual se destina.

90
4. CONSIDERAÇÕES FINAIS

Este estudo reflete um recorte particular em um determinado escopo bibliográfico

referencial, discutido sob pontos de vista determinados em um dado espaço de tempo.
Como mostrado, boa aparência não implica necessariamente informação adequadamente
apresentada e assimilada pelo usuário. Podem-se ter fontes precisas e objetivas e nem por
isso tem-se confiabilidade em seu conteúdo. As pré-concepções podem gerar um falso
sentimento de compreensão, pois não promovem discussão a seu respeito, o que
impossibilita a melhoria de seu entendimento.

Para que um projeto de hipermídia não tenha sua eficiência debilitada ou minimizada,
e para que não se limite à execução de seu projeto, é de extrema importância o papel do
design da informação como agente transformador de dados em informações. Essa tarefa
de tratamento da informação permite, além sua da organização estrutural, a manipulação
dos elementos e de suas relações, visando à maximização da experiência entre usuário e
interface.

O design da informação mostra-se eficiente e necessário no papel de conduzir o design

de hipermídias, participando do projeto desde seu início. Ele atua no apoio à preparação e
elaboração do conteúdo informacional, passando pela indicação de organização em sua
interface, possibilidades de navegação, chegando à sua visualidade final. Neste universo
crescente de informação, é cada vez mais importante o domínio das técnicas que
facilitem o seu acesso, a sua compreensão e a sua recuperação.

Este estudo buscou a discussão e o esclarecimento sobre a caracterização do processo

de design da informação no desenvolvimento de interfaces de hipermídias. Para tanto,
embasado nos objetivos do projeto, foi trazida a natureza da hipermídia, em seu
desenvolvimento histórico que caracteriza grande parte de sua formação contemporânea.
Em seguida, buscou-se formalizar o entendimento sobre a hipermídia e suas principais
características e potencialidades. A proposição de uma decomposição peculiar buscou um
aprofundamento e cooperação aos estudos contemplados, que estão abertos às discussões
para seu aprimoramento.

Dentre as potencialidades da hipermídia, focou-se na interação, por se tratar de um

traço marcante em sua formação. A interação foi definida como a ação entre indivíduo e
interface, e tida como potencialidade, e não característica, pelo fato de ser considerada

91
necessária uma presença atuante do interator para que aconteça a interação, ou seja, não
é uma possibilidade passiva.

Em um escopo objetivo e sistemático, delimitou-se o que é o design da informação,

devido à carência em seu esclarecimento e à necessidade de discussão para seu
fortalecimento como importante campo do design. Nesta argumentação, colocou-se o
design da informação como colaborador no processo metodológico de design de
interface, estando presente com maior expressividade em pontos específicos. O design da
informação, como responsável pelo tratamento estrutural, formal e expressivo, mostrou-
se integrado ao projeto global de design.

Acredita-se que a resposta à pergunta de pesquisa motivadora deste trabalho tenha

sido respondida, na medida em que foram delimitadas as principais caracterizações
processuais encontradas no projeto de interfaces de hipermídias, relacionadas ao design
da informação, em quatro pontos principais: aglutinação de informações;
desenvolvimento e representação da navegação e acesso; posicionamento e configuração
espacial; e, por fim, a visualidade e expressividade das informações. Foram descritas
técnicas e conceitos que colaboram no projeto de interfaces amigáveis e, sobretudo, no
alcance dos objetivos inerentes às interfaces junto aos interatores.

Após estas discussões e reflexões, chega-se à conclusão de que o processo de design da

informação, no âmbito do desenvolvimento de interfaces de hipermídias, caracteriza-se
pelo tratamento da informação, utilizando técnicas e procedimentos que evidenciem suas
relações e capacidades expressivas, e possibilitando o desenvolvimento de estruturas que
se utilizem das naturezas do anteparo, da informação, do interator e dos objetivos que
cada um deles deve cumprir em um sistema integrado.

Como contribuição deste estudo, está a busca pelo aprimoramento de técnicas já

existentes, como a utilização de procedimento metodológico de desenvolvimento de
tesauros para a fase de aglutinação de informação, assim como a utilização de mapas
esquemático-visuais de informação para o estudo de estrutura e acesso de relações e
conteúdos, entre outras.

Neste contexto, algumas características de desenvolvimento do tesauro foram

utilizadas como aliadas ao tratamento da informação para composição de interfaces. Esta
proposição buscou auxílio nas características metodológicas dos tesauros para formalizar
as relações entre os elementos de interfaces de hipermídias. Tais relações, estando
formalizadas, propiciam, além da melhor compreensão das informações a serem tratadas,
uma aglutinação associativa de todos os elementos dessas interfaces.

92
 Buscou-se nas características dos mapas esquemático-visuais de informação (mapas
conceituais e mentais) a colaboração para a idealização e apresentação visual das
estruturas de acesso e navegação de projetos de hipermídia. Esses mapas facilitam o
desenvolvimento e exposição destas estruturas, mostrando-se benéficos no processo de
tratamento de conteúdo.

O presente estudo contribui tanto para o aprofundamento de questões relativas ao

design, como para os estudos correlatos ao trabalho, como hipermídia, interação, gestão
de informação e metodologia de projeto de interfaces, agregando conteúdo teórico que
possibilita a fundamentação de técnicas e métodos que visem solucionar problemas de
design no processo global do projeto de interfaces. Para estudos futuros, abre-se uma
grande quantidade de caminhos, haja vista a quantidade de assuntos contemplados e a
interdisciplinaridade abordada.

Duas possibilidades apresentam-se com maior destaque: a primeira seria a ampliação e

o aprofundamento dos resultados aqui encontrados, seja sobre a caracterização do design
da informação, ou sobre as proposições teóricas demonstradas; a segunda seria o
alargamento dos resultados encontrados visando uma metodologia global do design,
como metodologia para projetos de interfaces, ampliando-se os procedimentos para além
do design da informação.

93
5. REFERÊNCIAS BIBLIOGRÁFICAS

BATISTA, Claudia Regina. Desenvolvimento de interface para ambiente hipermídia

voltado ao ensino de geometria sob a ótica da ergonomia e do design gráfico.
Florianópolis, 2003. 155f. Dissertação (Mestrado em Engenharia de Produção) –
Programa de Pós-graduação em Engenharia de Produção, UFSC.

______. Design de interfaces para Web adaptativa. Florianópolis, 2007. 73f. Proposta de
Tese de Doutorado em Engenharia e Gestão do Conhecimento apresentada para Exame
de Qualificação, Universidade Federal de Santa Catarina – UFSC.

BAX, M. P.; SOUZA, R. R. Uma Proposta de Uso de Agentes e Mapas Conceituais para
Representação de Conhecimentos Altamente Contextualizados In: IV Simpósio
Internacional de Gestão do Conhecimento/Gestão de Documentos - ISKM/DM. CITS -
Centro Internacional de Tecnologia de Software: 2001, Curitiba. Disponível em:
<http://www.bax.com.br/research/publications/agentes>, Acessado em: 18/03/2007.

BELLUZZO, Regina Célia Baptista. O uso de mapas conceituais e mentais como tecnologia
de apoio à gestão da informação e da comunicação: uma área interdisciplinar da
competência em informação. Revista Brasileira de Biblioteconomia e Documentação:
Nova Série, São Paulo, v.2, n.2, p.78-89, dez. 2006.

BONSIEPE, Gui. Design do Material ao Digital. Florianópolis: FIESC/IEL, 1997.

BUGAY, Edson Luis; ULBRICHT, Vania Ribas. Hipermídia. Florianópolis: Bookstore,

2000.

BÜRDECK, Bernhar E.. Design: história, teoria e prática do design de produtos. São
Paulo: Edgard Blücher, 2006.

BUZAN, Tony. Mapas mentais e sua elaboração. São Paulo: Cultrix, 2005.

CYBIS, Walter de Abreu. Engenharia de usabilidade: uma abordagem ergonômica.

Florianópolis: Labiutil, 2003.

DUTRA, Ítalo Modesto; FAGUNDES, Léa da Cruz; CAÑAS, Alberto J.. Uma proposta de
uso dos mapas conceituais para um paradigma. In: XII WEI - Workshop de Educação
em Computação. Salvador: UFBA, 2004.

FARIAS, Priscila L.. Tipografia digital: o impacto das novas tecnologias. Rio de Janeiro:
2AB, 2001 (3a edição).

94
FELDMAN, Ari. Web site interface design theory: a designer’s primer. On-line: Flying
Yogi, 2003. 52p. Disponível em: <http://www.flyingyogi.com/fun/Webui.html>,
Acessado em: 05/10/2006

GATES, Bill. Tendências para os próximos dez anos. In: Veja edição especial: Tecnologia.
São Paulo: Editora Abril, agosto de 2007, ano 40, VEJA 2 022, pp. 68-71.

GOMES, Hagar Espanha. Manual de Elaboração de Tesauros Monolingues. Brasília:

MEC/MCT, 1990. 78 p.

HORN, Robert E.. (1999). Information Design: Emergence of a New Profession. In:
Jacobson, R. (Ed). Information design. Cambridge: MIT Press, pp. 15-33.

JACQUES, João Pedro. Tipografia pós-moderna. Rio de Janeiro: 2AB, 2002 (3a edição).

JOHNSON, Steven. Cultura da Interface. Rio de Janeiro: Jorge Zahar, 2001.

LAAN, Regina Helena van der. Tesauro e terminologia: uma inter-relação lógica. Porto
Alegre, 2002. 196 f. Tese (Doutorado em Estudos da Linguagem). Universidade Federal
do Rio Grande do Sul, Porto Alegre, 2002.

LEMOS, André. Cibercultura, tecnologia e vida social na cultura contemporânea. Porto

Alegre: Sulina, 2004

LEVY, Carlos Henrique. IUP/LED: Uma Ferramenta Portátil de Interface com Usuário.
Rio de Janeiro, 1993. 71f. Dissertação (Mestrado em Informática: Ciência da
Computação) – Programa de Pós-graduação do Departamento de Informática, PUC-Rio
/ Pontifícia Universidade Católica do Rio de Janeiro.

LÉVY, Pierre. Cibercultura. São Paulo: Ed. 34, 1999.

______. O que é virtual?. São Paulo: Editora 34, 1996

______. As tecnologias da inteligência. São Paulo: Ed. 34, 1993.

LIMA, G. Â. B. O. Mapa hipertextual (MHTX) um modelo para a organização

hipertextual de documentos. 2004 A. 199f. Tese (Doutorado em Ciência da
Informação) - Escola de Ciência da Informação, Universidade Federal de Minas Gerais,
Belo Horizonte, 2004a. Disponível em: <http://www.gercinalima.com/glima/modules/
wfchannel/index.php?pagenum=11>, Acessado: 16/03/2007.

______. Mapa conceitual como ferramenta para organização do conhecimento em

sistemas de hipertextos e seus aspectos cognitivos. Perspectivas em Ciência da
Informação, Belo Horizonte, v.9, n.2, p.134-145, 2004b. Disponível em:

95
 <http://www.gercinalima.com/glima/modules/wfchannel/index.php?pagenum=11>,
Acessado em: 16/03/2007.

LUPTON, Ellen. Pensar com tipos. São Paulo: Cosac Naify, 2006.

MOREIRA, Alexandra. Tesauros e Ontologias: estudo de definições presentes na literatura

das áreas das Ciências de Computação e da Informação, utilizando-se a método
analítico-sintético. Belo Horizonte, 2003. 151 f. Dissertação (Mestrado em Ciência da
Informação). Universidade Federal de Minas Gerais, Belo Horizonte, 2003.

MOURA, Mônica. O Design de Hipermídia. Tese (Doutorado em Comunicação e

Semiótica) - Pontifícia Universidade Católica de São Paulo, São Paulo, 2003.

______. Design de Hipermídia: novo campo de ação no ensino, na aprendizagem e na

formação profissional. In: Anais do Congresso Nacional de Ambientes Hipermídia
para Aprendizagem – Conahpa. Florianópolis: UFSC, 2004.

NEGROPONTE, Nicholas. A vida digital. São Paulo: Companhia das Letras, 2005.

PIRAUÁ, José; MOURA, Dinara; PADOVANI, Stephania. Discutindo o Card Sorting: uma
análise da técnica in: Anais do 6º Congresso Internacional de Ergonomia e
Usabilidade, Design de Interfaces e Interação Homem-Computador. Bauru: UNESP,
2006.

PREECE, Jennifer; YVONNE, Rogers; SHARP, Helen. Design de interação: além da

interação homem-computador. Porto Alegre: Bookman, 2005.

PRIMO, Alex. Interação mediada por computador: comunicação, cibercultura, cognição.

Porto Alegre: Sulina, 2007.

RADFAHRER, Luli. Design/Web/Design: 2. São Paulo: Market Press, 2003.

REIMER, Jeremy. A History of the GUI. On-line: Ars Technica, 2005. Disponível em:
<http://arstechnica.com/articles/paedia/gui.ars>. Acessado em: 04/07/2007

ROCHA, Cláudio. Projeto tipográfico: análise e produção de fontes digitai. São Paulo:
Rosari, 2002.

ROSENFELD, Louis; MORVILLE, Peter. Information Architecture for the World Wide
Web. United States of America: O'Reilly & Associates, 2002.

SAMARA, Timothy. Grid: construção e desconstrução. São Paulo: Cosac Naify, 2007.

TRISTÃO, Ana Maria Delazari; FACHIN, Gleisy Regina; ALARCON, Orestes Estevam.
Sistemas de classificação facetados e tesauros: instrumentos para organização do

96
 conhecimento. Ciência da Informação, Brasília, DF, 33.2, 10 12 2004. Disponível em:
<http://www.ibict.br/cionline/viewarticle.php?id=120>, Acesso em: 08/03/2007.

ULBRICHT, Vania Ribas; PEREIRA, Heloisa Caroline de Souza; ULBRICHT, Sergio Murilo
Ulbricht, FERREIRA, Cláudio Luiz. A organização da informação para aplicativos
hipermídia: o caso do MAPEARTE. Revista Brasileira de Design da Informação, On-
line, v. 2, n. 1, 2005. Disponível em: <http://www.infodesign.org.br/artigos/Artigo3_
VRU.html> Acessado em: 19/03/2007.

______ (org.). Ambientes adaptativos: trilhando novos caminhos para a hipermídia. Rio
de Janeiro: Editora Ciência Moderna, 2006.

VILLAROUCO, V.. Modelo de avaliação de projetos – Enfoque cognitivo e ergonômico.

2001. 259f. Tese (Doutorado em Engenharia de Produção) – Programa de Pós-
Graduação em Engenharia de Produção, Universidade Federal de Santa Catarina:
Florianópolis, 2001. Disponível em: <http://teses.eps.ufsc.br/Resumo.asp?2551>,
Acessado em: 19/03/2007.

WURMAN, Richard Saul. Ansiedade de informação. São Paulo: Cultura Ed. Associados,
1991.

Websites utilizados no trabalho

2Advanced. Disponível em: <http://www.2advanced.com>. Acessado em: 22/01/2008.

Além do Blacktie. Disponível em: <http://www.alemdoblacktie.com.br>. Acessado em:

10/01/2008.

Cowshed Productions. Disponível em: <http://www.cowshedproductions.co.uk>.

Acessado em: 09/01/2008

Cria Design. Disponível em: <http://www.criadesign.com.br>. Acessado em 10/01/2008.

Density Design. Disponível em: <http://www.politecalab.orgdensitydesign>. Acessado

em: 09/10/2007

Leo Brunett. Disponível em: <http://www.leoburnett.ca>. Acessado em: 23/09/2008

Mapas Mentais. Disponível em: <http://www.mapasmentais.com.br/arte/arte.asp>.

Acessado em: 25/07/2007.

97
Mercedes-Bens. Disponível em: <http://www.mercedes-benz.com.br/HomeInterna.aspx?
categoria=1>. Acessado em: 09/01/2008.

Missy. Disponível em: <http://www.missweblash.com>. Acessado em: 09/01/2008.

Visual Thesaurus. Disponível em: <http://www.visualthesaurus.com>. Acessado em:

10/02/2007.

Organize sua vida. Disponível em: <http://www.organizesuavida.com.br/si/site/8214>.

Acessado em: 25/07/2007.

SBDI . Disponível em: <http://www.sbdi.org.br>. Acessado em: 11/10/2008.

W3C. Disponível em: <http://www.w3.org>. Acessado em: 25/07/2007.

Zikadias. Disponível em: <http://www.zikadias.com>. Acessado em: 10/01/2008.

98