Analisamos as versões móveis das 20 principais lojas on-line na Rússia por 44 fatores. Temos uma tabela infernal de uns e zeros, quase desapareceu, mas eles juntaram nossas forças e descreveram como e o que “atraem” o comprador no segmento principal do comércio eletrônico móvel.
Para analisar a adaptação móvel, pegamos as 20 melhores lojas online da classificação DataInsight . Estes são os lançadores de tendências que outros jogadores estão mirando.
Os parâmetros para a avaliação são de um grande estudo semelhante do varejo ocidental .
Não tomamos todos os parâmetros, mas identificamos 44 fatores significativos. Eles são agrupados em nove grupos:
Uma tabela com os resultados da análise para cada loja online está aqui . No artigo, examinaremos cada um dos 44 elementos da usabilidade móvel e procuraremos as principais tendências. Em cada parágrafo, indicamos estatísticas gerais: quantas lojas usam / não usam essa técnica.
Tecnologia
Spoiler As lojas online estão abandonando as versões móveis em favor dos sites "de borracha", mas a velocidade do download ainda é fraca.
Adaptabilidade vs versão móvel
14/6
Um site adaptável vence antes da versão móvel (em um subdomínio separado no formato m.site.ru). Ele não precisa ser administrado adicionalmente, não há problema de duplicação de conteúdo, o mesmo código-fonte é usado, o que reduz custos.
Não é à toa que 70% das principais lojas online da Rússia trabalham exatamente com base em sites adaptáveis. A versão móvel é algo do passado.
PageSpeed Insights Zona laranja: tudo é triste
2/20
As lojas online não têm uma velocidade de carregamento de página alta. Scripts e imagens de alta qualidade deixam sua marca. Isso se reflete especialmente na velocidade de download no celular.
Somente 1 em cada 20 sites vai para a zona verde quando marcado no serviço Google PageSpeed Insights . Mas mesmo chegar à zona "laranja" ainda é difícil - também há apenas 1 site aqui. Os 18 sites restantes têm menos de 50 pontos e caem na zona vermelha.
Assim, se você trabalhar para acelerar o site, pelo menos um fator terá uma vantagem sobre os principais concorrentes em seu nicho. À luz da transição do Google para a indexação em dispositivos móveis, isso é especialmente verdade.
Elementos principais do modelo
Spoiler Existem tendências óbvias: um menu de hambúrguer, um número de telefone clicável, um campo de pesquisa no site no cabeçalho e um ícone visível da cesta. É melhor não ser criativo aqui, mas acompanhar os líderes de mercado.
Quanto à fixação do menu, a promoção na parte inferior da tela ou a adição do widget de um consultor on-line, você precisa testar em cada caso.
Menu fixo
9/11
A tendência para corrigir os principais itens de menu na parte superior da tela ao rolar uma página é implícita, mas há uma vantagem. Isso é lógico - os elementos de navegação mais importantes estão localizados no menu. E é bom quando eles estão à mão ao rolar.
Verifique se o menu não ocupa muito espaço na tela em detrimento de outros itens.
Número de telefone clicável
15/5
Todos os números de telefone no site devem ser clicáveis para chamadas instantâneas. Não há opções. Copiar um número alternando entre aplicativos de telefone ainda é um problema.
Mas, como você vê, nem todas as lojas aderem a esse princípio óbvio.
Menu Hambúrguer
19/1
A tendência ainda é favorável aos hambúrgueres, mas aqui vale a pena começar a partir do site de destino. Para uma audiência mais conservadora, use o menu de texto familiar - um hambúrguer pode ficar sem supervisão.
Pesquisa na loja
16/4
Se você possui várias lojas de marca, adicione uma pesquisa à loja mais próxima por local do visitante. Se seus produtos forem vendidos por outros revendedores, essa opção será menos prioritária.
Se você não tiver tomadas, adicione a capacidade de encontrar o ponto de entrega mais próximo.
Veja quão popular é a página de pesquisa da loja no seu sistema de análise da web. Se ela tiver tráfego intenso, coloque um link para ela no menu no cabeçalho.
O contexto para lojas on-line em nível profissional e sem agência está no sistema PromoPult . Seleção automática de palavras, geração automática de anúncios, gerenciamento de lances "inteligente". Soluções prontas para o setor. Estatísticas em tempo real.
Cesto conspícuo
17/3
É importante não ser criativo aqui. Todo mundo sabe que a cesta deve parecer uma "cesta" ou "carrinho". Tentativas de inventar ícones de direitos autorais ou colocar uma cesta em algum lugar na parte inferior da tela resultam em usuários que precisam resolver quebra-cabeças em vez de comprar mercadorias.
Promoção fixa na parte inferior da tela
16/04
Anexe informações sobre ofertas especiais ou um CTA especial na parte inferior da tela, assim como o ornitorrinco.
Rotação automática de slides no banner principal
13/07
Mais e mais lojas se recusam a autorizar automaticamente as imagens no banner superior. Dos 20 sites, 7 ainda possui esse banner, mas 13 não usam essa solução. Em geral, parece que é hora de dizer adeus aos banners na versão móvel.
Campo de pesquisa de cabeçalho: deve ter
20/0
Não oculte a pesquisa no menu, coloque-a no cabeçalho. A melhor opção é o ícone de lupa, toque no qual o campo de pesquisa é aberto. Então você economiza espaço.
Esquerda - pesquisa levou uma linha inteira em uma tela pequena. À direita está uma solução dinâmica.
Widget de consultor on-line
17/3
Um consultor online é uma opção útil para sites de comércio eletrônico. Mas no celular, essa decisão é controversa: afinal, o widget se sobrepõe a parte do conteúdo e não é fácil ocultá-lo.
Teste o widget em seu público. Instale um consultor on-line (se você não quiser pagar, há um consultor GetSale gratuito no módulo de aprimoramento de conversão PromoPult), personalize-o de acordo com o seu estilo corporativo e veja quantas chamadas / vendas serão feitas em um mês. E já tome uma decisão - deixe ou remova.
Filtros no catálogo
Spoiler Os filtros no catálogo são obrigatórios. Desejável - com a seleção simultânea de vários parâmetros. Não se esqueça do filtro para o preço.
Opções convenientes são fixar o filtro ao rolar (o principal é que ele não ocupa muito espaço) e indicar que a cor do produto no filtro não é com texto, mas com uma imagem colorida.
Filtros
19/1
Os filtros simplificam a navegação. O uso ativo de filtros continua sendo uma tendência clara.
Filtro Bloqueado de Rolagem
17/3
Esta é uma nova solução para interfaces móveis que permite aos usuários filtrar os resultados da pesquisa. Parece bem sucedido - como deveria ser. Ao rolar por um catálogo, os filtros estão sempre à mão.
Mas as lojas on-line não têm pressa para implementar a correção de filtro - talvez não desejem bloquear uma área adicional da tela (ou é difícil de implementar na versão adaptável).
Seleção simultânea de vários parâmetros
19/1
O usuário deve poder filtrar produtos ao mesmo tempo em diferentes categorias. Todos os sites analisados usam exatamente esses filtros (em um site não há filtros, portanto não existe essa opção).
Seletor de cores
16/04
Para obter o melhor UX no filtro de cores, é recomendável usar quadrados / círculos coloridos (ou uma combinação de texto e marcadores de cores) - em vez de uma descrição textual da cor.
Mas as lojas domésticas usam principalmente texto.
Filtrar por preço
17/3
Alguns sites recusam o filtro pelo preço. Eles explicam isso concentrando-se no produto, e não no seu valor. Mas na maioria das lojas existe esse filtro. E é realmente útil.
Elementos da página do catálogo
Spoiler Entre as tendências óbvias estão a capacidade de adicionar mercadorias do catálogo à cesta, exibindo classificações e descontos de produtos. Mas percorrer as imagens de mercadorias no catálogo, visualizar suas opções e carregar automaticamente mercadorias em vez de paginação ainda é novo.
Carregamento automático de mercadorias em vez de paginação
17/3
Tocar na seta "próxima página" não é tão conveniente quanto apenas virar para baixo. Mas a produção de mercadorias não entre 10 e 20-50 por página, mas com uma fita "interminável", carregada à medida que rola, ainda é exótica.
Do ponto de vista da usabilidade, uma solução intermediária também é conveniente: quando a paginação é salva, mas o botão "Mostrar" é adicionado. É mais fácil para um usuário móvel clicar em um botão grande e expandir a lista de produtos do que clicar em números / setas.
Exibir várias imagens de produtos em um catálogo
1/19
Geralmente, no catálogo, é apresentada uma imagem dos produtos. Mas existe uma solução que permite rolar pelas imagens diretamente no catálogo sem acessar o cartão do produto. É conveniente para um usuário móvel, pois você não precisa ir para uma nova página novamente. Na prática doméstica, isso ainda é uma novidade.
Marque "Novo"
10/10
Para lojas com alta taxa de retorno, a marca “Novo” é uma maneira de atrair visitantes para produtos que eles ainda não viram.
Se a atualização da variedade para um público-alvo permanente não é sua tarefa principal, preste atenção a outras qualidades do produto e não perca espaço no ícone "novo!"
Veja as opções do produto na página de categorias
18/2
Nas versões para computadores das lojas, há a oportunidade de visualizar as opções de cores para um produto na página da categoria. No celular, é melhor recusar essa opção, pois é difícil colocar o dedo nos pequenos ícones para as opções de visualização. É melhor limitar-se à inscrição "existem cores diferentes" e mostrá-las já na página do produto, onde as fotos ocupam mais espaço e será mais conveniente rolar por elas.
Classificações de produtos na página de categorias
15/5
Você não pode ter certeza de que adicionar estrelas e indicar o número de comentários na imagem do produto afetará as vendas. A julgar pelo fato de serem utilizados por um grande número de lojas estudadas, funciona. Ainda assim, faz sentido testar esse parâmetro em cada caso específico - nem todas as lojas recebem muitas críticas por uma grande massa de mercadorias.
Exibição de descontos - em categorias e no cartão
18/2
Na página da categoria, os preços com desconto devem ser exibidos em letras grandes e, possivelmente, em cores, ao lado do preço riscado sem desconto. Mas é melhor deixar o texto “você economiza muito” para a página do produto - para economizar espaço.
Lista vs lado a lado
11/09
Para lojas com uma grande variedade, para as quais é importante uma navegação rápida e conveniente, a saída de mercadorias é preferível aos ladrilhos. No entanto, no segmento premium ou em outras categorias em que você precisa fornecer mais informações sobre o produto, vale a pena listar produtos.
Opção "Adicionar ao carrinho"
16/4
A capacidade de adicionar mercadorias à cesta sem ir para a página de descrição faz sentido para produtos simples que são bem conhecidos pelo comprador (por exemplo, pedir comida). Em outros casos, é melhor testar - se os usuários clicarem neste botão, deixe-o. Caso contrário, não perca seu espaço na tela.
Comparação de produtos
8/12
Geralmente, essa opção é inconveniente para uso em dispositivos móveis. Portanto, ele precisa ser bem pensado ou completamente abandonado nas versões móveis.
Elementos da página do produto
Spoiler Imagens ampliadas do produto aprimoram a experiência do usuário. Produtos úteis e de vídeo, eles permitem que você considere o produto "ao vivo". Não será supérfluo bloquear o compartilhamento de cartões de mercadorias em redes sociais e mensageiros instantâneos.
A capacidade de ampliar a imagem
16/4
Existem duas opções: ampliar a imagem quando você clica nela ou a capacidade de “esticá-la” com os dedos. Essa é uma opção esperada pelos usuários; portanto, a maioria dos sites usa essa prática.
Vídeo na página do produto
11/09
9 dos 20 sites do estudo postam vídeos nas páginas dos produtos. Claro, para cada produto para remover o vídeo é caro. Mas, para os produtos mais populares, vale a pena fazer isso.
Botões de compartilhamento social
8/12
Esta opção não é tão facilmente usada por lojas online. Talvez o motivo seja sua baixa popularidade - se os usuários precisam compartilhar o link, eles simplesmente o copiam da linha do navegador (e em um smartphone é mais fácil tirar uma captura de tela e enviá-la imediatamente). Mas o botão para compartilhar a página não ocupa muito espaço, portanto não será supérfluo.
Elementos de personalização
Spoiler Os elementos de cross-selling e up-selling que oferecem aos usuários produtos com base em suas preferências aumentam as vendas. Não usá-los significa perder renda.
"Eles geralmente compram / navegam com este produto ..."
13/7
Se o produto selecionado exigir adições obrigatórias, esse bloco será definitivamente necessário. Exiba-o na página do produto e depois que o produto for adicionado à cesta. Então você aumentará a venda cruzada.
Vistos Recentemente
11/09
Esta é uma oportunidade conveniente para retornar rapidamente a uma página anteriormente interessada. Mas apenas 45% das lojas analisadas possuem essa opção.
Outras ofertas
13/7
Mensagens como "Você também vai gostar ...", "Mais desta marca ..." etc. tornam-se elementos familiares das páginas de produtos, não apenas de computadores, mas também de lojas móveis.
Adicionando item ao carrinho
Spoiler Não redirecione o usuário para a cesta depois de adicionar o produto. Uma visualização da cesta na janela pop-up será útil.
Permaneça no site após adicionar o produto ao carrinho
20/0
Depois de adicionar o produto ao carrinho, é recomendável deixar o usuário na página do produto e não redirecionar para a seção de checkout. O mesmo acontece com os líderes - isso significa que é justificado.
Visualizar cesta ao adicionar mercadorias
14/6
Essa é uma boa maneira de mostrar o que está na cesta sem entrar nela. Mas apenas 30% das lojas o implementaram - então agora você sabe como contorná-las por pelo menos um fator.
Pop-up da Lixeira
15/5
Uma janela pop-up é conveniente para confirmar a adição de mercadorias à cesta. Esta janela pode exibir todo o conteúdo da cesta. Ao fechar, o usuário permanece na página do produto.
Itens do carrinho
Spoiler O carrinho de compras é uma página de conversão importante. Nenhum erro pode ser feito aqui. Certifique-se de exibir uma imagem do produto com uma breve descrição. Entre as opções úteis estão uma indicação dos prazos de entrega, um lembrete dos benefícios e a capacidade de salvar a cesta. Mas a duplicação do botão de pagamento / pedido pode ser abandonada.
Imagem e descrição do produto
20/0
A cesta deve exibir uma foto de cada produto. Uma breve descrição das principais características (nome, tamanho, cor etc.) também é obrigatória. O espaço limitado na tela não significa que os usuários não se importam com o que está na cesta.
Datas de envio e entrega
15/5
Se, nesse estágio, você não puder garantir prazos de entrega específicos, indique pelo menos quando planeja enviar as mercadorias.
Lembrete de benefício
18/2
A cesta não será inapropriada para recuperar os bônus que o comprador recebe. Por exemplo, entrega gratuita, entrega no dia seguinte, devolução gratuita, bônus, período de garantia etc.
Salvar carrinho
17/3
85% dos sites da amostra recusaram a oportunidade de salvar a cesta e retornar a ela no futuro. No entanto, não se apresse nas conclusões e remova essa opção. Essa é uma opção conveniente para usuários que compram regularmente um conjunto semelhante de produtos (por exemplo, alimentos). Em outros casos, essa opção permite manter uma pessoa que não está planejando comprar agora. (A questão permanece como identificar o comprador sem registro e após a queima dos cookies).
Botão "Pagamento / Próximo"
18/2
Por um tempo, houve uma tendência de colocar um botão para alternar para a página de pagamento na parte superior e inferior da cesta. Mas quase todo mundo se recusou a duplicar botões.
Elementos da página de check-out
Spoiler Faça pedidos simples e diretos. — . . . , .
14/6
. .
, , ( , , . .).
( )
5/15
— . . .
12/8
( «») — , . — .
12/8
(, , email . .) .
13/7
, , ( - , ).
—
Isso mesmo. - , — - , - . E isso é bom. . .
— , . , , , .
— . , , , , — - . — . .
.