Créer des filtres couleur, taille et prix dynamiques sur PrestaShop sans recharger la page
Conversão e UX

Criar filtros de cor, tamanho e preço dinâmicos no PrestaShop sem recarregar a página

Num catálogo com mais de cem referências, os filtros não são um conforto mas a condição de acesso aos produtos. A sua implementação coloca três questões: que atributos tornar filtráveis, como aguentar a carga num catálogo grande, e como os tornar utilizáveis num ecrã de telemóvel.

As consequências destes filtros no SEO são assunto à parte, tratado separadamente.

Que atributos tornar filtráveis

A tentação é propor tudo. É o erro mais frequente e o mais caro, tanto em desempenho como em legibilidade.

Três critérios para reter um filtro.

Está preenchido em pelo menos 80 % dos produtos da categoria. Um filtro de material preenchido em trinta produtos em duzentos produz seleções enganadoras: o cliente julga ter visto todo o corredor quando viu apenas o que estava documentado.

Discrimina realmente. Um atributo em que 95 % dos produtos partilham o mesmo valor não filtra nada. Olhe para a distribuição dos valores antes de decidir.

Corresponde a um critério de escolha. O cliente filtra pelo que o ajuda a decidir, não pelo que o seu fornecedor achou útil documentar. O peso embalado, a referência interna ou o código pautal não têm nada que fazer num painel de filtros.

Uma referência: seis a oito filtros por categoria cobrem quase todas as necessidades. Acima disso, o painel torna-se um formulário.

Os filtros variam por categoria

Ponto de conceção muitas vezes descurado, que faz a diferença entre um painel útil e um painel genérico.

O número de pé faz sentido no calçado, nenhum nos acessórios. A potência faz sentido nas ferramentas elétricas, nenhum nos parafusos.

Um painel de filtros idêntico em toda a loja mostra portanto em todo o lado critérios sem valor, o que afoga os critérios pertinentes. A configuração tem de ser feita por categoria, com um conjunto de filtros herdado e substituível.

Corolário prático: os valores propostos têm de limitar-se aos presentes na categoria atual. Propor trinta cores quando a categoria só tem quatro é um erro de implementação comum.

Filtros por Facetas AJAX PrestaShopA navegação por facetas que filtra depressa e indexa como deve ser99,00€

Os tipos de filtro

Quatro formas, cada uma adequada a um tipo de dado.

As caixas de seleção para os valores discretos: marca, material, tamanho. Permitem a seleção múltipla, que é o comportamento esperado.

As bolinhas de cor para as cores, evidentemente, com o nome em dica. Uma lista textual de cores é nitidamente menos eficaz.

O cursor de preço, de dupla pega. Duas precauções: mostrar os limites reais da categoria em vez de valores fixos, e permitir a introdução direta dos montantes para quem sabe o que procura.

Os interruptores para os critérios binários: em stock, em promoção, entrega rápida. Colocam-se no topo do painel porque são os mais usados.

O contador de resultados

Elemento decisivo para o uso, e coloca uma dificuldade técnica real.

Mostrar o número de produtos atrás de cada valor evita que o cliente selecione uma combinação vazia. É o que fazem todas as interfaces de filtragem conseguidas.

O custo é real: calcular estes contadores exige tantas consultas de agregação quantos os valores apresentados, em cada mudança de seleção.

Três abordagens consoante o tamanho do catálogo. Num catálogo pequeno, o cálculo direto passa sem otimização. Num catálogo médio, uma única consulta de agregação substitui as consultas por valor. Num catálogo grande, um índice dedicado ou um motor de pesquisa externo torna-se necessário.

Regra de apresentação complementar: um valor com zero resultados acinzenta-se em vez de desaparecer. O desaparecimento faz saltar a lista e desorienta.

O desempenho em catálogo grande

Três estrangulamentos, pela ordem em que aparecem.

As consultas de filtragem. Um filtro sobre vários atributos produz junções múltiplas sobre as tabelas de atributos e de características. É o que põe uma base de dados de joelhos nas categorias grandes.

O cálculo dos contadores, referido acima, que custa muitas vezes mais do que a própria filtragem.

A contagem total, necessária à paginação. Numa seleção larga, incide sobre dezenas de milhares de linhas.

Duas alavancas antes de pensar numa reformulação. Uma tabela de índice dedicada que pré-calcula as correspondências produto-valor, atualizada em cada alteração de catálogo. E uma cache por combinação, de duração curta, que absorve as seleções mais frequentes.

Ponto de método: meça antes de otimizar. Cronometre o tempo de resposta de uma filtragem na sua maior categoria, com três filtros ativos. Se passar de um segundo, o problema é real e localizável.

O comportamento em mobile

É o que decide o uso real, já que a maioria do tráfego passa por aí.

O painel lateral do computador não tem equivalente em mobile. A solução que funciona é um painel em ecrã inteiro, aberto por um botão, com os filtros empilhados na vertical.

Cinco regras de implementação.

O botão de abertura continua acessível durante o deslocamento, em posição fixa, com o número de filtros ativos à vista.

A aplicação é explícita. Em mobile, filtrar a cada seleção produz recarregamentos incessantes. O visitante assinala o que quer, e depois valida com um botão que mostra o número de resultados esperados.

Os filtros ativos ficam visíveis depois de fechar o painel, sob a forma de etiquetas removíveis num gesto.

A reinicialização está acessível sem voltar a abrir o painel.

O painel fecha-se no retrocesso, sem sair da página. Um painel em ecrã inteiro que prende o botão de retrocesso é uma fricção importante.

O que parte em produção

Quatro situações a verificar depois da implementação.

Os filtros sobre as variantes. Um produto disponível em vermelho tamanho S e em azul tamanho L deve aparecer numa seleção vermelho mais tamanho L? Não. A filtragem tem de incidir sobre as combinações existentes, não sobre o cruzamento dos atributos do produto.

A disponibilidade. Um filtro «em stock» que se baseia na quantidade do produto sem ter em conta as variantes produz falsos positivos.

A ordenação depois da filtragem. Tem de manter-se quando o visitante altera um filtro, senão volta ao princípio em cada ajuste.

As categorias vazias depois da filtragem. Preveja uma mensagem útil em vez de uma página em branco: proponha retirar o último filtro aplicado, que é quase sempre o que esvaziou a seleção.

Medir

Três indicadores.

A taxa de utilização dos filtros por categoria. Uma categoria onde ninguém filtra ou é demasiado pequena para precisar disso, ou tem filtros desadequados.

A ordenação dos filtros usados. Vai descobrir quase sempre que três filtros concentram o essencial dos usos, o que justifica subí-los ao topo e ponderar a eliminação dos outros.

A taxa de conversão das sessões com filtragem, comparada com as sessões sem. Um visitante que filtra tem uma intenção mais precisa, e o desvio mede o valor do dispositivo.

O módulo Filtros por Facetas AJAX para PrestaShop implementa este dispositivo no PrestaShop 8 e 9: configuração dos atributos filtráveis por categoria, filtragem sem recarregamento com contadores de resultados, índice dedicado para os catálogos grandes e painel em ecrã inteiro com validação explícita em mobile.

Continuar a ler

Artigos relacionados