Como criar uma página de produto com imagem perfeita para o seu negócio de comércio eletrônico

O design da página do seu produto é uma das páginas mais importantes e complexas da sua loja. Considere todas as situações em que um cliente em potencial pode chegar à página de seu produto:

• Diretamente de um mecanismo de pesquisa
• Depois de navegar pela sua loja
• Depois de clicar em um anúncio direcionado

Como uma das etapas finais de uma venda, a página do seu produto deve ser:

• Otimizado para garantir que possa ser encontrado facilmente,
• Informativo o suficiente para inspirar confiança em seu cliente, e
• Bem projetado para fornecer uma ótima experiência de compra online

Há uma série de coisas que você pode fazer para melhorar as chances de as pessoas encontrarem a página do seu produto e aumentar a taxa de conversão assim que chegarem lá. Para dividir as coisas, criamos um guia de cinco partes para criar a página de produto perfeita.

Parte 1: Compreender os componentes do ótimo design de página de produto

Antes de mergulhar nos detalhes de como otimizar cada aspecto de sua página de produto, vamos dar uma olhada em um ótimo exemplo de design de página de produto para entender como cada um dos componentes se encaixa e por que eles são importantes.

A Uniqlo Australia tem um excelente exemplo de página de produto projetada com o usuário em mente. Aqui está uma captura de tela de uma de suas páginas de produto típicas com os principais componentes destacados:

Imediatamente, você notará que> 90% da página é dedicada a fornecer mais informações ao cliente sobre o produto que ele está visualizando e quase nenhum espaço é desperdiçado acima da dobra. Para dividir cada seção ainda mais:

• O título do produto e a visão geral são fáceis de localizar. Da mesma forma que edifícios e placas agem como pontos de referência quando você está visitando uma nova cidade, bons títulos ajudam os clientes a navegar em um novo site.
• Uma galeria de imagens mostrando o produto em vários ângulos, com um modelo e de perto.
• A imagem do produto está na frente e no centro. Uma foto nítida em um fundo branco mostra o produto na melhor luz. As imagens são o que o cliente procura, por isso vale a pena torná-las proeminentes.
• Uma descrição única e detalhada do produto que descreve o que é, o pensamento por trás de seu design e como ele resolve o problema do comprador.
• Avaliações sinceras de clientes que ajudam a aumentar a confiança em seu produto e marca.
• Os clientes sabem o que querem, mas podem não saber como encontrar. Mostrar produtos vistos recentemente ou relacionados os ajuda a restringir suas opções com mais rapidez e dá a você a oportunidade de mostrar produtos que você acha que eles podem preferir.
• Muitas opções e variantes em uma página significa que o cliente não precisa navegar por vários produtos.
• Assim que o cliente termina de selecionar suas opções, o botão “Adicionar ao carrinho” está esperando por ele.
• Não está pronto para se comprometer? Links para informações extras, como sua política de remessa e devolução, ajudam a responder a quaisquer perguntas remanescentes.

Sempre acho útil observar como outras lojas projetaram suas páginas de produtos. Você também não precisa necessariamente olhar para lojas do mesmo setor. Considere examinar quais estratégias os sites populares em outros setores estão adotando e que os clientes adoram, mas que não estão sendo utilizadas por seus concorrentes.

Na maioria das páginas de produtos de sucesso, você encontrará uma variação desses mesmos componentes:

• Descrições claras e exclusivas
• Ótima fotografia de produto
• Avaliações para inspirar confiança ao comprador
• Opções de personalização
• Limpar o botão “Adicionar ao carrinho”
• Informações adicionais de envio ou compra

Parte 2: responda a estas perguntas em sua cópia do produto

Uma boa cópia é crucial para a página do seu produto. Não apenas para seus clientes, mas também para SEO. Usar informações do fabricante ou do produto genérico é uma maneira infalível de garantir que seu produto não seja competitivo nas classificações de pesquisa.

Para criar uma ótima cópia da página do produto, existem algumas perguntas que você pode responder.

O que é isso?

A primeira coisa que sua cópia do produto precisa abordar é exatamente o que o produto é. Se o cliente está procurando um produto específico, essa é a primeira coisa que ele quer que seja atendido.

Para novos produtos, eles querem saber exatamente o que é e por que deveriam se interessar.

Como isso resolve o problema?

Qual problema seu produto resolve e como ele resolve? Esta é a pergunta fundamental que você precisa responder aos seus clientes.

Talvez seja tão simples quanto uma função utilitária, como um suéter que o mantém aquecido. Nesse caso, inclua os materiais ou processos de fabricação que ajudaram a tornar a solução do seu produto possível.

Ou talvez o problema esteja um pouco mais abaixo na hierarquia de necessidades e o produto apenas o ajude a parecer mais elegante. Que história ou processo por trás do produto o torna desejável de possuir?

Seja o que for, ao identificar o problema que seu produto resolve, você pode entender as perguntas que seu cliente faria a si mesmo ao comprar e adaptar sua cópia para respondê-las.

Por que seu produto?

Você estabeleceu que há um problema e como seu produto pode resolvê-lo. Agora, por que eles deveriam escolher seu produto em vez de um concorrente? Que medidas extras você deu para garantir que seu suéter fique mais quente? Que ingredientes você usa que ninguém mais usa? Esta é sua oportunidade de mostrar por que seu produto é especial.

Mesmo se você estiver vendendo produtos de outro fabricante, reservar um tempo para mostrar que entende o motivo pelo qual esse produto é melhor, mostra que você dedicou tempo para fazer sua pesquisa.

Do que isso é feito?

O detalhe final a adicionar é o que pode ser considerado metadado para o seu produto. Fornecer informações sobre os materiais ou ingredientes que compõem seus produtos ajuda a compensar a incapacidade dos compradores online de sentirem os produtos por si próprios.

Informações simples, como os ingredientes, e instruções básicas, como cuidados ou uso pretendido, podem ajudar o cliente a visualizar o produto e fornecer maior contexto aos mecanismos de pesquisa.

Parte 3: Crie ótimas imagens de produtos

As fotos do seu produto costumam ser o que o cliente vê primeiro na página, e eles podem instantaneamente colocar seu produto sob uma luz negativa ou positiva. Mas, além das primeiras impressões, as fotos do produto também ajudam a transmitir uma quantidade muito maior de detalhes do que seria possível apenas com texto, o que pode ajudar a vender o produto. A boa fotografia do produto pode até diminuir o número de recursos gastos no atendimento ao cliente e nas devoluções.

Então, aqui está o que você precisa fazer para criar ótimas imagens de produtos:

Comece com uma boa fotografia

Fotos mal iluminadas tiradas sem um equipamento decente podem ser uma bandeira vermelha para os clientes. Não perder tempo para tirar fotos decentes pode custar mais tempo quando se trata de edição.

Mas ... você não precisa gastar muito dinheiro para obter uma configuração fotográfica grande e pequena. O Guia A Better Lemonade Stand para Fotografia de Produto DIY lista como você pode começar a fazer fotografia de produto DIY com qualquer orçamento.

Seus requisitos básicos para uma configuração de fotografia de produto faça você mesmo devem incluir:

• Uma câmera ou smartphone de boa qualidade: você não precisa necessariamente de uma câmera DSLR para fotografar produtos. Seu smartphone produzirá fotos com resolução alta o suficiente e um número adequado de configurações para ajustar as condições de luz e abertura.
• Uma fonte de luz consistente: sua iluminação deve ajudar a iluminar os recursos mais importantes do seu produto e ocultar quaisquer sombras. A luz natural é ideal para começar, pois não é tão cara ou meticulosa quanto a iluminação artificial; no entanto, você também precisará usar uma luz de preenchimento ou espelho para distribuir uniformemente a fonte de luz de ambos os lados.
• Um pano de fundo branco : os planos de fundo brancos ajudam a desviar a luz de maneira uniforme, portanto, menos trabalho é necessário para corrigir o contraste. Também torna mais fácil editar a foto posteriormente usando a Varinha Mágica ou a ferramenta Caneta. Você pode usar um rolo de papel ou até mesmo uma folha branca o suficiente para começar.
• Uma superfície estável: para tirar suas fotos de maneira uniforme.
• Clipes: para manter o pano de fundo ou a iluminação no lugar.
• Um tripé: para segurar sua câmera. Ter um tripé não é uma necessidade, mas o ajudará a tirar fotos consistentes rapidamente para muitos produtos diferentes. Se você trabalha com uma operação fotográfica de um homem só, isso também pode tornar as coisas mais fáceis e poupar tempo na pós-produção.

Use várias imagens

Não é suficiente apenas usar uma única foto do produto. Os clientes desejam ver o produto de uma variedade de ângulos e perspectivas. A fotografia do seu produto pode mostrar os aspectos mais importantes do seu produto muito melhor do que qualquer descrição, por isso é importante adicionar quantas fotos forem necessárias para responder às perguntas do cliente.

Fotos diferentes também podem ter vários níveis de importância em diferentes estágios do processo de compra.

Quando novos clientes descobrem seu produto pela primeira vez, eles podem preferir ver imagens de outras pessoas usando o produto. Isso é particularmente importante para produtos - como o Tile - onde o produto em si não é suficiente para ilustrar o que faz, muito menos seus benefícios. Portanto, a empresa usa a fotografia do produto para ilustrar como e por que você a usaria:

Mas quando você se aprofunda na página real do produto, você encontra fotos mais detalhadas que focam no próprio produto. Quando os usuários acessam a página do produto, eles descobrem como o seu produto resolve seus problemas e ficam mais interessados ​​em saber como ele o faz bem.

Edite suas fotos

Depois de ter suas fotos, há algumas coisas que você precisa fazer para deixá-las prontas para o varejo. A tarefa mais óbvia é remover seus planos de fundo. Ter uma tela branca torna isso com a ferramenta Magic Wand ou Pen da Adobe Creative Cloud menos demorado.

Depois disso, você pode ajustar as configurações de contraste ou iluminação para melhorar a qualidade da imagem ou compensar quaisquer alterações na iluminação natural. No entanto, certifique-se de manter as condições de sua imagem consistentes; adicionar qualquer tipo de filtro não é recomendado.

Se você não tem acesso a um software de edição de fotos, pode usar ferramentas online como o Pixlr, que possui todas as ferramentas necessárias para fazer a edição básica de fotos. Serviços como o Pixc também podem atender às suas necessidades de edição de imagens, obtendo suas imagens não editadas e devolvendo fotos de produtos editadas profissionalmente.

Otimize suas imagens

A etapa final é garantir que suas fotos sejam otimizadas para velocidade e SEO.

Certifique-se de que os tamanhos das suas imagens sejam razoáveis. Shopify recomenda manter as imagens de seus produtos abaixo de 70kb. Isso pode ser conseguido sabendo-se em qual tipo de formato de arquivo salvar suas imagens. Como regra geral:

• GIFS são imagens de baixa qualidade, ideais para ícones e miniaturas. Eles também suportam animação, mas não são adequados para imagens grandes devido ao tamanho do arquivo e à baixa qualidade.
• SVG é um formato vetorial, o que significa que usa XML para descrever o conteúdo da imagem em formato de texto. Ele carregará ícones e imagens básicas quase que instantaneamente e em um tamanho de arquivo muito pequeno, mas as imagens normais serão muito complexas para usar com este formato.
• As imagens PNG são arquivos mais rápidos que suportam menos compactação, o que significa que manterão a qualidade da imagem original. Eles também suportam tons de cinza e transparência, mas o tamanho do arquivo geralmente é muito grande para fins de comércio eletrônico.
• JPG se refere a um método de compactação que permite alterar o grau de compactação. Normalmente, as imagens JPG podem reduzir o tamanho do arquivo em até 10x sem perdas perceptíveis de qualidade. Isso os torna ideais para a criação de imagens de produtos de baixa qualidade e tamanho de arquivo.

Além disso, certifique-se de nomear suas imagens com nomes de arquivo apropriados e usar títulos e tags alt que descrevam a imagem e o conteúdo com precisão. As tags Alt podem ser usadas para incluir palavras-chave notáveis, mas seu objetivo principal é ajudar na acessibilidade.

Parte 4: Mantenha a consistência da fotografia do seu produto

Grandes lojas de comércio eletrônico usam fotos de produtos que funcionam igualmente bem em uma página de produto individual ou em uma coleção de produtos semelhantes. Ter imagens consistentes facilita a pesquisa e a comparação de produtos e também pode criar consistência e profissionalismo em torno de sua marca.

Aqui estão as melhores maneiras de manter a consistência da fotografia do seu produto:

Fotografe seus produtos em um fundo branco

Uma das maneiras mais fáceis de produzir consistentemente ótimas fotos de produtos é utilizar um fundo branco. Em nossa postagem de fotografia anterior, descrevemos como você pode criar sua própria configuração de fotografia e tirar fotos de produtos de nível profissional.

Ter suas fotos em um fundo branco permite que você:

• Crie consistência em todos os seus produtos
• Aprimore certos aspectos do seu produto
• Edite facilmente suas fotos no futuro e
• Venda seus produtos em mercados como Google Shopping e Amazon que exigem um fundo branco.

Use as mesmas dimensões ou relação de aspecto

Nada se destaca mais na página de uma coleção do que imagens de tamanhos diferentes. A menos que você tenha definido especificamente a altura e a largura mínimas usando CSS, as páginas de sua coleção serão uma bagunça confusa. Os usuários terão que gastar seu precioso tempo de compras decifrando onde clicar.

Considere até mesmo uma página de coleção de produtos simples. É muito mais fácil navegar e comparar os produtos quadrados à direita em comparação com os produtos de vários tamanhos à esquerda?

Qual parece melhor?

Embora existam aplicativos e plug-ins disponíveis que irão ajustar suas imagens para você, a melhor abordagem é garantir que as imagens de seus produtos sejam sempre salvas com dimensões específicas.

Criar suas imagens com dimensões entre 1000px e 1600px no lado maior está ok, mas você também deve tentar manter todas as suas imagens quadradas. Imagens quadradas ficarão bem quer sejam horizontais ou verticais e manterão suas imagens consistentes em sua loja.

Utilize modelos de produto

Para conseguir uma loja de comércio eletrônico com aparência profissional, você precisa criar consistência nas imagens de seus produtos. Isso significa ter fotos que não apenas têm a mesma dimensão, mas também têm um estilo semelhante e um posicionamento consistente dentro da imagem.

Se você olhar para qualquer loja de comércio eletrônico de sucesso, verá que suas imagens se destacam por si mesmas, mas também se encaixam bem em uma coleção, pois estão todas posicionadas à mesma distância da câmera.

Garantir que seus produtos estejam posicionados de forma consistente em todas as suas fotos pode ser complicado. É aqui que os modelos de produtos podem ajudar.

Os modelos de produto garantem que seus produtos sejam posicionados de forma consistente na mesma área da foto e dimensionados corretamente. Eles podem ser particularmente importantes se você estiver incluindo algum texto nas imagens do produto.

Para criar um arquivo de modelo básico de produto usando o Photoshop:

• Crie um novo arquivo photoshop com a largura e altura desejadas. Verifique se o modo de cor está definido como RGB Color - 8 bits, a resolução é de pelo menos 72 pixels / polegada e o conteúdo do fundo é branco ou transparente.

• Em seguida, em “Exibir” no menu principal, selecione “Novo Guia”.

• Crie uma guia vertical de 10% e repita as etapas para que você tenha:
  • Guia 10% vertical e horizontal
  • Guia 90% vertical e horizontal
  • 50% guia vertical e horizontal

• Você deve acabar com isso:

• Agora você pode colocar sua imagem sobre o modelo. Os guias fornecem uma referência para saber se sua imagem está centralizada tanto horizontal quanto verticalmente. Isso também o ajudará a garantir que todos os seus produtos sejam colocados em uma escala consistente.

Agora, basta salvar seu arquivo como um documento normal do Photoshop (.PSD) e seus guias estarão lá esperando por você. O guia que você preparou permitirá que você carregue rapidamente quaisquer fotos editadas do produto e garantirá que tenham uma aparência consistente em todo o seu site.

Parte 5: Leve as fotos do seu produto para o próximo nível!

Se você tem ótimas fotos de produtos e excelentes descrições de produtos, tem os ingredientes para uma página de produto de alta conversão. Porém, ainda há algumas coisas finais que você pode fazer para melhorar as fotos do produto e garantir que tenha a melhor página possível.

Acelere suas imagens

As imagens podem ter um grande impacto nos tempos de carregamento da página. Se as páginas do seu produto demoram para carregar, os visitantes ficarão frustrados esperando que carreguem e visitarão menos delas. Na verdade, 40% dos visitantes abandonarão seu site se ele demorar mais de 3 segundos para carregar. Portanto, as páginas dos produtos devem ser carregadas rapidamente e fáceis de navegar. Aqui estão várias maneiras de otimizar suas imagens para conseguir isso.

Por um lado, use CSS para o plano de fundo da página em vez de uma imagem. Da mesma forma, CSS deve ser usado para criar bordas ao redor de imagens e elementos de botão.

Bibliotecas externas que carregam plug-ins ou galerias de imagens também podem diminuir o tempo de carregamento geral de sua página e devem ser evitadas para os elementos críticos de sua página.

Você também pode executar sua página por meio do Google PageSpeed ​​Insights para identificar maneiras de acelerar seu site para celular e desktop. O Google PageSpeed ​​informará quais imagens podem ser compactadas, como otimizá-las e quanto espaço você pode economizar com isso.

As ferramentas de desenvolvedor embutidas em seu navegador também podem identificar como sua página carrega arquivos e quais arquivos estão demorando muito.

Para fazer isso no Google Chrome:

• Clique com o botão direito na página que deseja analisar
• Selecione “Rede”
• Recarregue a página

Você pode classificar por “Tipo” de arquivo para ver quais imagens estão demorando mais para carregar, por “Tamanho” para ver os arquivos maiores, por “Tempo” para ver quanto tempo ou por “Status” para ver se algum arquivo não poderia ser carregado.

Além disso, certifique-se de que suas imagens sejam otimizadas para velocidade e SEO usando as dicas da Parte 3.

Otimize sua página para celular

É crucial passar algum tempo observando como as páginas de seus produtos são exibidas em vários dispositivos móveis. Ferramentas como o Hotjar permitem que você crie mapas de calor de como os usuários estão interagindo com suas páginas. E, se você tiver o Google Analytics instalado, poderá comparar as taxas de conversão de seu celular e desktop para determinar se sua experiência de compra no celular está à altura.

O Google Analytics pode fornecer um tesouro de dados úteis de comércio eletrônico sobre taxas de conversão e jornadas de compra, mas a maneira mais simples de experimentar a aparência de seu site em vários dispositivos é experimentá-lo você mesmo. Usando a Barra de Ferramentas do Dispositivo Chrome - ou Modo de Design Responsivo se estiver usando Firefox ou Safari - você pode ver a aparência da página do seu produto em qualquer dispositivo.

Algumas considerações para as suas páginas de produtos para celular:

• Faça suas imagens na frente e no centro. Informações extras devem estar disponíveis para os usuários quando eles quiserem, mas não devem atrapalhar as imagens.
• Acelere seu site, garantindo que suas imagens foram reduzidas em tamanho e você não está carregando muitos plug-ins de terceiros. Os tempos de carregamento são especialmente importantes para clientes que carregam em uma rede móvel.
• Considere o uso de uma barra de menu fixa para que o cliente sempre tenha acesso à barra de pesquisa, ao menu principal e ao carrinho.

Os clientes passarão menos tempo navegando e lendo conteúdo em dispositivos móveis, portanto, as imagens terão um papel particularmente importante para os compradores em dispositivos móveis. Certifique-se de que suas imagens estejam em destaque e carreguem rapidamente para garantir que você esteja fornecendo a melhor experiência de compra no celular.

Lembre-se de SEO

As páginas de produtos muitas vezes parecem ser um recurso subutilizado em termos de SEO. As páginas de seus produtos oferecem a oportunidade de destacar alguns de seus conteúdos mais valiosos e exclusivos, que podem ajudar sua loja a ter uma classificação mais elevada nas listagens de pesquisa. Na maioria das vezes, a página do produto é exatamente o que seu cliente deseja ver.

Para reforçar o SEO da sua página de produto:

• Elabore uma descrição de produto exclusiva que descreva claramente o que é seu produto e corresponda aos termos que seus clientes procuram.
• Otimize seus metadados de imagem incluindo tags ALT para descrever a imagem, tags de título apropriadas e nomes de arquivo relevantes.
• Considere adicionar vídeos à página do seu produto. Se adicionar ou não vídeos à sua página ajuda no SEO é um assunto em debate, mas eles podem ajudar a dar mais contexto aos seus produtos, o que pode melhorar suas conversões.

Otimizar imagens para zoom

Você notou como a maioria dos sites de comércio eletrônico permitem que você passe o mouse sobre a imagem para "ampliar" o produto? Isso se tornou um recurso quase natural. Esperamos obter uma versão maior do produto quando clicarmos ou passarmos o mouse sobre ele.

Ter esse recurso serve a um propósito importante. Ele permite que os clientes verifiquem a qualidade do produto em detalhes. Também ajuda a inspirar confiança na compra do cliente quando ele não consegue sentir ou ver fisicamente o produto. Às vezes, a qualidade da costura ou a tonalidade da cor podem fazer a diferença entre o cliente escolher seu produto e não o de um concorrente.

Então, como você tem certeza de que tem uma função de zoom funcionando? O segredo é saber usar os tamanhos de imagem corretos.

A maioria dos sites de comércio eletrônico terá vários “modelos”. Esses modelos irão redimensionar sua imagem para corresponder ao tamanho do modelo. Por exemplo, você pode ter:

• Um modelo de miniatura de 50px x 50px
• Um modelo de imagem de coleção de 100px x 100px
• Um modelo de imagem relacionado de 150px x 150px
• Um modelo de foto principal de 500px x 500px

A função de zoom normalmente funciona exibindo a imagem em seu tamanho original completo. Portanto, se você tiver uma imagem que salvou em 1000px x 1000px, ao passar o mouse sobre o modelo da foto principal (que tem 500px x 500px), ela será exibida com o dobro do tamanho.

Isso significa que, para ter uma função de zoom funcionando, você deve se certificar de que as dimensões da imagem são maiores do que o modelo principal da foto.

Se eles forem do mesmo tamanho, o usuário estará olhando para a mesma imagem quando eles passarem o mouse. Mas se eles forem muito grandes, o tamanho da imagem pode ter um impacto negativo no tempo de carregamento e ser muito grande para ser prático.

Dimensões de imagem entre 1000 px e 1.600 px são normalmente um bom meio-termo entre o tamanho do arquivo e ter uma imagem que pode fornecer detalhes suficientes em close-up.

Conclusão

Nestes cinco capítulos, conseguimos cobrir amplamente as áreas mais importantes que você precisa levar em consideração ao elaborar as páginas de seus produtos. Se você seguir essas diretrizes, terá uma página de produto que oferece uma ótima experiência de compra para seus clientes e desfruta de altas taxas de conversão. Agora que você tem um guia, cabe a você sair e criar uma página de produto vencedora que gere vendas para sua loja de comércio eletrônico.