How can I provide more detail for a UI element when "mouse over" functionality is unavailable?

Question

I have a game for the iPad and there's no "mouse entered" or "mouse hover" functionality on that platform. Within my game I have a hotbar or skill bar like below.

Typically a game that uses such feature has mouse and the player can hover the mouse over the icon to get a small panel with skill name, cost, effects, et cetera.

Since I cannot provide mouse hover tooltips as is typical, what approach should I take to offer detail information to the player? Right now I have a separate skill screen with detailed skill descriptions, and I'm posting the skill name and cost into the chat console on tap.

Should I include names within or under my icons in a hotbar as described above? Introduce long press to display a popup with name and detailed info?

Answer 1

You can use a menu with options / information, with two interaction options:

Option 1 (I consider this one more intuitive).

1. Tap -> Opens the menu
2. Double Tap -> Uses the item directly
3. Tap option in menu / Tap close button -> Close the menu / Close the menu and perform the action.

Option 2 (This one could work with power users).

1. Drag -> Open the menu
2. Tap -> Uses the item directly
3. Dragend -> Close the menu and use the selected item

Answer 2

From the top of my head, I remember two UI designs that you could add there.

First one is a rule on Android app design side. When a player HOLD the skill for one second, that is, make a long-press, show the small panel with the skill name. Maybe give a slight vibration on the device to get it to know it.

The second may not work well if the game requires fast acting (what probably is your case). Make it a two tap action. First tap: show the small panel, second tap: use the skill. This can bother some players because if they already know the skill name, it forces them to rapidly double-tap the toolbar. For this, you could give the option to disable this double-tap feature, so experienced players can be more satisfied.

And remember! Make the small panel appear slightly more up than you would place it if you were using a mouse. Maybe 48 DIP is enough. (48 pixels in a 160PPI screen, which roughly is the size of the tip of a finger on most screens)

Answer 3

If you have a lot of skills/items you can have a help circle in a specific place in your UI that will be a target place for DRAGGING items to see the help / tooltip.

1. Touch the potion
2. Drag it to the help circle on the bottom right of your UI and release it there
3. The help tooltip appear

Answer 4

This is a nice UI problem. Creating mobile interfaces often is about what you throw away and being obvious about what you're doing.

I see this and think of two options. One is to add a help button of some kind where information is kept about the skills. If the information hidden changes during the game (extra stats etc) or are needed in game then somehow you need a modal window (overlay) that displays what you need.

A long press is one of those actions that are rarely used. Instead dragging the skill up to reveal what it does could work.

Best option is create several solutions and test it as even the best UI designer gets it wrong a large percentage of the time. Create hypothesis in some kind of prototype and let humans other than yourself fiddle with it to see which makes the most sense.

Answer 5

Two ways of doing this immediately came to mind...

The first option: Slide out UI from the right. This drawer can hover over the content and provide details specific to that particular skill. The benefits of this approach is the user will not have to leave the screen as the slide out acts as a secondary item that can quickly be closed.

The second option: Modal popup that provide information on that specific skill. The benefits are about the same as the option above except that it's a different UI element.

Choose either or depending on what option is more consistent with your existing app. Do you currently use slide outs or modals? Again, use whichever fits.

On another note in this case, I would avoid using actions such as double tapping and long taps. The existing mental model behind double taps is zooming in on some OS's. Long taps are usually associated with edit/share action popups.

Answer 6

Simple option, but one you may not be looking for: have less skills.

Users usually only really like a small handful of the options presented in these kinds of games. There's no need to give a player 10 skills if she only really uses 2 of them. Even if the player uses all of them (some games encourage it mechanically), the player only really enjoys using a smaller subset.

The only skills your game really needs to have are the fun ones. The ones that players get excited about. The ones where the player feels rewarded, accomplished, or satisfied by using. Anything else is just filler/noise.

If you feel you really need a wide variety of options, consider ways that players could combo a few skills' effects during play instead of making a large number of pre-canned skill effects. I'd rather design 5 things and give the player 5*4=20 options than design 10 things and give the player only 10 options.

Remember, less is more. Or as one wise man put it, "cut the good; keep the great." The problems of clutter are often best solved by throwing out the junk you don't need.

What are my options for reminding the player what individual skills on this hotbar are if I cannot use a mouse hover panel?

Cutting down the number of skills the player can have "equipped" gives you more room for descriptive labels and layouts in the UI.

Restricting yourself to a small set of verbs (skills, actions, etc.) makes it much easier to create meaningful, self-descriptive, memorable icons.