O Guide Global indica as dimensões 768px x 520px, com a ressalva de que poderão sofrer ajustes.
Em nossa análise no Hotjar, verificamos que os usuários não estavam interagindo com o fullbanner e ele ocupa quase totalmente a primeira dobra, conforme vemos abaixo:
Então, o ideal é que as dimensões sejam menores (360px x 274px) para deixar visíveis, aos usuários, outras informações relevantes ainda na primeira dobra.
Seguindo o Guide Global, eles orientam um banner, com título, subtítulo e texto, e CTA conforme abaixo:
Analisando a concorrência e as referências Nike e Adidas, é interessante ter um fullbanner com as dimensões que recomendamos (para não gerar o efeito de false floor da Nike e deixar outros elementos ainda na primeira dobra) e um título, subtítulo e CTA ou apenas um texto e CTA, dependendo do conteúdo do banner.
Referências:
3 Banners Pequenos Estáticos de Categoria
Título H2: Compre por Categoria
Banners: Feminino | Masculino | Esportes
Link clicável - Feminino | Masculino | Esportes
*Os banners de categoria ajudam na navegação do usuário, deixando a jornada mais rápida e fluída.
Obs1.: Usar cores nas Seções que conversem entre si, como o Guide orienta abaixo.
*A vitrine diferenciada é intuitiva e deixa as principais categorias visíveis ao usuário com apenas um clique.
Card de Produto (hierarquia das informações abaixo)
Tags dos produtos - ideal que siga as orientações do Guide Global:
Então, para produtos com desconto e, dando maior destaque, o ideal é seja na cor vermelha. Hoje está na cor primária, conflitando com as orientações.
Ideal que a tag de desconto, para ficar ainda mais intuitiva para o usuário e deixar o design mais clean seja alterada de 20% OFF para -20%.
Imagem do produto.
Informações abaixo da imagem:
Título do produto na cor primária e em tamanho adequado para leitura;
Feminino | Masculino | Infantil | Unissex na cor primária e no mesmo tamanho do título;
Categoria - exemplo: Corrida | Futebol na cor cinza e em tamanho menor que o título;
Valor do produto na cor primária e no mesmo tamanho do título. Obs.: Ideal é deixar a informação do valor parcelado para a PDP. E, ainda, quando tiver desconto, deixar o valor antigo na cor cinza com um risco por cima, como na referência 2.
Ideal é deixar sem o CTA “comprar”, deixando apenas um CTA de “Ver Detalhes”, abrindo um modal de Quick View, com seletor de tamanho e botão “comprar”, encurtando a jornada do usuário e facilitando a jornada.
Avaliações (referência do Global) - se tiver ou se desejarem no futuro. É sempre interessante ter avaliação no produto, pois os usuários estão sempre verificando o que outras pessoas disseram sobre o produto para tomarem a decisão e comprar.
Bullets - deixando intuitivo ao usuário de que há mais elementos, como na referência 3. Obs.: No Guide Global não estão previstos os bullets, mas recomendamos a utilização, pois as setas hoje em mobile já estão caindo em desuso e os usuários já estão mais habituados com o swipe/arrastar para o lado.
*O redsign do card de produto é necessário, pois atualmente está fora das orientações do Guide Global, bem como não atende as regras de acessibilidade.
Referência 1:
Referência 2:
Referência 3:
Referência do Global:
Banners de Coleções
Título: Coleções
3 full banners com imagem, título, subtítulo e CTA “Ver Coleção”
Título: Gel-Nimbus
Subtítulo: Conforto e máxima absorção de impacto
CTA “Ver Coleção”
Título: Gel-Kayano
Subtítulo: Pisada estável para um mindset mais equilibrado
CTA “Ver Coleção”
Título: Gel-Cumulus
Subtítulo: Para uma corrida ainda mais suave e macia
CTA “Ver Coleção”
*A sugestão da utilização de banners de coleção é com base no estudo de CRO que apurou os produtos mais buscados pelos usuários, então, já deixando coleções com os produtos mais procurados, facilitamos a jornada. E, também atende as orientações do Global.
Banners de Departamentos
3 full banners com imagem, título, subtítulo e CTA “Ver Produtos”, conforme a Referência da Nike abaixo.
Título: Volta às Aulas
Subtítulo: Tudo para você brilhar no primeiro dia
CTA “Ver Produtos”
Título: Lançamentos
Subtítulo: Conheça nossos novos produtos
CTAs de igual relevância (na mesma cor) “Mulheres” e “Homens”
Título: Outlet
Subtítulo: Até 64% OFF
CTA “Ver Produtos”
*Os banners de departamentos foram pensados para dar visão aos usuários dos produtos de uma maneira mais visual e categorizado, deixando a navegação fluída e atrativa. E, também atendem as orientações do Global.
Referência:
Vitrine de Produtos
Título: Você também pode se interessar
*É interessante manter a vitrine com o título acima, por ter gerado 10% dos cliques em mobile, segundo o estudo de CRO. Apesar do Guide Global não mencionar as vitrines de produtos, e o site americano não possuir, em outras análises que realizamos, verificamos que as vitrines auxiliam o usuário na decisão de compra, pois elas encurtam a jornada daqueles usuários que estão buscando um produto com mais rapidez. Com base em nosso benchmarking, as grandes marcas possuem até 2 vitrines de produtos, então, nosso design ficará no mesmo patamar.
Texto de Apoio da Marca
Título: Eleve sua performance com a ASICS
Subtítulo: Tênis de corrida, tênis de treino, roupas esportivas, acessórios e mais.
Texto: Desde 1949 nosso objetivo é melhorar o bem estar mental por meio do movimento. É por isso que somos chamados de ASICS, que é um acrônimo para a frase em latim "Anima Sana In Corpore Sano", mente sã em corpo são.
Newsletter
Hoje está assim:
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
