{"id":5175,"date":"2025-02-05T17:19:46","date_gmt":"2025-02-05T17:19:46","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=5175"},"modified":"2025-02-05T17:19:48","modified_gmt":"2025-02-05T17:19:48","slug":"o-que-e-uma-navegacao-vertical","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-uma-navegacao-vertical\/","title":{"rendered":"O que \u00e9 uma Navega\u00e7\u00e3o Vertical?"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Quais s\u00e3o as vantagens e desvantagens das barras de navega\u00e7\u00e3o verticais?<\/h2>\n\n\n\n<p>Antes de implementar a navega\u00e7\u00e3o vertical em seu site, considere cuidadosamente os pr\u00f3s e os contras de faz\u00ea-lo. Saber quais problemas voc\u00ea pode encontrar \u00e9 importante para evit\u00e1-los.&nbsp;<\/p>\n\n\n\n<p>As empresas implementam barras de navega\u00e7\u00e3o verticais devido a:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/hocoos.com\/pt\/respostas\/qual-a-importancia-da-hierarquia-visual-na-navegacao\/\"><strong>Hierarquia visual<\/strong>:<\/a> Use a navega\u00e7\u00e3o vertical para estruturas claras de cima para baixo pelas quais os usu\u00e1rios podem navegar.\u00a0<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Foco no conte\u00fado:<\/strong> Priorize seu conte\u00fado mais importante na parte superior da barra de navega\u00e7\u00e3o vertical.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>No entanto, algumas considera\u00e7\u00f5es importantes a serem observadas com a navega\u00e7\u00e3o vertical s\u00e3o\u2026<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Espa\u00e7o na tela: <\/strong>O posicionamento \u00e9 fundamental; certifique-se de que suas barras verticais laterais esquerda ou direita deixem espa\u00e7o suficiente na tela. Considere o uso de \u00edcones de menu de hamb\u00farguer para que os usu\u00e1rios possam abri-los e fech\u00e1-los.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Familiaridade: <\/strong>Mostre aos usu\u00e1rios como usar as barras de navega\u00e7\u00e3o verticais, pois s\u00e3o menos comuns do que o menu superior padr\u00e3o.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Implementa\u00e7\u00e3o m\u00f3vel: <\/strong>Considere diferentes tamanhos de tela para implementar suas barras de navega\u00e7\u00e3o verticais em dispositivos m\u00f3veis.&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\nUm mergulho profundo:\u00a0\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nPistas visuais s\u00e3o importantes ao usar a navega\u00e7\u00e3o vertical. Alterar ligeiramente a cor \u00e9 uma maneira de sinalizar aos usu\u00e1rios que sua barra vertical existe, mas voc\u00ea tamb\u00e9m pode pensar em escolher \u00edcones relevantes.\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\">Quais s\u00e3o alguns exemplos de sites que usam a navega\u00e7\u00e3o vertical de forma eficaz?<\/h2>\n\n\n\n<p>Antes de usar a navega\u00e7\u00e3o vertical em seu site, veja exemplos para ter uma ideia de como voc\u00ea pode aplicar esses princ\u00edpios.&nbsp;<\/p>\n\n\n\n<p>Alguns sites que usam navega\u00e7\u00e3o vertical s\u00e3o:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Facebook: <\/strong>Os usu\u00e1rios encontram o Facebook Marketplace, seus grupos, publica\u00e7\u00f5es salvas, etc., por meio da barra de navega\u00e7\u00e3o vertical do site.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Netflix: <\/strong>O servi\u00e7o de streaming coloca seus programas de TV e filmes em diferentes categorias por meio de uma barra de navega\u00e7\u00e3o vertical (por exemplo, com\u00e9dia e drama).&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Medium:<\/strong> Os leitores do site encontrar\u00e3o categorias e t\u00f3picos que podem querer navegar na barra lateral.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Spotify: <\/strong>Os usu\u00e1rios podem acessar suas playlists salvas por meio da barra vertical. Nessa \u00e1rea, os ouvintes tamb\u00e9m t\u00eam a op\u00e7\u00e3o de criar novas listas e alterar a ordem.&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\nUm mergulho profundo:\u00a0\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nIdentifique o que torna essas barras de navega\u00e7\u00e3o verticais eficazes e o que voc\u00ea n\u00e3o gosta nelas. Em seguida, pense no seu p\u00fablico e em como voc\u00ea pode implementar sua pr\u00f3pria navega\u00e7\u00e3o.\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\">Como a navega\u00e7\u00e3o vertical impacta a experi\u00eancia do usu\u00e1rio?<\/h2>\n\n\n\n<p>A navega\u00e7\u00e3o vertical pode impactar significativamente a experi\u00eancia do usu\u00e1rio, embora seus benef\u00edcios nem sempre sejam garantidos. Algumas das maneiras pelas quais ela pode interagir com a forma como os usu\u00e1rios navegam em seu site s\u00e3o:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Escaneamento: <\/strong>Use a navega\u00e7\u00e3o vertical para simplificar os processos de escaneamento e identifica\u00e7\u00e3o de informa\u00e7\u00f5es. Os usu\u00e1rios podem escanear o conte\u00fado de cima para baixo em vez da esquerda para a direita, diferente do seu comportamento com menus horizontais.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Priorizando conte\u00fado: <\/strong>Se voc\u00ea tiver p\u00e1ginas ou partes de conte\u00fado que s\u00e3o mais importantes do que outras, voc\u00ea deve coloc\u00e1-las no topo da sua p\u00e1gina.&nbsp;&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:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nObtenha feedback dos seus usu\u00e1rios e implemente as altera\u00e7\u00f5es sugeridas para as suas barras de navega\u00e7\u00e3o verticais.\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\">Como a navega\u00e7\u00e3o vertical se adapta a diferentes tamanhos de tela e dispositivos?<\/h2>\n\n\n\n<p>Sua navega\u00e7\u00e3o responsiva deve ser capaz de se ajustar a diferentes tamanhos de tela de dispositivos m\u00f3veis e desktops. Considere estes fatores:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Menus recolh\u00edveis: <\/strong>Use bot\u00f5es ou \u00edcones para permitir que os usu\u00e1rios ocultem a barra de navega\u00e7\u00e3o vertical quando n\u00e3o precisarem v\u00ea-la.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Altern\u00e2ncia horizontal: <\/strong>Considere tornar seu menu vertical horizontal se o usu\u00e1rio estiver acessando seu site de uma tela particularmente pequena.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Simplificando a barra: <\/strong>Navegar em seu site \u00e9 importante, mas voc\u00ea deve evitar sobrecarregar os usu\u00e1rios com muitas op\u00e7\u00f5es.&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:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nComece o design do seu site com uma abordagem que priorize os dispositivos m\u00f3veis; considere usar um construtor de sites com modelos otimizados.\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\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Embora n\u00e3o seja t\u00e3o comum quanto a navega\u00e7\u00e3o horizontal, voc\u00ea pode considerar a implementa\u00e7\u00e3o de barras de navega\u00e7\u00e3o verticais em seu site. Priorize o conte\u00fado mais importante e certifique-se de otimizar cuidadosamente a barra para n\u00e3o consumir muito espa\u00e7o na tela.\u00a0<\/p>\n\n\n\n<p>Avalie como os usu\u00e1rios interagem com seu site e certifique-se de gui\u00e1-los at\u00e9 a <a href=\"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-uma-barra-de-navegacao-de-website\/\">barra de navega\u00e7\u00e3o<\/a>. Use \u00edcones ou <a href=\"https:\/\/hocoos.com\/pt\/respostas\/qual-o-papel-da-cor-na-navegacao-do-website\/\">cores<\/a> para fazer isso. Compreender as diferentes pr\u00e1ticas de UX tamb\u00e9m \u00e9 essencial para implementar barras de navega\u00e7\u00e3o verticais.\u00a0<\/p>","protected":false},"excerpt":{"rendered":"<p>What are the advantages and disadvantages of vertical navigation bars? Before implementing vertical navigation on your website, carefully consider the pros and cons of doing so. Knowing which problems you might encounter is important for avoiding them.&nbsp; Businesses implement vertical navigation bars because of:&nbsp; However, some key considerations to make note of with vertical navigation [&hellip;]<\/p>","protected":false},"author":39,"featured_media":5177,"template":"","answers_category":[29],"class_list":["post-5175","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-navigation"],"acf":{"image":null,"card_image":5177,"content":[{"acf_fc_layout":"header_section","title":"O que \u00e9 uma Navega\u00e7\u00e3o Vertical?","descriptions":"Vertical navigation is when you place your site menu on the side rather than at the top. This design is often used on devices with smaller screens, such as smartphones. In addition to vertical navigation, you might also hear this referred to as a sidebar.\r\n\r\nThe aim of vertical navigation is to ensure that users can get around the website without experiencing a cluttered screen. Rather than having dropdown menus, you might see a hamburger icon used to expand the list of options. In other cases, the bar will be static.\r\n\r\nVertical navigation is particularly important for websites with a lot of content. Categories are displayed within the design and can be accessed by clicking. Although vertical navigation is often used on mobile devices, it can also be implemented on desktops.","tip_label":"Pro Tip","tip":"Use vertical navigation with collapsible elements on desktop devices to optimize space.","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Vertical navigation is a key consideration for websites with a lot of content","body":""},{"label":"Use vertical navigation when you want to avoid consuming too much screen space","body":""},{"label":"Vertical navigation requires iteration and testing to meet your goals and user preferences","body":""}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/5175","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\/5177"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=5175"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=5175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}