Outpus • Soloaga Designs » Personalize as páginas de erro do seu site

Personalize as páginas de erro do seu site

Publicado por renansoloaga em Destaque, Experiência do usuário - 24 de julho de 2009 | 2 respostas
 Personalize as páginas de erro do seu site

O seu website é onipresente dentro do seu domínio[?] ? Você pode ter o site mais legal da web, mas se você não existir em todo e qualquer URL[?] dentro da sua hospedagem pode deve estar perdendo visitas. Como manter seu conteúdo onipresente ? Apesar da metáfora nos levar a uma idéia mais “mística” da palavra, a onipresência do seu site em seu domínio pode ser alcançada de forma relativamente simples: personalizando suas páginas de erro. Simples não é ?

Nem tanto, confessa. Mas pode ficar tranquilo pois com o roteiro que seguiremos, você customizará suas páginas de erro ao mesmo tempo em que entende mais sobre este recurso.

O que são as páginas de erro?

As páginas de erro são interfaces para informar ao usuário que ocorreu um erro em sua requisição, ou seja, para informar ao usuário por que ele não está tendo acesso ao conteúdo que está procurando. Como estes erros variam e dependendo desta variação você pode optar por uma ação diferente, é interessante conhecermos as variações mais ultilizadas e trabalharmos encima delas.

Tipos de erro mais comum

Erro 400 – O servidor Web considera que o fluxo de dados enviados pelo usuário foi “mal formatado”, ou seja, não respeitar o protocolo HTTP completamente. Ex.: URL[?] com caracteres faltantes, em excesso ou não permitidos.

Erro 401 – O servidor Web considera que o fluxo de dados enviado pelo usuário foi correta, mas o acesso à URL recurso requer a autenticação do usuário:  (1) – Que ainda não tenha se identificado ou, (2) – Que tenha se identificado porém não foi autorizado. Em síntese: permissão negada.

Erro 403 – O servidor Web considera que o fluxo de dados enviado pelo usuário foi correta, mas o acesso ao recurso identificado pela URL é negado em qualquer circunstância. Conteúdo protegido.

Erro 404 - O servidor Web não pode proporcionar o acesso ao recurso especificado pelo URL. O conteúdo requisitado não existe mais ou nunca existiu. Isto é o equivalente ao “retorno ao remetente/endereço desconhecido”  resposta convencional para serviços de correio postal.

Erro 500 – O servidor Web encontrou uma condição inesperada que o impediu-a de responder ao pedido do usuário. É um erro pega-tudo que engloba outros erros. Basicamente algo que correu mal, mas o servidor não pode ser mais específico sobre a condição de erro na sua resposta ao cliente.

Porque personalizar?

Tendo como base os tipos de erro listados acima podemos perceber que os erros interferem diretamente na navegação e resultado de seu website.  Como por exemplo, se um usuário hipotético digita incorretamente um endereço(url) que considera estar correto e não encontra nada,  tenho em mente três possíveis cenários (caso você tenha outras perspectivas, divida conosco):

  1. Usuário casual encontrando a página de erro padrão dos navegadores ou da sua hospedagem
    É bem provável que neste cenário o usuário não entenda o que está acontecendo, ache que o seu site está mal organizado e vá embora. Dificilmente ele vai tentar entender o erro em outros sites técnicos.
    Resultado: Usuário/cliente/conversão[?] perdidos.
  2. Usuário avançado(com maior conhecimentos de internet) encontrando a página de erro padrão dos navegadores ou da sua hospedagem
    Este cenário é o menos preocupante pois o usuário já experimentou estes erros em outros websites, provavelmente ele procure a raiz do endereço url e tente encontrar o conteúdo através de outros métodos como busca ou navegação por menus. Porém é preciso levar em conta que a grande maioria dos usuários são casuais, não possuem este tipo de expertise.
    Resultado: Usuário/cliente/conversão garantidos devido a um fator externo, que você não controla.
  3. Qualquer usuário(em qualquer nível) encontrando a sua página de erro personalizada
    Este cenário é o que mais garante uma navegação funcional e agradável. O usuário não encontrará dificuldades, mas sim uma solução que o ajude a navegar pelo site no qual está buscando a informação, produto ou serviço desejado.  Nesta proposta o usuário deve se deparar com uma identificação do site em que está, ou seja, um logo, uma tipografia ou qualquer outro agente identificador e principalmente, opções que o proporcionem a busca ou a navegação contínua dentro do seu website. Estas opções ou caminhos oferecidos ao usuário podem ser um formulário de busca por palavra chave/canal/segmento, ou simplesmente um menu de navegação que o leve aos principais canais dentro do seu domínio.
    Resultado: Usuário/cliente/conversão garantidos independente de fatores externos.

Como personalizo minhas páginas de erro?

Atualmente alguns serviços de hospedagem oferecem esta solução praticamente pronta, ou seja, oferecem uma pasta chamada “erros” ou algo parecido, onde existem páginas nomeadas com seus respectivos erros (ex.: 404.html). Se a sua hospedagem oferece esta solução, você só precisa fazer o seguinte: definir um layout que contenha uma identificação visual com o  seu site, um menu ou formulário de busca linkando para o conteúdo e convertê-lo em páginas html. Após criar estas páginas, faça o upload[?] para a pasta “erros” do seu servidor FTP[?].

Caso o seu servidor não ofereça esta solução simplificada será necessário um pouco mais de trabalho e conhecimento técnico. Porém não é nenhum bicho-de-sete-cabeças. O trabalho principal é inserir algumas linhas de código no arquivo chamado .htacess [?]. Caso você não conheça nada sobre este arquivo que pode ajudar muito o resultado do seu site, recomendo que leia este tutorial disponível no Devin.

O código que define o redirecionamento específico é este:

#Páginas de erro personalizadas
ErrorDocument 400 /erros/400.html
ErrorDocument 401 /erros/401.html
ErrorDocument 403 /erros/403.html
ErrorDocument 404 /erros/404.html
ErrorDocument 500 /erros/500.html
#Fim das Páginas de erro personalizadas

Para adicionar este código acima ao conteúdo do seu arquivo e testá-lo é necessário fazer o seguinte:

  • Abra o arquivo .htaccess que provavelmente já existe na raiz de seu website ou crie um.
    É possível visualizá-lo através de seu programa de acesso FTP. Faça o download deste arquivo e o abra com algum programa editor de texto (Ex.:Notepad).  Salve-o exatamento como .htaceess sem definir o tipo do arquivo ou qualquer extensão. (Ou faça o download de um modelo aqui)
  • Adicione o código acima ao documento
    Obs.: As linhas iniciadas com # são comentários
  • Salve seu documento e faça o upload para o servidor
    O documento .htacess deve estar na raiz principal do seu site
  • Crie suas páginas de erro personalizadas e faça o upload para o servidor
    As páginas devem ser salvas na pasta “erros” que precisa estar na raiz do servidor, no mesmo nível do arquivo .htacess.
  • Faça o teste
    Tente acessar uma página que não existe em seu domínio e se tudo estiver configurado certo você será redirecionado para a página 404.html que criou.

Porque pode dar errado?

Se você não estiver conseguindo resultado com este trabalho, confira as possibilidades de erro e o que podemos fazer:

  • Não consigo ver as páginas de erro.
    Provável causa: As páginas podem estar num endereço diferente.
    Possível solução: Tente acessar a página diretamente (ex.: http://www.seudominio.com/erros/404.html), caso esteja acessando, não é este o seu problema.
  • Não acho ou não faz diferença qualquer alteração que eu faça no arquivo .htaccess.
    Provável causa:  Seu servidor não disponibiliza acesso ao seu .htaccess.
    Possível solução: Entre em contato com o suporte técnico e se eles não solucionarem seu problema, troque de hospedagem, sinceramente.
  • Dependendo da pasta que tento acessar não vejo as imagens ou vejo o texto sem formatação
    Provável causa: Seu css está linkado incorretamente.
    Possível solução: Defina o css do seu documento com um endereço absoluto. (ex.: <link href=”http://www.seudominio.com/css/estilo_erros.css” rel=”stylesheet” type=”text/css”> ).

Como deve ser o layout de uma página de erros?

O layout da sua página de erro pode ajudar a manter o usuário em seu site. Esta solução antiga é uma tendência tão forte na internet hoje que existem artigos e sites voltados para o assunto, confira alguns (em inglês):

Smashing Magazine

Mephobox – 404 erros

Exemplos

Você pode encontrar exemplos aqui mesmo. Confira: 400, 401, 403, 404, 500.

Conclusão

Nunca é demais quando se trata de melhorar a experiência do usuário. Espero que este post tenha sido útil. Fique à vontade para corrigir ou implementar o seu conteúdo.

Posts relacionados:

Compartilhe este post:

Digg this ! So delicious Stumble it! Lendo post Personalize as páginas de erro do seu site




2 Respostas para “Personalize as páginas de erro do seu site”

  1. renansoloaga disse:
    29 de julho de 2009 às 15:36

    realmente ficaram faltando muitos erros nest post, mas o intuito era explicar como podemos fazer o direcionamento, você pode encontrar uma lista completa com os erros em: http://en.wikipedia.org/wiki/List_of_HTTP_status_codes

  2. tevez.brasileiro disse:
    28 de julho de 2009 às 14:39

    ficou faltando alguns erros nesta explicação!

Deixe um comentário