Boas práticas no desenvolvimento de websites

Escrito porJackson F. de A. Mafra

maio 8, 2008

Existe mais ou menos um consenso entre os profissionais sobre o que
observar ao desenvolver um bom website. Este artigo procura reunir
estes pontos, com base em uma livre interpretaçăo de alguns protocolos
e padrőes da W3C.

Nosso foco está nos sites de objetivos comerciais, cada vez mais o
destino de compradores e especificadores nas compras de produtos entre
empresas.

Sabemos que o processo de compra pode começar de diversas formas
(através de revistas técnicas, sites de buscas, portais verticais ou
indicaçăo de colegas), mas sempre o comprador acessa o website do
fornecedor antes de decidir a compra. É nesta hora que a qualidade do
website e das informaçőes que oferece se tornam um fator primordial em
apoio ŕ decisăo de compra.

Um bom website deve oferecer uma navegaçăo fácil, intuitiva e rápida em funçăo da informaçăo que o comprador procura.

Definir objetivos claros

Antes de qualquer açăo, é preciso saber o que se espera do site que
será desenvolvido. Sites sem objetivos claros săo confusos, dispersos e
dificultam o usuário a atingir suas necessidades. Para desenvolver um
novo website ou reformular um já existente é necessário responder as
seguintes perguntas:

qual a finalidade do website?;
qual o público-alvo?;
para quę o público-alvo vai utilizar o website?;
quais os principais concorrentes da empresa?;
quais as palavras-chaves que săo ou devem ser utilizadas para que compradores encontrem o website em mecanismos de buscas?

Com base nas respostas a essas perguntas é possível criar um roteiro
para servir de guia durante a fase de desenvolvimento, assegurando que
o mercado comprador seja atendido.

Orientar e conduzir o usuário

Durante a navegaçăo o usuário pode se perder nas páginas. Para
minimizar essa dispersăo, o website deve sempre informar o usuário em
que página ele se encontra, como chegou até ali e quais săo suas opçőes
de saída.

Isso pode ser feito através de algumas recomendaçőes:

a página principal deve informar ao usuário onde ele está e o que o website oferece;
em todas as páginas oferecer um link de retorno para a página principal;
durante a navegaçăo, as páginas devem informar ao usuário onde ele está, de que página veio e para aonde ele pode seguir;
é imprescindível existir um mapa do site para que o usuário possa se localizar em qualquer momento da navegaçăo;

Com relaçăo aos links:

devem ser auto-explicativos;
evitar o uso de expressőes como clique aqui;
marcar como link o texto (nome da empresa, título da página, assunto etc.) e năo o endereço URL;
apontar exatamente para o conteúdo descrito no link;
em caso de conteúdo fechado, para usuários registrados, indicar graficamente ao lado do link (ex.: ícone de cadeado ou chave);
se possuir lista de links úteis, inserir comentários sobre cada link disponível;

Usar o atributo ALT da HTML (HyperText Markup Language), com o
significado das imagens para que o texto apareça enquanto estiver sendo
feito o download da figura ou quando o usuário optar por suprimir
figuras na configuraçăo do seu navegador web.

Em mapas de imagem, colocar ALT em todas as posiçőes clicáveis.

Legibilidade, estética e quantidade de informaçăo

Quanto menos o usuário for distraído por informaçăo desnecessária, maior a probabilidade de encontrar o que realmente procura.

ocupar de 50 a 80% da página com conteúdo (preferencialmente, 80%);
ocupar no máximo 20% da página com informaçőes sobre a navegaçăo;
evitar frames;
năo usar propaganda. Se for necessário, exibir a propaganda no
espaço anteriormente destinado ŕ navegaçăo, e năo do espaço destinado
ao conteúdo;
evitar menus pull-down (aqueles que abrem as opçőes quando o mouse é passado sobre o item);
evitar imagens ou textos animados;
năo usar desenhos ou texturas no fundo de página. Quanto mais limpa e clara melhor;
utilizar um conjunto limitado de cores;
para realçar textos, usar cores ao invés de sublinhado ou elementos piscando;
contrastar letras com o fundo (melhor utilizar fundo claro, com texto escuro);
usar no máximo dois tipos de fontes e com tamanhos legíveis, mas năo exagerados;
eliminar qualquer elemento que năo seja relevante ao usuário e que possa causar confusăo;
é recomendável evitar conteúdos protegidos por senhas;

O usuário deve sempre controlar suas açőes

As açőes no website site devem ser reversíveis; o usuário deve ser
capaz de desfazer pelo menos a última açăo realizada. Essa capacidade o
encoraja a explorar o website, ao saber de antemăo que erros cometidos
podem ser corrigidos.

sempre possibilitar o retorno ŕ página anterior;
permitir que processos ou transaçőes sejam canceladas mesmo antes de terminadas;
só desviar para outra página quando o usuário tomar alguma açăo como, por exemplo, digitar Enter;
evitar janelas adicionais;
utilizar estrutura que indique a navegaçăo que foi feita pelo
usuário até a página em que se encontra, em formas de links. Essa
estrutura é conhecida como breadcrumbs ou migalhas de păo e pode ser
utilizada para navegaçăo pelo website. Exemplo: Home -> Página de
Produto -> Produto 1 -> Dados do Produto;
oferecer serviço de busca em todas as páginas do website, com pesquisa restrita apenas ao conteúdo do website;
năo utilizar plug-ins auto-instaláveis;
em formulários de entradas de dados, posicionar o cursor sempre no próximo campo a ser preenchido;
possibilitar entrada de dados por mouse ou teclado e saída de dados em impressora selecionada pelo usuário.

Capacidade do website em se adaptar ao contexto e necessidades do usuário

Em funçăo da enorme diferença entre usuários e suas formas de
interaçăo com o website, é necessário que a interface seja flexível o
bastante para realizar a mesma tarefa de diversas maneiras.

minimizar a quantidade de cliques para chegar ŕ informaçăo desejada. O recomendável săo quatro cliques no máximo;
năo utilizar páginas sem conteúdo útil (como, por exemplo, páginas apenas com mensagens de boas vindas;
desenvolver páginas que se adaptem ŕ resoluçăo do monitor do usuário;
para açőes de download, se forem demorar mais do que 10 segundos, informar o tamanho do arquivo;
evitar a utilizaçăo de elementos gráficos nos arquivos de download;
em páginas com textos explicativos, sempre começar pelo mais
importante, garantindo que as informaçőes e elementos relevantes
estejam disponíveis sem a necessidade de rolar a tela;
se o texto a ser apresentado for muito extenso, oferecer a possibilidade de download;
oferecer serviço de pesquisa no website com verificaçăo ortográfica ou resultado fonético;
no resultado das buscas, sempre apresentar os resultados mais
relevantes em primeiro lugar, sem necessidade de apresentar telas
intermediárias com indicaçăo de porcentagens de relevância;
ainda no resultado da busca, destacar as palavras encontradas iguais a palavra digitada para pesquisa;
se năo forem encontrados resultados para a busca pesquisada, oferecer lista com sugestőes de termos mais próximos;
a caixa de busca deve aceitar pelo menos 3 palavras digitadas.

Evitar ao máximo a ocorręncia de erros

Quanto menor a probabilidade de erros, menos interrupçőes ocorrem e melhor é o desempenho do usuário.

năo usar páginas com expressăo em construçăo. O website deve apresentar apenas o que já está finalizado e pronto para acesso;
năo liberar website parcialmente pronto;
remover dados/páginas desatualizados (como por exemplo, páginas
convidando os usuários para participarem de eventos que já ocorreram);
oferecer páginas de ajuda;
năo usar URLs muito extensas ou sem significado;
evitar hífens ou outros caracteres especiais no endereço das páginas, bem como O e 0?;
escolher bem os títulos das páginas, com duas a seis palavras, de forma que caracterizem bem seu conteúdo;
năo repetir o mesmo título em duas páginas diferentes;
fornecer mensagens de erro com sugestőes ou instruçőes simples para a correçăo do erro;
năo utilizar image maps que exijam muita precisăo ao clicar;
evitar páginas órfăs, sem qualquer indicaçăo de opçőes de navegaçăo.

Padrăo e usabilidade na escolha da interface (layout)

Um bom website deve ser facilmente reconhecido, identificado e utilizado pelos usuários.

usar sempre a mesma localizaçăo de elementos comuns em todas as páginas;
títulos ou cabeçalhos das páginas devem corresponder exatamente aos termos utilizados nos links que apontam para essas páginas;
usar um estilo padrăo para layout, cores, fontes, etc.;
năo sair do padrăo web de cores para links, ou seja, azul para link năo clicado e púrpura para link já clicado;
destacar palavras importantes, com o cuidado de năo sublinhar em
azul palavras que năo sejam links. Năo se deve sublinhar nada que năo
possa ser clicado.

Compatibilidade entre o website e o contexto de aplicaçăo

O web site deve falar a língua do usuário, através de conceitos
familiares. Năo de seve utilizar termos técnicos relacionados ŕ
tecnologia web.

a estrutura do web site deve estar de acordo com o contexto das tarefas realizadas pelos usuários;
verificar erros de grafia, tomando como base o glossário de termos técnicos de uso corrente na instituiçăo;
o enfoque do website corporativo deve ser o conteúdo e năo a propaganda;
năo usar elementos metafóricos a menos que sejam de uso corrente para o segmento ao qual o website se destina;
dar preferęncia aos termos padronizados e conhecidos pelos usuários;
usar formato de data e unidades de medida de acordo com o padrăo utilizado na instituiçăo.

Conclusăo

Cada website possui características próprias e as particularidades
devem ser respeitadas. Nem todos esses passos citados acima podem ser
aplicados, mas ao aplicar a grande maioria deles podemos gerar padrőes
de construçăo e desenvolvimento que văo garantir boa aceitaçăo e
utilizaçăo.

Năo podemos esquecer nunca que todo e qualquer website tem como
principal objetivo atender os usuários. Sem usuários, o site fica sem
funçăo e sem razăo de existir.

Esse objetivo fica ainda mais relevante quando pensamos em websites
B2B, voltados para a geraçăo de negócios, oportunidades e e vendas
entre empresas. Quando um website business-to-business năo atende ao
usuário, ele simplesmente é deixado de lado e năo mais acessado.

Por isso o objetivo destas dicas é ajudar no desenvolvimento de
sites que realmente atendam seus objetivos, ou seja, sejam capazes de
gerar negócios.

WebDesign