{"id":4173,"date":"2024-09-24T17:08:12","date_gmt":"2024-09-24T17:08:12","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=4173"},"modified":"2026-03-09T17:39:42","modified_gmt":"2026-03-09T17:39:42","slug":"o-que-e-a-navegacao-por-guias-em-sites","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-a-navegacao-por-guias-em-sites\/","title":{"rendered":"O que \u00e9 Navega\u00e7\u00e3o por Guias em Sites?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice<\/h2><nav><ul><li><a href=\"#what-are-the-advantages-and-disadvantages-of-using-tabbed-navigation\">Quais s\u00e3o as vantagens e desvantagens de usar a navega\u00e7\u00e3o por guias em sites?<\/a><\/li><li><a href=\"#what-are-some-examples-of-websites-that-use-tabbed-navigation-effectively\">Quais s\u00e3o alguns exemplos de sites que usam a navega\u00e7\u00e3o por guias de forma eficaz?<\/a><\/li><li><a href=\"#conclusion\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-the-advantages-and-disadvantages-of-using-tabbed-navigation\" style=\"font-size:32px\">Quais s\u00e3o as vantagens e desvantagens de usar a navega\u00e7\u00e3o por guias em sites?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Embora a navega\u00e7\u00e3o por guias seja ben\u00e9fica para organizar informa\u00e7\u00f5es e melhorar a experi\u00eancia do usu\u00e1rio, voc\u00ea deve entender quando ela pode ser desvantajoso.<\/p>\n\n\n\n<p style=\"font-size:18px\"><strong>Por que \u00e9 uma boa ideia:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>Economizando Espa\u00e7o: <\/strong>Use a navega\u00e7\u00e3o por guias para condensar v\u00e1rias p\u00e1ginas (por exemplo, em uma p\u00e1gina de produto).&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>Organiza\u00e7\u00e3o:<\/strong> Categorize o conte\u00fado relacionado para que os usu\u00e1rios possam navegar facilmente em seu site; concentre-se em n\u00e3o sobrecarreg\u00e1-los.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>Centralizado no Usu\u00e1rio:<\/strong> A navega\u00e7\u00e3o por guias pode dar aos usu\u00e1rios mais controle sobre o que veem; uma \u00fanica p\u00e1gina poderia parecer desconexa.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>Familiaridade:<\/strong> A navega\u00e7\u00e3o por guias usa um padr\u00e3o de interface que o visitante provavelmente j\u00e1 viu.<\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:18px\"><strong>Por que nem sempre \u00e9 a melhor op\u00e7\u00e3o:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>Sobrecarga: <\/strong>Voc\u00ea pode confundir os usu\u00e1rios se tiver muitas guias; ser seletivo ao usar a navega\u00e7\u00e3o por guias evitar\u00e1 isso.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>Design para dispositivos m\u00f3veis:<\/strong> A navega\u00e7\u00e3o por guias \u00e9 mais adequada para desktop; em dispositivos m\u00f3veis, explorar uma abordagem alternativa pode levar a uma melhor usabilidade e engajamento.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>Acessibilidade: <\/strong>Considere se a sua navega\u00e7\u00e3o por guias \u00e9 acess\u00edvel.<\/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: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nUse as informa\u00e7\u00f5es nas Diretrizes de Acessibilidade para Conte\u00fado da Web (WCAG) para projetar sua navega\u00e7\u00e3o por guias.\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\" id=\"what-are-some-examples-of-websites-that-use-tabbed-navigation-effectively\" style=\"font-size:32px\">Quais s\u00e3o alguns exemplos de sites que usam a navega\u00e7\u00e3o por guias de forma eficaz?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Exemplos de sites que usam navega\u00e7\u00e3o por guias incluem Gmail, Wikipedia, Notion e Amazon. Por exemplo, ao usar o Gmail, voc\u00ea ver\u00e1 guias para diferentes tipos de e-mail (Caixa de Entrada, N\u00e3o Lidos, etc.).&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">A Amazon, por sua vez, usa guias para descri\u00e7\u00f5es de produtos. Voc\u00ea tamb\u00e9m ver\u00e1 navega\u00e7\u00e3o por guias para <a href=\"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-uma-avaliacao-do-cliente\/\" data-type=\"link\" data-id=\"https:\/\/hocoos.com\/answers\/what-is-a-customer-review\/\">avalia\u00e7\u00f5es de clientes<\/a>. A Wikipedia usa navega\u00e7\u00e3o por guias para que os usu\u00e1rios possam alternar entre diferentes idiomas ao visualizar uma p\u00e1gina.<\/p>\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\" id=\"conclusion\" style=\"font-size:32px\">Conclus\u00e3o<\/h2>\n\n\n\n<p style=\"font-size:18px\">A navega\u00e7\u00e3o por guias pode ser \u00fatil para otimizar o conte\u00fado e<a href=\"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-design-ux\/\" data-type=\"link\" data-id=\"https:\/\/hocoos.com\/answers\/what-is-ux-design\/\"> experi\u00eancia do usu\u00e1rio <\/a>(se voc\u00ea entender suas desvantagens e considerar onde pode n\u00e3o ser a melhor op\u00e7\u00e3o).<\/p>\n\n\n\n<p style=\"font-size:18px\">Ao implementar a navega\u00e7\u00e3o por guias, pense na ordem, nos r\u00f3tulos e na acessibilidade. Considere tamb\u00e9m a quantidade de informa\u00e7\u00f5es que voc\u00ea pode adicionar sem sobrecarregar os usu\u00e1rios; veja os sites que j\u00e1 usam esse elemento se precisar de uma ideia.<\/p>","protected":false},"excerpt":{"rendered":"<p>What are the advantages and disadvantages of using website tabbed navigation? While tabbed navigation is beneficial for organizing information and improving the user experience, you must understand when it might be disadvantageous. Why it\u2019s a good idea: Why it\u2019s not always the best option: Pro Tip: Use information in the Web Content Accessibility Guidelines (WCAG) [&hellip;]<\/p>","protected":false},"author":39,"featured_media":4183,"template":"","answers_category":[29],"class_list":["post-4173","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-navigation"],"acf":{"image":8096,"card_image":4183,"content":[{"acf_fc_layout":"header_section","title":"What is a Tabbed Navigation?","descriptions":"Tabbed navigation organizes content into sections on a single page via clickable tabs. It\u2019s used in eCommerce and on other websites; the aim is so that users can switch between on-page elements.\r\n\r\nBusinesses use tabbed navigation for saving screen space. Use tabbed navigation when you have significant information to present and don\u2019t want to overwhelm visitors\/so that they can control what they see on the page.\r\n\r\nTabbed navigation might impact site accessibility through organizing content when implemented correctly. Users should find content more easily after you\u2019ve implemented it, and for this reason, you must carefully consider your layout in the planning phase.\r\n\r\nThink about color contrast, the level of compatibility on different screens, and whether users can navigate on their keyboards.","tip_label":"Pro Tips","tip":"\u2022 Give your tabs clear labels to help users find information.","additional_tips":[{"tip":"\u2022 If you\u2019re an eCommerce website, consider using tab navigation for product details, reviews, shipping information, and other bits of information."}],"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"While tabbed navigation can effectively organize content, use it carefully to avoid overwhelming users","body":""},{"label":"Focus on accessibility and use logical ordering\/clear labels","body":""},{"label":"Instead of tabbed navigation, think about carousels\/accordions if you have limited space","body":""}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/4173","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\/4183"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=4173"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=4173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}