Desenvolvimento de sites deInternet

Prévia do material em texto

Desvendando o Desenvolvimento de Websites - 2006 
 1 de 26 
Desvendando o Desenvolvimento de Websites 
Por Talita Pagani Britto (designer e desenvolvedora – www.talitapagani.com) 
 
 
SUMÁRIO 
 
DESVENDANDO O DESENVOLVIMENTO DE WEBSITES........................................................1 
SUMÁRIO ..................................................................................................................................1 
INTRODUÇÃO...........................................................................................................................3 
1) PLANEJAMENTO .....................................................................................................................4 
1.1. OBTENDO INFORMAÇÕES: BRIEFING.......................................................................................4 
1.2. ARQUITETURA DE INFORMAÇÃO .............................................................................................4 
1.2.1. O que é?......................................................................................................................4 
1.2.2. Como Fazer?...............................................................................................................4 
1.2.3. Peso do conteúdo .......................................................................................................5 
1.3. WIREFRAMES: DESIGN DE INTERFACE.....................................................................................6 
1.3.1. Regras e dicas para projetar um bom wireframe........................................................6 
1.3.2. Padrão Universal de Interface.....................................................................................6 
1.3.3. Exemplo de como construir um wireframe..................................................................7 
1.4. PROTOTIPAÇÃO.....................................................................................................................8 
1.4.1. Definindo Cenários......................................................................................................8 
2) DESIGN .....................................................................................................................................9 
2.1. IDENTIDADE VISUAL...............................................................................................................9 
2.1.1. Escolhendo as cores...................................................................................................9 
2.1.2. Contraste e Legibilidade .............................................................................................9 
2.1.3. Tipografia ....................................................................................................................9 
2.1.4. Gráficos .....................................................................................................................10 
2.1.4. Mantenha a consistência ..........................................................................................10 
2.2. DIAGRAMAÇÃO....................................................................................................................11 
2.2.1. Proximidade ..............................................................................................................11 
2.2.2. Alinhamento ..............................................................................................................11 
2.2.3. Repetição ..................................................................................................................12 
2.2.4. Contraste...................................................................................................................12 
2.3. RESOLUÇÃO DE TELA ..........................................................................................................12 
3) INTERAÇÃO COM O USUÁRIO.............................................................................................13 
3.1. DICAS DE COMPOSIÇÃO DOS TEXTOS....................................................................................13 
3.2. A IMPORTÂNCIA DO FEEDBACK .............................................................................................13 
3.2.1. Na prática, como fazer? ............................................................................................14 
3.3. ESPAÇO PARA OPINIÕES ......................................................................................................14 
3.4. AJUDE O USUÁRIO ...............................................................................................................14 
4) WEB STANDARDS .................................................................................................................15 
4.1. QUATRO REGRAS BÁSICAS...................................................................................................15 
4.2. SEPARANDO CONTEÚDO E FORMATAÇÃO ..............................................................................15 
4.3. ATENÇÃO COM A SEMÂNTICA ...............................................................................................16 
4.3.1. Tableless ...................................................................................................................16 
4.3.2. Cada tag em seu lugar..............................................................................................16 
4.4. ENDENTANDO SEU CÓDIGO ..................................................................................................17 
4.5. NÃO ESQUEÇA O DOCTYPE ..................................................................................................17 
4.6. FORNECENDO INFORMAÇÕES SOBRE O SEU SITE ..................................................................17 
4.7. COMENTÁRIOS ....................................................................................................................18 
Desvendando o Desenvolvimento de Websites - 2006 
 2 de 26 
5) USABILIDADE ........................................................................................................................19 
5.1. PROJETANDO PARA O USUÁRIO ............................................................................................19 
5.1.1. O que os usuários esperam dos websites ................................................................19 
5.1.2. Os principais erros que dificultam a experiência do usuário ....................................19 
5.1.3. Melhores Práticas e Regras......................................................................................20 
5.2. HEURÍSTICAS PARA AVALIAR A USABILIDADE..........................................................................20 
6) ACESSIBILIDADE ..................................................................................................................22 
6.1. AS PRINCIPAIS DIRETIVAS ...................................................................................................22 
6.1.1. Texto e Conteúdo......................................................................................................22 
6.1.2. Cores.........................................................................................................................22 
6.1.3. Imagens.....................................................................................................................23 
6.1.4. Estrutura e Formatação ............................................................................................23 
6.1.5. Links ..........................................................................................................................23 
6.1.6. Controles de Navegação...........................................................................................23 
6.1.7. Sobre o Site...............................................................................................................23 
6.1.8. Formulários ...............................................................................................................236.2. QUANDO NÃO FOR POSSÍVEL CRIAR UM DOCUMENTO TOTALMENTE ACESSÍVEL .......................24 
6.3. PARA SABER MAIS ...............................................................................................................24 
REFERÊNCIAS BIBLIOGRÁFICAS ...........................................................................................25 
APÊNDICE A: OUTROS LIVROS INDICADOS .........................................................................26 
Desvendando o Desenvolvimento de Websites - 2006 
 3 de 26 
INTRODUÇÃO 
 Esta apostila apresenta de maneira objetiva os conceitos básicos que todo 
designer para a web deve conhecer para projetar sites agradáveis, fluídos e que 
facilitem a experiência das pessoas. 
 Hoje em dia, qualquer pessoa que deseja trabalhar com desenvolvimento para 
internet deve ter conhecimentos que vão além de HTML, JavaScript, PHP. A forma 
como as pessoas se relacionam através da web e a navegação centrada no usuário 
são alguns dos conceitos que já são prioridade na hora de projetar websites. Por isso 
esta apostila não é sobre como fazer as páginas com XHTML e CSS, supondo que 
você já tenha um conhecimento básico nestas linguagens, pois será necessário no 
capítulo sobre Web Standards e Acessibilidade. 
 Você aprenderá os principais fundamentos da Arquitetura de Informação, 
Estratégia de Conteúdo, Projeto de Wireframes, Design, Comunicação com o usuário, 
Usabilidade e Acessibilidade, para projetar sites que, além de bonitos, são fáceis de 
usar e acrescentam valor à experiência do usuário com o produto. 
 Com certeza será uma ótima referência se você estiver começando na área ou 
deseja ampliar seus conhecimentos sobre os projetos de internet, mas ela é apenas a 
porta de entrada. Leia, pesquise, navegue muito e veja a relação de links e livros 
interessantes no final da apostila. 
 
 
Boa leitura. 
Desvendando o Desenvolvimento de Websites - 2006 
 4 de 26 
1) PLANEJAMENTO 
 
 Neste capítulo você aprenderá todos os processos para levantar informações 
do projeto e definir as estratégias do fluxo de navegação e interface. 
 1.1. Obtendo informações: Briefing 
Briefing é conjunto de informações que você irá obter em uma entrevista com o cliente, 
para que possam ser definidos os objetivos do projeto. 
O documento é fundamental para que você compreenda a dimensão do website, e 
basicamente você deve levantar informações como: 
 
• Qual o ramo de atuação da empresa e quais os serviços oferecidos? 
• Quem é o público-alvo? 
• Quais as vantagens/desvantagens da empresa sobre os concorrentes? 
• Qual o objetivo do site? 
• Que imagem deseja ser transmitida para o usuário/cliente ? 
• Qual o conteúdo do site? (tópicos) 
 
Outras questões que podem ser inseridas são relativas ao prazo/cronograma de 
desenvolvimento, verba do projeto, ferramentas de marketing utilizadas pela empresa 
atualmente, etc. 
 
Dica: Baixe gratuitamente um modelo de briefing no site da Revista WebDesign, seção 
Downloads. (http://www.arteccom.com.br/webdesign/interna.asp?id=3) 
 
1.2. Arquitetura de Informação 
Depois que você obteve as principais informações, chegou a hora de definir a 
arquitetura de informação. 
 
1.2.1. O que é? 
É o design da informação do site, que tem como métodos a hierarquia de 
conteúdos relacionados entre si e a estruturação dos fluxos de navegação. É o 
processo que analisa o peso(relevância) do conteúdo e desenvolve os caminhos 
para uma navegação fácil e intuitiva. 
A arquitetura de informação define o mapa do site e a hierarquia dos menus de 
navegação. 
 
1.2.2. Como Fazer? 
No briefing você definiu com seu cliente qual seria o conteúdo do site. Por 
exemplo: o site que o seu cliente quer terá que ter informações sobre a empresa 
(visão, missão, história, equipe e estrutura), os serviços oferecidos 
(treinamentos, cursos, palestras, consultoria), sala de imprensa, releases, press 
kit e informações para contato. 
Você deve, primeiro, agrupar o conteúdo em grupos que estejam relacionados 
entre si, por assunto. 
Depois, você deverá agrupar esses grupos em áreas. Dessa forma você estará 
definindo uma hierarquia entre o conteúdo. Este processo se chama 
taxonomia, que consiste em classificar os elementos dentro de um contexto, 
para que eles possuam um sentido e proporcionem um acesso intuitivo à 
informação que o usuário necessita. 
Para que você entenda melhor, veja como ficará a arquitetura de informação do 
website de exemplo, sob a forma de um fluxograma (como deve ser feito): 
Desvendando o Desenvolvimento de Websites - 2006 
 5 de 26 
 
Fig. 1 – Exemplo de Arquitetura de informação de um website 
 
Note que Releases e Press Kit foram agrupados em Sala de Imprensa e que a 
seção Quem Somos também está relacionada com a página de Contato, mesmo 
ela não estando contida na hierarquia de Quem Somos. Isso significa que as 
páginas de Quem Somos podem levar até a página de Contato, através de 
alguma mensagem ou hiperlink. 
Lembre-se que quanto maior o website, mais complexa será sua arquitetura de 
informação. 
Os fluxogramas ajudam os designers a identificar e organizar os caminhos que o 
usuário terá que percorrer até encontrar a informação que deseja. Uma boa 
arquitetura de informação é um dos principais ingredientes para sites eficientes e 
persuasivos. 
 
1.2.3. Peso do conteúdo 
Determinar o peso do conteúdo é determinar a relevância dos elementos de 
interface, como blocos de texto, busca, menu, imagens, etc. 
A arquitetura de informação organiza a hierarquia de páginas e dentro de cada 
página você terá elementos que devem ser organizados de acordo com a sua 
importância. Segundo Felipe Memória, em seu livro Design para a 
Internet:projetando a experiência perfeita (Editora Elsevier, 2005): “As pessoas 
estão atrás de informação ou interação, comportamentos que geram 
necessidade de realização de tarefas”. Portanto, no momento de definir os 
elementos que irão compor as páginas de seu website, principalmente a inicial 
você deve saber quais serão as principais tarefas a serem executadas pelos 
usuários e realçar os pontos interessantes. 
Você pode fazer tudo isso em uma simples folha de papel. Um exemplo, 
determinando a relevância dos elementos de interface de uma página principal: 
 
Logotipo 1 
Recurso de Busca 1 
Nevegação Global 1 
Texto de apresentação 1 
Últimas notícias 2 
Enquete 2 
Desvendando o Desenvolvimento de Websites - 2006 
 6 de 26 
 
 
 
 
Onde: 1 é o elemento mais relevante e 4 é o elemento menos relevante. 
1.3. Wireframes: design de interface 
No desenho dos wireframes você irá aplicar a arquitetura de informação em esboços 
do layout físico, que seriam como a estrutura, o esqueleto da interface de seu website. 
Este processo precede a prototipação. 
Como disse Molly E. Holzschlag, em seu livro 250 HTML and Web Design Secrets 
(Wiley Publishing, Inc., 2004), em tradução livre: “Você não estará olhando para a 
informação da maneira como as cores serão usadas para os links de navegação 
(considerado o ‘como’). Você estará olhando para o que consiste a navegação 
(considerado o ‘o que’)”. 
Você poderá usar qualquer programa de imagem vetorial ou bitmap, como Photoshop 
ou Freehand para fazer seus wireframes. Os elementos de interface, que você 
classificou por peso, agora serão desenhados em uma tela e posicionados 
corretamente. Eles irão detalhar a navegação primária e, se necessário, definir uma 
navegação secundária. 
 
1.3.1. Regras e dicas para projetar um bom wireframe 
 
• Desenhe todos os elementos, incluindo imagens e elementos de 
formulário, no tamanho real em que eles serão utilizados, para evitar erros; 
• Mantenha um bom alinhamento e distribuição do conteúdo (veja mais dicas 
no capítulo sobre Design); 
• Use exemplos de textos que façam sentido ao conteúdo. Como disseFelipe Memória(2005), evite o “Lorem ipsum dolor sit amet1”; 
• Posicione as informações mais importantes acima da primeira rolagem de 
tela, a relevância do conteúdo deverá ficar evidente no design da interface; 
• As informações relacionadas devem ser agrupadas corretamente; 
• Os títulos das páginas e seções devem ser coerentes e mostrar claramente 
ao usuário o que ele encontrará naquela página ou seção. 
 
1.3.2. Padrão Universal de Interface 
 
Fig. 2 – modelo de interface universal, mais utilizado na internet, baseado 
na figura 2.8. do livro Design para a internet: projetando a experiência 
perfeita 
 
1
 Frase em latim que normalmente é usada para simular títulos e massas de texto. Fonte: Design para a 
Internet:projetando a experiência perfeita, Felipe Memória, Editora Elsevier, Rio de Janeiro, 2005. 
Coluna de Links relacionados 3 
Parceiros 3 
Publicidade 4 
Desvendando o Desenvolvimento de Websites - 2006 
 7 de 26 
 
Esta estrutura de página é uma convenção de design respeita e muito usada. Ela 
é baseada em diversos estudos que analisam quais os primeiros elementos que 
os usuários visualizam e procuram quando acessam um site. 
A visão do usuário começa da esquerda para a direita, de cima para baixo, mas 
ele não mantém uma visão totalmente linear do seu conteúdo. Tenha em mente 
que a visão do usuário é diferente da visão do design sobre a interface. 
 
Dica: Saiba mais sobre Visão do Usário x Visão do Designer em 
http://www.usabilidoido.com.br/elementos_de_design_grafico_para_websites.html 
 
Como a maioria dos sites usam os mesmos elementos nas mesmas disposições, 
esses simples padrões se tornaram convenções de design. Respeitá-las é fazer 
com que o usuário não fique surpreso ou confuso ao acessar seu site, sem saber 
por onde ele deve começar. 
Mas não encare este padrão como uma limitação de criatividade, alterações 
podem ser feitas, mas algumas características devem ser mantidas, por 
exemplo: 
 
• O logotipo da empresa deve preferencialmente ser mantido à esquerda, 
pois ele deve ser o primeiro elemento que o seu usuário verá, identificando 
onde ele está; 
• A busca é um recurso muito utilizado, por isso sua localização não deve 
ser difícil. Não precisa necessariamente ficar ao lado do logotipo, mas deve 
ser um dos primeiros elementos da interface; 
• A barra de navegação também deve estar em locais acessíveis, mas 
procure não colocá-la acima de banners de publicidade, no topo da página. 
Usuários ignoram a maioria dos elementos que se encontram acima dos 
banners; 
(Jakob Nielsen, Homepage Usabilidade:50 Websites Descontruídos, 2002) 
 
1.3.3. Exemplo de como construir um wireframe 
Em uma folha de papel, desenhe todos os elementos que serão inseridos na 
interface, como se eles fossem blocos, caixas. 
 
Fig. 3 – identificando e desenhando todos os elementos da interface 
 
Depois disso, você irá posicioná-los corretamente de acordo com o peso de cada 
item, adicionando os textos e lembrando sempre do padrão universal de 
interface. 
 
 
Desvendando o Desenvolvimento de Websites - 2006 
 8 de 26 
 
 
Fig. 4 – Modelo de wireframe 
 
Dica: Quanto mais simples o wireframe, melhor. Mas, dependendo da 
complexidade do projeto, você precisará colocar mais elementos dentro do 
desenho da interface. Lembre-se também de fazer os wireframes das páginas 
internas mantendo os padrões usados na página principal. 
 
Nota: O objetivo dos wireframes não é definir design gráfico, por isso não se 
preocupe em definir cores, formas e estilos neste momento. 
 
1.4. Prototipação 
Para uma rápida definição do processo de prototipação, é a etapa onde serão 
aplicados os conceitos do wireframe sobre um projeto visual. Este é a última etapa do 
planejamento, já começando o design gráfico. 
Os protótipos são necessários para que designers, desenvolvedores e cliente ter uma 
visão mais concreta do website, facilitando a análise e melhora do produto. 
 
1.4.1. Definindo Cenários 
 
• Você dever saber qual a meta de seu usuário no website; 
• Pense em situações de navegação do usuário, o que ele deseja encontrar, 
o que você pode oferecer nas páginas (principal e internas) para ajudar o 
usuário e motivar ele a ficar mais tempo em seu website; 
• Desenhe storyboards que mostrem o que os usuários querem e quais os 
caminhos que eles devem percorrer até chegar a informação desejada. 
Desvendando o Desenvolvimento de Websites - 2006 
 9 de 26 
2) DESIGN 
Nessa etapa iremos tratar graficamente das páginas, dando “vida” aos elementos de 
interface e definindo a identidade visual do site. 
 
2.1. Identidade Visual 
Consiste em elaborar um padrão para todos os elementos que serão comumente 
utilizados no site, gerando uma consistência de conteúdo e melhor usabilidade, pois o 
usuário sabe o que esperar de determinadas funcionalidades se elas seguem os 
mesmos padrões. 
 
2.1.1. Escolhendo as cores 
As cores são fundamentais para transmitir a energia do site e do conteúdo ao 
usuário. Um bom layout deve conter um bom contraste de cores, prezando 
sempre pela harmonia e legibilidade. 
Veja alguns significados para as principais cores: 
 
• Preto: muito mórbido para ser usado como plano de fundo na internet, mas 
é válido de acordo com a idéia de será transmitida, de uma certa maneira 
representa requinte se combinado á outras cores como tons pastéis, mas 
ainda assim é muito pesado. 
• Branco: uma cor básica e limpa, suaviza o layout e casa muito bem com 
cores claras ou escuras. Ideal para plano de fundo. 
• Vermelho: transmite calor, vida, inovação. Chama a atenção para o tema. 
• Azul: passa uma certa seriedade, confiança, calma e é uma cor que 
consegue expressar “tecnologia”. 
• Pastel: cores delicadas, ideal para sites femininos, de culinária, ou sites 
sobre antiguidades. 
• Laranja: jovialidade, positividade, vida, muito bom para sites teen e lazer, 
assim como o amarelo e rosa. 
• Verde: saúde, medicina, natureza. 
 
Dica: Se você deseja saber quais as melhores combinações de cores para seu 
site veja esta ferramenta: http://wellstyled.com/tools/colorscheme2/. 
 
2.1.2. Contraste e Legibilidade 
A visualização é mais exaustiva no monitor, por isso procure não colocar planos 
de fundo escuros ou com imagens. Se você tiver alguns elementos de cores 
escuras em seu site, faça com que as cores de texto sobre esses elementos 
tenham um contraste suficiente, pois isso pode gerar um problema grave de 
legibilidade se um usuário que usa monitor monocromático acessar seu site. 
 
Dica: Em uma página da Universidade Federal do Rio Grande do Sul há um 
interessante arquivo que será uma ótima referência sobre o contraste entre cores 
de texto e plano de fundo: http://www.inf.ufrgs.br/~cabral/Cores.sobre.fundos.ppt. 
 
2.1.3. Tipografia 
Tipografia é a composição das famílias de fontes, que visa estudar questões 
como legibilidade, estrutura e estética das letras impressas a fim de facilitar a 
comunicação visual dos textos. Na web devemos pensar com cuidado nos 
tipo de fontes que serão escolhidas, para que elas também não causem 
problemas na legibilidade do conteúdo. 
Desvendando o Desenvolvimento de Websites - 2006 
 10 de 26 
As principais famílias de fontes são: 
 
• Serifadas (ex.: Times new Roman, Geórgia, Courrier New): possuem 
arestas nas extremidades das letras. São adequadas para impressão, mas 
não para corpo de texto na web. No caso de títulos ou textos de tamanhos 
grandes, oferecem elegância. 
• Não serifadas (ex.: Arial, Tahoma, Verdana, Trebuchet MS): são as mais 
adequadas para a leitura online, a maioria possui alta legibilidade 
• Cursivas (ex.: Monotype Cursiva, Staccato): são fontes que apresentam o 
estilo manuscrito; 
• Fantasy (ex.: ComicSans): são fontes decorativas, com o intuito apenas de 
enfeitar. Cuidado ao usá-las. Normalmente são mais usadas para 
desenvolver logotipos. 
 
Dica: Evite usar tipos muito parecidos entre títulos e corpo de texto, o contraste é 
fundamental. Espaçamentos entre linhas também são importantes para facilitar a 
leitura. 
 
2.1.4. Gráficos 
Nem só de textos vivem os sites, afinal, imagens também são conteúdo. O uso 
de gráficos deve ser adequado ao contexto. Imagens usadas como detalhes de 
layout devem ajudar a ilustrar a interface e envolver as pessoas em seu 
conteúdo. Ícones e símbolos ajudam a referenciar e identificar a informação que 
está sendo visualizada ou requerida. Por exemplo: ícones de impressão, botão 
fechar, “casinha” (ir para a página principal), ícone de áudio e/ou vídeo, 
marcadores de listas, etc. 
 
 
Fig. 5 – uso contido e adequado de gráficos na seção Biblioteca do portal UOL 
 
2.1.4. Mantenha a consistência 
Depois que você escolheu as cores, as fontes os gráficos e/ou os ícones, é hora 
de cuidar da consistência entre os estilos. É o principal conceito da identidade 
visual, ela indica uma familiaridade e continuidade de conteúdo. 
Um dos mais comuns erros dos profissionais de internet está na questão das 
cores de links: muitos sites não diferenciam as cores de links das cores de texto 
e não identificam os links não-visitados dos visitados. O ideal é que haja, pelo 
menos, três cores diferentes para os links: não-visitados, visitados e com o 
mouse sobre o link. As cores não precisam ser aquelas default do navegador 
Desvendando o Desenvolvimento de Websites - 2006 
 11 de 26 
(azul e púrpura), como sugere o radical Jakob Nielsen. Apenas os links devem 
ter algum diferencial, além da cor, como negrito ou sublinhado. 
Outras dicas fundamentais para manter a consistência de suas páginas são: 
 
• Tenha um único estilo para títulos, subtítulos e corpo de texto. Dê 
preferência para estilos bem diferenciados – tanto na questão de fonte, 
tamanho e cores – entre estes itens; 
• Se cada seção do seu site tem uma imagem ilustrativa, faça com que todas 
elas possuam o mesmo tamanho, estilo (arte final) e alinhamento. O 
mesmo é válido para ícones, símbolos e botões; 
• Os cabeçalhos e rodapé de suas páginas internas devem iguais, para que 
o usuário tenha certeza de que, quando clicar em algum link e abrir uma 
outra página, continua no mesmo site; 
• Os elementos básicos (títulos, subtítulos, menu de navegação, corpo de 
texto), além de manter o mesmo estilo, devem manter o mesmo 
posicionamento e alinhamento. 
 
2.2. Diagramação 
A diagramação é a etapa que cuida da distribuição e organização de elementos em 
uma página. Veremos quatro principais fundamentos para diagramar páginas, retirados 
do livro Design para quem não é designer, de Robin Williams (Editora CALLIS, 2005). 
 
2.2.1. Proximidade 
Os elementos de seu website que estão relacionados entre si devem ser 
agrupados a fim de formar unidades visuais. A proximidade entre os itens 
agrupados ajuda o usuário a se localizar dentro do conteúdo, afinal, as 
informações estarão organizadas. 
 
2.2.2. Alinhamento 
O alinhamento é importante tanto em questão de elementos gerais quanto em 
corpo de texto. Para os elementos, de um modo geral, é importante pois se os 
elementos estiverem alinhados em uma mesma linha de base, cria uma 
conexão visual entre os itens e unifica a página. 
 
Fig. 5 – Exemplo de bom alinhamento de elementos do portal Terra 
(as linhas pretas indicam a linha-base percebida inconscientemente) 
Desvendando o Desenvolvimento de Websites - 2006 
 12 de 26 
 
 
 
Para o corpo de texto, evite o alinhamento centralizado. Use-o apenas 
para títulos e textos formais. O alinhamento à direita também deve ser 
evitado e procure manter apenas um tipo de alinhamento em suas 
páginas. 
 
2.2.3. Repetição 
É a consistência no caso de documento de muitas páginas. A repetição é o 
esforço consciente para unificar os elementos de interface e design para agrupar 
partes que estariam separadas e criar uma identificação e relacionamento. 
 
2.2.4. Contraste 
Aqui o contraste não diz respeito ás cores e sim a uma hierarquia organização 
entre diferentes elementos. 
 
“Se dois itens não forem exatamente os mesmos, diferencie-os completamente.” 
Robin Williams, Design para quem não é designer 
 
2.3. Resolução de Tela 
A maioria dos desenvolvedores e designers trabalham com resolução de 1024 x 768 ou 
superior, mas a realidade dos usuários é completamente diferente. Normalmente os 
usuários domésticos utilizam resolução de 800 x 600, por isso você deve estar atento 
para não projetar um website com largura muito extensa, afinal, barra de rolagem 
horizontal é desagradável e fere os princípios de usabilidade. Consequentemente a 
área de visibilidade também diminui em 800 x 600. A largura adequada, portanto, seria 
770 px (já descontando a largura da barra de rolagem vertical) e altura da área de 
visibilidade (tela antes do scroll) seria 440 px. 
 
 
Desvendando o Desenvolvimento de Websites - 2006 
 13 de 26 
3) INTERAÇÃO COM O USUÁRIO 
 
Cada dia mais os desenvolvedores de internet entendem a importância do projeto de websites 
centrado no usuário. A internet é uma ferramenta de interação social, que conecta pessoas e 
não simples máquinas. Por isso é importante que a forma como os produtos e serviços de 
internet se comunicam com o usuário agregue valores, emoções e faça com que o usuário seja 
(e se sinta) um colaborador daquele produto/serviço. Neste capítulo estaremos mais próximos 
da usabilidade. 
 
3.1. Dicas de composição dos textos 
Textos bem escritos para a internet facilitam não só a leitura como a interação das 
pessoas com os websites. O importante não é só saber escrever, mas o que e como 
escrever. Algumas dicas podem evitar que o usuário se sinta incomodado ao navegar 
no seu site: 
 
• Os textos devem ser curtos e as linhas não podem ser extensas. Na tela de um 
monitor a leitura é 25% mais difícil, por isso, segundo Jakob Nielsen, os textos 
devem ser 50% mais curtos. Procure fazer com a largura das linhas ou colunas de 
texto não ultrapassem 80 caracteres, pois pode causar uma perda no foco da 
leitura do usuário ao mudar de linha. 
• Não dê boas-vindas aos seus visitantes, você não os conhece e eles podem se 
sentir intimidados se estiverem passando apenas para “dar uma olhadinha". 
Saudações de boas-vindas são melhores em áreas restritas aos usuários. 
• A linguagem deve ser adequada ao público-alvo. Por exemplo, gírias são melhores 
em sites voltados ao público jovem, enquanto que sites jornalísticos necessitam de 
uma linguagem mais culta. Em muitos casos o excesso de formalidade do texto 
também pode prejudicar a experiência de seus usuários, mas mantenha o bom 
senso ao redigir o conteúdo de seu website. 
• Evite palavras de difícil compreensão das pessoas ou termos técnicos, se o seu 
público-alvo for diversificado. 
• Usar somente o discurso imperativo, como em “Insira uma cidade ou CEP” nas 
tarefas obrigatórias ou qualificar a declaração adequadamente. Por exemplo, você 
poderia dizer “Para saber o tempo local, insira uma cidade ou CEP”. As pessoas 
acompanham naturalmente o texto que informa o que devemos fazer em um site, 
principalmente se estiver em algo conhecido, como uma caixa de entrada ou em 
menu drop-down, e com certeza seguem as instruções porque acham que devem 
fazer o que as instruções indicam (Fonte: Leonardo Faria apud Jakob Nielsen 
[http://leonardofaria.net/tags/usabilidade/, acesso em 08/07/2006]). 
• Os pontos de exclamação devem ser evitados, pois não fazem parte da grafia 
profissional. 
• Evite textos totalmente em maiúsculas. Além de comprometerem a legibilidade, 
texto em maiúsculas muitas vezes sugerem que você esteja “gritando”como o 
usuário. 
 
 
3.2. A importância do feedback 
O feedback é a melhor forma de você obter informações sobre o funcionamento de seu 
website e interagir com seus usuários e público-alvo. Além de passar credibilidade, o 
feedback dos usuários será útil para avaliar o desempenho do site e dos sistemas que 
o compõe. 
O termo tem vários significados e muitos deles podem ser aplicados aos projetos de 
internet. Por exemplo, em marketing e publicidade é o retorno que se obtém de alguma 
campanha de comunicação realizada pela empresa através de alguma pesquisa ou 
Desvendando o Desenvolvimento de Websites - 2006 
 14 de 26 
mecanismo de resposta2. De uma forma geral, o feedback é o processo em que 
solicitamos uma informação a um sistema e obtemos uma resposta do próprio sistema 
sobre o desempenho da solicitação. 
 
3.2.1. Na prática, como fazer? 
É importante sabermos obter e enviar feedbacks. Uma forma de obter feedback 
dos usuários é oferecer opções de contato e resposta caso o sistema não esteja 
funcionando corretamente. Por exemplo, em alguns sites de downloads, ao 
escolher o aplicativo que irá baixar, o usuário pode ver na página um pequeno 
formulário onde ele pode reportar para a equipe de suporte qualquer erro que 
esteja acontecendo ao tentar fazer o download. Os próprios formulários de 
contato, comum à maioria dos sites, são formas de obter feedback (comentários, 
sugestões, críticas, dúvidas). Enquetes e pesquisas de opinião, além de serem 
bons elementos de interação, são formas interessantes de se colher feedback 
dos usuários. 
E quanto a enviar feedbacks? Oferecer feedback aos usuários é uma maneira de 
passar confiança e orientá-lo em suas tarefas. Uma mensagem de “Aguarde, 
carregando...” na página solicitada é uma das várias formas de oferece feedback 
na internet. Quando um usuário preenche um formulário (cadastro, contato, etc.) 
e submete os dados, ele deve receber algum tipo de mensagem que informe o 
sucesso da operação ou os erros que aconteceram durante o processo. 
Pequenos detalhes como esses fazem com que as pessoas se sintam mais 
seguras ao navegar pelo seu website. 
3.3. Espaço para opiniões 
Dependendo do conteúdo (site de comércio eletrônico) ou de uma área específica do 
site (seção de artigos), um espaço público para que os usuários deixem suas opiniões 
e comentário é uma boa idéia. 
Além de transmitir credibilidade – porque você realmente se interessa pela opinião de 
seus usuários –, ainda estará unindo as pessoas que acessam seu site em torno do 
assunto, elas estarão interagindo entre si e entre o site, compartilhando informações. É 
também uma forma de também obter feedback. 
3.4. Ajude o usuário 
Garanta que o usuário não se sinta perdido ou confuso ao realizar tarefas em seu 
website e encontre a informação que precisa. Por isso as tarefas devem conter 
instruções simples, claras e objetivas sobre seu uso. Por exemplo, um campo de 
formulário para inserir a data deve conter uma instrução explícita de como deve ser 
preenchido (dd/mm/aaaa). E, sempre que necessário, forneça documentações de 
ajuda sobre funcionalidades que podem ser mais complexas, como os formulários. 
Recursos de busca eficientes, mapa do site e inclusão de links relacionados nas 
páginas também estão entre as várias formas de ajudar seus usuários a encontrar o 
que eles procuram. 
 
 
2
 Fonte: Dicionário Publicitário Online (http://d2dbr.free.fr/dicionariopublicitario/f.htm, acesso em 05/07/2006) 
Desvendando o Desenvolvimento de Websites - 2006 
 15 de 26 
4) WEB STANDARDS 
São recomendações de desenvolvimento de websites, propostos pela W3C3, que 
estão se tornando padrões. O uso das web standards traz benefícios a 
desenvolvedores e usuários. 
Para o desenvolvedor: 
 
• Sites bem construídos e estruturados 
• Facilidade de manutenção 
• Redução de custos 
• Redução de dificuldades de criação 
• Compatibilidade entre diversas plataformas 
 
Para os usuários: 
 
• Sites acessíveis para usuários de diferentes browsers ou pessoas com deficiência 
• Fácil navegação e acesso ao conteúdo 
• Dinamismo nas aplicações 
• Sites leves 
 
Os padrões web tratam de especificações sobre HTML, XHTML, DOM e CSS. 
 
4.1. Quatro regras básicas 
Marcelo da Silva Macedo, em seu livro Construindo Sites Adotando Padrões Web 
(Editora Ciência Moderna, 2004), cita quatro características propostas pela W3C para 
que o seu site esteja estruturado corretamente: 
 
• O site deve facilitar a navegação através do seu conteúdo, ou seja, que os 
elementos de sua interface sejam operáveis por qualquer pessoa; 
• O conteúdo e os controles do site devem ser de fácil identificação e auto-
explicativos; 
• O conteúdo do site deve ser perceptível a qualquer pessoa sejam quais forem as 
condições de acesso; 
• O site deve utilizar tecnologias que o compatibilizem com os dispositivos de 
visualização atuais e futuros e, assim, preservar sua integridade tecnológica. 
 
4.2. Separando conteúdo e formatação 
Um conceito sobre web standards que facilita o trabalho dos desenvolvedores e 
designers é separar a formatação estética do conteúdo do site. 
Antigamente usava-se muito no HTML tags como <font> e atributos como bgcolor, 
style, size, width, height. Essa formatação “manual” dificultava a manutenção de 
páginas, tanto no aspecto estético como no desenvolvimento propriamente dito. O 
crescente uso do CSS vem facilitando esse processo, afinal, podemos ter controle mais 
preciso sobre a estilização dos elementos e criar classes com estilos que podem ser 
usados por vários elementos. Assim, quando for preciso alterar fonte, posicionamento, 
cores, bordas, espaçamentos, margens ou dimensão dos objetos, apenas um arquivo 
precisará ser modificado. Uma outra grande vantagem do CSS é que podemos definir 
aos objetos características para diversos tipos de mídia (tela, impressão, braille, aural, 
etc.), tornando suas páginas mais acessíveis. 
Portanto, o HTML/XHTML irá cuidar apenas da estrutura de seus documentos e a 
estilização é definida em uma folha de estilos. 
 
3
 W3C: significa World Wide Web Consortium e é a organização oficial para os padrões Web, especialmente HTTP, 
HTML e XML. O W3C foi fundado em 1994 por Tim Berners-Lee, considerado o inventor da Web. (Fonte: 
www.aisa.com.br/diciona.html) 
Desvendando o Desenvolvimento de Websites - 2006 
 16 de 26 
 
Dica: Saiba mais sobre CSS em http://pt.wikipedia.org/wiki/Cascading_Style_Sheets. 
 
 
4.3. Atenção com a Semântica 
Semântica é o estudo dos significados da linguagem, avaliando a relação entre as 
palavras e os conceitos que elas simbolizam4. Na web, significa estruturar 
corretamente o conteúdo para que pessoas e máquinas compreendam as informações. 
No desenvolvimento de web sites, aplicar a semântica é usar tags adequadas para 
expressar o conteúdo apresentado. 
Cada tag tem uma função específica e deve ser usada de modo correto para que o seu 
site tenha uma estrutura adequadamente contextualizada. 
 
 
4.3.1. Tableless 
O tableless, na verdade, é a própria utilização de web standards para construir 
documentos web, mas uma forte característica dos padrões foi o que deu nome a 
esta técnica: não utilizar tabelas para estruturar elementos das páginas. 
Tabelas (tag <table>) têm a função de apresentar dados tabulados e não de 
estruturar e posicionar os elementos gráficos da interface dos websites. Ao invés 
de usarmos tabelas, que entre outras desvantagens deixa o código mais pesado, 
são usadas as tags <div> (divisão) para criar seções, colunas ou posicionar 
alguns elementos. As divs não possuem valor semântico e não aplicam 
formatação se não estiverem associadas ao uma id CSS. 
Ex.: 
 <div id=”menu”> 
 - Menu de navegação –</div> 
<div id=”conteudo”> 
 - Conteúdo deste bloco – 
</div> 
Divs nomeadas com id’s corretas ajudam a indicar o conteúdo que está sendo 
apresentado naquela seção. 
Ao invés de ficar criado várias <table>, <tr> e <td> para definir listas, menus, 
posicionar elementos gráficos ou criar blocos de conteúdo, veja as dicas abaixo. 
 
4.3.2. Cada tag em seu lugar 
• Use as tags <h*> (onde * é um número de 1 a 6) para definir os títulos e 
subtítulos de seu site. Quanto menor o número, maior é o nível do título e, 
consequentemente, maior será o tamanho da fonte (ex.: h1 é o título de 
primeiro nível, etc.); 
• Use a tag <p> para os parágrafos, <span> para aplicar alguma formatação 
em textos ou palavras dentro de um parágrafo e <br /> para quebrar a linha 
dentro de um parágrafo; 
• Não utilize as tags <b>(negrito) e <i>(itálico). Por questões semânticas e até 
de acessibilidade, use <strong> para enfatizar em negrito e <em> para 
enfatizar em itálico. Um browser para deficientes visuais não sabe o que é 
um texto “bold”, mas sabe o que é um texto enfatizado; 
• Utilize listas não-ordenadas (<ul>) para criar listas de itens, como menus de 
navegação. Listas ordenadas devem ser usadas para itens que devem ser 
numerados; 
• As <table>, como vimos, devem ser usadas para apresentar informações em 
linhas e colunas; 
 
4
 Fonte: Enciclopédia Ilustrada Folha, Folha de S. Paulo, 1995, pg. 874; 
Desvendando o Desenvolvimento de Websites - 2006 
 17 de 26 
• Dentro da <table>, separe cabeçalho, corpo e rodapé de tabelas como 
<thead>, <tbody>, <tfooter>, respectivamente; 
• Para células de títulos e cabeçalhos de linhas e colunas, utilize a tag <th>; 
• Agrupe seus formulários ou conjuntos de campos de um mesmo formulário 
com a tag <fieldset> e para incluir um título para aquele grupo de campos 
utilize a tag <legend>. Ex.: agrupar Informações Pessoais em um fieldset, 
agrupar Dados gerais em outro fieldset, etc.; 
• Para mostrar o significado de siglas, utilize a tag <acronym> com o atributo 
title; 
 
4.4. Endentando seu código 
Endentar significa recuar tags do seu código que estejam aninhados (inseridos) em 
outras tags. Essa simples prática facilita a leitura do código fonte, pois indica uma 
hierarquia entre os elementos. 
Ex.: 
 <html> 
 <head> 
 <title>Minha Página</title> 
 </head> 
 
 <body> 
 <h1>Título</h1> 
 <p>Texto do parágrafo</p> 
 </body> 
 </html> 
Podemos ver que o maior elemento desse código é a tag <html>, dentro dela está 
aninhada a tag <head> (que contém a tag <title>) e a tag <body> (que contém as tags 
<h1> e <p>). Dessa forma é simples identificar o início e o fim dos elementos e quais 
outros elementos estão contidos nele. 
Utilize a tecla “tab” para fazer as endentações de seu código. 
 
4.5. Não esqueça o Doctype 
A declaração do Doctype (document type declaration - DTD) deve ser a primeira tag de 
seus documentos HTML/XHTML. Ela indica qual o tipo de marcação que está sendo 
usada (HTML ou XHTML), a versão e o tipo (Strict, Transitional ou Frameset). Vale 
lembrar que sem o Doctype seu código não poderá ser validado pela W3C como um 
documento HTML/XHTML válido. 
 
Dica: Saiba mais sobre como declarar corretamente o Doctype em 
http://www.w3.org/QA/2002/04/valid-dtd-list.html. 
 
4.6. Fornecendo Informações sobre o seu site 
A tag <meta> é responsável por fornecer metainformações sobre o seu site 
(informações sobre as informações). Você pode usar várias tags meta para informar a 
codificação de seu documento, data de expiração do conteúdo (instruções que 
modificam o cabeçalho HTTP) ou também o autor do site, a descrição, palavras-
chaves, língua (instruções capturadas pelos mecanismos de busca). 
Ex.: 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" /> 
<!— Tipo de conteúdo deste documento � 
 <meta http-equiv="pragma" content="no-cache" /> 
 <!— Não armazena a página em cachê � 
 <meta name="author" content="Seu Nome" /> 
 <!— Identifica o autor desta página � 
 
Desvendando o Desenvolvimento de Websites - 2006 
 18 de 26 
4.7. Comentários 
A utilização de comentários em códigos HTML/XHTML auxilia o desenvolvedor a 
compreender o documento ou apresentar instruções e informações, caso o seu 
documento seja compartilhado entre vários desenvolvedores. Os comentários não são 
visíveis pelos usuários e não são interpretados pelos browsers. 
Ex.: 
 <!-- Início do Documento --> 
<html> 
 <head> 
 <title>Minha Página</title> 
 </head> 
 
 <body> 
 <!—Conteúdo Principal: insira aqui o texto principal 
de apresentação do site --> 
 <div id=”conteudo”> 
 <h1>Título</h1> 
 <p>Texto do parágrafo</p> 
 </div> 
 </body> 
 </html> 
 <!-- Fim do Documento --> 
Desvendando o Desenvolvimento de Websites - 2006 
 19 de 26 
5) USABILIDADE 
 
Usabilidade é definida como a facilidade de realização de tarefas em uma interface, 
visando analisar e otimizar a facilidade de aprendizado do sistema, a eficiência do uso, 
a facilidade de memorização (para que o usuário não precise reaprender a usar a 
interface), a baixa taxa de erros (evitando transtornos na realização de tarefas) e 
satisfação do usuário ao interagir com o sistema. 
 
5.1. Projetando para o usuário 
Os conceitos de usabilidade têm como base o desenvolvimento de projetos centrados 
nas necessidades reais dos usuários. Lembre-se, usabilidade não tem a ver com os 
gostos dos usuários, mas sim como suas necessidades. Por isso as interfaces devem 
fazer com que um usuário utilize um website de maneira intuitiva e a usabilidade visa 
facilitar este processo. 
Por que fazer sites usáveis? “Os concorrentes estão a um clique de distância.” 
(Jakob Nielsen) 
 
5.1.1. O que os usuários esperam dos websites 
 
• Textos que podem ser lidos; 
• Conteúdo e respostas para suas questões; 
• Navegação e busca que os ajudem a encontrar o que procuram; 
• Formulários pequenos e simples; 
• Nada de bugs, dados corrompidos, links quebrados, conteúdo desatualizado, 
erros de grafia. 
Fonte: Universidade Federal do Rio Grande do Sul (citações de Jakob Nielsen) 
http://www.inf.ufrgs.br/~cabral/PalestrasApostilas.html 
5.1.2. Os principais erros que dificultam a experiência do usuário 
Os erros mais cometidos pelos desenvolvedores, segundo Jakob Nielsen: 
 
• Áreas saturadas com objetos rolantes e animados, que sobrecarregam a 
visão do usuário; 
• Scroll longo; 
• Cores de links não-padrão; 
• Longo tempo de download do website; 
• Longos níveis hierárquicos dos diretórios de websites; 
• Páginas Órfãs, que não estão relacionadas a outras páginas; 
• Tentar controlar a navegação do usuário com frames, links que abrem novas 
janelas ou movem para outra URL; 
• Quebra de consistência; 
• Oferecer um link de “mailto:” ao invés de um links para uma página com 
informações de contato; 
• Scroll horizontal; 
• Grandes blocos de texto; 
• FAQ (Frequently Answered Questions) com perguntas infrequentes; 
• Páginas linkadas a si próprias; 
• Textos contidos em imagens; 
• Informação excessiva ou desnecessária; 
• Incompatibilidade de browsers. 
 
Desvendando o Desenvolvimento de Websites - 2006 
 20 de 26 
 
5.1.3. Melhores Práticas e Regras 
 
• Mantenha todos os links com um estilo padrão. Eles não precisam ser azuis 
(cor padrão do navegador) e sublinhados, como sugere Jakob Nielsen. Eles 
devem ser diferenciados, possuir cores e estilo que os identifiquem e os 
torne de fácil visualização; 
• Os títulos dos links devem ser auto-explicativos. Coloque os links em 
palavras significativas, evitando termos genéricos como “Clique aqui” e 
“Mais”; 
• Se o link vincular a outro tipo de arquivo que não seja uma outra página da 
web, ele deve indicar o que acontecerá. O uso de íconesé interessante 
neste caso; 
• Ofereça design leve e agradável, use poucas imagens: as pessoas procuram 
conteúdo; 
• O alto contraste entre plano de fundo e textos é fundamental; 
• Evite a rolagem horizontal a 800x600; 
• Evite textos longos e redundantes. O conteúdo deve conter parágrafos curtos 
e sentenças simplificadas; 
• Não ofereça muitas áreas de navegação, principalmente se os links forem 
semelhantes; 
• Evite menus suspensos; 
• Nunca inclua em uma página um links para ela mesma, principalmente na 
Home; 
• As opções e informações mais importantes devem estar acima da primeira 
rolagem de tela; 
• As caixas de entrada de busca devem possuir uma tamanho adequados para 
que os usuários possam ver e editar mais facilmente a sua consulta; 
• Não surpreenda os usuários: não abra janelas pop-ups automaticamente; 
não utilize um link para “mailto”, é desesperador quando se clica em um link 
de “Contato” e ele abre o programa padrão de e-mail; 
• Lembre-se: a navegação dos usuários deve ser tranqüila, sem incômodos e 
surpresas desagradáveis; 
• Não coloque links para “Voltar a Página Anterior”. Não tente reproduzir 
controles do navegador; 
• Os usuários não devem clicar em mais de três links para chegar até a 
informação que desejam; 
• O usuário precisa saber: de onde ele veio, por onde ele andou e por onde ele 
pode navegar. Tenha uma arquitetura de informação consistente, provenha 
um mapa do site e, se necessário, utilize breadcrumb trails5. 
 
 
5.2. Heurísticas para avaliar a usabilidade 
As avaliações heurísticas geralmente são feitas por avaliadores pertencentes à própria 
equipe de desenvolvimento, não envolvendo ainda os usuários que utilizarão os 
sistemas. É um processo rápido, fácil e barato. Têm muita eficiência, mas não tanta 
precisão quanto um teste de usabilidade realizado em laboratórios com usuários e 
avaliações realizadas por consultores de usabilidade. 
A avaliação é sempre realizada com a presença de um observador, que irá analisar os 
elementos de diálogo da interface e comparar com as heurísticas de usabilidade. 
Não abordarei muito como fazer a avaliação heurística, mas é importantes que você 
conheça as heurísticas (princípios): 
 
5
 Breadcrumb trail (“caminho de migalhas de pão”): usado em sites com vários níveis de páginas e sub-páginas ou 
seções e sub-seções. Ajuda o usuário a se localizar na arquitetura de informação do site. Normalmente possuem links 
para as pessoas voltarem às seções anteriores. Ex.: “Home � Produtos � Roupas e Acessórios � Bolsas” 
Desvendando o Desenvolvimento de Websites - 2006 
 21 de 26 
 
1. Visibilidade da situação atual do sistema: o sistema deve oferecer feedback aos 
usuários para que eles se mantenham informados sobre o status do sistema; 
2. Compatibilidade do sistema com o mundo real: o sistema precisa utilizar 
diálogos e simples e linguagem que sejam familiares aos usuários, evitando os 
termos técnicos e a informação deve aparecer na ordem natural e lógica de 
realização de tarefas segundo o modelo mental do usuário; 
3. Controle e liberdade do usuário: O sistema deve ter funções que faça com que o 
usuário possa sair de uma parte do sistema rapidamente e sem danificar a 
aplicação; 
4. Consistência e Padrões: As ações e situações devem ser aplicáveis e obter 
resultados similares em diferentes partes do sistema. Os usuários devem saber o 
que vai acontecer; 
5. Prevenção de Erros: Os erros devem ser analisados e evitados; 
6. Ajuda no reconhecimento de erros: Caso ocorram erros no sistema, as mensagem 
devem ser amigáveis, informando sobre o erro e ajudando o usuário a solucioná-lo; 
7. Reconhecer ao invés de relembrar: O usuário não deve se lembrar das coisas de 
uma ação para outra. Os elementos devem estar visíveis e facilmente recuperáveis 
quando necesário; 
8. Flexibilidade e eficiência de uso: O sistema deve ajudar o usuário em suas 
ações mais freqüentes, acelerando a interação. Prover atalhos é uma boa escolha; 
9. Design minimalista e estético: Evitar diálogos com informações irrelevantes e 
desnecessárias. Informações desnecessárias reduzem a visibilidade relativa da 
informação relevante. No design estético deve prevalecer a satisfação, o design 
visual e a legibilidade; 
10. Oferecer documentação e informações de ajuda: o sistema deve possuir 
documentos de fácil acesso que expliquem claramente as diretrizes de utilização 
do sistema e informações sobre os processos, focando nas tarefas do usuário. 
 
Como vimos, a maioria das recomendações sobre usabilidade foram abordados 
em todos os capítulos, planejamento, design, webstandards, interação com o 
usuário, o que nos mostra que a usabilidade é essencial e está em todas as 
etapas de desenvolvimento. 
Desvendando o Desenvolvimento de Websites - 2006 
 22 de 26 
 
6) ACESSIBILIDADE 
 
Fazer um site acessível é fazer com que qualquer pessoa tenha acesso facilmente ao 
conteúdo do website e não tenha uma navegação restrita independente de: 
 
• Limitações ou deficiências físicas; 
• Dificuldade de compreensão de textos; 
• Falta de dispositivos como teclado e mouse ou dificuldade de utilizá-los; 
• O usuário estar com olhos, ouvidos ou mãos ocupados; 
• Falta de compreensão do idioma em que o documento foi escrito; 
 
As diretivas de acessibilidade possibilitam que os sites se mantenham acessíveis 
apesar de limitações do usuário, sejam físicas, sensoriais, cognitivas ou tecnológicas, 
aumentando a vida útil dos websites e sendo capaz de beneficiar um número muito 
maior de pessoas. 
Como no capítulo sobre usabilidade, alguns conceitos de acessibilidade já foram 
abordados nos demais capítulos. Mas não custar reforçar um pouco mais. 
 
 
6.1. As Principais Diretivas 
A seguir são apresentadas as principais diretivas de acessibilidade, classificadas por 
assunto. As diretivas variam de prioridade: diretivas de prioridade 1 são as que devem 
ser satisfeitas; as diretivas de prioridade 2 são as que deveriam ser satisfeitas; e as de 
prioridade 3 são as que poderiam ser satisfeitas. 
As diretivas apresentadas neste capítulo se referem apenas aos casos gerais. Mas ao 
final do capítulo você pode conferir todas as diretivas para frames, tabelas, multimídia, 
etc. 
 
6.1.1. Texto e Conteúdo 
Procure utilizar sempre uma linguagem clara e simples em seus documentos de 
modo adequado ao conteúdo do site (Prioridade 1) e crie documentos que sejam 
passíveis de validação por gramáticas formais (Prioridade 2). 
A língua principal utilizada nos documentos deve ser especificada (Prioridade 3) 
bem como quaisquer mudanças na língua dos textos de um documento 
(Prioridade 1). 
Garanta que o equivalente ao conteúdo dinâmico seja atualizado sempre 
que este seja mudado. (Prioridade 1) 
Sempre que existir tags adequadas para apresentar determinado tipo de 
conteúdo, utilize as tags ao invés de imagens para transmitir informações. 
(Prioridade 2) 
Quando houver acrônimos ou abreviaturas em um documento, eles 
devem ser especificados por extenso. (Prioridade 3) 
 
6.1.2. Cores 
A identificação de informações em cores deve também estar disponível sem cor. 
(Prioridade 1) 
A combinação entre cores de texto e plano de fundo deve oferecer contraste 
suficiente para que usuários com cromodeficiência ou que utilizem monitores 
monocromáticos possam ver as informações. (Prioridade: 2 para imagens; 3 para 
textos) 
 
Desvendando o Desenvolvimento de Websites - 2006 
 23 de 26 
6.1.3. Imagens 
Toda imagem (bem como regiões de mapas de imagens, animações, applets, 
imagens utilizadas em listas, frames e arquivos de áudio e vídeo) deve possuir 
um equivalente textual, através dos atributos alt ou longdesc. (Prioridade 1) 
Utilize imagens e gráficos quando elas facilitarem a compreensão do conteúdo.(Prioridade 3) 
 
6.1.4. Estrutura e Formatação 
Procure utilizar as folhas de estilo (CSS) para controlar a apresentação e 
formatação. (Prioridade 2) 
A organização do documento deve possibilitar sua visualização e leitura mesmo 
sem folhas de estilo. (Prioridade 1) 
As unidades de medida nos atributos das folhas de estilo ou nas tags CSS 
devem ser relativos e não absolutos, possibilitando ao usuário, por exemplo, 
alterar o tamanho da fonte de acordo com a sua necessidade. (Prioridade 2) 
As tags de cabeçalho (h1..h6) devem ser usadas de modo adequado para indicar 
seções e sub-seções de um documento. (Prioridade 2) 
Os estilos de formatação e apresentação devem ser consistente ao longo de 
diferentes documentos. (Prioridade 3) 
 
6.1.5. Links 
Cada links deve indicar claramente o seu destino. (Prioridade 2) 
Links relacionados devem ser agrupados e os grupos devem ser identificados. 
(Prioridade 3) 
Fornecer atalhos para os links mais importantes (inclusive os links dos mapas de 
imagens e controles de formulários), através do atributo acesskey. (Prioridade 2) 
 
6.1.6. Controles de Navegação 
Evite criações que provoquem intermitência de vídeo (Prioridade 1) ou 
intermitência de conteúdo, como alterar em intervalos regulares. (Prioridade 2) 
Os documentos não devem recarregar automaticamente ou periodicamente, até 
que os usuários o façam. (Prioridade 2) 
Os redirecionamentos também não devem ocorrer automaticamente, até que os 
usuários o façam. (Prioridade 2) 
Não provoque a abertura de janelas que se sobreponham às outras e também 
não faça com que a janela atual seja modificada sem que o usuário seja 
informado. (Prioridade 2) 
Procurar criar uma tabulação lógica em seqüência para percorrer links, controles 
de formulários e objetos. (Prioridade 3) 
 
6.1.7. Sobre o Site 
Forneça metadados sobre as informações de seu site. (Prioridade 2) 
Procure prover informações sobre a organização geral do site, através de índices 
ou mapa do site. (Prioridade 2) 
As tecnologias W3C devem ser utilizadas em suas versões mais recentes 
sempre que estiverem disponíveis e sejam adequadas a um determinado caso. 
Não utilize características desatualizadas ou não recomendadas pela W3C. 
(Prioridade 2) 
 
6.1.8. Formulários 
Garante que todos os controles de formulários que contenham rótulos 
associados estejam corretamente posicionados e associar explicitamente os 
rótulos aos respectivos controles de formulários. (Prioridade 2) 
Desvendando o Desenvolvimento de Websites - 2006 
 24 de 26 
6.2. Quando não for possível criar um documento totalmente 
acessível 
Se mesmo com todos os esforços você não conseguiu criar um documento totalmente 
acessível a qualquer tipo de usuários, provenha um link para um documento 
alternativo, que seja acessível, use as tecnologias W3C, contenha as informações e 
funcionalidades equivalentes e seja atualizado com a mesma freqüência que o 
documento inacessível. 
 
6.3. Para saber mais 
Acessibilidade – UNIVERSIDADE FEDERAL DO RIO GRANDE DO SUL [disponível 
em http://www.inf.ufrgs.br/~cabral/Acessibilidade.ppt ] 
Desvendando o Desenvolvimento de Websites - 2006 
 25 de 26 
 
REFERÊNCIAS BIBLIOGRÁFICAS 
 
HOLZSCHLAG, M. E. 250 HTML and Web Design Secrets. Indianápolis, IN, EUA: Wiley 
Publishing, Inc., 2004. 412 p. 
 
MACEDO, M. S. Construindo sites adotando padrões Web. Rio de Janeiro: Editora Ciência 
Moderna Ltda., 2004. 249 p. 
 
MEMÓRIA, F. Design para a Internet: projetando a experiência perfeita. Rio de Janeiro: 
Elsevier, 2005. 171 p. 
 
NIELSEN, J.; TAHIR, M. Homepage Usabilidade: 50 websites desconstruídos. EUA: New 
Riders Pub, 2002. 315 p. 
 
ROMANI, R.; UNIVERSIDADE ESTADUAL DE CAMPINAS. Usabilidade Web. 42 p. 
 
UNIVERSIDADE FEDERAL DO RIO DE JANEIRO. Usabilidade de Processos. 
[http://64.233.161.104/search?q=cache:EzE_mlNPwmEJ:www.cos.ufrj.br/woses/pdfs/rosang-
woses.pdf+10+heur%C3%ADsticas+de+Jakob+Nielsen&hl=pt-BR&gl=br&ct=clnk&cd=2, 
acesso em 16/07/2006] 
 
UNIVERSIDADE FEDERAL DO RIO GRANDE DO SUL. Acessibilidade. 2006. 18 p. 
[http://www.inf.ufrgs.br/~cabral/Acessibilidade.ppt] 
 
UNIVERSIDADE FEDERAL DO RIO GRANDE DO SUL. Equívocos segundo Nielsen. 2006. 65 
p. [http://www.inf.ufrgs.br/~cabral/11.Equivocos.Nielsen2006.ppt] 
 
UNIVERSIDADE FEDERAL DO RIO GRANDE DO SUL. Ergonomia se Software. 2006. 47 p. 
[http://www.inf.ufrgs.br/~cabral/06.Erg.Soft.Abr.2006.ppt] 
 
UNIVERSIDADE FEDERAL DO RIO GRANDE DO SUL. Usabilidade de Software. 2006. 43 p. 
[http://www.inf.ufrgs.br/~cabral/12.Usabilidade.Mai.2006.ppt] 
 
WILLIAMS, R. Design para quem não é designer. 2 ed. [S.l.]: CALLIS, 2005. 191 p. 
 
 
Sites 
 
www.usabilidoido.com.br 
 
www.tableless.com.br 
 
www.maujor.com.br 
 
pt.wikipedia.org 
 
www.seisdeagosto.com 
 
leonardofaria.net/tags/usabilidade/
Desvendando o Desenvolvimento de Websites - 2006 
 26 de 26 
 
APÊNDICE A: OUTROS LIVROS INDICADOS 
 
Don’t Make Me Think (Não me faça pensar) 
Steve Krug 
 
Information Architecture for the World Wide Web 
Peter Morville 
 
Design for Web Developers: Colour and Layout for the Artistically Overwhelmed 
Linda Goin 
 
A Galáxia Internet: Reflexões sobre internet, negócios e sociedade 
Manuel Castells 
 
Design/Web/Design:2 
Luli Radfaher 
 
Projetando Websites 
Jakob Niesen 
 
Webwriting – Redação 
Bruno Rodrigues 
 
Usabilidade na Web: Criando Portais Mais Acessíveis 
Cláudia Dias