Question 1

Teste a experiência em dispositivos móveis

Nossa primeira dica é tirar proveito da visualização para dispositivos móveis no criador de Brand Store. Você pode criar com facilidade uma visualização da sua Store para dispositivo móvel ou computador e uma versão da sua Store será criada automaticamente para o outro dispositivo. Ao desenvolver sua Store, você pode alternar entre as visualizações de dispositivo para ver o progresso do seu design em tempo real e adicionar assets otimizados para cada dispositivo.

Exemplos de visualização em computador x visualização em dispositivo móvel

Testar sua Store em um dispositivo móvel real é a maneira mais eficaz de descobrir erros que podem afetar a experiência de seus compradores em dispositivos móveis. Deixe o computador ou notebook de lado e acesse sua Store em um telefone ou tablet. Clique nas páginas e blocos. Sua Store é fácil de navegar? Os textos e ilustrações são fáceis de ler?

Para testar a experiência da sua Store:

Clique em Visualização > Compartilhar visualização no criador de Brand Stores.

Exemplo da funcionalidade de compartilhamento de visualização no criador de Brand Stores

Copie o link de visualização
Cole o link de visualização em um e-mail ou em outro lugar ao qual você tenha acesso no celular (Dica: inclua a senha do link de visualização em uma linha separada para que seja mais fácil copiá-la e inseri-la posteriormente).
Navegue pela sua Store no seu dispositivo móvel como se você fosse um comprador e faça anotações sobre o que precisa ser aprimorado. É fácil de navegar? Você consegue encontrar os produtos ou informações que está procurando? Como suas imagens aparecem em um dispositivo móvel?

Question 2

Certifique-se de que suas imagens não apareçam cortadas em dispositivos móveis

Devido à diferença de tamanho de tela entre o monitor de um computador e uma tela de celular, às vezes um design de bloco fica legível em computadores, mas não em dispositivos móveis. Embora as Brand Stores ajustem as imagens automaticamente para diferentes tamanhos de tela, isso não significa que todos os elementos ficarão legíveis em dispositivos móveis, especialmente se o texto já estiver pequeno na visualização do computador.

Nesses casos, recomendamos carregar uma imagem separada para dispositivos móveis que tenha sido otimizada em termos de layout e tamanho da fonte. Isso pode ser feito alternando para a versão móvel e carregando a imagem para dispositivos móveis no painel do lado direito do criador de Brand Stores, conforme mostrado no exemplo abaixo:

Exemplo da interface do criador de Brand Stores sobre como editar imagens para dispositivo móvel

É importante levar em conta que a opção de carregar uma imagem separada para dispositivos móveis está disponível apenas para blocos de imagem e para a imagem do cabeçalho. Essa opção não está disponível para outros widgets que usam imagens com texto ou imagem com itens para compra.

Question 3

Certifique-se de que o conteúdo apareça na ordem correta

As telas de dispositivos móveis são mais estreitas e desenvolvidas para rolagem mais rápida, o que significa que a ordem e o layout do conteúdo não são exatamente os mesmos em computadores e dispositivos móveis. Brand Stores em dispositivos móveis usam uma priorização de linha da esquerda para a direita para a ordem do conteúdo, ou da direita para a esquerda quando o árabe estiver definido como idioma preferencial. Veja um exemplo abaixo:

Exemplo de conteúdo exibido na visualização de computador x dispositivo móvel

Verifique sua Store em um dispositivo móvel para confirmar se o conteúdo está aparecendo na ordem desejada.

Question 4

Otimize sua imagem de cabeçalho

Você pode fazer carregar uma imagem de cabeçalho separada para dispositivo móvel. No entanto, é importante levar em conta que, ao contrário de um bloco de imagem, não é possível alterar a altura dessa imagem, e as mesmas dimensões devem ser usadas tanto para dispositivos móveis quanto para computadores. Isso significa que o redimensionamento dinâmico da Brand Store para dispositivos móveis irá encolher todos os elementos gráficos dentro do cabeçalho, incluindo o texto.

Por isso, tenha em mente o seguinte para a imagem do cabeçalho em dispositivos móveis:

Tente limitar a três o número de produtos em um cabeçalho. Quanto mais produtos você usar no cabeçalho, mais confuso ele vai parecer no celular.
O texto no cabeçalho deve ter menos de 30 caracteres, para que você possa aumentar o tamanho do texto para ser legível em dispositivos móveis sem sobrecarregar o cabeçalho. Para tanto, recomendamos um tamanho de fonte mínimo de 90 pt, na fonte Arial regular ou equivalente.

Question 5

Forneça alternativas para a navegação no menu

O menu de navegação em uma Brand Store aparece de forma diferente no computador e dispositivo móvel. Em computadores, os compradores veem várias abas ao longo da barra de navegação. Em dispositivos móveis, eles veem um único menu suspenso. Veja as imagens abaixo para uma comparação:

Exemplo de menus de navegação exibidos na visualização de computador x dispositivo móvel

Esse é um fator importante a levar em conta quando se trata de destacar suas principais categorias ou abas em uma Brand Store. Colocar essas páginas principais no menu é uma boa estratégia, mas você também pode usar blocos de imagem ou texto para criar uma maneira adicional de navegar na sua Store. Adicionar esses blocos na parte superior da sua Store, juntamente com uma chamada para ação (CTA) forte, garante que os compradores possam encontrar seu conteúdo mais importante, mesmo sem expandir o menu suspenso.

Question 6

Escolha um canal eficaz para a CTA

Como leitor, como você costuma ler? Você pode ler de cima para baixo, da esquerda para a direita ou da direita para a esquerda, dependendo do seu idioma nativo. Manter esse fluxo em mente pode ajudar você a escolher um canal eficaz para o seu botão de CTA em dispositivos móveis.

Pense na importância dos elementos acima da dobra, que são as partes da página da Brand Store que ficam visíveis antes de rolar para baixo. Se uma CTA for colocada na parte inferior de um bloco vertical, é improvável que apareça acima da dobra, o que a tornará menos visível para os clientes.

CTAs em dispositivos móveis também devem ter um bom espaçamento entre si, ou um “respiro”, de modo que seja mais fácil para os clientes encontrá-las e clicar nelas. Ter um espaço limitado para uma CTA pode fazer com que se misture aos elementos ao seu redor e perca hierarquia e visibilidade.

Accepted Answer

Os consumidores passam cada vez mais tempo em seus dispositivos móveis, impulsionando o crescimento do varejo móvel. O dispositivo móvel mudou a maneira de as pessoas fazerem compras: no primeiro trimestre de 2024, 78% de todos os acessos à Brand Store foram provenientes de um dispositivo móvel.¹

Com um número tão grande de compradores usando dispositivos móveis para acessar sua Brand Store, faz sentido priorizar um design compatível com esses dispositivos.

Sabemos que, com os inúmeros tamanhos de tela, resoluções, tipos de dispositivos e navegadores, desenvolver conteúdo tanto para clientes que usam dispositivos móveis quanto para os que usam computadores é uma tarefa complexa e em constante evolução. Para que possa começar, separamos seis dicas da equipe de design de Brand Stores que ajudarão você a otimizar sua Store para compradores que usam dispositivos móveis.