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
- 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!
