Neste post vamos avaliar a usabilidade e a navegação do detalhe de produto dos principais varejistas de calçados online no Brasil. Vamos restringir a observação dos elementos visíveis no primeiro scroll de rolagem para facilitar a comparação, e finalmente apresentar uma consideração sobre as melhores práticas.
Netshoes (www.netshoes.com.br)
O detalhe de produto da Netshoes é bem resolvido, todos os elementos convivem em harmonia, apesar disso a barra lateral esquerda poderia ser retirada para dar mais destaque ao produto e deixá-la mais clean. O Produto esta exposto em 4 posições, alguns deles contam com vídeos, possui ferramenta de zoom e ampliação da imagem. A área para comentário é sutil, e os selos são perceptíveis porém pouco afetam a navegação. Além disso, possuiu um passo-a-passo que ajuda na usabilidade e auxilia a conversão.
Preço: Não tem muito destaque e confunde, o valor do desconto com o valor do produto, além de não mostrar claramente as condições de parcelamento.
Cor: A Netshoes exibem a cor com imagens e não fotos dos produtos, o que pode confundir os clientes uma vez que a representação das cores pode não ser fiel ao produto em questão.
Tamanho: Os tamanhos disponíveis são claros e, quando o produto não esta disponível um “x” vermelho identifica esta situação.
Call to Action: O Botão de comprar é vermelho, e tem destaque, mas não trás a instrução de adicionar ao carrinho.
Mídias Sociais: Possui as três principais ferramentas para compartilhar (Orkut/ Twitter e Facebook), além do botão do like.
CompreTenis (www.compretenis.com.br)
O detalhe de produto da CompreTenis, apesar de ser clean, peca pela falta de alguns itens como Mídias Sociais e Passo-a-Passo para auxiliar a conversão. O Produto esta exposto em 4 posições, possui a ferramenta de zoom, porém não possui vídeos e ampliação da imagem. As imagens também não são trocadas com mouseover, o que facilitaria a visualização do produto. A área para comentário é sutil, e os selos são perceptíveis porém pouco afetam a navegação.
Preço: O Preço parcelado possui mais destaque que o preço cheio do produto, e há um botão que exibe as formas e condições de parcelamento.
Cor: As cores são exibidas com thumbs dos próprios produtos o que facilita o cliente encontrar o produto que deseja.
Tamanho: A única diferença entre os tamanhos disponíveis e os não disponíveis é a cor, o que pode confundir a navegação.
Call to Action: O Botão de comprar é verde limão, tem grande destaque, e trás a instrução de adicionar ao carrinho, o que auxilia a conversão.
Mídias Sociais: Não possui nenhuma forma de mídia social no Detalhe do Produto.
Centauro (www.centauro.com.br)
O site da Centauro é o único dentre os avaliados que não esta travado em 1024 pixels. Apesar de ser contrario as práticas do mercado, isso permite a Centauro ter a maior imagem do produto sem Zoom de todos os players Analisados. Também não exibe um Passo-a-Passo para auxiliar a conversão.
O Produto esta exposto em 4 posições, e conta com ferramenta de zoom e ampliação da imagem.
Existe um destaque demasiado para descrição do produto em uma área de grande visualização, o que é ruim para conversão.
Preço: O preço é difícil de encontrar e ressalta o preço parcelado, apesar de não mostrar claramente as condições de pagamento.
Cor: Da mesma forma que a Netshoes, a Centauro exibe a cor com imagens e não fotos dos produtos, o que pode confundir os clientes.
Tamanho: Os tamanhos disponíveis estão claros, e quando o produto não esta disponível um “x” vermelho identifica esta situação.
Call to Action: O Botão de comprar é vermelho, tem pouco destaque, e não aparece no primeiro scroll, e também não trás a instrução de adicionar ao carrinho .
Mídias Sociais: Possui as três principais ferramentas para compartilhar (Orkut/ Twitter e Facebook), mas não possui o botão do like.
Passarela (www.passarela.com.br)
A passarela possui um detalhe de produto com layout cheio de vazios. Não possui barra lateral, porém o produto não esta em destaque, e uma faixa branca é deixada na lateral direita. Também não exibe um Passo-a-Passo para auxiliar a conversão.
O Produto esta exposto em 6 posições, possui ferramenta de zoom e ampliação da imagem. Interessante notar que o produto esta exposto de lado, e não na diagonal como na maior parte dos players.
A área para comentário é sutil, e os selos são perceptíveis porém pouco afetam a navegação.
Preço: O destaque para o preço a vista é notável, e trás o parcelamento de forma sutil, mas não mostrar claramente as condições de pagamento.
Cor: As cores são exibidas com thumbs dos próprios produtos o que facilita o cliente encontrar o produto que deseja.
Tamanho: A única diferença entre os tamanhos disponíveis e os não disponíveis é a cor, o que pode confundir a navegação.
Call to Action: O Botão de comprar é vermelho, e tem destaque, mas não trás a instrução de adicionar ao carrinho.
Mídias Sociais: Possui as três principais ferramentas para compartilhar (Orkut/ Twitter e Facebook), mas não possui o botão do like.
Anita Online (www.anitaonline.com.br)
O detalhe de produto da Anita Online é bem resolvido, todos os elementos convivem em harmonia, apesar disso o botão de envie para um amigo poderia ser retirada para dar mais destaque ao botão de comprar e deixá-la mais clean. Também não exibe um Passo-a-Passo para auxiliar a conversão.
O Produto esta exposto em 4 posições, alguns deles contam com vídeos, possui ferramenta de zoom e ampliação da imagem.
A área para comentário é sutil, e os selos são perceptíveis porém pouco afetam a navegação. Destaque para o selo de site blindado, que auxilia a conversão, pois transmite segurança para os clientes. A Anita também exibe um selo, ao lado do botão comprar informando que a primeira troca é grátis.
Preço: O Preço a vista possui mais destaque que o preço parcelado do produto, e há um botão que exibe as formas e condições de parcelamento.
Cor: As cores são exibidas com thumbs dos próprios produtos o que facilita o cliente encontrar o produto que deseja.
Tamanho: Apresenta apenas os tamanhos disponíveis, o que facilita a visualização, porém clientes não tem a percepção da grade disponível e não há possibilidade de serem avisados quando o produto chegar em estoque.
Call to Action: O Botão de comprar é vermelho, e tem destaque, mas não trás a instrução de adicionar ao carrinho.
Mídias Sociais: Possui uma relação confusa de mídias sociais pouco utilizadas e não dá destaque para Orkut/ Twitter e Facebook.
Shoebiz (www.shoebiz.com.br)
O detalhe de produto da Shoebiz é bem resolvido, todos os elementos convivem em harmonia, Possui passo-a-passo para auxiliar a compra.
O Produto esta exposto em 4 posições, e possui ferramenta de zoom e ampliação da imagem.
A área para comentário é sutil, e os selos são perceptíveis porém pouco afetam a navegação.
Preço: Preço a Vista e Preço Parcelado tem o mesmo destaque, mas não mostrar claramente as condições de pagamento.
Cor: As cores são exibidas com thumbs dos próprios produtos o que facilita o cliente encontrar o produto que deseja.
Tamanho: A única diferença entre os tamanhos disponíveis e os não disponíveis é a cor, o que pode confundir a navegação.
Call to Action: O Botão de comprar é laranja, e tem destaque, mas não trás a instrução de adicionar ao carrinho.
Mídias Sociais: Possui uma relação confusa de mídias sociais pouco utilizadas e não dá destaque para Orkut/ Twitter e Facebook.
Calçado Online (www.calcadoonline.com.br)
O detalhe de produto da Calçado Online é o mais poluído de todos os players analisados, a barra lateral confunde, pois possui a grade e marcas em destaque demasiado, além disso os banners superiores e laterais continuam aparecendo no detalhe, o que faz com que o produto perca destaque.
O Produto esta exposto em 3 posições, e possui ferramenta de zoom e ampliação da imagem. Porém tem a menor área de visualização de todos os analisados.
Preço: Não tem muito destaque e confunde, o valor do desconto com o valor do produto, além de não mostrar claramente as condições de parcelamento.
Cor: As cores são exibidas com thumbs dos próprios produtos o que facilita o cliente encontrar o produto que deseja.
Tamanho: Os tamanhos disponíveis são claros e, quando o produto não esta disponível um “x” vermelho identifica esta situação.
Call to Action: Interessante notar que o botão de comprar só é acionado quando o cliente escolhe o tamanho. Por um lado é bom pois garante o cliente selecionar o tamanho e não tem a necessidade de demonstrar o passo-a-passo, mas por outro lado alguns clientes podem não entender que existe a função de compra.
Mídias Sociais: Possui as três principais ferramentas para compartilhar (Orkut/ Twitter e Facebook), mas também trás Google Share e Myspace, além do botão do like.
Di Santinni (www.disantinni.com.br)
O detalhe de produto da Di Santinni é o mais confuso de todos os player analisados. Os produtos relacionados encontram-se acima do produto em destaque, e tem quase o mesmo tamanho de imagem. Também não exibe um Passo-a-Passo para auxiliar a conversão. Além disso, há uma barra no meio do detalhe de produto com o telefone para contato que pode confundir os clientes.
A descrição do produto possui informações demais.
O Produto esta exposto em 6 posições, possui ferramenta de zoom e ampliação da imagem.
Preço: Não tem muito destaque e confunde, o valor do desconto com o valor do produto, além de não mostrar claramente as condições de parcelamento.
Cor: Os Thumbs de seleção das cores é muito grande e confunde a navegação com as demais imagens.
Tamanho: Os tamanhos disponíveis são claros e, quando o produto não esta disponível um “x” vermelho identifica esta situação.
Call to Action: O Botão de comprar é azul e vermelho, possui pouco destaque e esta no segundo scroll, além de não trazer a instrução de adicionar ao carrinho.
Mídias Sociais: Não possui nenhuma forma de mídia social no Detalhe do Produto.
Diferentemente dos mercados americano e europeu onde há certa variação nos detalhes de produtos dos varejista de calçados, no mercado brasileiro notamos que há uma certa homogeneidade em todos os detalhes de produto apresentados. De certa forma, fica difícil para um novo player se posicionar no mercado e não seguir este padrão de usabilidade. O que pudemos identificar como melhores práticas foram: Zoom e ampliação da imagem; utilização de um Passo-a-Passo como guia; destaque para o preço a vista e link para condições de pagamento e parcelamento; cores exibidas como thumbs dos produtos; tamanhos disponíveis em destaque e produto não disponível com um “x” e tom mais claro de cor; botão de comprar no primeiro scroll e nas cores, vermelho, laranja ou verde limão; compartilhar através de botões claros do facebook e twitter, além do botão de like.
Esperamos que este post tenha ajudado para você melhorar ou criar seu detalhe de produto!
