Skip to content
Acer
Out/2023 - Análise de elementos sobrepostos
More
Share
Explore

icon picker
Out/2023 - Análise de elementos sobrepostos

Estudo de dados
Benchmarking

Conclusão

Após toda a análise, pode-se concluir que o site possui alguns pontos que devem ser melhorados em relação aos elementos flutuantes e, por vezes, sobrepostos, como por exemplo: sugerimos substituir o modo flutuante do botão de voltar ao topo para fixo no footer, sugerimos alterar sutilmente a localização do botão de acessibilidade, entre outros.
A maioria dos usuários acessa o site pelo mobile, por isso, a importância de se manter uma boa navegação - sem elementos cobrindo informações relevantes - principalmente neste dispositivo.

Para verificar o Estudo de dados
clique aqui
⁠
e para o Benchmarking
clique aqui
⁠
, ou é possível também acessar essas páginas através dos botões de navegação acima.

Abaixo, seguem as sugestões para os dispositivos mobile e desktop:

Comportamento e Sugestões

Mobile & Desktop

Componente “Acer clube” (Tela 1)
Comportamento: Houve muitos cliques de estresse e não funcionais, além de nenhum concorrente exibir esse tipo de botão flutuante.
Sugestão: Incluir o componente no botão flutuante de "ajuda" em conjunto com o botão de chat, deixando ele visível quando o botão se expandir.
Tela 1
⁠
image.png
⁠
⁠

Componente de ajuda/chat (Tela 2)
Comportamento: Esse componente é principalmente utilizado no checkout (dificuldade em inserir cupons e dúvidas de pagamento, por exemplo). Porém, ele cobre muitos conteúdos relevantes da tela. A maioria dos concorrentes possui esse botão.
Hoje, quando clicado, ele apresenta a opção de minimizar e fechar. Se o usuário clica no ícone de fechar, ele some da tela por poucos segundos e volta, tendo praticamente a resposta idêntica ao ícone de minimizar.
Sugestão:
O ideal é que, quando o usuário clicar em fechar, que esse componente se feche por completo e não apareça mais tela - nem que seja para aparecer novamente em uma nova página (ou em caso de atualização da mesma) - mas nunca logo em seguida ao seu fechamento.
É interessante ter a opção de ajuda/chat no menu hambúrguer - até no caso do usuário fechar acidentalmente o ícone de chat flutuante (considerando a correção do ponto anterior) e queira utilizar o chat novamente (sem ter a percepção de que se atualizar ou for para a próxima página, ele aparecerá de novo).
É indicado que, no footer, haja maior destaque para o elemento de chat/ajuda/fale conosco, como um componente em estado primário aberto nessa região (não flutuante), de fácil identificação pelo usuário, hoje ele está muito oculto dentro do menu.
Tela 2
⁠
image.png
⁠
⁠

Componente de acessibilidade (Tela 3)
Comportamento: Nas gravações analisadas não foi visualizada a utilização do componente. Quando os usuários interagiam com ele, era uma interação rápida - expansão e logo cliques de estresse. Além disso, ele também cobre parcialmente diversas informações (e sobrepõe outros botões), principalmente em mobile.
Sugestão:
O ideal é manter esse botão, pois apesar das observações acima, se trata de um componente muito importante para melhorar a usabilidade dos usuários com deficiência.
De acordo com a viabilidade tecnológica, o mais indicado é alterar a localização desse componente um pouco mais para cima, em ambos os dispositivos, melhorando a questão de sobreposição com outros elementos.
Tela 3
⁠
image.png
⁠
⁠

Componente com barras de ícones no checkout (Tela 4)
Atualmente, as funcionalidades de cada item desse componente são:
1º ícone: Novo carrinho - exclui todos os itens do carrinho.
2º ícone: Adiciona código do vendedor.
3º ícone: Whatsapp - Compartilha o carrinho para um número de telefone pelo app Whatsapp.
4º ícone: Facebook messenger - Compartilha o carrinho no app Facebook messenger.
5º ícone: SMS - Compartilha o carrinho por SMS.
6º ícone: Link - Compartilha o carrinho através de um link.
7º ícone: Gmail - Compartilha o carrinho pelo e-mail do Google.
8º ícone: E-mail - Compartilha o carrinho por e-mail.
Tela 4
⁠
image.png
⁠
⁠
Comportamento: Esse componente não teve muita interação dos usuários e, ainda, cobriu informações importantes do carrinho.
Sugestão: O ideal é remover esse componente, pois além de cobrir algumas partes da tela, está apresentando informações muito confusas, repetitivas e que podem ser resumidas e ilustradas de outras formas como, por exemplo, nas sugestões abaixo:
Adicionar texto/botão de remover todos os itens do carrinho, substituindo, assim, o 1º ícone.
Adicionar texto/botão de adicionar código do vendedor, de maneira não tão evidente (por ser não ser uma funcionalidade tão relevante) no carrinho/checkout, substituindo, assim, o 2º ícone.
Adicionar ícone/botão de compartilhar carrinho e, caso clicado pelo usuário, dar a opção de modo de compartilhamento (whatsapp, facebook messenger, sms, link, gmail, e-mail), substituindo, assim, os ícones 3º ao 8º.

Desktop (Exclusivo)

Componente “Visto recentemente” (Tela 5)
Comportamento: Esse componente apresentou pouca interação relevante com os usuários, a maioria que o expandia, era para fechá-lo em seguida e não para ir à PDP do produto sugerido.
Sugestão: Retirar. Sugerimos colocar uma vitrine com a mesma funcionalidade, por exemplo, na PDP - junto com a vitrine “Você também pode gostar de” (Tela 6) e/ou home.
Tela 5 Tela 6
⁠
image.png
⁠
image.png
⁠
⁠

Componente “Voltar ao topo” (Tela 7)
Comportamento: O botão "Voltar ao topo" quase sempre aparecia cortado pela metade (em sobreposição com outros elementos), sobrecarregando o usuário com informação em excesso e sem apresentar muita relevância em cliques úteis.
Sugestão: Ao invés de deixar o botão flutuante acompanhando a navegação a partir da segunda dobra, o ideal é ter um botão no footer - como podemos visualizar no exemplo do site da Amazon (Tela 8).
Tela 7 Tela 8
⁠
image.png
⁠
Captura de Tela 2023-10-20 às 17.43.05.png
⁠
⁠

Componente de cashback (Tela 9)
Comportamento: Esse componente não foi exibido nas gravações analisadas.
Motivo: Esse componente está vinculado externamente ao site Meliuz. Quando o usuário possui cadastro nesse site e adiciona a extensão ao navegador, os elementos flutuantes aparecerão automaticamente, logo, a Acer não tem influência sobre esse ponto. Então, não há sugestões quanto à melhoria do local do componente.
Tela 9
⁠
image.png
⁠
⁠


Próxima Página →
Estudo de dados
⁠
⁠


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.