Contexto
O carrinho é o ponto de revisão antes do checkout. Alterar quantidade e remover itens parecem tarefas simples, mas seletores inadequados, atualizações atrasadas e controles ambíguos podem produzir erros no pedido ou interromper o checkout.
Use controles de aumentar e diminuir para quantidades pequenas e frequentes. Quando quantidades maiores forem plausíveis, combine os botões com um campo numérico editável. Aplique a mudança ao carrinho e aos totais sem exigir um botão separado de atualização.
Quando a quantidade estiver em 1, permita que diminuir remova o item ou conduza de forma clara à remoção. Mantenha também uma ação explícita “Remover” quando ela melhorar a descoberta. Após remover, mostre confirmação e ofereça “Desfazer” ou acesso imediato ao item removido.
Valide limites mínimos, máximos, múltiplos, estoque e regras comerciais. Se houver processamento assíncrono, mostre estado de carregamento, evite ações duplicadas e preserve uma saída de recuperação em caso de falha.
Porque isso importa?
A pesquisa aplicada da Baymard encontrou dificuldade relevante em seletores baseados apenas em campo aberto ou lista suspensa. Atualizações imediatas, alvos adequados e recuperação após remoção reduzem fricção e ajudam a manter quantidade, subtotal e total coerentes.
Quando usar?
- Carrinhos com itens cuja quantidade pode ser alterada antes do checkout.
- Mini carrinhos ou listas de compra com edição direta.
- Fluxos de supermercado, recorrência ou compra múltipla em que ajustes de quantidade são frequentes.
- Interfaces em que remover um item é reversível e pode ser recuperado com desfazer.
Quando evitar?
- Não use somente stepper quando o intervalo possível for muito amplo; ofereça entrada direta validada.
- Não permita quantidades que violem estoque, múltiplos, peso mínimo ou regras do produto.
- Não trate remoções com consequências incomuns como uma exclusão trivial; explique o efeito sobre kits, descontos, assinaturas ou frete.
- Não use confirmação bloqueadora em toda remoção reversível.
Recomendações
Faça
- Atualize subtotal, total, descontos e frete de forma coerente após cada mudança confirmada.
- Selecione o valor atual quando a pessoa entrar no campo para substituir a quantidade.
- Valide limites e comunique feedback de sucesso ou erro no próprio contexto.
- Permita remover pelo caminho que as pessoas tentam naturalmente e mantenha recuperação por desfazer.
Evite
- Lista suspensa extensa para quantidades comuns.
- Campo livre sem limites, validação ou teclado numérico em dispositivos móveis.
- Botão “Atualizar carrinho” separado como único modo de confirmar a alteração.
- Desabilitar o botão de diminuir em 1 sem oferecer remoção clara.
- Remover silenciosamente ou deixar totais desatualizados.
