Um cliente que olha para uma fotografia de sofá sobre fundo branco vê um sofá. O mesmo sofá numa sala, com o tapete, o candeeiro e as almofadas, mostra-lhe um resultado. O Shop the Look transforma essa encenação num percurso de compra: cada objeto visível torna-se clicável.
A mecânica é simples. O seu sucesso depende de detalhes de execução que só se veem uma vez em produção.
Onde funciona
Três famílias prestam-se realmente a isto.
A moda e o acessório, caso de origem. O conjunto completo responde a uma pergunta que a ficha de produto não trata: com que usar esta peça.
A decoração e o mobiliário. A compra faz-se por ambiente, quase nunca por produto isolado. É o setor em que o carrinho médio mais mexe.
A bricolagem e o jardim em situação. Um terraço preparado, uma oficina equipada, um canto de escritório. O visitante descobre produtos complementares que não teria procurado.
O dispositivo é em contrapartida inútil num catálogo técnico em que a compra é unitária e especificada de antemão: peças sobressalentes, consumíveis, produtos profissionais por referência.
A fotografia, primeira restrição
O resultado depende mais da imagem do que do módulo.
Cada produto deve ser identificável. Um objeto meio escondido atrás de outro produzirá um hotspot incompreensível. Componha a cena a pensar nas zonas clicáveis, não apenas na estética.
A resolução deve permitir o zoom, em particular em mobile, onde o visitante amplia para distinguir um detalhe antes de clicar.
O enquadramento deve deixar espaço. Um produto colado ao bordo da imagem não pode receber um hotspot sem que a infobolha saia do quadro.
Preveja também o formato: uma imagem muito larga funciona mal em mobile, uma imagem quadrada desperdiça espaço em desktop. Duas versões da mesma cena é a solução mais limpa.
Lookbook Comprável: Shop the Look e Hotspots ClicáveisO lookbook shoppable que transforma as suas fotografias em vendas79,00€
Colocar os hotspots
Quatro regras saídas do uso real.
- Cinco a sete no máximo por imagem. Para lá disso, a cena torna-se uma sementeira de pastilhas e o visitante não abre nenhuma.
- Um tamanho tátil suficiente. O ponto deve continuar atingível ao dedo, o que supõe uma zona de cerca de quarenta pixels de lado em mobile, seja qual for o tamanho visual da pastilha.
- Um ponto por produto, na parte mais reconhecível. Numa cadeira, o assento em vez de um pé.
- Uma indicação visual de clicabilidade. Uma pastilha estática passa despercebida. Uma ligeira animação à chegada à imagem, e depois um estado de repouso discreto, resolve este ponto.
O conteúdo do hotspot
O que se abre ao clique determina a conversão. Quatro elementos, não mais.
O nome do produto, o seu preço, a sua disponibilidade, e uma ação. Essa ação deve ser a adição direta ao carrinho quando o produto não tem variação, e uma ligação para a ficha quando ainda é preciso escolher um tamanho ou uma cor.
Forçar uma passagem pela ficha para um produto sem opção acrescenta uma etapa inútil. Propor uma adição direta num produto que exige um tamanho produz encomendas erradas e devoluções.
O comportamento em mobile
É aqui que a maioria das implementações falha. Em mobile, a infobolha que se abre ao lado do hotspot cobre a imagem e sai muitas vezes do ecrã.
O comportamento que funciona: ao clique num hotspot, uma carta de produto aparece no fundo do ecrã, em toda a largura, sem esconder a zona tocada. O visitante mantém o contexto visual e pode encadear para outro ponto sem fechar.
Preveja também uma exibição de recurso. Sob a imagem, uma lista clássica dos produtos presentes na cena, sempre visível. Serve aos visitantes que não entendem a mecânica, e resolve dois outros problemas.
Acessibilidade e referenciamento
Os dois tratam-se com a mesma lista.
Uma imagem com hotspots em sobreposição não é explorável por um leitor de ecrã, e os produtos não são ligações indexáveis se o módulo os carrega em JavaScript ao clique. A lista HTML sob a imagem, com uma ligação para cada ficha, torna a cena acessível e faz existir o maillage.
Acrescente um texto alternativo descritivo na imagem, que descreve a cena e não o nome do ficheiro.
Onde colocar os looks
Três lugares, complementares.
Uma página dedicada que agrupa todas as cenas, estruturada por universo ou por estação. Partilha-se bem e posiciona-se em pesquisas de inspiração.
Em topo de categoria, uma ou duas cenas do universo em causa. É o lugar que melhor converte, porque o visitante já lá chega em fase de pesquisa.
Na ficha de produto, um bloco « visto nestes ambientes » que remete para as cenas que contêm esse produto. Esse maillage inverso é o que faz subir o carrinho médio.
Medir
Três indicadores. A taxa de interação, parte dos visitantes que abrem pelo menos um hotspot, que lhe diz se a mecânica é entendida. A taxa de adição a partir dos hotspots. E o carrinho médio das sessões que viram uma cena, comparado com as outras: é aí que o dispositivo se justifica ou não, porque custa tempo de produção fotográfica.
O módulo Lookbook Comprável e Shop the Look gere esta mecânica no PrestaShop 8 e 9: colocação dos hotspots na imagem, carta de produto com adição direta ao carrinho, comportamento mobile adaptado, lista HTML dos produtos para a acessibilidade e bloco inverso nas fichas em causa.