Formao Continuada Midas na Educao

Mdia Informtica

Universidade Federal de Santa Maria

Mdulo 4 - Design e Usabilidade
Etapa 2- Design e Linguagem Visual

Responsvel pelo Mdulo e Conteudista:

Dr. Carlos Gustavo M Hoelzel
carlosgustavoead@gmail.com
Equipe Multidisciplinar
Dra. Roseclea Duarte Medina - Informtica na Educao
Ms. Andr Krusser Dalmazzo - Comunicao Visual
Ms. Melnia de Melo Casarin- Reviso Pedaggica
Alunos Bolsistas:
Cassio Forgiarini - Cincia da Computao
Evandro Bertol - Design Instrucional
Jssica Bertol - Design Instrucional
Leandro Oliveira - Cincia da Computao
Vilmar Rossi Jnior- Design Instrucional

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

AULA 6

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? 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.

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

Elementos da comunicao visual

Basicamente, temos como elementos fundamentais da comunicao visual o ponto, a
linha, a forma e a superfcie de tudo o que vemos. simples de entender, quando fazemos
trs pontos, unimos com trs linhas, obtemos uma forma (a de um tringulo) e podemos
pintar o seu plano de uma cor. Fazendo um exerccio simples, podemos reconhecer estes
elementos facilmente:
PONTO

LINHA

FORMA

SUPERFCIE

Figura 16: elementos que compem uma imagem.

Se abstrairmos um pouco, podemos ver as sees, que so como pequenas

imagens num contexto, como pontos ou pequenas manchas grficas. A seqncia destes
pontos forma linhas invisveis. Devemos usar isso a nosso favor, quer dizer, a favor da
mensagem a ser transmitida, e cuidar para no confundir o usurio. Veja como isso acontece
em diversos desenhos:

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

imagens visando dizer-nos

alguma coisa.
Veja quanta informao as
imagens carregam. Por este
motivo, elas tm uma
importncia muito abrangente
na interao com uma
interface. Para dominar esta
linguagem, primeiro vamos
estudar as qualidades das
imagens, os fundamentos da
linguagem visual e as formas
estruturais que podemos
aplicar numa interface.

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.

Figura 17: reconhecimento de manchas grficas.

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.

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

Por outro lado, a cor um fenmeno percebido na interface com aspectos que so
observados de forma geral, relacionados a fatores como idade e limitaes visuais. O uso do
recurso da cor na interface como forma meramente decorativa desaconselhado.
importante planejar este uso, observando principalmente se auxilia a legibilidade das
informaes, quais efeitos sobre a performance cognitiva do usurio, etc. preciso tomar
cuidado com os perifricos onde elas sero projetadas, uma vez que podem alterar-se em
diferentes aparelhos, ou ainda sofrer efeito de luminosidade, saturao e contraste. Tambm
considere que os monitores de vdeo usam um sistema de cor chamado RGB (vermelho,
verde e azul como cores primrias), enquanto que perifricos como impressora utilizam
sistema CMYK (ciano, magenta, amarelo e preto como cores primrias).
Quanto s questes de significado da cor, existem algumas caractersticas comuns,
tanto para interfaces de computador, como para outras interfaces. Podemos citar algumas
como:

vermelho pode ser relacionado a situaes

de perigo, alarme, ateno, alerta,
calor e comandos de interrupo;
amarelo serve bem para advertncias;

verde relacionado a passagem livre

(sada), normalidade, vegetao
e segurana;
azul para frio, gua (como em
cartografia), cu e calma;
Figura 18: Exemplos de aplicaes cromticas.

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.

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

Agora, observe exemplos de difcil legibilidade:

verde sobre vermelho

vermelho sobre verde
branco sobre amarelo
vermelho sobre laranja
amarelo sobre branco
ciano sobre cinza

Figura 20: exemplos de combinaes que dificultam a legibilidade.

Outro fator importante considerar as caractersticas fsicas do sistema visual do

usurio. Elas podem nos indicar cuidados com fatores como daltonismo, onde a nodistino entre vermelho e verde significativa. A rea do centro do campo visual do usurio
mais sensvel ao verde e ao vermelho. A rea perifrica do campo mais sensvel ao azul,
preto, branco e amarelo. Se o usurio for de mais idade aconselhado o uso de cores mais
saturadas (com mais pigmentao).
Percebe-se que as cores tm tanta importncia quanto os demais elementos visuais
da interface. Sabe-se que cor a codificao mais rapidamente percebida pelo usurio na
interface, sobretudo na relao de agrupamento de elementos dispersos na tela. Por tudo
isso, indispensvel definir o uso das cores como um elemento de comunicao de
importncia capital para o sucesso de um projeto.

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

AULA 7

CONES E TEXTOS

Todos ns utilizamos cones quando interagimos com um software de interface

grfica. Estas imagens, usualmente pequenas e bem organizadas, so alocadas desta forma
devido a uma classificao, feita pela rea da semitica, que se dedica ao estudo dos signos.
Para eles, um cone uma imagem que se assemelha ao objeto ao qual se refere. A
importncia de compreender o funcionamento dos cones na interface e de como us-los
num projeto se d pelo fato deles facilitarem muito as operaes, economizarem espao e
apresentarem uma srie de outras vantagens j conhecidas, as quais veremos a seguir.

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;

Ao representar conceitos visuais, cones representam melhor que palavras, ex.:

ngulos, relaes como maior e menor, etc.;

Oferece fcil aprendizado e memorizao. Como so imagens sintticas, tm baixa

complexidade visual, e diminuem a carga de trabalho cognitivo para o seu
reconhecimento e memorizao;

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.

Pode-se usar cones em diversas situaes. recomendado principalmente para

representar:

Aes, como: salvar, imprimir, recortar, confirmar, cancelar...;

Navegao, indicando a direo e local onde ir chegar;

Operadores simples como os de vdeo;

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

Partes do sistema, como discos, arquivos, perifricos;

Tipos de usurios, como aluno, professor, administrador (e-proinfo)...;

Estados, como conectado ou desconectado;

Prioritariamente, quando estamos trabalhando com interfaces para objetos de

aprendizagem que utilizam relaes grficas, a fim de transmitir conceitos. o caso
de objetos de matemtica sobre propores ou trigonometria.

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;

limitar o nmero de cores, diminuindo complexidade visual e respeitando o uso

comum de cores, como vermelho e amarelo para situao de risco;

quando os cones so animaes de um processo, cuidar para que tenham um

movimento em tempo real como o do processo representado;

pesquisar cones que j so comuns para o usurio, adapt-los se necessrio e

aplic-los interface em funes iguais as que j eram utilizados em outros
softwares. Lembre que um cone novo tambm tem que ser aprendido e, neste
caso, deve acompanhar uma legenda (esta legenda pode ser permanente ou no);

quando for necessrio um rtulo (texto), apresent-lo de forma legvel, com termos
descritivos, especficos e familiares ao usurio;

cuidar com a quantidade de cones. Alguns textos sobre ergonomia recomendam no

mximo 30 cones visveis numa mesma tela de um software. Quando eles existem
em grande quantidade importante ter um mecanismo que permita ao usurio
deixar na tela apenas o que vai ser til para a sua tarefa. Tambm recomendado
que sejam organizados por funo em grupos de 5, no mximo 7 elementos;

o desenho de um cone no deve permitir dupla interpretao.

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.

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

Os textos tm, numa interface, algumas funes primrias, como a de dar ttulos s
partes (na forma de rtulos), apresentar mensagens de orientao ao usurio, nomear itens
de uma lista em um menu, etc. Veja o que os cones podem representar, estando ou no
associados a textos:
aes como

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

Figura 21: modos de aplicao de cones.

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

Figura 22: caractersticas possveis das fontes.

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

Outra questo crucial na determinao de uso de fontes o espao entre os
caracteres e entre as linhas. Numa interface digital, o afastamento entre as fontes deve ser
maior que em documentos impressos, sendo maior ainda no caso de fontes bold, por estas
terem a tendncia a parecerem como grudadas. Com a infinidade de desenhos de fontes
disponveis, temos que ter cautela e manter uma unidade na interface por meio de estilo,
tamanho e cores. Estas caractersticas podem auxiliar ou prejudicar o usurio durante a
leitura. Se for possvel, o ideal usar apenas um estilo e tipo de fonte, e que seja adequada ao
tema da interface. Um exemplo o uso de fontes com aparncia de antigo para um objeto de
histria medieval.
Outro fator importante que os textos funcionam tambm como figuras. Eles formam
blocos que podem ser alinhados de diferentes formas, e dispostos junto a outras imagens na
interface com o mesmo cuidado que teramos em situar uma fotografia ou ilustrao numa
pgina. Ao fazermos isso, estamos diagramando.

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

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

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

Alm da organizao dos elementos visuais, no sentido bidimensional, temos que perceber
a interface como camadas de imagens. A interface como cartas organizadas numa ordem.
Aqui estamos falando que, numa mesma tela, temos a percepo da sobreposio e dos
elementos que possuem maior grau de importncia, como sendo o que est na frente.
Sempre estaremos lidando com um fundo e os elementos que esto sobre ele - um erro
comum quanto a isso um elemento de fundo de tela que se confunde com o texto, que deve
estar em primeiro plano. Plano o nome destas camadas; logo, o que vemos primeiro o
primeiro plano.
E se estivermos projetando uma interface para quem ainda no se alfabetizou? Neste
caso, os planos tm mais importncia que as distribuies bidimensionais, pois naturalmente
o ser humano presta ateno sempre no que est mais prximo, como uma forma natural de
defesa que orienta a percepo.
Todos estes fatores so importantes na organizao da estrutura da interface, mas
para distribuir bem os elementos importante ver a interface como uma grande colagem de
imagens, textos e animaes que possuem infinitas possibilidades. Para ser bem criativo no
desenvolvimento desta etapa em um projeto, o uso de lpis e papel facilita a criao de
variedades de leiautes e a posterior seleo.
Para facilitar o processo de deciso de onde ou como localizar os elementos de uma
interface, necessrio faz-lo de forma racional. Isso possvel se conhecermos a funo do
elemento. Esta funo uma funo de comunicao que facilita a deciso de local e ordem
das imagens. A seguir, veremos como fcil classificar e usar esta funo.

11

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

AULA 9

IMAGENS E FUNO DE COMUNICAO

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

ATENO: voc tem

certeza que deseja
continuar?
cancelar

OK

Figura 23: exemplo de funo ilustrativa de processo numa interface.

- Funo taxonmica (organizadores). Para definir como os elementos de uma

interface (textos, cones, animaes, barras de menu, entre outros) so organizados,
lanamos mo do recurso de organizadores. Ao abrir uma janela em um programa,

12

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

perceba que ela est dentro de uma pequena moldura em cuja parte superior h uma
rea destinada ao ttulo, que neste caso chamamos de rtulo. Esta janela um
organizador. Todas as linhas, barras, reas de cor que definem uma rea de trabalho
so organizadores, os quais tambm seguem um padro de linguagem visual. So as
caixas onde colamos as peas da nossa interface.

Figura 24: exemplo de funo taxonmica como marcadores (destacados em magenta e laranja).

- Funo de sinalizao (avaliadores). As imagens com este atributo so

extremamente importantes porque sinalizam, isto , orientam o usurio na tomada
de decises durante a interao. Quando voc est fazendo download de um arquivo
da internet, aparece uma barra que vai sendo preenchida (barra de progresso) para
sinalizar quanto falta para terminar o processo, permitindo tomar a deciso de
continuar ou cancelar, de acordo com sua escolha.

nome:

nome:

e-mail:

e-mail:

mensagem:

mensagem:
mensagem enviada
com sucesso!
OK

enviar

enviar

Figura 25: exemplo de funo de sinalizao.

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

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

Significa que o software sinalizou para voc o possvel resultado, e voc deixou de
perder tempo num resultado que no lhe satisfaria.
Importante ressaltar que, quando existe situao de risco, como perda de arquivos,
por exemplo, devemos sinalizar utilizando imagens contundentes (cores contrastantes e
imagens de alerta) acompanhadas de texto explicativo, claro e objetivo sobre as possveis
conseqncias das decises do usurio.
- Funo operativa (prescritivos). Para operar qualquer aparelho, necessitamos de
botes que nos permitam interagir. Na interface, isso acontece por diversos grupos de
botes e reas onde podemos escrever. Os mais comuns so os botes de caixa de
ferramentas, setas de navegao e menus com palavras ou cones explicativos. Isso significa
que estas imagens caracterizam-se como locais de contato do usurio com o sistema e, por
isso, sempre apresentam resultado.
Todas estas funes so utilizadas nas interfaces de acordo com dois grandes
objetivos: o de orientar o usurio na interao com o software por meio da interface e o de
cumprir o objetivo para o qual ele foi projetado. Para que isso se cumpra, os elementos
visuais com seus devidos significados, textos e outros sinais, como os sonoros, devem ser
ordenados num leiaute coerente, legvel e compreensvel, dentro de princpios de design que
assegurem a boa interatividade com o usurio.

14

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

AULA 10

LAYOUT

Agora que j dominamos os conhecimentos bsicos sobre a linguagem visual, vamos

v-los aplicados ao projeto de interfaces orientado pelos princpios de design que renem o
que j vimos at aqui. Alm disso, estes princpios servem para conferirmos se uma interface
est realmente ergonmica.

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.

Equilbrio, proporo e simetria

As imagens que compem a interface devem ter uma relao de harmonia. Esta
relao pode se dar de forma dinmica ou esttica: esta quando temos pesos iguais em dois
lados ou todos os elementos centralizados. J aquela se d quando existe um ritmo ou uma
insinuao de movimento, que deixa a composio agradvel.

15

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

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.

Figura 28: modelo de aplicao de contraste em palavras grifadas.

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

Mdulo 4 - Design e Usabilidade. Etapa 2 - Design e Linguavem Visual

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