1

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.

enter image description here

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?

enter image description here

Improve this question

3 Answers 3

Reset to default
3

What is more fun for your users - choosing between this upgrade vs that upgrade, or doing the tedious math to compare two items?

With your game, the user shouldn't care that his current weapon slot item has stats of [blade] "4", [helm] "2", and [fist] "1". The user user more likely cares to know that an upgrade option presents a bonus of [helm: +1] [fist: +2] over whatever they have now.

Thus, you only need to allocate UI space for one item, but this time display the difference in stats, not the absolute stats. They can always go inspect their equipped items in a different UI if they are curious about the actual stats.

Something like this:

stiletto upgrade item, with stats upgrades of +1 blade, -1 helm, +2 fist; and +trait1 and -trait2

This principle is also evident in the WoW screencap in @MaorBuman's answer ... being the the green +numbers at the bottom of the currently equipped item. (Also, ignore the whole distraction of how that UI display is invoked, for reasons you've already explained ;-) You can easily imagine that that display could be simplified further to show just those details alone:

wow, simplified: name of currently equipped item, name of compared item, and a list of stats changes that will occur if equipped

Improve this answer
1

World of Warcraft has a heuristic that the player would like to compare an item usually to the same-slot item that is already equipped ("Is it an upgrade or not?"), therefore they use the Shift key and mouseover to compare the two.

Maybe you should use a similar way to the way you asked to provide help.

You can try to take the method to provide help on an item and detect that: if it's a wearable item, provide a 2nd tooltip with the comparison. Maybe it'll give you an idea...

World of Warcraft item comparison
(credit: curse.com)

Improve this answer
2
  • This is really easy on the PC with right click or mouse hover. iPad has neither
    – Alex Stone
    Jan 4, 2014 at 16:04
  • On the iPad, you can use the help method we discussed on the other topic, to also show comparison.
    – Maor Bluman
    Jan 4, 2014 at 17:59
0

You could consider using a multi-level menu hierarchy, to give yourself more screen space to work with.

If you offer a specific item comparison screen, you'd be given the opportunity to dedicate more screen space, plus use the familiar red X button at top right like you're currently using, to exit out of comparison.

The comparison screen could be used for more features you may want to associate with the task of item comparing.

Also I suggested a tab interface instead of all inventory items on-screen at once.

Here's a mock-up example:

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.