Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

enter image description here

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?

share|improve this question

migrated from gamedev.stackexchange.com Jan 3 at 15:43

This question came from our site for professional and independent game developers.

6 Answers 6

up vote 7 down vote accepted

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

enter image description here

share|improve this answer
    
This looks like a solution I can implement! –  Alex Stone Jan 4 at 20:31

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)

share|improve this answer

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
share|improve this answer
    
This is a very interesting idea, or you can drag a magnifying glass/question mark over onto an item or toolbar cell –  Alex Stone Jan 4 at 2:30
    
Yeah! Very nice adjustment. –  Maor Bluman Jan 4 at 13:51

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.

share|improve this answer
    
I like the swipe/drag up approach. I think it's easier to implement than dragging objects around, and the panel can be swiped up/down to show/hide –  Alex Stone Jan 4 at 2:32

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.

enter image description here

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.

enter image description here

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.

share|improve this answer

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.

share|improve this answer
    
No hate, but I liked to have dozens of skills at Ragnarok Online >.> –  Gustavo Maciel Jan 3 at 15:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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