FILOSOFIA DE PROJETO by MARIA CRISTINA OLIVEIRA

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________

CAPÍTULO III FILOSOFIA DE PROJETO

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.

Usabilidade é o termo usado para descrever a qualidade da interação dos usuários com uma determinada interface.

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________

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:

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.

 Facilidade de aprendizado do sistema: Tempo e esforço necessários para que os usuários atinjam um determinado nível de desempenho;

Se algo for difícil de usar, não será usado tanto.

 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 2

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________ 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 proble mas 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) “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!”

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 3

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________ 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

Heurísticas de usabilidade

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;

Regras de Ouro

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

Oito proble mas 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.



Atenção Alunos! Não comentam estes erros em seus projetos!

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

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________ 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 popup, 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.

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

publicidade.

itens

parecidos com 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 7

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________ 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. 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)

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

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)

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

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________ 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

IMPORTANTE

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

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

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 11

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________ 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 li mpeza 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

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________ 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. Lembrese 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 13

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________ 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 14

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________ 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, useas 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; 15

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 co mpreensã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

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________ 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

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

preenchimento estão

nitidamente diferenciadas. 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) )

Recomendações: 

fontes

com

serifas

são

apropriadas para documentos formais.

mais

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.



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

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.

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________ 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 20

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________ 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,

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________ 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

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.

Curso Superior de Sistemas para Internet Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães lmagalhaes@viannajr.edu.br ______________________________________________________________________