Contexto
Em um produto com variações, a pessoa não escolhe apenas um produto genérico: ela escolhe uma combinação. Uma camiseta pode ter tamanho e cor; um tênis pode ter tamanho, cor e largura. A disponibilidade pertence à combinação, e não necessariamente a cada atributo isolado.
O seletor precisa responder rapidamente a três perguntas: quais decisões existem, quais valores estão disponíveis e o que muda depois da escolha. A escolha do controle depende do número de valores, da frequência da decisão, do espaço disponível e do impacto daquela escolha na compra.
Use um controle separado para cada dimensão de variação relevante. Quando houver poucas opções comparáveis, mostre diretamente as escolhas mais importantes para que a pessoa consiga avaliá-las sem abrir menus desnecessários.
Recalcule a disponibilidade dependente depois de cada seleção. A combinação escolhida deve atualizar imagem, preço, estoque, entrega e ação de compra sempre que esses dados mudarem.
Use um select ou uma busca para conjuntos grandes ou decisões secundárias, preservando a visibilidade das escolhas centrais. Quando tamanho e ajuste forem relevantes, ofereça um guia de medidas que possa ser consultado sem apagar ou perder a seleção atual.
Em listas de produtos, agrupe variantes do mesmo item quando isso ajudar a leitura do catálogo e evitar a repetição de produtos equivalentes.
Porque isso importa?
Quando a relação entre cor, tamanho e disponibilidade fica escondida, a pessoa precisa tentar combinações, memorizar estados e verificar repetidamente se o item pode ser comprado. A pesquisa da Baymard observou esse tipo de fricção em páginas de produto e em fluxos de vestuário. A recomendação reduz incerteza, mas deve ser adaptada ao catálogo e não é uma regra universal para qualquer produto.
Quando usar?
- Quando uma variação muda o item efetivamente comprado.
- Quando a disponibilidade varia entre combinações.
- Quando poucos valores precisam ser comparados antes da decisão.
- Quando imagem, preço ou entrega mudam conforme a variação.
- Quando uma lista mistura variantes do mesmo produto.
Quando evitar?
- Um select genérico que esconde escolhas centrais.
- Swatches sem nome acessível ou que dependem apenas de cor.
- Valores indisponíveis apresentados como ativos.
- Desabilitar opções sem explicar o estado ou oferecer próximo passo.
- Atualizar o seletor sem atualizar o restante da página.
- Escolher por padrão uma combinação indisponível.
Recomendações
Faça
- Use rótulo visível para cada grupo.
- Preserve a seleção ao abrir e fechar o guia de tamanhos.
- Diferencie selecionado, disponível, indisponível e carregando.
- Informe o estado da combinação antes de habilitar a compra.
- Inclua nome acessível para cada swatch.
- Teste no mobile, por teclado e com tecnologia assistiva.
Evite
- Fazer a pessoa tentar combinações inválidas para descobrir a disponibilidade.
- Usar somente linha, cor ou ícone para comunicar um estado.
- Esconder valores críticos em menus sem necessidade contextual.
- Limpar silenciosamente uma escolha anterior.
- Usar nomes ambíguos como “opção” quando “cor” ou “tamanho” forem mais claros.
