Museu de Arte Contempornea Niteri - RJ

Interfaces
Rosa Maria E. M. da Costa
Vnia Marins

"No o ngulo reto que me atrai, nem a linha reta, dura, inflexvel, criada pelo
homem. O que me atrai a curva livre e sensual, a curva que encontro nas montanhas
do meu pas, no curso sinuoso dos seus rios, nas ondas do mar, no corpo da mulher
preferida. De curvas feito todo o universo, o universo curvo de Einstein."
(Oscar Niemeyer)

Objetivos
Desenvolver uma viso crtica a respeito da usabilidade das interfaces virtuais.
O desenho de contedos e atividades para e-learning uma tarefa que envolve

criatividade e um tempo considervel de planejamento. Diferente de uma aula

presencial, em que a correo pode ser feita durante seu desenvolvimento, a EaD deve
estabelecer critrios de previso, adequao e clareza para que o contedo possa ser
transmitido e assimilado de maneira tima, criando assim, um poderoso canal de
comunicao.
Wertsch (1993) assegura que a ao mediada (em EaD essa mediao feita
atravs das interfaces dos materiais impressos e das mdias de comunicao) no pode
ser desvinculada do meio que a torna possvel, ou seja, o foco do design didtico no
deve estar nem na tecnologia mediadora, nem na concepo de aprendizagem de modo
isolado. Nesta aula vamos discutir o tema das Interfaces e algumas das questes
associadas, trazendo novas perspectivas para o design didtico.

Interfaces
Mdias de comunicao, mdias sociais e Ambientes Virtuais de Aprendizagem
(AVA) so interfaces entre o que se deseja comunicar e a quem se dirige a
comunicao, ou seja, so mediadores. Segundo Laurel (1990), interface uma
superfcie de contato como a maaneta a interface entre as pessoas e a porta. O mouse,
o teclado, o microfone e a tela do monitor so, portanto, exemplos de interfaces, pois,
so mediadores entre o homem e a mquina.
O ator mais importante, em se tratando de interfaces, o usurio. Interfaces no
so criadas para projetistas, muito menos para programadores. Interfaces devem ser
criadas para seus usurios finais. Uma boa interface deve atender a seus usurios em
seus objetivos de uso, suas necessidades e suas limitaes.
Os esforos dos projetistas de interface devem objetivar a oferta de maior
nmero possvel de opes e facilidades sem que haja uma sobrecarga cognitiva para os
usurios. Laurel adverte-nos que o excesso de opes e de convenes que eu devo
aprender para que eu possa me tornar proficiente no uso de uma interface me deixa
confusa e cansada. Os psiclogos chamam isso de sobrecarga cognitiva. Eu chamo de
problema. (Laurel,1990, pg. xi)
Uma interface tanto melhor quanto mais atenda ao seu usurio padro, ou seja,
uma interface torna-se tanto mais eficiente quanto mais ela fcil de usar por seus
usurios tpicos: quando no so necessrios grandes esforos para apreend-la, quando
o usurio sente-se vontade nela e quando ele consegue tirar proveito de todas as
funcionalidades oferecidas pelo sistema; da o conceito de usabilidade que vem sendo
empregado para avaliar sistemas. A prpria palavra j o define usvel, apropriado
para o uso.
Santos (2003) entende que as interfaces educacionais devem seguir os mesmos
princpios dos projetos de interfaces em geral e que tambm, deveriam se fundamentar
em alguma teoria de como as pessoas aprendem. A atividade de projetar pode ser
considerada, tambm, como uma atividade artstica; os conceitos considerados vlidos
so subjetivos e partem da experincia de profissionais consagrados. Modernamente,
podemos dizer que projetar a atividade responsvel pela elaborao de objetos de
uso e sistemas de informao. O projetista determina materiais, tecnologias de

fabricao, formas, cores, volumes, texturas, imagens, tipografia e incorpora

recomendaes ergonmicas.1
Laurel (1990) ressalta que o projetista de sistemas interativos deve integrar as
habilidades de engenheiro, de artista e de psiclogo. Um engenheiro porque deve
entender e traduzir os procedimentos do sistema, um psiclogo porque ele precisa
conhecer as necessidades e os modos de agir dos usurios e um artista porque precisa
ser criativo nas solues.
Oren (1990) oferece uma sugesto interessante de ser seguida, principalmente
para quem vai projetar para a Web. Ele aconselha: Os projetistas de interfaces
grficas de sistemas interativos podem obter idias (inspirao) prestando ateno s
solues encontradas por artistas de vanguarda em seus trabalhos. Estas observaes
podem ser um guia para a construo das prximas geraes de interfaces. bem
melhor desenvolver novas formas do que replicar as antigas (Oren apud Laurel 1990,
pg.479)
Hurlburt (1986) reitera a validade da sugesto de Oren (1990), quando observa
as contribuies de artistas plsticos no design grfico, como o caso da pintura de
Mondrian (Figura 2.1) que, segundo ele, contribuiu de maneira significativa para o
desenho grfico na pureza e na simplicidade com que tratou a superfcie bidimensional
de suas pinturas. Esta influencia se estende aos sites web, semelhana notvel entre o
quadro de Mondrian (Figura 2.1) e o design utilizado no site da empresa Sun System
(SUN, 2007) (Figura 2.2) em 2003, tanto no uso das cores como nas formas
geomtricas. Mesmo atualmente, este tipo de disposio de contedo em formas
geomtricas quadrangulares encontrado, como pode ser visto na interface do site do
Louvre (Figura 2.3), apesar das cores serem mais suaves.
A interface grfica dotada de mais um atributo quando uma interface para a
web: o hipertexto. A linguagem da Web o hipertexto (Silva 1999), ou seja, a no
linearidade da informao, a informao dentro da informao, a interatividade.

Folheto publicitrio distribudo pela Pontifcia Universidade Catlica do Rio de Janeiro, 2003

Figura 2.1: Quadro 72 de Mondrian: Composio em vermelho, preto, amarelo e

cinzento. Pintado em 1920. Est no Museu Andy Warhol.

Figura 2.2: Pgina do site da Sun (SUN, 2007).

Figura 2.3: Pgina de abertura do Museu do Louvre (Louvre, 2010).

Estes sites exploram algumas tcnicas de organizao de modo a facilitar a
leitura e a busca de informaes, como descrito a seguir.
2.1. Organizao da informao: proximidade e afastamento
Organizar a informao o objetivo do desenho grfico. Podemos organizar a
informao criando uma relao entre os elementos atravs da proximidade. Itens ou
conjuntos de informaes que possuem alguma relao devem ser aproximados e, de
maneira inversa, itens ou conjuntos de informaes que no esto relacionados no
devem estar prximos (Williams, 1995). Observe como o site da Figura 2.4 agrupou as
informaes em caixas, aproximando as que possuem relao entre si, oferecendo ao
usurio uma referncia visual da pgina.
A informao tambm est diferenciada pelas cores e se relaciona visualmente
com a barra superior: notcias em vermelho, esportes em verde, entretenimento em
laranja e vdeos em azul.

2.2 Organizao da informao: contraste

Uma maneira de dar destaque informao e oferecer um atrativo visual
pgina criar situaes de contraste. Para que o contraste seja realmente eficaz, ele deve
ser forte (Williams, 1995).
Podemos alcanar o contraste de vrias maneiras. Uma letra grande pode ser
contrastada com uma fonte pequena, uma fonte em estilo antigo com uma em negrito,
um fio fino com um grosso, uma cor fria com uma cor quente, uma textura spera com
uma lisa, um elemento horizontal (uma longa linha de texto) com um elemento vertical
(uma coluna estreita de texto). Um exemplo de contraste o uso de fonte maior e em
negrito para os ttulos e subttulos. Observe, na Figura 2.4, o contraste causado pelo
tamanho da fonte dos ttulos em relao aos tamanhos das fontes do texto.

Figura 2.4 Homepage do site do Globo.com (Globo, 2010)

2.3 Organizao da informao: equilbrio simtrico e assimtrico
Da mesma forma que a proximidade, o alinhamento uma forma de
organizao. Um bom desenho faz com que cada elemento da pgina tenha alguma
ligao visual com outro elemento. Ao alinhar os elementos em uma pgina, criada
uma linha invisvel que os une.

O alinhamento objetiva, tambm, equilibrar os elementos da pgina. O

centralizado a forma mais intuitiva e mais segura de alinhar os elementos. Ele parte do
equilbrio simtrico da pgina e, segundo Hurlburt (1986), fcil de entender e simples
de se produzir, criando uma aparncia formal, porm comum e sem criatividade.
Observando revistas, livros de arte e websites com diagramao de qualidade, podemos
notar que layouts sofisticados no utilizam textos centralizados. Alinhamentos
imprevisveis e assimtricos so utilizados para dinamizar o design e provocar interesse
no leitor.
Na pgina mostrada na Figura 2.5, observe o movimento causado pelo
alinhamento da navegao direita, como as fotos esto alinhadas pelas bordas; em
nenhum momento, foi utilizado texto centralizado.

Figura 2.5 Homepage do site da loja Sandpiper (Sandpiper, 2004)

2.4. Simplicidade: a meta do projeto de pginas.
A simplicidade deve ser a meta do design de uma pgina. (Nielsen, 2000, pg.
97). Porm, a simplicidade no desenho no apenas questo tempo de carregamento da
pgina, ela tambm proporciona uma sensao de clareza da informao. Por isso Black

(1997) recomenda a reduo da variedade de elementos grficos e do nmero de fontes

utilizadas. Segundo ele, deve ser usado uma ou duas famlias de fontes apenas.
Um exemplo de design simples e de download rpido o buscador Google,
Figura 2.6. Ele tambm um exemplo de alinhamento centralizado bem-sucedido, a
extrema funcionalidade dispensa um layout mais sofisticado.

Figura 2.6 Homepage do buscador Google (Google, 2010).

2.5. Mas nem to simples assim: bom desenho significa credibilidade
Uma das principais metas do webdesign estabelecer credibilidade (Nielsen,
2000, pg. 92). Segundo Keller e Burkman (1999), um bom design ajuda a obter e a
manter a ateno do leitor, estabelecendo credibilidade em relao ao sucesso no uso
do material.
Nielsen (2000) admite que o design grfico elegante provavelmente tem
relativamente pouco impacto na usabilidade, porm a aparncia visual literalmente a
primeira coisa que o usurio v; e visuais atraentes so uma grande oportunidade de
estabelecer credibilidade. Ele aconselha que no se use nas pginas o que ele chama de
lixo amadorstico como fundos, gifs animados e palavras piscando.
Contedos educacionais podem aproveitar-se da qualidade grfica para atrair a
ateno e motivar os alunos. A credibilidade dos materiais para e-learning um aspecto
dos mais relevantes, uma vez que o aluno est sem a presena fsica do professor.

2.6. Eficincia: a web cultura da impacincia

Aplicaes eficientes executam o mximo de trabalho com um mnimo de
informao dos usurios (Torgnazzini, 2003). A quantidade de etapas que o usurio
deve executar para acessar o que deseja deve ser reduzida ao mnimo. O desenho da
interface deve proporcionar ao usurio o mximo de eficincia e conforto com o
mnimo de aprendizado e de fadiga, utilizando a experincia anterior do usurio. O
buscador Google, Figura 2.6, um bom exemplo de pgina de interface simples e de
download rpido onde os usurios rapidamente podem conseguir a informao que
desejam.
2.7. Consistncia: identidade visual do ambiente
Os elementos da interface devem ser consistentes em todas as telas do site
(Torgnazzini, 2003). A repetio de elementos grficos oferece consistncia pgina.
Algum aspecto do desenho, repetindo-se no material inteiro, oferece um sentido de
unidade; o elemento repetido pode ser uma fonte em negrito, um fio grosso, um
elemento grfico, algum formato especfico, relaes espaciais, barra superior quando
possuir uma, uso de cores etc. Um exemplo de repetio a criao de ttulos com o
mesmo tamanho de fonte. O recurso da repetio muito til em peas de uma s
pgina e essencial em documentos de muitas pginas.
A consistncia dos elementos, que nada mais do que a sua padronizao no
site inteiro, importante para a orientao do usurio. A utilizao de cdigos j
apreendidos anteriormente facilita a compreenso da interface, agiliza os procedimentos
da navegao, proporciona conforto visual ao usurio e libera a ateno para outras
tarefas. Um exemplo de boa orientao em e-learning a utilizao de referncias para
que o aluno saiba em que parte do curso ele se encontra.
Observe, na Figura 2.8, como a pgina do site da Apple Computers oferece
orientao atravs da barra de navegao na parte superior da pgina. Ela consistente
em todo o site (com o mesmo desenho) e indica, com uma aba de cor diferente, em que
pgina o usurio se encontra. Esse tipo de navegao atravs de barra com abas j um
padro para os usurios de interfaces windows como as planilhas Excel, o que facilita a
compreenso da interface.

Figura 2.7 Homepage do site da Apple Computers (Apple Computers, 2010).

2.8. Uso de Padres: reduo do custo cognitivo
Na verdade, o usurio no precisa aprender nada desde que o elemento de
interface comporte-se exatamente da forma que o usurio est acostumado (Nielsen,
2000, pg.188). Depois que algo passa a ser suficiente e amplamente usado, torna-se
uma conveno. A utilizao de elementos de conhecimento dos usurios reduz o tempo
de aprendizagem das funes oferecidas pela interface.
Um bom exemplo de conveno na web o uso do desenho de um carrinho de
compras em sites de comrcio eletrnico, como est sendo mostrado na Figura 2.8.
Uma vez aprendida esta metfora do mundo real, torna-se desnecessrio criar outra.
Outro exemplo do uso de convenes est na utilizao, em pginas web, dos cones
que j so conhecidos nas interfaces Microsoft, tais como: pastas para arquivos,
envelopes para correspondncia de e-mail, impressoras para indicar texto para
impresso etc.

10

Figura 2.8: Barra de navegao do site da Amazon (Amazon, 2010)

Nielsen (2000) relata, em seus estudos de usabilidade, que os usurios queixamse quando um site tenta usar interface de navegao que seja muito diferente das que
esto acostumados a usar.
2.9. Layout: espaos em branco
Pginas com bom design fazem uso de muito espao em branco como
margens, espaos de separao entre o cabealho e o corpo do texto (...). (Misanchuk,
1992, pg.174). Especialistas em design grfico recomendam no ocupar com texto
todo o espao da tela deixando espaos em branco. O objetivo desta prtica no
sobrecarregar visualmente o leitor, orientar o olhar e ajudar os usurios a entender o
agrupamento de informaes. A Figura 2.7 um bom exemplo de uso de espaos em
branco.
2.10. Legibilidade: o contedo a ser aprendido
Tudo design e contedo falham quando os usurios no conseguem ler o
texto. (Nielsen, 2000, pg.125). A legibilidade um dos aspectos mais importantes, se
no, o mais importante quando se deseja estabelecer uma comunicao direta com o
usurio. Em e-learning, se o aluno tiver dificuldade em ler o texto, com certeza, ficar
desmotivado e isso ir prejudicar sua aprendizagem.
As consideraes a respeito da legibilidade de um texto vo desde o tamanho da
fonte, ao contraste da fonte com o fundo, boa redao, largura que ele ocupa na tela
e quantidade de informaes que disponibilizada em tela.
A escolha do tamanho da fonte deve levar em conta a variao da resoluo de
tela utilizada (1024 x 768 pixels, 800 x 600 pixels so as mais comuns), a existncia de
pessoas com problemas visuais, ou a preferncia das pessoas mais idosas por tamanhos
de fonte maiores.
A legibilidade de um texto tambm tem relao com o comprimento de suas
linhas. Kilian (1999) sustenta que linhas de texto muito longas dificultam a leitura, pois

11

os leitores podem ter dificuldade de encontrar o incio da prxima linha (observe Figura
2.9).
Outro aspecto relevante, na questo da legibilidade, diz respeito ao uso da cor.
Neste caso, recomenda-se o uso de tipos pretos sobre fundo branco. Em primeiro lugar,
por uma questo de contraste; em segundo, por uma questo de hbito, pois estamos
acostumados a ler texto com letras pretas em fundo branco nos materiais impressos.
Para quebrar a monotonia do texto preto em fundo branco, os mesmos recomendam,
que podem ser usadas cores claras para fundo de pgina como o amarelo claro, azul
claro, lils, etc. Fundo preto deve ser evitado, bem como, combinaes de cores que
causem efeitos visuais desagradveis, como o caso do uso de letras vermelhas sobre
fundos azuis ou verdes.
Nielsen (2000) sugere que o texto no deve se mover ou piscar, pois isso
tambm dificulta a leitura. Em geral, o texto deve ser justificado esquerda de modo
que exista um ponto de partida constante para o olhar leitor comear a percorrer a linha
do texto. Textos alinhados a esquerda permitem uma leitura muito mais rpida do que o
texto centralizado ou alinhado direita. O autor ressalta que, a leitura de um texto
escrito todo em letras maisculas 10% mais lenta, pois mais difcil para o olho
reconhecer a forma das palavras e os caracteres na aparncia mais uniforme, logo, seu
uso no recomendado.
Observe o exemplo deste texto todo em maisculas. NO USE TEXTO EM
MAISCULAS. A LEITURA DO TEXTO TODO EM MAISCULAS 10% MAIS
LENTA, POIS MAIS DIFCIL PARA O OLHO RECONHECER A FORMA DAS
PALAVRAS E OS CARACTERES NA APARNCIA MAIS UNIFORME.
Tambm deve ser evitado o espaamento maior entre as letras que o normal,
como no exemplo de texto a seguir: l e
d a s

q u e

t r a s

m a i s

e s p a a

n o r m a l m e n t e.

12

Figura 2.9: Pgina inicial do site sobre Che Guevara (Che, 2010). Um exemplo de
design ruim; observe as linhas do texto ocupando toda a largura da tela e a
cor de fundo com tom muito forte.
2.11. Consideraes sobre o uso de cor nas interfaces
A cor est impregnada de informao. Associamos significados s cores que
vemos nas rvores, no cu, na gua, nos alimentos e assim por diante. Tambm
atribumos valores simblicos s cores: o vermelho, que associado raiva, passou
tambm para a capa vermelha, que se agita diante do touro.
A cor constitui uma fonte de valor inestimvel para os comunicadores visuais e,
portanto, para os designers de interface. Nas prximas subsees, discutiremos alguns
aspectos relevantes que compem as interfaces.
2. 12.1 Teorias de uso da cor
Segundo Pedrosa (1977), cor geratriz, primria ou fundamental, cada uma das
trs cores indecomponveis que, misturadas, produzem todas as outras. Para os que
trabalham com cor-luz, como o caso da televiso e dos monitores de computador, as

13

primrias so: vermelho, verde e azul-violetado. Para os artistas e todos que trabalham
com cor-pigmento, as cores indecomponveis so: o vermelho, o amarelo e o azul.
A partir dessa classificao, vrios pintores e estudiosos de arte e cores, como
Leonardo da Vinci e Delacroix, criaram modelos e normas para alcanar harmonia no
uso das cores, tentando desta maneira sistematizar o que se costuma chamar de intuio
ou inspirao artstica. Entretanto, esses modelos se mostraram ineficientes pela sua
complexidade, pois muito grande o nmero de variveis e porque a utilizao das
cores depende de outros fatores, como por exemplo: rea, forma preenchida,
proximidade e/ou superposio de outras cores (Pedrosa, 1977). A seguir, citamos
alguns argumentos contra os sistemas de combinao de cores:
Ora, a harmonia realmente necessria no sentido amplo de que todas as cores
de uma composio devem se ajustar num todo unificado, se que devem se relacionar
uma com as outras....O que muito menos provvel que as cores usadas pelos artistas,
em muitos casos, estejam de acordo com quaisquer regras bastante simples como as
sugeridas pelos sistemas de harmonia de cor... Que destino miservel para um pintor
que gosta de louras, disse Picasso a Christian Zervos, ter que deixar de coloc-las
num quadro porque no combinam com a cesta de frutas ! (Arnheim, 1954, pg.338).
Uma combinao de cores nunca errada. Qualquer combinao de cores
transmite uma determinada sensao, mesmo se for de mau gosto. A sensibilidade
cromtica do ser humano varia muito (Tausz, 1976).
Essas argumentaes reforam a idia de que o uso das cores est diretamente
relacionado com seu contexto, com as formas em que a cor est aplicada e com a idia
que se deseja expressar. A Figura 2.10 mostra um exemplo do uso de combinaes
inusitadas de cor para criar diferentes efeitos.

Figura 2.10 - 10 Marilyns (Warhol,1967).

14

2.12.2 Cor e Contexto

... a luz de uma dada cor afetar diferentes cores de um quadro. No se pode
falar como uma cor realmente , pois num sentido seguro, ela sempre determinada
por seu contexto (Pedrosa, 1977, pg.199). No se pode pensar na cor isoladamente.
preciso observar os efeitos causados pelas cores que lhe esto prximas. Com isso,
podemos escolher combinaes que valorizem e destaquem as cores e, principalmente,
evitar efeitos ticos desagradveis.
A seguir, selecionamos alguns exemplos de como a cor se comporta em relao
a outras cores:

A Figura 2.11 mostra que a mudana de apenas uma cor, o contorno branco
pelo preto, altera todo o aspecto do padro.

Figura 2.11 A alterao da cor de contorno das formas em vermelho mudando

todo o aspecto da padronagem.

Na Figura 2.12, notamos que o amarelo fica pouco visvel quando aplicado
sobre fundo branco. Sobre fundo preto ganha fora e vibrao. Em
contraste, com o cinza, se enriquece em qualidade cromtica.

15

Figura 2.12: Alterao na percepo do amarelo nos diversos fundos.

Na Figura 2.13, podemos observar que o vermelho parece mais brilhante

sobre o fundo preto do que sobre o fundo branco, e neste, assume uma
aparncia escura e terrosa. Em contraste com o laranja, parece sem vida; em
contraste com o verde azulado, exibe brilho. Note como o quadrado
vermelho parece mais largo sobre o preto do que sobre as outras cores.

Figura 2.13: Alterao na percepo do vermelho nos diversos fundos.

Na Figura 2.14, temos um exemplo de um efeito desagradvel com a

superposio de cores; o vermelho aplicado em pequenas pores, sobre
fundo verde ou azul, agita-se e causa desagradvel sensao de crepitao.

Figura 2.14: Efeitos ticos desagradveis

2.12.3 Reao cor
A cor um elemento importante de comunicao visual. Ela nos fornece
informaes sobre o mundo que nos cerca. pela cor que identificamos se um fruto
est verde ou maduro, se um documento est envelhecido, se uma superfcie est suja.

16

As cores esto carregadas de uma expressividade que se baseia em associaes.

Segundo Pedrosa (1977), a simbologia da cor nasceu de analogias representativas, para
s depois, por desdobramentos comparativos, atingir o nvel de relativa independncia
que temos hoje. Ainda que a simbologia das cores tenha se afastado das associaes que
lhe deram origem, observa-se que muito do seu uso possui esta aproximao, como o
caso do vermelho que usado para sinalizar perigo nos sinais de trnsito.
O conhecimento das reaes e das sensaes provocadas pelas cores um
importante instrumento de comunicao, que tem sido usado pelas mdias, e deve ser
colocado disposio dos educadores para enriquecer a interface didtica. Este
conhecimento de grande valia para a adequao das interfaces ao contexto social e a
faixa etria dos alunos.
2.12. Uso de Metforas e temas visuais
Metforas so poderosas ferramentas semnticas usadas para transmitir
similaridades entre situaes familiares e novas (Mountford, 1990). A facilidade no uso
das interfaces grficas est bastante relacionada com a semelhana dos usos e
comportamentos dos objetos da interface, como documentos, pastas de arquivo, lixeira,
com seus correspondentes no mundo real.
Metforas so teis por duas razes: oferecem uma estrutura unificadora ao
design e facilitam o aprendizado ao permitir que os usurios usem o conhecimento que
j possuem acerca do sistema de referncia. Boas metforas so histrias que criam
imagens na mente.
As interfaces educacionais tambm podem valer-se do uso de metforas para
facilitar o entendimento do usurio, criar unidade e motivao. A utilizao de temas
visuais, para criar uma ambientao de aprendizagem, pode ser de grande valia em
interfaces para a educao. Observe na Figura 2.15 o uso da metfora do controle
remoto no site do Musicovery (Musicovery, 2010).

17

Figura 2.15: Uso da metfora do controle remoto (Musicovery,2010)

2.13 cones
cones so imagens ou sinais grficos que possuem as propriedades de um
objeto, uma ao ou uma idia que eles representam (Misanchuk ,1992). O uso de
cones em interfaces visa ajudar o usurio a localizar mais rapidamente a informao,
pois so elementos de percepo.
2.14. Navegao
A navegao deve ajudar os usurios a responder s trs perguntas
fundamentais: (1) Onde estou ? (2) Onde estive ? (3) Aonde posso ir ?
Nielsen (2000) recomenda que a navegao deve ser consistente, ou seja, que
suas ferramentas devem possuir o mesmo desenho em todo o site. Ela

deve ser

determinada pelas tarefas que os usurios desejam ou precisam realizar. E como a

Internet inerentemente no-linear, uma navegao linear muitas vezes um sinal de
alerta de m usabilidade.

18

2.15. Desenho do Contedo

Contedos educativos podem aproveitar recomendaes gerais para contedos
na web da mesma forma que a interface grfica se utilizou de conceitos de usabilidade
das interfaces em geral. Nielsen (2000) destaca que contedo de qualidade um dos
determinantes mais importantes da usabilidade na Internet. Segundo ele, de suma
importncia apresentar o contedo de forma atraente para os leitores.
A elaborao de textos na Internet voltados para e-learning, deve observar os
seguintes aspectos:

Os textos devem ser pequenos, com blocos no muito longos,

preferencialmente com pargrafos curtos, subttulos e listas com bullets.
Textos longos devem ser deixados para serem baixados para a mquina do
usurio (download);

A linguagem deve ser simples com estruturas sentenciais simples. Sentenas

simples so muito mais fceis de serem lidas e a escrita com floreios e
palavras complexas dificulta a leitura;

Os ttulos devem ser significativos;

Pginas longas com rolagem de tela tambm no so recomendadas. Black

(1997) e Nielsen (2000) sugerem como parmetro no escrever mais do que
50% do texto que se escreveria para tratar do mesmo assunto em uma
publicao impressa;

Tambm observado que os usurios costumam imprimir documentos

grandes para leitura off-line, portanto, recomenda-se gerar duas verses de
todos os documentos longos: uma otimizada e outra completa para
download ou impresso;

O hipertexto no deve ser usado para segmentar um artigo longo e linear em

vrias pginas. Ele deve ser usado para aprofundar pontos da leitura;

No se deve sublinhar o texto, na internet texto sublinhado padro para

link.

Em e-learning, a proposta de sugerir links para outras pginas bastante

relevante, mas a escolha desses links deve ser criteriosa para no afastar o aluno do foco
da aprendizagem. Neste caso, melhor vincular um nmero reduzido de pginas

19

externas altamente relevantes, do que todos os possveis sites alternativos na web. Um

outro aspecto importante incluir texto adicional, que explique de que se trata o link e
sua relevncia para o assunto. Podemos sugerir indicaes do tipo: visita obrigatria,
recomendvel, bastante recomendvel e assim por diante, para que o aluno possa
direcionar sua pesquisa.
2.16. Imagens Estticas
Podemos dizer que a primeira coisa que vemos em uma pgina, seja ela
impressa ou eletrnica a imagem que ilustra o texto, se ele possuir uma. Embora o uso
de ilustraes tenha sido bastante pesquisado, seus resultados ainda no foram
conclusivos e isso se d por causa do grande nmero de variveis envolvidas: o tipo de
ilustrao, sua relao com o texto, sua localizao, dimenses, estilo, etc.
recomendado que todas imagens utilizadas possuam legendas descritivas. E que sejam
vistas por inteiro na pgina, no deve ser necessrio rolar a pgina para v-las.
Felice e Nace (Felice e Nace apud Misanchuk, 1992) afirmam que ilustraes
possuem duas funes: expandir e elaborar o assunto exposto no texto e oferecer
pgina um apelo visual. Do ponto de vista da aprendizagem, o apelo visual a funo
menos importante, contudo no podemos desvalorizar este aspecto. As imagens podem
ser utilizadas para quebrar a monotonia de uma pgina s de texto e despertar interesse
no leitor.
Duchastel (Duchastel apud Misanchuk, 1992) sugere trs regras para o uso das
ilustraes:

Chamar a ateno e motivar o leitor;

Explicar o contedo do texto; e

Promover maior reteno atravs do uso redundante da informao,

atravs da linguagem verbal e da grfica.

2.17. Imagens em movimento e vdeos

Atualmente a tecnologia vem, cada vez mais, permitindo o uso de imagens em
movimento na internet. Essas mdias podem ser utilizadas para levantar discusses em
torno de algum tema abordado no contedo, motivar o aluno ou ajud-lo atravs de
simulaes tridimensionais (3D), como o caso da utilizao de Realidade Virtual

20

(Figura 2.16). Tambm, a utilizao de pequenos vdeos com apresentaes realizadas

pelo professor podem ser elementos de ligao afetiva com o aluno.

Figura 2.15: Site que mostra uma visita virtual a caverna de Lascaux que um
complexo de cavernas ao sudoeste da Frana, famoso pela suas pinturas rupestres.
http://www.lascaux.culture.fr/
2.18. A educao do olhar
muito importante para quem pretende projetar contedos para a Internet
possuir vivncia de navegao. Visitar sites de qualidade, tanto educativos como
comerciais, a prtica inicial recomendada. Isso permitir perceber os pontos fortes e
trar conhecimentos sobre os aspectos negativos, que devem ser evitados na elaborao
de produtos educacionais. Esta vivncia educa o olhar, gerando profissionais crticos
e criativos.
Lucena (1999) observa que o maior problema encontrado pelos professores que
desejam publicar seus materiais na Internet o aprendizado de linguagens de
programao necessrias a esta tarefa e refora a idia de que essa carncia pode ser
superada atravs das equipes multidisciplinares.

21

Entretanto, outros caminhos vm surgindo: as interfaces grficas e as

ferramentas de autoria abrem novas perspectivas para que os professores adquiram de
maneira crescente, a autonomia necessria para que eles prprios possam criar seus
materiais de aprendizagem. Neste cenrio de insero crescente da tecnologia nas
prticas educativas, despontam as ferramentas da Web 2.0, oferecendo novas
possibilidades para que os professores tornem-se os autores de valiosos contedos para
a disseminao do conhecimento.

Referncias
Amazon, (2010), Disponvel em: http://www.amazon.com. Acessado em maio de 2010.
Apple Computers (2010), Disponvel em http://www.apple.com. Acessado em maio de
2010.
Arnheim, Rudolf (1954) Arte e Percepo Visual So Paulo: Visual Editora.
Black, R. Websites que funcionam. So Paulo: Quark Editora, 1997. p.237
Che Guevara, (2010), disponvel em http://www.informagiovani.it/che.htm. Acessado
em maio de 2010.
Globo (2010), Disponvel em http://www.globo.com/. Acessado em maio de 2010.
Google (2010), Disponvel em http://www.google.com.br. Acessado em maio de 2010.
Keller, J.; Burkman, E. (199)Chapter1: Motivation Principles In: FLEMING, M.; and
LEVIE, W.H. Instructional Message Design Principles from the Behavioral and
Cognitive Scienses, New Jersey: Educational Technology Publications Englewood
Cliffs, p.3-49
Killian, Crawford. Writing for the web. USA/Canad: International Self-Counsel Press
Ltd.,1999. p.139.
Laurel, Brenda. Introduction. In: LAUREL, Brenda. The Art of Human Computer Interface Design USA: Addison-Wesley Publishing Company, 1990. p.xi-xvi.
Lucena, J.P.; Fuls, H.; Milidiu, R. etal. AulaNet: Ajudando Professores a Fazerem
seu Dever de Casa Anais do XIX Congresso Nacional da Sociedade Brasileira de Computao PUC-Rio, 1999 vol.I. p.106-117
Louvre, Museu do Louvre (2010). Disponvel em
http://www.louvre.fr/llv/commun/home.jsp. Acessado em maio de 2010.
Hulburt, Allen. Layout do design da pgina impressa. So Paulo: Editora Nobel,
1986. p.159
Misanchuk, Earl R. Preparing Instructional Text - Document Design Using Desktop
Publishing. New Jersey : Educational Technology Publications, 1992. p.307.
Moutford, S. Joy Tools and Techniques for Creative Design. In: LAUREL, Brenda. The
Art of Human Computer Interface Design. USA: Addison-Wesley Publishing Company, 1990. p.18-30

22

Nielsen, Jakob. Projetando Websites. Rio de Janeiro: Editora Campus, 2000. p.416.
Musicovery (2010), Disponvel em: http://www.musicovery.com/. Acessado em maio
de 2010.
Oren, T. (1990) Designing a New Medium In: Laurel, Brenda. The Art Of Human
Computer Interface Design. , USA: Addison-Wesley Publishing Company.
Pedrosa, Israel (1977) Da Cor a Cor Inexistente, Rio De Janeiro: Lo Christiano
Editorial Ltda..
Sandpiper, (2004), Disponvel em http://www.sandpiper.com.br. Acessado em
novembro de 2004
Santos, Neide Interfaces de Ambientes Educacionais: Diretrizes de Projeto Disponvel em http://www.ime.uerj.br/professores/neidenew/Interfaces.htm. Acessado em
2003.
Silva, Adriana Araujo de Souza. Design como Interface da Contemporaneidade. Rio
de Janeiro: UFRJ/Dissertao - Mestrado Escola de Comunicao da Universidade Federal do Rio Janeiro, 1999. p.168.
SUN Systems, disponvel em: http://www.sun.com. Acessado em dezembro de 2007.
Tausz, Bruno (1976) A Linguagem das Cores Rio De Janeiro: Edies MG Ltda.
Centro de Pesquisa e Arte.
Torgnazzini, Bruce. AskTog Pratical real-world design. Disponvel em
http://www.asktog.com. Acessado em 2003
USP-Universidade de So Paulo, (2010), Disponvel em: http://www.uspvirtual.usp.br/.
Acessado em maio de 2010.
Wertsch, J. V. (1993) Voces de la mente, un enfoque sociocultural para el
estudio de la accin mediada, Madrid: Visor.
Williams, Robin. Design para quem no designer. So Paulo: Cllis Editora, 1995,
p.144
Warhol (1967) Disponvel em http://www.warhol.org/default.asp. Acessado em maio
2010

23