Mobile interfaces come with their own challenges for designers: Smaller screens, limited real estate, and, most importantly, the limited reach of the human thumb.
Unlike desktop design, good mobile design relies far more on an understanding of human anatomy and physical device usage. Research finds that about half of people use their mobile device with one hand—that is, they interact with the screen with a single thumb. An additional 36% use a cradle, with the secondary thumb available if needed. Just 15% use two hands, with both thumbs ready.
But for all mobile holding techniques, for both left-handed and right-handed users, the upper left is hard to reach. For right-handed users, who make up 90% of the population, it is almost unreachable.
Assuredly even the earliest financial services mobile app designers realized these physical limitations and avoided putting critical navigation elements in the upper left. Let’s check out how mobile apps looked in the initial Mobile Monitor report, from 2013:
Whoops.
This is not to criticize mobile designers from a decade ago. Desktop design convention put, and still puts, important elements in the upper left. Because of this convention, the first mobile users also expected to find critical elements in the upper left of the screen—even if these elements were hard to reach without a thumb stretch or the recruitment of other fingers.
The result: It’s taken about a decade for mobile designers to convince users to look elsewhere for critical elements.
Having established the importance of the thumb for now, our Mobile Monitor team recently published a report on navigation design, examining the mobile apps from 24 leading firms. Below are previews of two key findings from that report.
Mobile Banking Apps Come to a Navigation Consensus
Banks have settled on a thumb-friendly consensus choice for mobile navigation: A horizontal main menu at the bottom of the screen. All but one firm (96%) in the Mobile Monitor coverage set offers this bottom navigation structure, with four or five elements (for an average of 4.57). While not a strict rule, this range seems to have proven effective for housing main navigation options without overwhelming users or requiring a carousel. The best main menus prioritize in-demand tasks like money movement hubs or mobile check deposit over cross-selling.
Vertical main menus, once popular, are on the outs. In 2017, 85% of the Mobile Monitor coverage set used vertical menus. By 2021, that figure dropped to 25%. Today just one holdout, PNC, still offers a 10-item vertical slideout menu.
Main menus should be universally available as users move through the app. But this is only the case for three-quarters (75%) of the coverage set. Ensuring access to the main menu from most screens, including account dashboards and overflow menus, grounds the experience so users can return to familiar main interfaces.
Horizontal navigation examples include:
- Chase features a five-item bottom navigation menu that includes a dedicated money movement hub and money management tool landing screen as well as a reward overview screen for credit card clients
- Bank of America, Fifth Third and Wells Fargo provide a five-item horizontal main menu with a money movement hub; all three firms also dedicate an option to mobile check deposit, likely in line with user priorities
- Citi retains its bottom navigation throughout secondary screens, like Search & Help, allowing users to return to other interfaces and remain oriented throughout the app experience
The report includes a warning from CI’s UX team when it comes to navigation design: Don’t abuse red callouts or other red indicators. Users understand red callouts to signal critical information such as action-items that may be time-sensitive or related to security. Firms that overuse this technique risk teaching their userbase to indiscriminately ignore all red messages, important or unimportant.
The best overflow menus function like Marie Kondo closets, not junk drawers
While four or five main navigation options is ideal, they cannot cover every possible capability available within a banking mobile app. Overflow menus are a necessary part of app organization, allowing firms to house a wealth of functionality in a findable yet unobtrusive location.
Information architecture is key. When mobile users need to manage an infrequent banking task—like profile or account settings—they should be able to find it without clicking around. Conversely, high-traffic app areas, like mobile check deposit or P2P interfaces, should not be de-emphasized by appearing alongside or below incidental app functions in the app information hierarchy.
Firms can also rely on convention and user expectations: If an infrequently used capability is universal across industries, like notification settings, users will already have an idea of where to look for it in an app. Firms should especially follow convention for these options. That way, even if a user has not looked for notification settings in their banking app before, they’ll be able to find it. Financial services firms have more flexibility for the placement of infrequent, industry-specific capabilities in their mobile navigation, like an ATM-finder or physical check ordering.
CI’s UX team offers some additional tips for overflow menus: Research indicates that users will look to overflow menus when they cannot find a feature, and they may not intuitively differentiate between various categorizations of overflow menus. Generic overflow menus—most accurately titled More—can be an effective tool if they are organized appropriately.
Ideally, firms follow convention by housing overflow menus as the final horizontal menu item (79%) and/or a static upper navigation element (38%). (Thumb stretching aside, users still look for important options on a screen’s upper left.) These common findability conventions help users quickly intuit the content type within or know where to start looking.
- Within the coverage set, firms like E*TRADE and Wells Fargo offer an overflow menu—a hamburger icon labeled Menu—as the final bottom navigation item, allowing users to reach it from any main app screen
- Bank of America and U.S. Bank feature a Menu hamburger icon, displaying it as a static upper navigation icon
- Charles Schwab has two overflow menus—a profile icon atop the home screen and a main menu More item—which organizes overflow tasks by type
Mobile Monitor research can help any financial services design team looking to improve their mobile navigation and overall customer experience. Contact us today to learn how you can gain access the full navigation report—with all five Best Practice recommendations and detailed rankings for all 24 firms—and the full suite of Mobile Monitor research.