Reformulações de sites: dicas e exemplos (SEO)

As reformulações de sites – seja para seu próprio site ou para clientes – parecem projetos empolgantes e interessantes. É um desafio criar um novo design e ao mesmo tempo manter a marca e o conteúdo existentes do site. E para a maioria dos web designers, esses tipos de desafios são motivadores.

No entanto, as reformulações de sites são difíceis de planejar e executar. Existem várias restrições envolvidas no redesenho de um site que normalmente não existiriam se você começasse com uma tela em branco. Eu diria até que um redesenho costuma ser mais difícil do que começar do zero por causa desses limites.

Iremos nos aprofundar no assunto de reformulação de sites revisando e discutindo os esforços de reformulação de sites como Yellow Pages, Mozilla e Blinksale.

Por que redesenhar um site?

É importante notar que o Design, numa das suas formas mais fundamentais, é o ato de resolver um problema. Seja para resolver problemas de durabilidade e intensidade do sinal e ao mesmo tempo manter a beleza de um telefone celular (como acontece com o Pulseira de aço inoxidável do iPhone 4) ou criar um design de navegação sólido que melhore a localização do conteúdo do site, o ato de projetar deve ser proposital. Quando a motivação para redesenhar um site existente é motivada meramente pela estética, acredito que o incentivo da iniciativa de redesenho é insuficiente.

Há muitos custos envolvidos na reformulação de um site, tanto para seus usuários quanto para seu proprietário. Por exemplo, a criação de um novo esquema de navegação no site ou a reconfiguração do layout da página web exige que os usuários existentes se acostumem com o novo design web. Requer muito tempo, planejamento e tomada de decisões para garantir que o conteúdo atual se integre bem ao novo design.

Também pode ser necessário atualizar o conteúdo existente para se adequar ao novo design. O resultado do projeto de redesenho deverá justificar estes custos. Aqui estão alguns motivos pelos quais você gostaria de redesenhar um site:

• O site não é amigável
• O redesenho pode aumentar os lucros do site
• Quando informações objetivas, como aquelas coletadas pela análise de dados, indicam claramente que algo está errado com o projeto
• O redesenho pode melhorar a velocidade e o desempenho do site
• O site é construído usando práticas de web design desatualizadas que sobrecarregam a experiência do usuário (layouts baseados em tabelas, fundos GIF animados, interações obsoletas que podem ser melhoradas usando técnicas Ajax)
• Faltam recursos que, quando adotados, possam melhorar profundamente a experiência do usuário
• Possui falhas de arquitetura de informação (má localização, navegação, categorização, etc.)
• Não se ajusta à marca existente da empresa

Redesenho de componentes

O site precisa de uma revisão completa do projeto ou os problemas existentes podem ser resolvidos através do redesenho ou realinhamento de determinados componentes? Com a oportunidade de iterarmos de forma rápida e contínua em um local de produção, um redesenho parcial pode ser suficiente. Por exemplo, quando um formulário de checkout de um site de comércio eletrônico torna a experiência do usuário complicada, podemos usar nossos recursos com mais eficiência, concentrando-nos nesse componente problemático, em vez de espalhar nossos esforços tentando resolver tudo.

Redesenhar a mentalidade: foco na resolução de problemas

É fato que o elemento mais importante para o sucesso de um site é o seu conteúdo e propósito.

Seja para fornecer um local para as pessoas se conectarem umas com as outras (como o Craigslist) ou para disseminar informações (como a Wikipedia), o sucesso é medido – e alcançado – com base na utilidade, não na estética. O redesenho deve estar alinhado com a finalidade pretendida do site. O design deve apoiar os objetivos do site.

As deficiências no conteúdo e na utilidade do site nunca serão resolvidas tornando o site mais bonito.

Exemplos do mundo real de reformulações de sites

Para explorar mais o tópico, vamos examinar alguns esforços de reformulação de sites.

páginas amarelas

De acordo com o site Sobre página, um dos objetivos das Páginas Amarelas é “ser um utilitário para as pessoas: o site completo que, com menos cliques, ajuda todos a viver mais”. Portanto, faz sentido que o resultado do seu esforço de redesenho seja melhorar a localização; para diminuir os cliques necessários para chegar às informações desejadas. O redesenho atinge esse objetivo? Vamos dar uma olhada.

Projeto Antigo Novo design O redesenho do site tem uma aparência semelhante ao design original. Ele mantém muitas das cores originais (principalmente as cores da empresa, amarelo e preto). No novo design, a localização é usada para preencher a página inicial com conteúdo mais relevante com base em onde você mora.

Isso ajuda a reduzir a quantidade de trabalho que os usuários precisam realizar para selecionar a localidade na qual provavelmente estão interessados. Fora isso, o redesenho é predominantemente estético e recursos antigos que eram potencialmente úteis foram retirados. Por exemplo, a guia “Mais ferramentas” foi movida para um local de acesso menos conveniente.

O link “dicas de pesquisa”, que poderia ajudar usuários novos e existentes a melhorar suas consultas de pesquisa, foi removido. Imagens ricas usadas na primeira página – embora tornem a página mais atraente – podem diminuir o desempenho do front-end e se não melhorarem a experiência do usuário e não apoiarem o objetivo do site, então sua inclusão será superficial.

Venda piscante

O Blinksale, sendo um aplicativo web, deseja um layout de site que otimize as taxas de conversão para que novos visitantes possam ver rapidamente como a ferramenta funciona e descobrir rapidamente o caminho para se inscrever. A este respeito, o novo design do Blinksale tem várias vantagens em relação ao antigo.

Projeto antigo Novo design O novo design facilita a identificação da frase de chamariz principal na página, usando a arte da distinção para destacar sua localização e direcionar o olhar do usuário. Também é mais fácil aprender sobre os pontos de venda do aplicativo – quanto custa e recursos exclusivos que o diferenciam de seus concorrentes – por causa da lista sucinta com marcadores e das informações de preços à esquerda. No design antigo, o fluxo visual é ligeiramente falho, se assumirmos que a maioria dos visitantes são leitores da esquerda para a direita.

A sequência lógica para um visitante querer se inscrever é primeiro entender o que o aplicativo web pode fazer e quanto custa antes de tomar a decisão de se inscrever. O layout do design antigo inverte esse fluxo ocular ideal.

Seis de distância

Six Apart mudou a estrutura do layout da página e as cores usadas no design. Projeto Antigo Novo design A aparência do novo design é mais sutil e elegante do que antes.

A caixa de pesquisa no cabeçalho do novo design é um novo recurso bem posicionado.

Plaxo

Neste exemplo, podemos ver resultados positivos e (potencialmente) negativos de um esforço de reformulação de um site. Projeto antigo Novo design No design antigo, o Plaxo tinha uma barra de navegação horizontal proeminente e uma página inicial mais curta. O menu de navegação no design antigo foi omitido, o que significa que os usuários existentes que dependiam desse recurso agora terão que reaprender a navegar no site.

O novo design excede o comprimento da página anterior, o que exige que muitos usuários rolem mais para baixo para acessar as informações desejadas. No entanto, o novo design tem um apelo à ação claro e otimizado para novos visitantes do site. Possui um layout limpo que destaca recursos importantes do site.

Possui conteúdo melhor que responde a muitas das perguntas que um novo usuário em potencial pode ter sobre o aplicativo.

Pense Geek

A versão mais recente do ThinkGeek é um bom exemplo de redesenho. Projeto Antigo Novo design Os componentes que eram eficazes no design antigo foram mantidos e ligeiramente melhorados. Por exemplo, o menu de navegação vertical posicionado à esquerda foi mantido em seu lugar e acaba de receber uma reformulação tipográfica para torná-lo mais fácil de ler e visualmente mais atraente.

A caixa de pesquisa foi realocada para reduzir os movimentos necessários dos olhos e do mouse das pessoas que procuram um determinado produto no site. Agora está agrupado adequadamente com o menu de navegação vertical porque esses componentes se complementam. Além disso, novos recursos como a barra de navegação horizontal e informações de status do carrinho de compras foram adicionados.

O design não só deixa o site mais bonito, mas também corrige o layout da página e incorpora recursos úteis.

Alegre

Quando vi pela primeira vez o design antigo do Joyent, não percebi o que a empresa fornecia até ler o conteúdo do site. O tema de design do antigo site – embora único e visualmente atraente – não parecia apoiar e indicar claramente o que a empresa fazia. Projeto Antigo Novo design O design atualizado é brilhante.

Ele mantém a navegação útil do site com design antigo. O novo design é mais limpo em termos estéticos e provavelmente mais atraente para o público típico de gerentes de TI, CTOs, administradores de servidores e similares. O novo design adiciona componentes úteis, como as informações de contato da empresa (localizadas em destaque no cabeçalho do site), um botão de call to action na barra lateral e navegação para páginas internas no rodapé que são úteis para usuários existentes e potenciais.

Mozilla

Os sites da Mozilla sempre parecem ter designs notáveis.

Uma reformulação do Mozilla geralmente incorpora técnicas de design inovadoras e acréscimos de recursos úteis. Projeto Antigo Novo design Os recursos práticos permanecem inalterados e alguns novos são adicionados; ou seja, um formulário de inscrição em boletim informativo por e-mail e uma apresentação de slides destacando o conteúdo em destaque. O novo layout da página web parece menos confuso, principalmente devido à redução de hiperlinks e ao uso de espaços em branco entre os elementos de design.

REI

REI é um excelente exemplo de redesenho de um site para incluir novas tecnologias e técnicas úteis.

Projeto antigo Novo design O esquema principal de navegação e a arquitetura da informação são mantidos relativamente inalterados. Como um site de comércio eletrônico, incomodar os clientes fiéis ao mudar coisas com as quais eles já estão acostumados significa que coisas como a navegação devem ser abordadas com cautela na reformulação do site. Usar um controle deslizante de imagem e uma barra de navegação horizontal de vários níveis são as duas principais mudanças do novo web design.

David Wilkinson

Aqui temos um exemplo de redesenho do site de portfólio de um desenvolvedor web.

Os desenvolvedores e web designers são conhecidos por redesenhar rapidamente seus próprios sites, muitas vezes para refletir as tendências de design mais atuais. Projeto antigo Novo design A diferença entre o design antigo e o novo design é notavelmente vasta. Quase tudo mudou.

O logotipo e o slogan, as cores, o estilo de design, o layout, a personalidade do texto do site, a densidade da informação — tudo foi melhorado.

Etrade

O esforço de redesenho da Etrade é mais um realinhamento do que uma reformulação completa. Projeto Antigo Novo design A maioria dos componentes do layout não mudou e, se mudaram, as modificações foram mínimas. No entanto, o que aconteceu é que alguns elementos de design foram realocados.

Embora o menu de navegação vertical esquerdo tenha sido eliminado, os links foram realocados para seu devido lugar, a barra de navegação horizontal principal, reduzindo possíveis confusões sobre em qual menu um link poderia estar localizado e liberando algum espaço.

Conclusão

A ideia de redesenhar um site é atraente. Antes de nos comprometermos com esse empreendimento, devemos primeiro ter o cuidado de planejar e pensar sobre algumas considerações importantes. Principalmente, devemos determinar se buscar serviços de reformulação de sites é algo que realmente precisamos fazer.

A reformulação de um site não significa apenas mudar a aparência do site, significa adicionar recursos ausentes, corrigir falhas de design, reorganizar a arquitetura da informação, remover componentes desnecessários para desorganizar a interface do usuário e melhorar a funcionalidade.

Recursos e leituras adicionais

Conteúdo relacionado