I'm having some serious problems with this. Nothing I can throw together looks good to me. I was wondering if there are some examples or nice interface designs out there that inspire this sort of thing? Anyone seen a movie with a really cool (probably faked) user interface? That sort of thing. I'm corrently working on the inventory, and I swear it looks like I'm using three seperate schemes. One for the navigator, one for buttons, and one for the lists. What's worse is that all three look bad to me. The interface+fonts do grow or shrink based on resolution, though: If anyone has time and cares to throw something together to give me a push, that would be really cool, too. Thanks for any advice. edit: This is my next attempt. Let me know what needs fixed? The persona guy images seem to clash with the style more than anything else, but not much I can do about it. Most of this is hardcore WIP. Do you think I should have this overhanging the game view or should I fill the background with a solid color? And let me know if it looks any better: [Edited by - Jiia on April 9, 2005 5:05:52 PM]

Indeed it looks like those three completely different design, although do seem to share the same font.

First, I would choose a theme (color scheme, font etc.) that fits the game: so if it is a Mario Kart like game, you'll would choose a cartoonish theme, if it is a space adventure you'll want to throw in a more futuristic design. Since a don't know what the game is about or what it looks like (besides the screenshot), it's hard to come up wit ideas of my own. However, you could look at some screenshot of similer, commercial games (Google images!). That might give you some inspiration.

Second, if I would have to choose between the three different 'styles', I would pick the style as used for the inventory list.
The panel in the upper right corner looks very cool, but it might be difficult to maintain that 'look-and-feel' through the entire game, because of its complexity. But if you are (or know) a good designer, the may not be an issue.
The buttons in lower right corner could be an option, but I guess I would make them a little less transparant, to make them more readable. Also, you may use some more icons/symbols together with or instead of the text. As a player, it's easier and faster to recognize images, then to read text.
The lists on the left I like because of their simplicity. Again, icons could be used for user-friendliness and to spice up the looks a little.

I guess it's best to start make a list of everything that has to be displayed on the screen. After that, design a layout so everything fits and has a logical position. Then care about the actual design.

Quote:

Original post by WanMaster First, I would choose a theme (color scheme, font etc.) that fits the game: so if it is a Mario Kart like game, you'll would choose a cartoonish theme, if it is a space adventure you'll want to throw in a more futuristic design. Since a don't know what the game is about or what it looks like (besides the screenshot), it's hard to come up wit ideas of my own. However, you could look at some screenshot of similer, commercial games (Google images!). That might give you some inspiration.

Sorry, I should have mentioned that. The game has a futuristic cyberpunk theme. I think I probably have it easy, as I can not imagine having to make medieval or cartoony controls. It's easy to emulate computerish stuff in a computer. But at the same time, that means it has to look better than other theme types. And considering that it's an RPG, it's a really important part of the game. Thanks for the google image link, I completely forgot about that feature.

Quote:

Original post by WanMaster Second, if I would have to choose between the three different 'styles', I would pick the style as used for the inventory list.

I feel the same, but I can't seem to design a decent looking navigator, buttons or other controls in that simplistic design. I mean, I can, but they look just like the lists. Lines with filled rectangles. It starts to look really blah really fast. I'm thinking something would work, that could compliment the simplistic look and keep the same feel, but I can't find it. Or maybe I need to find a way to add a small amount of extra detail to the simplistic look.

Quote:

Original post by WanMaster The panel in the upper right corner looks very cool, but it might be difficult to maintain that 'look-and-feel' through the entire game, because of its complexity. But if you are (or know) a good designer, the may not be an issue.

Heh, I think we already know I'm not a good designer. At least not with interfaces. And you are correct, it's a huge pain to make that look expandable.

Quote:

Original post by WanMaster The buttons in lower right corner could be an option, but I guess I would make them a little less transparant, to make them more readable. Also, you may use some more icons/symbols together with or instead of the text. As a player, it's easier and faster to recognize images, then to read text. The lists on the left I like because of their simplicity. Again, icons could be used for user-friendliness and to spice up the looks a little.

Icons are a good idea. Especially for buttons. This one thing would probably make a huge difference. The text buttons are really what makes it look so.. cheesy.

Quote:

Original post by WanMaster I guess it's best to start make a list of everything that has to be displayed on the screen. After that, design a layout so everything fits and has a logical position. Then care about the actual design.

This was my initial design. It's changed a little, but not by much. I found myself not having room for the "stat changes" window, but icon buttons may change that. This is a moch-up, not a real snap:


I appreciate the suggestions, a really huge help!

Quote:

Original post by Jiia

Hmm..

I like the Metallic thing in the corner but the inside of it (where its all bumpy) should be smoothed out more to make it look like a.. well a.. ermm.. a "well engineered metal-panel-type-thing"

Also I think the buttons along the right shouldn't be there and maybe should be turned into an extension to the metal thing that pops out of the bottom of it.. This would keep it looking in the same style and make everything look alot less random..

The inventory windows are fine I think and I like the fonts, but maybe change the buttons inbetween the two windows (the ones with the arrows on) to a similar stlye to the metal thing..

I hope my gibberish made sense..

I think its kinda nice...
Some advices from my point of view:
1) I would use item pictures in the inventory, unless u want to keep it this way
2) In the "wearing" part, you should have slots to put the equips (for example, slot for pants, for helm, etc).
By the way, in your second pic, the guy seems kinda odd.. His head seems to be too small to fit that body...

I have to agree the interface seems very disjointed and using clashing styles.
The control on the right is a bit rough as well mainly the big blue blob of a screen in the middle it which seems to be a contrating design of angular in circular and doesn't work in my opion.

What you could do since its suppose to be a cyberpunk game is to make that control the central feature of the screen turning it into a sort of furturistic PDA. You could place it either on the left or in the middle and having the other all the features of this screen access by buttons on the control, which cause screens to flip out or display some data on the main PDA screen. So you click the inventory button and a translucent blue screen appears coming from the bottom right of the PDA listing your item. You can select items in the inventory and data on the item is displayed on the PDA's screen. If you select character data, a larger screen displays above the inventory one also translucent blue with the character data and a 2d or 3d character model with selectable regions. You can then select a region and an item in the inventory to equip that item to that region of the characters body.

Just a thought anyway.

Quote:

Original post by Zigmat 1) I would use item pictures in the inventory, unless u want to keep it this way

Agreed!

Quote:

Original post by Zigmat 2) In the "wearing" part, you should have slots to put the equips (for example, slot for pants, for helm, etc).

I wish I could do this, but characters have too many parts. Let me see, head, neck, respiratory, visual, hearing, torso, shoulders, biceps, forearms, hands, loins, knees, shins, and feet. Up to three layers of items can be worn on each part. Underlining armor, clothing, then heavy suits or coats. Users won't actually need to concern themselves with parts. Just that some suits will take up certain parts where others won't. When item(s) are selected in the inventory, it shows all items that must be removed to equip them. And there will be filters to only show a certain layer or certain type of suit (clothing, armor, or gear). Any ideas on how I could actually show diagrams instead with this setup?

Quote:

Original post by Zigmat By the way, in your second pic, the guy seems kinda odd.. His head seems to be too small to fit that body...

Oh man, not again. Is it really too small? Here are some better snaps:


Thanks for all of the suggestions. I'm still a little torn between ideas. I'm not sure which direction to take.

edit:

I forgot to mention that in that moch-up, the way the dude is centered in between window controls, that's how the final result is meant to be. The character suiting up will be centered there and wear is equipped as you throw them over into the list. I could even go so far as to draw lines to each suit part. But like I said, with so many combinations, it will be a mess.

Ok I only skimmed all these posts, but the first thing I noticed was how big the whole thing is - ok if its going to be displayed on a tv on say XBOX... but I am guessing this is for PC.

Screen real estate is important to a player, they want to see as much info
as possible - yet without it getting in the way.

Look at all your wasted space

Above all, look at other games and find a gui you like, do something similar

Quote:

Original post by Zigmat 2) In the "wearing" part, you should have slots to put the equips (for example, slot for pants, for helm, etc).

There are examples of such complex inventories in some games, like Daggerfall and Morrowind have stackable equipment (upto 3 layers, clothes/armor/robe). If you have different layer screens for the player to see, you could overlap them on one spot on the monitor and allow the player to toggle between them with a series of buttons below the inventory screen.

I'd have to agree with the others that the more favorable one is the inventory style. You could try making it less uniform for the PDA and stand out more by adding silver/gold trims/wiring with the same coloring of the inventory and mixing in complementary colors, such as blue buttons and such. If it still feels to uniform, you could also try trying lighter/darker shades than those in the inventory to highlight it.

Idle curiosity, how did you come up with the cool black marble'esk scheme for the inventory anyway? :D

@Jiaa, it is too small, i think you should get a profile of an average sized man, remember he is 7 1/2(or something like that) of his heads tall, and that guy is about 9, 9.5.