Módulo 3 · 6 de 7

Caso real: o zoom de 200%

Leitura: ~3 min

Caso real

O site que "quebrou" com zoom de 200%

Essa experiência vem diretamente do dia a dia como líder de design. Um cliente reportou que o sistema não estava funcionando como esperado. A equipe investigou e descobriu algo que ninguém tinha previsto: o cliente usava o site com zoom de 200% no navegador. Além disso, ele frequentemente dividia a tela do MacBook ao meio, reduzindo a largura visível para algo próximo da resolução de um tablet.

O que tinha acontecido? Durante a prototipação, a equipe projetou apenas uma versão web para um cenário "ideal", tela cheia, zoom 100%, monitor padrão. Não houve nenhuma discussão entre designers e desenvolvedores sobre como adaptar o layout para cenários diferentes: aumentos de zoom, mudanças de resolução, janelas divididas.

O resultado: o site quebrava visualmente. Elementos se sobrepunham, a navegação ficava inacessível, botões desapareciam. Por sorte, era um produto interno, e a equipe conseguiu corrigir sem grandes impactos no mercado.

Mas pense comigo: e se fosse um produto lançado para o mercado, com um público diversificado de usuários? Um usuário com baixa visão que precisa do zoom de 200% ficaria completamente travado.

A lição? Responsividade não é só "funcionar no celular". É funcionar em qualquer contexto de uso: zoom aumentado, tela dividida, fonte do sistema maior. E essa conversa precisa acontecer entre design e desenvolvimento desde a fase de prototipação, não depois que o cliente reclamar.

O que aconteceu com o layout Normal (100%) Funciona Zoom 200% Sobreposição Tela dividida Outro app Cortado Teste sempre: zoom, tela dividida, fonte maior O cenário "ideal" não é o único cenário.
Como o layout quebra em cenários reais: zoom de 200% causa sobreposição de elementos, e tela dividida corta o conteúdo.