EAD

IHC na Web

1. OBJETIVOS
• Entender a importância da IHC na web.
• Conhecer o uso dos padrões para desenvolver interfaces úteis, usáveis e acessíveis.

2. CONTEÚDOS
• História do Padrão.
• Padrões de Montero.

3. ORIENTAÇÕES PARA O ESTUDO DA UNIDADE

Antes de iniciar o estudo desta unidade, é importante que você leia as orientações a se-
guir:
1) Recomendamos o acesso ao seguinte endereço eletrônico: <[Link]
tecnologia-e-ciencia/noticias/acesso-a-internet-no-brasil-cresce-75-3-em-tres-
[Link]>. Nele, você encontrará estatísticas que comprovam o cresci-
mento dos acessos à web. Poderá também pesquisar em outros sites que possuem
estatísticas de quais são os tipos de usuários que acessam à web, bem como de qual
é o perfil dos usuários que utilizam tal recurso.
2) Com base nos conteúdos estudados até o momento, faça um simples exercício: sele-
cione alguns sites que você gosta ou que costuma acessar e analise as características
que o fazem apreciá-los. Em seguida, identifique quais são as características que as
interfaces desses sites têm em comum. Assim, você terá a noção de um dos conteúdos
que serão abordados no decorrer desta unidade.
138 © Interface Humano-Computador

3) Sugerimos que você realize uma pesquisa na web, buscando artigos, fotos etc., de
assuntos relacionados às seguintes palavras-chave: "site", "interface", "interação
humano-computador" e "padrão". Com essa pesquisa, você poderá obter resultados
interessantes, que contribuirão para o seu conhecimento sobre a IHC, porém com
ênfase na web.

4. INTRODUÇÃO À UNIDADE
Preocuparmos-nos com a IHC será essencial para o desenvolvimento de qualquer sistema
computacional, seja ele para computadores do tipo desktop ou móvel (celulares e IPhone) como
também para sistemas embarcados encontrados em forno micro-ondas, em relógio etc., afinal,
todos esses sistemas foram criados para que as pessoas os utilizem.
Nesta unidade, em especial, estudaremos a influência e a importância da IHC para o de-
senvolvimento de sistemas web. Contudo, vale ressaltar que o conteúdo abordado pode ser
utilizado para o desenvolvimento de qualquer tipo de sistema, inclusive para web, ou seja, é
possível pensar nos fatores humanos, utilizar o Projeto Centrado no Usuário, a Prototipação, a
Avaliação Heurística, entre outros conceitos estudados até aqui. Contudo, o estudo específico
da IHC na web é interessante devido às diferentes características que os sistemas web possuem
e ao crescimento do número de pessoas que utilizam esse tipo de sistema.
Segundo o IBGE (Instituto Brasileiro de Geografia e Estatística), o percentual de brasileiros
que acessam a internet chegou a 34,8%, o que representa 56 milhões de usuários. Esse índice,
que se refere a 2008, teve um aumento de 75,3% em relação a 2005, quando 20,9% da popula-
ção usavam a web (NOTÍCIAS R7, 2010).
Outro dado relevante é que a pesquisa registrou que o uso da rede predomina entre as
pessoas com maior grau de escolaridade. Entre aqueles, com pelo menos 15 anos de estudo, o
percentual de pessoas que utilizam a internet é de 80,4% – levando em consideração as pessoas
que estudaram dos 11 aos 14 anos, o índice é de 57,8%. Já entre as pessoas com menos de qua-
tro anos de estudo, o percentual chega a 7,2%. Contudo, segundo o IBGE, entre 2005 e 2008, o
maior crescimento aconteceu na categoria que inclui as pessoas com menos escolaridade.
Percebeu o que esses dados mostram? Por meio dessa pesquisa é possível notar que uso
da internet está em pleno crescimento no Brasil, ou seja, investir no desenvolvimento de siste-
mas para web pode ser um negócio bom e vantajoso. Mas perceba que além do crescimento,
há uma grande diversidade (por grau de instrução, região do Brasil, cultura etc.) de pessoas que
acessam a internet.
Assim, ao contrário de sistemas para desktop, por exemplo, para uma empresa específica,
quando você desenvolve sistemas para web é mais complicado pensar nos fatores humanos de
um grupo de pessoas com uma cultura, pois outras pessoas também terão acesso ao sistema,
por isso é importante que qualquer pessoa consiga acessar e navegar.
Lembre-se de que, mesmo que um sistema web possa ser acessado por qualquer pessoa,
é sempre importante pensar em um público-alvo. Por exemplo, será um site para crianças de
uma determinada faixa etária, com um grau de escolaridade, para mulheres com algumas carac-
terísticas específicas, que recebem uma certa renda etc. Há, porém, estratégias que podem ser
utilizadas para desenvolver o mínimo, para que qualquer pessoa utilize o sistema.
A estratégia que apresentaremos nessa unidade é chamada de "Padrão". Observe que
uma pessoa pode acessar várias paginas web no mesmo dia ou, até no mesmo, minuto. Então,
 © U6 – IHC na Web 139

imagine a dificuldade que essa pessoa teria se cada site acessado cobrasse uma forma de inte-
ragir totalmente distinta, com menus, informações, botões e outras características diferentes
uma das outras.
Com certeza, a navegação nesses sites seria muito complicada, pois, naturalmente, as pes-
soas utilizam o que aprenderam e/ou já estão acostumadas para realizar as ações, assim, a
maneira que uma pessoa navega em um determinado site vai influenciar na navegação de outro
site. Por isso há a importância de utilizar o padrão, ou seja, algo conhecido e já assimilado pelas
pessoas no desenvolvimento de sistemas computacionais, especialmente para web, em que a
quantidade e diversidade de pessoas é bem maior.

Curiosidade–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Antes de iniciarmos a explicação de um padrão web, apresentaremos uma descrição da história do padrão. Esse
assunto é interessante e útil para você perceber a evolução e a importância de se utilizar os padrões.
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

5. HISTÓRIA DO PADRÃO
A ideia de padrão surgiu de um arquiteto chamado Alexander (ALEXANDER et al., 1977),
que planejava e construía prédios e casas para as pessoas. Depois de anos de experiência, Ale-
xander percebeu que quando falava de um determinado assunto relacionado à construção, o
cliente não o entendida e, portanto, a comunicação tornava-se complicada, pois, às vezes, fala-
va algo e o outro pensava diferente ou vice-versa. Com isso, Alexander descobriu que, ao ilustrar
algo para o cliente, ficava mais fácil a comunicação, porque, se o cliente "visse" o que estava
sendo falado, era mais fácil para ele entender e expor as suas opiniões.
Durante a sua carreira, Alexander também observou que, muitas vezes, os mesmos pro-
blemas sempre se repetiam, mas, devido à sua experiência, já conhecia algumas maneiras de
solucioná-los, por isso teve a ideia de documentar essas soluções para os problemas, conside-
rando um determinado contexto. Por exemplo, se o cliente quisesse uma piscina em sua casa,
poderia ter um padrão que informasse qual a melhor maneira de se construir essa piscina e uma
imagem ilustrando como seria o resultado final. Assim, o arquiteto tinha em mãos algo impor-
tante para ajudá-lo a construir a piscina, juntamente com uma imagem para conversar com o
cliente.
Nesse contexto, surgiu a ideia de padrão, um documento que constava a solução para um
determinado problema. É importante lembrar que algo só é definido como padrão quando a
solução é aplicada várias vezes, em um mesmo problema, e o resultado obtido é satisfatório.
Por isso, quando seguimos um padrão, podemos ter a certeza de estar seguindo algo que já foi
utilizado por muitas pessoas e que, na maioria dos casos, obteve resultado satisfatório.
Outras áreas também começaram a utilizar essa estratégia, inclusive a computação, po-
rém, nesta área, a ênfase foi em utilizar os padrões para transmitir conhecimento entre profis-
sionais, ou seja, se um profissional vai desenvolver um sistema, ele pode utilizar os padrões já
definidos para garantir, também, a qualidade ao sistema, pois ele seguirá algo que foi compro-
vadamente eficaz (BORCHERS; FINCHER; GRIFFITHS; PEMBERTON; SIEMON , 2001).
A seguir, apresentaremos alguns padrões conhecidos e utilizados para desenvolver siste-
mas web, chamados de Padrões de Montero.

Claretiano - Centro Universitário

 140 © Interface Humano-Computador

6. PADRÕES DE MONTERO
Os padrões propostos por Montero et al. (2002) para projeto de sites web abrangem, sufi-
cientemente, todos os aspectos da interação web. A Figura 1, a seguir, apresenta os 23 Padrões,
que são divididos em três categorias: web site, páginas web e ornamentais.
Os Padrões da categoria web site apresentam características comuns que são encontradas
em vários sites web e podem ser aplicados em diversos domínios. Os Padrões da categoria pági-
nas web estão relacionados ao projeto específico de uma página, apresentando elementos e ca-
racterísticas comuns quando se projetam sites. E os Padrões da categoria ornamentais apresen-
tam características decorativas para o site, preocupando-se, também, com a sua usabilidade.

Fonte: MONTERO et all., 2002, p. 138.

Figura 1 Linguagem de padrões para projeto de sites web.

Observe que nos padrões descritos por Montero há um padrão ligado ao(s) outro(s), isso
é para você saber, que, no momento em que for aplicar um padrão, outros também poderão
ser utilizados para complementá-lo. A seguir, são descritos cada um dos Padrões agrupados por
web sites, páginas web e ornamentais.

7. PADRÕES DE WEB SITES

Os Padrões de web sites são cinco: Welcome, Polyglot, Ready, Indication e Similatity.

Welcome
Contexto:
Quando um usuário acessa um web site, ele necessita saber onde está, o que pode fazer e
o que necessita para visitar o lugar.
 © U6 – IHC na Web 141

Problema:
Como o usuário sabe onde ele está?
Solução:
Forneça um lugar para a recepção, em que as condições de acesso possam ser avaliadas:
• Permita ao usuário entrar na homepage e em outros locais do site (Indications).
• Obtenha informações do usuário (linguagem e resolução) (Ready).
• Informe sobre as melhores condições para visitar o site (Polyglot).
• Informe sobre o conteúdo (About This) e o seu proprietário (Contact Us).

Observação: ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Em muitas ocasiões, Welcome e Homepage são a mesma página.
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Como exemplo, observe a Figura 2, representada a seguir:

Figura 2 Exemplo Welcome.

Polyglot
Contexto:
Permitir o acesso a todos.
Problema:
Como o usuário utiliza com sucesso o web site e as informações acessadas em seu próprio
ritmo?

Claretiano - Centro Universitário

 142 © Interface Humano-Computador

Solução:
Utilizar a linguagem do usuário é "projetar para todos":
• Aplique técnicas de projetos universais.
• Forneça aos usuários informações, para que eles saibam se podem visitar o site sem
problemas (Ready).
• Considere o tamanho do monitor, a resolução da tela do usuário, a velocidade de cone-
xão, o tempo de download, as fontes familiares e seus tamanhos (Danger).
• Forneça as informações de modo apropriado (Polite).
Como exemplo, veja a Figura 3, a seguir:

Figura 3 Exemplo Polyglot.

Ready

Contexto:
Os usuários que desejam visitar seu web site precisam instalar os plug-ins necessários.

Problema:
Como o usuário sabe que poderá visitar um web site sem problemas?

Solução:
Forneça ao usuário as ferramentas ou informações necessárias para que ele possa visitar
o web site de maneira adequada:
• O site poderá detectar se o usuário possui tudo o que é necessário e fornecer links para
download.
• O usuário não necessita saber de aspectos técnicos (Polite).
• Garanta que as páginas sejam usáveis mesmo quando scritps, applets ou objetos pro-
gramáticos estão desligados ou não são suportados.
• Forneça as informações em uma página alternativa acessível (Polyglot).
Como exemplo, observe a Figura 3, representada a seguir:
 © U6 – IHC na Web 143

Figura 4 Exemplo Ready.

Indication

Contexto:
Os usuários necessitam saber em quais lugares podem ir e o que eles podem fazer tendo
como referência o ponto em que estão.

Problema:
Como os usuários sabem onde podem ir e o que eles encontrarão no lugar em que esti-
verem?

Solução:
Forneça o mecanismo necessário (links significantes) que permitam ao usuário mover-se
de um lugar para outros:
• Forneça as informações de feedback sobre sua localização.
• Possibilite o retorno (Second chance) para um lugar seguro (Homepage).
• Coloque links importantes no alto da página.
• Rótulos de links descritivos podem ser utilizados (Polite).
• Se utilizar frames, coloque um título em cada um.
Como exemplo, observe a Figura 5:

Claretiano - Centro Universitário

 144 © Interface Humano-Computador

Figura 5 Exemplos Indication.

Similarity

Contexto:
Quando o usuário está navegando pela internet, ele precisa saber se está no mesmo web
site ou não.

Problema:
Como o usuário sabe se está visitando o mesmo web site?

Solução:
Projete o site utilizando os mesmos critérios: cores, fontes, localização de navegação e
layout.
• Use uma única folha de estilo para todas as páginas.
• Organize os documentos de modo que sejam lidos sem folhas de estilo (Polyglot).
• Informe o usuário, de maneira adequada (Polite), onde ele está (Location) e onde pode
ir (Indication).
• Ofereça mecanismo de desfazer/refazer (Second chance).
• Evite utilizar componentes que possam confundir o usuário (Danger).
Observe os exemplos apresentados na Figura 6, a seguir:
 © U6 – IHC na Web 145

Figura 6 Exemplos Similarity.

8. PADRÕES DE PÁGINA WEB

Os Padrões de páginas web são seis: Homepage, Second Chance, Form, Busy, Polite e Dan-
ger.

Homepage

Contexto:
Uma página é acessada de várias maneiras, entretanto, deve haver um ponto de referên-
cia, que responda às questões: Com quem? O quê? Quando? Onde?

Problema:
Como o usuário sabe onde ele está?

Solução:
Forneça uma página inicial em que o usuário se sinta à vontade:
• Homepage: local para que o usuário pode retornar se estiver desorientado.
• Layout do site: contém as informações importantes no topo da página (Novelty).
• Incluir logos (Tag line), mecanismos de busca (Search) e informações para contato
(Subscription, Contact us, about this).
Como exemplo, veja a Figura 7, representada a seguir:

Claretiano - Centro Universitário

 146 © Interface Humano-Computador

Figura 7 Exemplo Homepage.

Second Chance

Contexto:
O usuário quer controlar as suas operações.

Problema:
Como o usuário pode ter certeza de suas ações?

Solução:
Forneça elementos para desfazer/refazer, voltar e limpar:
• Forneça links para as páginas anteriores, os lugares anteriores ou a homepage.
• No formulário (Form), apresente dois botões: submit e reset.
Veja o exemplo representado pela Figura 8, a seguir:

Figura 8 Exemplos Second Chance.

 © U6 – IHC na Web 147

Form
Contexto:
O usuário necessita fornecer as informações.
Problema:
Como o usuário fornece as informações para o proprietário do web site?

Solução:
Apresente "brancos" apropriados para serem preenchidos, com indicativo claro e correto
de qual informação deve ser fornecida:
• Em algumas ocasiões, um formulário pode ocupar uma página inteira (completa).
• O usuário precisa saber se a sua submissão foi corretamente processada (Busy).
Observe, como exemplo, a Figura 9, representada a seguir:

Figura 9 Exemplo Form.

Claretiano - Centro Universitário

 148 © Interface Humano-Computador

Busy
Contexto:
Fazer downloads pode demorar muito tempo, gerando atrasos significantes ou sendo
completados de modos diferentes.
Problema:
Como o usuário sabe quando suas operações terminaram?
Solução:
Forneça feedback ao usuário:
• Apresente informações sobre o tamanho de qualquer elemento que o usuário pode
fazer download.
• As imagens e os textos podem ser carregados sobre demanda (Size).
Veja o exemplo a seguir:

Figura 10 Exemplo Busy.

Polite
Contexto:
As pessoas utilizam diferentes termos para descrever os conceitos.
Problema:
Como o usuário acessa o conteúdo da página de modo simples e apropriado?
Solução:
 © U6 – IHC na Web 149

Use a linguagem apropriada de maneira simples e clara para o conteúdo do site:

• Use rótulos associados aos seus controles (Indication).
• Expresse uma ideia em cada sentença (Tag Line).
• Use métodos, quando possível (como aqueles do Design participativo e Classificação de
cartões), que envolvam o usuário.
A seguir, observe a Figura 11 como exemplo:

Figura 11 Exemplo Polite.

Danger
Contexto:
Há um excesso de plug-ins disponíveis. Mas não se pode assumir que qualquer um os terá
ou usará uma particular configuração do computador.
Problema:
Como o usuário pode visitar um web site e não ficar confuso, desorientado ou ser inter-
rompido?
Solução:
Seja cuidadoso ao usar componentes desorientadores:
• Use fonte legível e cabeçalhos bem definidos, considere o tamanho do monitor, limite
o número de frames, gifs animados, flash, applets, músicas, rollovers, reduza a carga
de trabalho, não use blink ou elementos marquee e limite o tamanho da página (Size,
Colour).
• Use uma folha de estilo para controlar o layout e a apresentação.

Claretiano - Centro Universitário

 150 © Interface Humano-Computador

Observe o contraexemplo apresentado pela Figura 12:

Figura 12 Contra-exemplo Tag Line.

9. PADRÕES ORNAMENTAIS
Os Padrões de web sites são 12: Tagline, About This, Search, Novelty, Contact Us, Secret,
Subscription, Recognise You, Location, Colour, Size, Print.

Tagline
Contexto:
É necessário conhecer a proposta do web site.
Problema:
Como o usuário sabe qual é o propósito do web site?
Solução:
Forneça um slogan ou uma imagem que identifique o web site e o seu propósito:
• Resumido, simples e direto.
• Inclua uma descrição do site na janela do navegador.
Observe a Figura 13, como exemplo, a seguir:

Figura 13 Exemplo Tagline.

About This
Contexto:
Todo web site deve apresentar uma maneira fácil de encontrar informação sobre a companhia.
 © U6 – IHC na Web 151

Problema:
Como o usuário pode conseguir informações adicionais sobre o web site?

Solução:
Inclua um link para uma sessão "Sobre o site".
Como exemplo, observe a Figura 14, apresentada a seguir:

Figura 14 Exemplo About This.

Search

Contexto:
A busca é um dos principais elementos da homepage. É essencial que os usuários a utili-
zem de uma maneira fácil e sem esforço.

Problema:
Como o usuário saberá se o web site pode fornecer as informações que ele deseja?

Solução:
Forneça uma ferramenta de busca na homepage ou uma página com visão geral do web site.
A seguir, veja a Figura 15, como exemplo:

Claretiano - Centro Universitário

 152 © Interface Humano-Computador

Figura 15 Exemplos Search.

Novelty
Contexto:
Os usuários gostam de saber se existem novas funcionalidades, promoções, ofertas e no-
ticias no web site.
Problema:
Como o usuário saberá as novidades e as últimas notícias do web site?
Solução:
Forneça sugestões e novidades do web site de maneira limpa e intuitiva.
Veja a Figura 16, como exemplo:

Figura 16 Exemplo Novelty.

Contact Us
Contexto:
Todo web site deve fornecer um meio de contato.
Problema:
Como o usuário pode pedir informação adicional sobre o conteúdo do web site?
Solução:
Forneça um formulário, um local ou um link no web site em que o usuário possa conseguir
as informações adicionais sobre o proprietário e os produtos do web site.
 © U6 – IHC na Web 153

Observe o exemplo a seguir, na Figura 17:

Figura 17 Exemplo Contact Us.

Secret
Contexto:
Se o usuário oferece informações privadas, ele necessita saber a confiabilidade do sistema.
Problema:
Como o usuário pode ter certeza de que a informação fornecida será protegida?
Solução:
Forneça os mecanismos de segurança (acesso e privacidade) necessários para proteger o
usuário e o web site e informe ao usuário as condições de segurança.
Veja como exemplo, a Figura 18, apresentada a seguir:

Claretiano - Centro Universitário

 154 © Interface Humano-Computador

Figura 18 Exemplo Secret.

Subscription
Contexto:
Os usuários não desejam visitar o web site a todo o momento, mas, sim, saber quando os
novos produtos ou novidades aparecem.
Problema:
Como o usuário ficará sabendo de informações significativas para ele?
Solução:
Forneça um formulário, no qual o usuário pode conseguir a informação desejada, auto-
maticamente:
• O usuário deve ter certeza de que seu email não será divulgado a todos (Secret).
Observe os exemplos a seguir, representado pela Figura 19:
 © U6 – IHC na Web 155

Figura 19 Exemplos Subscription.

Recognize

Contexto:
Quando o usuário volta a um web site, ele necessita saber sobre as ações executadas na
sua última visita.

Problema:
Como o usuário pode saber em qual lugar ele já esteve?

Solução:
Guarde as informação sobre as ações do usuário, locais visitados, logins, documentos sal-
vos etc.:
• Uso de cookies.
• Links visitados.
Veja como exemplo, a Figura 20, mostrada a seguir:

Claretiano - Centro Universitário

 156 © Interface Humano-Computador

Figura 20 Exemplo Recognize.

Location
Contexto:
Quando o usuário chega a um web site, ele precisa saber em qual lugar ele está.
Problema:
Como o usuário sabe em qual lugar ou qual é a sessão que ele está?
Solução:
Forneça informações sobre a localização do usuário no web site.
Observe o exemplo, representado pela Figura 21:

Figura 21 Exemplo Location.

 © U6 – IHC na Web 157

Colour
Contexto:
A cor deve ser considerada no início do projeto de um web site.
Problema:
Como o usuário pode acessar as informações de maneira adequada?
Solução:
Forneça a informação usando cores adequadas nas fontes, nos fundos de tela e nas ima-
gens:
• Mudança de cores em links visitados e não visitados.
• Tenha cuidado com o contraste de cores.
• Use cores brilhantes somente para destacar informações.
Veja o exemplo, representado a seguir, pela Figura 22:

Figura 22 Exemplo Colour.

A cor utilizada no web site é um assunto que nem sempre tem a devida atenção, pois não
são todas as pessoas que se preocupam, mas ela pode influenciar diretamente na maneira que o
usuário interage com a ferramenta. O primeiro conceito que você deve ter em mente quando for
aplicar a cor em um web site é que a forma que lemos um site é diferente da forma que lemos
um livro, pois a leitura em web sites não é linear. Veja a Figura 23 a seguir:

Claretiano - Centro Universitário

 158 © Interface Humano-Computador

Figura 23 Sequência de leitura em web sites.

Nos web sites, os olhos das pessoas procuram, primeiro, os elementos maiores e escuros
e, depois, os elementos menores e claros. Essas informações devem ser consideradas para im-
plementar sites, pois, por meio delas, você pode destacar alguma informação ou deixá-la sem
ênfase.
Outra herança que temos da leitura em papel é utilizar o branco no fundo dos textos e os
sites herdaram dos livros essa característica, afinal, os livros, geralmente, possuem esse padrão
do papel branco com o texto preto. Contudo, atualmente, a maioria dos monitores exibe um
branco brilhante e, por isso, há dificuldade em ler um texto com a cor preta. Uma combinação
interessante e eficaz para os monitores é um fundo pastel com o texto preto.
A escolha das cores no site, também não é algo difícil de fazer. Por isso, uma dica útil é
considerar o Círculo Cromático, conforme a Figura 24, que possui cores distribuídas em um cír-
culo de forma lógica e organizadas de acordo com cada tom. Esse círculo foi definido por Silveira
(2002) e Guimarães (2000) para facilitar a aprendizagem, a utilização e a mistura de cores.
 © U6 – IHC na Web 159

Ciano
Ciano-Violetado Ciano-esverdeado
Azul-Violetado Verde
Magenta-Violetado Verde-amarelado

Magenta Amarelo
Vermelho-amagentado Laranja
Vermelho
Fonte: SILVEIRA, 2002, p. 8.
Figura 24 Círculo cromático.

Várias estratégias podem ser aplicadas por intermédio do Círculo Cromático (SILVEIRA,
2002). Nesta unidade, são apresentadas as combinações de cores, pois podem ser feitas com
cores próximas e cores complementares. Embora existam essas possibilidades, apenas uma des-
sas combinações gera um resultado eficaz. Observe a Figura 24 e veja que há um círculo e várias
cores em uma sequencia lógica.

Observação:–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Quando falamos em cores próximas, significa cores que estão próximas no Círculo Cromático, por exemplo, laranja
e amarelo ou verde e ciano. Já as cores complementares são aquelas que são opostas no Círculo Cromático, por
exemplo, azul e amarelo ou verde e vermelho etc.
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Observe, na Figura 25, que o uso dessas cores apresenta um contraste baixo e isso faz
com que o texto seja menos legível e consequentemente haverá a necessidade de aumentar o
tamanho da letra.

Figura 25 Exemplos de cores próximas.

Agora, observe que, na Figura 26, já é possível perceber que o uso das cores complemen-
tares permite um contraste alto e isso faz com que o texto seja mais legível. Por isso esse é o tipo
de combinação que deve ser prioridade no desenvolvimento de páginas web. A utilização desse
Círculo Cromático é uma maneira eficaz de verificar se, por meio das combinações, o resultado
será satisfatório ou não.

Claretiano - Centro Universitário

160 © Interface Humano-Computador

Figura 26 Exemplos de cores complementares.

Size
Contexto:
Balanceamento entre gráficos e tempo real.
Problema:
Como o usuário pode acessar informações de maneira adequada?
Solução:
Forneça as informações usando cores adequadas nas fontes, nos fundos de tela e nas
páginas:
• Animações, imagens e arquivos longos devem ser fornecidas sob demanda.
• Tamanho de página, fontes e rolagem são importantes.
Contraexemplo:
 © U6 – IHC na Web 161

Figura 27 Contraexemplo Size.

Nesse padrão, devemos pensar não somente no tamanho da página, como também no
tamanho da fonte a ser utilizada (SEARA, 2007). A Figura 28 ilustra alguns tipos de fontes mais
utilizados e seus respectivos tamanhos para possibilitar uma leitura rápida e eficaz.

Claretiano - Centro Universitário

 162 © Interface Humano-Computador

Figura 28 Tipos de fontes que podem ser utilizadas em sites web.

Print
Contexto:
A leitura de textos em um web site é diferente da leitura em textos impressos. A maioria
das pessoas lê blocos de texto e não palavra por palavra.
Problema:
Como o usuário pode conseguir uma impressão adequada da informação?
Solução:
Forneça a informação de várias maneiras e formatos e dê a possibilidade de imprimir ou
salvar documentos grandes.
Veja o exemplo a seguir, representado pela Figura 29:

Figura 29 Exemplo Size.

 © U6 – IHC na Web 163

10. QUESTÕES AUTOAVALIATIVAS

Sugerimos que você procure responder, discutir e comentar as questões a seguir, que tra-
tam da temática desenvolvida nesta unidade, ou seja, da possibilidade do ensino da Interface
Humano-Computador.
A autoavaliação pode ser uma ferramenta importante para testar o seu desempenho. Se
você encontrar dificuldades em responder a essas questões, procure revisar os conteúdos estu-
dados para sanar as suas dúvidas. Este é o momento ideal para que você faça uma revisão desta
unidade. Lembre-se de que, na Educação a Distância, a construção do conhecimento ocorre de
forma cooperativa e colaborativa; compartilhe, portanto, as suas descobertas com os seus co-
legas de curso.
Confira, a seguir, as questões propostas para verificar o seu desempenho no estudo desta
unidade:
1) Imagine a seguinte situação: você é contratado por uma empresa para fazer parte de um grupo de desenvol-
vimento, no qual seria o responsável pela usabilidade do software. Ao ser contratado, a empresa informa-lhe
que, por enquanto, não há um público-alvo definido, e que, inicialmente, seria melhor atender a maioria dos
usuários. O que você faria a princípio, considerando os conceitos aprendidos nesta unidade?
a) Não se preocuparia com a interface a princípio; deixaria o software ser desenvolvido e depois aplicaria o
método Percurso Cognitivo para identificar os problemas de usabilidade.
b) Iria preocupar-se, apenas, com a interface, mas não interferiria no processo para não atrapalhar os desen-
volvedores; depois que tudo estivesse pronto, aplicaria a Avaliação Heurística.
c) Observaria o desenvolvimento da interface utilizando os checklists e, no final do desenvolvimento, apresen-
taria suas observações à empresa para que as devidas correções fossem realizadas.
d) Diria que não poderia trabalhar nesse projeto, uma vez que não faz parte do seu profissionalismo desenvol-
ver um sistema sem pensar no usuário.
e) Iria se preocupar com a utilização de padrões para a interface, por contar com a garantia de que estes aten-
dem a uma grande diversidade de usuários.
2) Considerando os padrões de Montero, que foram vistos nesta unidade, qual é o padrão que você considera
mais adequado para a preocupação com a linguagem e a forma como as informações são apresentadas em um
determinado site?
a) Polite.
b) Welcome.
c) Tagline.
d) Similarity.
e) Danger.

Gabarito
Confira, a seguir, as respostas corretas para as questões autoavaliativas propostas:
1) e.

2) a.

11. CONSIDERAÇÕES
Como você pode ter percebido, os padrões aqui apresentados têm algumas características
que qualquer sistema computacional pode utilizar (mesmo que não seja para web). É interes-
sante notar, também, que muitos desses padrões são aplicados de maneira intuitiva, por meio
do bom senso, mas, às vezes, essa maneira intuitiva pode não ser a melhor, afinal, são vários
fatores que devem ser considerados; há vários detalhes que podem fazer a diferença. Seguin-

Claretiano - Centro Universitário

 164 © Interface Humano-Computador

do esses padrões, você tem a certeza de utilizar algo comprovadamente eficaz e que, por isso,
muitas pessoas utilizam, ou seja, já é conhecido e natural para elas navegarem na web, conside-
rando esses padrões.

Curiosidade–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Uma vez me questionaram se o uso de padrões ou checklists para desenvolver sistemas não limita a criatividade do
projetista e a minha reposta foi NÃO, pois a ideia dos padrões surgiu para mostrar aos desenvolvedores, projetistas
etc., alguns exemplos de sucesso. Sendo assim, se você segue um padrão no desenvolvimento, a possibilidade do
software ter qualidade é maior, uma vez que já se comprovou sua eficácia. Contudo, não há como impedir que cada
projetista dê o seu toque pessoal no desenvolvimento; na verdade, isso nem é necessário, pois a criatividade de cada
um é o que permitirá desenvolver um software único.
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
De maneira bem simples, podemos comparar os padrões com as dicas. O projetista tem
algumas dicas de como desenvolver um software, em qual lugar ele pode colocar determinadas
opções e funcionalidades, o que uma tela deve ou não conter etc., mas cabe a ele pensar nessas
dicas e aplicá-las da melhor forma. Assim, os padrões são como um "bom senso", servem para
apoiar o desenvolvimento e não limitá-lo.

12. E-REFERÊNCIAS
NETO, A. T.; SILVA, A. C.; SILVA, J. C. A.; PENTEADO, R. A. V. Desenvolvimento de Sistemas Interativos. Disponível em: <http://
[Link]/~junia/[Link]>. Acesso em: 21 mar. 20
NOTÍCIAS RAcesso à internet no Brasil cresce 75,3% em três anos. Disponível em: <[Link]
noticias/[Link]>. Acesso em: 15 fev. 2010.
[Link]. Usabilidade e comunicação na internet. Disponível em: < [Link] Acesso em: 18 mai. 2007.

Lista de figuras
Figura 2 – Exemplo Welcome: disponível em: <[Link]
nA>. Acesso em: 12 mar. 20
Figura 3 – Exemplo Polyglot: disponível em: <[Link] Acesso em: 12 mar. 20
Figura 4 – Exemplo Ready: disponível em: <[Link] Acesso em: 21 mar. 2010.
Figura 5 – Exemplos Indication: disponível em: <[Link] Acesso em: 21 mar. 2010.
Figura 6 – Exemplos Similarity: disponível em: <[Link] Acesso em: 12 mar. 2010.
Figura 7 – Exemplo Homepage: disponível em: <[Link] Acesso em: 12 mar. 2010.
Figura 8 – Exemplos Second Chance: disponível em: <[Link] >. Acesso em: 21 mar. 2010.
Figura 9 – Exemplo Form: disponível em: <[Link] Acesso em: 12 mar. 2010.
Figura 10 – Exemplo Busy: disponível em: <[Link] Acesso em: 12 mar. 20
Figura 11 – Exemplo Polite: Disponível em: <[Link] Acesso em: 12 mar. 2010.
Figura 12 – Contra-Exemplo Tag Line: disponível em: <[Link] Acesso em: 12 mar. 20
Figura 13 – Exemplo Tagline: disponível em: <[Link] Acesso em: 12 mar. 2010.
Figura 14 – Exemplo About This: disponível em: <[Link] Acesso em: 12 mar. 20
Figura 15 – Exemplos Search: disponível em: <[Link] Acesso em: 21 mar. 20
Figura 16 – Exemplo Novelty: disponível em: <[Link] Acesso em: 12 mar. 2010.
Figura 17 – Exemplo Contact Us: disponível em: <[Link] Acesso em: 12 mar. 2010.
Figura 18 – Exemplo Secret: disponível em: <[Link] Acesso em: 12 mar. 2010.
Figura 19 – Exemplos Subscription: disponível em: <[Link] Acesso em: 12 mar. 2010.
Figura 20 – Exemplo Recognize: disponível em: <[Link] Acesso em: 12 mar. 2010.
Figura 21 – Exemplo Location: disponível em: <[Link] Acesso em: mar. 2010.
Figura 22 – Exemplo Colour: disponível em: <[Link] Acesso em: 12 mar. 2010.
Figura 23 – Sequencia de Leitura em Web Sites: disponível em: <[Link]
[Link]/>. Acesso em: 12 mar. 2010.
Figura 27 – Contra-Exemplo Size: disponível em: <[Link] Acesso em: 12 mar. 2010.
 © U6 – IHC na Web 165

13. REFERÊNCIAS BIBLIOGRÁFICAS

ALEXANDER, C. et. all. A Pattern language: towns, buildings, construction. New York: Oxford University Press, 1977.
BORCHERS, J. O. et. all. Usability pattern language: creating a community. AI & Society, v.15, n.4, p. 377-385, Londres:
Springer London, 20
GUIMARÃES, L. A cor como informação: a construção biofísica, linguística e cultural da simbologia das cores. ed. São Paulo:
Annablume, 20
MONTERO, F.; LOZANO, M.; GONZÁLEZ, P.; RAMOS, I. A First Approach to Design Web Sites By Using Patterns. In: First nordic
conference on pattern languages of programs: VikingPLoP. Hojstrupgard, Dinamarca. September 2002, p. 137-158
NETO, A. T.; SILVA, A. C.; SILVA, J. C. A.; PENTEADO, R. A. V. Workshop de padrões de interação. O Contexto Web. UfsCar – São
Carlos, Julho, 2004.
SILVEIRA, L. M.; BUCHDID, S. B.; SILVA, J. C. A. Metodologia de aplicação de cores no projeto WEB. Poços de Caldas: WebMedia, 2005.

14. CONSIDERAÇÕES FINAIS

Sabemos que estudar na modalidade a distância não é algo fácil, pois requer muita dedica-
ção e cabe a você decidir em qual momento irá ler o material, estudar para a prova, fazer as ativi-
dades. Isso, sem se esquecer de que são várias disciplinas ao mesmo tempo e que, muitas vezes,
você faz tudo isso depois de um dia cansativo de trabalho na empresa, na escola ou em casa.
Entendo que não é fácil chegar em casa com vontade de descansar e ter de estudar e que,
embora haja o cansaço mental, há, também, a necessidade de esforçar-se ao máximo para en-
tender tudo o que é essencial para a sua formação, afinal, toda essa dedicação, na maioria das
vezes, é para conseguir o tão sonhado diploma e, com ele, todas as possibilidades de melhorar
ou mudar de emprego, ter aumento no salário, mais prestígio, enfim, tudo o que é almejado
pelo ser humano.
É importante saber que, durante a sua caminhada, você amadureceu e tudo o que apren-
deu até aqui, de alguma forma, será importante para o seu futuro. Depois dessa longa jornada,
você vai para o mercado de trabalho não apenas com um diploma nas mãos, mas com toda a
experiência, conhecimento, entre tantas outras habilidades que adquiriu ou aperfeiçoou duran-
te o seu curso, e isso, será o seu diferencial diante de muitas outras pessoas que estarão concor-
rendo à mesma vaga de emprego.
Por isso leve esse desafio até o fim, persista, resista às dificuldades e supere os obstáculos, para
que, no fim, você possa dizer "eu consegui" e "valeu a pena". Espero que, em cada disciplina, você
tenha aprendido algo especial que fará a diferença no seu estudo e/ou trabalho e na sua vida.
Em especial, neste Caderno de Referência de Conteúdo, esperamos que tenha percebido
a importância do ser humano para desenvolver sistemas computacionais. Como dito anterior-
mente, algumas vezes, você vai construir algo para as pessoas utilizarem, então, nada mais justo
que se pense nelas e que esse sistema realmente lhes seja útil. Que não seja mais um sistema
desenvolvido e instalado, mas, sim, o sistema, útil, acessível e que, independentemente das
características físicas ou psicológicas das pessoas, elas consigam utilizá-lo.
Você se lembra da frase descrita no Caderno de Referência de Conteúdo, "algumas pessoas
compram celulares simples não pelo preço, mas porque cansaram de ter aparelhos que, pelo
difícil manuseio, se tornaram inúteis"? Essa frase é verdadeira, pois está cada vez mais comum
encontrarmos aparelhos com infinitas quantidades de funções, mas para que serve tudo isso?
Qual a finalidade de comprar um aparelho com infinitas funcionalidades se você só sabe utilizar
as básicas?

Claretiano - Centro Universitário

166 © Interface Humano-Computador

Culpa sua? Não, já aprendemos que a responsabilidade de fazer algo útil não é sua, você
apenas vai usar algo que já foi planejado e desenvolvido por alguém, que deveria ter se preo-
cupado com todas as características, para que o produto final ficasse bom. Essa frase é ótima
para isentar a sua culpa de não saber mexer em algo, porém aumenta a sua responsabilidade
de desenvolver algo bom, pois, uma vez que cabe a você fazer, terá de assumir todas as respon-
sabilidades.
Mesmo que a dedicação e o esforço resultem em um produto com custo maior, tenha a cer-
teza de que valerá a pena. Pode ser que você perceba uma resistência inicial por parte dos clientes
ou pelos seus colegas de trabalho, mas, assim como você fez até aqui, persista e resista.
Este Caderno de Referência de Conteúdo apresentou o caminho e permitiu a você dar
alguns passos, e, agora, você tem condições de investigar outras possibilidades e pensar em ou-
tras estratégias que também trarão resultados positivos. Portanto, utilize o que você aprendeu
aqui, pois, à medida que esses conceitos forem se consolidando, novos desafios aparecerão e,
com isso, a curiosidade de aprender cada vez mais.
Abraços!