Design web responsivo, acessibilidade e usabilidade

Como já vimos aqui em O que é WordPress e para que serve, o WordPress é uma das ferramentas mais simples e didáticas para o design de um site ou loja virtual.

E por experiência própria, nos últimos anos tenho visto uma quantidade cada vez maior de pessoas trabalhar com o WordPress em apenas poucos cliques.

Aqui vamos ver, de forma simples, tópicos importantes de como deve ser a estrutura de design de um bom site.

01. Apresentação visual de dados, informações e imagens

Todo projeto web precisa seguir algumas regras básicas.

Não se trata de normas a serem obedecidas, mas o uso das melhores práticas já testadas e que podem garantir os resultados esperados.

Um site não é um programa de TV, nem um jornal ou revista, muito menos um catalogo, folheto ou jogo virtual.

A internet tem seu próprio formato e linguagem, portanto, dispense qualquer tentativa de trazer outros tipos de mídia para o formato web.

Um usuário que busca uma informação ou produto quer encontra-lo da forma mais rápida e fácil. Qualquer tentativa de enrolação e o visitante desiste na primeira tela.

Portanto, não perca tempo e mostre logo o que quer e onde estão todos os detalhes!!

02. A importância do cabeçalho inicial

O cabeçalho inicial, também conhecido como Header ou Menu Principal é um dos elementos mais importantes do site. Está sempre localizado na parte superior e é o primeiro elemento a ser visualizado pelo usuário ao entrar no site.

Desde que a internet foi inventada, o cabeçalho sempre existiu na maioria dos projetos web, o que fez com que a maioria das pessoas se acostumassem com a existência dele.

Nada contra os designers que procuram fugir desta estrutura clássica, mas sabemos que as melhores experiências de usuário (UX) estão em projetos que usam o velho e bom cabeçalho inicial.

Já sabemos que todo usuário olha uma apresentação visual de cima para baixo e da esquerda para direita, num processo de busca pela informação em espiral.

Esse comportamento é o que faz a maioria dos projetos posicionar o logo da empresa no cabeçalho à esquerda ou, no máximo, no centro dele.

A partir do logo seguem para a direita os principais links, incluindo o redundante Home, o link que retorna qualquer tela para a página inicial.

Alguns designers argumentam que os usuários já sabem que um clique no logo leva ao mesmo local, mas a verdade que o link Home ainda é um dos mais procurados nas estatísticas.

O cabeçalho deve exibir:

O LOGO e ou nome da empresa.

O link de retorno à página principal Home, e que pode ser traduzido por Início.

Os principais links de apresentação e contato com a empresa: Quem Somos, Serviços, Produtos, Loja, Blog, Contato, etc. Se houver necessidade e muito volume de informação, você pode desenvolver submenus, ou seja, sublinks logo abaixo destes tópicos principais, mas deve evitar usar mais de três tópicos.

Se houver espaço, você pode incluir um botão CTA para um call to action mais imediato, ou um ícone para contato por telefone ou WhatsApp. Caso tenha muitos dados importantes para exibir, o ideal é criar um menu adicional superior, um outro menu acima do Menu Principal contendo outros dados.

É no cabeçalho também que devem ser inseridos links de acesso às áreas restritas, como Login (Área de Acesso), Cadastro ou Registro e, no caso de lojas virtuais, o clássico Carrinho de compras.

Estes são os elementos fundamentais de um bom cabeçalho, mas procure não exagerar. O usuário não quer perder tempo, precisa encontrar o que procura o mais rápido possível!

03. O dinamismo do conteúdo

Após o cabeçalho a criatividade não tem limite. Você pode incluir na área de conteúdo o que desejar, mas tem que ter cuidado para não gerar uma poluição visual, seja de informações ou de imagens.

Alguns projetos usam uma área de conteúdo única, ou seja, as informações e imagens ocupam toda a tela de ponta a ponta.

Outros preferem dividir o conteúdo em colunas verticais, uma principal e outras laterais com informações adicionais.

Com base no volume de informações a ser apresentado, analise a sua necessidade.

A maioria dos projetos atuais procura dividir a área de conteúdo em colunas horizontais. Um conjunto de “tiras”, uma após outra, porém com design diferenciado entre elas para não confundir no visual.

Na primeira, é comum a inserção de um banner, que é trocado à medida que surgem novidades na empresa. A primeira é sempre um destaque e será o primeiro conteúdo a ser visualizado, tanto na versão para o computador, quanto para o celular.

Nas demais colunas seguintes geralmente são inseridas introduções ao conteúdo dos links que compõe o cabeçalho e acesso a outros conteúdos não presentes nele também.

O design desta área que compõe o “meio do site” deve ser uma mistura de textos HTML, imagens e ícones.

Nunca se limite a incluir apenas imagens, lembre-se que mecanismos de buscas não conseguem ler textos inseridos numa imagem, o que pode prejudicar a otimização do conteúdo nestas ferramentas e prejudicar a otimização e divulgação do projeto.

04. O rodapé como base estrutural

Após o cabeçalho e todo o conteúdo principal, também é tradicional finalizar o projeto web com informações adicionais e links para outras áreas.

É no rodapé que a maioria dos projetos incluem informações como endereço completo, razão social, CNPJ, telefones, formas de contato, políticas e privacidades, redes sociais, etc. Também é comum repetir os links do cabeçalho para facilitar a navegação do usuário.

Um rodapé pode apresentar uma ou mais colunas verticais. Cada coluna vai apresentar dados, informações e links úteis para o usuário, sempre de forma organizada por assunto.

Este local deve ser exclusivo para textos, portanto, evite imagens, inclusive no background. Ícones discretos são benvindos, mas sem exageros.

O usuário acostumado com a web sabe que se não encontrou o que desejava no cabeçalho, provavelmente o que procura está listado no rodapé.

Lembre-se, quanto mais o rodapé se parecer com um sitemap, mais auxiliará o visitante na sua busca por informações.

Leia mais sobre O que é um Sitemap e como Criar

05. A importância de manter um blog como central de notícias ou Centro de Ajuda

Blogs são uma boa ideia para quem gerar notícias ou tem novidades periodicamente.

Empresas que usam blogs para manter seus clientes informados ou para ajudar seus clientes a entender seus produtos e serviços tendem a ganhar com este canal de comunicação.

Os mecanismos de buscam valorizam blogs, antes mesmo de conteúdos de sites. Eles são considerados centrais de ajuda e, por esta razão, são valorizados nestas ferramentas.

A estrutura do blog é normalmente composta por uma página principal com as mais recentes publicações, seguida por links a outras publicações mais antigas.

Podem ser formados por uma ou mais colunas, além de um mecanismo de pesquisa ou nuvem de tags para facilitar a busca por palavras-chaves.

A partir da página principal, qualquer clique leva à página única do respectivo conteúdo, que deve ser objetivo e oferecer, se possível, ilustrações.

Leia mais sobre Como Criar um Blog Profissional

Estes são os cinco tópicos básicos para a criação de um bom site. A estrutura clássica de um site pode parecer ultrapassada, mas inovações quem forcem o raciocínio do usuário podem ser confusos e prejudicar a comunicação da empresa.

Alguns projetos podem se dar ao luxo de criar novas experiências de navegação, mas se você busca uma comunicação segura e com bons resultados opte pelo que já foi experimentado e testado ;)

compartilhe este conteúdo

SIGA-NOS

Este site usa cookies para garantir que você obtenha a melhor experiência de navegação