Desvendando o Desenvolvimento de Websites - 2006

Desvendando o Desenvolvimento de Websites

Por Talita Pagani Britto (designer e desenvolvedora www.talitapagani.com)

SUMRIO

DESVENDANDO O DESENVOLVIMENTO DE WEBSITES ........................................................1 SUMRIO ..................................................................................................................................1 INTRODUO...........................................................................................................................3 1) PLANEJAMENTO .....................................................................................................................4 1.1. OBTENDO INFORMAES: BRIEFING .......................................................................................4 1.2. ARQUITETURA DE INFORMAO .............................................................................................4 1.2.1. O que ?......................................................................................................................4 1.2.2. Como Fazer?...............................................................................................................4 1.2.3. Peso do contedo .......................................................................................................5 1.3. W IREFRAMES: DESIGN DE INTERFACE .....................................................................................6 1.3.1. Regras e dicas para projetar um bom wireframe........................................................6 1.3.2. Padro Universal de Interface.....................................................................................6 1.3.3. Exemplo de como construir um wireframe..................................................................7 1.4. PROTOTIPAO.....................................................................................................................8 1.4.1. Definindo Cenrios......................................................................................................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. Grficos .....................................................................................................................10 2.1.4. Mantenha a consistncia ..........................................................................................10 2.2. DIAGRAMAO ....................................................................................................................11 2.2.1. Proximidade ..............................................................................................................11 2.2.2. Alinhamento ..............................................................................................................11 2.2.3. Repetio ..................................................................................................................12 2.2.4. Contraste...................................................................................................................12 2.3. RESOLUO DE TELA ..........................................................................................................12 3) INTERAO COM O USURIO.............................................................................................13 3.1. DICAS DE COMPOSIO DOS TEXTOS....................................................................................13 3.2. A IMPORTNCIA DO FEEDBACK .............................................................................................13 3.2.1. Na prtica, como fazer? ............................................................................................14 3.3. ESPAO PARA OPINIES ......................................................................................................14 3.4. AJUDE O USURIO ...............................................................................................................14 4) WEB STANDARDS .................................................................................................................15 4.1. QUATRO REGRAS BSICAS ...................................................................................................15 4.2. SEPARANDO CONTEDO E FORMATAO ..............................................................................15 4.3. ATENO COM A SEMNTICA ...............................................................................................16 4.3.1. Tableless ...................................................................................................................16 4.3.2. Cada tag em seu lugar ..............................................................................................16 4.4. ENDENTANDO SEU CDIGO ..................................................................................................17 4.5. NO ESQUEA O DOCTYPE ..................................................................................................17 4.6. FORNECENDO INFORMAES SOBRE O SEU SITE ..................................................................17 4.7. COMENTRIOS ....................................................................................................................18

1 de 26

Desvendando o Desenvolvimento de Websites - 2006

5) USABILIDADE ........................................................................................................................19 5.1. PROJETANDO PARA O USURIO ............................................................................................19 5.1.1. O que os usurios esperam dos websites ................................................................19 5.1.2. Os principais erros que dificultam a experincia do usurio ....................................19 5.1.3. Melhores Prticas e Regras ......................................................................................20 5.2. HEURSTICAS PARA AVALIAR A USABILIDADE..........................................................................20 6) ACESSIBILIDADE ..................................................................................................................22 6.1. AS PRINCIPAIS DIRETIVAS ...................................................................................................22 6.1.1. Texto e Contedo......................................................................................................22 6.1.2. Cores .........................................................................................................................22 6.1.3. Imagens.....................................................................................................................23 6.1.4. Estrutura e Formatao ............................................................................................23 6.1.5. Links ..........................................................................................................................23 6.1.6. Controles de Navegao...........................................................................................23 6.1.7. Sobre o Site...............................................................................................................23 6.1.8. Formulrios ...............................................................................................................23 6.2. QUANDO NO FOR POSSVEL CRIAR UM DOCUMENTO TOTALMENTE ACESSVEL .......................24 6.3. PARA SABER MAIS ...............................................................................................................24 REFERNCIAS BIBLIOGRFICAS ...........................................................................................25 APNDICE A: OUTROS LIVROS INDICADOS .........................................................................26

2 de 26

Desvendando o Desenvolvimento de Websites - 2006

INTRODUO Esta apostila apresenta de maneira objetiva os conceitos bsicos que todo designer para a web deve conhecer para projetar sites agradveis, fludos e que facilitem a experincia das pessoas. Hoje em dia, qualquer pessoa que deseja trabalhar com desenvolvimento para internet deve ter conhecimentos que vo alm de HTML, JavaScript, PHP. A forma como as pessoas se relacionam atravs da web e a navegao centrada no usurio so alguns dos conceitos que j so prioridade na hora de projetar websites. Por isso esta apostila no sobre como fazer as pginas com XHTML e CSS, supondo que voc j tenha um conhecimento bsico nestas linguagens, pois ser necessrio no captulo sobre Web Standards e Acessibilidade. Voc aprender os principais fundamentos da Arquitetura de Informao, Estratgia de Contedo, Projeto de Wireframes, Design, Comunicao com o usurio, Usabilidade e Acessibilidade, para projetar sites que, alm de bonitos, so fceis de usar e acrescentam valor experincia do usurio com o produto. Com certeza ser uma tima referncia se voc estiver comeando 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 relao de links e livros interessantes no final da apostila.

Boa leitura.

3 de 26

Desvendando o Desenvolvimento de Websites - 2006

1) PLANEJAMENTO
Neste captulo voc aprender todos os processos para levantar informaes do projeto e definir as estratgias do fluxo de navegao e interface.

1.1. Obtendo informaes: Briefing

Briefing conjunto de informaes 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 dimenso do website, e basicamente voc deve levantar informaes como: Qual o ramo de atuao da empresa e quais os servios oferecidos? Quem o pblico-alvo? Quais as vantagens/desvantagens da empresa sobre os concorrentes? Qual o objetivo do site? Que imagem deseja ser transmitida para o usurio/cliente ? Qual o contedo do site? (tpicos)

Outras questes que podem ser inseridas so 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, seo Downloads. (http://www.arteccom.com.br/webdesign/interna.asp?id=3)

1.2. Arquitetura de Informao

Depois que voc obteve as principais informaes, chegou a hora de definir a arquitetura de informao.

1.2.1. O que ?
o design da informao do site, que tem como mtodos a hierarquia de contedos relacionados entre si e a estruturao dos fluxos de navegao. o processo que analisa o peso(relevncia) do contedo e desenvolve os caminhos para uma navegao fcil e intuitiva. A arquitetura de informao define o mapa do site e a hierarquia dos menus de navegao.

1.2.2. Como Fazer?

No briefing voc definiu com seu cliente qual seria o contedo do site. Por exemplo: o site que o seu cliente quer ter que ter informaes sobre a empresa (viso, misso, histria, equipe e estrutura), os servios oferecidos (treinamentos, cursos, palestras, consultoria), sala de imprensa, releases, press kit e informaes para contato. Voc deve, primeiro, agrupar o contedo 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 contedo. 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 informao que o usurio necessita. Para que voc entenda melhor, veja como ficar a arquitetura de informao do website de exemplo, sob a forma de um fluxograma (como deve ser feito):

4 de 26

Desvendando o Desenvolvimento de Websites - 2006

Fig. 1 Exemplo de Arquitetura de informao de um website Note que Releases e Press Kit foram agrupados em Sala de Imprensa e que a seo Quem Somos tambm est relacionada com a pgina de Contato, mesmo ela no estando contida na hierarquia de Quem Somos. Isso significa que as pginas de Quem Somos podem levar at a pgina de Contato, atravs de alguma mensagem ou hiperlink. Lembre-se que quanto maior o website, mais complexa ser sua arquitetura de informao. Os fluxogramas ajudam os designers a identificar e organizar os caminhos que o usurio ter que percorrer at encontrar a informao que deseja. Uma boa arquitetura de informao um dos principais ingredientes para sites eficientes e persuasivos.

1.2.3. Peso do contedo

Determinar o peso do contedo determinar a relevncia dos elementos de interface, como blocos de texto, busca, menu, imagens, etc. A arquitetura de informao organiza a hierarquia de pginas e dentro de cada pgina voc ter elementos que devem ser organizados de acordo com a sua importncia. Segundo Felipe Memria, em seu livro Design para a Internet:projetando a experincia perfeita (Editora Elsevier, 2005): As pessoas esto atrs de informao ou interao, comportamentos que geram necessidade de realizao de tarefas. Portanto, no momento de definir os elementos que iro compor as pginas de seu website, principalmente a inicial voc deve saber quais sero as principais tarefas a serem executadas pelos usurios e realar os pontos interessantes. Voc pode fazer tudo isso em uma simples folha de papel. Um exemplo, determinando a relevncia dos elementos de interface de uma pgina principal: Logotipo Recurso de Busca Nevegao Global Texto de apresentao ltimas notcias Enquete 1 1 1 1 2 2

5 de 26

Desvendando o Desenvolvimento de Websites - 2006

Coluna de Links relacionados Parceiros Publicidade Onde: 1 o elemento mais relevante e 4 o elemento menos relevante. 3 3 4

1.3. Wireframes: design de interface

No desenho dos wireframes voc ir aplicar a arquitetura de informao em esboos do layout fsico, que seriam como a estrutura, o esqueleto da interface de seu website. Este processo precede a prototipao. Como disse Molly E. Holzschlag, em seu livro 250 HTML and Web Design Secrets (Wiley Publishing, Inc., 2004), em traduo livre: Voc no estar olhando para a informao da maneira como as cores sero usadas para os links de navegao (considerado o como). Voc estar olhando para o que consiste a navegao (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 sero desenhados em uma tela e posicionados corretamente. Eles iro detalhar a navegao primria e, se necessrio, definir uma navegao secundria.

1.3.1. Regras e dicas para projetar um bom wireframe

Desenhe todos os elementos, incluindo imagens e elementos de formulrio, no tamanho real em que eles sero utilizados, para evitar erros; Mantenha um bom alinhamento e distribuio do contedo (veja mais dicas no captulo sobre Design); Use exemplos de textos que faam sentido ao contedo. Como disse 1 Felipe Memria(2005), evite o Lorem ipsum dolor sit amet ; Posicione as informaes mais importantes acima da primeira rolagem de tela, a relevncia do contedo dever ficar evidente no design da interface; As informaes relacionadas devem ser agrupadas corretamente; Os ttulos das pginas e sees devem ser coerentes e mostrar claramente ao usurio o que ele encontrar naquela pgina ou seo.

1.3.2. Padro 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 experincia perfeita
1 Frase em latim que normalmente usada para simular ttulos e massas de texto. Fonte: Design para a Internet:projetando a experincia perfeita, Felipe Memria, Editora Elsevier, Rio de Janeiro, 2005.

6 de 26

Desvendando o Desenvolvimento de Websites - 2006

Esta estrutura de pgina uma conveno de design respeita e muito usada. Ela baseada em diversos estudos que analisam quais os primeiros elementos que os usurios visualizam e procuram quando acessam um site. A viso do usurio comea da esquerda para a direita, de cima para baixo, mas ele no mantm uma viso totalmente linear do seu contedo. Tenha em mente que a viso do usurio diferente da viso do design sobre a interface. Dica: Saiba mais sobre Viso do Usrio x Viso 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 disposies, esses simples padres se tornaram convenes de design. Respeit-las fazer com que o usurio no fique surpreso ou confuso ao acessar seu site, sem saber por onde ele deve comear. Mas no encare este padro como uma limitao de criatividade, alteraes podem ser feitas, mas algumas caractersticas devem ser mantidas, por exemplo: O logotipo da empresa deve preferencialmente ser mantido esquerda, pois ele deve ser o primeiro elemento que o seu usurio ver, identificando onde ele est; A busca um recurso muito utilizado, por isso sua localizao no deve ser difcil. No precisa necessariamente ficar ao lado do logotipo, mas deve ser um dos primeiros elementos da interface; A barra de navegao tambm deve estar em locais acessveis, mas procure no coloc-la acima de banners de publicidade, no topo da pgina. Usurios ignoram a maioria dos elementos que se encontram acima dos banners; (Jakob Nielsen, Homepage Usabilidade:50 Websites Descontrudos, 2002)

1.3.3. Exemplo de como construir um wireframe

Em uma folha de papel, desenhe todos os elementos que sero 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 padro universal de interface.

7 de 26

Desvendando o Desenvolvimento de Websites - 2006

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 tambm de fazer os wireframes das pginas internas mantendo os padres usados na pgina principal. Nota: O objetivo dos wireframes no definir design grfico, por isso no se preocupe em definir cores, formas e estilos neste momento.

1.4. Prototipao
Para uma rpida definio do processo de prototipao, a etapa onde sero aplicados os conceitos do wireframe sobre um projeto visual. Este a ltima etapa do planejamento, j comeando o design grfico. Os prottipos so necessrios para que designers, desenvolvedores e cliente ter uma viso mais concreta do website, facilitando a anlise e melhora do produto.

1.4.1. Definindo Cenrios

Voc dever saber qual a meta de seu usurio no website; Pense em situaes de navegao do usurio, o que ele deseja encontrar, o que voc pode oferecer nas pginas (principal e internas) para ajudar o usurio e motivar ele a ficar mais tempo em seu website; Desenhe storyboards que mostrem o que os usurios querem e quais os caminhos que eles devem percorrer at chegar a informao desejada.

8 de 26

Desvendando o Desenvolvimento de Websites - 2006

2) DESIGN
Nessa etapa iremos tratar graficamente das pginas, dando vida aos elementos de interface e definindo a identidade visual do site.

2.1. Identidade Visual

Consiste em elaborar um padro para todos os elementos que sero comumente utilizados no site, gerando uma consistncia de contedo e melhor usabilidade, pois o usurio sabe o que esperar de determinadas funcionalidades se elas seguem os mesmos padres.

2.1.1. Escolhendo as cores

As cores so fundamentais para transmitir a energia do site e do contedo ao usurio. 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 mrbido para ser usado como plano de fundo na internet, mas vlido de acordo com a idia de ser transmitida, de uma certa maneira representa requinte se combinado outras cores como tons pastis, mas ainda assim muito pesado. Branco: uma cor bsica e limpa, suaviza o layout e casa muito bem com cores claras ou escuras. Ideal para plano de fundo. Vermelho: transmite calor, vida, inovao. Chama a ateno para o tema. Azul: passa uma certa seriedade, confiana, calma e uma cor que consegue expressar tecnologia. Pastel: cores delicadas, ideal para sites femininos, de culinria, ou sites sobre antiguidades. Laranja: jovialidade, positividade, vida, muito bom para sites teen e lazer, assim como o amarelo e rosa. Verde: sade, medicina, natureza.

Dica: Se voc deseja saber quais as melhores combinaes de cores para seu site veja esta ferramenta: http://wellstyled.com/tools/colorscheme2/.

2.1.2. Contraste e Legibilidade

A visualizao mais exaustiva no monitor, por isso procure no colocar planos de fundo escuros ou com imagens. Se voc tiver alguns elementos de cores escuras em seu site, faa com que as cores de texto sobre esses elementos tenham um contraste suficiente, pois isso pode gerar um problema grave de legibilidade se um usurio que usa monitor monocromtico acessar seu site. Dica: Em uma pgina da Universidade Federal do Rio Grande do Sul h um interessante arquivo que ser uma tima referncia 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 composio das famlias de fontes, que visa estudar questes como legibilidade, estrutura e esttica das letras impressas a fim de facilitar a comunicao visual dos textos. Na web devemos pensar com cuidado nos

tipo de fontes que sero escolhidas, para que elas tambm no causem problemas na legibilidade do contedo.

9 de 26

Desvendando o Desenvolvimento de Websites - 2006 As principais famlias de fontes so:

Serifadas (ex.: Times new Roman, Gergia, Courrier New): possuem arestas nas extremidades das letras. So adequadas para impresso, mas no para corpo de texto na web. No caso de ttulos ou textos de tamanhos grandes, oferecem elegncia. No serifadas (ex.: Arial, Tahoma, Verdana, Trebuchet MS): so as mais adequadas para a leitura online, a maioria possui alta legibilidade Cursivas (ex.: Monotype Cursiva, Staccato): so fontes que apresentam o estilo manuscrito; Fantasy (ex.: Comic Sans): so fontes decorativas, com o intuito apenas de enfeitar. Cuidado ao us-las. Normalmente so mais usadas para desenvolver logotipos.

Dica: Evite usar tipos muito parecidos entre ttulos e corpo de texto, o contraste fundamental. Espaamentos entre linhas tambm so importantes para facilitar a leitura.

2.1.4. Grficos
Nem s de textos vivem os sites, afinal, imagens tambm so contedo. O uso de grficos deve ser adequado ao contexto. Imagens usadas como detalhes de layout devem ajudar a ilustrar a interface e envolver as pessoas em seu contedo. cones e smbolos ajudam a referenciar e identificar a informao que est sendo visualizada ou requerida. Por exemplo: cones de impresso, boto fechar, casinha (ir para a pgina principal), cone de udio e/ou vdeo, marcadores de listas, etc.

Fig. 5 uso contido e adequado de grficos na seo Biblioteca do portal UOL

2.1.4. Mantenha a consistncia

Depois que voc escolheu as cores, as fontes os grficos e/ou os cones, hora de cuidar da consistncia entre os estilos. o principal conceito da identidade visual, ela indica uma familiaridade e continuidade de contedo. Um dos mais comuns erros dos profissionais de internet est na questo das cores de links: muitos sites no diferenciam as cores de links das cores de texto e no identificam os links no-visitados dos visitados. O ideal que haja, pelo menos, trs cores diferentes para os links: no-visitados, visitados e com o mouse sobre o link. As cores no precisam ser aquelas default do navegador

10 de 26

Desvendando o Desenvolvimento de Websites - 2006

(azul e prpura), como sugere o radical Jakob Nielsen. Apenas os links devem ter algum diferencial, alm da cor, como negrito ou sublinhado. Outras dicas fundamentais para manter a consistncia de suas pginas so: Tenha um nico estilo para ttulos, subttulos e corpo de texto. D preferncia para estilos bem diferenciados tanto na questo de fonte, tamanho e cores entre estes itens; Se cada seo do seu site tem uma imagem ilustrativa, faa com que todas elas possuam o mesmo tamanho, estilo (arte final) e alinhamento. O mesmo vlido para cones, smbolos e botes; Os cabealhos e rodap de suas pginas internas devem iguais, para que o usurio tenha certeza de que, quando clicar em algum link e abrir uma outra pgina, continua no mesmo site; Os elementos bsicos (ttulos, subttulos, menu de navegao, corpo de texto), alm de manter o mesmo estilo, devem manter o mesmo posicionamento e alinhamento.

2.2. Diagramao
A diagramao a etapa que cuida da distribuio e organizao de elementos em uma pgina. Veremos quatro principais fundamentos para diagramar pginas, retirados do livro Design para quem no designer, de Robin Williams (Editora CALLIS, 2005).

2.2.1. Proximidade
Os elementos de seu website que esto relacionados entre si devem ser agrupados a fim de formar unidades visuais. A proximidade entre os itens agrupados ajuda o usurio a se localizar dentro do contedo, afinal, as informaes estaro organizadas.

2.2.2. Alinhamento
O alinhamento importante tanto em questo 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 conexo visual entre os itens e unifica a pgina.

Fig. 5 Exemplo de bom alinhamento de elementos do portal Terra (as linhas pretas indicam a linha-base percebida inconscientemente)

11 de 26

Desvendando o Desenvolvimento de Websites - 2006

Para o corpo de texto, evite o alinhamento centralizado. Use-o apenas para ttulos e textos formais. O alinhamento direita tambm deve ser evitado e procure manter apenas um tipo de alinhamento em suas pginas. 2.2.3. Repetio
a consistncia no caso de documento de muitas pginas. A repetio o esforo consciente para unificar os elementos de interface e design para agrupar partes que estariam separadas e criar uma identificao e relacionamento.

2.2.4. Contraste
Aqui o contraste no diz respeito s cores e sim a uma hierarquia organizao entre diferentes elementos. Se dois itens no forem exatamente os mesmos, diferencie-os completamente. Robin Williams, Design para quem no designer

2.3. Resoluo de Tela

A maioria dos desenvolvedores e designers trabalham com resoluo de 1024 x 768 ou superior, mas a realidade dos usurios completamente diferente. Normalmente os usurios domsticos utilizam resoluo de 800 x 600, por isso voc deve estar atento para no projetar um website com largura muito extensa, afinal, barra de rolagem horizontal desagradvel e fere os princpios de usabilidade. Consequentemente a rea de visibilidade tambm 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.

12 de 26

Desvendando o Desenvolvimento de Websites - 2006

3) INTERAO COM O USURIO

Cada dia mais os desenvolvedores de internet entendem a importncia do projeto de websites centrado no usurio. A internet uma ferramenta de interao social, que conecta pessoas e no simples mquinas. Por isso importante que a forma como os produtos e servios de internet se comunicam com o usurio agregue valores, emoes e faa com que o usurio seja (e se sinta) um colaborador daquele produto/servio. Neste captulo estaremos mais prximos da usabilidade.

3.1. Dicas de composio dos textos

Textos bem escritos para a internet facilitam no s a leitura como a interao das pessoas com os websites. O importante no s saber escrever, mas o que e como escrever. Algumas dicas podem evitar que o usurio se sinta incomodado ao navegar no seu site: Os textos devem ser curtos e as linhas no podem ser extensas. Na tela de um monitor a leitura 25% mais difcil, por isso, segundo Jakob Nielsen, os textos devem ser 50% mais curtos. Procure fazer com a largura das linhas ou colunas de texto no ultrapassem 80 caracteres, pois pode causar uma perda no foco da leitura do usurio ao mudar de linha. No d boas-vindas aos seus visitantes, voc no os conhece e eles podem se sentir intimidados se estiverem passando apenas para dar uma olhadinha". Saudaes de boas-vindas so melhores em reas restritas aos usurios. A linguagem deve ser adequada ao pblico-alvo. Por exemplo, grias so melhores em sites voltados ao pblico jovem, enquanto que sites jornalsticos necessitam de uma linguagem mais culta. Em muitos casos o excesso de formalidade do texto tambm pode prejudicar a experincia de seus usurios, mas mantenha o bom senso ao redigir o contedo de seu website. Evite palavras de difcil compreenso das pessoas ou termos tcnicos, se o seu pblico-alvo for diversificado. Usar somente o discurso imperativo, como em Insira uma cidade ou CEP nas tarefas obrigatrias ou qualificar a declarao 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 instrues porque acham que devem fazer o que as instrues indicam (Fonte: Leonardo Faria apud Jakob Nielsen [http://leonardofaria.net/tags/usabilidade/, acesso em 08/07/2006]). Os pontos de exclamao devem ser evitados, pois no fazem parte da grafia profissional. Evite textos totalmente em maisculas. Alm de comprometerem a legibilidade, texto em maisculas muitas vezes sugerem que voc esteja gritando como o usurio.

3.2. A importncia do feedback

O feedback a melhor forma de voc obter informaes sobre o funcionamento de seu website e interagir com seus usurios e pblico-alvo. Alm de passar credibilidade, o feedback dos usurios ser til para avaliar o desempenho do site e dos sistemas que o compe. O termo tem vrios significados e muitos deles podem ser aplicados aos projetos de internet. Por exemplo, em marketing e publicidade o retorno que se obtm de alguma campanha de comunicao realizada pela empresa atravs de alguma pesquisa ou

13 de 26

Desvendando o Desenvolvimento de Websites - 2006

mecanismo de resposta . De uma forma geral, o feedback o processo em que solicitamos uma informao a um sistema e obtemos uma resposta do prprio sistema sobre o desempenho da solicitao.
2

3.2.1. Na prtica, como fazer?

importante sabermos obter e enviar feedbacks. Uma forma de obter feedback dos usurios oferecer opes de contato e resposta caso o sistema no esteja funcionando corretamente. Por exemplo, em alguns sites de downloads, ao escolher o aplicativo que ir baixar, o usurio pode ver na pgina um pequeno formulrio onde ele pode reportar para a equipe de suporte qualquer erro que esteja acontecendo ao tentar fazer o download. Os prprios formulrios de contato, comum maioria dos sites, so formas de obter feedback (comentrios, sugestes, crticas, dvidas). Enquetes e pesquisas de opinio, alm de serem bons elementos de interao, so formas interessantes de se colher feedback dos usurios. E quanto a enviar feedbacks? Oferecer feedback aos usurios uma maneira de passar confiana e orient-lo em suas tarefas. Uma mensagem de Aguarde, carregando... na pgina solicitada uma das vrias formas de oferece feedback na internet. Quando um usurio preenche um formulrio (cadastro, contato, etc.) e submete os dados, ele deve receber algum tipo de mensagem que informe o sucesso da operao 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. Espao para opinies

Dependendo do contedo (site de comrcio eletrnico) ou de uma rea especfica do site (seo de artigos), um espao pblico para que os usurios deixem suas opinies e comentrio uma boa idia. Alm de transmitir credibilidade porque voc realmente se interessa pela opinio de seus usurios , ainda estar unindo as pessoas que acessam seu site em torno do assunto, elas estaro interagindo entre si e entre o site, compartilhando informaes. tambm uma forma de tambm obter feedback.

3.4. Ajude o usurio

Garanta que o usurio no se sinta perdido ou confuso ao realizar tarefas em seu website e encontre a informao que precisa. Por isso as tarefas devem conter instrues simples, claras e objetivas sobre seu uso. Por exemplo, um campo de formulrio para inserir a data deve conter uma instruo explcita de como deve ser preenchido (dd/mm/aaaa). E, sempre que necessrio, fornea documentaes de ajuda sobre funcionalidades que podem ser mais complexas, como os formulrios. Recursos de busca eficientes, mapa do site e incluso de links relacionados nas pginas tambm esto entre as vrias formas de ajudar seus usurios a encontrar o que eles procuram.

Fonte: Dicionrio Publicitrio Online (http://d2dbr.free.fr/dicionariopublicitario/f.htm, acesso em 05/07/2006)

14 de 26

Desvendando o Desenvolvimento de Websites - 2006

4) WEB STANDARDS
So recomendaes de desenvolvimento de websites, propostos pela W3C3, que esto se tornando padres. O uso das web standards traz benefcios a desenvolvedores e usurios. Para o desenvolvedor:
Sites bem construdos e estruturados Facilidade de manuteno Reduo de custos Reduo de dificuldades de criao Compatibilidade entre diversas plataformas

Para os usurios:
Sites acessveis para usurios de diferentes browsers ou pessoas com deficincia Fcil navegao e acesso ao contedo Dinamismo nas aplicaes Sites leves

Os padres web tratam de especificaes sobre HTML, XHTML, DOM e CSS.

4.1. Quatro regras bsicas

Marcelo da Silva Macedo, em seu livro Construindo Sites Adotando Padres Web (Editora Cincia Moderna, 2004), cita quatro caractersticas propostas pela W3C para que o seu site esteja estruturado corretamente: O site deve facilitar a navegao atravs do seu contedo, ou seja, que os elementos de sua interface sejam operveis por qualquer pessoa; O contedo e os controles do site devem ser de fcil identificao e autoexplicativos; O contedo do site deve ser perceptvel a qualquer pessoa sejam quais forem as condies de acesso; O site deve utilizar tecnologias que o compatibilizem com os dispositivos de visualizao atuais e futuros e, assim, preservar sua integridade tecnolgica.

4.2. Separando contedo e formatao

Um conceito sobre web standards que facilita o trabalho dos desenvolvedores e designers separar a formatao esttica do contedo do site. Antigamente usava-se muito no HTML tags como <font> e atributos como bgcolor, style, size, width, height. Essa formatao manual dificultava a manuteno de pginas, tanto no aspecto esttico como no desenvolvimento propriamente dito. O crescente uso do CSS vem facilitando esse processo, afinal, podemos ter controle mais preciso sobre a estilizao dos elementos e criar classes com estilos que podem ser usados por vrios elementos. Assim, quando for preciso alterar fonte, posicionamento, cores, bordas, espaamentos, margens ou dimenso dos objetos, apenas um arquivo precisar ser modificado. Uma outra grande vantagem do CSS que podemos definir aos objetos caractersticas para diversos tipos de mdia (tela, impresso, braille, aural, etc.), tornando suas pginas mais acessveis. Portanto, o HTML/XHTML ir cuidar apenas da estrutura de seus documentos e a estilizao definida em uma folha de estilos.
3

W3C: significa World Wide Web Consortium e a organizao oficial para os padres 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)

15 de 26

Desvendando o Desenvolvimento de Websites - 2006

Dica: Saiba mais sobre CSS em http://pt.wikipedia.org/wiki/Cascading_Style_Sheets.

4.3. Ateno com a Semntica

Semntica o estudo dos significados da linguagem, avaliando a relao entre as 4 palavras e os conceitos que elas simbolizam . Na web, significa estruturar corretamente o contedo para que pessoas e mquinas compreendam as informaes. No desenvolvimento de web sites, aplicar a semntica usar tags adequadas para expressar o contedo apresentado. Cada tag tem uma funo especfica 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 prpria utilizao de web standards para construir documentos web, mas uma forte caracterstica dos padres foi o que deu nome a esta tcnica: no utilizar tabelas para estruturar elementos das pginas. Tabelas (tag <table>) tm a funo de apresentar dados tabulados e no de estruturar e posicionar os elementos grficos da interface dos websites. Ao invs de usarmos tabelas, que entre outras desvantagens deixa o cdigo mais pesado, so usadas as tags <div> (diviso) para criar sees, colunas ou posicionar alguns elementos. As divs no possuem valor semntico e no aplicam formatao se no estiverem associadas ao uma id CSS. Ex.:
<div id=menu> - Menu de navegao </div> <div id=conteudo> - Contedo deste bloco </div>

Divs nomeadas com ids corretas ajudam a indicar o contedo que est sendo apresentado naquela seo. Ao invs de ficar criado vrias <table>, <tr> e <td> para definir listas, menus, posicionar elementos grficos ou criar blocos de contedo, veja as dicas abaixo.

4.3.2. Cada tag em seu lugar

Use as tags <h*> (onde * um nmero de 1 a 6) para definir os ttulos e subttulos de seu site. Quanto menor o nmero, maior o nvel do ttulo e, consequentemente, maior ser o tamanho da fonte (ex.: h1 o ttulo de primeiro nvel, etc.); Use a tag <p> para os pargrafos, <span> para aplicar alguma formatao em textos ou palavras dentro de um pargrafo e <br /> para quebrar a linha dentro de um pargrafo; No utilize as tags <b>(negrito) e <i>(itlico). Por questes semnticas e at de acessibilidade, use <strong> para enfatizar em negrito e <em> para enfatizar em itlico. Um browser para deficientes visuais no sabe o que um texto bold, mas sabe o que um texto enfatizado; Utilize listas no-ordenadas (<ul>) para criar listas de itens, como menus de navegao. Listas ordenadas devem ser usadas para itens que devem ser numerados; As <table>, como vimos, devem ser usadas para apresentar informaes em linhas e colunas;

Fonte: Enciclopdia Ilustrada Folha, Folha de S. Paulo, 1995, pg. 874;

16 de 26

Desvendando o Desenvolvimento de Websites - 2006

Dentro da <table>, separe cabealho, corpo e rodap de tabelas como <thead>, <tbody>, <tfooter>, respectivamente; Para clulas de ttulos e cabealhos de linhas e colunas, utilize a tag <th>; Agrupe seus formulrios ou conjuntos de campos de um mesmo formulrio com a tag <fieldset> e para incluir um ttulo para aquele grupo de campos utilize a tag <legend>. Ex.: agrupar Informaes 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 cdigo

Endentar significa recuar tags do seu cdigo que estejam aninhados (inseridos) em outras tags. Essa simples prtica facilita a leitura do cdigo fonte, pois indica uma hierarquia entre os elementos. Ex.:
<html> <head> <title>Minha Pgina</title> </head> <body> <h1>Ttulo</h1> <p>Texto do pargrafo</p> </body> </html>

Podemos ver que o maior elemento desse cdigo a tag <html>, dentro dela est aninhada a tag <head> (que contm a tag <title>) e a tag <body> (que contm as tags <h1> e <p>). Dessa forma simples identificar o incio e o fim dos elementos e quais outros elementos esto contidos nele. Utilize a tecla tab para fazer as endentaes de seu cdigo.

4.5. No esquea o Doctype

A declarao do Doctype (document type declaration - DTD) deve ser a primeira tag de seus documentos HTML/XHTML. Ela indica qual o tipo de marcao que est sendo usada (HTML ou XHTML), a verso e o tipo (Strict, Transitional ou Frameset). Vale lembrar que sem o Doctype seu cdigo no poder ser validado pela W3C como um documento HTML/XHTML vlido. Dica: Saiba mais sobre como declarar corretamente o Doctype em http://www.w3.org/QA/2002/04/valid-dtd-list.html.

4.6. Fornecendo Informaes sobre o seu site

A tag <meta> responsvel por fornecer metainformaes sobre o seu site (informaes sobre as informaes). Voc pode usar vrias tags meta para informar a codificao de seu documento, data de expirao do contedo (instrues que modificam o cabealho HTTP) ou tambm o autor do site, a descrio, palavraschaves, lngua (instrues capturadas pelos mecanismos de busca). Ex.:
<meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <! Tipo de contedo deste documento <meta http-equiv="pragma" content="no-cache" /> <! No armazena a pgina em cach <meta name="author" content="Seu Nome" /> <! Identifica o autor desta pgina

17 de 26

Desvendando o Desenvolvimento de Websites - 2006

4.7. Comentrios
A utilizao de comentrios em cdigos HTML/XHTML auxilia o desenvolvedor a compreender o documento ou apresentar instrues e informaes, caso o seu documento seja compartilhado entre vrios desenvolvedores. Os comentrios no so visveis pelos usurios e no so interpretados pelos browsers. Ex.:
<!-- Incio do Documento --> <html> <head> <title>Minha Pgina</title> </head> <body> <!Contedo Principal: insira aqui o texto principal de apresentao do site --> <div id=conteudo> <h1>Ttulo</h1> <p>Texto do pargrafo</p> </div> </body> </html> <!-- Fim do Documento -->

18 de 26

Desvendando o Desenvolvimento de Websites - 2006

5) USABILIDADE
Usabilidade definida como a facilidade de realizao de tarefas em uma interface, visando analisar e otimizar a facilidade de aprendizado do sistema, a eficincia do uso, a facilidade de memorizao (para que o usurio no precise reaprender a usar a interface), a baixa taxa de erros (evitando transtornos na realizao de tarefas) e satisfao do usurio ao interagir com o sistema.

5.1. Projetando para o usurio

Os conceitos de usabilidade tm como base o desenvolvimento de projetos centrados nas necessidades reais dos usurios. Lembre-se, usabilidade no tem a ver com os gostos dos usurios, mas sim como suas necessidades. Por isso as interfaces devem fazer com que um usurio utilize um website de maneira intuitiva e a usabilidade visa facilitar este processo. Por que fazer sites usveis? Os concorrentes esto a um clique de distncia. (Jakob Nielsen)

5.1.1. O que os usurios esperam dos websites

Textos que podem ser lidos; Contedo e respostas para suas questes; Navegao e busca que os ajudem a encontrar o que procuram; Formulrios pequenos e simples; Nada de bugs, dados corrompidos, links quebrados, contedo desatualizado, erros de grafia. Fonte: Universidade Federal do Rio Grande do Sul (citaes de Jakob Nielsen) http://www.inf.ufrgs.br/~cabral/PalestrasApostilas.html

5.1.2. Os principais erros que dificultam a experincia do usurio

Os erros mais cometidos pelos desenvolvedores, segundo Jakob Nielsen: reas saturadas com objetos rolantes e animados, que sobrecarregam a viso do usurio; Scroll longo; Cores de links no-padro; Longo tempo de download do website; Longos nveis hierrquicos dos diretrios de websites; Pginas rfs, que no esto relacionadas a outras pginas; Tentar controlar a navegao do usurio com frames, links que abrem novas janelas ou movem para outra URL; Quebra de consistncia; Oferecer um link de mailto: ao invs de um links para uma pgina com informaes de contato; Scroll horizontal; Grandes blocos de texto; FAQ (Frequently Answered Questions) com perguntas infrequentes; Pginas linkadas a si prprias; Textos contidos em imagens; Informao excessiva ou desnecessria; Incompatibilidade de browsers.

19 de 26

Desvendando o Desenvolvimento de Websites - 2006

5.1.3. Melhores Prticas e Regras

Mantenha todos os links com um estilo padro. Eles no precisam ser azuis (cor padro do navegador) e sublinhados, como sugere Jakob Nielsen. Eles devem ser diferenciados, possuir cores e estilo que os identifiquem e os torne de fcil visualizao; Os ttulos dos links devem ser auto-explicativos. Coloque os links em palavras significativas, evitando termos genricos como Clique aqui e Mais; Se o link vincular a outro tipo de arquivo que no seja uma outra pgina da web, ele deve indicar o que acontecer. O uso de cones interessante neste caso; Oferea design leve e agradvel, use poucas imagens: as pessoas procuram contedo; O alto contraste entre plano de fundo e textos fundamental; Evite a rolagem horizontal a 800x600; Evite textos longos e redundantes. O contedo deve conter pargrafos curtos e sentenas simplificadas; No oferea muitas reas de navegao, principalmente se os links forem semelhantes; Evite menus suspensos; Nunca inclua em uma pgina um links para ela mesma, principalmente na Home; As opes e informaes mais importantes devem estar acima da primeira rolagem de tela; As caixas de entrada de busca devem possuir uma tamanho adequados para que os usurios possam ver e editar mais facilmente a sua consulta; No surpreenda os usurios: no abra janelas pop-ups automaticamente; no utilize um link para mailto, desesperador quando se clica em um link de Contato e ele abre o programa padro de e-mail; Lembre-se: a navegao dos usurios deve ser tranqila, sem incmodos e surpresas desagradveis; No coloque links para Voltar a Pgina Anterior. No tente reproduzir controles do navegador; Os usurios no devem clicar em mais de trs links para chegar at a informao que desejam; O usurio precisa saber: de onde ele veio, por onde ele andou e por onde ele pode navegar. Tenha uma arquitetura de informao consistente, provenha 5 um mapa do site e, se necessrio, utilize breadcrumb trails .

5.2. Heursticas para avaliar a usabilidade

As avaliaes heursticas geralmente so feitas por avaliadores pertencentes prpria equipe de desenvolvimento, no envolvendo ainda os usurios que utilizaro os sistemas. um processo rpido, fcil e barato. Tm muita eficincia, mas no tanta preciso quanto um teste de usabilidade realizado em laboratrios com usurios e avaliaes realizadas por consultores de usabilidade. A avaliao sempre realizada com a presena de um observador, que ir analisar os elementos de dilogo da interface e comparar com as heursticas de usabilidade. No abordarei muito como fazer a avaliao heurstica, mas importantes que voc conhea as heursticas (princpios):
5 Breadcrumb trail (caminho de migalhas de po): usado em sites com vrios nveis de pginas e sub-pginas ou sees e sub-sees. Ajuda o usurio a se localizar na arquitetura de informao do site. Normalmente possuem links para as pessoas voltarem s sees anteriores. Ex.: Home Produtos Roupas e Acessrios Bolsas

20 de 26

Desvendando o Desenvolvimento de Websites - 2006

1. Visibilidade da situao atual do sistema: o sistema deve oferecer feedback aos usurios para que eles se mantenham informados sobre o status do sistema; 2. Compatibilidade do sistema com o mundo real: o sistema precisa utilizar dilogos e simples e linguagem que sejam familiares aos usurios, evitando os termos tcnicos e a informao deve aparecer na ordem natural e lgica de realizao de tarefas segundo o modelo mental do usurio; 3. Controle e liberdade do usurio: O sistema deve ter funes que faa com que o usurio possa sair de uma parte do sistema rapidamente e sem danificar a aplicao; 4. Consistncia e Padres: As aes e situaes devem ser aplicveis e obter resultados similares em diferentes partes do sistema. Os usurios devem saber o que vai acontecer; 5. Preveno de Erros: Os erros devem ser analisados e evitados; 6. Ajuda no reconhecimento de erros: Caso ocorram erros no sistema, as mensagem devem ser amigveis, informando sobre o erro e ajudando o usurio a solucion-lo; 7. Reconhecer ao invs de relembrar: O usurio no deve se lembrar das coisas de uma ao para outra. Os elementos devem estar visveis e facilmente recuperveis quando necesrio; 8. Flexibilidade e eficincia de uso: O sistema deve ajudar o usurio em suas aes mais freqentes, acelerando a interao. Prover atalhos uma boa escolha; 9. Design minimalista e esttico: Evitar dilogos com informaes irrelevantes e desnecessrias. Informaes desnecessrias reduzem a visibilidade relativa da informao relevante. No design esttico deve prevalecer a satisfao, o design visual e a legibilidade; 10. Oferecer documentao e informaes de ajuda: o sistema deve possuir documentos de fcil acesso que expliquem claramente as diretrizes de utilizao do sistema e informaes sobre os processos, focando nas tarefas do usurio.

Como vimos, a maioria das recomendaes sobre usabilidade foram abordados em todos os captulos, planejamento, design, webstandards, interao com o usurio, o que nos mostra que a usabilidade essencial e est em todas as etapas de desenvolvimento.

21 de 26

Desvendando o Desenvolvimento de Websites - 2006

6) ACESSIBILIDADE
Fazer um site acessvel fazer com que qualquer pessoa tenha acesso facilmente ao contedo do website e no tenha uma navegao restrita independente de:
Limitaes ou deficincias fsicas; Dificuldade de compreenso de textos; Falta de dispositivos como teclado e mouse ou dificuldade de utiliz-los; O usurio estar com olhos, ouvidos ou mos ocupados; Falta de compreenso do idioma em que o documento foi escrito;

As diretivas de acessibilidade possibilitam que os sites se mantenham acessveis apesar de limitaes do usurio, sejam fsicas, sensoriais, cognitivas ou tecnolgicas, aumentando a vida til dos websites e sendo capaz de beneficiar um nmero muito maior de pessoas. Como no captulo sobre usabilidade, alguns conceitos de acessibilidade j foram abordados nos demais captulos. Mas no custar reforar um pouco mais.

6.1. As Principais Diretivas

A seguir so apresentadas as principais diretivas de acessibilidade, classificadas por assunto. As diretivas variam de prioridade: diretivas de prioridade 1 so as que devem ser satisfeitas; as diretivas de prioridade 2 so as que deveriam ser satisfeitas; e as de prioridade 3 so as que poderiam ser satisfeitas. As diretivas apresentadas neste captulo se referem apenas aos casos gerais. Mas ao final do captulo voc pode conferir todas as diretivas para frames, tabelas, multimdia, etc.

6.1.1. Texto e Contedo

Procure utilizar sempre uma linguagem clara e simples em seus documentos de modo adequado ao contedo do site (Prioridade 1) e crie documentos que sejam passveis de validao por gramticas formais (Prioridade 2). A lngua principal utilizada nos documentos deve ser especificada (Prioridade 3) bem como quaisquer mudanas na lngua dos textos de um documento (Prioridade 1).

Garanta que o equivalente ao contedo dinmico seja atualizado sempre que este seja mudado. (Prioridade 1) Sempre que existir tags adequadas para apresentar determinado tipo de contedo, utilize as tags ao invs de imagens para transmitir informaes. (Prioridade 2) Quando houver acrnimos ou abreviaturas em um documento, eles devem ser especificados por extenso. (Prioridade 3) 6.1.2. Cores
A identificao de informaes em cores deve tambm estar disponvel sem cor. (Prioridade 1) A combinao entre cores de texto e plano de fundo deve oferecer contraste suficiente para que usurios com cromodeficincia ou que utilizem monitores monocromticos possam ver as informaes. (Prioridade: 2 para imagens; 3 para textos)

22 de 26

Desvendando o Desenvolvimento de Websites - 2006 6.1.3. Imagens

Toda imagem (bem como regies de mapas de imagens, animaes, applets, imagens utilizadas em listas, frames e arquivos de udio e vdeo) deve possuir um equivalente textual, atravs dos atributos alt ou longdesc. (Prioridade 1) Utilize imagens e grficos quando elas facilitarem a compreenso do contedo. (Prioridade 3)

6.1.4. Estrutura e Formatao

Procure utilizar as folhas de estilo (CSS) para controlar a apresentao e formatao. (Prioridade 2) A organizao do documento deve possibilitar sua visualizao 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 no absolutos, possibilitando ao usurio, por exemplo, alterar o tamanho da fonte de acordo com a sua necessidade. (Prioridade 2) As tags de cabealho (h1..h6) devem ser usadas de modo adequado para indicar sees e sub-sees de um documento. (Prioridade 2) Os estilos de formatao e apresentao 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 formulrios), atravs do atributo acesskey. (Prioridade 2)

6.1.6. Controles de Navegao

Evite criaes que provoquem intermitncia de vdeo (Prioridade 1) ou intermitncia de contedo, como alterar em intervalos regulares. (Prioridade 2) Os documentos no devem recarregar automaticamente ou periodicamente, at que os usurios o faam. (Prioridade 2) Os redirecionamentos tambm no devem ocorrer automaticamente, at que os usurios o faam. (Prioridade 2) No provoque a abertura de janelas que se sobreponham s outras e tambm no faa com que a janela atual seja modificada sem que o usurio seja informado. (Prioridade 2) Procurar criar uma tabulao lgica em seqncia para percorrer links, controles de formulrios e objetos. (Prioridade 3)

6.1.7. Sobre o Site

Fornea metadados sobre as informaes de seu site. (Prioridade 2) Procure prover informaes sobre a organizao geral do site, atravs de ndices ou mapa do site. (Prioridade 2) As tecnologias W3C devem ser utilizadas em suas verses mais recentes sempre que estiverem disponveis e sejam adequadas a um determinado caso. No utilize caractersticas desatualizadas ou no recomendadas pela W3C. (Prioridade 2)

6.1.8. Formulrios
Garante que todos os controles de formulrios que contenham rtulos associados estejam corretamente posicionados e associar explicitamente os rtulos aos respectivos controles de formulrios. (Prioridade 2)

23 de 26

Desvendando o Desenvolvimento de Websites - 2006

6.2. Quando no for possvel criar um documento totalmente acessvel

Se mesmo com todos os esforos voc no conseguiu criar um documento totalmente acessvel a qualquer tipo de usurios, provenha um link para um documento alternativo, que seja acessvel, use as tecnologias W3C, contenha as informaes e funcionalidades equivalentes e seja atualizado com a mesma freqncia que o documento inacessvel.

6.3. Para saber mais

Acessibilidade UNIVERSIDADE FEDERAL DO RIO GRANDE DO SUL [disponvel em http://www.inf.ufrgs.br/~cabral/Acessibilidade.ppt ]

24 de 26

Desvendando o Desenvolvimento de Websites - 2006

REFERNCIAS BIBLIOGRFICAS
HOLZSCHLAG, M. E. 250 HTML and Web Design Secrets. Indianpolis, IN, EUA: Wiley Publishing, Inc., 2004. 412 p. MACEDO, M. S. Construindo sites adotando padres Web. Rio de Janeiro: Editora Cincia Moderna Ltda., 2004. 249 p. MEMRIA, F. Design para a Internet: projetando a experincia perfeita. Elsevier, 2005. 171 p. Rio de Janeiro:

NIELSEN, J.; TAHIR, M. Homepage Usabilidade: 50 websites desconstrudos. 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/rosangwoses.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. Equvocos 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 no 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/

25 de 26

Desvendando o Desenvolvimento de Websites - 2006

APNDICE A: OUTROS LIVROS INDICADOS

Dont Make Me Think (No me faa 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 Galxia Internet: Reflexes sobre internet, negcios e sociedade Manuel Castells Design/Web/Design:2 Luli Radfaher Projetando Websites Jakob Niesen Webwriting Redao Bruno Rodrigues Usabilidade na Web: Criando Portais Mais Acessveis Cludia Dias

26 de 26