Catálogo de Produtos, Detalhes do Produto e Adição ao Carrinho

Objetivo

Esta seção define os requisitos mínimos para a navegação no catálogo de produtos, visualização de informações detalhadas e adição de itens ao carrinho. O fluxo deve garantir clareza na organização dos produtos, facilidade de interação e transparência nos preços.

Diretrizes

• A navegação deve ser fluida e acessível, com foco em conversões rápidas e visuais de produto claros.

• As imagens devem seguir diretrizes de contraste, nitidez e legibilidade em dispositivos móveis.

• Este fluxo deve estar em conformidade com as melhores práticas de usabilidade para e-commerce móvel e ambientes de venda assistida.

---

Tela Principal do Catálogo

01 - Filtros de categoria

Deve apresentar opções de filtro visíveis (ex.: Todos, Camisas, Calçados), com o filtro ativo claramente destacado.

02 - Lista de produtos

Cada produto deve exibir: imagem, nome, categoria, preço e estoque (ícone e quantidade).

03 - Botão de adicionar ao carrinho

O ícone do carrinho deve estar visível no canto superior de cada item e permitir a adição rápida ao carrinho sem sair da lista.

Obrigatório: A categorização dos produtos deve ser clara e funcional, com indicadores visíveis de estoque e preço.

Recomendado: Fornecer feedback visual imediato ao adicionar um produto (ex.: animação do carrinho).

---

Tela de Detalhes do Produto

04 - Imagem ampliada do produto

Deve ser visualmente destacada e em alta resolução.

05 - Informações detalhadas

Deve incluir:

• Nome do produto

• Preço

• Estoque disponível

• Descrição funcional do produto (clara e objetiva)

• Seletor de quantidade com botões +/−

Obrigatório: Todas as informações relevantes do produto devem ser exibidas antes da compra.

Recomendado: Utilizar linguagem simples e funcional, com foco em benefícios e usabilidade.

---

Ação de Adicionar ao Carrinho

06 - Botão “Adicionar ao carrinho”

Deve estar claramente visível e só ser habilitado quando a quantidade for maior que zero.

Obrigatório: Após a adição, redirecionar o usuário para o carrinho ou exibir uma confirmação não intrusiva.

Recomendado: Exibir um resumo rápido (ex.: “2 itens adicionados”).

---

Tela do Carrinho

07 - Lista de itens no carrinho

Cada item deve incluir: imagem, nome, categoria, preço, seletor de quantidade e opção de remoção.

O resumo do pedido deve incluir:

• Subtotal

• Desconto (se aplicável)

• Total final com destaque visual

• Botão “Forma de pagamento”

• Deve ser o próximo passo claro e visualmente destacado.

Obrigatório: O carrinho deve permitir uma revisão completa antes de prosseguir para o pagamento.

Recomendado: Fornecer feedback claro ao modificar quantidades ou remover itens.

---

Mensagens Obrigatórias

• Quando um produto for adicionado:

Produto adicionado ao carrinho com sucesso.

• Quando o estoque for insuficiente:

A quantidade selecionada excede o estoque disponível. Por favor, ajuste e tente novamente.

---

Comportamentos Esperados

• Cada produto adicionado deve atualizar a contagem total de itens em tempo real.

• A tela de detalhes do produto deve ser acessível tanto a partir do catálogo quanto das recomendações personalizadas.

• Os campos de quantidade devem bloquear valores negativos ou inválidos.

• O botão “Forma de pagamento” deve levar ao fluxo de checkout e Tap to Pay.