I'm building an inventory feature for my game and have ran into an issue where I need to modify my existing inventory layout or introduce way to allow side by side comparison of two items.
Each item in my inventory can have multiple properties . These are represented with little icons with numbers next to them on the top of the screen. The space below (500 coins) was reserved for special traits of the item that would have a text label like "Enchanted +4", "Defending +1"
This design appeals to me for aestetic reasons and order - the name is on top, inventory items are on the bottom, two large well defined buttons - upgrade and sell for inventory manipulation. But I ran into an issue illustrated by the 2nd image.
During testing, I found that even I, as a developer find it hard to keep 5 parameters in my head if I have only 1 panel to show equipment - there's just too many numbers and I need to see both items to make a judgement.
So I thought that I would have a table with 2 rows above inventory. A tap on the item reloads the bottom row with the last tapped item, the previous one slides on top, allowing to compare items side by side. But now I have an issue where I don't have enough space to display text labels for special effects, and the "Upgrade" / "Sell" buttons start to drift all over the place. Somehow I need to link them to one of the items I'm displaying. I tried to stick them on top, but it does not look very orderly to me.
How can I use limited existing space on iPad to display 2 panels side by side?