ANLISE VISUAL SISTEMTICA DE INTERFACE GRFICA

PARA O ENSINO DISTNCIA

RAMOS, Janaina1 mestrando, Universidade do Estado de Santa Catarina, UDESC

RAMALHO, Sandra Dr., Universidade do Estado de Santa Catarina, UDESC

DOMENECH, Susana Cristina Dr., Universidade do Estado de Santa
Catarina, UDESC

RESUMO: O presente artigo tem como objetivo principal fazer uma anlise visual
sistemtica bsica, fundamentada no modelo leitura de imagens de sete passos, de
uma interface grfica usado no o ensino distncia. O modelo para anlise objeto
de estudo de uma pesquisa de mestrado em fase final que ser apresentada em 2013.
Esta pesquisa analisa a acessibilidade e usabilidade de um curso de extenso
aplicado no ensino distncia, na modalidade online. Para este artigo, sero
apresentados os modelos de estudo e os principais conceitos semiticos que podem
ser aplicados na interface.
PALAVRAS-CHAVE: ensino distncia, design, interface, leitura de imagens

1. Introduo
A sociedade contempornea vem sofrendo transformaes tecnolgicas e de
comportamento ao longo deste ltimo sculo. Consequentemente, a escola e o
aprendizado tambm esto vivenciando principalmente nestas ltimas
dcadas uma srie de mudanas. o caso da Educao online, tambm
chamado de ensino distncia ou EaD, que Batista (2008) caracteriza como a
modalidade de educao em que o aprendizado se processa pela internet, pela
possibilidade do encontro virtual. Azevedo (2007) acredita que esta modalidade
de ensino acontece atravs da interao entre as pessoas, podendo ser
mediada pela tecnologia, sendo esta um meio e no um fim. Moran (2003)
argumenta que nos prximos anos, a educao online ser o foco central da
aprendizagem.
1 Mestranda em Design pela Universidade do Estado de Santa Catarina, na
linha de pesquisa Interfaces e Interaes Comunicacionais. Designer grfico,
graduada tambm pela UDESC, com experincia em metodologia projetual,
editorao, tipografia, identidade corporativa e interfaces para web.

Neste cenrio, a todo momento estamos sendo impactados com mensagens

visuais, textos que esto nos transmitindo sensaes, algumas vezes de
significado compreensvel, outras no. Segundo Ramalho (2006), as pessoas
geralmente no possuem um referencial mnimo, uma bagagem cultural bsica,
para fazer leitura destes textos de forma sistematizada.
A leitura de Imagens uma maneira de aproximar o leitor das obras de
arte e das imagens estticas, ou do cotidiano. Atravs dela possvel
auxiliar o pblico, seja ele escolar, de graduao, leigos e pessoas em
geral a passar de um nvel a outro no que se refere compreenso e
apreenso de significados, ou efeitos de sentido. (NASCIMENTO,
2009, p. 1)

Ainda de acordo com Nascimento (2009) a leitura de imagens uma

ferramenta, sendo necessrio que se aprenda a utiliz-la. O design uma rea
de conhecimento que deve se apropriar desta ferramenta objetivando criar e
interpretar textos que vislumbra e projeta em seu cotidiano.
Reis (2008) aponta que o ICSID (International Council of Societies of
Industrial Design) define o conceito de design da seguinte forma:
O design uma atividade criativa que objetiva estabelecer qualidades
multifacetadas nos objetos, processos, servios e seus sistemas em
todos os seus ciclos de vida. Portanto, design o fator central da
inovadora humanizao de tecnologias e fator crucial em aspectos
econmicos e culturais. (ICSID, 2004)

Reis (2008) argumenta que este conceito indica que o design vem
contribuindo ao longo do tempo com a produo de bens e servios utilizados e
absorvidos pela sociedade. Aliando tecnologia, ferramentas de criao e
repertrio cultural, o designer pode permitir que referncias afetivas sejam
incorporadas aos seus projetos, sobretudo na criao e desenvolvimento de
interfaces de interao humano-computador.
Bonsiepe (1997) argumenta que o design um domnio que se pode
manifestar em qualquer rea do conhecimento e prxis humana, que deve ser
orientado ao futuro e relacionado inovao. O design se orienta interao
entre usurio e artefato. O domnio do design o domnio da interface.
O homem e sistemas comunicam-se atravs de uma interface, suporte
pelo qual realizado o dilogo. Candello e Hildebrand (2007) citando Bastien
& Scapin (1993) consideram interface todos os aspectos dos sistemas

informatizados, ressaltando que a interface no se refere somente aos

aspectos grficos da camada visvel pelo usurio, mas tambm todo os
objetivos da interao. Passos (2008) sugere que o projeto grfico de
interfaces tornam possveis a comunicao entre as partes sem que haja a
necessidade de conhecimento prvio de linguagens de programao e se estas
forem simples, diretas e agradveis, possibilitam que se esquea que est
usando a ferramenta e se concentre melhor na tarefa.
Na sociedade atual, conforme Ramalho (2006), cada vez mais
proliferam-se meios e instrumentos para obteno de imagens, o que vem
ocasionando crescimento da cultura visual. So prticas sociais onde o sistema
verbal vem sendo substitudo pelo sistema visual. Para oferecer suporte
interpretao e leitura destas imagens e as mensagens produzidas por estas
prticas, existem ferramentas capazes de oferecer alguma sustentao
cientfica capaz de explicar as sensaes proporcionadas pelas imagens
produzidas no mundo contemporneo.
Segundo Ramalho (2006, p. 217):
So inmeras as trilhas que se entrecruzam no visivel da imagem
(plano de expresso) ao mesmo tempo em que tecem a significao
(plano de contedo); h a necessidade de observar muninciosamente
a imagem, resgatando pontos relevantes para, a partir deles, recriar,
traduzindo a teia de elementos e procedimentos significantes.

A autora (2006, p. 218) ainda prope uma espcie de roteiro bsico,

auxiliando quem procura buscar sentidos em textos visuais. Nascimento (2009)
sistematizou este modelo em sete etapas caracterizadas da seguinte forma:
1. Fazer um escaneamento visual ou grfico: buscar a estrutura bsica
da composio. Pode ser horizontal, vertical, diagonal, reta, curva,
paralela, composta por figuras geomtricas, regulares ou irregulares;
2. Desconstruir usando esquemas visuais. Elaborao de contornos
destacando as principais linhas e formas da imagem. Ressaltando
formas em detrimento das cores.
3. Redefinir elementos bsicos constitutivos. Estes podem ser: pontos,
linhas, planos, formas, cores, texturas, dimenses, materiais e outros
elementos significantes como os recortes, a moldura, o suporte, o que
est no entorno da obra e pode interferir na leitura.

4. Buscar procedimentos relacionais entre os elementos constitutivos.

Especficos de cada imagem, podem ser destacados sempre em sua
relao

com

seu

oposto,

por

exemplo:

repetio

contraste,

complexidade / simplicidade, equilbrio / desequilbrio, disperso /

concentrao, clareza / obscuridade,

naturalidade / artificialidade,

harmonia / desarmonia, nitidez / nebulosidade, ousadia / timidez,

simetria / assimetria, regularidade / irregularidade, obviedade / sutileza,
entre outros.
5. Trnsitar entre elementos, procedimentos, blocos de elementos, o
todo e as partes, esquemas visuais e imagem, buscando esgotar as
possibilidades de relaes possveis entre os diversos componentes da
imagem. Inicia-se a fase da significao. So usados os termos: remete,
alude, lembra, sugere, provoca, entre outros, sempre num sentido mais
amplo. Evitando-se o uso de termos fechados, hermticos, como
significa e representa.
6. Reconstruir efeitos de sentido, com base nos procedimentos
relacionais e em todas as possveis relaes. Buscando sempre novos
efeitos de sentido que so sempre especficos de cada texto, possuindo,
necessariamente, um correspondente na obra. Alm de especficos de
cada imagem, sero tambm pessoais. Pois cada pessoa ver nos
textos caractersticas e significaes prprias a seu percurso de vida.
7. Identificar o maior nmero de informaes possveis da obra ou
imagem, tais como: autor, ttulo da obra, data da criao, dimenso,
mdia em que se apresenta, suporte, contexto, para citar os mais
importantes. A identificao, quando possvel, feita no final da leitura
para que os dados no interfiram na apreenso de significados por parte
do leitor. Alm disso, feita no fim e caso possvel, para no
impossibilitar a leitura de imagens de origem desconhecida. O contexto
est dentro da obra, e essa deve ser lida de dentro para fora.
Sobre os textos do cotidiano, Landowski (1995, p. 240) enfatiza que:

qualquer que seja o meio de expresso utilizado (verbal ou outro), mal

acabamos de nos exprimir, e j no nos pertencem mais as formas

palavras, gestos, etc. que, no entando, cuidadosamente

escolhramos para produzir certo sentido, e o outro. Falando,
gesticulando, o sujeito cria materialmente um dado enunciado, o qual,
uma vez produzido, existe como objeto autnomo, disjunto de seu
produtor, e portanto, capaz de significar por si s, independentemente
tanto do que o enunciador pode ter intencionado dizer ao faz-lo
existir, quanto da maneira segundo a qual a indentidade real daquele
sujeito enunciador se poderia definir.

A partir do estudo destes conceitos, a proxima etapa a ser apresentada

neste artigo a da identificao e caracterizao do objeto de estudo, aplicar o
modelo de anlise e posteriormente, na etapa final, extrair e analisar os
resultados deste procedimento.

2. Mtodos e procedimentos

O objeto de estudo a interface grfica prottipo, desenvolvido com base

na interface atual do curso de extenso distncia A deficincia fsica no
contexto escolar, promovido pelo Centro de Ensino distncia da
Universidade do Estado de Santa Catarina. Foram identificadas as principais
telas do ambiente virtual de aprendizagem do curso mais acessadas pelos
alunos. Para este artigo, escolheu-se a tela de abertura do curso, que em
seguida foi convertida em imagen, conforme mostra a figura 1.
Imagem 1 Tela de abertura (prottipo) do curso de extenso.

Fonte: arcevo pessoal

Na figura 1 acima, encontramos a tela de abertura prottipo, projetada

com recursos de acessibilidade para portadores de deficincia e de
acessibilidade digital do contedo do curso. Os alunos entram no ambiente de
aprendizagem e encontram esta interface.
A partir deste momento, o prximo passo a ser apresentado so os
resultados da aplicao do modelo de sete etapas proposto por Ramalho
(2006) e listado por Nascimento (2009) nestas duas telas, a fim de analisar a
representao do sistema visual criado para este curso de extenso.

2.1 Procedimentos de aplicao do modelo de Ramalho (2006) na imagem

a) Fazer um escaneamento visual ou grfico buscando a estrutura bsica

da composio. O resultado deste procedimento pode ser observado na
imagem
Imagem 3 Etapa 1: estrutura bsica

Fonte: arcevo pessoal

Nesta imagem, percebemos que existem um ponto central focal, onde

encontra-se a imagem principal da tela do curso, que mostra duas crianas
brincando em uma praia, uma criana est em na cadeira de rodas, a outra
aparenta no possuir deficincia fsica, sugerindo diversidade e tranquilidade. A
primeira imagem percebida a marca da instituio, que converge para a
imagem principal e para a barra lateral esquerda, que contm os controles do
ambiente de aprendizagem. As duas barras paralelas forma pontos extremos

da interface e atraem a ateno do usurio, porque contm barras

perpendiculares para delimitar espaos.
b) Desconstruir usando esquemas visuais. Elaborao de contornos
destacando as principais linhas e formas da imagem. Ressaltando formas em
detrimento das cores.
Imagem 4 Tela de abertura (prottipo) do curso de extenso.

Fonte: arcevo pessoal

c) Redefinir elementos bsicos constitutivos.

Buscando os elementos no esquema acima, podemos perceber o
predomnio de linhas curvas e orgnicas no texto, sugerindo pessoalidade e
contato. Quanto s cores, o contraste baixo, muitas vezes um pouco
cansativo, onde predominam os verdes institucionais em contraste com tons
mais quentes, como o vernelho e laranja em pontos-chave da interface, que
devem ser acessados pelos usurios.

Imagem 5 Tela de abertura (prottipo) do curso de extenso.

Fonte: arcevo pessoal

d) Nos procedimentos relacionais entre os elementos constitutivos,

podemos perceber uma relao de contraste entre as imagens postadas pelos
autores do curso (parte central da imagem) e os elementos constantes do
ambiente de aprendizagem (as barras laterais e barra superior). Nos elementos
obrigatrios e estticos, a presena do constraste entre as cores verde,
vermelho e tons de cinza e preto, remetem a austeridade e sobriedade, mas
no sugerem funcionalidade.
e) Trnsitar entre elementos, procedimentos, blocos de elementos, o todo e as
partes, esquemas visuais e imagem.
Na imagem, h uma organizao formal em blocos, separados por itens
customizveis e itens estticos, obrigatrios na interface.
f) Reconstruir efeitos de sentido
No plano de contedo, ou seja, no campo da significao, de onde surgem os
efeitos de sentido, pode-se afirmar que a imagem completa remete a
austeridade e sobriedade, algo que no promove mudanas significativas nem
auxilia o usurio em suas tarefas. Analisando a imagem das crianas
brincando, podemos nos remeter ao singelo, ao ldico, diversidade, que
deveria vigorar em todas as instncias da sociedade.
g) Identificar o maior nmero de informaes possveis da obra ou imagem,
A imagem parte integrante do prottipo do curso e do ambiente virtual de
aprendizagem do Centro de Ensino distncia da Universidade do Estado de

Santa Catarina. Trata-se da tela prottipo de abertura do curso de extenso A

deficincia fsica no contexto escolar. O prottipo foi desenvolvido a partir do
modelo vigente do curso, e busca proporcionar aos alunos recursos de
usabilidade acessibilidade digital para portadores de deficincia. O modelo foi
apresentado a alunos portadores de deficincia durante pesquisa de mestrado,
e apresentou resultados satisfatrios de interao com a interface.

3. Resultados encontrados

Com este estudo pde-se perceber a eficcia do mtodo proposto por

Ramalho (2006) e sua aplicabilidade no s em obras de arte, mas tambm em
textos que so visualidados no dia-a-dia. Ao se projetar uma imagem ou uma
composio, o designer deve atentar para as situaes onde sero inseridos
estes textos, qual pessoa vai ler, qual seu tempo de exposico, quais sero
seus suportes, para que se possa oferecer a correta mensagem ao leitor.
Utilizando este modelo tambm em interfaces de interao entre humanos
e computadores, nota-se que estes projetos precisam atender as necessidades
visuais no somente de pessoas normais, mas tambm verificar a
adaptao deste modelo para pessoas com deficincia visuai e auditiva,
observando se o comportamento do plano de expresso e do plano de
contedo possuem as mesmas caractersticas quando aplicado em pessoas
sem deficincias.
O modelo proposto por Ramalho (2006) pode ser replicado em
composies grficas, ilustraes, obras de arte, interfaces computacionais,
websites, outdoors e comerciais de TV e internet , cinema, fotografias, moda,
literatiura entre outras manifestaes artsticas.
Os cursos de design devem munir-se de ferramentas da semitica, com o
intuito de propor solues alinhadas com o contedo e com a mensagem que
deve ser compreendida corretamente pelos leitores.

Referncias
AZEVEDO, W. Por que aprendizagem colaborativa on-line? In: MAIA, C.; MATTAR,
J. ABC da EAD. 1. ed. So Paulo: Pearson Prentice Hall, 2007. p. 18-19.
BATISTA, M. L. F. D. S.; MENEZES, M. D. S. O Design Grfico e o Design
Instrucional na Educao a Distncia, 2008. Disponivel em:
<http://portal.anhembi.br/sbds/pdf/7.pdf>. Acesso em: 08 mar 2012.
BONSIEPE, G. Design do material ao digital. Florianpolis: FIESC/IEL, 1997. 191
p.
BONSIEPE, G. Design, Cultura e Sociedade. So Paulo: Edgar Bluche, 2011. 270
p.
CANDELLO, H. C. D. S. P.; HILDEBRAND, H. R. Metodologia Semitica para
anlise de revsitas digitais online. Encuentro latino americano de diseo.
Palermo: Universidade de Palermo. 2007.
http://fido.palermo.edu/servicios_dyc/encuentro2007/02_auspicios_publicaciones/act
as_diseno/articulos_pdf/A4129.pdf.
LANDOWSKI, E. O semitoticista e seu duplo. In: OLIVEIRA, A. C. D.; LANDOWSKI,
E.; FIORI, E. Do inteligvel ao sensvel: em torno da obra de Algirdas Julien
Greimas. 1. ed. So Paulo: EDUC, 1995. p. 269p.
MEDEIROS, C.; RAMOS, K. C. S.; GONALVES , M. B. Concepes ergonmicas
aplicadas no desenvolvimento de interfaces, 2011. Disponivel em:
<www.mtm.ufsc.br/geiaam/seminarioTCC.ppt >. Acesso em: 8 mar 2012.
MORAN, J. M. Contribuies para uma pedagogia da educao online. In: SILVA, M.
(. ). Educao Online: teorias, prticas, legislao, formao corporativa. 1. ed. So
Paulo: Loyola, 2003. p. 39-50 p.
NASCIMENTO, A. C. Z. Uma imagem grotesca. II Seminrio Leitura de Imagens
para Educao: mltiplas mdias. Florianpolis: UDESC. 2009.
http://www.gpae.ceart.udesc.br/artigos3/artigo-AmandaNascimento.pdf.
OLIVEIRA, S. R. D. Imagem tambm se l. In: DA ROS, S. Z.; MAHEIRIE, K.;
ZANELLA, A. V. Relaes estticas, atividade criadora e imaginao: sujeitos
e(em) experincia. 1. ed. Florianpolis: Editora da UFSC, 2006. p. 254p.
PASSOS, E.; PASSOS, P. C. S. J. A Identidade Visual e o Reposicionamento de
marca do Editor de Texto Coletivo ETC. http://www.bocc.ubi.pt/pag/passospassos-2013-identidade-visual-reposicionamento.pdf. [S.l.]: [s.n.]. 2008.
REIS, A. A. D. Design no arte. In: MAKOWIECKY, S.; OLIVEIRA, S. R. R. E.
Ensaios em torno da arte. Chapec: Argos, 2008. p. 171p.