{"id":12726,"date":"2015-01-13T01:04:33","date_gmt":"2015-01-13T09:04:33","guid":{"rendered":"https:\/\/redbooth.com\/es\/sin-categorizar\/hamburger-menu-iphone-app"},"modified":"2016-08-26T14:56:05","modified_gmt":"2016-08-26T21:56:05","slug":"menu-hamburguesa","status":"publish","type":"post","link":"https:\/\/redbooth.com\/es\/blog-es\/menu-hamburguesa","title":{"rendered":"Por qu&eacute; desterramos el men&uacute; hamburguesa de nuestra aplicaci&oacute;n para iPhone"},"content":{"rendered":"<p>Cuando comenzamos a trabajar en una nueva funcionalidad de chat para la aplicaci&oacute;n de Redbooth para iPhone, nuestro equipo de producto y dise&ntilde;o ten&iacute;a algunos motivos ocultos. S&iacute;, quer&iacute;amos ofrecer a nuestros clientes la posibilidad de conectarse instant&aacute;neamente con sus compa&ntilde;eros de trabajo, incluso cuando no estaban en su mesa de trabajo o si estaban fuera de la oficina. Pero tambi&eacute;n vimos la oportunidad de eliminar de la aplicaci&oacute;n una de las cosas que m&aacute;s nos irritan: el temido men&uacute; hamburguesa.<\/p>\n<figure><a href=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2015\/01\/hamburger-menu.jpg\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2015\/01\/hamburger-menu.jpg\" alt=\"El men&uacute; hamburguesa\" class=\"aligncenter\" \/><\/a><\/figure>\n<h2>Historia de la hamburguesa<\/h2>\n<p>Si sabes un poco de dise&ntilde;o para m&oacute;viles, quiz&aacute;s sepas que el &ldquo;men&uacute; hamburguesa&rdquo; es un truco de dise&ntilde;o utilizado frecuentemente para a&ntilde;adir (u ocultar) funcionalidades adicionales en alg&uacute;n punto de las pantallas principales.  Quiz&aacute;s tambi&eacute;n sepas que es <a href=\"https:\/\/lmjabreu.com\/post\/why-and-how-to-avoid-hamburger-menus\/\">terrible para el descubrimiento y participaci&oacute;n del usuario<\/a> y que <a href=\"http:\/\/blog.manbolo.com\/2014\/06\/30\/apple-on-hamburger-menus\">Apple desaconseja su uso<\/a>. <\/p>\n<blockquote><p>&ldquo;Recuerda: los dos factores clave acerca de un sistema de navegaci&oacute;n intuitivo es que te diga d&oacute;nde te encuentras y que te muestre a qu&eacute; otro sitio puedes ir. Los men&uacute;s hamburguesa son terribles para ambas cosas, ya que el men&uacute; no est&aacute; en la pantalla. No puede verse&rdquo;. <em>&mdash; <a href=\"https:\/\/twitter.com\/themikestern\">Mike Stern<\/a>, evangelista de experiencia de usuario para Apple<\/em><\/p><\/blockquote>\n<p>Si todos los estudios y pruebas eran correctos, poner el chat en nuestra aplicaci&oacute;n como otra opci&oacute;n oculta detr&aacute;s del icono hamburguesa dificultar&iacute;a a cualquiera descubrir o utilizar esta nueva funcionalidad.<\/p>\n<p>Por esta raz&oacute;n, ten&iacute;amos un reto. Sab&iacute;amos que quer&iacute;amos que los usuarios encontraran f&aacute;cilmente nuestro nuevo chat de trabajo y que pudieran acceder a &eacute;l con rapidez cuando necesitaran intercambiar mensajes con sus equipos. Pero tambi&eacute;n deb&iacute;amos lograr un equilibrio con el resto de funcionalidades que nuestros clientes utilizan cada d&iacute;a. <\/p>\n<p>&nbsp;<\/p>\n<h2>Nuestra investigaci&oacute;n de &ldquo;clientes&rdquo;<\/h2>\n<p>Aunque lo ideal habr&iacute;a sido obtener informaci&oacute;n directa de nuestros clientes reales y potenciales, no ten&iacute;amos tiempo ni presupuesto para llevar a cabo un estudio completo de facilidad de uso, y la nuestra no es el tipo de aplicaci&oacute;n que se puede explicar f&aacute;cilmente a alguien que te encuentras en el centro comercial o en Starbucks para una sesi&oacute;n r&aacute;pida de investigaci&oacute;n de &ldquo;guerrilla&rdquo;. Por lo tanto, decidimos utilizar a nuestros propios compa&ntilde;eros de trabajo como conejillos de indias.<\/p>\n<p>Invitamos a trabajadores de todos los departamentos a participar en una improvisada sesi&oacute;n de investigaci&oacute;n de usuarios. Cada persona recibi&oacute; 15 notas adhesivas que representaban las diferentes partes de la aplicaci&oacute;n web, y les retamos a configurar su aplicaci&oacute;n ideal para su m&oacute;vil bas&aacute;ndose en el modo en el que utilizan Redbooth personalmente. Se les pidi&oacute; que explicaran sus necesidades de viva voz y que especificaran si utilizaban iOS o Android en su dispositivo principal. Los resultados fueron diversos, pero surgieron varios patrones que, combinados con nuestro conocimiento de la base de clientes actuales y potenciales, llev&oacute; a la recomendaci&oacute;n final de nuestro equipo de experiencia de usuario.<\/p>\n<a href=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2015\/01\/postits-new.jpg\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2015\/01\/postits-new.jpg\" alt=\"Los trabajadores de Redbooth participaron en un ejercicio de dise&ntilde;o\" class=\"aligncenter\" \/><\/a>\n<p>Muchos de nuestros compa&ntilde;eros quer&iacute;an incorporar el mayor n&uacute;mero posible de funciones en una peque&ntilde;a pantalla. (Probablemente, les ense&ntilde;amos algunos malos h&aacute;bitos en el dise&ntilde;o antiguo al colocar tantas opciones en el caj&oacute;n de navegaci&oacute;n principal.) Sin embargo, la conclusi&oacute;n m&aacute;s importante del ejercicio fueron los temas y elementos recurrentes que los participantes segu&iacute;an a&ntilde;adiendo a los puntos principales. &ldquo;Chat&rdquo;, &ldquo;Mis tareas&rdquo; y &ldquo;Notificaciones&rdquo; aparec&iacute;an una y otra vez, mientras que &ldquo;Ajustes&rdquo; era el elemento m&aacute;s olvidado.<\/p>\n<p>Este fue el resultado final: una navegaci&oacute;n de 5 pesta&ntilde;as que parece genuinamente nativa de iPhone. Debemos admitir que nuestro dise&ntilde;o anterior era simple, pero, en cierto modo, demasiado simple en lo que mostraba y, al mismo tiempo, demasiado complejo al ocultar funcionalidades necesarias detr&aacute;s de un men&uacute;. El nuevo dise&ntilde;o sigue siendo simple, pero de una manera que permite un acceso m&aacute;s inmediato al conjunto completo de funcionalidades. <\/p>\n<a href=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2015\/01\/menu-makeover.png\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2015\/01\/menu-makeover.png\" alt=\"Renovaci&oacute;n del men&uacute; para iPhone\" class=\"aligncenter\" \/><\/a>\n<p>Mientras cre&aacute;bamos la nueva versi&oacute;n de la aplicaci&oacute;n, facilitamos las primeras versiones a nuestros trabajadores internos para que nos ayudaran a validar el nuevo dise&ntilde;o (y buscaran fallos). Y quiz&aacute;s no deber&iacute;a habernos sorprendido en absoluto que dijeran que les gustaba mucho la nueva navegaci&oacute;n. Despu&eacute;s de todo, ellos nos hab&iacute;an ayudado a dise&ntilde;arla. Sin embargo, cuando pusimos una versi&oacute;n beta a disposici&oacute;n de algunos de nuestros clientes para que vieran una primera prueba, sus opiniones sobre el dise&ntilde;o fueron tambi&eacute;n incre&iacute;blemente positivas, por lo que est&aacute;bamos seguros de ir en la direcci&oacute;n correcta.<\/p>\n<p>Finalmente, est&aacute;bamos preparados para lanzar la aplicaci&oacute;n totalmente redise&ntilde;ada al p&uacute;blico y, a trav&eacute;s de la magia de la actualizaci&oacute;n autom&aacute;tica de Apple, comenzamos a ver cambios en la conducta de nuestros clientes casi de forma inmediata.<\/p>\n<p>&nbsp;<\/p>\n<h2>El veredicto final<\/h2>\n<p>\u00bfQu&eacute; ocurri&oacute; entonces?<\/p>\n<ul>\n<li>Los clientes utilizaban la aplicaci&oacute;n con m&aacute;s frecuencia: el n&uacute;mero de sesiones aument&oacute; a m&aacute;s del doble.<\/li>\n<li>Dedicaban m&aacute;s tiempo a la aplicaci&oacute;n: el tiempo de las sesiones aument&oacute; un 70 %.<\/li>\n<li>Finalmente, observamos el regreso de m&aacute;s clientes, con un incremento del 65 % en los usuarios activos diarios pr&aacute;cticamente de la noche a la ma&ntilde;ana.<\/li>\n<\/ul>\n<a href=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2015\/01\/app-updated-graph-new.jpg\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2015\/01\/app-updated-graph-new.jpg\" alt=\"Las sesiones diarias aumentaron tras la actualizaci&oacute;n\" class=\"aligncenter\" \/><\/a>\n<a href=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2015\/01\/session-duration-graph-new.jpg\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2015\/01\/session-duration-graph-new.jpg\" alt=\"La duraci&oacute;n aument&oacute; considerablemente\" class=\"aligncenter\" \/><\/a>\n<p>&nbsp; Cuando estudiamos los datos con m&aacute;s detenimiento, confirmamos que no se deb&iacute;a solamente al hecho de haber a&ntilde;adido una nueva funcionalidad. Los clientes estaban descubriendo m&aacute;s funcionalidades que ya estaban disponibles en la versi&oacute;n anterior y dedicando m&aacute;s tiempo a interactuar con las secciones que les ayudan a gestionar sus proyectos y tareas. Con todo esto, ten&iacute;amos la prueba que necesit&aacute;bamos: el men&uacute; hamburguesa se ha desterrado de nuestra aplicaci&oacute;n para iPhone y estamos seguros de que nuestros clientes no lo echar&aacute;n de menos.<\/p>\n<p>\u00bfQu&eacute; ser&aacute; lo siguiente? Por supuesto, tendremos que hacer lo mismo para Android. &nbsp; <em>M&aacute;s sobre la experiencia de usuario en Redbooth: <a href=\"https:\/\/redbooth.com\/es\/blog-es\/diseno-de-gantt\">Entre bastidores:Dise&ntilde;o de Gantt para Redbooth<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Acompa\u00f1a entre bastidores al equipo de producto y dise\u00f1o de Redbooth y ver\u00e1s por qu\u00e9 ha desterrado el temido men\u00fa hamburguesa de la aplicaci\u00f3n de Redbooth para iPhone.<\/p>\n","protected":false},"author":81,"featured_media":4420,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[423],"tags":[426,427],"class_list":["post-12726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-es","tag-behind-the-scenes-es","tag-user-experience-es"],"_links":{"self":[{"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/posts\/12726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/comments?post=12726"}],"version-history":[{"count":0,"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/posts\/12726\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/media\/4420"}],"wp:attachment":[{"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/media?parent=12726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/categories?post=12726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/tags?post=12726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}