Cleanish GUI

[Radiant]

Hm...

Preserve
Initialize
Relinquish

[Galen]

I do not have a problem with that at all. Why should I? "Procure" is a little masterpiece.

I had done it as a joke. But now that I think about it, I'll probably keep it. It adds character to it.


@Radiant's post: "Relinquish"? Nah. Howabout Depart, Retire, Cease, Abandon or Discontinue?

[Radiant]

How about vacate? Or secede? Strand? Repudiate? Ooooh... how does abnegate sound?

[Galen]

Maybe Abnegate would be slighly too outlandish.

[Ghost]

Can't help it, I *like* it. It has style, it reads well, it totally calls for a gilded plate with the text embossed.

PS: I understood the joke- but isn't it funny how a joke can become an idea 

[Galen]

I'm getting visions of a bizzare aristocrat robot. If only I could sprite/illustrate anything decently.

[Ghost]

I'm getting visions of a bizzare aristocrat robot. If only I could sprite/illustrate anything decently.

Greetingage! Something like... this?

[Galen]

I was thinking more along the lines of a roundish floating thing with a frilly neck collar and a white wig. But hell, a game isn't made of just one character.

I'll see if anything plotwise comes to me.

[Dualnames]

Needs some colour apart from that i really like it.

[paolo]

"Procure" to me suggests going out and hunting for something. I think "acquire" would be more suitable for picking something up that is already to hand.

One typo: it's "retrieve" ("i" before "e", remember).

Now for some constructive criticism on the GUI design from a software engineering point of view.

The graphical interface paradigm familiar to most computer users is that highlighting at the top and shadow at the bottom of a control means it is a button that can be clicked (the highlighting and shadowing make it look raised). Reversing these gives either a button that is being pressed or is permanently selected, or a text label that is just there to display some information and cannot be interacted with (compare the "CAPS" label that appears at the bottom right of some word-processing packages when you press caps lock). The highlighting and shading on the load/save/quit buttons should therefore be switched round. Swapping them round just to give some variety is a bad move, as it will confuse the user.

Grey on grey can be hard to read. I'd recommend increasing the contrast by using black text on the buttons.

Using "converse", etc, is fun and original, but "talk", etc, are readable at a glance. Using longer, Latinate words means that the user has to mentally "translate" the words when looking for the button they want. (Of course, once they know where the buttons are, that is no longer a problem.) Shorter, simpler words on buttons are immediately understood.

Icons are better still, as has already been mentioned, provided they are clear and can easily be distinguished from one another. If you use icons, you may need to make the buttons bigger so the icons are big enough to be understood.

Space out the bottom three buttons to reduce the chance of the user pressing the wrong button.

Make the layout of the buttons symmetrical so that they line up at the right edge as well as the left.

You can get round the problems of how to draw the letters by typing the text in a font of your choice and then putting this text on to the buttons as text labels in the AGS engine. If the result still isn't good enough, use antialiasing to smooth out the pixels (eg, by typing the text into a word processor, capturing the screen and cutting out what you need in a graphics program). Text can then be made quite tiny and still be readable. I used this technique in Trance-Pacific for some of the text in the Memo GUI.

Reduce the gap between the buttons and the inventory slots. It looks like something has been left out. Either make the inventory longer, or make the whole GUI shorter.

Make the arrows into buttons (with highlighting and shadow) to make it clear they can be pressed and are not just part of the background image.

I hope this is useful to you. Is this going into a real game, or is it just for fun?

[Galen]

"Procure" to me suggests going out and hunting for something. I think "acquire" would be more suitable for picking something up that is already to hand.

True. But both really mean "to gain possesion of" (I know that's a typo but I just got up).

One typo: it's "retrieve" ("i" before "e", remember).

Ah, trying to spell a word while spriting it isn't exactly my Forté.

Using "converse", etc, is fun and original, but "talk", etc, are readable at a glance. Using longer, Latinate words means that the user has to mentally "translate" the words when looking for the button they want. (Of course, once they know where the buttons are, that is no longer a problem.) Shorter, simpler words on buttons are immediately understood.

I'm going to try and experiment with overlaying icons over the buttons later on. This might yield some interesting results.

Make the layout of the buttons symmetrical so that they line up at the right edge as well as the left.

... I spent so very long trying to get the spacings perfect and they just come out wrong for me I guess.

I hope this is useful to you. Is this going into a real game, or is it just for fun?

While I'd like to keep some of the resultant work and layout for future games, I'd also like to turn it into a proper game.

[Shane 'ProgZmax' Stevens]

I like what you're trying to do here because a lot of amateur ags users might not want to or feel confident enough to make all the elements of a gui.  Taking this into account, though, the best way to tackle any gui is in parts: backdrop, button sizes, gui style, and then place them in an eye-pleasing way.  The nice thing about keeping all the elements as separate parts is that you can rearrange the gui to suit individual tastes.  Taking this into account, I made an edit by redrawing each part of the gui separately and then put them together at the end.

1.  Here is the default gui backdrop.  I changed the colors slightly to something a little less plain but otherwise left it empty.  This way someone can add whatever kind of pattern they want to over it.



2.  Redesigned the action buttons slightly, adding an up and down position.  I also left a blank in case someone wanted an action I did not create.



3.  Made an alternate button style that could use either single letters or symbols and made the up and down positions as well as a blank.



4.  Shaded the parser/status line and separated it from the gui.



5.  Shaded the inventory window and reduced it in size slightly.



6.  Shaded the inventory item backgrounds and made them separate from the display. 



7.  Shaded the inventory arrows and gave them up and down positions.




And finally, I put the elements together in an orientation that looked good to me.





There is still a good amount of space for three more actions as well as another mini-action (if needed) and it gives people the ability to quickly edit any of the parts.

I'd definitely recommend a more interesting color scheme and some details first, though!

[Galen]

 :o

Wow. So much nicer than my pile of crap (as I've mentioned, I can't compose, rhyme, draw, sprite, shade, paint, animated, model or anything artistic not listed).

[lo_res_man]

ooh! ooh! you should use the old word for load, that cost me many a zork game. "restore"

[Galen]

Yeah, the current wording doesn't fit right.

[Radiant]

I like the way it looks, but I don't like those tiny buttons stuck away at the right end. They're somewhat confusing and rather inconsistent.

[vertigoaddict]

ooh! ooh! you should use the old word for load, that cost me many a zork game. "restore"

Instead of 'save'
How about:

'document'
'Archive'
'Sign in'
'memorize'

and instead of 'load'

'recollect'
'recover'
'Log out'
'Remember'

[Shane 'ProgZmax' Stevens]

Different sized buttons aren't really inconsistent, they're just design decisions.  Many real-world devices use different-sized buttons (my dvd player and my tower are two examples), and it's usually a stylistic decision, though it can be to preserve space as well.  As for being somewhat confusing, I just used the more generic Q-quit and i-info labels, though they can be anything and be used for anything, really.  I would probably put Save, Load and Quit as mini buttons like that if I were to use a gui like this, personally, since I don't think save or load should be paired with actions, but that's just me.  It's just a generic layout and the nice thing is it can be reassembled how ever people would like to see it best within reason.  A good add-on would be icons to replace the text buttons and perhaps an alternate gui display.

[Galen]

That was the original intention for the GUI, taking it's overlaid style from Sector 09. I realise it isn't at all eye pleasing. So I've started to put proper shading into the elements.

[Galen]

Dammit. I'd almost completed it, it was looking great and I tried to import it in AGS and ended up accidentally writing over it with the old version. Dammit dammit dammit.


Oh well, no point crying over overwritten milk. I'll upload the work I've remade so far in a minute.