Este artigo foi escrito em 6 de novembro de 2026.
As ferramentas de IA mudam rapidamente. A necessidade de decidir se você deve interromper o usuário, abrir um painel lateral ou subir um bloco pela parte inferior da tela não muda. Caixa de diálogo (dialog), gaveta (drawer), folha inferior (bottom sheet), menu suspenso (dropdown), abas (tabs) e acordeão (accordion): essas são formas de solicitar informações. Os menus das ferramentas vão mudar de lugar; por isso, encare este texto como um guia sobre interrupções, e não como um catálogo para decorar.
Uma seção fixa na página abriga dados que não mudam: o endereço, os preços ou os horários. No entanto, existem informações que atrapalham se ficarem o tempo todo na tela, mas que fazem falta se forem enviadas para uma página totalmente nova: filtros de busca, confirmações rápidas ou respostas longas que quase ninguém lê. Na linguagem do dia a dia, costuma-se agrupar tudo isso sob o termo “pop-up” (popup), e é por isso que os modelos de IA cometem tantos erros. Para acertar, divida a decisão em três perguntas: É indispensável pausar a navegação do usuário? A página principal pode continuar visível ao fundo? Trata-se apenas de alternar a visualização da mesma lista?
Parar, compartilhar ou alternar
Uma caixa de diálogo (dialog), também chamada de modal (modal), fica centralizada na tela e escurece todo o fundo. Ela deve ser reservada para momentos em que o usuário precisa responder antes de realizar qualquer outra ação com segurança: apagar um registro, confirmar um agendamento ou corrigir um campo obrigatório que ficou em branco. Não é o lugar adequado para textos longos, menus ou avisos surpresa. Enquanto estiver aberta, o foco do teclado (focus) deve permanecer preso dentro dela; a tecla Escape ou um botão de cancelamento explícito devem fechá-la e retornar o foco de navegação para o botão que a acionou. Se você não definir essa condição no prompt, a IA vai desenhar uma caixa sem saída para o teclado, travando quem não usa mouse. Essa regra não é um detalhe secundário: é a condição essencial de uso.
Uma gaveta (drawer) desliza a partir da borda inicial (start edge) e mantém a página principal visível ao fundo. É ideal para tarefas secundárias que consultam o conteúdo da tela: aplicar filtros em uma lista, ver detalhes de um item ou ajustar configurações que não são críticas. O fechamento é feito pela tecla Escape ou com um toque fora do painel. Em páginas escritas da direita para a esquerda, como no árabe, a borda inicial fica à direita; por isso, especifique sempre “start edge” no prompt em vez de fixar a direita, evitando que a gaveta abra no sentido contrário ao da leitura.
Uma folha inferior (bottom sheet) sobe a partir da base do celular. Ela funciona como a versão móvel da gaveta para quem segura o aparelho com uma só mão. É excelente para oferecer poucas ações sobre o item recém-selecionado: ligar, salvar ou compartilhar. Não deve ser usada para formulários extensos de vinte campos. A folha deve parar em uma altura intermediária ou de pré-visualização, podendo ser fechada ao arrastar para baixo ou pressionando Escape. Se não houver um termo técnico consagrado no seu idioma, não invente um: a expressão “um painel que sobe da base” acompanhada do termo “bottom sheet” explica tudo o que é preciso.
O mesmo lugar, uma visão diferente
Um menu suspenso (dropdown) abre uma lista curta ao lado de um controle e se recolhe assim que uma opção é escolhida. Serve para selecionar idiomas, ordens de exibição ou quantidades. Não é um menu de navegação principal nem um local para parágrafos. Se a lista passar de cerca de dez itens, ela exige uma página própria ou uma gaveta, e não um menu flutuante que acaba saindo da tela do celular.
As abas (tabs) organizam visões diferentes no mesmo espaço, permitindo alternar entre elas na horizontal. Essas visões estão no mesmo nível de importância: esta semana e próxima semana, ou descrição e ingredientes. Todos os rótulos das abas devem continuar visíveis ao mesmo tempo; se forem escondidos dentro de um menu suspenso, deixam de funcionar como abas.
Um acordeão (accordion) empilha blocos de perguntas e respostas que se expandem para baixo, um por vez ou vários juntos (especifique no prompt a sua preferência). É muito útil para informações secundárias que a maioria prefere pular, como regras de envio ou dúvidas frequentes. Evite colocar a única menção ao preço dentro de um acordeão fechado; deixá-lo oculto parte do pressuposto de que o usuário não precisa dessa informação, e o preço não é um dado secundário.
É muito comum confundir abas e acordeões porque ambos “economizam espaço”. As abas substituem o conteúdo exibido mantendo os títulos alinhados no topo. O acordeão empurra o restante da página para baixo e esconde a resposta até ser clicado. Se você apenas pedir à IA para “economizar espaço”, ela vai escolher um dos dois ao acaso; você deve dar o nome exato da estrutura que corresponde à forma como a pessoa vai buscar a informação.
Dois componentes errados no mesmo sistema
O sistema de uma escola precisava de duas interações distintas: uma ação delicada (cancelar a vaga de um aluno) e uma ação comum (filtrar apenas as aulas do período da noite). A primeira versão colocou ambas dentro do mesmo “pop-up” (popup), porque essa era a única palavra que constava na solicitação. Como resultado, cancelar uma vaga virou um erro muito fácil de cometer ao tocar na tela, enquanto o filtro da noite escondia a lista que o professor ainda estava lendo. Uma única palavra gerou duas soluções ruins.
A correção consistiu em separar os termos. Para o cancelamento, usou-se uma caixa de diálogo (dialog) que escurece o fundo, explica claramente quem perderá a vaga e permite fechar pelo Escape ou por um botão visível de cancelar, retornando o foco de navegação para o botão de origem. Para o filtro da noite, usou-se uma gaveta (drawer) a partir da borda inicial (start edge), mantendo a lista visível ao lado e fechando com um toque fora do painel. No celular, esse mesmo filtro vira uma folha inferior (bottom sheet) para facilitar o alcance do polegar. O professor não precisa aprender três programas diferentes; ele só precisa que a interface respeite quando deve pará-lo e quando deve deixá-lo trabalhar.
Escreva essa diferença funcional no seu idioma para que a equipe compreenda a lógica, e mantenha os termos em inglês na instrução técnica para evitar que a IA junte tudo de novo em um pop-up genérico. Se no seu idioma não houver uma palavra cotidiana para drawer, a definição “um painel lateral que não esconde a lista principal” transmite a ideia perfeitamente. Não perca tempo inventando um termo novo; o comportamento da tela é o que importa.
Um exemplo de instrução técnica
On the list page, put filters in a drawer from the start edge, not in a dialog. Close the drawer with Escape or a tap outside. Keep focus inside the drawer while it is open, and return focus to the filter button when it closes.
Logo abaixo, no seu idioma, especifique quais são os filtros reais. A IA consegue construir a gaveta sem saber de antemano que os filtros serão por bairro ou faixa de preço. Essas definições devem ser feitas por você no seu idioma. A estrutura técnica é compartilhada em inglês; o conteúdo responde à sua realidade local.
Discute-se muito sobre qual desses componentes parece mais moderno, mas a conversa que realmente importa é qual deles respeita a tarefa do usuário. Parar a navegação só para pedir uma ordenação de lista é inconveniente; esconder uma confirmação destrutiva dentro de um menu suspenso silencioso é perigoso. Quando essas duas regras se tornam naturais, a etapa mais complexa do design foi superada. O próximo passo é mais curto, mas costuma ser esquecido: como confirmar ao usuário que a ação deu certo, sem precisar recarregá-lo com uma página nova.