No celular, a prova social precisa dividir uma tela pequena com aquilo que o comprador veio fazer, então as regras são mais rígidas do que no desktop: um elemento visível de cada vez, curto, longe dos botões de adicionar ao carrinho e de pagar, e fácil de fechar com um toque. O widget do Provedly segue essas regras por padrão, e este artigo explica o raciocínio por trás de cada uma, para você ajustar as configurações sabendo o que está em jogo.
A limitação. Uma página de produto no desktop tem espaço nos cantos para uma notificação, espaço no topo para uma barra e espaço perto do botão de compra para um contador, tudo ao mesmo tempo. Um celular não tem. A tela tem algumas centenas de pixels de largura, o polegar cobre o terço inferior, e um elemento fixo no topo ou embaixo ocupa uma parte significativa do que sobra.
Por isso, todo elemento de prova social no celular compete diretamente com o seu próprio conteúdo. A pergunta de design não é "quanta prova social conseguimos mostrar", mas "qual é o mínimo que ainda cumpre o papel".
Regra 1: nunca empilhe
Widgets de desktop às vezes mostram duas ou três notificações empilhadas num canto. No celular, isso vira um muro. O Provedly mostra uma notificação de cada vez, e a próxima espera o intervalo, que é de 30 segundos por padrão. Se você também usa uma barra, mantenha-a na borda oposta à da notificação para que as duas nunca se sobreponham.
Se você roda uma barra de contagem regressiva durante uma promoção, considere reduzir o limite de notificações no celular durante esse período, para que a página não fique cercada por dois elementos em movimento. A segmentação por dispositivo permite aplicar ao celular uma configuração diferente da do desktop; a configuração é por widget.
Regra 2: seja breve
Uma notificação no desktop pode trazer imagem do produto, nome, cidade, título do produto, horário e a marca de verificado. No celular, a mesma notificação quebra em três linhas e cobre mais da página do que deveria.
No celular, mantenha a notificação no essencial: "Alguém em Austin comprou" e o título do produto, o horário e a marca "Compra verificada". A marca fica porque ela é o ponto principal; ela leva à página de verificação pública, e um comprador que toca nela deve receber as origens, as contagens e a última compra verificada, não uma versão cortada. Se os nomes aparecem como "Someone" numa loja Shopify, isso vem do programa Protected Customer Data; /pt/blog/shopify-someone-protected-customer-data explica.
Para as barras, escreva um texto separado para o celular. "30% de desconto em tudo termina em 06:14:22" cabe num celular. "Nossa maior promoção do ano termina em 06:14:22, use o cupom AUTUMN no checkout" não cabe, e a barra vai quebrar em duas linhas ou cortar justamente a parte que importava.
Regra 3: fique longe dos botões
O botão de adicionar ao carrinho numa página de produto no celular normalmente está no fluxo do conteúdo ou fixo na parte de baixo da tela. Uma notificação que aparece sobre ele, mesmo por seis segundos, é um obstáculo exatamente no pior momento.
Se o seu tema fixa o botão embaixo, posicione a notificação para que ela fique acima dessa barra em vez de cobri-la. A borda superior é uma alternativa que evita totalmente a zona do polegar, com o custo de ficar mais perto da navegação.
No checkout, a resposta é mais simples: exclua-o. /pt/blog/social-proof-on-checkout-page explica por quê.
Regra 4: um toque para fechar, e lembrar disso
Uma notificação que o comprador não consegue fechar é um sequestro. Toda notificação precisa de um botão de fechar grande o bastante para acertar com o polegar, e fechar uma deve significar nenhuma outra notificação pelo resto daquela sessão. O limite por sessão (5 por padrão) é um teto; o fechamento é um piso que o comprador controla.
As barras precisam do mesmo botão de fechar, e uma barra fechada deve continuar fechada durante a sessão, em vez de reaparecer no próximo carregamento de página.
Regra 5: respeite os sinais do próprio aparelho
- Movimento reduzido. Se o sistema operacional está com movimento reduzido ativado, um fade é mais gentil do que um deslize.
- Rolagem. Uma notificação que aparece enquanto o usuário está rolando a página tem mais chance de ser tocada por acidente. O atraso inicial de 3 segundos existe em parte por isso; ele dá tempo para a página se acomodar.
- Orientação. Celulares na horizontal têm ainda menos espaço vertical, então as mesmas regras de celular valem.
Configurações que vale mudar no celular
| Configuração | Padrão no desktop | Sugestão para celular |
|---|---|---|
| Atraso inicial | 3 s | 3 a 5 s |
| Tempo de exibição | 6 s | 5 a 6 s |
| Intervalo entre notificações | 30 s | 45 s ou mais |
| Limite por sessão | 5 | 2 ou 3 |
| Posição | Canto inferior | Longe de qualquer barra de botão fixa |
| Contador ao vivo | Exibido quando acima do mínimo | Exibido, mas no fluxo da página em vez de flutuante |
São sugestões, não regras, e o jeito honesto de decidir é testar. /pt/blog/ab-testing-social-proof-honestly descreve um teste dividido que mede pedidos concluídos em vez de cliques em notificações, o que é especialmente importante no celular, onde toques acidentais inflam os números de engajamento.
Desempenho em redes móveis. O script tem cerca de 6 KB compactado com gzip, carrega de forma assíncrona e é renderizado num Shadow DOM, então não bloqueia a página nem briga com o CSS do seu tema. Numa conexão lenta, o widget pode simplesmente não ter carregado quando um visitante que sai rápido vai embora; nesse caso, nada é exibido e nenhuma impressão é contada. Esse é o modo de falha correto. /pt/blog/theme-app-embed-vs-script-tag explica como o script é carregado especificamente no Shopify.
O que não fazer no celular.
- Notificações de largura total que cobrem o conteúdo.
- Notificações empilhadas.
- Uma barra e uma notificação na mesma borda.
- Notificações sem botão de fechar.
- Mostrar de novo, na próxima página, um elemento que foi fechado.
- Um contador flutuando sobre o botão de adicionar ao carrinho.
- Qualquer um dos itens acima no checkout.
Perguntas frequentes
Posso desligar o widget totalmente no celular?
Sim. A segmentação por dispositivo permite mostrar um widget só no desktop, só no celular ou nos dois. Algumas lojas com layouts muito apertados no celular usam notificações no desktop e só o contador no celular.
A marca "Compra verificada" ainda cabe numa notificação no celular?
Sim. É o único elemento que nunca é cortado, porque é o link para a página de verificação.
A notificação vai cobrir a barra fixa de adicionar ao carrinho do Shopify?
Não deveria. Posicione a notificação para que ela fique longe dessa barra, ou coloque-a na borda superior, e confira num celular de verdade antes de publicar.
Defina um limite baixo para o celular e confira a posição num celular de verdade, depois teste; o plano Free em /pt/pricing basta para começar.