In order to enrich our comparative analysis of mobile navigation and information architecture, we conducted a comparative usability test pitting two pairs of firms with similar navigation systems against one another. Our full report highlights design and navigation principles that emerged from our usability testing.Below, we share a sample of our comparative analysis and usability testing around slide-out main menus from our latest Mobile Monitor report titled Menu Design & Navigation: Comparative Analysis and User Perspectives. Subscribers to our Mobile Monitor research service can access the full report by logging into the CI Client site and navigating to the “Mobile” tab.Report Excerpt
Slide-out menus have become the most common approach to main menu design. Of the 17 firms that use slide-out menus for all or some of their apps, over half have adopted this navigational technique in the last year. This menu structure has its advantages, particularly for more complex, feature-rich brokerage apps. Users can load the menu to view a list of app sections or features without navigating away from the current screen. Such menus are often scrollable and thus not limited to four or five options the way stationary tab bar menus are.
The slide-out menus in our research vary from seven options to over 20. As menus grow in length, organization becomes very important. Firms including Fidelity, Morgan Stanley and USAA (on Android) group related options under headings such as portfolio, money movement, research, etc. This breaks down long menus into manageable pieces, making it easy to find the desired link. Such firms as American Express and Discover have expanding sections to their menus, something of a middle ground between the bucket and comprehensive approach.
E*TRADE’s sizable menu is organized alphabetically, which is useful although it relies on clients looking for the right terminology (e.g., “Quick Transfer” instead of just “Transfer” or “Transactions” instead of “Activity”). The firm does let clients move “Favorites” to the top of the menu, helping draw key features out of the long list. The other firms all order menu options by their own internal logic without clear sub-headings. While many have fewer menu options that can all be viewed on a single screen, this approach still counts on clients using them frequently enough to remember where their preferred features are located.
We pitted E*TRADE against Scottrade in our usability testing because the firms use similar slide-out menu systems but differing information architectures. E*TRADE’s menu is extensive, with 22 main options, all of which lead to individual features. By comparison, Scottrade’s menu only features 11 options, but some tabs (e.g., My Account) provide access to a bundle of features (e.g., My Account, Account Balances, Positions, Order Status and Transactions) that are organized using lower level navigation.
Our users overwhelmingly preferred E*TRADE’s design over Scottrade’s, stating that it was easier to predict where each tab would take them because of their very specific labels. When asked to rate the ease with which they were able to find the necessary features to complete individual tasks on a five point scale, Scottrade averaged half a point less than E*TRADE. Similarly, when we asked the participants to rate the overall intuitiveness of the navigation systems and information architecture of the two apps on a five point scale, E*TRADE (4.3) averaged a full point above Scottrade (3.3). It should also be noted that the order in which participants tested the interfaces did not appear to have any effect on their scores.
Unlike their traditional desktop website counterparts, mobile applications offer a scaled-down collection of resources that makes bucketing content less necessary. And although some users did point out that E*TRADE’s menu seemed a bit extensive, they also stated that the number of options did not have a negative impact on their ability to navigate the app.