Você está na página 1de 41

TECNOLOGIA,

DESIGN E USABILIDADE
Construindo uma loja virtual do zero
Tecnologia, Design e Usabilidade Agosto

ÍNDICE
INTRODUÇÃO ................................................................... 3
1 A PRIMEIRA IMPRESSÃO É A QUE FICA .................. 6
Um público para chamar de meu .................................................... 9
Como identificar que tipo de site meu público prefere?............... 11

2 TECNOLOGIA ................................................................ 12
Como escolher uma boa plataforma............................................... 14
Criando uma loja no UOL HOST ...................................................... 15
Lojas seguras vendem mais ............................................................ 17

3 USABILIDADE X DESIGN............................................. 20
Os testes AB ..................................................................................... 22
Tempo é dinheiro! Fisgando o cliente em poucos segundos........ 25
Call to action ..................................................................................... 27
Identidade visual .............................................................................. 28
Banners ............................................................................................. 30
Menus e categorias .......................................................................... 32
Uma imagem vale mais que mil vendas ......................................... 33
De olho na vitrine ............................................................................. 35
Rodapé .............................................................................................. 36
Mais ferramentas ............................................................................. 37

4 CONCLUSÃO.................................................................. 39

uol.com.br/impulso
INTRODUÇÃO

O comércio eletrônico vendeu, só no Brasil, 35,8 bilhões


de reais em 2014, segundo o E-bit. Desde 2010 vem
crescendo, em média, 29% ao ano.

E é por isso, por essa taxa de crescimento (e o dinheiro)


impressionante, que você deve levar a sua empresa a
vender online. Acontece que, hoje, o mercado mudou.

Não adianta mais colocar qualquer coisa no ar, chamar


de loja online e achar que vai ficar rico. Atualmente,
o mercado de e-commerce no Brasil precisa de uma
atuação profissional. E é aí que as coisas ficam difíceis.
Mesmo quem já tem anos de experiência no varejo fica
com muitas dúvidas sobre como construir uma loja
virtual e, claro, como fazer sua gestão e trabalhar para
tirar o melhor proveito dela.
Se você está sofrendo com isso (ou se está nos primeiros passos
para abrir sua loja virtual), fique tranquilo: estamos aqui para
ajudá-lo. É exatamente a parte de tecnologia (e usabilidade e
design) que vamos desvendar neste capítulo.

Afinal, você já sabe como fazer um bom Diagnóstico e


planejamento, está mestre em administrar Estoque, logística e
pessoas, tem os números (e as planilhas) como seus melhores
amigos porque está craque em Finanças e meios de pagamento,
e, no mais recente e-book, descobriu tudo o que sempre quis
saber sobre Concorrência, preços e produtos, está preparado
para aprender como criar seu e-commerce sem dramas e
desmistificar tudo sobre tecnologia e design.

E nada como uma experiência real para ajudar nesse processo


− para mostrar o antes e o depois. É claro que o Impulso Digital
vai revolucionar o Empório do Lazer online e mostrar ao seu
dono, Alcyr Neto, como uma mudança radical no design pode
alterar muita coisa na empresa. Em especial, fazer a loja online
dar lucro.
Isso foi feito com a ajuda de um time de especialistas em design e tecnologia,
e o resultado você vê aqui (e no episódio em vídeo).

In Hsieh: mentor do Neto, fundou a Fernando Zanatta: Diretor de TI Roberto Muricy: Analista de
Baby.com.br, a 4vets.com.br e participou e Produto da Netshoes. Negócios Sênior do UOL HOST.
da criação do Submarino.

Renan Santos: Webdesigner Eduardo Delfino: CEO da PERAS Luciana Terceiro: Gerente de Concepção,
Sênior do UOL. Tecnologia de Resultados. Interface e Produtos do UOL

Ufa! Viu quanta gente se empenhou em transformar a loja virtual do Empório do Lazer em uma máquina
de vender? E o mais bacana é que esse trabalhão todo gerou muito conhecimento que vai ajudá-lo a
montar (ou melhorar) sua loja online. Está pronto? O seu desafio começa agora!
A PRIMEIRA
IMPRESSÃO
É A QUE FICA
Tecnologia, Design e Usabilidade Agosto

A primeira impressão é a que fica


Se você tivesse a opção de entrar em alguma dessas lojas, em qual entraria? A ou B?

Empório das Roupas

É claro que é na A, né? Assim como a cara da sua loja física influencia o cliente a entrar ou não (e comprar, claro),
a aparência da loja virtual funciona da mesmíssima forma. Ela pode atrair ou espantar o público.

uol.com.br/impulso 7
Tecnologia, Design e Usabilidade Agosto

Imagine o seguinte: você, como cliente, está navegando à procura de um


produto qualquer. Entra em uma loja online cuja marca não conhece. É nesse
momento, na apresentação do seu site, que a imagem da loja começa a ser
construída. Vale a mesma ideia da fachada detonada − uma loja virtual com
uma cara ruim coloca o cliente para correr. Se a aparência da loja for legal, já
tem mais pontos positivos com você (e maior chance de fechar a compra).

É bom lembrar que não estamos falando somente da fachada da loja virtual
(tem especialista que prefere chamar isso de “home” ou a entrada da loja
online). Um menu bagunçado, com várias opções em cores feias, assusta
bastante, assim como um caminhão de fotos de péssima qualidade ou diversos
banners de cores berrantes com todos os tipos de informação. Tudo isso é
bem pouco interessante para quem está do outro lado do mouse.

Não tem segredo aqui. Você pode fazer um exercício: pensar como um cliente que
não conhece sua loja online. Se você olha para ela (é bem importante ser sincero
aqui) e não gosta do que vê, está mais do que na hora de mexer em tudo.

O seu cliente não é bobo. Se ele não sentir confiança em sua loja, simplesmente vai
procurar outro lugar para comprar. Ainda que seja mais caro reformular (ou criar
algo bacana), pode ter certeza de que o consumidor vai preferir pagar um pouco
mais para ter mais segurança e uma navegação legal.

uol.com.br/impulso 8
Tecnologia, Design e Usabilidade Agosto

Um público para chamar de meu


O primeiro passo para criar um site adequado, que vai ajudá-lo a A difícil tarefa de deixar
vender mais, é descobrir para quem você vende. Isso pode parecer o orgulho de lado
fácil, afinal, você está abrindo uma loja virtual para seus clientes,
certo? Sim, o problema é que tem muito empreendedor que abre a Foi isso que o Neto teve de fazer para que seu site
loja para si mesmo, e não para o público. fosse reformulado por uma equipe que realmente
entende de tecnologia e design de lojas virtuais.
Isso acontece quando a plataforma saiu apenas como o Isso foi bem complicado, porque o site era a cara do
empreendedor queria, e não do jeito que o faria vender mais. Neto e ele criou tudo do jeito que queria. Acontece
que os clientes não queriam nada daquilo. O Neto
Tome muito cuidado para não cair na armadilha da vaidade, teve de abrir mão do orgulho e entender que o
querendo construir um site que é a sua cara. A sua cara não é, site não era para ele, e sim para o seu público, que
necessariamente, o caminho para vender. É, sim, muito importante gosta e tem necessidades diferentes.
que você pense e opine na elaboração da sua loja, mas tenha ciência
de que a prioridade é agradar ao cliente (e não ao seu próprio ego).

uol.com.br/impulso 9
Tecnologia, Design e Usabilidade Agosto

Mas se você está percebendo agora que já cometeu esse erro, não se sinta mal. Nem
tudo está perdido. Esse tipo de problema é bem comum entre os empreendedores
que começam a caminhar no mundo online.

E não é exclusivo de pequenos empreendedores não, viu? Fernando Zanatta, diretor


de TI da Netshoes, contou que no início o site era todo preto, vermelho e verde, e ele
achava aquele design bem legal.

Algum tempo depois, Fernando descobriu que o internauta ficava na página por,
no máximo, 50 segundos. Aquele esquema de cores, conta, afugentava o cliente.
Assim, a Netshoes reformulou o design do site e mudou para um esquema de cores
mais claro. A resposta foi imediata. O tempo de visita passou para três minutos e
meio. “As pessoas, antes, não suportavam ficar ali por muito tempo, mas eu achava
o máximo. Só que o meu consumidor não gostava. Mudamos e o resultado foi
impressionante”, contou.

Isso pode estar acontecendo com você também. Sem um estudo bem-feito e um
belo diagnóstico, fica difícil descobrir quando suas decisões fazem sentido para o
usuário gostar mais do seu site e quando são baseadas apenas no seu gosto pessoal
– que pode ser bem diferente do gosto do público.

O maior erro do empreendedor de e-commerce é


achar que ele sabe tudo, inclusive das cores e
do layout que o seu cliente gosta mais.
Fernando Zanatta

uol.com.br/impulso 10
Tecnologia, Design e Usabilidade Agosto

Como identificar que tipo de site meu público prefere?


É isso que, provavelmente, você está se perguntando agora. A melhor maneira de responder a essa pergunta é conversando com um
designer que entenda bem de lojas virtuais.

Além de ter o conhecimento e as ferramentas para criar seu e-commerce ou adaptá-lo, se você já tiver um, ele tem a experiência necessária
para dar conselhos preciosos que só quem é especialista sabe. Um designer também deve conhecer bem as tendências de mercado e vai
ajudá-lo a identificar o que os grandes varejistas online estão usando (e que pode dar certo na sua loja).

Como você descobre isso? Dê uma olhada no portfólio dele e veja o que ele já fez. Se forem lojas de sucesso, você está no caminho certo.

Só que vale lembrar que não existe receita de bolo. Para saber o que seu público prefere, você precisa, primeiramente, descobrir qual é o seu
público (claro, né) e os gostos dele. Se você não sabe como fazer isso, dê uma olhada no capítulo Diagnóstico e Planejamento (explicamos
tudo direitinho lá).

É com essa base que você começa a repensar (ou pensar) a sua loja online.

Empório... Da 25 de Março?

Quando o Neto mostrou o site antigo do Empório do Lazer, a opinião


dos especialistas foi unânime: a loja parecia uma versão virtual da Rua
25 de Março, em São Paulo. O site tinha muitas cores berrantes, avisos
diferentes por todos os lados e era recheado de fotos ruins. Era como
se o Neto estivesse “na porta” da sua loja virtual gritando para chamar
a atenção do cliente de qualquer jeito. É o modelo da Rua 25 de Março,
famosa pelo comércio popular. Acontece que isso é o oposto do que os
clientes do Neto, pessoal com grana, procura. “Com o estudo da persona,
descobri que meu público é de classe A e B. E é claro que eles não
querem comprar na 25 de Março. A transformação no meu site foi feita
para atender o meu público”, percebeu.

uol.com.br/impulso 11
TECNOLOGIA
Tecnologia, Design e Usabilidade Agosto

Da mesma forma que muita gente se atrapalha no varejo por não gostar de números (e querer distância deles), não é raro ter
empreendedores que correm da tecnologia por não entenderem muito da área. E, assim, ou eles desanimam na hora de abrir (ou
reformular) a sua loja virtual ou terceirizam tudo o que diz respeito ao seu negócio na internet.

Se esse for o seu caso, calma. Ninguém vai virar especialista do dia para a noite, mas há uma série de dicas e regrinhas que são válidas
para todo esse mercado. E é isso que vamos mostrar para você aqui. Se você se dedicar, vai entender muito mais e descobrir que a
tecnologia não é um bicho de sete cabeças.

Para sua estante


Se você já tem algum conhecimento ou quer aprender mais sobre como criar um
site ou uma loja virtual, aqui tem alguns livros que podem ajudá-lo:

Criando a Loja Virtual – Magdalena Yesil

E-commerce: Princípios para o Desenvolvimento e Gerenciamento de uma


Loja Virtual – Gilmar Deghi e Carlos Antônio Oliviero - Série Eixos

Como Abrir uma Loja Virtual de Sucesso – Mauricio Salvador e Alexandre Miranda

Curso Básico para Desenvolvimento de Temas em Magento – André Gugliotti

Webdesign Responsivo – Maurício Samy Silva

uol.com.br/impulso 13
Tecnologia, Design e Usabilidade Agosto

Como escolher uma boa plataforma


Você começa a construir uma casa pela fundação, né? Se não estiver bem estabelecida, tudo o que for colocado em cima pode cair.

Na loja virtual é a mesma lógica, só que a fundação tem outro nome: chama-se plataforma. Ela será a base da loja virtual. Se a
plataforma for fraca e tiver poucos recursos, já viu, né? A sua loja online vai ser fraquinha e não vai deixá-lo fazer nada. Por isso
você precisa pesquisar bastante antes de escolher uma
plataforma de e-commerce.

O conselho do Fernando Zanatta é ir com calma: “Se o seu


negócio está começando e ainda é pequeno, escolha uma
plataforma indicada para esse setor. Se a sua empresa
ainda está no início, é arriscado comprar uma plataforma
caríssima porque você ainda não tem público nem sabe se o
negócio vai dar certo”.

Mas, olha só, não escolher uma plataforma top não significa
ter de aguentar uma ruim. Existem muitas plataformas
boas para pequenas e médias empresas (e com preços
acessíveis). Você só precisa pesquisar, separar o total no
seu orçamento e descobrir quais são as funções que você
precisa ter na sua loja.

Quer uma dica? É exatamente do que vamos falar agora.

uol.com.br/impulso 14
Tecnologia, Design e Usabilidade Agosto

Criando uma loja no UOL Host

A plataforma de e-commerce do UOL HOST tem três planos que se encaixam bem em vários tipos de necessidade:

Até 50 produtos Até 300 produtos Produtos ilimitados

Para microempreendedores Para pequenos empreendedores Para empreendedores médios


(até 50 produtos) – É possível cadastrar até (até 300 produtos) – Indicado (produtos ilimitados) – Já
50 itens para venda online. Funciona bem para empresas de porte pequeno ultrapassou a marca de 300
para pequenos empreendedores ou para que tenham uma gama maior produtos? Agora o céu é o limite para
aqueles que têm uma quantidade limitada de itens disponíveis ou recebam sua loja, e com esse plano você não
de mercadorias no portfólio. A empresa que constantemente novidades para precisa mais se preocupar com o
adquire o pacote ainda recebe 5 caixas de compor seu mix. Nesse modelo são 10 número de produtos. Além disso, você
e-mails com domínio personalizado. contas de e-mails personalizadas. ainda ganha 15 caixas de e-mail.

uol.com.br/impulso 15
Tecnologia, Design e Usabilidade Agosto

Todos os planos ainda recebem um pacote de vantagens que inclui:

Cálculo automático
R$ 200 em bônus para divulgar de frete com sistema
sua loja nos serviços de integrado dos Correios.
publicidade do UOL.

Integração com redes sociais, como


Facebook e Twitter, que permitem que
o usuário compartilhe suas compras e
curta seus canais nas redes.
Suporte técnico para tirar suas
dúvidas 24 horas por dia, via
e-mail, chat e telefone.
Selo de segurança do E-bit,
um dos mais importantes
do e-commerce.

Integração com alguns dos meios


de pagamento mais seguros e Produtos incluídos na
conhecidos pelo público, como página do Buscapé.
PagSeguro.

O processo de inclusão de logo, banners, imagens e descrições de produtos é bem simples e intuitivo, o que facilita muito a vida de novos
empreendedores e prova que o e-commerce não é nenhum bicho de sete cabeças, mesmo para quem não entende muito de tecnologia.

uol.com.br/impulso 16
Tecnologia, Design e Usabilidade Agosto

Lojas seguras vendem mais

Hoje, os consumidores se sentem mais seguros em comprar e pagar Mal falado? Eu?
pela internet. De acordo com o relatório WebShoppers, do E-bit,
esse foi um dos motivos pelos quais as vendas nos e-commerce Quem compra pela internet gosta de saber da reputação
cresceram 26,7% em 2014. Só para lembrar, a economia do país da loja online antes de fechar negócio. Essas são algumas
cresceu 0,1% no mesmo ano. ferramentas que você pode consultar para descobrir
como está a imagem da sua loja:
O e-commerce só cresce nesse ritmo impressionante porque tanto
as plataformas quanto os empreendedores estão se dedicando para Reclame Aqui − É um dos canais mais populares usados
tornar o processo de compra virtual o mais seguro possível. E isso pelos internautas para reclamar sobre qualquer tipo de
é ótimo, só que você não pode ficar para trás. Além de darem maior produto ou serviço. Tem espaço para réplica das empresas e
tranquilidade ao empreendedor e aos clientes, os sites mais seguros
gráficos para avaliar a eficiência das resoluções.
ainda vendem mais. Não dá para vacilar.

Atualmente, existem diversas ferramentas que ajudam a mostrar Web of Trust – em formato de ranking, ele exibe
para o consumidor que sua loja é segura. notas para cada site pesquisado. É possível, ainda, instalar
extensões do Web of Trust nos navegadores Google Chrome
e Firefox, assim, logo que você entra em um site, ele já busca
automaticamente a reputação da loja.

Site Advisor – plugin para Windows, MAC e Android que


é capaz de avaliar fatores como segurança e possibilidade de
fraudes e spams de um site antes que o usuário clique no link.

uol.com.br/impulso 17
Tecnologia, Design e Usabilidade Agosto

O Procon sempre divulga uma lista de lojas online nada confiáveis, e você, com certeza, não vai querer ver o seu site por lá. Para isso
pode tomar algumas precauções, além de escolher uma plataforma que ofereça meios de transação seguros:

Preocupe-se com a aparência: a gente já falou disso, é


Cuide da sua reputação: uma falha na segurança
verdade, mas nunca é demais insistir. O design da sua loja é
tem consequências graves. Além de você não
fundamental para vender mais, mas vale a pena frisar que a
receber o pagamento, o cliente pode perder o
“cara” do seu site diz muito para o cliente. Só pela aparência,
dinheiro da compra e ter sua conta bancária violada,
ele pode decidir que o site parece meio descuidado e que,
ou seja, uma tragédia completa.
provavelmente, é inseguro. E isso só de olhar.

Se isso já aconteceu, você precisa dar vários passos. Primeiro, corrigir o erro o mais rápido possível. Depois, reparar os danos que o
consumidor sofreu − não vale a pena esperar ele reclamar, já que a repercussão pode ser imensa.

Por isso, monitore comentários, e-mails, redes sociais e qualquer outro meio que possa divulgar – ou manchar – a imagem da sua loja.
Quando encontrar uma reclamação, seja rápido e eficiente em demonstrar para o cliente, e para quem está acompanhando a situação, que
o problema está sendo resolvido.

Um dos certificados mais impo


rtantes é a
Certificação SSL. É ela que faz
com que
aquele famoso cadeadinho ap
Exponha certificados e selos de segurança: areça do lado da
URL quando entramos em um
site seguro. Ter
eles fazem toda a diferença. Existem diversas um Certificado SSL significa
que as transações
empresas que oferecem serviços de auditoria e na loja acontecem de forma
codificada, o que
consultoria que ajudam a deixar seu site mais impede que informações de ca
rtão de crédito
seguro. Meios de pagamento confiáveis, como sejam roubadas, por exemplo
. “Esse selo exige
o PagSeguro, dão credibilidade ao seu site e uma configuração e um custo
anual para
aumentam as chances de atrair novos clientes. assinatura. Só que é muito re
comendado”,
aconselha Roberto Muricy, an
alista de
Negócios Sênior do UOL HOST
.

uol.com.br/impulso 18
Tecnologia, Design e Usabilidade Agosto

Lista de Desejos!

Wishlist de selos e certificados

Existem várias organizações que têm selos e certificações interessantes para


empreendedores e consumidores. Associando-se a essas organizações e adequando
as configurações da sua loja virtual ao que as entidades pedem, você cria um ambiente
muito mais seguro para as transações financeiras entre você e o consumidor.

E-bit: o E-bit tem um mecanismo de conferência de medalhas para as lojas virtuais.


Dependendo de fatores como taxa de entrega, fidelização de clientes e sigilo nas informações, o
comércio eletrônico recebe uma certificação de “medalha”, que vai do bronze ao diamante.

Clique e valide: é o selo da Câmara Brasileira de Comércio Eletrônico (Câmara E-net) para
pequenas empresas. Ele garante ao consumidor que sua empresa atua dentro dos parâmetros de
segurança da Câmara E-net.

Site blindado: é um dos mais utilizados pelos gigantes do mercado. O empreendedor pode
adquirir diversas modalidades de selo que garantem ao consumidor que seu site é livre de vírus
ou que as transações financeiras são feitas com segurança.

uol.com.br/impulso 19
USABILIDADE
X DESIGN
Tecnologia, Design e Usabilidade Agosto

“Se você acha importante que o site seja bonito, você está começando
errado. Beleza não é o ponto principal, você precisa ficar de olho na
usabilidade.” Foi o que explicou Fernando Zanatta para o Neto, e esse é
um conselho que vale para qualquer empreendedor: usabilidade primeiro,
design depois.

Só que, se você é empreendedor virtual de primeira viagem, talvez não


saiba direito o que, afinal, significa “usabilidade” e “design”. Ainda bem
que o Fernando tem uma explicação rápida sobre cada um deles.

O design é a aparência, é o que o consumidor vê quando abre sua loja. Ele


é composto de cores, estilo dos menus, fonte das letras e por aí vai. Já a
usabilidade é como o seu site vai ser usado. “A usabilidade é responsável
por fazer seu cliente ter uma experiência fácil e rápida dentro do seu
e-commerce”, completa. Ou seja, se é muito fácil navegar (e comprar na
sua loja), ela tem boa usabilidade.

Agora já deu para entender o que é usabilidade e design. Por isso, como
explicou Fernando Zanatta, é mais importante ter um site com boa
usabilidade. É claro que o design é muito importante, mas seu cliente
consegue comprar em um site feio. Já o contrário, em uma loja virtual
linda e bem complicada de usar, é praticamente impossível comprar.

Você não pode sacrificar a usabilidade


em favor do design.
Fernando Zanatta

uol.com.br/impulso 21
Tecnologia, Design e Usabilidade Agosto

Os testes AB
Uma vez que você tem uma ideia mais clara do público, é mais fácil pensar
em um design apropriado. Um público que procura produtos de esporte
vai gostar de um design mais limpo e dinâmico, enquanto compradores de
joias vão apreciar uma loja virtual com aparência mais refinada e amantes
de tecnologia vão amar se seu e-commerce tiver uma versão mobile – para
smartphones e tablets – com layout moderno e que carregue rápido.

Assim, quem vai definir o caminho da sua loja virtual é o seu cliente. Mas
você não precisa fazer milhares de entrevistas para descobrir isso. Para
definir como os clientes preferem o seu site, você pode usar os testes AB.

Fernando Zanatta explica: “Vamos imaginar que você


quer escolher um botão, mas não sabe se o melhor é ele
em verde ou amarelo. Aí você faz um teste AB com esse
botão − metade do seu público vai ver em amarelo e a outra
metade em verde. Depois de alguns dias, você vê qual foi
mais clicado e faz a escolha com base nessa informação”.

uol.com.br/impulso 22
Tecnologia, Design e Usabilidade Agosto

Deu para entender? Assim, não é o seu gosto pessoal que define a loja, mas a opinião dos seus clientes. Para o cenário que o Fernando
criou, vamos imaginar que, no mesmo site, no mesmo produto e com o mesmo valor, de 10 pessoas, 7 clicaram no botão amarelo e 3
no verde. Isso mostra que a maioria das pessoas preferiu o botão amarelo. Então, é bem mais provável que amarelo traga melhores
resultados para sua loja.

Botão Amarelo 7 cliques

Botão Amarelo
Traz melhor resultado.
Botão Verde 3 cliques

uol.com.br/impulso 23
Tecnologia, Design e Usabilidade Agosto

E, acredite, uma simples seta apontando um formulário, uma imagem maior ou menor e o tamanho da fonte podem, sim, aumentar ou
diminuir suas vendas. Uma pesquisa feita pela Ascend2, com profissionais de e-commerce, mostrou que o teste AB foi considerado a
ferramenta mais eficiente para otimizar as conversões.

Os testes são a maneira mais rápida e eficiente de descobrir um problema ou tirar uma dúvida de implementação, mas é claro que
devem ser seguidos por uma análise muito bem-feita. Afinal, se você não coletar os dados nem souber interpretar os resultados dos
testes não poderá tomar uma decisão.

uol.com.br/impulso 24
Tecnologia, Design e Usabilidade Agosto

Tempo é dinheiro!
Fisgando o cliente em poucos segundos
No e-commerce essa máxima não poderia estar mais correta. Quando
você tem uma loja no shopping, está acostumado com clientes que
entram, observam, perguntam e ficam um tempão dentro da loja,
certo? Isso acontece porque quem frequenta o shopping, geralmente,
está passeando e fazendo uma tarefa, que é olhar as vitrines.

Na internet, o mundo é outro. O tempo aqui é curto, o cliente fica


pouquíssimo tempo em cada página e tem um milhão de coisas −
de e-mails e notícias a redes sociais − competindo por sua atenção.
Tudo isso faz com que o empreendedor de e-commerce precise ser
muito competente em chamar a atenção do cliente e fazê-lo comprar
em poucos minutos.

Em média, as pessoas
ficam entre 10 e 20
segundos em uma página.
Se o seu cliente não
encontrar o que procura
dentro desse tempo, você
perdeu a venda.
Luciana Terceiro

uol.com.br/impulso 25
Tecnologia, Design e Usabilidade Agosto

Mas como cumprir uma tarefa tão difícil em tão pouco tempo? Vamos ver algumas dicas a seguir:

Facilite a busca: se o consumidor tiver que ficar Aposte nas referências gráficas!
procurando uma barra de pesquisas por muito tempo, é
provável que ele se canse antes mesmo de encontrar o A Luciana Terceiro e o Roberto Muricy
produto. O campo de pesquisa deve ficar no topo do site orientam a utilização de símbolos e
ou em algum lugar de fácil acesso. outras referências que comunicam bem.
Um caminhãozinho pode significar frete,
e um cadeado, um site mais seguro,
Capriche na descrição do produto: não faça o cliente ter por exemplo. “Assim você consegue
que te ligar ou enviar um e-mail pedindo mais informações comunicar de maneira clara, rápida e sem
sobre a mercadoria. Dados como dimensões, peso, cores, poluir o site”, afirma Roberto.
funcionalidade e instalação são obrigatórios e precisam
estar bem-feitos.

Dê as informações que o cliente precisa ter: frete, prazos, política de entrega da loja e os contatos também
são outras informações que precisam estar disponíveis logo de cara, e o visitante não pode demorar muito
para encontrá-las.

Facilite o checkout: você está quase lá, conseguiu chamar a atenção do cliente, fez com que ele clicasse em
comprar e esse é o último passo para computar mais um pedido. Mas se o checkout for cheio de etapas, cheio
de formulários para preencher, é possível que ele desista mesmo assim. Por isso, garanta que o checkout tenha
o mínimo de etapas possível e, se puder, aposte em ferramentas que salvam os dados do cliente e fazem o
autopreenchimento dos campos.

Vale sempre lembrar que o processo de compra não para por aí. A chegada do pedido é só o primeiro passo, depois é preciso muita
organização na empresa para separar os produtos, prepará-los para o envio e cuidar para que cheguem direitinho à casa do cliente!

uol.com.br/impulso 26
Tecnologia, Design e Usabilidade Agosto

Call to action
Uma das maneiras mais eficientes de levar o cliente para onde
você quer é dizer a ele exatamente o que deve fazer. A call to
action (CTA, ou chamada para a ação, em tradução livre) é a
frase ou expressão que você coloca em um banner, botão ou
em um texto, e que é capaz de informar de maneira breve e
clara o que o cliente deve fazer. “Compre”, “faça o download”,
“assine” ou “cadastre-se” são alguns exemplos de CTA que
estão tentando vender um produto, captar e-mails ou fazer
com que o cliente baixe um material.

Uma boa call to action é:

Clara: o cliente sabe exatamente para onde está indo ao


executar a ação que você orientou na CTA.

Direta: não precisa de rodeios, diga ao cliente exatamente o


que ele deve fazer e por quê.

Urgente: por que o cliente vai comprar agora se ele pode fazer isso depois? Aproveite a
oportunidade de liquidações, últimas unidades e promoções para fazer CTAs mais efetivas.

É importante sempre ter uma chamada, um impulso para clicar.


É isso que vai levar o cliente para a conversão.
Roberto Muricy

uol.com.br/impulso 27
Tecnologia, Design e Usabilidade Agosto

Identidade visual
Já vimos alguns princípios básicos para a construção de um e-commerce, e agora vamos
entrar no módulo avançado. A seguir, vamos estudar alguns dos principais elementos que
compõem uma loja virtual.

Logo
Muitas empresas já têm um logo definido quando entram no mundo do comércio eletrônico, mas é preciso tomar cuidado porque nem
tudo o que funciona bem offline vai fazer tanto sucesso online. O logo precisa ter algumas características, entre elas:

Ser fácil de entender e de ler: até porque a função dele é sintetizar e transmitir uma ideia, por isso,
colocar muitos elementos, criar uma imagem suja demais ou encher o logo de textos vai prejudicá-lo.

Ter cores que combinem com o design do site: talvez você ache lindo um logo amarelo e verde-
limão, mas precisa ver se isso casa com sua loja virtual. Logo e e-commerce devem ser complementares.
Vale a pena dar uma olhada nas combinações que os grandes players fazem, como Submarino e Ponto
Frio. Você vai perceber como o layout fica harmonioso quando esses dois elementos combinam.

Ser fácil de reconhecer: você certamente não precisa se esforçar muito para reconhecer o logo
do McDonald’s, da Volkswagen ou do Windows. O ideal é que seu cliente também consiga identificar
facilmente sua marca por meio do logo.

uol.com.br/impulso 28
Tecnologia, Design e Usabilidade Agosto

O Empório do Lazer, loja do Neto,


tinha um logo antigo que não era nada
funcional. Bem escuro e com letras Um logotipo precisa cumprir cinco quesitos:
pequenas, era quase impossível entender
o que ele dizia. Além disso, tinha um ser simples, memorável, atemporal,
verde forte que não aparecia em lugar apropriado e versátil para ser utilizado
nenhum da loja. Depois de a equipe de
tecnologia do UOL dar uma mãozinha ao
em qualquer lugar.
Neto, o logo ficou bem mais atrativo e se Renan Santos
comunica melhor com o público.

Antes Depois

uol.com.br/impulso 29
Tecnologia, Design e Usabilidade Agosto

Banners
Os banners servem para divulgar promoções, facilidades de pagamento e informações importantes. É normal que as lojas virtuais criem
mais de um banner e façam com que as imagens se revezem. Dessa forma, o cliente vê um banner por alguns segundos, na sequência
visualiza outro, e depois outro.

Também é bem comum a prática de colocar botões para que


seja possível avançar ou retroceder na exibição dos banners.
Isso garante que o visitante possa ir direto para a imagem que
chamou sua atenção, em vez de ficar esperando que o banner
em questão apareça de novo.

“O banner é um dos espaços mais valiosos da sua loja”, resume


Roberto. Ele afirma que o banner deve ser atraente para
convencer o público a clicar. Imagens de boa qualidade e textos
diretos são essenciais para um banner eficiente. “Todo banner
precisa ser clicável e intuitivo.” Isso significa que o visitante deve
entender naturalmente qual a função daquela ferramenta e para
onde ele será redirecionado quando clicar.

Mas o banner não precisa vir, necessariamente, depois do logo.


Ele pode estar em uma barra lateral divulgando um parceiro, por
exemplo.

uol.com.br/impulso 30
Tecnologia, Design e Usabilidade Agosto

Os 4 mandamentos dos banners

Não farás mais de 4 banners: Não usarás todas


porque o cliente não consegue ver as cores do arco-íris: banner
muito mais que isso. também segue identidade visual, por
isso as cores devem combinar com as
Escolherás bem o conteúdo: do layout e do logo.
como dissemos antes, nem
todos os banners precisam ser
Testarás os banners
chamadas para ofertas. Você pode
mais eficientes: o teste vai se
divulgar sua loja física, criar um
banner sobre uma liquidação, um tornar uma parte importante do seu
lançamento, uma nova condição de trabalho, experimentar imagens
pagamento... O importante é que e modelos diferentes de banners
seja algo relevante para o cliente também pode trazer resultados
descobrir logo de cara. melhores para sua loja.

uol.com.br/impulso 31
Tecnologia, Design e Usabilidade Agosto

Menus e categorias
Para que servem os menus? Acertou quem disse que é para organizar os temas e facilitar a vida de quem visita seu site.
Acontece que, se eles não forem bem pensados, podem complicar muito a experiência de navegação do seu cliente.

O mais normal é que os menus apresentem diferentes categorias que


possam ajudar o consumidor a encontrar o que procura, mas a Luciana
Terceiro explicou que é preciso se colocar na pele do público para entender
como categorizar e organizar o menu. “O importante é pensar em como
o cliente vai procurar seus produtos. Será que faz sentido chamar uma
categoria de “fornos”? Ele vai entender o que é aquilo e o que vai encontrar
naquela página?”, explica. Esses são pequenos detalhes que fazem com que
a busca seja mais rápida e eficiente e diminuem o risco de o visitante perder
a paciência e desistir de encontrar um produto.

Também é importante dedicar um bom tempo ao menu, porque usar


palavras-chave nas categorias pode ajudar os buscadores a levar o cliente
até o seu site. Por isso, vale a pena fazer uma pesquisa sobre as palavras
mais procuradas.

uol.com.br/impulso 32
Tecnologia, Design e Usabilidade Agosto

Uma imagem vale mais que mil vendas

Quando o assunto são fotos de produtos, In Hsieh


é taxativo: “No fim das contas, é a foto que vende o
produto”. E ele está certo. Diferentemente de uma loja
física onde o cliente pode ver o que está comprando de
perto, na loja virtual tudo o que ele tem são as fotos e as
descrições que você inclui.

As fotos devem ser boas e em alta resolução (para não


perder a qualidade quando ampliadas). Isso dá um
tom mais profissional ao trabalho e faz com que seja
possível ver detalhes da mercadoria.

A foto vende, a descrição ajuda.


In Hsieh

uol.com.br/impulso 33
Tecnologia, Design e Usabilidade Agosto

Ambientar as fotos, ou seja, fotografar o produto em ambientes e situações nas quais ele pode ser usado, também é uma estratégia que
costuma dar muito certo, como o In explica: “Se você tiver duas lojas que vendem o mesmo vestido e na loja A só tem uma imagem da
roupa no cabide, enquanto na loja B também tem uma fotografia de uma modelo usando o vestido, pode ter certeza de que a loja B vai
vender mais”.

Isso porque a loja B foi capaz de mostrar uma imagem mais próxima de como o produto será utilizado, na qual é possível ver o caimento,
a cor da estampa em relação à pele e o tamanho, e isso faz toda a diferença para o consumidor.

Uma boa dica é usar fotos que mostrem o produto todo e outras que foquem
os detalhes. Seguindo o exemplo do vestido, a loja B poderia fazer uma foto
aproximada mostrando o tecido, um detalhe na alça etc.

E, por último, é importante padronizar as fotos. Todas as imagens na sua loja –


ainda que de produtos diferentes – fazem parte de um mesmo universo. Busque
utilizar as mesmas configurações de orientação, resolução e qualidade de imagem
em todas as fotos.

Mais que um produto,


vendemos um sonho

No caso do Neto, isso é bem verdade. Vendendo itens de lazer, que


muitas vezes compõem uma casa nova, uma área de lazer para receber
os amigos ou uma casa de campo, é muito importante que o Neto invista
em ambientar as fotos de seus produtos, para que o cliente perceba que
não está comprando só uma churrasqueira, por exemplo, mas um item
que vai fazer parte de um local onde ele vai ter ótimos momentos.

uol.com.br/impulso 34
Tecnologia, Design e Usabilidade Agosto

De olho na vitrine
No e-commerce, chamamos de vitrine (ou home) a página inicial na qual seus produtos são exibidos. São os destaques que o cliente vê
assim que acessa seu site. Podem ser produtos que estão em promoção, lançamentos ou kits que você queira vender o quanto antes, o
importante é lembrar o seguinte: vitrine é um dos fatores que ajudam a formar a imagem da sua loja.

Uma vitrine com preços muito altos fará com que o visitante pense que sua loja é careira, da mesma forma que só colocar promoções na
vitrine pode passar a ideia de que sua empresa só tem produtos baratos. Por isso, muita atenção!

Um conselho bem legal, do Eduardo Delfino, é estruturar


sua vitrine com quatro colunas de produtos. A vitrine do
Empório do Lazer, por exemplo, tinha apenas duas colunas,
e essa já é uma estética um pouco ultrapassada. Se você
analisar os maiores e-commerces do Brasil, verá que a
maioria deles apresenta a vitrine com quatro colunas.

Vitrine é um assunto tão importante


que, segundo o Roberto, até 50% das
vendas são motivadas por uma vitrine
bem estruturada!

uol.com.br/impulso 35
Tecnologia, Design e Usabilidade Agosto

Rodapé
O rodapé, assim como o logo, também segue tendências. Nele, o ideal é que estejam informações de contato (telefone, SAC, e-mail e
endereço de loja física, se houver), sobre pagamento (bandeiras aceitas e meios de pagamento), selos e certificados de segurança e
ainda links para páginas institucionais, como “quem somos”, “política de trocas”, “trabalhe conosco” etc.

Seu cliente também compra dos grandes varejistas. A comparação é inevitável.


Por isso é importante se manter alerta quanto às tendências atuais.
Eduardo Delfino

uol.com.br/impulso 36
Tecnologia, Design e Usabilidade Agosto

Mais ferramentas
Existem alguns outros instrumentos que você pode incluir no seu site, desde que sua plataforma suporte, para otimizar seu
e-commerce e torná-lo um lugar mais agradável, eficiente e seguro para quem compra com você. Veja alguns deles:

Super zoom: serve para aproximar fotos para que o cliente seja capaz de ver o produto nos mínimos detalhes.

Depoimentos: para o usuário que visita, pela primeira vez, o seu site, é interessante estudar a possibilidade de
incluir uma seção de depoimentos de quem já comprou com você. Ouvir o que outros clientes têm a dizer sobre
seus produtos e sua loja pode ajudá-lo a converter novas vendas.

Avise-me: mesmo que um item esteja faltando no estoque, você não precisa perder o cliente. O “avise-me”
oferece a possibilidade de o cliente cadastrar um contato para ser alertado de quando um produto voltar para o
estoque. Essa pode ser, até mesmo, uma ferramenta para captar e-mails e enviar, futuramente, e-mail marketing,
promoções, newsletter etc.

Comentários: além dos depoimentos sobre a loja, é interessante ter comentários sobre cada artigo feitos por
quem já comprou. Pode reparar que nas páginas de produtos dos grandes varejistas sempre há espaço para avaliar
e comentar sobre sua compra. Esses comentários podem esclarecer dúvidas de clientes potenciais.

Cross-selling (ou venda cruzada): É a prática de oferecer outras mercadorias que possam complementar
a compra do cliente. Na loja virtual, funções como “quem viu isso também viu aquilo” e “produtos relacionados”
cumprem bem esse papel e ajudam a aumentar o ticket médio.

O cross-selling aumenta o valor da compra, vende produtos encalhados, otimiza o frete, porque o
cliente paga um frete só para receber mais itens, e ainda dá mais opções para o consumidor.
Roberto Muricy

uol.com.br/impulso 37
Tecnologia, Design e Usabilidade Agosto

Empório com cara de empório

Se antes a loja do Neto parecia uma das lojas da 25 de Março, agora o e-commerce de produtos de
lazer transmite a ideia que o Neto sempre quis passar. O próprio nome já remete a uma coisa mais
especializada, um pouco diferente, uma qualidade superior. Afinal, um “empório” é isso mesmo, não é?
“O meu público agora se identifica muito mais com o novo site do que com o antigo”, revelou.

Antes Depois

uol.com.br/impulso 38
CONCLUSÃO
Conclusão

Viu? Deu para chegar ao fim de mais um capítulo sem arrancar os cabelos, mesmo tratando de temas que parecem tão assustadores,
como tecnologia e design.

Descobrimos que usabilidade tem a ver com a facilidade de navegação e que um design bem-feito enche os olhos de qualquer
internauta. Vimos, ainda, que a beleza e a funcionalidade de uma loja virtual são decisivas para o cliente ficar ou não no seu site, e
podem até mesmo começar a construir na cabeça dele uma imagem da sua marca.

Outro fator que também ajuda nesse processo é a formação da vitrine, que tem de ser muito bem elaborada para destacar os produtos
para os quais você quer chamar a atenção do cliente. Ah, e a vitrine deve ter quatro colunas, lembra?!

O Eduardo Delfino até resumiu algumas dicas de tendências de layout para facilitar, são elas: topo com logo pequeno, banner grande e
botão comprar em destaque, com foco no call to action.

Mas aprendemos também que, sem uma plataforma robusta, confiável e que atenda as necessidades e respeite o tamanho do seu
negócio, nenhuma dessas recomendações vai surtir efeito.

Com tudo isso, esperamos que você tenha condições de mudar (ou criar) sua loja virtual. E agora vem a nossa call to action:
boa sorte e boas vendas!
Agora que você já sabe como otimizar seu site para vender mais e melhor, mãos à obra.
Coloque os conhecimentos em prática e faça um upgrade na sua loja.

E não se esqueça: mês que vem tem muito mais. Continue nos acompanhando por nossos canais:

Você cria o negócio. Nós damos o Impulso.

Realização: