{"id":196,"date":"2016-11-14T13:37:55","date_gmt":"2016-11-14T13:37:55","guid":{"rendered":"http:\/\/diblet.com\/blog\/?p=196"},"modified":"2016-11-14T14:15:11","modified_gmt":"2016-11-14T14:15:11","slug":"pros-contras-y-alternativas-al-menu-hamburguesa","status":"publish","type":"post","link":"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/","title":{"rendered":"Pros, Contras y alternativas al men\u00fa hamburguesa"},"content":{"rendered":"<p>El men\u00fa hamburguesa (\u2261), ha sido una de las tendencias m\u00e1s usadas y recurrentes por dise\u00f1adores web en estos \u00faltimos dos a\u00f1os, principalmente en interfaces m\u00f3viles, pero, \u00bfc\u00f3mo afecta este a la experiencia del usuario?<\/p>\n<h1>Pros y Contras<\/h1>\n<p>Probablemente la principal causa defendida por los partidarios a terminar con el uso de este tipo de men\u00fa, es\u00a0que puede convertirse en un obst\u00e1culo para usuarios inexpertos, que desconozcan la funci\u00f3n de estas tres l\u00edneas. Adem\u00e1s de que los \u00edtems est\u00e1n por defecto ocultos, lo cual puede disminuir la probabilidad de que los usuarios hagan clic en ellos y as\u00ed est\u00e9n impedidos de hacer uso de las funcionalidades de nuestros sitio lo que finalmente resultar\u00eda\u00a0en perder oportunidades de conversi\u00f3n<\/p>\n<h2>Pros<\/h2>\n<ul>\n<li>Es una de las tendencias m\u00e1s usadas para adaptar el contenido a dispositivos m\u00f3viles.<\/li>\n<li>El men\u00fa soluciona una de los problemas principales en el dise\u00f1o responsivo que es la ubicaci\u00f3n de los enlaces de la cabecera del sitio, dej\u00e1ndonos un \u00e1rea limpia y minimalista.<\/li>\n<li>Todos lo est\u00e1n usando! La mayor\u00eda de los frameworks de maquetado adoptan este tipo de men\u00fa lo que los hace mucho m\u00e1s sencillo de aplicar.<\/li>\n<\/ul>\n<h2>Contras<\/h2>\n<ul>\n<li>Puede convertirse en un obst\u00e1culo para usuarios\u00a0muy inexpertos.<\/li>\n<li>Requiere un click adicional antes de que el usuario pueda utilizarlo. Lo cual a\u00f1ade tiempo y esfuerzo que la persona quiz\u00e1s no quiera tomar, especialmente si es solamente uno de tantos sitios que est\u00e9 visitando en esa sesi\u00f3n.<\/li>\n<li>La posici\u00f3n del men\u00fa en la parte superior es pobre en\u00a0usabilidad puesto que es la posici\u00f3n m\u00e1s lejana respecto al dedo pulgar para usuarios en su tel\u00e9fono m\u00f3vil.<\/li>\n<li>Algunos test de usabilidad han demostrado que los items ocultos dentro de estos men\u00fas son bastante menos clickeados\u00a0que si mostramos las opciones directamente dentro de nuestra web o aplicaci\u00f3n.<\/li>\n<\/ul>\n<h1>Alternativas<\/h1>\n<h2>Pesta\u00f1as<\/h2>\n<p>La principal alternativa suelen ser las pesta\u00f1as o tabs, es muy conveniente si tus secciones principales no son demasiadas y est\u00e1n bien definidas. Cada item esta representado con texto, iconos o ambos. Pueden estar en la parte de arriba o abajo del sitio.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-213 size-full\" src=\"http:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/11\/nav.png\" alt=\"Pesta\u00f1as, alternativa al menu hamburguesa\" width=\"700\" height=\"400\" srcset=\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/11\/nav.png 700w, https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/11\/nav-300x171.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>Tambi\u00e9n puede haber un \u00edtem de donde alistemos los dem\u00e1s \u00edtems con menor relevancia.<\/p>\n<h2>Men\u00fa Adaptable<\/h2>\n<p>Otra alternativa es un men\u00fa adaptable, cuyos \u00edtems se oculten en una secci\u00f3n de &#8220;m\u00e1s&#8221;, dependiendo del tama\u00f1o\u00a0disponible.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-217 size-full\" src=\"http:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/11\/nav-adaptable.gif\" alt=\"Menu navegaci\u00f3n adaptable progresivamente, alternativa al menu hamburguesa\" width=\"700\" height=\"400\" \/><\/p>\n<h2>Pesta\u00f1as\u00a0scrollables<\/h2>\n<p>Esta alternativa consiste en una lista en l\u00ednea de nuestras opciones, las cuales podemos mover horizontalmente para ir descubriendo las siguientes opciones. Principalmente funciona cuando tenemos muchas opciones sin una gran diferencia de prioridad, como en sitios donde se pueda explorar entre categor\u00edas o etiquetas.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-214 size-full\" src=\"http:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/11\/scrollable-nav.gif\" alt=\"Pesta\u00f1as navegaci\u00f3n scrollable, alternativa al men\u00fa hamburguesa\" width=\"700\" height=\"400\" \/><\/p>\n<h2>Botones Flotantes<\/h2>\n<p>Botones caracterizables con iconos flotando, en alguna esquina inferior.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-221 size-full\" src=\"http:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/11\/botones-flotantes.png\" alt=\"Botones flotantes, alternativa al menu hamburguesa\" width=\"700\" height=\"400\" srcset=\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/11\/botones-flotantes.png 700w, https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/11\/botones-flotantes-300x171.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<h2>Men\u00fa Hamburguesa<\/h2>\n<p>El mismo men\u00fa hamburguesa no es siempre una mala opci\u00f3n como navegaci\u00f3n secundaria. Siempre y cuando nuestras opciones primarias est\u00e9n disponibles y destacadas en pantalla<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-222 size-full\" src=\"http:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/11\/btn-menu.png\" alt=\"men\u00fa hamburguesa\" width=\"700\" height=\"400\" srcset=\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/11\/btn-menu.png 700w, https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/11\/btn-menu-300x171.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><strong>En <a href=\"http:\/\/diblet.com\/\" target=\"_blank\">diblet.com<\/a>, desarrollamos e implementamos todos estos tipos de men\u00fa para las aplicaciones que desarrollamos. A elecci\u00f3n del cliente. Conozca m\u00e1s de nosotros <a href=\"http:\/\/diblet.com\/\" target=\"_blank\">ingresando aqu\u00ed<\/a>.<\/strong><\/p>\n<p>Fuentes:<\/p>\n<ul>\n<li><a href=\"http:\/\/numiko.com\/blog\/pros-and-cons-hamburger-menu\" target=\"_blank\" rel=\"nofollow\">Numiko.com<\/a><\/li>\n<li><a href=\"https:\/\/medium.com\/@kollinz\/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8\" target=\"_blank\" rel=\"nofollow\">Hamburger Menu Alternatives &#8211; Zoltan Kollin<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>El men&uacute; hamburguesa (&equiv;), ha sido una de las tendencias m&aacute;s usadas y recurrentes por dise&ntilde;adores web en estos &uacute;ltimos dos a&ntilde;os, principalmente en interfaces m&oacute;viles, pero, &iquest;c&oacute;mo afecta este [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":228,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,29],"tags":[52,50,51,53],"class_list":["post-196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destacado","category-diseno","tag-hamburger-menu","tag-menu","tag-navegacion","tag-usabilidad"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.0.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pros, Contras y alternativas al men\u00fa hamburguesa (\u2261) - Diblet<\/title>\n<meta name=\"description\" content=\"El men\u00fa hamburguesa es una de las tendencias mas usadas en la web, \u00bfc\u00f3mo afecta este a la experiencia del usuario? Ac\u00e1 te mostramos algunas alternativas.\" \/>\n<link rel=\"canonical\" href=\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pros, Contras y alternativas al men\u00fa hamburguesa (\u2261) - Diblet\" \/>\n<meta property=\"og:description\" content=\"El men\u00fa hamburguesa es una de las tendencias mas usadas en la web, \u00bfc\u00f3mo afecta este a la experiencia del usuario? Ac\u00e1 te mostramos algunas alternativas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/\" \/>\n<meta property=\"og:site_name\" content=\"Diblet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dibletweb\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-14T13:37:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-11-14T14:15:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/11\/hamburguesa-1024x681.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"681\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dibletweb\" \/>\n<meta name=\"twitter:site\" content=\"@dibletweb\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\">\n\t<meta name=\"twitter:data1\" content=\"3 minutos\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/diblet.com\/blog\/#organization\",\"name\":\"Diblet.com\",\"url\":\"https:\/\/diblet.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/dibletweb\/\",\"https:\/\/twitter.com\/dibletweb\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/diblet.com\/blog\/#logo\",\"inLanguage\":\"es-AR\",\"url\":\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/02\/demo-1.jpg\",\"width\":846,\"height\":427,\"caption\":\"Diblet.com\"},\"image\":{\"@id\":\"https:\/\/diblet.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/diblet.com\/blog\/#website\",\"url\":\"https:\/\/diblet.com\/blog\/\",\"name\":\"Diblet\",\"description\":\"Blog sobre Tecnolog\\u00eda &amp; Programaci\\u00f3n\",\"publisher\":{\"@id\":\"https:\/\/diblet.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/diblet.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es-AR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/#primaryimage\",\"inLanguage\":\"es-AR\",\"url\":\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/11\/hamburguesa.jpg\",\"width\":3269,\"height\":2175},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/#webpage\",\"url\":\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/\",\"name\":\"Pros, Contras y alternativas al men\\u00fa hamburguesa (\\u2261) - Diblet\",\"isPartOf\":{\"@id\":\"https:\/\/diblet.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/#primaryimage\"},\"datePublished\":\"2016-11-14T13:37:55+00:00\",\"dateModified\":\"2016-11-14T14:15:11+00:00\",\"description\":\"El men\\u00fa hamburguesa es una de las tendencias mas usadas en la web, \\u00bfc\\u00f3mo afecta este a la experiencia del usuario? Ac\\u00e1 te mostramos algunas alternativas.\",\"breadcrumb\":{\"@id\":\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/diblet.com\/blog\/\",\"url\":\"https:\/\/diblet.com\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/\",\"url\":\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/\",\"name\":\"Pros, Contras y alternativas al men\\u00fa hamburguesa\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/#webpage\"},\"author\":{\"@id\":\"https:\/\/diblet.com\/blog\/#\/schema\/person\/5fe22744f22cf81d7ad6e622c90bb9cf\"},\"headline\":\"Pros, Contras y alternativas al men\\u00fa hamburguesa\",\"datePublished\":\"2016-11-14T13:37:55+00:00\",\"dateModified\":\"2016-11-14T14:15:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/diblet.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/#primaryimage\"},\"keywords\":\"hamburger menu,menu,navegacion,usabilidad\",\"articleSection\":\"Destacado,Dise\\u00f1o\",\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/diblet.com\/blog\/pros-contras-y-alternativas-al-menu-hamburguesa\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/diblet.com\/blog\/#\/schema\/person\/5fe22744f22cf81d7ad6e622c90bb9cf\",\"name\":\"Enzo Vergara\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/diblet.com\/blog\/#personlogo\",\"inLanguage\":\"es-AR\",\"url\":\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/02\/f5-150x150.jpg\",\"caption\":\"Enzo Vergara\"},\"sameAs\":[\"http:\/\/diblet.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/posts\/196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/comments?post=196"}],"version-history":[{"count":0,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/posts\/196\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/media\/228"}],"wp:attachment":[{"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/media?parent=196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/categories?post=196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/tags?post=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}