Nested tabs on landscape mobile. Best Practice

Question

I have a problem organizing tabs on landscape mobile screen.

Input:

• It's a game.
• Screen named "Inventory". User can own hundreds of items.
• All items can be grouped into 4 categories.
• There should be 2 "root" tabs on a screen "Buy" and "Use" by design.
• User makes decision "Buy" or "Use" just after screen opens and then spends most of the time switching between item types but NOT switching between "intension type" Buy/Use

Data scheme

My current state

I've marked problems in red:

• "Type 4" tab intersects with "Use" button
• "Use" button intersects with scroll gesture
• Stupid empty area on the right side

EDIT #1

Some more detailes:

• "Header bar" will be utilized to display core user info through all screens (3 type of resources, premium currency, current location etc.)
• In the "Shop" section there should be "Buy" button with a price (up to 5 digits + currency icon).
• The examples of items: "Speed up process for 8hours", "Speed up process for 24 hours", "Speed up process for 3 days" so there will be some numbers on Icons themselves AND this numbers shuld be readable as fast as possible.

Answer 1

First of all, congrats on asking a very good question and explaining the usability issues in such detailed and logic way.

As for your question itself, I think you're perceiving issues with space, element placement and gestures, so here's my take on your problem:

1. Re-arrange Container Elements

I'd do this to save space for all other elements while maximizing layout usability with no cost, as matter of fact improving visualization of navigation, hence buttons are moved to top right according to the following principles:

Now the "hard to reach" zone only includes the back button

2. Change Orientation It's correct that with this orientation with tabs on top, you're having issues with gestures. Now warning: I'm NOT saying that tabs on top are wrong, just that in your specific case they're creating issues, so I think it would be a good idea to change orientation to get rid of these issues. HOWEVER, you'll see in next step that I will do some changes that allow you to keep the tabs on top as well. See the first image I posted above and you'll see the tabs on the side fall on the more easy to reach zone, so that's something to consider

3. Re-arrange inner elements Now, with more space, we can re-arrange the items. Here you can keep the tabs on opt or place them at a side. If you're short on vertical space, I think that keeping them on top would work better for mobile while keeping them at the side would be better for desktop (if needed) and tablets. You'll need to test here. Also, you'll see that I'm using large "call to action" elements to provide easy gesture affordance. As an alternative, you can use "Material like" FAB (Floating Action Buttons)

And without further ado, here are my quick mockups on how to solve your issues:

and with FAB (space optimized version)

Finally, take a look to button copy, shadow on tabs, tridimensional effects by z-index and other small yet important things that will improve the usability of your game

ANSWERS ON COMMENT

• "Header bar" will be utilized to display core user info through all screens (3 type of resources, premium currency, current location etc.)

OK, then you can use a sub-header or secondary toolbar. Again, taking Material Design as example, take a look at UI Regions page, and then Toolbars and App bar sections

• In the "Shop" section there should be "Buy" button with a price (up to 5 digits + currency icon).

In my example (which is just an example and guideline!) you can easily change "use this item" for "buy for $123,45". This means you can't use a FAB unless... you use actions! (see below because it relates to your 3rd edit)

• The examples of items: "Speed up process for 8hours", "Speed up process for 24 hours", "Speed up process for 3 days" so there will be some numbers on Icons themselves AND this numbers shuld be readable as fast as possible.

The empty square is supposed to be this area and you could add all that content without issues at very legible sizes. If not, simply adjust size, remember this is a guideline and I have no idea what your content is

Also, get to actions concept. It's a common issue to mix actions with content or concepts or sub actions, because sometimes they're really interlinked. In your case, you could simply have a buy and an use button. Nothing else. Then, you could have a pop-up or bottom sheet or whatever that displays the sub-actions for these actions, like "speed up 8 hours for $1,23", "speed up 12 hours for $4,56", "speed up 24 hours for $7,89". Again, this will require testing and some marketing decisions, but whatever path you want to choose, my mockup (plus these comments) allows for all of it.

Well, hope this helps you!

Answer 2

Use organizational hierarchy

I'm not sure why you need the top bar to be present while the user is in the shop (a modal interaction), but maybe it's real time gameplay or whatever so I'm going to assume you need it there.

To figure out visual layout:

• Go from broadest context to narrowest context. The hierarchy of contexts is roughly: user -> shop -> category -> items.

• Now map the hierarchy to visual layout, top-to-bottom, left-to-right. This means, roughly:

  • Topbar = user, sub-bar = shop/inventory, left-panel=category, right panel = items.
  • Since most users process pages top-to-bottom, left-to-right, this layout aligns well with the visual hierarchy.

  • The split left/right scrolling panels are not ideal, but they are a reasonable approach given the space constraints and aspect ratio for a landscape mobile window: the left and right panels are easily accessible to gamers who (presumable) will play this with both thumbs.

  • Some anal commenter will add a comment below about RTL languages no doubt.

• Now check for ergonomics
  • The common interactions are: Back to game, Switch from inventory<->shop, Scroll items, Scroll categories, Buy item. Since the controls are mainly on the left and right side of the page, the ergonomics should be pretty good. Also, the use of the inactive sub-header provides spacing to separate the Buy buttons from the Inventory button when the item panel is scrolled.