Uma imagem pode tornar uma opção de produto mais fácil de entender, mas apenas se o comprador puder dizer o que ela representa e se está selecionada. Uma linha de quadrados de cores atraentes não é uma melhoria quando os clientes não conseguem distinguir duas tonalidades semelhantes ou descobrir qual tamanho está indisponível.
Improve Options Design PRO pode apresentar valores de opções nativas do OpenCart como imagens ou texto e usar imagens de opções configuradas globalmente ou específicas do produto. Use essas capacidades para explicar a escolha, depois valide o resultado nos dispositivos que seus clientes usam.
Escolha imagens para diferenças visuais
Imagens são úteis quando a diferença é genuinamente visual: tecido, acabamento, padrão ou cor. O texto pode ser mais claro para medidas, contagens de pacotes ou uma especificação técnica. Não force cada opção na mesma apresentação apenas para fazer uma página de produto parecer consistente.
| Opção | Apresentação útil | Informações a reter |
|---|---|---|
| Acabamento do tecido | Imagens de close-up consistentes | Nome de finalização legível |
| Tamanho da camisa | Escolhas de texto | Etiqueta de tamanho e link do guia de tamanhos |
| Capacidade do dispositivo | Escolhas de texto | Capacidade e qualquer diferença de preço |
| Cor do Produto | Imagem ou amostra mais texto | Nome da cor e estado selecionado |
Use cortes, iluminação e escala consistentes. Uma miniatura maior ou mais brilhante não deve acidentalmente implicar que um valor está selecionado. Faça o estado selecionado distinto dos estados de hover, foco e indisponível.
Decida onde as imagens de opções são gerenciadas
Uma imagem global pode servir para um valor de opção partilhado utilizado em vários produtos. Uma imagem específica do produto é mais adequada quando o mesmo rótulo tem um aspeto diferente em diferentes artigos. “Carvalho” numa mesa não deve necessariamente reutilizar a imagem escolhida para um acabamento de armário não relacionado.
Escolha uma regra de propriedade e documente-a. Se uma imagem de opção global mudar, revise produtos representativos que a herdam. Para imagens específicas de produtos, mantenha uma lista de verificação simples para que produtos recém-adicionados não voltem silenciosamente a uma miniatura genérica não útil.
Mantenha rótulos e estados de seleção claros
Não comunique disponibilidade ou seleção apenas por meio de cor. Mantenha rótulos de texto legíveis e um indicador de foco visível, e teste se a navegação por teclado alcança cada escolha interativa. Verifique a saída real do tema e qualquer personalização de integração; não assuma que adicionar uma imagem fornece automaticamente um comportamento acessível.
Após selecionar uma opção, o comprador deve ser capaz de responder a três perguntas: qual valor foi selecionado, se isso altera o total e se está disponível. Confirme se essas respostas permanecem visíveis quando o ponteiro se afasta ou a página é rolada.
Teste o comportamento de toque sem depender do hover
O zoom ao passar o mouse da extensão pode ajudar os usuários de desktop a inspecionar uma imagem de opção. Visitantes móveis não têm um hover persistente, então informações essenciais devem permanecer disponíveis sem isso. Teste um dispositivo de toque real, incluindo uma tela pequena e um telefone maior.
- Toque em uma opção e verifique se a seleção acontece de forma previsível.
- Mudar sua seleção e confirmar que apenas o valor pretendido permanece ativo.
- Role pela área de opções sem selecionar acidentalmente um valor diferente.
- Use o teclado ou um método de navegação assistiva para inspecionar os mesmos controles.
- Adicione o produto a um carrinho de teste e verifique se os valores escolhidos estão registrados corretamente.
Distinguir apresentação de inventário variante
Fazer uma opção nativa parecer melhor é uma tarefa diferente de dar a uma combinação de tamanho e cor seu próprio SKU e estoque. Se você precisar de dados a nível de combinação, revise Options combinations e o fluxo de trabalho de variante-estoque. Confirme como ambas as extensões interagem antes de implantá-las juntas.
O mesmo princípio se aplica a extensões de preço e galeria. Faça um inventário de todos os módulos que alteram a área de opções e teste a configuração completa, especialmente em um tema personalizado. Um teste bem-sucedido no tema padrão não prova que seu modelo de produto personalizado se comporta de forma idêntica.
Revise toda a página do produto após a alteração
Mantenha os arquivos de imagem adequadamente dimensionados para sua área de exibição e evite carregar fotografias em resolução total para amostras pequenas. Verifique a estabilidade do layout enquanto as imagens carregam e certifique-se de que a área de opções não empurre as informações de compra principais para uma ordem confusa. Nossa auditoria da página do produto móvel conecta essas verificações com o restante da jornada de compra.
Avalie o resultado com comportamento observável: menos escolhas pouco claras em testes de usabilidade, opções de carrinho registradas corretamente e um layout que permanece utilizável em telas pequenas. Não prometa um aumento de conversão a partir de uma mudança visual antes de medi-lo em sua própria loja.