{"id":310,"date":"2020-04-08T16:30:14","date_gmt":"2020-04-08T20:30:14","guid":{"rendered":"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/"},"modified":"2020-04-17T15:32:29","modified_gmt":"2020-04-17T19:32:29","slug":"evolution-of-a-mobile-menu","status":"publish","type":"post","link":"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/","title":{"rendered":"Evolution of a mobile menu"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<span style=\"font-weight: 400\">How do you help users find what they need if your app is a mega app with many mini apps (\u201capplets\u201d) housed within it? What if every user needs just a couple of the applets, but each user needs different ones? How do you prioritize and organize them so that users spend more time doing, less time digging?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">This is a challenge the Bloomberg Professional mobile app has. Bloomberg\u2019s UX team took an iterative approach to solve it, updating the app\u2019s menu twice in the past few years. We started with a typical springboard, then rolled out a highly editable two-column layout, and finally arrived at a simple list view. This post will explain the story behind this evolution. <\/span>[\/vc_column_text][vc_single_image image=&#8221;334&#8243; alignment=&#8221;center&#8221; img_size=&#8221;large&#8221;][vc_column_text]<b>What do we know?\u00a0<\/b><\/p>\n<p><i><span style=\"font-weight: 400\">Who uses Bloomberg Professional app?\u00a0\u00a0<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400\">Both clients and Bloomberg employees use the app.\u00a0 The app is an important tool for clients to monitor critical market information.\u00a0 Bloomberg employees use the app to communicate with their colleagues and stay on top of their busy schedules. <\/span><span style=\"font-weight: 400\"><br \/>\n<\/span><span style=\"font-weight: 400\"><br \/>\n<\/span><i><span style=\"font-weight: 400\">How do they use the app?<\/span><\/i><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">The menu is a navigation hub. No content is displayed on this screen.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Every day, most users of the app use just a few applets that relate to their workflow.<\/span><\/li>\n<\/ul>\n<p><b>First iteration: Springboard menu &#8211; visual but not very useful<\/b>[\/vc_column_text][vc_single_image image=&#8221;316&#8243; alignment=&#8221;center&#8221; img_size=&#8221;large&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center\"><i><span style=\"font-weight: 400\">App launchers typically use a springboard pattern. Users can rely on the color and established branding logo (Twitter for example) to locate\u00a0 the app they are looking for. <\/span><\/i><\/p>\n<p><span style=\"font-weight: 400\">A springboard is typically used in mobile operating systems. Take iOS,for example, where a user can see and launch all the apps they downloaded.\u00a0 It fits a lot of items into a relatively small footprint<\/span><span style=\"font-weight: 400\">.\u00a0 It also maximizes the space for the app icons. <\/span><span style=\"font-weight: 400\">However, it has one disadvantage: it works well only when these icons can be easily recognized by the users.\u00a0<\/span>[\/vc_column_text][vc_single_image image=&#8221;317&#8243; alignment=&#8221;center&#8221; img_size=&#8221;large&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center\"><i><span style=\"font-weight: 400\">Bloomberg Professional Springboard Menu: many of the icons are not universally recognizable. Text labels are very small making it even harder for users to differentiate item from item.<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400\">User research <\/span><span style=\"font-weight: 400\">shows that, due to the lack of a standard usage, most icons are often reduced to visual noise that hinders users from completing a task<\/span><span style=\"font-weight: 400\">. This is the exact challenge the springboard Bloomberg menu has. Most of the applet icons were not standardized icons. They did not help users to make an informed decision easier and faster. <\/span><span style=\"font-weight: 400\">To make matters worse, <\/span><span style=\"font-weight: 400\">the text labels underneath the icons were also very small<\/span><span style=\"font-weight: 400\"> so additional cognitive load was required to complete the task.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">We learned from qualitative user research that users were frustrated. They also expressed a desire to customize the menu. As more and more applets were added to the mix, this experience became more and more painful. <\/span><span style=\"font-weight: 400\">It was time to evolve.\u00a0<\/span><\/p>\n<p><b>Second iteration: Editable menu &#8211; highly customizable but not worth the work<\/b><\/p>\n<p><span style=\"font-weight: 400\">In the second iteration of the menu redesign, the <\/span><b>layout<\/b><span style=\"font-weight: 400\"> was updated to accommodate larger text labels so it relied less on iconography. An <\/span><b>customization<\/b><span style=\"font-weight: 400\"> functionality was also introduced. Via an &#8220;Edit&#8221; button, users could not only reorder, but also resize, the menu items. <\/span>[\/vc_column_text][vc_single_image image=&#8221;335&#8243; alignment=&#8221;center&#8221; img_size=&#8221;large&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center\"><i><span style=\"font-weight: 400\">Bloomberg Professional Editable Menu: it put less emphasis on the icons visually. <\/span><\/i><\/p>\n<p><span style=\"font-weight: 400\">This iteration solved the springboard issues discussed above by <\/span><b>providing a more scannable layout and the ability to prioritize relevant items<\/b><span style=\"font-weight: 400\">. It seemed that this design gave users all they asked for. However, the data showed that this design didn\u2019t work: 1) most of the users didn\u2019t discover the Edit functionality, 2) users still spent too much time on the menu (occasionally up to 20 seconds). Considering this screen is a pure navigation hub and users use similar items every day, their time was definitely not well-spent. Qualitative research continued to show that the users were still overwhelmed by the menu. How could this be?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">We examined the design and concluded why it failed:\u00a0<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400\"><b>Too many items, not scannable, not organized.<\/b><span style=\"font-weight: 400\"> The scannability of the layout improved slightly by changing from a 4-column grid to a 2-column grid. Unfortunately, there were still too many items and it was still hard to parse. In one of the interviews, a user told us, \u201cI sometimes try to find things, but don&#8217;t remember where they are.\u201d\u00a0\u00a0<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Edit is not discoverable. <\/b><span style=\"font-weight: 400\">Based on usability testing with 15 users, o<\/span><span style=\"font-weight: 400\">nly 68% (n=11) of them were able to discover it without any help. This was confirmed by the usage data &#8211; less than 10% of the users edited the menu.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Edit requires too much work.<\/b><span style=\"font-weight: 400\"> For those who knew about the feature, there was another hurdle to overcome &#8211; getting them to actually put in the work. This is the dilemma of customization. It gives users flexibility, but the interaction cost is often too high. In the mobile context, where users\u2019 time is limited and attention is fragmented, the bar for customization is even higher (when was the last time you customized an app you use?). Even though users in the interviews asked for customization, they simply wouldn\u2019t do it when the options were given to them. This reminds us of another classic UX principle &#8211; watch what users do, not what they say. Users aren\u2019t great at predicting their own behavior. Past examples of user behavior are much more reliable.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400\">The Editable menu offered a solution that didn\u2019t solve the problem.\u00a0<\/span><\/p>\n<p><b>Third Iteration: Quick Access menu &#8211; simple, relevant, and effective<\/b><\/p>\n<p><span style=\"font-weight: 400\">The editable menu provided all the flexibility, but it relied heavily on the users. It didn\u2019t work. Is there another way to meet a user&#8217;s individual need?\u00a0 The answer lies in personalization. <\/span><span style=\"font-weight: 400\"><br \/>\n<\/span><span style=\"font-weight: 400\"><br \/>\n<\/span><span style=\"font-weight: 400\">Personalization allows the system to take relevant information to tailor the experience automatically. For example, a weather app shows the local weather by default based on the location of the device. An organization\u2019s intranet provides different feature sets based on an employee\u2019s role.\u00a0 None of these examples requires users to set anything up. They receive the benefits simply by using the services.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">When it comes to menus, both Apple and Android use personalization to help users find what they need easier and faster. <\/span>[\/vc_column_text][vc_single_image image=&#8221;319&#8243; alignment=&#8221;center&#8221; img_size=&#8221;large&#8221;][vc_single_image image=&#8221;338&#8243; alignment=&#8221;center&#8221; img_size=&#8221;large&#8221;][vc_column_text]<span style=\"font-weight: 400\">Inspired by these examples and the lessons learned from the previous design iterations, we updated the menu in 2019. The changes included:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><b>Quick Access: give users the things they want the most first with as little effort as possible. <\/b><span style=\"font-weight: 400\">A personalized quick access section is introduced. Unlike customization, the app does the work, presenting users with six options most relevant to them based on their past behavior.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Chucking &amp; List View: if users want to look through the other things, we\u2019ll make it easier for them to do. <\/b><span style=\"font-weight: 400\">Hick\u2019s Law says the longer the list, the longer it takes them to reach a decision. However,\u00a0 there are still techniques that can make long menus easy to use. By applying \u201cChunking\u201d here, items are grouped logically so it\u2019s easier for users to comprehend and remember. <\/span><span style=\"font-weight: 400\">A list view also helps users <\/span><span style=\"font-weight: 400\">more easily scan the items and decide what to select next.\u00a0\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">We released this design and the impact was telling. Metrics on the iOS release in the first month showed:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><b>The time users spent on the menu was cut in half.<\/b><span style=\"font-weight: 400\"> Users were getting to places (getting work done) faster than before.\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/li>\n<li style=\"font-weight: 400\"><b>The spikes were gone.<\/b><span style=\"font-weight: 400\"> That means users were not spending extra long time on finding an item.\u00a0\u00a0<\/span><\/li>\n<li style=\"font-weight: 400\"><b>More than 96% of the selections were from the Quick Access section. <\/b><span style=\"font-weight: 400\">It means, most of the time, users could find what they needed without scrolling the screen. What\u2019s relevant to the users has been successfully prioritized for them, automatically.\u00a0<\/span><\/li>\n<\/ul>\n<p><strong>Final Thoughts<\/strong><\/p>\n<p><span style=\"font-weight: 400\">We took an iterative user-centric approach to design the menu, changing it twice in the past few years. During this process, we looked at both quantitative and qualitative data. Each iteration was based on learnings from the previous one. At the end, we applied personalization and chunking techniques. It led to a simpler, but more effective, design &#8212; and a much better result.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Is this the end of the menu redesign? Most likely not. Digital design is always in a transitional state, especially in the mobile space. Sometimes it takes a couple of iterations to get it right. And then, what\u2019s right will inevitably be outgrown by users\u2019 needs. The only way to catch up is to go back to the basic user-centric design process: understand the users, test the design, learn from the users, iterate, and then do it all over again!<\/span><\/p>\n<p><span style=\"font-weight: 400\">Are you ready for a new challenge? We\u2019re hiring across all roles on our UX team. <a href=\"https:\/\/careers.bloomberg.com\/job\/search\">Browse our latest openings<\/a>.\u00a0<\/span><\/p>\n<p><strong>References:<\/strong><\/p>\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/icon-usability\/\"><span style=\"font-weight: 400\">https:\/\/www.nngroup.com\/articles\/icon-usability\/<\/span><\/a><\/p>\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/customization-personalization\/\"><span style=\"font-weight: 400\">https:\/\/www.nngroup.com\/articles\/customization-personalization\/<\/span><span style=\"font-weight: 400\"><br \/>\n<\/span><span style=\"font-weight: 400\"><br \/>\n<\/span><\/a><a href=\"https:\/\/www.nngroup.com\/articles\/first-rule-of-usability-dont-listen-to-users\/\"><span style=\"font-weight: 400\">https:\/\/www.nngroup.com\/articles\/first-rule-of-usability-dont-listen-to-users\/<\/span><\/a><\/p>\n<p><a href=\"https:\/\/www.nngroup.com\/videos\/hicks-law-long-menus\/\"><span style=\"font-weight: 400\">https:\/\/www.nngroup.com\/videos\/hicks-law-long-menus\/<\/span><\/a>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bloomberg\u2019s UX team took an iterative user-centric approach to improve the Bloomberg Professional Services app.  It led to a simpler, but more effective, design \u2014 and a much better result.<\/p>\n","protected":false},"author":204,"featured_media":340,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-310","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Evolution of a mobile menu - Bloomberg UX<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Evolution of a mobile menu - Bloomberg UX\" \/>\n<meta property=\"og:description\" content=\"Bloomberg\u2019s UX team took an iterative user-centric approach to improve the Bloomberg Professional Services app. It led to a simpler, but more effective, design \u2014 and a much better result.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Bloomberg UX\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-08T20:30:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-17T19:32:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.bbhub.io\/company\/sites\/34\/2020\/04\/UXMenu1-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"557\" \/>\n\t<meta property=\"og:image:height\" content=\"418\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"fgiacco\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"fgiacco\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/\",\"url\":\"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/\",\"name\":\"Evolution of a mobile menu - Bloomberg UX\",\"isPartOf\":{\"@id\":\"https:\/\/www.bloomberg.com\/ux\/#website\"},\"datePublished\":\"2020-04-08T20:30:14+00:00\",\"dateModified\":\"2020-04-17T19:32:29+00:00\",\"author\":{\"@id\":\"https:\/\/www.bloomberg.com\/ux\/#\/schema\/person\/dd36f91a0095cb19f3a76a841e823947\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":\"1\",\"name\":\"Home\",\"item\":\"https:\/\/www.bloomberg.com\/ux\/\"},{\"@type\":\"ListItem\",\"position\":\"2\",\"name\":\"Evolution of a mobile menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bloomberg.com\/ux\/#website\",\"url\":\"https:\/\/www.bloomberg.com\/ux\/\",\"name\":\"Bloomberg UX\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bloomberg.com\/ux\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bloomberg.com\/ux\/#\/schema\/person\/dd36f91a0095cb19f3a76a841e823947\",\"name\":\"Bloomberg UX\",\"url\":\"https:\/\/www.bloomberg.com\/ux\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Evolution of a mobile menu - Bloomberg UX","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/","og_locale":"en_US","og_type":"article","og_title":"Evolution of a mobile menu - Bloomberg UX","og_description":"Bloomberg\u2019s UX team took an iterative user-centric approach to improve the Bloomberg Professional Services app. It led to a simpler, but more effective, design \u2014 and a much better result.","og_url":"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/","og_site_name":"Bloomberg UX","article_published_time":"2020-04-08T20:30:14+00:00","article_modified_time":"2020-04-17T19:32:29+00:00","og_image":[{"width":557,"height":418,"url":"https:\/\/assets.bbhub.io\/company\/sites\/34\/2020\/04\/UXMenu1-2.jpg","type":"image\/jpeg"}],"author":"fgiacco","twitter_card":"summary_large_image","twitter_misc":{"Written by":"fgiacco","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/","url":"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/","name":"Evolution of a mobile menu - Bloomberg UX","isPartOf":{"@id":"https:\/\/www.bloomberg.com\/ux\/#website"},"datePublished":"2020-04-08T20:30:14+00:00","dateModified":"2020-04-17T19:32:29+00:00","author":{"@id":"https:\/\/www.bloomberg.com\/ux\/#\/schema\/person\/dd36f91a0095cb19f3a76a841e823947"},"breadcrumb":{"@id":"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bloomberg.com\/ux\/2020\/04\/08\/evolution-of-a-mobile-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":"1","name":"Home","item":"https:\/\/www.bloomberg.com\/ux\/"},{"@type":"ListItem","position":"2","name":"Evolution of a mobile menu"}]},{"@type":"WebSite","@id":"https:\/\/www.bloomberg.com\/ux\/#website","url":"https:\/\/www.bloomberg.com\/ux\/","name":"Bloomberg UX","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bloomberg.com\/ux\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.bloomberg.com\/ux\/#\/schema\/person\/dd36f91a0095cb19f3a76a841e823947","name":"Bloomberg UX","url":"https:\/\/www.bloomberg.com\/ux"}]}},"_links":{"self":[{"href":"https:\/\/www.bloomberg.com\/ux\/wp-json\/wp\/v2\/posts\/310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bloomberg.com\/ux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bloomberg.com\/ux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bloomberg.com\/ux\/wp-json\/wp\/v2\/users\/204"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bloomberg.com\/ux\/wp-json\/wp\/v2\/comments?post=310"}],"version-history":[{"count":10,"href":"https:\/\/www.bloomberg.com\/ux\/wp-json\/wp\/v2\/posts\/310\/revisions"}],"predecessor-version":[{"id":339,"href":"https:\/\/www.bloomberg.com\/ux\/wp-json\/wp\/v2\/posts\/310\/revisions\/339"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bloomberg.com\/ux\/wp-json\/wp\/v2\/media\/340"}],"wp:attachment":[{"href":"https:\/\/www.bloomberg.com\/ux\/wp-json\/wp\/v2\/media?parent=310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bloomberg.com\/ux\/wp-json\/wp\/v2\/categories?post=310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bloomberg.com\/ux\/wp-json\/wp\/v2\/tags?post=310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}