Anlise visual sistemtica de um modelo de

interface grfica para o ensino distncia.

Ramos, Janaina mestrando, Universidade do Estado de Santa Catarina, UDESC
jana.ramosdesign@gmail.com
Ramalho, Sandra Dr., Universidade do Estado de Santa Catarina, UDESC
ramalho@floripa.com.br

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

ABSTRACT: This article aims to analyze the main systematic visual basic, based on the
model image reading seven steps, a graphical interface used in distance learning. The model
for analysis is studied by a research in the final phase will be presented in 2013. This
research analyzes the accessibility and usability of an extension course applied in distance
education in online mode. For this article, we present the study models and key semiotic
concepts that can be applied to the interface.
KEY-WORDS: e-learning, design, interface, reading images

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.
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, p.xx) 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. Bastien & Scapin (1993) consideram interface todos os
aspectos dos sistemas informatizados, onde ele ressalta 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

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, Wilson. Por que aprendizagem colaborativa on-line? In: MAIA,
Carmem; MATTAR, Joo. ABC da EAD. 1 ed. So Paulo: Pearson Prentice Hall,
2007. 18-19 p.
BATISTA, Mrcia Luiza Frana da Silva; MENEZES, Marizilda dos Santos. O Design
Grfico e o Design Instrucional na Educao a Distncia. Disponvel em: <
http://portal.anhembi.br/sbds/pdf/7.pdf >Acesso em: 08 mar.2012
BASTIEN, C. & SCAPIN, D. Human factors criteria, principles, and
recommendations for HCI: methodological and standardization issues. (Internal
Repport). INRIA. 1993.
BONSIEPE, Gui. Design, Cultura e Sociedade. So Paulo: Edgar Bluche,
2011.1ed.270p.
____________. Design do Material ao Digital. 1. ed. Florianpolis: FIESC/IEL,
1997.192p.
LANDOWSKI, Eric. O semioticista e seu duplo. In: OLIVEIRA, Ana Claudia de;
LANDOWSKI, Eric; FIORI, Jos Luis. Do inteligvel ao sensvel: em torno da obra de
Algirdas Julien Greimas. So Paulo: EDUC, 1995. 269 p.
MEDEIROS, Helena Carolina; RAMOS, Karin Cristina Siqueira; GONALVES,
Mirian Buss. Concepes Ergonmicas aplicadas no desenvolvimentos de
interfaces. Disponvel em:< www.mtm.ufsc.br/geiaam/seminarioTCC.ppt > Acesso
em: 21 set. 2011.
MORAN, J. M., 2003. Contribuies para uma pedagogia da educao online.
In: SILVA,
Marcos.(Org). Educao Online: teorias, prticas, legislao,
formao corporativa. So Paulo: Loyola, pp. 39-50.
NASCIMENTO, Amanda C. Z. UMA IMAGEM GROTESCA. II Seminrio Leitura de
Imagens para a Educao: mltiplas mdias. 2009. Disponvel em:
http://www.gpae.ceart.udesc.br/artigos3/artigo-AmandaNascimento.pdf Acesso em:
fev. 2013.
OLIVEIRA, Sandra Ramalho de. Imagem tambm se l. In: DA ROS, Silvia Zanatta;
MAHEIRIE, Ktia; ZANELLA, Andrea Vieira. Relaes estticas, atividade criadora e
imaginao: sujeitos e (em) experincia .Florianpolis: Ed. da UFSC, 2006. 254p.
PASSOS, J. E. Desenho de Interao para Editor de Texto Coletivo ETC.
Monografia (concluso de curso) Centro Universitrio Ritter dos Reis. Porto Alegre.
2008.
REIS, Alexandre Amorim dos. Design no arte. In MAKOWIECKY, Sandra;
OLIVEIRA, Sandra R. Ramalho e. Ensaios em torno da arte. Chapec: Argos, 2008
171 p.