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!!

Como adicionar postagens por categorias em seu site

O WordPress permite que você crie páginas com publicações de um assunto específico.

Se você deseja criar um link para uma página (tela) que exiba publicações (postagens) de um único tema, o ideal é iniciar criando um nome para a categoria deste assunto. Esta categoria pode ser a principal, exemplo “Culinária”, ou uma subcategoria da categoria principal, exemplo “Bolos”, quando se deseja dividir os assuntos relacionados ao mesmo tema:

Culinária (categoria principal) > Bolos (subcategoria da categoria principal)

Você pode criar quantas categorias (pai) e subcategorias (filhos) desejar! Usando nosso exemplo acima:

Culinária > Bolos

Culinária > Salgados

Culinária > Massas

A tela “Últimas Postagens” que os temas do WordPress costumam gerar na “Página de Posts” normalmente listam todas as postagens com suas categorias misturadas, sempre por ordem de data de postagem. Ou seja, as postagens mais recentes aparecem primeiro, e as mais antigas serão listadas logo abaixo por ordem decrescente, não importando a categoria.

Como separar as categorias de postagens, de modo que nosso visitante não precise procurar pelo assunto que deseja?

10 Passos para criar uma página de posts por categorias

No MENU lateral esquerdo do WordPress, no item CONFIGURAÇÕES, você consegue definir uma série de preferências para suas postagens. É recomendado que, antes de iniciar a criar o seu site e o blog, você defina estas preferências.

Para criar uma página exclusiva para as publicações (posts) de uma determinada categoria ou subcategoria, você deve seguir os seguintes passos:

  1. Escolha e crie o nome de sua categoria. No MENU lateral esquerdo de sua área ADMINISTRATIVA, selecione POSTS e no submenu clique no link CATEGORIAS.
  2. Na tela ADICIONAR NOVA CATEGORIA, digite o nome da categoria no campo NOME e repita no campo SLUG. Se a categoria for principal deixe o campo PAI como NENHUM. Se for uma subcategoria (e a principal deve ser criada antes), selecione a categoria PAI e clique em ADICIONAR NOVA CATEGORIA.
  3. O box à direita de sua tela vai exibir a categoria criada. Caso seja uma subcategoria, ela irá aparecer com um traço (hífen) na frente logo abaixo do nome da categoria principal.
  4. Agora vamos criar um link para uma “página” que vai publicar somente posts da categoria ou subcategorias criadas. No MENU lateral esquerdo selecione APARÊNCIA e na sequência MENUS.
  5. Na tela MENUS (na aba default EDITAR MENUS) você encontra à esquerda a aba CATEGORIAS. Clique sobre ela para abrir o Dropbox. A categoria e ou subcategoria criada deve aparecer listada em “Mais Usadas”. Caso ela não apareça, selecione a aba ao lado “Ver Tudo”. Marque o quadrado relacionado com a categoria desejada e clique no botão abaixo ADICIONAR AO MENU.
  6. O WordPress irá adicionar seu link de categorias ao menu principal do site, como poderá ser visto no box à direita. Agora você pode arrastá-lo para a posição que desejar no menu principal (ordenar). Clique no botão SALVAR MENU para salvar as alterações.
  7. Se você observar o seu site, verá que o novo link já aparece listado. Caso você queira atribuir um outro nome à este link no menu, basta retornar à página de MENUS, localizar o link de sua categoria, clicar sob o nome para abrir o Dropbox e digitar um novo título no campo RÓTULO DE NAVEGAÇÃO. A cada alteração não se esqueça de clicar no botão salvar!
  8. Caso queira REMOVER, basta clicar no Dropbox, selecionar o link REMOVER e na sequência SALVAR MENU.
  9. Em seu site, ao clicar no recente link criado no MENU, você vai visualizar uma mensagem informando “Nenhum Resultado Encontrado”. Isso acontece porque você ainda não criou nenhum POST vinculado à categoria e ou subcategoria recentemente criadas.
  10. Para criar um POST vinculado a uma categoria, retorne ao link POSTS no MENU lateral esquerdo. Clique sobre ele ou alternativamente sobre ADICIONAR NOVO. Nesta tela você deve inserir um título, o texto logo abaixo e na segunda coluna à direita você deve localizar o box CATEGORIAS. Marque a caixa com o nome da categoria criada e clique no botão ATUALIZAR para salvar a página. Agora o seu post aparece relacionado na categoria e também no link criado no seu MENU principal.

DICA: Procure não exagerar na criação de categorias e subcategorias, pois o excesso pode confundir o usuário. Como inspiração, siga o conceito usado pela mídia impressa. Revistas e jornais separam as notícias por editorias, que são o mesmo que categorias de assuntos: Economia, Política, Cultura, Turismo, Saúde, etc.