Possible ways to show some multilevel choices for a multiplatform application

Question

I have an application running on 3 platforms: Windows, Android, Linux. While the native part is practically the same, the UI part is obviously different - WPF on Windows, xml/layout based UI on Android and Swing on Linux.

On all platforms, the application's main window has a drop-down menu with 7 items. Now, some new features were added, and each of these 7 items will have 2 to 6 subitems to select from.

I am trying to find a solution that would be

• user-friendly
• suitable for small screens (phones)
• more or less visually similar on all platforms

The obvious solution would be to use submenus, however, there are 2 problems: 1. When a user is going to select another option, they should see the currently selected option. 2. Submenus don't work well on touch screens, and roughly 50% of our users are using the app on phones.

So far I haven't come with a solution that answers all 3 criteria.

Answer 1

By considering the scenarios of yours, i tired to come up with the wireframe for the application which can work on windows and linux.

1. By clicking the menu button, opens up the category pop up for the 7-items where by default the first item's sub items are displayed, sub items can be displayed as tiles in which pictures regarding the sub-item is shown along with two lines description.
2. By clicking the sub-items respective the page will be redirected to the respective screens.

Here as when we consider the mobile view of the application's wireframe we can come up with 2 options.

Option - 1

In the below wireframe the items 1 to item 7 are horizontally scrollable & based on the selected item the sub item categories which also have same function changes.

Option - 2

Type 2 user flow

1. In screen one the all major items are given in hamburger menu.
2. Sub category ( 7 items list ) will open when the main menu is selected.
3. By selecting the item, further opens the sub items menu.
4. Back button is placed in order to navigate back.

Answer 2

An expandable list hosting items in a NavigationDrawer (from Android/Material Design) seems a suitable choice here. On larger, non-phone screens simply have it displayed at all times. The scrolling ability of an expandable list allows for a multitude of items, although: nobody likes scrolling.

You should consider whether having the same amount of menu options available on mobile is in fact worthwhile to the user - simply copying a desktop feature set for mobile overlooks the goal to make a more productive means of "doing stuff" on the go. Having to scroll through a menu list in any way equates to an annoying experience. Hint: ignore any user/CEO/etc that says they expect the same features in a mobile app as on a desktop app.