Guia de Usabilidade PagSeguro

Guia de usabilidade

Guia de usabilidade 2

Índice0

Introdução1

O que é usabilidade1.1 4

Porque a usabilidade é importante?1.2 5

Como deixar a sua loja mais objetiva e eficiente2

Busca de produtos2.1 11

Definição de categorias2.2 13

Detalhes do produto2.3 14

Fotos e imagens dos produtos2.4 16

Botão “comprar”2.5 17

Preços e condições de pagamento2.6 19


Índice0

Identifique qualquer limitação ou restrição no início da compra2.7 20

Endereço de entrega2.8 21

Prazo de entrega2.9 22

Localização do comprador na página2.10 23

Continue comprando2.11 24

Utilize certificados de segurança em seu site2.12 25

Sempre gere recibos das transações2.13 26

Status de entrega do pedido2.14 27


Índice0

Formulários3

Alinhamento dos formulários3.1 30

Tamanho e a obrigatoriedade dos campos3.2 31

Elimine campos desnecessários3.3 32

Promoções e newsletters da sua loja3.4 33

Botões de ações principais e secundárias3.5 34

Evite erros: Inclua textos de ajuda nos campos mais complicados3.6 35

Mensagens de erro3.7 36

Divulgação do PagSeguro na sua loja4

Fluxo de pagamento4.1 38


Índice0

Como utilizar a marca PagSeguro4.2 39

Banners do PagSeguro4.3 42

Botões de pagamento e doações4.4 44

Para finalizar5

Blog do PagSeguro5.1 46

Faça testes na sua loja para detectar possibilidades de melhora5.2 47


Introdução1


O que é usabilidade1.1

Introdução

A usabilidade é um estudo de técnicas que objetivam promover:

• A facilidade de uso;

• A facilidade de aprendizado;

• A facilidade de memorização de tarefas;

• A produtividade na execução de tarefas;

• A prevenção, visando a redução de erros;

• A satisfação do indivíduo.

Para a usabilidade aplicada ao comércio eletrônico, o foco sempre deve

ser o seu comprador.


Para os vendedores:

• Reduz o tempo e custos da compra;

• Reduz os custos de suporte;

• Reduz os erros dos usuários;

• Aumenta o retorno de investimento.

Porque a usabilidade é importante?1.2

Introdução


Para os compradores:

• Permite atingir os seus objetivos;

• Promove a satisfação com a utilização do site;

• Gera prazer em utilizar os serviços do site;

• Estabelece uma relação de confiança com o site.

Porque a usabilidade é importante?1.2

Introdução


Como deixar a sua loja mais objetiva e eficiente2


Busca dos produtos2.1

Como deixar a sua loja mais objetiva e eficiente

O campo de busca deve estar localizado em uma área bem destacada, de preferência no topo da página. A busca é muito importante, pois costuma ser a primeira ferramenta que o comprador utiliza para encontrar um produto específico.

Se possível, ofereça filtros por marca e por faixa de preço. Ofereça também uma opção para ordenar os resultados da busca.


Busca dos produtos2.1


Certo - A busca está destacada na home e composta por um filtro de categoria de produtos

Errado - Fundo preto com um buscador pequeno, quase que imperceptível na home

LOGO

LOGO


Errado - Não existe ordem e nem categoria de produtos na home

Certo - Categoria de produtos e os tipos de produto

Definição de categorias2.2

Agrupe seus produtos por categorias no menu de navegação. Evite criar categorias muito diferentes da maioria dos sites de e-commerce, pois os compradores já estão acostumados com esses padrões.

Nem sempre é fácil fazer uma busca tão boa quanto a dos grandes sites de e-commerce. Por isso, as categorias dos seus produtos também são muito importantes para que os compradores encontrem os produtos desejados (ou mesmo descubram algo interessante que não estavam buscando!)



Detalhes do produto2.3

A página com os detalhes do seu produto é essencial para que você realize a venda. É ali que o comprador precisa identificar, com clareza:

• O nome do produto;

• O preço e as condições de pagamento;

• As fotos do produto;

• O botão comprar;

• Características adicionais.



Errado - Não há foto do produto e nem descrição sobre ele

Certo - Foto e descrição do produto e as faixas para serem ouvidas (no caso de CDs)

Detalhes do produto2.3

LOGO



Fotos e imagens dos produtos2.4

Use fotos para apresentar o produto de forma que seu cliente possa visualizá-lo sem sair de casa. Ofereça a ele fotos de vários ângulos e inclua link para que o usuário possa ver a foto ampliada.

Errado - Camiseta desenhada. Não mostra o produto como ele é

Certo - Fotos do produto em uso. Pode-se acrescentar o zoom na demonstração do produto

LOGO



Botão “comprar”2.5

O botão "Comprar" deve ficar bem visível, em posição de destaque na tela. Evite destacarbotões de funções secundárias. Procure usar uma cor que contraste com o layout da página.

Utilize termos como “Carrinho de compras”, “Cesta de compras”, “Comprar”, “Adicionar aoCarrinho”. Evite termos “engraçadinhos” como “Quero levar para casa” em vez desimplesmente “Comprar”. O seu cliente pode não entender e desistir da compra.



Botão “comprar”2.5

Errado - Botão pequeno e no canto inferior da tela. Não está destacado para o usuário

Certo - Botão visível e bem disposto na tela



Preço e condições de pagamento2.6

O preço é uma das informações mais importantes da página, e um dos principais fatores que decidem a compra. Procure deixá-lo sempre em destaque, com fonte grande e com as formas de pagamento próximas.

É ótimo oferecer várias formas de pagamento, mas procure escolher uma delas para destacar: ou o preço à vista ou o preço à prazo. Se você coloca vários preços diferentes competindo, pode causar confusão.

Errado - Não há indicações das formas de pagamento na página de compra

Certo - Todas as formas possíveis de pagamento bem destacada na página de compra

LOGO



Identifique qualquer limitação ou restrição no início da compra2.7

É importante informar com clareza as limitações sobre o produto e restrições de entrega.Destaque informações como: “produto disponível somente em 110v“; "entrega gratuita restrita àGrande São Paulo“; "produto inadequado para menores de 18 anos“; ”entrega na regiãosudeste”; “frete grátis para RJ e SP”; etc.



Endereço de entrega2.8

Durante o processo de compra peça a confirmação de endereço para entrega. Permita a alteração do endereço já cadastrado.



Prazo de entrega2.9

Deixe bem claro que o prazo de entrega começa a partir da aprovação ou reconhecimento do pagamento do comprador. Dessa maneira, o comprador ficará com expectativa mais real sobre quando vai receber o produto.

Essa dica também vale para a venda de serviços (downloads, créditos, arquivos, etc.) onde o comprador espera receber a compra imediatamente após o pagamento.



Localização do comprador na página2.10

Os compradores se sentirão mais confortáveis se souberem onde estão, para onde podem ir e como chegarão lá. Inclua informações do tipo “Você está aqui”. Além disso, tenha saídas emergenciais (botão “voltar”) caso o comprador entre em uma área indesejada.

Errado - Não há indicações do caminho feito pelo usuário

Certo - O usuário sempre tem que estar ciente de onde ele está e saber como voltar ao início

LOGO (11)1234-5678



Continue comprando2.11

Informe ao comprador que ele poderá realizar alterações a qualquer momento, antes de finalizar o “Checkout ou carrinho de compras”. Ofereça ao consumidor a oportunidade de continuar comprando, sem perder o histórico de compras do carrinho antes da conclusão do processo.



Utilize certificados de segurança em seu site2.12

Utilizar padrões de segurança em seu sistema transmite maior segurança ao comprador.

Informações normalmente encontradasno rodapé das páginas.

Sites com certificados de segurança possuem URL em formato https.



Sempre gere recibos das transações2.13

O comprador precisa ter uma garantia de que a compra foi realizada com sucesso. Isso transmite maior segurança.



Status de entrega do pedido2.14

Permita que o comprador acompanhe o status de entrega do pedido pelo site da loja, isso evita que ele fique ansioso por receber o produto e diminui reclamações.



Contato2.15

Deixe sempre visível o contato de sua loja. Também é interessante exibir o horário de funcionamento do atendimento ao cliente.



Formulários3


Alinhamento dos formulários3.1

Formulários

É muito importante manter o alinhamento organizado, para facilitar a visualização do formulário e o preenchimento dos campos.

ErradoCerto


Tamanho e obrigatoriedade dos campos3.2

Formulários

É interessante que cada campo tenha um tamanho específico, de acordo com o dado solicitado, para facilitar o entendimento. Também é importante identificar os campos de preenchimento obrigatório.

Errado - Campos desorganizados e de visualização confusa.

Certo - Sinalização informando os campos de preenchimento obrigatório


Errado - Informações desnecessárias

Elimine campos desnecessários3.3

Formulários

Preencher formulários não é algo agradável... Por isso, evite pedir informações desnecessárias.


Promoções e newsletter da sua loja3.4

Formulários

Permita que o seu cliente opte por não receber promoções e newsletter da sua loja.

A liberdade de optar por receber as promoções por e-mail deve aparecer no cadastro e também nos próprios e-mails enviados.

Compradores não gostam de receber e-mails indesejados.


Botões de ações principais e secundárias3.5

Formulários

As ações principais (como “Finalizar compra” ou “cadastrar”) devem, sempre, estar em destaque. Já as ações secundárias (como “cancelar”, “voltar”) ficam com destaque menor. Dessa forma, você chama a atenção do cliente para continuar o processo de compra e, não para a desistência.

Certo – Mais destaque para a ação primária


Evite erros: Inclua textos de ajuda nos campos complicados3.6

Formulários

Utilize termos que possam ser rapidamente entendidos pelo consumidor e, caso necessário, sempre inclua um texto explicativo no campo para facilitar a compreensão.


Mensagens de erro3.7

Formulários

Tenha mensagens de erro de fácil compreensão, explicando ao comprador o que aconteceu de errado no preenchimento, colocando o campo em evidência.

Certo – Feedback de erro nos campos não preenchidos ou preenchidos incorretamente.

Sobrenome é obrigatório

Nome de usuário inválido

A senha deve conter de 4 a 6 caracteres

Confirmar senha com 4 a 6 caracteres

Endereço de e-mail inválido


Divulgação do PagSeguro na sua loja4


Fluxo de pagamento4.1

Divulgação do PagSeguro na sua loja

Deixe claro para o comprador que ele está sendo direcionado para o PagSeguro, isso evita que ele desista da compra.


Como utilizar a marca PagSeguro4.2


Quando utilizar a marca PagSeguro em textos, lembre-se de sempre escrevê-lo com as letras “P” e “S” maiúsculas, não utilizar hífen ou escrevê-lo em duas linhas diferentes, para preservar a integridade da marca. Além disso, não se deve usar o logotipo do PagSeguro em textos.

Sugerimos que ao aplicar a marca em botões, logotipos ou banners, a área mínima nas laterais seja de 20 pixels e que, acima ou abaixo, mantenha os mesmos 20 pixels, para que exista uma área de respiro e maior destaque.


Fique atento para as regras de redução máxima da marca, a redução máxima para aplicação com a mensagem “Uma empresa UOL” é 152px x 40px.

Caso seja necessário aplicar a marca em fundos que interfiram em sua legibilidade, aplique-a utilizando o campo de resguardo visual.






Não deve ser feita qualquer alteração na marca PagSeguro.


Banners do PagSeguro4.3


Incluir banners do PagSeguro em seu site é uma boa alternativa, pois, muitos compradores se sentem mais confortáveis quando sabem que o pagamento será feito em ambiente seguro desde o início da compra.


Banners do PagSeguro4.3


IMPORTANTE: Os logotipos, banners e botões de pagamento não devem ter seu formato alterado. Para inserção em seu site, deve-se reservar um espaço adequado, de acordo com as dimensões do modelo escolhido. Esses banners são apenas informativos, e não precisam de link, para que o visitante não abandone seu site ou loja virtual no momento da compra. Verifique os modelos disponíveis no site do PagSeguro.


Botões de pagamento e doações4.4


Utilizado na integração, para que o comprador saiba que está efetuando o pagamento ou doação através do PagSeguro.

Modelos disponíveis em nosso site: https://pagseguro.uol.com.br/desenvolvedor/botoes_de_pagamento.jhtml


Para finalizar5


Blog do PagSeguro5.1

Para finalizar

Fique por dentro e acompanhe com frequência o blog do PagSeguro.No blog há dicas de e-commerce, eventos da área, cases de sucesso, notícias sobre o mercado, dicas de segurança, comunicações sobre o produto e muito mais. Através do blog é possível ter acesso às últimas postagens do Twitter do PagSeguro, além de permitir a navegação por assunto de seu interesse. É através desse canal de comunicação que você terá acesso às informações mais recentes do PagSeguro.

http://blogpagseguro.com.br


Faça testes na sua loja virtual para detectar possibilidades de melhora5.2

Para finalizar

Mesmo que seu site preencha todos os requisitos para uma boa compra, é sempre aconselhável verificar o nível de satisfação dos seus clientes e analisar as críticas recebidas para a melhoria contínua.

Fique sempre atento às reclamações recebidas pois é a partir delas que você poderá descobrir os pontos que precisam ser melhorados em sua loja. Se ainda não tem, vale criar um formulário para que os clientes possa reclamar e dar sugestões.

Você também pode observar como outras pessoas ou possíveis compradores utilizam a sua loja. Faça um exercício: chame um amigo ou alguém de sua família que não conhece o site da sua loja e peça para que simule uma compra ali. Não ajude e nem pergunte nada - observe apenas. Com isso você pode perceber pequenos problemas e pontos a melhorar no seu site.

Guia de Usabilidade PagSeguro

Documents

Transcript of Guia de Usabilidade PagSeguro