filosofia de projeto

Curso Superior de Sistemas para Internet

Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães

[email protected]

______________________________________________________________________

1

Usabilidade é o termo

usado para descrever a

qualidade da interação dos

usuários com uma

determinada interface.

3.1 Introdução

Padrões de Interação ou Patterns são coleções de boas práticas encontradas em

interfaces de um determinado segmento. Seu objetivo é reunir os aspectos que tornaram

determinado arranjo na interface padrão reconhecido pelos usuários e adotado pelos

designers.

Por exemplo, o padrão Abas Duplas é uma solução muito usada quando você precisa

estabelecer uma hierarquia de dois níveis de navegação numa barra que está no topo do

layout. Nesse padrão está registrado o problema que ela resolve, quando usar, como fazer e

por que usar.

3.2 Teorias da interação

“Uma linguagem de padrões de interação gera projetos de interação de espaço/tempo que

cria uma imagem do sistema próxima ao modelo mental do usuário da tarefa a ser realizada,

fazendo com que a interface homem-máquina seja a mais transparente possível.”

3.3 Usabilidade

A usabilidade é geralmente considerada como o

fator que assegura que os produtos são fáceis de usar,

eficientes e agradáveis – da perspectiva do usuário.

CAPÍTULO III

FILOSOFIA DE PROJETO



[email protected]

______________________________________________________________________

2

Metas da Usabilidade

Ser eficaz no Uso

Ser eficiente no uso

Ser segura no uso

Ser de boa utilidade

Ser de fácil aprender

Ser fácil de lembrar como se usa.

Se algo for difícil

de usar, não será

usado tanto.

A usabilidade de um sistema é um conceito

que se refere à qualidade da interação de

sistemas com os usuários e depende de

vários aspectos. Alguns destes fatores são:

Facilidade de aprendizado do sistema:

Tempo e esforço necessários para que os usuários atinjam

um determinado nível de desempenho;

Facilidade de uso: avalia o esforço físico e cognitivo do usuário durante o processo de

interação, medindo a velocidade de e o número de erros cometidos durante a execução de

uma determinada tarefa;

Satisfação do usuário: avalia se o usuário gosta e sente prazer em trabalhar com este

sistema;

Flexibilidade: avalia a possibilidade de o usuário acrescentar e modificar as funções e o

ambiente iniciais do sistema. Assim, este fator mede também a capacidade do usuário

utilizar o sistema de maneira inteligente e criativa, realizando novas tarefas que não

estavam previstas pelos desenvolvedores;

Produtividade: se o uso do sistema permite ao usuário ser mais produtivo do que seria se

não o utilizasse.

Muitas vezes, o designer deve identificar quais destes fatores têm prioridade sobre

quais outros, uma vez que dificilmente se consegue alcançar todos de forma equivalente. As

decisões do projetista determinam a forma de interação entre usuários e sistemas.

Freqüentemente designers definem a facilidade de uso como sendo o aspecto de

usabilidade prioritário e, por vezes, acabam desenvolvendo sistemas em que os usuários não

cometem erros, mas também não têm muita opção de ação ou decisão. Adler e Winograd

chamam estes sistemas de sistemas anti-idiotas (idiot-proof) e advogam que novas tecnologias

serão mais eficazes quando projetadas para aumentar, ao invés de substituir, as capacidades



[email protected]

______________________________________________________________________

3

dos usuários (Adler & Winograd, 1992). Assim, eles denominam desafio de usabilidade o

projeto de novas tecnologias que buscam explorar ao máximo as capacidades dos usuários na

criação de ambientes de trabalho mais eficazes e produtivos.

Outros pesquisadores também têm ressaltado a importância de os sistemas

computacionais ampliarem as capacidades do usuário. Norman, um dos mais influentes

pesquisadores e um dos pioneiros na aplicação de psicologia e ciência cognitiva ao design de

interfaces de usuário, recentemente tem enfatizado que a tecnologia deve ser projetada com o

objetivo de ajudar as pessoas a serem mais espertas, eficientes e inteligentes (Norman, 1993).

Fischer, por sua vez, argumenta que além de usabilidade o designer deve buscar

atingir também aplicabilidade, ou seja, a sua utilidade na resolução de problemas variados

(Fischer, 1998). Ele insiste no fato de que todo usuário é especialista em um domínio e uma

aplicação de software deve servir à sua especialidade. Neste sentido, ela deve funcionar como

um instrumento para o usuário e não presumir que o usuário é quem deve atender às

exigências de peculiaridades tecnológicas.

3.3.1 Heurísticas e princípios de usabilidade

Os princípios do design, quando usados na prática, normalmente são chamados à

heurística. Esse termo enfatiza que algo deve ser feito com esses princípios, quando aplicados

a um dado problema. Em particular, precisam ser interpretados no contexto do design,

utilizando-se experiências já realizadas sobre, por exemplo, como projetar feedback e sobre o

que significa algo ser consistente.

Outra forma de orientação são os princípios de usabilidade. Um exemplo é "fa le a

língua do usuário".

Para Krug (2008)

Esses princípios são bastante parecidos com os princípios do design, exceto por terem

a tendência de ser mais prescritivos. Além disso, enquanto os princípios do design tendem a

“Nada importante deve estar a mais de dois cliques de distância ou “Fale a língua do

usuário” ou mesmo “seja consistente”. Isto é “Não me faça pensar!”



[email protected]

______________________________________________________________________

4

ser utilizados principalmente para informar um design, os princípios de usabilidade são

utilizados, sobretudo como base para a avaliação de protótipos e sistemas existentes. Os

princípios de usabilidade também são chamados de heurística quando utilizados como parte

de uma avaliação.

Jakob Nielsen, um dos maiores especialistas em usabilidade propõe um conjunto de

dez heurísticas de usabilidade:

Visibilidade do estado do sistema;

Mapeamento entre o sistema e o mundo real;

Liberdade e controle ao usuário;

Consistência e padrões;

Prevenção de erros;

Reconhecer em vez de relembrar;

Flexibilidade e eficiência de uso;

Design estético e minimalista

Suporte para o usuário reconhecer, diagnosticar e recuperar erros;

Ajuda e documentação

A heurística de “mapeamento entre o sistema e o mundo real” está relacionada ao respeito aos

modelos mentais do usuário.

3.3.2 Regras de Ouro

Outro autor da área, Bem Shneiderman, propõe oito “regras de ouro” para o projeto e

avaliação de interfaces:

Perseguir a consistência;

Fornecer atalhos;

Fornecer feedback informativo;

Marcar o final dos diálogos;

Fornecer prevenção e manipulação simples de erros;

Permitir o cancelamento das ações;

Fornecer controle e iniciativa ao usuário;

Heurísticas de

usabilidade

Regras de

Ouro



[email protected]

______________________________________________________________________

5

Oito problemas de usabilidade

que não mudaram:

Links que não mudam de cor

quando visitados;

Alterar a função do botão Voltar;

Abrir novas janelas de navegador;

Elementos de design que aparecem

anúncios;

Violação das convenções da Web;

Conteúdo vago e modismo vazio;

Conteúdo denso e texto não

escaneável.

Reduzir a carga de memória de trabalho.

3.3.3 Problema de Usabilidade

“Um aspecto do sistema e/ou da demanda sobre o usuário que torna o sistema desagradável,

ineficiente, oneroso ou impossível de permitir a realização dos objetivos do usuário em uma

situação típica de uso”. (LAVERY et al, 1997)

Problemas de Usabilidade que não mudaram (NIELSEN, J. 2007).

Links que não mudam de cor quando visitados

A diretriz de usabilidade mais antiga para qualquer tipo de design navegacional é

ajudar os usuários a entender onde eles estavam, onde eles estão e onde eles podem ir -

passado, futuro e o presente on-line.

Não alterar as cores dos links cria confusão nos navegadores, pois os usuários não

conseguem perceber claramente suas diferentes escolhas ou onde eles estão. Esse é um

problema de usabilidade muito sério.

Quebrando o botão Voltar

Atenção Alunos!

Não comentam estes

erros em seus projetos!



[email protected]

______________________________________________________________________

6

As pessoas se sentem confortáveis sabendo que podem desfazer ou alterar suas ações.

Estimular os usuários a explorar um site da maneira que preferirem, é um dos princípios mais

fundamentais da Interação Humano-Computador.

Voltar faz o papel de “desfazer” na navegação de hipertexto. Você pode mover-se pelo

espaço das informações o quanto desejar, e nunca ficará desorientado porque você pode

desfazer o seu caminho. Nos navegadores da Web , a reversão é implementada por meio do

botão Voltar. Os usuários continuam clicando neste botão até retornarem no lugar desejado. O

botão Voltar é um alvo de clique relativamente grande, é a bóia salva-vidas do usuário,

supondo que ele funcione como o previsto. Infelizmente, os websites podem empregar vários

truques de codificação para desativar o botão Voltar, reduzindo bastante os movimentos dos

usuários.

Abrindo novas janelas de navegador

Ao clicar em um link ou em um botão, os usuários normalmente esperam que uma nova

página da web apareça no lugar da última. Para desfazer suas ações, eles clicam no botão

Voltar.

Infelizmente, muitos designers insistem em exibir novas informações em uma nova

janela de navegador em vez de reutilizar a janela existente. Às vezes, são pequenos pop-

up, um fenômeno suficientemente irritante. Outras vezes, a nova janela é exibida em uma

nova janela de navegador de tamanho completo.

A proliferação de janelas de navegador apresenta uma série de problemas de

usabilidade. Elas poluem os espaços de trabalho dos usuários com um número maior de

janelas do que eles solicitaram. Abrir novas janelas de navegadores tem esses efeitos ruis:

Interrompe a experiência esperada pelo usuário;

Polui a tela do usuário com objetos indesejáveis;

Impede a capacidade do usuário de retornar as páginas visitadas

Cobre a janela em que o usuário está atualmente trabalhando;

Todos esses problemas são problemas sérios de usabilidade.



[email protected]

______________________________________________________________________

7

Janelas pop-up

Hoje as janelas pop-up são um mal ainda maior contra a usabilidade do que eram no

passado. Os usuários ficam cada vez mais irritados com os pop-ups e alguns, inclusive,

instalam softwares especiais para bloqueá-los.

Elementos de design que aparecem anúncios

Usuários da Web são extremamente orientados a objetos – procuram informações importantes

para eles e ignoram qualquer coisa que outras pessoas queiram empurrar para eles. Se quiser

que as pessoas notem algo sobre seu site, certifique-se que isso não pareça propaganda, pois

as pessoas tendem a desviar suas

atenções de itens parecidos com

publicidade. Portanto, incluir

elementos parecidos com publicidade

é, com certeza, uma maneira de infligir

danos à usabilidade em um website.

Violando convenções da Web

Os usuários estão acostumados com padrões e convenções de design e vão esperar encontrá-

los também em seu site. Portanto, não desperdice o pouco tempo que tem para convencer seus

clientes para fazer negócio com você, fazendo com que eles lutem com uma interface com o

usuário que não utiliza essas normas e convenções. Os usuários ficam confusos quando os

sites fazem coisas de uma maneira inesperada e ficam satisfeitos quando imediatamente

entendem um site porque ele faz as coisas que esperam. O problema de violação de

convenções na Web é um problema grave de usabilidade.

Conteúdo vago e modismo vazio

Um dos maiores problemas da web é que as

empresas não querem admitir e comentar de

uma maneira clara e simples o que estão

fazendo nos seus sites.

Isso continua a ser crítico porque os



[email protected]

______________________________________________________________________

8

Uma boa redação faz uma diferença

enorme nas visualizações de página,

no tempo gasto em um site e nas

vendas. A regra fundamental da

usabilidade de site aplica-se tanto ao

conteúdo escrito quanto ao design:

os clientes preferem clareza a

confusão. (Nielsen, J)

Com algumas exceções, as pessoas

visitam a web pela sua utilidade, não

pela sua beleza. Ter um site

visualmente atraente é bom, mas o

conteúdo é mais preciso. Afinal,

quando as pessoas usam os sistemas de

pesquisa, elas não procuram atributos

estéticos – procuram informações.

(Nielsen, J)

usuários da web são extremamente impacientes e dedicam muito pouco tempo para cada

página. Quando mais rebuscadas as descrições, mais os usuários as descartam e vão para

outros locais.

É essencial dizer rapidamente o que você oferece e o que os usuários vão encontrar. Quanto

maior for o volume de redação ruim que você empurra para seus usuários, maior você treina-

os a negligenciar sua mensagem em geral.

Conteúdo inútil não apenas irrita as pessoas; é

uma importante causa de vendas perdidas. A

pratica de tornar Websites visíveis pelos

sistemas de busca é chamada de Search

Engine Optimization (SEO). Quanto mais

concreto seu texto, melhor será a classificação

de seu site nos sistemas de pesquisa.

Conteúdo denso e texto não escaneável

Bloco denso de texto é uma importante causa de

repulsa para os usuários da Web. A simples

visão de uma página repleta de texto sugere

imediatamente aos usuários que eles terão um

árduo trabalho para extrair as informações

desejadas.

Em termos da coleta de informações, blocos de texto são análogos ao casco de uma

tartaruga. Muitos predadores deixarão a vagarosa criatura ir porque simplesmente não vale o

tempo e os esforços de quebrar e abrir o casco para chegar à carne. Da mesma maneira, os

usuários da Web costumam pensar que pesquisar um texto denso leva mais tempo do que isso

vale a pena.

O texto deve ser breve, escaneável e acessível. Em geral, você deve utilizar metade das

palavras para a Web do que utilizaria para mídias impressas. Se seu alvo for um público

amplo de consumidores que inclui pessoas sem ou com baixo nível de escolaridade, é melhor

ter por objetivo incluir 25% das palavras usadas nas mídias impressas. Na redação para a



[email protected]

______________________________________________________________________

9

Web, é sempre melhor iniciar com a conclusão de modo que as pessoas que lêem apenas a

primeira ou segunda linha em uma página continuem obtendo o conteúdo principal.

3.5 Formas, cores e outros recursos gráficos

3.5.1 Cor

A cor não tem existência material e é

considerada muitas vezes como apenas um

fenômeno da luz.

A cor é uma importante propriedade

estética em uma página na Web. Devido a suas qualidades atrativas, podemos usar a cor para

identificar os elementos que devem atrair a atenção do usuário.

Quando usada indiscriminadamente, a cor pode ter um efeito negativo ou de distração.

Isso pode afetar não somente a reação do usuário em relação à página, mas afetar a

produtividade, pois se torna difícil focalizar na tarefa.

É necessário algumas recomendações para o uso da cor em monitores gráficos de

computadores. Estabelecer regras gerais ou específicas para o uso da cor é difícil devido a

diversidade de fatores que a influenciam.

O modo como a cor chaga aos nossos olhos, inevitavelmente, faz com que o celebro

ainda perceba significados inconscientes que ela muitas vezes transmite.

Graças a essa percepção inconsciente é que se faz necessário ao webdesigner, antes do

conhecimento teórico, o bom senso. Antes de escolher as cores para a composição do layout,

o profissional deve ter em mente dois pontos fundamentais:

O tipo de empresa para a qual está construindo o Website;

O público-alvo que esta empresa pretende atingir

O emprego das cores para comunicar significados nas Interfaces Humano-Máquina tem

sido alvo de numerosas recomendações ergonômicas. Essas aconselham o uso de cores

para transmitir informações, chamar a atenção, contrastar e associar objetos de interação.

Para que a utilização das cores seja eficaz, deve-se atentar para três aspectos:

A legibilidade final da informação;

Os efeitos das cores sobre a performance perspectiva do usuário;

As possibilidades dos dispositivos físicos.

IMPORTANTE



[email protected]

______________________________________________________________________

10

Recomendações sobre o Uso de Cores (Shneiderman’ 98)

Utilize cores de forma conservadora e limitada (até 4 cores)

Pense primeiro em preto e branco

Considere os problemas de pares de cores e de usuários com deficiência

visual

Utilize cores para ajudar a formatação, aumentar a densidade de informação

e sinalizar mudança de estados.

Conheça as expectativas dos usuários sobre cores

Utilize cores de forma consistente.

Quanto ao uso das cores como recursos estéticos, recomenda-se cuidado com o uso

indiscriminado das cores para tais fins. As recomendações de ordem metodológica indicam

que se faça primeiro o projeto da interface em preto e branco, e só depois de tudo pronto e

testado (quanto aos significados transmitidos) se passe a colorir a interface. Nesse momento:

Use poucas cores;

Use cores neutras;

Use cores com a mesma luminância (brilho);

Use cores brilhantes com cautela

Além desses pontos especiais, o webdesigner precisa lembrar que a cor relaciona-se

diretamente aos sentimentos humanos. Assim, o uso correto das cores e suas combinações

podem ser o diferencial de seu trabalho final, sendo interessante conhecer e entender breves

noções dos efeitos físicos e psicológicos das cores:

Amarelo: A cor amarela transmite alegria e vivacidade. Chama a atenção em qualquer

ponto onde é aplicada, e é perfeita para o destaque de algum elemento no layout.

O amarelo desperta.

Azul: O azul é uma das cores mais utilizadas em websites, é uma das preferidas por quase

todas as pessoas. Transmite sensação de tranqüilidade, profundidade (quando escuro) e

limpeza (quando claro). O azul dá sono.

Branco: A cor da pureza. Representa o vazio, a clareza, o início. Websites com grande

predominância de branco tendem a ser mais legível aos usuários.



[email protected]

______________________________________________________________________

11

Cinza: O cinza transmite a sensação de algo impuro e indeciso (não é claro e nem escuro,

preto ou branco). É uma cor triste e sombria, mas também pode definir um Website sóbrio

e “sério”.

Laranja: Cor que “alimenta”, produz uma sensação de aconchego e intimidade. É uma

cor quente e permite resultados excelentes quando utilizada na intensidade e em lugares

corretos.

Marrom: Cor sóbria e sólida. Deve ser usada com moderação por trazer um aspecto

muito pesado a qualquer local onde esteja aplicada.

Preto: A presença de todas as cores. A eternidade, elegância. A cor da morte. Presente em

99% dos Websites, na sua maioria em pequenos detalhes.

Rosa: É uma cor feminina, por excelência. Sugere doçura, simplicidade, intimidade.

Roxo: É uma cor que pode apresentar duas funções distintas. O roxo tanto pode conferir

um aspecto divertido quanto misterioso, nobre, dependendo das cores com as quais é

associado.

Verde: É a cor da natureza. Suas diversas tonalidades transmitem diferentes sensações,

nenhuma delas relaciona à alegria ou paixão. O verde mais claro é, assim como o azul,

calmo, agradável. O verde escuro transmite idéia de profundidade, seriedade. Já o verde

amarelado confere a sensação de alegria, ou até mesmo serenidade. O verde é uma cor que

deve ser utilizada com muito critério e moderação, já que diversos tons têm a propriedade

de desagradar os olhos (por exemplo, o verde-bandeira). O verde descansa.

Vermelho: O vermelho está intimamente ligado aos desejos passionais. È quente,

impotente, chamativo. Suas diversas nuances apresentam diversos significados: o

vermelho escuro sugere sobriedade e poder; o vermelho cereja é apaixonado, feminino,

sensual; o vermelho mais claro é energizante forte. O vermelho atrai a atenção e pode

causar irritação.

3.5.1.1 Combinação de Sucesso e Combinações Desastrosas.

Ao elaborar o projeto de um Website, tenha em mente que o primeiro mandamento da Internet

e do bom design é a legibilidade. A maioria dos Websites profissionais opta por cores mais

claras em cerca de 70 a 80% da área do Website. Um Website com muitas áreas escuras

desagrada os olhos e dificulta a leitura, mesmo quando as fontes estão definidas com um



[email protected]

______________________________________________________________________

12

padrão de cor mais claro. Prefira sempre deixar a maior parte do site em cores mais claras,

preferencialmente o branco, e reserve as cores escuras para detalhes de layout.

A seguir, as melhores e piores combinações de cores para detalhes de Websites.

3.5.1.2 Acerte Sempre

Amarelo x Azul

Uma combinação original e que agrada a maioria dos usuários. Neste caso, é

recomendado testar tons de azul mais claro e acinzentados (escolha a cor #9AB5DA) e

aproveita o amarelo puro (#FFFF00) na maioria dos detalhes pequenos e linhas de

composição do layout.

Verde x Branco

O verde é uma cor muito perigosa. A escolha criteriosa do tom é essencial para criar

um layout agradável e, ao mesmo tempo, sofisticado. Recomendado esta combinação a partir

de tons de verdes mais metálicos e levemente azulados (Experimente a cor #78A996) que

combinados com o branco, sugerem limpeza e bom gosto.

Cinza x Vermelho Escuro

Para esta combinação, escolhemos um tom de cinza mais claro (por exemplo,

#D6D6D6) com um vermelho mais escuro (por exemplo, #890000) que sugere força e

“aquece” os tons muito frios de cinza.

Azul x Cinza

Uma combinação fria, mas muito agradável. Milhares de sites na Web optam, com

sucesso, por estas tonalidades, clássicas, sofisticadas e quase sempre indispensáveis quando

não se quer errar. Mas atenção! Existem alguns tons de azul recomenda-se muita cautela no

uso, por exemplo o azul puro (#0000FF). Ele remete aos primeiros padrões de links da Web e,

portanto, é uma cor ultrapassada. Alem do mais, é uma cor muito forte e, se aplicada a

grandes áreas, tende a desagradar os olhos. Opte sempre por tons de azul acinzentados em

grandes áreas (#9AB5DA). Qualquer tom de cinza é permitido, desde o mais claro até o

grafite, mas misture azul escuro e grafite com cautela, para não deixar o visual pesado.

Preto x Cinza



[email protected]

______________________________________________________________________

13

Apesar de ser duas cores que „intimidam”, preto e o cinza são muito elegantes. Você

pode compor um layout muito bonito se abusar de tons de cinza mais claros (observe o

#D4D4D4) e escolher alguns detalhes em preto. Recomendado, entretanto, evitar áreas

extensas em preto (é uma cor que dificulta a leitura, mesmo com fontes brancas) e escolher

uma terceira cor para detalhes mínimos. Como o azul ou o laranja, por exemplo.

Preto x Vermelho Escuro x Branco

O preto e o vermelho escuro são duas cores muito pesadas que, sozinhas, não são

recomendados em uma composição de uma página. Entretanto, se houver predominância do

branco, estas duas cores podem conferir um aspecto maravilhoso ao desenho do site. Lembre-

se sempre de aproveitar detalhes em cores escuras e deixar a maior parte do layout em tons

mais claros, devido a legibilidade. Experimente o tom vermelho #B70909.

Amarelo x Cinza x Laranja

O amarelo e o laranja são cores alegres e quentes e, se combinadas com o triste cinza,

conferem um ar moderno e original ao Website. Experimente confeccionar um layout em

tons de cinza e arrematar sua criação com tons de laranja (#FFBA00, mais amarelado e

#FFA200, mais avermelhado, por exemplo) ou amarelo puro (#FFFF00).

Rosa x Azul

Essa combinação permite um resultado bastante agradável, mas dificilmente estas

cores serão usadas senão em casos específicos, como em um site feminino ou infantil. Para

esses casos, prefira sempre tons claros (o tom de rosa #FFDAEC e o azul #DAEBFF são bons

exemplos). No entanto, nada o impede de inventar novos usos para essas cores. Afinal, a

criatividade é o fator “motor” do trabalho do Webdesigner.

Azul x Laranja

Assim como o azul e o amarelo, o Webdesigner obterá excelente efeito se combinar

tons de azul (acinzentados, sempre) com laranja (neste caso, os tons mais vivos são ideais),

este último em detalhes de destaque da página. O laranja tem a propriedade de aquecer o frio

azul, e conferir um visual moderno e diferente ao layout.

Bege x Branco



[email protected]

______________________________________________________________________

14

O bege (#DAD1BA) é uma tonalidade muito suave e pode ser combinada livremente

com o branco, compondo Websites para qualquer público-alvo. Esta é a combinação mais

versátil de todas as apresentadas. Use-a sem medo.

3.5.1.1 Muito Cuidado com

Verde x Amarelo

Apesar de o verde e o amarelo serem motivos de orgulho nacional, não recomendado

essas duas cores juntas em um layout de Website. O verde por si só é uma cor muito difícil de

combinar, ficando melhor quando combinado com cores neutras (branco, cinza). Além disso,

diversos tons de verde são desagradáveis aos olhos numa tela de monitor. O amarelo é muito

vivo e tende a “brigar” com o verde, esteja ele em qualquer tom.

Em caso de uso indispensável (exigências do cliente), recomendado que seja mantido

um layout predominante em verde metálico, mais azulado e acinzentado, e o uso de amarelos

mais suaves (#FFF6D4) apenas como detalhes.

Vermelho x Preto

O vermelho e o preto são cores que transmitem muito peso e sensualidade e põem

intimidar os usuários.

Evite usar essas cores muito fortes combinadas sozinhas, como cores únicas de uma

página. Além de promoverem a não legibilidade do site, podem incomodar algumas pessoas

por cansar rapidamente os olhos. Se estiver utilizando uma terceira cor mais clara e neutra,

utilize com descrição e vermelho e o preto em detalhes.

Verde x Vermelho

O vermelho e o verde são duas cores que “brigam” entre si, já que o verde não é

neutro e o vermelho impõe-se em cerimônias. Cuidado com essa combinação, a não ser que o

cliente exija. Neste caso, prefira os tons de verdes acinzentados(.#7EBCB4) e vermelhos

escuros(#951B1B).

Laranja x Vermelho ou Amarelo x Vermelho

Duas cores muito quentes devem ser utilizadas com muita discrição. Essa combinação,

por si só, não deve ser adotada como os únicos tons de um layout. Utilize-a em companhia de



[email protected]

______________________________________________________________________

15

um tom frio (cinza ou azul) e prefira sempre o vermelho em tom mais escuro que confere

maior suavidade. O laranja e o amarelo puros podem ser utilizados, desde que com muita

cautela. Quando mal aplicadas, essas cores podem resultar num grande “carnaval” visual.

Roxo x Preto

O roxo é uma bela cor, mas ao mesmo tempo muito estranha. Ele pode fazer parte com

sucesso de layouts mais divertidos e jovens, quando levemente mais claros(#D018F1) e

combinado com cores alegres, como o amarelo. Entretanto, o roxo ainda traz em si a sensação

de mistério e medo, e unido ao preto, sugere morbidez. Se não é essa impressão que você quer

transmitir, evite combinar preto e roxo escuro sozinhos em um layout. Se for inevitável, use-

as em detalhes discretos e abuse do branco.

Branco x Amarelo

Assim como cores muito escuras tendem a pesar um Site, cores muito claras

desagradam os olhos com a mesma intensidade. Apesar de ser um cor muito alegre, o amarelo

puro, quando combinado ao branco, tende a ficar muito apagado e “dói” nos olhos do usuário

de seu Website.

Para resolver este problema, destaque as áreas em amarelo com preto, que confere um

interessante e moderno efeito.

Recomendações Gerais

Cuidada redobrado ao utilizar as seguintes cores: Roxo: (use o bom senso e analise os

efeitos que essa cor tão complicada causa aos seus olhos e nos do usuário) e preto (evite

utilizar como cor de fundo – sugere amadorismo e dificulta a leitura);

Evite misturar dois tons quentes e predominantes na aparência geral de um layout; procure

sempre quebrar o “calor” com algum tom frio;

Cuidado ao usar dois ou mais tons muito luminosos como únicos em um Website (por

exemplo, branco e amarelo – tendem a ferir a vista tanto quanto um site muito escuro);

Evite combinar apenas preto e cinza em um portal ou Website muito visitado. Quebre a

monotonia utilizando uma terceira cor mais alegre;

Tenha extremo cuidado com algumas tonalidades de verde. O verde é uma cor muito

bonita e pode favorecer o seu layout quando bem aplicada;



[email protected]

______________________________________________________________________

16

Observe, acima de tudo, o público-alvo de seu Site. Isso determinará a utilização de cores,

como o rosa, restrita basicamente a sites femininos ou infantis.

E, acima de tudo, preste muita atenção na legibilidade do Site. Cores muito escura tendem

a ofuscar a leitura dos textos, mesmo quando eles estão definidos com cores claras.

Recomenda-se que as cores de uma página na Web não sejam selecionadas

separadamente, e sim, dentro de um contexto geral.

Pessoas idosas têm uma sensibilidade reduzida para cores, o que, por sua vez, pode

requerer o uso de cores mais brilhantes.

Evite usar azul para pequenas áreas. Uma pequena área em azul vai parecer mais

desbotada do que uma grande área da mesma cor.

3.5.2 Fundo

O fundo de uma página na Web é composto por padrões de texturas e/ou cores. A escolha do

fundo desempenha um papel muito importante no resultado final de urna página. Ele pode

aumentar o interesse pelo projeto visual.

Para que esse fundo seja harmonioso com o restante da página ele deve seguir as

recomendações e observações sabre cores.

Utilize fundos simples para não comprometer a compreensão da página, a legibilidade do

texto e o tempo para ser carregada.

O fundo não deve chamar mais atenção do que a informação.

Use figuras (texto, ícones, figuras, etc.) cromática (azul, verde, vermelho, etc.) sobre

fundo acromático (branco, preto e cinza) e vice versa.

3.5.3 Fontes

As fontes têm muitas funções de modo a propiciar formas de letras para a leitura. Assim como

outros elementos visuais, as fontes organizam a informação ou criam uma disposição

particular.

Variando o tamanho e o peso de uma fonte, nós vemos um texto como sendo mais ou menos

importante e, também, percebemos a ordem em que ele deve ser lido. Pela própria natureza da



[email protected]

______________________________________________________________________

17

tela do computador, as fontes são geralmente menos legíveis na tela do computador do que

quando impressas.

As fontes podem ser usadas para realçar uma página na Web da mesma maneira que a

cor. Ao usar as fontes em uma simples página é estabelecida uma relação que pode ser

concordante, conflitante ou contrastante . (WILLIAMS, R., 1995)

Concordante

Uma relação concordante ocorre quando usamos somente uma família de fontes, sem

muitas variações de estilo, tamanho, peso. É fácil manter a harmonia da página e esta

disposição tende a conferir ao material uma estética calma ou formal.

Um design estará em concordância quando se utiliza apenas uma fonte e os outros

elementos que compõem a página possuírem as mesmas qualidades daquela fonte. Talvez

utilize a versão em itálico da mesma fonte; um tamanho maior nos títulos, uma imagem, mas

a impressão básica ainda será concordante.

Conflitante

Uma relação conflitante ocorre quando combinamos fontes similares em estilo, tamanho,

peso. As similares são incomodas porque as atrações visuais não são as mesmas, mas também

não são diferentes, portanto, criam um conflito.

A fonte do título e das outras

linhas é diferente. O contorno não

tem o mesmo peso visual que o



[email protected]

______________________________________________________________________

18

A legibilidade de um texto depende não

somente da forma das letras, mas do

tamanho do corpo utilizado e do contraste

desta fonte com o background da página.

O bom senso não pode ser esquecido na

Web.

tipo e as linhas, e eles não estão contrastando muito.

Contrastante

Uma relação de contrastante ocorre quando combinamos fontes separadas e elementos

nitidamente diferentes entre si. Os designers visualmente interessantes têm bastante

contraste e os contrastes são enfatizados.

O contraste marcante atrai os olhos. Uma das maneiras mais eficazes, simples e

satisfatórias de se conferir contraste a um desenho é através da tipologia (Estudo das

fontes).

O contraste entre as fontes está nítido: a

fonte em negrito contrasta com a fonte

muito leve. As espessuras das linhas do

contorno e de preenchimento estão

nitidamente diferenciadas.

Recomendações:

As fontes com serifas são mais

apropriadas para documentos formais.

Uma organização clara e regular de tipografia na página aumenta a legibilidade e a

leiturabilidade.

De preferência, use caixa baixa ou caixa mista (caixa alta e baixa) do que caixa alta.

Usar muitas fontes normalmente resulta em poluição visual.

O contraste não funciona apenas na estética do

material. Ele está intrinsecamente relacionado

à organização e à clareza das informações

colocadas na página. Nunca esqueça que o

objetivo é comunicar! (WILLIAMS, R., 1995)

)



[email protected]

______________________________________________________________________

19

Fontes de diferentes famílias (por exemplo, Times New Roman e Arial) de um mesmo

estilo (com ou sem serifa) não devem ser misturadas em nenhuma circunstância.

Evite fontes muito grandes, que “gritam” com o usuário

3.5.4 Texto

O texto é o resultado do agrupamento de letras de modo a formar palavras. O uso de

tamanhos e tipos de fontes coerentes no texto ajudaria compreensão e apreciação de uma

página na Web pelo leitor, ou seja, na legibilidade e na leiturabilidade desta página.

Itálico é útil para atrair a atenção do usuário sem causar quebras severas no ritmo de

leitura.

O comprimento ótimo de uma linha para textos legíveis é de 10 a 12 palavras ou de 40

a 60 caracteres por linha.

Uma organização clara e regular de fontes na página aumenta a legibilidade e

leiturabilidade do texto. Exemplo:

ATENÇÃO!

Podem ser usados caracteres em caixa alta (maiúscula) para chamar atenção do usuário.

Porém, o uso exclusivo de maiúsculas deve ser evitado, pois texto somente em caixa alta

torna a leitura cansativa devido ao maior esforço visual e mental para identificação das

letras e, consequentemente, das palavras. É enganoso pensar que a caixa alta facilita a

identificação de um item ou frase dentre os demais. Um termo ou frase em maiúsculo pode

se destacar entre outros em caixa baixa, mas se todos eles forem em caixa alta, o efeito é o

contrário trazendo as dificuldades de leitura.

Além disso, há uma convenção de Internet que determina a caixa alta como sinal de

voz alta, grito, exasperação, ou seja, sinal negativo em um diálogo.



[email protected]

______________________________________________________________________

20

3.5.5 Ícones

Ícones, índices e símbolos são freqüentemente utilizados em interfaces com o usuário.

Esses elementos proporcionam um guia funcional e estético para interfaces gráficas como, por

exemplo, uma homepage que utiliza centenas de ícones diferentes. Esses elementos

pictográficos e ideográficos funcionam como um sistema de signos. Nenhum grupo de

regras ou normas pode garantir que um ícone seja perfeitamente projetado, mas as

observações e recomendações citadas aqui podem ajudar nesta tarefa.

Ícones são usados por toda a Web para representar objetos ou tarefas. Em função dos

ícones representarem os objetos de uma página na Web, é importante proporcionar

aqueles que efetivamente comuniquem a sua proposta.

Os ícones e símbolos podem substituir a linguagem escrita e contribuir para que as

páginas na Web tenham compreensão internacional.

Os espaços poupados em menus, mapas e diagramas com a utilização de ícones pode m ser

significantes.

Mais informação pode ser colocada dentro de uma determinada janela ou de um espaço na

tela.

Um ícone ocupa menos espaço do que o seu equivalente em palavras.

Ícones bem concebidos, sistematicamente projetados e efetivamente organizados,

devem ser fáceis e rápidos de reconhecer em um contexto. Faça do ícone um documento

reconhecível e representativo do conteúdo da sua página.

3.5.6 Formas

O que nós vemos influencia como sentimos e o que entendemos. A informação visual

comunica de modo não verbal e para isto pode incluir sinais emocionais que motivem,

dirijam, ou distraiam.

O projeto visual de uma página na Web deve ser fácil de aprender e usar pelo fato de

empregar efetivamente a comunicação visual e a estética. Ele ë uma ferramenta importante

para a comunicação.

Como você organiza a informação na página pode fazer a diferença entre comunicar

uma mensagem ou deixar o usuário perplexo ou sobrecarregado. Até mesmo a funcionalidade

da página pode ser afetada, se ela não tiver uma apresentação bem projetada. Um bom layout



[email protected]

______________________________________________________________________

21

depende do contexto em que está inserido e cumpre uma proposta maior do que simplesmente

decorativa, pois todos os elementos visuais influenciam uns aos outros.

Use frames com cuidado: O uso de frames pode ajudar a orientar o usuário a navegar

no site, mas cuidado com o momento da impressão para não imprimir o frame errado.

Recomenda-se agrupar os diferentes tipos de informação da sua página na Web. Nós

organizamos o que lemos e o que pensamos sobre urna informação, agrupando-a

espacialmente.

Agrupe cada item de informação em pequenos números de categorias.

Informações Não agrupadas Informações agrupadas

Use cores e ícones para atrair a atenção da sua página na Web: O olho é sempre

atraído por elementos coloridos antes dos elementos em preto e branco e por desenhos antes

do texto.

Respeite as convenções de layout de leitura da informação: Em países ocidentais isto

significa da esquerda para a direita e de cima para baixo. As informações mais importantes

devem estar localizadas no canto superior esquerdo.

Quando a informação é posicionada verticalmente, alinhe os links por suas extremidades

esquerdas (em países ocidentais). Isso geralmente facilita a compreensão da informação pelo

usuário,



[email protected]

______________________________________________________________________

22

Quando projetar a organização e a composição de elementos visuais da sua página na

Web, recomenda-se respeitar os seguintes princípios: hierarquia de informação, foco e ênfase.

Estrutura e equilíbrio, relação de elementos e unidade de integração.

3.6 WIMP (Windows, Icons, Menus, and Pointers)

O estilo de interação WIMP, um

acrônimo em inglês para Janelas,

Ícones, Menus e Apontadores,

permite a interação através de

componentes de interação virtuais

denominados widgets. Este estilo é

implementado com o auxílio das

tecnologias de interfaces gráficas,

que proporcionam o desenho de

janelas e o controle de entrada

através do teclado e do mouse em

cada uma destas janelas. Os softwares de interfaces que implementam estes estilos permitem a

construção de ícones que permite a interação através do mouse, comportando-se como

dispositivos virtuais de interação.

WIMP não deve ser considerado um único estilo, mas a junção de uma tecnologia de

hardware e software, associada aos conceitos de janelas e de widgets que permitem a

implementação de vários estilos. Nas interfaces WIMP é possível encontrar os estilos de

menus, manipulação direta, preenchimento de formulário e linguagem de comandos. WIMP

pode ser considerado um estilo ou um framework de interface apoiado pela tecnologia de

interfaces gráficas (GUI – Graphical User Interfaces). A figura abaixo apresenta uma tela de

aplicação no estilo WIMP.



[email protected]

______________________________________________________________________

23

filosofia de projeto

Documents