WEBVTT

00:00:00.000 --> 00:00:04.400
Olá, time de marketing web da Lead Lovers, que bom ter todo mundo aqui pra essa nossa

00:00:04.400 --> 00:00:05.400
aula prática.

00:00:05.400 --> 00:00:09.920
Olha só, a ideia hoje é ir direto ao ponto e derrubar alguns dos maiores mitos de Y e

00:00:09.920 --> 00:00:11.200
o X que andam por aí.

00:00:11.200 --> 00:00:15.680
E vão fazer isso usando dados concretos, direto na fonte, porque, vamos ser sinceros,

00:00:15.680 --> 00:00:20.000
a navegação de um site ou produto digital não pode ser baseada no famoso Eu Acho,

00:00:20.000 --> 00:00:21.000
né?

00:00:21.000 --> 00:00:22.000
Tem que ser comportamento medido.

00:00:22.000 --> 00:00:25.380
Então a gente vai ver exatamente como parar de perder visitantes naquele silêncio

00:00:25.380 --> 00:00:26.380
absoluto.

00:00:26.380 --> 00:00:27.380
Bora lá?

00:00:27.380 --> 00:00:32.600
Essa rota de hoje passa rapidinho por seis pontos-chave, navegação oculta, mega-menus,

00:00:32.600 --> 00:00:38.520
alvos de toque, o uso de abas e URLs, aquele debate clássico entre paginação e rolagem

00:00:38.520 --> 00:00:41.400
e pra fechar, um checklist bem prático.

00:00:41.400 --> 00:00:44.320
Vamos começar falando da navegação oculta.

00:00:44.320 --> 00:00:49.040
Sabiam que o menu mal resolvido é, literalmente, o assassino silencioso das nossas taxas

00:00:49.040 --> 00:00:50.040
de conversão?

00:00:50.040 --> 00:00:53.560
A pessoa não acha o que quer e simplesmente vai embora, sem falar nada.

00:00:53.560 --> 00:00:55.360
E, nossa, os números assustam.

00:00:55.380 --> 00:01:00.100
Um estudo do Nielsen Norman Group, de 2016, mostrou que no desktop, as pessoas usam um

00:01:00.100 --> 00:01:05.660
menu escondido, tipo aquele famoso ícone de hambúrguer, em só 27% das vezes.

00:01:05.660 --> 00:01:09.420
Isso despenca se a gente comparar com os quase 50% de uso quando a navegação está

00:01:09.420 --> 00:01:11.300
ali, visível, logo de cara.

00:01:11.300 --> 00:01:16.060
E o estrago maior aparece na hora de resolver tarefas no dia a dia.

00:01:16.060 --> 00:01:17.060
Olha isso.

00:01:17.060 --> 00:01:22.900
Esconder a navegação no desktop deixa a conclusão de uma tarefa 39% mais lenta.

00:01:22.900 --> 00:01:24.140
É muita coisa.

00:01:24.140 --> 00:01:27.920
No celular o impacto é bem menor, bate lá nos 15%.

00:01:27.920 --> 00:01:31.920
É por isso que o menu hambúrguer até passa na telinha do smartphone, mas no desktop,

00:01:31.920 --> 00:01:34.800
nossa, é um erro fundamental e caríssimo.

00:01:34.800 --> 00:01:36.560
A regra aqui é super clara.

00:01:36.560 --> 00:01:39.960
O que a pessoa usa muito tem que morar na superfície.

00:01:39.960 --> 00:01:44.360
Isso tudo puxa um conceito fantástico também do Nielsen Norman Group, que é o aroma

00:01:44.360 --> 00:01:45.720
de informação.

00:01:45.720 --> 00:01:49.800
Basicamente a capacidade de um link dizer exatamente o que tem do outro lado antes

00:01:49.800 --> 00:01:51.520
mesmo de acontecer o clique.

00:01:51.520 --> 00:01:56.140
Pensa comigo, trocar um botão genérico de SaibaMais para um bem direto tipo ver planos

00:01:56.140 --> 00:02:00.900
e preços é a melhoria mais barata e com maior retorno financeiro que a nossa equipe pode

00:02:00.900 --> 00:02:02.740
aplicar na arquitetura de informação.

00:02:02.740 --> 00:02:07.940
Beleza, avançando para o nosso segundo ponto, os mega menus e a acessibilidade.

00:02:07.940 --> 00:02:14.420
Os mega menus dominam quase 90% dos grandes e-commerce hoje, mas olhe o problema.

00:02:14.420 --> 00:02:20.540
O Baymart Institute descobriu em 2023 que impressionante se 100% dos sites implementam muito

00:02:20.540 --> 00:02:24.840
mal aquele drop down que abre só de passar o mouse por cima, o famoso hover.

00:02:24.840 --> 00:02:28.960
E isso cria uma experiência super frustrante e caótica para quem navega.

00:02:28.960 --> 00:02:33.620
A gente chama esse problema de flickering, que é basicamente a sentilação do menu.

00:02:33.620 --> 00:02:37.940
É quando o painel abre e fecha que nem louco porque o mouse cruzou a área do gatilho

00:02:37.940 --> 00:02:40.200
por, sei lá, um milisegundo de bobeira.

00:02:40.200 --> 00:02:44.400
Imagina a raiva da pessoa tentando mover o mouse rapidinho na diagonal para clicar

00:02:44.400 --> 00:02:48.160
numa subcategoria específica e puff, o menu fecha de repente.

00:02:48.620 --> 00:02:53.140
A melhor parte, resolver isso e evitar essa desistência custa literalmente uma única

00:02:53.140 --> 00:02:54.300
linha de código.

00:02:54.300 --> 00:02:59.700
É só colocar um atraso minúsculo, coisa de 300 a 500 milisegundos, antes do menu abrir

00:02:59.700 --> 00:03:01.260
e antes de fechar.

00:03:01.260 --> 00:03:06.160
Só esse pequeno respiro já mata a imensa maioria desses disparos acidentais pelo mouse.

00:03:06.160 --> 00:03:08.020
É genial de tão simples.

00:03:08.020 --> 00:03:12.120
E aproveitando o que estamos falando dos bastidores técnicos do menu, a gente precisa

00:03:12.120 --> 00:03:15.820
derrubar um mito de acessibilidade que custa muito caro.

00:03:15.820 --> 00:03:21.160
Às vezes, geradores de código por inteligência artificial leem a palavra menu e jogam a tag

00:03:21.160 --> 00:03:24.480
area colon rolling colon menu na navegação.

00:03:24.480 --> 00:03:28.720
Só que essa tag é exclusiva para assumis que imitam o aplicativo do sistema operacional,

00:03:28.720 --> 00:03:30.160
tipo editar ou deletar.

00:03:30.160 --> 00:03:33.080
E isso exige um controle super complexo pelo teclado.

00:03:33.080 --> 00:03:37.600
A navegação principal do site, essa tem que usar sempre a tag HTML clássica como

00:03:37.600 --> 00:03:40.400
a lista simples de links, sem invenção.

00:03:40.400 --> 00:03:44.720
Indo para o nosso terceiro tópico, alvos de toque na prática.

00:03:44.720 --> 00:03:48.620
Uma interface elegante não adianta nada, se não der para clicar direito e sem ambiguidade,

00:03:48.620 --> 00:03:49.620
né?

00:03:49.620 --> 00:03:54.780
Pelas regras legais do W3C no WCAG 2.2, o tamanho mínimo absoluto de um alvo de toque é de

00:03:54.780 --> 00:03:57.060
24x24 pixels.

00:03:57.060 --> 00:04:00.460
Mas se a gente pensar no conforto de verdade, as recomendações sobem bastante.

00:04:00.460 --> 00:04:06.540
A Apple pede 44x44 pontos no iOS e o Google vai para 48x48 no Android.

00:04:06.540 --> 00:04:09.300
A gente sempre tem que desenhar a interface pensando no conforto de quem está tentando

00:04:09.300 --> 00:04:11.780
clicar com uma mão só na tela do celular.

00:04:11.960 --> 00:04:20.520
A aba são ótimas, mas elas servem estritamente para alternar visões paralelas de uma mesma

00:04:20.520 --> 00:04:21.520
coisa.

00:04:21.520 --> 00:04:24.040
O Newson Norman Group alerta uma regra de ouro.

00:04:24.040 --> 00:04:28.280
Se a pessoa precisa ficar comparando os dados que estão em painéis diferentes, as abas

00:04:28.280 --> 00:04:32.400
vão fritar memória de curto prazo dela e dificultar muita interação.

00:04:32.400 --> 00:04:36.720
Na dúvida, se a comparação for essencial para a conversão, uma página única continua

00:04:36.720 --> 00:04:38.240
sem prevencias abas.

00:04:38.240 --> 00:04:42.100
E tem um detalhe técnico da documentação do Next S que é sensacional.

00:04:42.100 --> 00:04:45.740
Onde a gente deve guardar informação de qual aba está aberta?

00:04:45.740 --> 00:04:49.980
Na URL, a aba ativa é um estado da página.

00:04:49.980 --> 00:04:54.780
Quando a gente faz isso, os ganhos são enormes, o link pode ser salvo nos favoritos ou compartilhado

00:04:54.780 --> 00:04:55.780
com alguém.

00:04:55.780 --> 00:04:59.620
O servidor já carrega a página exatamente no estado certo e, claro, as nossas ferramentas

00:04:59.620 --> 00:05:04.260
de analíticos conseguem monitorar o comportamento de um jeito super limpo e preciso.

00:05:04.260 --> 00:05:05.860
Chegamos no módulo 5.

00:05:05.880 --> 00:05:08.520
Imaginação versus rolagem infinita.

00:05:08.520 --> 00:05:14.920
Depois de analisar mais de 5.500 horas de testes práticos, o Baymour Institute cravou o grande

00:05:14.920 --> 00:05:17.040
vencedor para a lista de produtos.

00:05:17.040 --> 00:05:21.920
E a coroa vai para o botão carregar mais, junto com aquele carregamento sob demanda

00:05:21.920 --> 00:05:23.600
o famoso Lazy Loading.

00:05:23.600 --> 00:05:27.640
O Newson Norman Group avisa que aquela rolagem infinita clássica só funciona bem

00:05:27.640 --> 00:05:28.880
para feitos sociais.

00:05:28.880 --> 00:05:33.040
No eCommerce, ela quebra acessibilidade, torna um roda-pena alcançável e é um

00:05:33.040 --> 00:05:36.140
desastre absoluto para o CEO.

00:05:36.140 --> 00:05:40.980
E por falar em SEO, o Google Search Central mudou as regras e foi super direto.

00:05:40.980 --> 00:05:44.700
Eles não usam mais aquelas tags antigas de anterior e próximo.

00:05:44.700 --> 00:05:50.260
O buscador agora exige links de âncora de verdade e uma URL única para cada página.

00:05:50.260 --> 00:05:51.500
Por que isso é vital?

00:05:51.500 --> 00:05:55.180
Porque os robôs tradicionais de busca e os novos agentes de inteligência artificial

00:05:55.180 --> 00:05:59.780
de 2026, como o Cloud, não clicam em botões e não rolam a tela.

00:05:59.800 --> 00:06:04.640
Ou seja, sem URL únicas, o nosso catálogo de produtos fica praticamente invisível na

00:06:04.640 --> 00:06:05.640
internet.

00:06:05.640 --> 00:06:07.520
Sabe o que é muito irritante também?

00:06:07.520 --> 00:06:12.880
13% dos eCommerce cometem o erro bizarro de não devolver a pessoa para a mesma posição

00:06:12.880 --> 00:06:15.200
na lista quando ela clica no botão de voltar.

00:06:15.200 --> 00:06:19.440
A pessoa entra no produto, clica em voltar para continuar olhando a vitrine e vai parar

00:06:19.440 --> 00:06:21.120
lá no topo de novo.

00:06:21.120 --> 00:06:22.120
Resultado?

00:06:22.120 --> 00:06:23.120
Ela desiste.

00:06:23.120 --> 00:06:26.840
É obrigatório a gente usar a History API do navegador para restaurar a posição

00:06:26.840 --> 00:06:28.240
exata da rolagem.

00:06:28.260 --> 00:06:30.500
E tem um ponto crucial para entender de vez.

00:06:30.500 --> 00:06:33.820
Não dá mais para tratar a acessibilidade na web como opcional.

00:06:33.820 --> 00:06:34.820
Virou lei.

00:06:34.820 --> 00:06:36.220
E com prazos muito apertados.

00:06:36.220 --> 00:06:40.900
É Europa, entra com o European Accessibility Act em junho de 2025.

00:06:40.900 --> 00:06:44.020
Aqui no Brasil, a Justiça Federal já está cobrando a prática da lei brasileira de

00:06:44.020 --> 00:06:47.900
inclusão a 13.146 para meiardos de 2026.

00:06:47.900 --> 00:06:50.260
A ótima notícia é que a tecnologia está do nosso lado.

00:06:50.260 --> 00:06:54.100
Ferramentas modernas como o TAN Stack Table V9 estão aí para renderizar listas

00:06:54.120 --> 00:06:58.640
gigantescas consumindo pouquíssima memória e de forma totalmente acessível.

00:06:58.640 --> 00:07:02.880
E para finalizar, o nosso módulo 6, o checklist de saída.

00:07:02.880 --> 00:07:07.640
Resumindo tudo isso em ações claras, baseadas em testes reais de usuários, aqui estão as

00:07:07.640 --> 00:07:11.640
ordens de marcha para a gente aplicar nos produtos da Lead Lovers hoje mesmo.

00:07:11.640 --> 00:07:12.640
1.

00:07:12.640 --> 00:07:14.480
Leia os rótulos de menu de forma isolada.

00:07:14.480 --> 00:07:16.560
Cada palavra tem que fazer sentido sozinha.

00:07:16.560 --> 00:07:17.560
2.

00:07:17.560 --> 00:07:21.640
Coloquem aquele atraso de 300 a 500 milissegundos nos menus flutu-mantes.

00:07:21.640 --> 00:07:22.640
3.

00:07:22.640 --> 00:07:25.180
Colquem alvos de toque menores que 24 pixels.

00:07:25.180 --> 00:07:26.180
É o mínimo.

00:07:26.180 --> 00:07:27.180
4.

00:07:27.180 --> 00:07:29.140
Estado de aba e filtro sempre na URL.

00:07:29.140 --> 00:07:30.140
E 5.

00:07:30.140 --> 00:07:33.860
Usem o botão carregar mais com URLs únicas, em vez de rolagem infinita.

00:07:33.860 --> 00:07:37.300
Para encerrar nossa aula, eu quero deixar uma provocação final para a equipe refletir.

00:07:37.300 --> 00:07:40.900
A nossa navegação digital está realmente pegando as pessoas pela mão e guiando para

00:07:40.900 --> 00:07:41.900
a conversão?

00:07:41.900 --> 00:07:45.220
Ou será que, sem a gente perceber, a nossa estrutura está silenciosamente

00:07:45.220 --> 00:07:46.860
virando as costas para elas?

00:07:46.860 --> 00:07:51.220
O nosso foco absoluto tem que ser garantir que cada pixel de design retenha quem

00:07:51.220 --> 00:07:52.220
chega.

00:07:52.220 --> 00:07:54.600
Será que ela olhada crítica nas nossas plataformas hoje mesmo?

00:07:54.600 --> 00:07:56.640
Muito obrigado pela companhia pessoal e mãos à obra.