Existem alguns conceitos fundamentais a ter em conta ao longo da construção do design de toda a loja online, como o caso da familiaridade.
– Bárbara Costa, Tudo sobre eCommerce

• Adicionar feed do podcast Tudo sobre eCommerce: iTunes; RSS.
• Para descarregar o podcast, clique no ícone “Download” no player acima.
• Ouvir no Spotify.

Questões

• [00:00:58.030] – Quais são os conceitos fundamentais necessários a ter quando estamos a pensar, a desenhar ou a analisar o layout de uma loja online?
• [00:06:24.240] – Em termos práticos quais são os erros mais comuns que costumas ver e quais as tuas recomendações para colocar na loja online e também boas práticas em termos de usabilidade?
• [00:08:33.600] – Todos os termos de propostas de valor e de facilitadores de compra devem de estar na homepage?
• [00:10:24.130] – Além destes termos que já falamos, que outros elementos mais genéricos recomendas? Qual é a tua recomendação em termos de texto para um botão?
• [00:12:03.920] – Quais são as tuas recomendações para a página de listagem de produtos?
• [00:13:12.030] – De uma forma geral, qual seria um limite mais ou menos aceitável em termos de subníveis de navegação?
• [00:17:05.090] – Quais são as tuas recomendações para a página do produto?
• [00:20:28.330] – Qual a importância do copywriting?
• [00:22:02.560] – Para quem quer saber mais sobre este assunto, além de ouvir este podcast, de que forma pode fazer?

Trancrição

[00:00:10.870] – Nelson Peixoto

Bem-vindos ao Tudo sobre eCommerce. Nesta edição vamos falar sobre layout e usabilidade de lojas online. Para falar sobre este tema vou estar à conversa com a Bárbara Costa. A Bárbara é especialista em análise de layout de lojas online na nossa equipa, o Tudo sobre eCommerce. Se é a primeira vez que nos ouve, antes de começarmos, gostaria de apresentar o nosso projeto. O Tudo sobre eCommerce é o acelerador de projetos de ecommerce em Portugal dedica-se a ensinar tudo o que existe sobre o mercado das vendas online e direciona-se para empreendedores que pretendem criar um projeto de ecommerce raiz ou, aprender a criar uma loja online e a otimizar os seus projetos existentes. Podem conhecer mais sobre o nosso projeto tsecommerce.com

[00:00:58.030] – Nelson Peixoto

Bárbara, desde já agradeço por participares neste podcast. Vamos começar então a falar sobre análise de layout e usabilidade em lojas online. Um dos erros muito comuns que vemos habitualmente é as pessoas quererem logo decidir coisas muito específicas como cor dos botões, onde vai ficar determinada imagem, ou determinado texto. No meu entender este é o meu erro e é preciso começar por um aspeto mais importante que é o próprio conceito de uma loja online e os conceitos básicos que é preciso ter de forma a seguir-mos um rumo no nosso raciocínio e na nossa experiência de compra. Na tua perceção quais são esses conceitos fundamentais que é necessário ter quando estamos a pensar, a desenhar ou a analisar o layout de uma loja online?

[00:01:47.580] – Bárbara Costa

Em termos genéricos, aquelas coisas que temos que ter em consideração ao longo de todo o design de toda a loja online, são alguns fundamentos básicos como por exemplo a familiaridade. A familiaridade é um conceito muito importante que temos que ter sempre em atenção quando estamos a desenhar a loja online, no sentido em que o site e o sítio onde as coisas estão a ser colocadas devem ser sempre familiares ao utilizador de determinada forma. O utilizador está à espera de encontrar um botão de um determinado lado, está à espera de encontrar o menu na parte superior do site, está à espera de encontrar os ícones e o carrinho do lado direito superior. Portanto, há coisas que realmente podemos querer inovar. “A minha marca quer ser diferente quer fazer isto ou aquilo”. Tudo bem, mas no site existem determinados pontos em que nós não podemos inovar, porque se inovarmos demasiado não estamos a deixar um ambiente familiar ao utilizador e depois, o utilizador vai ter dificuldade em encontrar as coisas. Portanto, se o utilizador já está à espera de encontrar determinada coisa num determinado sítio, é nesse sítio que nós devemos colocar e não noutro.

[00:02:59.480] – Bárbara Costa

Além da familiaridade existe também a questão da distração. O utilizador é muito facilmente distraído e nós não nos podemos esquecer que quando estamos a desenhar uma loja online, a mesma tem um objetivo muito claro, que é a conversão. Se esse é o nosso objetivo com o nosso site, o design também deve estar alinhado com esse objetivo. Todo o layout, todo o design deve ser um caminho que o utilizador tem que percorrer desde que entra no site, pode ser na homepage, ou noutra página qualquer, desde que ele entra no site até ao momento da conversão, até ao checkout. Nós temos que criar esse caminho e não criar demasiados pontos de distração. Por exemplo, podemos começar logo com a homepage. É comum e nós percebemos porque é que as pessoas querem comunicar demasiadas coisas ao mesmo tempo na homepage. Querem comunicar promoções, querem comunicar produtos, querem comunicar novos produtos, mas temos de ter cuidado em não baralhar o utilizador e não dar informação a mais. Por exemplo, existem já algumas soluções como uma sticky homepage. Isto é uma expressão que nós usamos e que significa uma homepage curta em que nós entramos na homepage e só somos confrontados com um banner muito curtinho que diz homem ou mulher. Limita as opções de escolha. Entras na homepage e diz homem ou mulher. Tu vais explicar clicar homem e só depois de clicares homem é que vais entrar numa homepage personalizada que só tem produtos de homem. Isto vai em primeiro lugar tornar a homepage mais rápida, o que vai ser melhor para o ranking no Google e depois vais ter uma parede personalizada que sempre que entrar no site a partir daquele momento ela já vai estar no homem, não vais ser sempre confrontado com esta escolha sempre que entrares. Portanto, aqui já estamos a reduzir um bocadinho a distração, porque estamos logo a encaminhar o utilizador num caminho e eu disse homem ou mulher, porque é mais fácil de entender, mas dependendo do produto, existem milhares de outras opções. Como temos uma homepage personalizada, não temos que estar a comunicar tudo e mais alguma coisa na homepage e a distrair o utilizador.

[00:05:14.300] – Nelson Peixoto

Ou seja, não dar o efeito montra de feira por exemplo. Queremos mostrar tudo na nossa homepage, na nossa montra principal, mas é para isso que os sites têm várias páginas e há ligações. Também gostei desse conceito de reduzir as opções, porque ao mesmo tempo também estamos a facilitar a nossa interação com o utilizador. Ou seja, nós estamos a dizer “clica aqui ou aqui” e é muito mais fácil para o utilizador escolher um dos dois do que escolher um de cinquenta. Portanto, a própria interação com o site fica mais facilitada.

[00:05:49.170] – Bárbara Costa

Exatamente mesmo depois quando entras nessa homepage personalizada é importante que cada conteúdo esteja lá por um motivo. Portanto, se nós temos uma imagem, um lookbook, seja o que for, nós temos que ter um botão, um call to action associado a esse conteúdo para a pessoa ser encaminhada para a página seguinte, que vai ser o passo seguinte nesse caminho que ela está a percorrer. As coisas não podem estar lá só porque sim. Não podemos ter uma imagem na homepage só porque fica bonito, até porque o utilizador pode ficar frustrado por querer clicar nessa imagem e essa imagem não vai dar a lado nenhum. Portanto, temos que ser relevantes com o conteúdo que estamos a colocar e sempre a apontar o caminho que queremos que o utilizador percorra.

[00:06:24.240] – Nelson Peixoto

Bárbara, em termos práticos quais são os erros mais comuns que costumas ver e quais as tuas recomendações para colocar na loja online e também boas práticas em termos de usabilidade? Boas práticas para o ecommerce principalmente, ou seja, no intuito e com o objetivo de levar o utilizador a uma ação que termina na conversão.

[00:06:47.020] – Bárbara Costa

Em termos de erros, ou dicas, aquilo que me salta mais à vista se calhar, normalmente nas lojas online, são as propostas de valor e os facilitadores de compra. Aqui, propostas de valor e facilitadores de compra são coisas diferentes, embora não pareça ao mesmo. Propostas de valor, são as propostas que estão associadas à marca em si. Portanto, o que é que a marca oferece de diferente, o que é que o seu produto está a oferecer ao mercado, que os seus concorrentes não estão a oferecer. Por exemplo, a Function of Beauty, que é uma marca de champôs 100% personalizados e que têm como propostas de valor o facto de serem um champô que é escolhido pelo cliente de início ao fim. O cliente diz qual é o seu tipo de cabelo. Fino, grosso, ou oleoso e depois escolhe quais são os objetivos que ele quer que o champô cumpra como tornar o cabelo mais brilhante, mais volumoso etc etc. Escolhe também a cor champô, escolhe o cheiro de champô e até a embalagem vem personalizada, portanto, é isto que esta marca está a oferecer. Um champô 100% personalizado, à tua medida e para as tuas necessidades. Isto são as propostas de valor da marca. é isto que a marca está a oferecer, que as outras não estão.

[00:08:10.220] – Bárbara Costa

Por outro lado, facilitadores de compra são minis propostas de valor, que todos os sites estão a oferecer como por exemplo, portes gratuitos, apoio ao cliente 24 horas, devoluções gratuitas, devoluções até 30 dias. Isto são os facilitadores de compra, são aquelas pequenas coisinhas, aqueles pequenos benefícios que nós oferecemos aos nossos clientes que o fazem dar aquele passo em frente e fazer a compra.

[00:08:33.600] – Nelson Peixoto

Só para recapitular. Todos estes termos devem estar na homepage?

[00:08:40.490] – Bárbara Costa

Sim, tanto as propostas de valor como os facilitadores de compra, ou não existem, ou estão muito escondidos nos sites. Isto deve estar repetido ao longo da homepage, deve de estar na página de produto. Os facilitadores de compra devem estar obrigatoriamente no checkout e no carrinho para relembrar as pessoas. As pessoas podem estar na dúvida se compram ou não, mas quando veem que existe devoluções gratuitas até 100 dias, facilita a probabilidade de decidir comprar. Muitas vezes isto não é referido, ou existe assim um banner muito fininho na homepage e depois não é repetido ao longo do site e isto deve estar realmente realçado perto dos botões, perto dos call to action, principalmente na página de produto e de checkout.

[00:09:19.390] – Nelson Peixoto

Sim, porque nós, gestores de ecommerce, ou membros da equipa de ecommerce, às vezes colocamos num sítio e depois achámos que a pessoa se vai lembrar das propostas de valor, o que não acontece.

[00:09:30.960] – Bárbara Costa

E já que estamos a falar nisso, aproveito para falar também dos ícones de segurança. Quando digo ícones de segurança, quero dizer os ícones de segurança em si do site e de pagamento, mas também os ícones dos métodos de pagamento que devem estar sempre acompanhadas nestes pontos estratégicos como é a página do produto, perto do botão adicionar ao carrinho e no menu carrinho e no checkout. Estes pequenos ícones devem estar sempre a acompanhar para o utilizador ter sempre em mente que o site é seguro, que existem aqueles métodos de pagamento ao dispor, às vezes também existem sites que colocam os ícones das transportadoras como a DHL, ou CTT. O cliente reconhece aquele ícone o que lhe dá alguma segurança em avançar.

[00:10:24.130] – Nelson Peixoto

Ou seja, está relacionado com o tal conceito de familiaridade. O utilizador até pode não reconhecer a marca, pode ser uma marca nova, mas ao ver o ícone de segurança, ele próprio vai reconhecer alguma segurança e alguma confiança numa loja online que se calhar é a primeira vez que está a ver. Além destes termos que já falamos, que outros elementos mais genéricos recomendas? Qual é a tua recomendação em termos de texto para um botão? Ou seja, por vezes, vê-se muito o clique aqui, veja mais, qual é a tua recomendação?

[00:11:16.880] – Bárbara Costa

O texto dos botões claro que vai depender do sítio do site em que estamos a falar dos botões. Quando são botões da homepage, é normal termos botões menos agressivos como ver mais, saber mais, ver coleção, ver produtos novos, coisas do género. O clássico adicionar ao carrinho, não deixa de ser bom e familiar porque existem sites que conhecemos, que dizem quero isto ou coisas assim genéricas. Quero isto, não é adicionar ao carrinho. Às vezes existem sites que querem estar a inovar no texto do botão e não o devem fazer. O clássico adicionar ao carrinho está ótimo. No checkout, temos que ter botões como pagar, pagar com segurança, comprar… Todos esses termos que implicam um pagamento.

[00:12:03.920] – Nelson Peixoto

Muito bem, se calhar avançava então para alguns casos mais específicos, que é por exemplo, o caso da listagem de produtos, ou seja, a página em que nós estamos a ver uma categoria de produtos, ou uma coleção e temos vários produtos. Quais são as recomendações para este tipo de páginas?

[00:12:20.920] – Bárbara Costa

Para a listagem, é importante falarmos da estrutura de navegação. Quando estamos a pensar no design de uma listagem para uma loja, aquilo que nós temos que pensar primeiro é qual é a nossa gama de produtos, quantos produtos é que temos e como é que os vamos organizar na navegação e depois podemos ter estruturas de navegação mais pesadas, com muitas linhas, categorias e subcategorias. Ou podemos ter, por exemplo, estruturas de navegação mais simples, mas que depois têm muitos filtros. Isto é uma decisão que as pessoas têm que tomar quando estão a pensar em desenhar a listagem de produtos, como é que vão organizar isto. O que é que elas vão colocar na estrutura de navegação e o que vão colocar nos filtros de forma a facilitar a navegação ao utilizador, de forma a não esquecer que temos sempre pessoas que preferem usar apenas estrutura de navegação e temos pessoas que preferem clicar em ver tudo e depois usar apenas filtros.

[00:13:12.030] – Nelson Peixoto

De uma forma geral, qual seria um limite mais ou menos aceitável em termos de subníveis de navegação? Pergunto isto porque já vi lojas online que têm um, ou dois níveis e outras que têm seis ou sete níveis, em que nós basicamente parece que estamos a entrar num labirinto, em que entramos numa página e depois vamos a outra. Por isso, apontavas aí para que número?

[00:13:43.610] – Bárbara Costa

A partir do momento em que nós clicamos mais do que cinco vezes na estrutura de navegação, já estamos a aprofundar demasiado. Portanto, eu diria que 5 já é bastante, mas lá está, depende porque aqueles sites como a Amazon e a Asos que têm milhares e milhares de produtos, têm estrutura de navegação complexa e com muitos filtros. Portanto, se calhar a opção é não exagerar na listagem e depois usar os filtros para ser o mais simples possível. Já estamos a falar da listagem de navegação, um erro comum é o uso de termos técnicos e estranhos nos nomes das categorias. Existem sites que querem usar os nomes internos que eles têm para os produtos como por exemplo, uma camisola “super tech dry fit”, mas que o utilizador não vai reconhecer o que é que isso significa. O ideal é usar termos como camisola transpirável e 100% algodão e não usar estes termos.

[00:14:52.460] – Nelson Peixoto

Ou seja, comunicar o benefício e não o aspeto técnico. Por exemplo, não dizer que o produto tem um “coolmax”, mas comunicar que ele é mais transpirável e que favorece a respiração da pele.

[00:15:16.030] – Bárbara Costa

Também na listagem, um aspeto muito importante é o visual merchandising. Isto é uma ferramenta que eu acho que é essencial, não no início, mas depois quando estamos a trabalhar no dia-a-dia na listagem.

[00:15:25.590] – Nelson Peixoto

Ou seja, isto é a forma como nós apresentámos produtos, que vai muito além do típico ordenar alfabeticamente ou por preço, é isso que queres dizer.

[00:15:32.940] – Bárbara Costa

Exatamente, muitas vezes o que nos acontece é estarmos em listagens de produto em que os primeiros produtos que nos aparecem estão esgotados. Portanto, visual merchandising permite que estes produtos não sejam os primeiros a ser apresentados. Podemos querer apresentar por stock, podemos querer apresentar por novidade, ou podemos fazer aqui rácios, portanto, ferramentas de visual merchandising que nos permitem fazer um rácio e estruturar melhor na nossa listagem e às vezes também por cores. Em fashion isto também é muito utilizado, nos sapatos e na roupa, por temas entre outros. Ainda na listagem podemos também tocar aqui na questão dos preços e dos títulos dos produtos. Isto depende também do produto que estávamos a vender, mas é comum vermos às vezes os preços dos produtos demasiado grandes. Uma coisa que eu costumo dizer é que o preço é apenas uma consequência, portanto, estarmos a querer comunicar um preço numa listagem é errado, porque nós temos que destacar o produto e não o preço.

[00:16:34.490] – Nelson Peixoto

Quando dizes que é errado, é errado comunicar muito grande, não é errado ter lá o preço?

[00:16:37.340] – Bárbara Costa

Exato e às vezes os preços estão tão grandes que o que nos salta à vista primeiro é o preço e só depois é que é o produto. O que eu quero dizer é que deve primeiro ser o produto realçado e depois o preço é uma consequência que está por baixo. Há também outras ferramentas que nos ajudam como por exemplo as tags de promoções, de baixo stock, que ajudam a criar a urgência na compra. As tags são importantes e são pequenas etiquetas que aparecem por cima da imagem do produto, como por exemplo, as tags de promoções como o 50%, a Black Friday.

[00:17:05.090] – Nelson Peixoto

Muito bem, vamos avançar então para a página do produto em si, ou seja, o utilizador vamos supor que entrou pela homepage do nosso site, depois escolheu uma categoria e acedeu à página da listagem e agora já selecionou um produto e está a ver o produto. Quais são as tuas recomendações para a página do produto?

[00:17:48.150] – Bárbara Costa

Página de produto, eu diria em primeiro lugar sempre, é a qualidade e a quantidade das imagens. Portanto é sempre importante termos várias vistas do produto. Quatro vistas normalmente é o mínimo. Deve-se ter sempre pelo menos uma fotografia de detalhe, de zoom para perceber o detalhe do tecido do produto. O ideal seria ter sempre um vídeo associado, isso é ótimo também.

[00:18:14.540] – Nelson Peixoto

Mesmo para vermos o próprio produto a ser utilizado, não é? Em contexto.

[00:18:14.680] – Bárbara Costa

Sim, era isso que ia dizer a seguir. E depois uma imagem também do produto a ser utilizado. Se for um par de sapatos, o produto calçado, ou vestido se for roupa e dependendo do produto é simplesmente uma imagem em contexto, portanto, às vezes, basta termos uma imagem da garrafa na mão, pode estar lá os centímetros da garrafa, mas não é a mesma coisa como vermos ela na mão e percebermos como é a proporção da mesma.

[00:18:48.630] – Nelson Peixoto

Não há nada mais frustrante do que nós comprarmos uma coisa e depois essa coisa tem um terço do tamanho que nós achávamos que tinha.

[00:18:56.480] – Bárbara Costa

Exatamente. Portanto, eu acho que diria imagens de qualidade e quantidade é sempre essencial porque realmente o utilizador não tem o produto na mão e nós queremos aproximar ao máximo essa experiência. Neste seguimento, também é importante uma descrição bastante completa. Termos uma descrição a dizer botim preto, ou mala cinza e depois não mais nenhum tipo de texto associado, torna a página muito fraquinha e depois mais uma vez, dependendo do produto existem produtos que as pessoas querem saber da composição do produto, querem saber como tratar do produto às vezes, é bom ter conceitos de utilização e concelhos limpeza por exemplo. Portanto, uma descrição sempre completa acerca do produto e no mesmo seguimento, além da descrição do produto ter outra vez aqui os facilitadores de compra no texto, dizer que pode devolver durante 30 dias por exemplo, dizer que as soluções são gratuitas, que os portes são gratuitos a partir de X valor. Este texto também é importante estar repetido na página de produto e os ícones de segurança também. Outras funcionalidades importantes são as reviews de outros clientes. Regra geral as pessoas valorizam social proof e também recomendações de produtos semelhantes. O produto pode por vezes não ser exatamente o que utilizador está à procura. Também são valorizados produtos complementares, por exemplo, entro na Adidas e estou a ver um casaco e depois quero ver as calças para fazer o conjunto de fato de treino.

[00:20:28.330] – Nelson Peixoto

Faz sentido, mesmo que não seja o que a pessoa está à procura, se nós dermos um caminho, a pessoa já não foge. Já estamos a dar uma alternativa e o utilizador continua sua jornada até comprar. Muito bem, só aqui um à parte, eu às vezes acho muita piada e apetece-me dar os parabéns às pessoas que fazem aquele copywriting. Na própria descrição como tudo disseste, têm os elementos mais técnicos e a composição e a descrição do próprio produto, mas depois também vendem um bocado o produto, ou seja, em vez de serem puramente técnicos, em vez de dizer “estas sapatilhas são pretas e são do tamanho 47” dizem coisas do gênero “ao usares estas sapatilhas vais rebentar com a festa, ou vais conseguir alcançar os seus objetivos”, ou seja, acrescentam um bocado do sonho à descrição. A meu ver fica muito engraçado.

[00:21:25.580] – Bárbara Costa

Sim, quem também faz isso de forma muito engraçada é a Asos. A asos tem sempre uma descrição acerca das condições de limpeza e utilização do produto. Tem coisas tipo uma capa de telemóvel e depois escrevem na descrição “Ah sim, adivinhaste, não pode ir à máquina”

[00:21:48.620] – Nelson Peixoto

É engraçado, porque senão fica um site puramente técnico e então parece um catálogo que nós estamos a escolher por cor e por tamanho, que faz sentido, mas falta um pouco a parte emocional também. Nós estamos a escolher porque porque gostamos, porque temos uma ligação emocional.

[00:22:02.560] – Nelson Peixoto

Bárbara, para quem quer saber mais sobre este assunto, além de ouvir este podcast, de que forma pode fazer. Sei que escreveste alguns artigos muito interessantes no nosso blog. Queres falar um pouco sobre eles?

[00:22:15.800] – Bárbara Costa

Sim, nós temos imenso conteúdo no nosso blog sobre usabilidade e sobre layout. Temos por exemplo, um artigo só sobre otimização da homepage. Temos outro só sobre otimização de checkout. Temos também outro só sobre a página de produto com dicas para otimizar. Temos ainda alguns mais genéricos como melhorar a experiência do consumidor na loja online e temos vários artigos sobre estes assuntos que podem ler. Estão bastante completos.

[00:22:46.920] – Nelson Peixoto

Bárbara muito obrigado por teres partilhado o teu conhecimento nesta área da usabilidade e layout para lojas online. Para saberem mais sobre o trabalho da Bárbara podem visitar o nosso website do Tudo sobre eCommerce. Muito obrigado também a todos os que tiveram desse lado ouvir esta edição do podcast. Para saber mais sobre este tema e outros temas também relacionados com o ecommerce, consultem a página dedicada ao podcast tsecommerce.com/podcast. Para se manterem a par das novidades do mundo do ecommerce, sigam-nos nas redes sociais e subscrevam a nossa newsletter. Por hoje é tudo e até a próxima edição do podcast Tudo sobre eCommerce.