Boas práticas no desenvolvimento de websites

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on pocket

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]

Marcelo Mattei (marcelo@lund.com.br) é especialista em gerenciamento de produtos eletrônicos, com foco no desenvolvimento de estratégias de marketing para internet (web marketing). É autor do Marketing para Internet.

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on pocket

Mais lidas

18 respostas

  1. Excelente artigo Marcelo!

    Muito importante também é contar com uma excelente equipe. A WEBBRA desenvolveu um novo modelo de negócios para você ter o seu site de uma forma única. É possível adquirir créditos de tecnologia ou fazer parte de um plano mensal. Confira mais em http://www.webbra.com.br!

  2. Muito bem explicado Marcelo. Inclusive, a análise de público B2B e B2C é fundamental, pois influencia diretamento no comportamento de cada usuário. E muito deve ser levado em conta na formatação e disposição de elementos de apoio a navegação.

    Existem prática mínimas que devem ser consideradas como:

    Que site é esse;
    O que posso fazer;
    Onde estou;
    Pra onde posso ir;
    Como posso voltar;
    Como saio daqui.

    Ambiente que nos deixem satisfeitos e a vontade terão cada vez mais espaço online daqueles em que nos deixam perdidos “como cego em tiroteio”.

    Parabéns!

  3. Um dos itens que me chamam muito a atenção são os links protegidos.quando o usuário faz uma na página principal ou utilizando um buscador e encontra parte do conteúdo que satisfaz sua a pesquisa, ao clicar no link o usuário recebe a mensagem de que deve efetuar o login ou cadastro para ter acesso a ao conteúdo, isto é constrangedor e muito provavelmente o usuário não fará o cadastro a menos que o conteúdo seja exatamente o que ele estava buscando.

    O que poucos sites faze é exibir uma mensagem antes que o usuário efetue o clique.

    Ao contrário do que muitos pensam este clique perdido podem ser muitos clique perdidos e usuário que não retornarão ao site.

  4. Prezados Senhores(as).

    Somos uma entidade filantrópica, sem fins lucrativos, e necessitamos de um site, para divulgar nossos trabalhos, a titulo de doação.
    Cuidamos de mais de 1.200 clrianças de 07 à 17 anos ( Projeto Circo Escola )
    Cuidados de 04 Creches.
    Cuidamos de 02 Abrigo para Crianças e Adolescentes.

    Atenciosamente.

    UMCSS-União dos Moradores da Comunidade Sete de Setembro
    Jorge Ivan Xavier Barbalho
    Email: jorgebalho@ig.com.br
    011-5925-4748
    011-8191-8996

  5. Caro Rafael,

    Antes de mais nada gostaria de agradecer seu elogios e suas opiniões.

    Qualquer radicalismo não deve ser levado em conta, nem quando o assunto é website.

    Claro que deve existir um bom senso e um bom gosto na hora de seguir regras de usabilidade, acessibilidade, etc. Além disso, também é preciso levar em conta o objetivo do website que está sendo desenvolvido e principalmente o objetivo do usuário que vai acessar o website. Vou citar um exemplo:

    Websites desenvolvidos para lançamentos de imóveis, por exemplo, devem ser muito mais direcionados para o layout do que para a usabilidade. Isso se deve ao fato de que esses websites devem apresentar elementos gráficos que atendam a necessidade do usuário que está acessando, ou seja,mostrem claramente ao usuário o produto imóvel que está sendo oferecido.
    Quem entra em um website de lançamento de imóveis, quer ver foto, animação, flash, quer ver o imóvel tomar forma na tela do computador. Usabilidade nesse caso está em segundo plano.

    Também ficam em segundo plano, nesse exemplo, os sites de busca. Pouco importa se esse tipo de website é amigável aos sites de busca. Toda a sua divulgação é baseada nos websites de construtoras, incorporadoras e imobiliárias, além da entrega de panfletos, anúncios impressos, etc. Portanto, não é essencial a otimização nesse caso. É bem-vinda, mas não essencial.

    Concluindo, o fator que dita todas as regras sobre o desenvolvimento de um website é o USUÁRIO. Ele é o alvo e deve ser perseguido, quer seja dando ênfase ao layout, a usabilidade, ou a ambos.

    Se você observar, no meu artigo, uma das regras fala sobre Compatiblidade entre o website e o contexto de aplicação, que é justamente esse equilíbrio que devemos buscamos.

    Um abraço,

    Marcelo Mattei

  6. Primeiramente queria colocar que gostei muito do artigo, embora haja coisas das quais eu descordo.

    Acredito em semântica, usabilidade, inter atividade usuário-computador, porém em alguns casos algumas pessoas levam para o lado do radicalismo, onde todos os sites deveriam ser iguais, perder sua identidade visual e se diferenciar apenas pelo conteúdo, atitudes como deixar links com as cores padrões do navegador, ou usar sempre um fundo claro com letras escuras é de certa forma querer acabar com o design, se por exemplo o meu site tem uma cor de fundo que disputa a atenção com o link em cor padrão do navegador, é meu dever solucionar esse erro, não necessariamente mudando o fundo, mas talvez mudando a cor do link.

  7. Felipes e Roque,

    O que as empresas precisam entender é que hoje um bom website é fundamental para gerar negócios. Pode ser a porta de entrada ou a porta de saída para um grande negócio.

    Uma pesquisa americana para o mercado B2B diz que 90% dos compradores que não sabem de quem comprar um determinado produto, começam a pesquisa de fornecedores pela Internet. Eles selecionam os possíveis fornecedores acessando os websites dos mesmos.
    Só depois dessa seleção inicial pela Internet é que os compradores entram em contato com as empresas.

    Ou seja, empresas que não possuem websites relevantes aos compradores, com informações claras e precisas, deixam de participar de concorrências e, pior que isso, essas empresas nem sabem que deixaram de participar da concorrência por causa de websites ruins e portanto, dizem que investimentos em websites não geram resultados pois ninguém entra em contato com a empresa via website.

    Obrigado,

    Marcelo Mattei

  8. Concordo com o comentário do Roque, especialmente no que diz respeito à usabilidade. Muitas empresas contestam a necessidade de incluir a prática no orçamento. Usabilidade pra quê?, costumam dizer. Falta perceberem que é justamente nesta etapa que se justifica a relevância e o desempenho das seguintes.

    Belo texto! Abs!

    Felipe

  9. Sao coisas obvias que infelizmente a grande maioria se esquece de implementar. O quesito usabilidade e muito importante quando se trata de produtos de tecnologia. As dicas sao otimas.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *