Iniciando minha Loja Virtual (Quarta Parte)

Iniciando minha Loja Virtual (Quarta Parte)

Se você já leu os três capítulos anteriores desta minissérie Iniciando Minha Loja Virtual você provavelmente já recebeu as primeiras noções de layout para a sua loja virtual. Como você já sabe, atualmente as pessoas acessam a internet nos mais diferentes dispositivos: computadores, celulares, tablets, televisores, etc.

Como pode ser notado, estes dispositivos possuem telas com diferentes formatos e tamanhos. Por exemplo, num celular você pode acessar a internet com o aparelho na vertical ou horizontal e, dependendo do site que estiver visitando, isso já faz uma diferença.

Definindo questões como acessibilidade e usabilidade

Porque isso acontece? Os mais avançados softwares de acesso à internet já possuem dispositivos capazes de identificar o tamanho da tela que você está visualizando. Este recurso permite uma adaptação que melhora, não somente a usabilidade (capacidade de enxergar textos e imagens de forma legível e completa), assim como permitir o uso do teclado com facilidade, mas também proporcional uma boa experiência de navegação para o usuário (UX – User Experience), termo usado para definir o quanto agradável precisa ser acessar aquele site ou loja virtual.

Por exemplo, se você acessa um site de notícias numa tela com mais de 20 polegadas, o software identifica o formato e oferece várias colunas laterais de informações e ou imagens bem maiores. Entretanto, se você está usando um celular, algumas colunas (grids) e imagens não tão importantes são ocultadas, e as demais são disponibilizadas num formato único vertical, pois em um celular é muito mais agradável percorrer as telas usando o dedo indicador para cima ou para baixo.

São motivos como este que o seu projeto tem que ser perfeitamente adaptável a todos os dispositivos de visualização!

  • DICA: Quando estiver desenvolvendo o seu projeto, acesse-o nos mais diferentes dispositivos com diferentes tamanhos de telas e também em diferentes navegadores (Internet Explorer, Edge, Firefox, Chrome, Opera, etc) com a finalidade de visualizar e corrigir eventuais falhas.

Quando se realiza experiências de navegação nos mais diferentes dispositivos de acesso, percebe-se alguns erros no layout (design) que precisam ser corrigidos. É por essa razão que temos repetido: estude e utilize as experiências que já foram realizadas nesta área no mundo todo! Não tente reinventar a roda! Designers em todas as partes do planeta realizam diariamente experiências com layouts para criar os melhores resultados (experiências de usuários) e devemos ficar antenados para estes resultados para não repetir erros do passado.

Como já vimos, a maioria dos sites ou lojas virtuais precisam de uma página de abertura com informações básicas. Logomarca, menu de opções de navegação (horizontal ou vertical), rodapé com endereço, telefone, entre outras informações.

  • DICA: Procure visitar as mais conhecidas lojas online e concorrentes diretos, e perceba onde estas informações básicas foram adicionadas. Perceba que quanto mais rápido você encontrar uma informação, melhor é o design disponibilizado.

Desenhando o layout da minha loja virtual

Agora que você sabe que a página de abertura (home) de sua loja virtual precisa de informações básicas logo no início, pegue uma folha de papel em branco e rabisque prováveis telas de abertura.

Normalmente os projetos apresentam a logomarca na primeira coluna horizontal superior (centralizado ou à esquerda), seguido logo abaixo do menu horizontal (a ordem de importância dos links é sempre da esquerda para a direita), seguido de uma imagem ampla ou um conjunto de imagens em colunas, que destaquem os seus produtos e serviços. Depois dos destaques deste conteúdo, você pode incluir outras colunas horizontais com informações básicas sobre a empresa e condições de compra, para finalmente finalizar com um rodapé, onde normalmente aparecem poucos dados, como direitos autorais (copyright), por exemplo.

Como você já deve ter visto na web, alguns layouts abusam do poder da imagem. Infelizmente, num primeiro momento, nem todos têm a possibilidade de produzir fotos ou vídeos exclusivos para o seu projeto. Neste caso, você pode recorrer às agências que vendem fotografias.

  • DICA: Numa busca nos mecanismos de buscas (Google, Yahoo, etc) você encontra empresas que “alugam” os direitos de uso de uma imagem. Você escolhe o que quiser, paga e faz o download para uso no seu projeto.

As cores a serem usadas são muito importantes, mas não abuse delas! Preste atenção nas cores de sua logomarca e procure segui-las. Uma conhecida rede de fastfood usa vermelho e amarelo não por acaso. Procure ler um pouco sobre psicologia das cores: você vai entender que nem todas as cores podem ser usadas no seu projeto!

Os projetos desenvolvidos nos formatos de colunas horizontais (grids) são interessantes, pois já sabemos que eles poderão ser adaptar com facilidade aos diferentes tamanhos de telas de acesso. Duas ou três colunas oferecem as melhores experiências, mais do que isso o projeto visual começa a ficar poluído e confuso.

As imagens que aparecem na tela de abertura podem ser dos próprios produtos/serviços vendidos ou, no caso de um extenso catálogo, imagens com títulos que na verdade são banners que, ao serem clicados, levam o usuário para as específicas categorias. Essas categorias específicas (ou subcategorias) também podem ter a sua própria página exclusiva de abertura ;)

Use e abuse do equilíbrio e simetria, as imagens dos produtos devem obedecer um formato padronizado. Defina se serão sempre quadradas ou retangulares, se serão pequenas ou grandes, se terão ou não fundos brancos ou coloridos, modelos usando os produtos, etc.

Do mesmo modo que um supermercado disponibiliza produtos do mesmo tipo em corredores, numa loja virtual você deve criar categorias principais (corredores ou seções) para acesso a determinados produtos e, na sequência, subcategorias para produtos específicos (prateleiras). Exemplo:

Vestuário:

  • Masculino:
    Calças
    Camisas
  • Feminino:
    Blusas
    Calças
    Vestidos

A divisão por categorias e subcategorias auxilia o usuário a encontrar o que ele está procurando. Misturar todos os produtos pode causar a impressão de que sua loja é uma bagunça! Se desejo comprar camisas masculinas, não há razão para visualizar as novidades em vestidos!

  • DICA: Limite o número de subcategorias!!! O ideal é que sejam no máximo três ou quatro!! Pesquisas indicam que se o usuário tiver que clicar em mais de três links para encontrar um produto, acaba se perdendo e desistindo da busca.

Quando você desenvolve um projeto utilizando o software WordPress (WP), a quantidade de telas que pode ser gerada é ilimitada! Mas não abuse deste recurso, pois tudo o que é em excesso prejudica a usabilidade. Procure concentrar as informações de um mesmo assunto numa mesma página (tela) e seja objetivo, nada de textos longos!

Como já foi dito, numa loja virtual cada produto possui a sua própria página. É na página de um produto/serviço específico que você vai detalhar todas as informações sobre ele. Além de fotos de boa qualidade nos mais diferentes ângulos, você pode incluir informações sobre o material em que ele foi produzido, formatos, dimensões (largura, altura e comprimento), cores, peso, acessórios adicionais, embalagem, orientações de uso, advertências, etc. Preços, frete, condições e prazos de entrega são obrigatórios!

Quanto mais informação melhor para você (que não terá que efetuar trocas ou reembolso) e para o seu cliente (que não terá que devolver o produto)!

No próximo e último capítulo, veremos outras questões bem importantes para quem está iniciando no mundo do comércio eletrônico!!