Uma fotografia de ambiente mostra um conjunto completo, um interior mobilado, uma bancada equipada. O visitante vê o todo e não sabe que produtos o compõem nem onde os encontrar. Os hotspots resolvem este problema, desde que sejam colocados e implementados corretamente.
O interesse comercial deste formato foi tratado à parte. Este artigo trata da implementação.
Onde colocar os pontos
Quatro regras, por ordem de importância.
Sobre o produto, não ao lado. Um ponto colocado no centro do objeto é compreendido de imediato. Um ponto a flutuar a alguns centímetros obriga a adivinhar o que designa.
Espaçados pelo menos o tamanho de um dedo. Dois pontos demasiado próximos são impossíveis de distinguir ao toque. Conte uma distância equivalente à zona tátil mínima entre dois centros.
Cinco a oito no máximo por imagem. Acima disso, a imagem torna-se uma sementeira de pastilhas e o visitante não abre nenhuma. Se o seu visual contém doze produtos, mostre oito e proponha a lista completa por baixo.
Sobre zonas legíveis. Um ponto numa zona muito escura ou muito texturada desaparece. Preveja um contorno ou uma sombra para garantir a visibilidade seja qual for o fundo.
O problema das coordenadas
Principal dificuldade técnica, e está subestimada.
Um ponto colocado a 340 píxeis da margem esquerda numa imagem de 1200 píxeis fica no sítio errado assim que a imagem é apresentada a 380 píxeis num telemóvel.
A regra: guarde as coordenadas em percentagem da largura e da altura, nunca em píxeis. O ponto fica no lugar seja qual for o tamanho de apresentação.
Segunda armadilha: o recorte. Se a sua imagem for recortada de forma diferente conforme o formato de ecrã, larga no computador e quadrada no telemóvel, os pontos calculados numa estão errados na outra.
Duas respostas possíveis. Usar a mesma imagem em todo o lado, apenas redimensionada. Ou definir conjuntos de coordenadas distintos por formato, o que duplica o trabalho de colocação.
A primeira solução é a mais simples e chega na grande maioria dos casos.
Lookbook Comprável: Shop the Look e Hotspots ClicáveisO lookbook shoppable que transforma as suas fotografias em vendas79,00€
O comportamento tátil
É o que decide o uso real, já que este formato é muito consultado no telemóvel.
No computador, passar o rato mostra uma pré-visualização e o clique leva ao produto. Num ecrã tátil não existe rato, e transpor diretamente esse comportamento produz uma interface inutilizável.
Três opções para o tátil.
Um toque abre a pré-visualização, um segundo leva ao produto. Comportamento comum, com o inconveniente de exigir dois gestos.
Um toque abre uma ficha compacta com imagem, nome, preço e botão de adição ao carrinho. O visitante pode comprar sem sair da imagem, o que é comercialmente o melhor comportamento.
Um toque leva diretamente ao produto. Rápido, e faz perder o contexto da imagem, o que é pena num conjunto completo.
A segunda opção é a que converte melhor, porque permite compor várias compras a partir da mesma imagem.
Duas precisões de implementação. A zona tátil tem de ser maior do que o ponto visível, pelo menos quarenta e quatro píxeis de lado. E o fecho da pré-visualização tem de ser possível com um toque no exterior, não só numa cruz pequena.
A acessibilidade
Ponto sistematicamente descurado neste formato e, no entanto, tratável em poucas linhas.
Uma imagem com zonas clicáveis levanta três questões.
A própria imagem tem de ter um texto alternativo a descrever a cena, não a lista dos produtos. «Sala com sofá cinzento, mesa de centro em carvalho e candeeiro de pé» chega.
Cada ponto tem de ser um elemento interativo com nome, com o nome do produto que designa. Um ponto sem descrição é um botão mudo para um leitor de ecrã.
A navegação por teclado tem de permitir chegar a cada ponto por uma ordem lógica e abrir a pré-visualização com a tecla de ativação.
Acrescente um elemento que resolve tudo: uma lista textual dos produtos sob a imagem. Serve os leitores de ecrã, quem usa teclado, os motores e os visitantes que preferem uma lista. É o complemento mais rentável deste dispositivo, e conta também para as exigências de acessibilidade do Decreto-Lei n.º 82/2022.
O que os motores veem
Os hotspots são construídos por scripts e o conteúdo deles não é necessariamente legível.
Três consequências práticas.
As ligações para os produtos têm de ser ligações verdadeiras no código, não elementos clicáveis geridos apenas por script. Caso contrário perde uma malha natural entre a sua página de ambiente e as suas fichas.
O texto alternativo da imagem leva a informação sobre a cena, o que ajuda a pesquisa de imagens.
A lista sob a imagem, referida acima, torna o conteúdo inteiramente legível sem depender da execução de scripts.
O desempenho
Uma imagem de lookbook é geralmente grande e pesada. Três precauções.
Servir a dimensão certa conforme o ecrã, com formatos adaptativos. Uma imagem de 2400 píxeis num telemóvel é desperdício puro.
Declarar as dimensões para reservar o espaço e evitar que a página salte quando a imagem chega.
Carregar os pontos depois da imagem, mas reservar a posição deles desde o início para que não apareçam deslocados.
Ponto complementar: se tiver várias imagens de lookbook na mesma página, carregue apenas a primeira de imediato e difira as seguintes.
O conteúdo da pré-visualização
Cinco elementos, não mais.
A miniatura do produto, que confirma visualmente do que se trata.
O nome, completo mas curto.
O preço, com a menção de indisponibilidade se for o caso.
O botão de adição ao carrinho, ou de escolha de tamanho se o produto tiver declinações.
A ligação para a ficha completa, para quem quiser saber mais.
Nos produtos com declinações, coloca-se a questão do tamanho. Duas abordagens: abrir um seletor na pré-visualização, ou remeter para a ficha. A primeira converte melhor nos produtos simples de escolher, a segunda evita erros nos produtos em que a escolha exige reflexão.
A manutenção
Aspeto muitas vezes descoberto ao fim de alguns meses.
Uma imagem de lookbook envelhece com o catálogo. Três situações a tratar.
O produto está esgotado. O ponto deve manter-se, com a menção de indisponibilidade e eventualmente um alerta de regresso a stock. Eliminá-lo deixa um buraco na imagem sem explicação.
O produto foi retirado definitivamente. Duas opções: retirar o ponto, ou redirecioná-lo para um produto equivalente com uma menção explícita.
A imagem inteira fica obsoleta. Uma coleção passada. Preveja uma data de fim por imagem, ou no mínimo uma revisão periódica.
Um controlo útil, a automatizar: listar os pontos que apontam para produtos inativos ou eliminados. Numa loja que acumulou vinte lookbooks, esta lista enche-se depressa.
Medir
Três indicadores.
A taxa de interação com os pontos, sobre as visualizações da imagem. Diz-lhe se o dispositivo é compreendido e notado.
O número de produtos diferentes abertos por sessão. É o interesse próprio do formato: um visitante que abre três está a compor um conjunto.
O valor médio do carrinho das sessões que passaram por um lookbook, comparado com as outras. É aí que o formato se justifica ou não.
O módulo Lookbook Comprável para PrestaShop monta este dispositivo no PrestaShop 8 e 9: colocação dos pontos em coordenadas relativas para se manterem certos em todos os tamanhos, ficha compacta com adição ao carrinho no toque, lista textual dos produtos sob a imagem para a acessibilidade e a indexação, e deteção dos pontos que apontam para produtos inativos.
