Intuitive Interface Design

Game Play & Game Design
#1

Hello all! I’m still in the middle of developing Pixel-Space, and I’m needing help with INTERFACE design.

Basically, where the HP and Ammo meter goes, where the inventory goes, where the mini-map goes, etc. How do you make it convenient? What do you have to mainly focus on? Are you supposed to completely hide it from the player, should everything be controlled by a button so you have more screen real-estate?

I’ve created 3 different game HUD designs,

Here’s the coloring key.

Design A:

Design B:

Design C:

Tell me which one is best, I’m really needing help on this. If you have one of your own, feel free to share. Oh, also, if you know any articles or tutorials on this, send me a link :smiley:

Thanks in advance,

  • Kris.
#2

TBH, I like design B the most.

#3

My advice is to look at other, successful games that required interfaces like your own. Games like the older Contras, Metal Slugs, or Metroids. They probably spent a lot of time on trying to get the interface right and you can take tips from them. That said, if it’s an action game and people need to know both their basic stats and the state of their inventory it’s typically best not to separate them (Like in A) since that requires them to focus on three different portions of the screen (Top, bottom and middle) as opposed to two (Top and middle).

#4

Design A :point:

#5

Design A obviously.

#6

Thank you for that!
I’m probably going to use B, now that I think of it, :smiley:

#7

If the inventory is anything like a “quick use” thing where you hit a hotkey to use the various items, then design A will be familiar for most gamers (see diablo and most MMOs). It’s impossible to give an answer that works for all games.

#8

When you open up the full inventory, a different gui will show.

#9

[quote=“kpars,post:1,topic:42697”]
Ask your players.

To be more precise: if you write your GUI properly then it will be trivial to move them around, and you can add an option. If you also have a feedback (with player consent) which tells you which options people are using (and how long they’re playing), you will find out which one is preferred, and can make that the default.

#10

http://ts2.mm.bing.net/th?id=H.4910643325569611&pid=15.1

I don’t have any players. :emo:

Once I get the first build of Colonist mode in the game done, then I will possibly put it on TigSource, but till then, I’m here preparing the game.

#11

One question to ask is why is your inventory screen on all the time? Is it because you can only carry a handful of items i.e. < 7?

Otherwise, there’s no need for it to be constantly taking up real-estate and thus it should be at least dismissible or movable. Something that is temporary normally appears closer to the center of the screen rather than on the edge hence design A is my choice.

#12

Your ‘basic’ inventory is shown on the screen. You have 5 slots in it.

When you press shift, the full inventory screen shows up in a completely separate GUI.

#13

You say ‘Basic Inventory’ but what does that actually mean?

Is it like a quick slot where you need to know how many of a given item is available for use, or need to know how many bullets for a certain weapon are available? Or is it just like a quick use thing so that you can select one quickly without having to go back to your inventory to make decide what you need?

The sort of inventory changes what you’re doing as does what types of items it will contain.

#14

Well, that probably wasn’t the best term to describe it with.

Basically it’s just your first 5 slots.

#15

Make it configurable so players choose which one they prefer?

My approach to UI elements is to make it as minimal as possible. If it isn’t essential to know, just take it off the screen.

For example, in a game where I had, say, a hunger bar that decreases very slowly, I’d only show it when there’s an actual change, and hide it afterwards (with a key to make it pop back up).

But that’s me.

Really, if you have three layouts that you like, allowing the user to choose the one she prefers should be trivial.

#16

To be honest, the best GUI elements are complete lack of them on the screen. Minimal is a very good rule of thumb for any GUI. The less elements that are shown on the screen at once, the better the chance that you won’t have a very cluttered and distracting GUI.

In general, you want to make sure your GUI is completely “out of the way”. There are few cases where any element is more important than the game play itself. You want to keep all those other elements away from the middle of the screen and put them more toward the edge of the screen.

Secondly, you have to be very keen to what kind of game you are designing. As a general rule, I realized that most GUI’s follow the convention of using the top to display general information (like timers, health bars, and ailments). The use the bottom bars for more crucial (and interactive) information (like inventory items, power-ups, and menus).

“If your game has a lot of action sequences and you are forced to have to click and inventory over and over again. You might want to assign these sequences to predefined keys or put the inventory near the bottom edge of the screen. Things like the health bars or statistics are usually put near the top of the screen since you won’t be interacting with them often.”

I believe the reasoning behind this is that any disruption of visuals because you are forced to click an option is considered a bad thing. Moving the mouse from the bottom to the top of the screen (and back down again) can distract heavily from the flow of any game.

Lastly, a GUI’s purpose is to tell users all they need to know without them having to open up a menu to get that information every two seconds. This is the major reason why it depends on the game. Some games require that a mini map be shown on the GUI because you are continuously looking for items, while others do not. Each game has their own requirements.

The main thing to remember is, keep in mind what people will be looking for in your game. If you are able to interact with the item, keep it toward the bottom edge of the screen. If the item is for information, keep it toward the top edge of the screen. (I actually blame most PC’s OS for this form of architecture, but it happens to be the most effective of being the least visible for all purposes.)

#17

I wanted to make sure you could still see the game screen if playing on a small resolution (take an applet for an example)
Here’s what I’ve managed to come up with: (700x480)

#18

Hmmm, that inventory bar could collapse to the side, showing only the active item, and expand when the user is switching between items.

#19

On top of what Oskuro said, maybe add transparency?
Right now, the large UI pieces seem to invade too high percentage of the screen, in my opinion.

#20

Whenever possible, avoid redundant UI from getting in the way.

Make it (semi-)transparent, remove it etc.

No-one likes an empty inventory slot in their way all the time. :wink: