Documente Academic
Documente Profesional
Documente Cultură
Mdia Informtica
AULA 6
Linguagem visual
Tente fechar os olhos, e imagine que est indo para casa.
O que voc enxergou na sua memria? Provavelmente, deve ter visto as imagens
mais marcantes no percurso visual que faz no trajeto at a sua casa. Isso revela que temos
um conhecimento visual importante, baseado na fora das imagens. Esta fora fruto de
uma construo de formas, cores, texturas ou diferentes pontos de vista que nos chamam a
ateno. Se relembrarmos um pouco da Gestalt e da Cognio Visual, passaremos a
perceber que as imagens que temos na nossa memria so como uma lngua de sinais visuais
que esto organizados numa determinada ordem, como as imagens que nos auxiliam no
trajeto at a nossa casa, e a esta ordem chamamos de sintaxe. Este conceito muito
importante porque tudo o que fazemos tem uma ordem, uma seqncia com imagens
relacionadas. Desta forma, temos que ter o cuidado de ordenar as imagens na interface de
acordo com a ordem que seja mais natural para o usurio durante a interao. A sintaxe,
neste caso, como uma forma de organizao das imagens ou do que as compe, visando
dizer-nos alguma coisa.
Veja quanta informao as imagens carregam. Por este motivo, elas tm uma
importncia muito abrangente e comprometedora na interao com uma interface. Para
dominar esta linguagem, primeiro vamos estudar as qualidades das imagens e formas
estruturais que podemos aplicar numa interface. O desenho pode ser aprendido de forma
semelhante ao aprendizado de outras linguagens, como a textual ou a musical. Na linguagem
visual, estamos lidando com habilidades de desenho que podem, ou no, ser de domnio do
projetista do objeto de aprendizagem. Se ele tem condies de analisar os componentes
visuais e sugerir melhoras, ento ele est desenhando, ou seja, 'falando a lngua' dos
designers grficos. Para tanto, vamos estudar os fundamentos da linguagem visual e
posteriormente aplic-los s interfaces, com objetivo de saber especificar requisitos para a
linguagem visual e melhor interagir com outros profissionais da rea de design de interfaces.
LINHA
FORMA
SUPERFCIE
PRINCPIOS GERAIS DE
DESIGN DE INTERFACE
Linguagem Visual
Tente fechar os olhos, e
imagine que est indo para
casa. O que voc enxergou
na sua memria?
Voc deve ter visto as
imagens mais marcantes no
percurso que faz at a sua
casa. Isso revela que temos
um conhecimento visual
importante, baseado na
fora das imagens. Esta
fora fruto de uma
construo de formas, cores,
texturas que nos chamam a
ateno.
Se relembrarmos um pouco da
Gestalt e da Cognio
Visual, perceberemos que as
imagens que temos na nossa
memria so como uma lngua
de sinais visuais que esto
organizados numa
determinada ordem. A esta
ordem damos o nome de
sintaxe.
Desta forma, temos que ter
cuidado de ordenar as
imagens numa interface de
acordo com a ordem que
seja mais natural para o
usurio durante a interao. A
sintaxe, neste caso, como
uma forma de organizao das
Elementos da
Comunicao Visual
Temos como elementos
fundamentais da comunicao
visual o ponto, a linha, a
forma e a superfcie de tudo
o que vemos.
Fazendo um exerccio simples,
podemos reconhecer estes
elementos facilmente em
qualquer imagem.
Se abstrairmos um pouco,
podemos ver as manchas
grficas que compem a
imagem. Devemos usar isso a
favor da mensagem a ser
transmitida, cuidando para
no confundir o usurio.
Alm destes fatores, a
linguagem visual fortemente
definida pelo uso da cor em
diversas aplicaes.
Alm destes fatores, a linguagem visual fortemente definida pelo uso da cor em
diversas aplicaes. A cor em si algo percebido fisicamente e culturalmente. Um dos
cuidados que devemos ter com o significado cultural, que muito diverso. Para alguns
pases, o branco significa luto, enquanto que, para outros, o preto. Por isso, importante
pesquisar o significado da cor para o usurio, dependendo da distncia entre a cultura do
projetista e a do usurio.
Ainda podemos observar o uso de cor laranja para valores-limite e radiao; cinza
para inatividade, neutralidade; assim como o branco, uma cor neutra que tambm significa
paz. importante tambm observar a relao das cores entre si. Observe os exemplos de
boa legibilidade abaixo:
preto sobre branco
branco sobre preto
amarelo sobre preto
branco sobre vermelho
vermelho sobre branco
preto sobre amarelo
Figura 19: exemplos de combinaes que proporcionam boa legibilidade.
AULA 7
CONES E TEXTOS
A utilidade do cone
Uma vez que o cone utiliza-se de figuras, ele mais universal e amigvel. Perceba
que o mesmo cone de impressora que voc conhece utilizado em muitos pases diferentes,
com diferentes lnguas. Vejamos algumas vantagens de sua utilizao:
Ocupa pouco espao. Um cone bem projetado, conciso, pode ser uma imagem
pequena e mesmo assim ser legvel, trazendo em si um significado que leva mais
rapidamente compreenso do que um texto ou um longo ttulo;
Nossa capacidade para lembrar e reconhecer grficos melhor do que para lembrar
apenas de palavras. O cone de reconhecimento mais rpido;
O cone permite que pessoas sem domnio ou domnio limitado de leitura possam
interagir com um software por meio da interface.
O uso de cones tambm requer cuidados. Assim como para toda a interface, os cones
tm princpios de design para orientar seu projeto. Como princpios gerais, temos:
identidade visual entre os diversos cones da interface. Isso pode ser alcanado
observando a cor e forma do fundo, da imagem e a linguagem utilizada, como o uso
de cor chapada ou sombras;
manter um tamanho mdio das figuras dos cones de forma harmnica entre eles;
quando for necessrio um rtulo (texto), apresent-lo de forma legvel, com termos
descritivos, especficos e familiares ao usurio;
Com estas recomendaes, podemos tanto projetar, como optar por cones j
existentes para nossos projetos. Assim poderemos ter maiores conforto e rendimento do
trabalho do usurio, porque utilizaremos bem as possibilidades
de comunicao destas
formas de imagem. Por outro lado, h momentos em que temos que usar de textos para
auxiliar na interao com a interface ou apresentar um contedo. Estes textos tambm so
elementos de composio dentro da linguagem visual, pois so compostos por fontes de
diferentes estilos, organizados numa diagramao, visando determinada funo.
salvar
para definir
partes do
operadores
estados como
sistema como
conectado
discos
ou
arquivos
navegao
tipos de
simples como
indicando
usurios como
os de vdeo
direo e local
onde ir chegar
imprimir
recortar
professor
desconectado
procurar
aluno
administrador
(e-proinfo)
perifricos
Para estas aplicaes, recomendado que os textos sejam em caixa baixa, apenas
com a primeira letra de cada frase em caixa alta, com bom contraste. No caso de rtulos e
mensagens relativas interface, devem preferencialmente estar alinhados pela esquerda,
embora isso possa ser alterado, caso a interface tenha uma linguagem diferenciada, como a
da histria em quadrinhos.
Para textos de contedo longo ou listas, necessrio cuidado com as fontes, pois elas
tambm so imagens e, quando juntas, formam blocos de diagramao - que estudaremos
mais frente. Aqui, vamos ver um pouco mais das caractersticas das fontes.
Existem muitas variaes de desenhos de fontes. Algumas caractersticas so mais
evidentes. Primeiro, observamos que os editores de texto usualmente nos trazem as opes
de estilo como Bold (negrito) e Italic (itlico). Existem fontes desenhadas em estilos
diversos, mas uma caracterstica que comum a um grande grupo de fontes a presena de
serifa. A serifa uma terminao saliente no desenho da fonte, cujo uso normalmente
recomendado para documentos impressos, uma vez que elas no apresentam bom
rendimento visual em interfaces digitais.
Serifa
serifas
AULA 8
ESTRUTURA DA INTERFACE
Estrutura
O desenho de uma interface sempre est influenciado fortemente pelo dispositivo
onde aparece. No caso dos monitores de computador, sempre estamos lidando com uma
estrutura retangular. Nesta estrutura, organizamos os elementos visuais com propsito de
facilitar a leitura de acordo com a atividade a ser realizada.
As reas deste retngulo so divididas de acordo com a importncia que adquirem
para nossa necessidade. Esta importncia vem da varredura visual, ou seja, o 'caminho'
pelo qual passamos os olhos. As reas que olhamos primeiro so as de maior importncia.
Esta varredura fortemente influenciada pela leitura. Olhamos de cima para baixo e da
esquerda para a direita porque na nossa cultura assim que lemos os textos - o que deve ser
observado, pois, ao fazermos um objeto de aprendizagem para um no-alfabetizado, os
focos de ateno visual sero outros.
Para alfabetizados em lnguas ocidentais, a parte superior esquerda o campo de
entrada da varredura visual. Nesta rea, devem ficar os cones, menus e informao de
maior uso e importncia no incio das atividades do usurio. Em sites, uma rea tambm
utilizada para apresentar indicaes da navegao do usurio; em cadastros, o canto
superior esquerdo um bom local para a fotografia do usurio. Tambm uma rea
valorizada para colocao de marcas e nomes de instituies no caso de sites ou objetos de
ensino oficiais.
No canto superior direito, onde a varredura visual no se detm muito, o local
propcio para informao e janelas menos utilizadas durante a interao, como menus de
ajuda, por exemplo. J o lado esquerdo tem sua importncia como rea fixa para sites onde
exista, mais direita, grande quantidade de informao que necessite de barra de rolagem tambm se aplica para menus.
A parte inferior direita o campo de fechamento visual, importante para localizar
cones de navegao ou mensagens relativas passagem de uma pgina para outra. Toda a
extenso inferior um local recomendado para dados sobre as caractersticas do que est
sendo trabalhado - uma rea para barra de status. O centro deixado para apresentao
das imagens daquilo que est sendo trabalhado, com um desenho, por exemplo.
10
11
AULA 9
NA INTERFACE
J falamos que nos comunicamos por imagens semelhantemente a como acontece
com os textos. Assim como as palavras, pontuaes e pargrafos tm funo num texto, na
interface, as imagens adquirem funes de comunicao que so teis para orientar o
usurio. Existem muitas funes para as imagens, mas podemos enumerar quatro que quase
sempre sero percebidas:
- Funo ilustrativa (designers - ilustradores). Esta uma das funes mais usadas.
Imagens com esta funo so representaes grficas de ferramentas, processos,
funes, esquemas ou situaes que servem para chamar a ateno ou designar
algum conceito. Em objetos pedaggicos, alm das imagens com funo diretamente
ligada interao com a interface, poderemos ter uma grande diversidade de
imagens com funo de ilustrar contedos, enfatizar idias, ou ajudar a entender um
processo como o de uma reao qumica, por exemplo. Estas ilustraes podem ou
no ter interatividade. Podemos ter uma ilustrao que acompanhe um texto e
represente visualmente uma idia, um conceito, sendo esttica, mas quando
representa um processo importante que seja animada.
porcentagem concluida
tempo estimado
cancelar
OK
12
Figura 24: exemplo de funo taxonmica como marcadores (destacados em magenta e laranja).
nome:
nome:
e-mail:
e-mail:
mensagem:
mensagem:
mensagem enviada
com sucesso!
OK
enviar
enviar
Mas ainda h uma outra categoria importante de imagens que ajudam na tomada de
deciso. Imagine que voc vai exportar uma imagem - h como saber se o arquivo exportado
ficar bom? Neste caso, no basta o software lhe dar dados numricos de definio da
imagem. Para uma correta avaliao, ele deve fornecer uma representao visual desta
definio. Se a imagem que o software lhe apresentar como possvel resultado do ato de
exportar for inadequada, logicamente o usurio toma a deciso de no faz-lo agora.
13
14
AULA 10
LAYOUT
Proximidade e alinhamento
Imagens que pertencem a um mesmo grupo devem estar prximas, ter traos em
comum. Estes traos so caractersticas como cor, contraste, forma, estilo de desenho,
dimenso, entre outros. Isso facilita a leitura do usurio e a sua interpretao quanto ao
significado da imagem. O alinhamento tambm permite estabelecer uma hierarquia que vai
orientar a ordem de leitura na interface e, posteriormente, as aes na interao.
cones de
controle da janela
1
2
cones de
ao
cones de
ferramentas
Figura 26: cones prximos e bem-alinhados facilitam a identificao dos grupos de funes.
15
composio
esttica
composio
esttica
composio
dinmica
.
Figura 27: composies simtricas (esquerda e central) e assimtrica (direita).
Cores e contrastes
As cores e reas claras e escuras orientam a ateno do usurio para determinadas
partes da interface. Funcionam como parte integrante das composies, sendo teis
principalmente para dar nfase, orientar a leitura e dar importncia a um assunto.
Consistncia e identidade
Uma interface pode ser composta por diversas partes ou pginas que devem ter
consistncia ou identidade visual, a fim de permitir que as visualizemos como sendo da
mesma famlia. Significa que temos de usar cores, estilos de desenhos, formas de dispor os
textos, animaes como padres que do identidade a toda a interface.
Figura 29: duas diferentes edies de um mesmo software, cada qual com a sua identidade.
16
Conciso
O design de uma interface pode estimular o uso indiscriminado de imagens. Para
comunicar-se bem, precisamos usar as palavras certas no momento certo. Na interface
tambm queremos nos comunicar bem, usando as imagens mais adequadas nos lugares e
ordem certos para o melhor aprendizado.
Visibilidade e Legibilidade
Primeiro temos que distinguir dois conceitos. Nem tudo que visvel legvel. Se voc
est a 5 metros de uma letra de meio centmetro de altura, ela vai ser visvel, mas
certamente ser ilegvel, porque voc no consegue saber de qual letra se trata. Numa
interface temos que poder ler, tanto os textos como as imagens, de forma confortvel.
Neste caso, a dimenso tem importncia fundamental. Por exemplo, no caso de vdeos com
transliterao de libras, se a rea do vdeo muito pequena, pode no ser possvel ler os
sinais produzidos pelas mos.
Estes princpios so gerais, mas em todo projeto devem ser observados enquanto
requisitos bsicos de qualidade de design, sendo analisados nas interfaces.
17