Guia de Usabilidade PagSeguro

Guia de usabilidade

0 Índice 1 Introdução 1.1 O que é usabilidade 4 1.2 Porque a usabilidade é importante? 5 2 Como deixar a sua loja mais objetiva e eficiente 2.1 Busca de produtos 11 2.2 Definição de categorias 13 2.3 Detalhes do produto 14 2.4 Fotos e imagens dos produtos 16 2.5 Botão “comprar” 17 2.6 Preços e condições de pagamento 19Guia de usabilidade 2

0 Índice 2.7 Identifique qualquer limitação ou restrição no início da compra 20 2.8 Endereço de entrega 21 2.9 Prazo de entrega 22 2.10 Localização do comprador na página 23 2.11 Continue comprando 24 2.12 Utilize certificados de segurança em seu site 25 2.13 Sempre gere recibos das transações 26 2.14 Status de entrega do pedido 27Guia de usabilidade 3

0 Índice 3 Formulários 3.1 Alinhamento dos formulários 30 3.2 Tamanho e a obrigatoriedade dos campos 31 3.3 Elimine campos desnecessários 32 3.4 Promoções e newsletters da sua loja 33 3.5 Botões de ações principais e secundárias 34 3.6 Evite erros: Inclua textos de ajuda nos campos mais complicados 35 3.7 Mensagens de erro 36 4 Divulgação do PagSeguro na sua loja 4.1 Fluxo de pagamento 38Guia de usabilidade 4

0 Índice 4.2 Como utilizar a marca PagSeguro 39 4.3 Banners do PagSeguro 42 4.4 Botões de pagamento e doações 44 5 Para finalizar 5.1 Blog do PagSeguro 46 5.2 Faça testes na sua loja para detectar possibilidades de melhora 47Guia de usabilidade 5

1 IntroduçãoGuia de usabilidade 6

Introdução1.1 O que é usabilidade 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.Guia de usabilidade 7

Introdução1.2 Porque a usabilidade é importante? 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.Guia de usabilidade 8

Introdução1.2 Porque a usabilidade é importante? 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.Guia de usabilidade 9

2 Como deixar a sua loja mais objetiva e eficienteGuia de usabilidade 10

Como deixar a sua loja mais objetiva e eficiente2.1 Busca dos produtos 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.Guia de usabilidade 11

Como deixar a sua loja mais objetiva e eficiente2.1 Busca dos produtos LOGO LOGO Errado - Fundo preto com um buscador Certo - A busca está destacada na home e pequeno, quase que imperceptível na home composta por um filtro de categoria de produtosGuia de usabilidade 12

Como deixar a sua loja mais objetiva e eficiente2.2 Definição de categorias 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!) Certo - Categoria de produtos e os tipos de Errado - Não existe ordem e nem categoria de produto produtos na homeGuia de usabilidade 13

Como deixar a sua loja mais objetiva e eficiente2.3 Detalhes do produto 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.Guia de usabilidade 14

Como deixar a sua loja mais objetiva e eficiente2.3 Detalhes do produto LOGO Certo - Foto e descrição do produto e as Errado - Não há foto do produto e nem faixas para serem ouvidas (no caso de CDs) descrição sobre eleGuia de usabilidade 15

Como deixar a sua loja mais objetiva e eficiente2.4 Fotos e imagens dos produtos 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. LOGO Certo - Fotos do produto em uso. Pode-se Errado - Camiseta desenhada. Não mostra o acrescentar o zoom na demonstração do produto como ele é produtoGuia de usabilidade 16

Como deixar a sua loja mais objetiva e eficiente2.5 Botão “comprar” O botão "Comprar" deve ficar bem visível, em posição de destaque na tela. Evite destacar botõ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 ao Carrinho”. Evite termos “engraçadinhos” como “Quero levar para casa” em vez de simplesmente “Comprar”. O seu cliente pode não entender e desistir da compra.Guia de usabilidade 17

Como deixar a sua loja mais objetiva e eficiente2.5 Botão “comprar” Certo - Botão visível e bem disposto na tela Errado - Botão pequeno e no canto inferior da tela. Não está destacado para o usuárioGuia de usabilidade 18

Como deixar a sua loja mais objetiva e eficiente2.6 Preço e condições de pagamento 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. LOGO Certo - Todas as formas possíveis de Errado - Não há indicações das formas de pagamento bem destacada na página de pagamento na página de compra compraGuia de usabilidade 19

Como deixar a sua loja mais objetiva e eficiente2.7 Identifique qualquer limitação ou restrição no início da compra É 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ão sudeste”; “frete grátis para RJ e SP”; etc.Guia de usabilidade 20

Como deixar a sua loja mais objetiva e eficiente2.8 Endereço de entrega Durante o processo de compra peça a confirmação de endereço para entrega. Permita a alteração do endereço já cadastrado.Guia de usabilidade 21

Como deixar a sua loja mais objetiva e eficiente2.9 Prazo de entrega 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.Guia de usabilidade 22

Como deixar a sua loja mais objetiva e eficiente2.10 Localização do comprador na página 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. LOGO (11)1234-5678 Errado - Não há indicações do caminho feito Certo - O usuário sempre tem que estar ciente pelo usuário de onde ele está e saber como voltar ao inícioGuia de usabilidade 23

Como deixar a sua loja mais objetiva e eficiente2.11 Continue comprando 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.Guia de usabilidade 24

Como deixar a sua loja mais objetiva e eficiente2.12 Utilize certificados de segurança em seu site Utilizar padrões de segurança em seu sistema transmite maior segurança ao comprador. Sites com certificados de segurança possuem Informações normalmente encontradas URL em formato https. no rodapé das páginas.Guia de usabilidade 25

Como deixar a sua loja mais objetiva e eficiente2.13 Sempre gere recibos das transações O comprador precisa ter uma garantia de que a compra foi realizada com sucesso. Isso transmite maior segurança.Guia de usabilidade 26

Como deixar a sua loja mais objetiva e eficiente2.14 Status de entrega do pedido 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.Guia de usabilidade 27

Como deixar a sua loja mais objetiva e eficiente2.15 Contato Deixe sempre visível o contato de sua loja. Também é interessante exibir o horário de funcionamento do atendimento ao cliente.Guia de usabilidade 28

3 FormuláriosGuia de usabilidade 29

Formulários3.1 Alinhamento dos formulários É muito importante manter o alinhamento organizado, para facilitar a visualização do formulário e o preenchimento dos campos. Certo ErradoGuia de usabilidade 30

Formulários3.2 Tamanho e obrigatoriedade dos campos É 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. Certo - Sinalização informando os campos de Errado - Campos desorganizados e de preenchimento obrigatório visualização confusa.Guia de usabilidade 31

Formulários3.3 Elimine campos desnecessários Preencher formulários não é algo agradável... Por isso, evite pedir informações desnecessárias. Errado - Informações desnecessáriasGuia de usabilidade 32

Formulários3.4 Promoções e newsletter da sua loja 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.Guia de usabilidade 33

Formulários3.5 Botões de ações principais e secundárias 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áriaGuia de usabilidade 34

Formulários3.6 Evite erros: Inclua textos de ajuda nos campos complicados 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.Guia de usabilidade 35

Formulários3.7 Mensagens de erro 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. 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 Certo – Feedback de erro nos campos não preenchidos ou preenchidos incorretamente.Guia de usabilidade 36

4 Divulgação do PagSeguro na sua lojaGuia de usabilidade 37

Divulgação do PagSeguro na sua loja4.1 Fluxo de pagamento Deixe claro para o comprador que ele está sendo direcionado para o PagSeguro, isso evita que ele desista da compra.Guia de usabilidade 38

Divulgação do PagSeguro na sua loja4.2 Como utilizar a marca PagSeguro 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.Guia de usabilidade 39

Divulgação do PagSeguro na sua loja4.2 Como utilizar a marca PagSeguro 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.Guia de usabilidade 40

Divulgação do PagSeguro na sua loja4.2 Como utilizar a marca PagSeguro Não deve ser feita qualquer alteração na marca PagSeguro.Guia de usabilidade 41

Divulgação do PagSeguro na sua loja4.3 Banners do PagSeguro 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.Guia de usabilidade 42

Divulgação do PagSeguro na sua loja4.3 Banners do PagSeguro 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.Guia de usabilidade 43

Divulgação do PagSeguro na sua loja4.4 Botões de pagamento e doações 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.jhtmlGuia de usabilidade 44

5 Para finalizarGuia de usabilidade 45

Para finalizar5.1 Blog do PagSeguro 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.brGuia de usabilidade 46

Para finalizar5.2 Faça testes na sua loja virtual para detectar possibilidades de melhora 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 47

http://www.cantinhodoblog.com.br	816
http://walter-matheus.blogspot.com.br	65
http://wmf-program.blogspot.com.br	29
http://guiacomprasegura.blogspot.com.br	17
http://www.riquinho.com	9
http://wmf-program.blogspot.com	7
http://riquinho.com	4
http://walterwmf.wordpress.com	3
http://guiacomprasegura.blogspot.pt	3
http://localhost	3
https://www.facebook.com	1
http://www.anderdesign.com.br	1
http://www.sgwhouse.antborrelli.com	1

Guia de Usabilidade PagSeguro

by PagSeguro UOL

Accessibility

Upload Details

Usage Rights

13 Embeds 959

Statistics