Upload
maria-cristina-oliveira
View
218
Download
0
Embed Size (px)
DESCRIPTION
Material de estudo da semana.
Citation preview
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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!”
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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!
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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.
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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.
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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;
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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)
)
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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.
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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,
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
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.
Curso Superior de Sistemas para Internet
Interface Homem-Máquina Prof.ª Lúcia Helena de Magalhães
______________________________________________________________________
23