{"id":4691,"date":"2024-12-19T17:38:54","date_gmt":"2024-12-19T17:38:54","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=4691"},"modified":"2025-01-27T12:02:56","modified_gmt":"2025-01-27T12:02:56","slug":"o-que-e-uma-janela-modal","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-uma-janela-modal\/","title":{"rendered":"O que \u00e9 uma Janela Modal?"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Quais s\u00e3o os componentes principais de uma janela modal?<\/h2>\n\n\n\n<p>Ao projetar suas janelas modais, voc\u00ea deve considerar cada um dos seguintes aspectos.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sobreposi\u00e7\u00f5es:<\/strong> Esses s\u00e3o planos de fundo que escurecem o restante da sua p\u00e1gina. No entanto, o usu\u00e1rio ainda pode ver o conte\u00fado de alguma forma. O ponto principal \u00e9 criar uma separa\u00e7\u00e3o entre a janela modal e a p\u00e1gina para que a aten\u00e7\u00e3o do usu\u00e1rio seja direcionada para a janela.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cont\u00eainer: <\/strong>Aqui, voc\u00ea colocar\u00e1 o conte\u00fado que deseja mostrar ao usu\u00e1rio. Isso \u00e9 importante para manter tudo estruturado.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cabe\u00e7alho: <\/strong>Isso normalmente \u00e9 o mesmo em todos os casos; normalmente ter\u00e1 um bot\u00e3o de fechar e o t\u00edtulo tamb\u00e9m aparecer\u00e1 aqui.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u00c1rea de conte\u00fado: <\/strong>A \u00e1rea de conte\u00fado \u00e9 onde voc\u00ea colocar\u00e1 os elementos principais de conte\u00fado da sua janela modal, como o texto principal. Quaisquer formul\u00e1rios que voc\u00ea incluir tamb\u00e9m aparecer\u00e3o aqui, assim como o conte\u00fado visual.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/hocoos.com\/pt\/?post_type=answer&amp;p=3373&amp;preview=true\">Rodap\u00e9<\/a>:<\/strong> O rodap\u00e9 normalmente cont\u00e9m os bot\u00f5es principais da janela modal. Por exemplo, um usu\u00e1rio pode ver \"Log Out\" ou \"Cancel\" se tiver selecionado uma op\u00e7\u00e3o para sair da sua conta.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Todos os elementos acima s\u00e3o importantes para suas janelas modais e, como tal, voc\u00ea deve tratar cada um deles com a mesma seriedade que os outros. Certifique-se de personalizar sua janela modal com base na marca tamb\u00e9m, com as fontes e cores necess\u00e1rias.&nbsp;<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\u00a0\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nAs janelas modais devem ser uma parte essencial da experi\u00eancia do usu\u00e1rio; use transi\u00e7\u00f5es\/anima\u00e7\u00f5es, mas mantenha-as sutis.\u00a0\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Quando as modais s\u00e3o usadas no web design?<\/h2>\n\n\n\n<p>Janelas modais s\u00e3o usadas em v\u00e1rios cen\u00e1rios de web design. Esses incluem:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Informa\u00e7\u00f5es: <\/strong>Empresas usam janelas modais para destacar informa\u00e7\u00f5es que exigem que o usu\u00e1rio tome medidas. Por exemplo, um usu\u00e1rio pode ver que precisa atualizar seus detalhes de pagamento ou perguntas de seguran\u00e7a no back-end do seu site\/aplicativo.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Entrada: <\/strong>Voc\u00ea pode ver janelas modais em alguns sites se quiser obter feedback do usu\u00e1rio ou se inscrever em uma conta.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Conte\u00fado: <\/strong>Janelas modais podem ser usadas para interatividade de conte\u00fado. Por exemplo, uma loja online pode us\u00e1-las para destacar informa\u00e7\u00f5es sobre um produto espec\u00edfico. Al\u00e9m de texto, as janelas modais geralmente cont\u00eam conte\u00fado visual (imagens e v\u00eddeos).&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A\u00e7\u00f5es:<\/strong> Os usu\u00e1rios podem confirmar a\u00e7\u00f5es importantes por meio de uma janela modal. Por exemplo, um site\/aplicativo da web pode perguntar se eles desejam excluir um elemento espec\u00edfico e confirmar sua escolha.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Janelas modais s\u00e3o algo que voc\u00ea deve considerar em situa\u00e7\u00f5es onde deseja que o usu\u00e1rio realize tarefas espec\u00edficas e geralmente incluem 1 a 2 a\u00e7\u00f5es. Elas tamb\u00e9m s\u00e3o importantes para garantir que seu p\u00fablico possa ir diretamente para a p\u00e1gina anterior ou para a pr\u00f3xima sem atrasos desnecess\u00e1rios.&nbsp;<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\u00a0\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nApesar de sua utilidade, voc\u00ea deve usar janelas modais com modera\u00e7\u00e3o.\u00a0\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Quais s\u00e3o alguns casos de uso comuns para janelas modais?<\/h3>\n\n\n\n<p>Alguns usos para janelas modais s\u00e3o:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Confirmar se um usu\u00e1rio deseja concluir uma a\u00e7\u00e3o importante, como excluir um registro<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fazer login em um servi\u00e7o que eles usam ou se inscrever se for a primeira vez<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Acessando galerias&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Alterando as prefer\u00eancias do usu\u00e1rio&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Destacando informa\u00e7\u00f5es do produto ao navegar em uma loja online<\/li>\n<\/ul>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Quais s\u00e3o as vantagens das janelas modais?<\/h2>\n\n\n\n<p>Algumas considera\u00e7\u00f5es essenciais para janelas modais s\u00e3o:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Aten\u00e7\u00e3o: <\/strong>Use janelas modais para direcionar os usu\u00e1rios para a conclus\u00e3o de uma a\u00e7\u00e3o espec\u00edfica.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Espa\u00e7amento: <\/strong>Ao implementar janelas modais, \u00e9 importante evitar confus\u00e3o.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fluxo do usu\u00e1rio: <\/strong>Aproveite as janelas modais para orienta\u00e7\u00f5es passo a passo, especialmente se um usu\u00e1rio for novo em seu produto ou servi\u00e7o.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-hierarquia-visual-de-website\/\">Hierarquia<\/a>: <\/strong>Use janelas modais para destacar o conte\u00fado mais importante.&nbsp;<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\u00a0\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nAs janelas modais devem ser usadas n\u00e3o apenas para concluir a\u00e7\u00f5es, mas tamb\u00e9m para simplificar tarefas com tutoriais.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Quais s\u00e3o os desafios das janelas modais?<\/h2>\n\n\n\n<p>Apesar de sua popularidade, voc\u00ea deve analisar os dois lados da moeda antes de decidir implement\u00e1-las. Alguns dos outros pontos a serem considerados s\u00e3o:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-a-acessibilidade-de-um-website\/\">Acessibilidade<\/a>:<\/strong> \u00c9 vital que voc\u00ea considere a acessibilidade e siga as diretrizes para maximizar a efic\u00e1cia das janelas modais.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Uso em dispositivos m\u00f3veis: <\/strong>Pense em como suas janelas modais aparecer\u00e3o em smartphones e tablets.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-seo\/\">SEO<\/a>: <\/strong>Considere o impacto das janelas modais na otimiza\u00e7\u00e3o para mecanismos de busca (SEO)<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-design-centrado-no-usuario\/\">Design<\/a>:<\/strong> Certifique-se de implementar designs envolventes que n\u00e3o irritem os usu\u00e1rios e use-os com modera\u00e7\u00e3o para manter as pessoas engajadas.<\/li>\n<\/ul>\n\n\n\n<p>Equilibrar os pr\u00f3s e os contras \u00e9 essencial durante todo o processo de design.&nbsp;<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\u00a0\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nPermita que os usu\u00e1rios fechem a janela modal se desejarem; um bot\u00e3o Fechar ou X deve ser suficiente.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o&nbsp;<\/h2>\n\n\n\n<p>Janelas modais s\u00e3o uma parte essencial de muitas <a href=\"https:\/\/hocoos.com\/pt\/\">sites<\/a> e aplicativos; antes de implement\u00e1-los, voc\u00ea precisa saber como maximizar sua efic\u00e1cia e limitar as desvantagens. Entender as diretrizes de acessibilidade \u00e9 essencial, e voc\u00ea tamb\u00e9m deve pensar em <a href=\"https:\/\/hocoos.com\/pt\/respostas\/como-saber-se-meu-site-e-otimizado-para-celular\/\">como eles aparecer\u00e3o em dispositivos m\u00f3veis<\/a>.\u00a0<\/p>\n\n\n\n<p>Tamb\u00e9m \u00e9 muito importante que voc\u00ea os use com modera\u00e7\u00e3o; considere as a\u00e7\u00f5es mais essenciais para as quais eles devem ser utilizados em seu site antes de implement\u00e1-los. Se necess\u00e1rio, voc\u00ea sempre pode procurar alternativas.<\/p>","protected":false},"excerpt":{"rendered":"<p>What are the key components of a modal window? When designing your modal windows, you should consider each of the following aspects.&nbsp; All of the above elements are important for your modal windows, and as such, you should treat each of them just as seriously as the others. Make sure that you customize your modal [&hellip;]<\/p>","protected":false},"author":39,"featured_media":4698,"template":"","answers_category":[28],"class_list":["post-4691","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-design"],"acf":{"image":null,"card_image":4698,"content":[{"acf_fc_layout":"header_section","title":"O que \u00e9 uma Janela Modal?","descriptions":"Modal windows are windows that pop up in front of the main content on your page. These are mainly used when you want the user to complete a specific action, such as confirming whether they want to sign out of their account. When the modal window appears on the page, the user will first need to interact with this before continuing.\r\n\r\nWhereas pop-ups often try to sell something or get an email address, modal windows are part of the on-page or in-app experience. They\u2019re designed to highlight important information, such as telling users that they can get a walkthrough when joining your service for the first time. You should use them in scenarios where you wish to make one or two specific actions the primary focus.","tip_label":"Deep Dive","tip":"\u2022 <strong>Common Examples<\/strong>: Several types of modal windows exist, and you have probably interacted with them in some capacity before. Modal windows may involve filling out on-site details, such as your login information. ","additional_tips":[{"tip":"\u2022 <strong>Alternatives<\/strong>: Despite their popularity, you don\u2019t have to use modal windows if you don\u2019t want to. Other options, such as slide-in panels, popovers, and tooltips, exist. Consider your overall website design before making your final decision on what to choose. "},{"tip":"\u2022 <strong>Tip<\/strong>: Accessibility is imperative when designing modal windows, and you should ensure that you adhere to the Web Content Accessibility Guidelines (WCAG). Consider visual and sound-based elements. "}],"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Focusing","body":"Use modal windows to draw users to something important on the page."},{"label":"Design","body":"Prioritize accessibility, and make sure that your modal windows work on mobile."},{"label":"Potential alternatives","body":"You can use alternatives to modal windows, such as slide-in panels."}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/4691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media\/4698"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=4691"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=4691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}