Boas práticas no desenvolvimento de websites

Por Marcelo Mattei

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. [Webinsider]

.